/*
 * Alphabet Journey — the full-screen player.
 *
 * Hand-written rather than Tailwind: the player is built from JavaScript, and
 * the site's Tailwind Play CDN would have to see every class at runtime. This
 * file is the player's whole look, scoped under .jr so it cannot leak into the
 * page around it.
 *
 * Per-letter colour comes from two custom properties the engine sets on .jr:
 *   --jr-ink   the letter's colour      --jr-tint  the background
 */

.jr {
  --jr-ink: #e11d48;
  --jr-tint: #ffe4e6;
  --jr-dark: #1e2a4a;
  --jr-good: #16a34a;
  --jr-card: #ffffff;
  --jr-r: 28px;
  --jr-display: "Fredoka One", "Arial Rounded MT Bold", system-ui, sans-serif;

  position: fixed;
  inset: 0;
  /* Above the site nav (600); BELOW every gate and payment screen
     (js/subscription.js: 1000-1100, the app pitch: 1200), so a parental gate
     or the subscription screen is never hidden behind a journey. */
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 80% at 50% 0%, #fff 0%, var(--jr-tint) 70%);
  color: var(--jr-dark);
  font-family: Inter, system-ui, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: contain;
  /* No text selection, callouts or double-tap zoom on the game itself.
     Pinch zoom is NOT disabled: the viewport meta leaves it alone. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.jr[hidden] { display: none; }
html.jr-open, html.jr-open body { overflow: hidden; }

/* :where() keeps these resets at zero specificity, so a component class
   (.jr-start, .jr-big, .jr-next) always wins over them. */
:where(.jr) img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
:where(.jr) button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jr :focus-visible { outline: 4px solid #2563eb; outline-offset: 4px; }
.jr .jr-stage:focus-visible { outline: none; }   /* focused for screen readers, not a control */

.jr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.jr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 4px;
}
.jr-icon {
  width: 52px; height: 52px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(30, 42, 74, 0.12);
  font-size: 24px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.jr-exit { font-size: 22px; color: rgba(30, 42, 74, 0.7); }
.jr-steps {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.jr-steps li {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(30, 42, 74, 0.15);
  transition: background .3s, transform .3s;
}
.jr-steps li.done { background: var(--jr-good); }
.jr-steps li.now { background: var(--jr-ink); transform: scale(1.35); }
.jr-stars {
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--jr-display);
  font-size: 22px;
  white-space: nowrap;
}

/* ── Stage and action bar ─────────────────────────────────────────────── */
/* Three rows: top bar, stage, action bar. The action bar holds the one
   control the child needs next (START, ▶, Clear, PLAY AGAIN) and is never
   scrolled away, so it is visible on every screen size and orientation. */
.jr-main {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
.jr-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 2vh, 22px);
  padding: 4px 16px 8px;
  overflow: auto;
  outline: none;
  text-align: center;
}
/* Centre the activity when it fits, top-align it when it does not. Plain
   `justify-content: center` pushes an overflowing activity off the TOP of
   the screen where it cannot be scrolled to (the half-letter on a phone in
   landscape); these two growing spacers centre without that failure. */
.jr-stage::before,
.jr-stage::after { content: ""; flex: 1 0 0; }
.jr-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 16px 14px;
  min-height: 24px;
}
.jr-actions:empty { padding: 0; min-height: 12px; }
.jr-enter { animation: jr-fade-in .35s ease-out; }

.jr-panda {
  position: absolute;
  right: 8px;
  bottom: 4px;
  width: clamp(56px, min(14vmin, 13vh), 110px);
  height: auto;
  pointer-events: none;
  opacity: .95;
}
.jr-panda:not([src]) { display: none; }

/* ── Start ────────────────────────────────────────────────────────────── */
.jr-hello {
  margin: 0;
  font-family: var(--jr-display);
  font-size: clamp(32px, 8vmin, 56px);
}
.jr-big {
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--jr-display);
  font-size: clamp(90px, min(42vmin, 34vh), 320px);
  line-height: 1;
  color: var(--jr-ink);
  text-shadow: 0 6px 0 rgba(30, 42, 74, 0.12);
}
.jr-start {
  min-width: min(80vw, 340px);
  padding: 22px 40px;
  border: 0;
  border-radius: 999px;
  background: var(--jr-good);
  color: #fff !important;
  font-family: var(--jr-display);
  font-size: clamp(30px, 7vmin, 44px);
  letter-spacing: .04em;
  box-shadow: 0 8px 0 #15803d, 0 14px 24px rgba(22, 163, 74, .3);
  animation: jr-breathe 2.4s ease-in-out infinite;
}
.jr-start:active { transform: translateY(4px); box-shadow: 0 4px 0 #15803d; }

/* ── Intro / listen ───────────────────────────────────────────────────── */
.jr-hide { visibility: hidden; }
.jr-hero-btn {
  border: 0;
  padding: 12px;
  border-radius: var(--jr-r);
  background: var(--jr-card);
  box-shadow: 0 8px 24px rgba(30, 42, 74, 0.12);
}
.jr-screen-intro .jr-big { font-size: clamp(64px, min(30vmin, 21vh), 240px); }
.jr-hero { display: block; width: clamp(90px, min(34vmin, 27vh), 280px); }
.jr-pic { display: inline-flex; align-items: center; justify-content: center; }
.jr-pic img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.jr-pic-word { font-family: var(--jr-display); font-size: clamp(24px, 6vmin, 40px); padding: 20% 8px; }
.jr-word {
  margin: 0;
  font-family: var(--jr-display);
  font-size: clamp(26px, min(9vmin, 7vh), 64px);
  letter-spacing: .06em;
}

.jr-trio { display: flex; align-items: center; gap: clamp(8px, 3vw, 24px); }
.jr-tile {
  width: clamp(80px, min(34vmin, 28vh), 240px);
  aspect-ratio: 1 / 1;
  border-radius: var(--jr-r);
  background: var(--jr-card);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(30, 42, 74, 0.1);
  border: 5px solid transparent;
  transition: border-color .3s, transform .3s;
}
.jr-tile .jr-pic { width: 100%; }
.jr-tile-letter {
  font-family: var(--jr-display);
  font-size: clamp(56px, min(24vmin, 20vh), 170px);
  color: var(--jr-ink);
  line-height: 1;
}
.jr-tile.jr-lit { border-color: var(--jr-ink); transform: scale(1.05); }
.jr-arrow { font-size: clamp(28px, 7vmin, 48px); color: rgba(30, 42, 74, .4); }
.jr-phrase {
  margin: 0;
  font-family: var(--jr-display);
  font-size: clamp(28px, 7vmin, 52px);
  opacity: .35;
  transition: opacity .3s;
}
.jr-phrase.jr-lit { opacity: 1; }
.jr-speak-big {
  width: clamp(60px, 11vh, 92px); height: clamp(60px, 11vh, 92px);
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: 44px;
  box-shadow: 0 6px 18px rgba(30, 42, 74, 0.15);
}

.jr-next {
  width: clamp(64px, 12vh, 96px); height: clamp(64px, 12vh, 96px);
  border: 0;
  border-radius: 50%;
  background: var(--jr-good);
  color: #fff !important;
  font-size: 40px;
  padding-left: 8px;
  box-shadow: 0 6px 0 #15803d, 0 12px 20px rgba(22, 163, 74, .3);
  animation: jr-breathe 1.8s ease-in-out infinite;
}

/* ── Prompt row: speaker + caption ────────────────────────────────────── */
.jr-prompt { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; }
.jr-speak { width: 60px; height: 60px; font-size: 28px; }
.jr-caption {
  margin: 0;
  font-family: var(--jr-display);
  font-weight: normal;
  font-size: clamp(24px, 6vmin, 40px);
  line-height: 1.15;
}

/* ── Choice cards (tap / find / quiz) ─────────────────────────────────── */
.jr-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 3vmin, 24px);
  width: min(100%, 56vh, 560px);
}
.jr-choices.jr-n3 { grid-template-columns: repeat(3, 1fr); width: min(100%, 90vh, 720px); }
.jr-card {
  aspect-ratio: 1 / 1;
  border: 5px solid transparent;
  border-radius: var(--jr-r);
  background: var(--jr-card);
  padding: 8%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 rgba(30, 42, 74, 0.1), 0 10px 20px rgba(30, 42, 74, 0.08);
  transition: transform .15s, border-color .2s, opacity .3s;
  position: relative;
}
.jr-card:active { transform: scale(.96); }
.jr-card .jr-pic { width: 100%; }
.jr-card-letter {
  font-family: var(--jr-display);
  font-size: clamp(64px, 18vmin, 140px);
  line-height: 1;
  color: var(--jr-dark);
}
.jr-card.jr-right { border-color: var(--jr-good); }
.jr-card.jr-right::after {
  content: "\2713";       /* a tick as well as the green: colour is never the only signal */
  position: absolute;
  top: 8px; right: 8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--jr-good);
  color: #fff;
  font-size: 26px; line-height: 40px;
}
.jr-solved .jr-card:not(.jr-right) { opacity: .35; }

.jr-quiz-dots { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.jr-quiz-dots li { width: 18px; height: 18px; border-radius: 50%; background: rgba(30, 42, 74, .15); }
.jr-quiz-dots li.now { background: var(--jr-ink); }
.jr-quiz-dots li.done { background: var(--jr-good); }

/* ── Match ────────────────────────────────────────────────────────────── */
.jr-match {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 7vh, 72px);
}
.jr-target {
  width: clamp(110px, min(36vmin, 27vh), 260px);
  aspect-ratio: 1 / 1;
  border: 6px dashed rgba(30, 42, 74, 0.35);
  border-radius: var(--jr-r);
  background: rgba(255, 255, 255, 0.6);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s, transform .2s;
}
.jr-target-letter {
  font-family: var(--jr-display);
  font-size: clamp(100px, 26vmin, 190px);
  color: var(--jr-ink);
  line-height: 1;
  opacity: .9;
}
.jr-target.jr-near { border-color: var(--jr-good); background: #dcfce7; transform: scale(1.06); }
.jr-target.jr-filled { border-style: solid; border-color: var(--jr-good); background: #dcfce7; }
.jr-target.jr-filled .jr-target-letter { opacity: .25; }
.jr-drag {
  width: clamp(96px, min(28vmin, 21vh), 200px);
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: var(--jr-r);
  background: var(--jr-card);
  padding: 10px;
  box-shadow: 0 8px 20px rgba(30, 42, 74, 0.18);
  touch-action: none;       /* the drag, not the page, gets the finger */
  position: relative;
  z-index: 2;
  cursor: grab;
  animation: jr-nudge 2.4s ease-in-out 1.5s infinite;
}
.jr-drag .jr-pic { width: 100%; }
.jr-drag.jr-dragging { cursor: grabbing; animation: none; box-shadow: 0 18px 34px rgba(30, 42, 74, 0.28); }
.jr-drag.jr-snap { animation: none; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }

/* ── Trace ────────────────────────────────────────────────────────────── */
.jr-trace {
  position: relative;
  width: min(100%, 50vh, 440px);
  width: min(100%, calc(100dvh - 290px), 440px);
  aspect-ratio: 1 / 1;
  border-radius: var(--jr-r);
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 42, 74, 0.12);
  touch-action: none;       /* no scrolling while drawing */
}
.jr-trace canvas { position: absolute; inset: 0; border-radius: var(--jr-r); }
.jr-trace-ink { touch-action: none; cursor: crosshair; }
.jr-trace.jr-traced { box-shadow: 0 0 0 6px var(--jr-good), 0 8px 24px rgba(30, 42, 74, 0.12); }
.jr-clear {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  font-family: var(--jr-display);
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(30, 42, 74, 0.12);
}

/* ── Reward ───────────────────────────────────────────────────────────── */
.jr-cheer {
  margin: 0;
  font-family: var(--jr-display);
  font-weight: normal;
  font-size: clamp(40px, 11vmin, 76px);
  color: var(--jr-ink);
}
.jr-reward-stars { display: flex; gap: clamp(6px, 2vmin, 14px); font-size: clamp(36px, 9vmin, 60px); }
.jr-rstar { filter: grayscale(1); opacity: .3; transition: filter .3s, opacity .3s; }
.jr-rstar.on { filter: none; opacity: 1; }
.jr-learned { margin: 0; font-family: var(--jr-display); font-size: clamp(26px, 7vmin, 44px); }
.jr-recap { display: flex; align-items: center; gap: 14px; }
.jr-recap-letter { font-family: var(--jr-display); font-size: clamp(56px, 14vmin, 96px); color: var(--jr-ink); line-height: 1; }
.jr-recap-pic { width: clamp(72px, 16vmin, 120px); }
.jr-recap-word { font-family: var(--jr-display); font-size: clamp(24px, 6vmin, 40px); letter-spacing: .05em; }
.jr-end-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.jr-btn {
  min-width: min(80vw, 260px);
  min-height: 72px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font-family: var(--jr-display);
  font-size: clamp(22px, 5.5vmin, 30px);
  color: #fff !important;
}
.jr-btn-again { background: #2563eb; box-shadow: 0 6px 0 #1d4ed8; }
.jr-btn-next { background: var(--jr-good); box-shadow: 0 6px 0 #15803d; }

.jr-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.jr-confetti i {
  position: absolute;
  top: -20px;
  width: 12px; height: 18px;
  border-radius: 3px;
  animation: jr-fall 2.2s ease-in forwards;
}

.jr-fly {
  position: fixed;
  z-index: 5;
  font-size: 48px;
  margin: -24px 0 0 -24px;
  pointer-events: none;
  transition: transform .8s cubic-bezier(.5, -0.3, .7, 1), opacity .8s;
}

/* ── Hints ────────────────────────────────────────────────────────────── */
/* The hand is positioned by its fingertip: left/top is where it points. */
.jr-hand {
  position: fixed;
  z-index: 6;
  font-size: clamp(48px, 9vmin, 72px);
  line-height: 1;
  margin: 0 0 0 -.45em;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(30, 42, 74, .35));
}
.jr-hand-down { margin-top: -.95em; }   /* fingertip at the bottom of 👇 */
.jr-ghost {
  position: fixed;
  z-index: 5;
  margin: 0;
  opacity: .55;
  pointer-events: none;
  animation: none !important;
}
/* With hints on, the ghost demo replaces the drag picture's idle bounce. */
.jr-hints .jr-drag:not(.jr-dragging) { animation: none; }

/* ── Animations (all short; all off under reduced motion) ─────────────── */
@keyframes jr-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes jr-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes jr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes jr-drop { 0% { transform: translateY(-40%) scale(.6); opacity: 0; } 60% { transform: translateY(4%) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes jr-pop-in { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes jr-bounce { 0%, 100% { transform: none; } 30% { transform: scale(1.12) translateY(-6%); } 60% { transform: scale(.97); } }
@keyframes jr-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
@keyframes jr-pop { 0%, 100% { transform: none; } 50% { transform: scale(1.18); } }
@keyframes jr-glow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 10px rgba(22, 163, 74, .35); } }
@keyframes jr-burst { 0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, .8); } 100% { box-shadow: 0 0 0 40px rgba(250, 204, 21, 0); } }
@keyframes jr-nudge { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-10px); } }
@keyframes jr-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-14px); } }
@keyframes jr-fall { to { transform: translateY(110vh) rotate(540deg); opacity: .8; } }

.jr-float { animation: jr-float 3s ease-in-out infinite; }
.jr-drop-in { animation: jr-drop .7s ease-out both; }
.jr-pop-in { animation: jr-pop-in .5s ease-out both; }
.jr-bounce { animation: jr-bounce .5s ease-out; }
.jr-wiggle { animation: jr-wiggle .5s ease-in-out; }
.jr-pop { animation: jr-pop .35s ease-out; }
.jr-glow { animation: jr-glow .8s ease-out 2; }
.jr-burst { animation: jr-burst .7s ease-out; }
.jr-hop { animation: jr-hop .5s ease-out; }

/* Short landscape phones: shrink so the activity still fits the viewport. */
@media (max-height: 520px) and (orientation: landscape) {
  .jr-bar { padding-top: 4px; padding-bottom: 0; }
  .jr-icon { width: 44px; height: 44px; font-size: 20px; }
  .jr-stars { padding: 4px 12px; font-size: 18px; }
  .jr-stage { gap: 8px; padding-bottom: 4px; }
  .jr-actions { padding: 2px 16px 6px; }
  .jr-speak { width: 44px; height: 44px; font-size: 20px; }
  .jr-caption { font-size: clamp(20px, 6vh, 28px); }
  /* Intro and listen go side by side: there is width to spare, not height. */
  .jr-screen-intro, .jr-screen-listen { flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; }
  .jr-screen-intro::before, .jr-screen-intro::after,
  .jr-screen-listen::before, .jr-screen-listen::after { display: none; }
  .jr-screen-intro .jr-big { font-size: 34vh; }
  .jr-hero { width: 40vh; }
  .jr-tile { width: 36vh; }
  .jr-tile-letter { font-size: 26vh; }
  .jr-match { flex-direction: row; gap: 15vw; }
  .jr-target { width: 40vh; }
  .jr-drag { width: 32vh; }
  .jr-choices { grid-template-columns: repeat(4, 1fr); width: min(100%, 130vh); }
  .jr-choices.jr-n3 { width: min(100%, 100vh); }
  .jr-screen-start .jr-big { font-size: 34vh; }
  .jr-hello { font-size: 9vh; }
  /* Trace: the instruction sits beside the board, so the board gets the height. */
  .jr-screen-trace { flex-direction: row; justify-content: center; align-items: center; gap: 24px; }
  .jr-screen-trace::before, .jr-screen-trace::after { display: none; }
  .jr-screen-trace .jr-prompt { flex-direction: column; max-width: 30%; }
  .jr-trace { width: min(60%, calc(100dvh - 150px)); }
  .jr-reward-stars { font-size: 8vh; }
  .jr-cheer { font-size: 11vh; }
  .jr-learned { font-size: 7vh; }
  .jr-recap-letter { font-size: 12vh; }
  .jr-recap-pic { width: 14vh; }
  .jr-recap-word { font-size: 6vh; }
  .jr-screen-reward { gap: 4px; }
  .jr-btn { min-height: 52px; min-width: 200px; }
  .jr-panda { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jr *, .jr *::before, .jr *::after { animation: none !important; transition-duration: .01ms !important; }
  .jr-enter { animation: none; }
}