/*
 * Letter Ninja (ninja.typing.feedback) — its own stylesheet, loaded only by the
 * ninja layout. Toy-box styling for small hands and new readers: Fredoka type,
 * thick ink outlines, hard "plastic" shadows, candy colors, big everything.
 */

:root {
  --ink: #1f1a3d;             /* every outline and hard shadow */
  --text: #1f1a3d;
  --text-soft: #4b4577;
  --paper: #fffdf5;
  --sky-top: #5ec4ff;
  --sky-bottom: #c8eeff;
  --cloud: #ffffff;
  --hill-front: #6fd65a;
  --hill-back: #4cbf5a;
  --sun: #ffd23f;
  --go: #3ddc84;
  --pop: #ff5d8f;
  --gold: #ffb800;
  --heart-lost: #cbd5e1;
  --miss: rgba(255, 70, 70, 0.3);
  --radius: 32px;
  --outline: 4px solid var(--ink);
  --lift: 0 6px 0 var(--ink);
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #0d0a24;
    --text: #fff8e7;
    --text-soft: #cfc8ff;
    --paper: #2c2566;
    --sky-top: #120e3a;
    --sky-bottom: #3a2f8f;
    --cloud: #5b51b8;
    --hill-front: #2f7d4a;
    --hill-back: #25643c;
    --sun: #fff1b8;          /* the moon */
    --heart-lost: #4b4577;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.ninja {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 500;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bottom)) fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

a { color: inherit; }
button { font: inherit; color: inherit; }

.ninja-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The shared toy look: outlined, with a hard shadow that "presses" down. */
.ninja-pill,
.ninja-nav-link,
.ninja-nav-me,
.ninja-btn,
.ninja-play,
.ninja-card,
.ninja-board,
.ninja-invite {
  border: var(--outline);
  box-shadow: var(--lift);
}

/* ---------- scenery ---------- */

.ninja-scenery {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ninja-sun {
  position: absolute;
  top: 26%;
  right: 5%;
  width: clamp(64px, 11vw, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  border: var(--outline);
}

.ninja-cloud {
  position: absolute;
  left: 0;
  width: var(--w, 180px);
  height: calc(var(--w, 180px) * 0.36);
  border-radius: 999px;
  background: var(--cloud);
  opacity: 0.9;
  animation: ninja-drift var(--t, 60s) linear infinite;
  animation-delay: var(--d, 0s);
}

.ninja-cloud::before,
.ninja-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.ninja-cloud::before { width: 46%; height: 130%; left: 16%; bottom: 20%; }
.ninja-cloud::after { width: 36%; height: 105%; left: 50%; bottom: 25%; }

.ninja-cloud.c1 { top: 16%; --w: 190px; --t: 70s; --d: -10s; }
.ninja-cloud.c2 { top: 32%; --w: 130px; --t: 55s; --d: -38s; }
.ninja-cloud.c3 { top: 7%; --w: 110px; --t: 80s; --d: -60s; }

@keyframes ninja-drift {
  from { transform: translateX(-30vw); }
  to { transform: translateX(130vw); }
}

.ninja-hill {
  position: absolute;
  bottom: -60px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: var(--outline);
}
.ninja-hill.h1 { left: -15%; width: 75%; height: 160px; background: var(--hill-back); }
.ninja-hill.h2 { right: -20%; width: 90%; height: 130px; background: var(--hill-front); }

@media (prefers-color-scheme: dark) {
  .ninja-cloud { opacity: 0.35; }
  /* Stars. */
  .ninja-scenery {
    background:
      radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%),
      radial-gradient(2px 2px at 64% 10%, #fff 50%, transparent 51%),
      radial-gradient(2.5px 2.5px at 38% 28%, #fff7c2 50%, transparent 51%),
      radial-gradient(2px 2px at 86% 44%, #fff 50%, transparent 51%),
      radial-gradient(2px 2px at 22% 50%, #e0dbff 50%, transparent 51%),
      radial-gradient(2px 2px at 52% 40%, #fff 50%, transparent 51%);
  }
}

/* ---------- header ---------- */

.ninja-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.ninja-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
}

.ninja-wordmark img { width: 44px; height: 44px; display: block; }

.ninja-nav { display: flex; align-items: center; gap: 10px; }

.ninja-nav-link,
.ninja-nav-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--paper);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-width: 3px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 80ms, box-shadow 80ms;
}

.ninja-nav-link:active,
.ninja-nav-me:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.ninja-nav-me { padding: 4px 18px 4px 4px; }
.ninja-nav-me svg { border-radius: 50%; display: block; }

@media (max-width: 520px) {
  .ninja-header { padding-left: 12px; padding-right: 12px; }
  .ninja-wordmark { font-size: 1.2rem; -webkit-text-stroke-width: 5px; gap: 6px; }
  .ninja-wordmark img { width: 36px; height: 36px; }
  .ninja-nav { gap: 6px; }
  .ninja-nav-link { padding: 6px 14px; font-size: 1.05rem; }
  .ninja-nav-name { display: none; }
  .ninja-nav-me { padding: 3px; }
}

@media (max-width: 380px) {
  .ninja-wordmark-text { display: none; }
}

.ninja-flashes { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 0 16px; width: 100%; }
.ninja-flash {
  background: var(--paper);
  border: var(--outline);
  box-shadow: var(--lift);
  border-radius: 20px;
  padding: 10px 16px;
  font-weight: 600;
  text-align: center;
}

.ninja-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ---------- game ---------- */

.ninja-game {
  position: relative;
  flex: 1;
  min-height: 320px;
  overflow: hidden;
}

/* Once JS has measured what's visible, that height wins outright. Otherwise
   flex-grow and min-height stretch the field back down behind the on-screen
   keyboard (iOS never shrinks dvh for it), and on an iPad in landscape — where
   the keyboard covers over half the screen — fruit peaks out of sight. */
.ninja-game.is-fitted {
  flex: none;
  min-height: 0;
  height: var(--game-height);
}

.ninja-game.is-missed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, transparent 40%, var(--miss));
  animation: ninja-miss 500ms ease-out forwards;
}

@keyframes ninja-miss { from { opacity: 1; } to { opacity: 0; } }

.ninja-game.is-missed .ninja-dock { animation: ninja-shake 360ms ease-in-out; }

@keyframes ninja-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px) rotate(-2deg); }
  75% { transform: translateX(6px) rotate(2deg); }
}

/* Invisible but on-screen, so focusing it raises the keyboard without the
   page jumping; 16px stops iOS zooming in. */
.ninja-capture {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;
  caret-color: transparent;
}

.ninja-hud {
  position: absolute;
  top: 6px;
  left: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.ninja-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--paper);
  pointer-events: auto;
}

.ninja-score {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ninja-score > span:last-child { display: inline-block; min-width: 1.2ch; }
.ninja-score-star { font-size: 0.8em; }

.ninja-dock { padding: 6px 6px 6px 16px; gap: 10px; }

.ninja-lives { display: flex; gap: 2px; font-size: clamp(1.6rem, 4.5vw, 2.1rem); line-height: 1; }
.ninja-heart { display: inline-block; transition: transform 300ms, filter 300ms, opacity 300ms; }
.ninja-heart.is-lost { filter: grayscale(1) brightness(1.4); opacity: 0.35; transform: scale(0.75) rotate(-12deg); }

.ninja-dock-divider {
  width: 3px;
  align-self: stretch;
  margin: 6px 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.ninja-mute {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--sun);
  color: #1f1a3d;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 80ms, box-shadow 80ms, background 150ms;
}
.ninja-mute[aria-pressed="false"] { background: var(--heart-lost); }
.ninja-mute:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.ninja-mute:focus-visible { outline: 4px solid var(--pop); outline-offset: 3px; }

.ninja-field { position: absolute; inset: 0; z-index: 2; }

.ninja-fruit {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  will-change: transform;
  display: grid;
  place-items: center;
}

.ninja-fruit-emoji {
  display: block; /* so it can rotate */
  font-size: calc(var(--size) * 0.9);
  line-height: 1;
  filter: drop-shadow(0 6px 0 rgba(31, 26, 61, 0.25));
}

/* A white "sticker" with a dark letter: the most legible option for new
   readers, on any fruit color. */
.ninja-fruit-letter {
  position: absolute;
  left: 50%;
  top: 54%;
  width: calc(var(--size) * 0.58);
  height: calc(var(--size) * 0.58);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: calc(var(--size) * 0.045) solid #1f1a3d;
  box-shadow: 0 calc(var(--size) * 0.04) 0 #1f1a3d;
  color: #1f1a3d;
  font-size: calc(var(--size) * 0.46);
  font-weight: 700;
  line-height: 1;
}

.ninja-half {
  position: absolute;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  font-size: calc(var(--size) * 0.9);
  line-height: 1;
  pointer-events: none;
}

.ninja-half-left { clip-path: inset(0 50% 0 0); }
.ninja-half-right { clip-path: inset(0 0 0 50%); }

.ninja-slash {
  position: absolute;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.95);
  transform-origin: center;
  pointer-events: none;
}

.ninja-juice {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(31, 26, 61, 0.35);
  pointer-events: none;
}

.ninja-points {
  position: absolute;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 7px #1f1a3d;
  paint-order: stroke fill;
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
}

.ninja-points.is-combo { color: var(--gold); }

/* The wrong letter they pressed, bubbling up from the bottom. */
.ninja-wrong {
  position: absolute;
  left: 50%;
  bottom: 14%;
  z-index: 4;
  width: clamp(76px, 16vw, 104px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ff4d4d;
  color: #fff;
  border: var(--outline);
  box-shadow: var(--lift);
  font-size: clamp(2.8rem, 9vw, 4rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, 0);
}

/* ---------- start & game-over cards ---------- */

.ninja-card {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100% - 32px));
  max-height: calc(100% - 100px);
  margin-top: 34px;
  overflow: auto;
  padding: 24px 24px 28px;
  border-radius: 36px;
  background: var(--paper);
  box-shadow: 0 10px 0 var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ninja-card[hidden] { display: none; }

.ninja-demo {
  position: relative;
  flex: none;
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  animation: ninja-bob 2.4s ease-in-out infinite;
}

.ninja-demo-fruit { font-size: 118px; line-height: 1; }
.ninja-demo-letter {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #1f1a3d;
  box-shadow: 0 5px 0 #1f1a3d;
  color: #1f1a3d;
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
}

@keyframes ninja-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-12px) rotate(6deg); }
}

.ninja-title {
  margin: 0;
  font-size: clamp(2.8rem, 11vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.ninja-title-letter {
  display: inline-block;
  color: var(--c);
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  animation: ninja-hop 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 90ms);
}
.ninja-title-space { display: inline-block; width: 0.3em; }

@keyframes ninja-hop {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(-10px) rotate(-4deg); }
  90% { transform: translateY(0) rotate(3deg); }
}

.ninja-lede { margin: 0; font-size: 1.45rem; line-height: 1.3; font-weight: 600; }
.ninja-rule { margin: 0; font-size: 1.1rem; line-height: 1.35; color: var(--text-soft); }
.ninja-nowrap { white-space: nowrap; }

.ninja-play {
  margin-top: 8px;
  min-width: 220px;
  min-height: 76px;
  padding: 10px 40px;
  border-radius: 999px;
  background: var(--go);
  color: #1f1a3d;
  font-size: 2.2rem;
  font-weight: 700;
  box-shadow: 0 8px 0 var(--ink);
  cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
}

.ninja-play:hover { filter: brightness(1.05); }
.ninja-play:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.ninja-play:focus-visible { outline: 5px solid var(--pop); outline-offset: 5px; }

.ninja-best-line { margin: 0; color: var(--text-soft); font-weight: 600; }
.ninja-best-line strong { color: var(--text); }

.ninja-over-eyebrow { margin: 0; font-size: 1.7rem; font-weight: 700; }
.ninja-over-score {
  font-size: clamp(4.5rem, 20vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  -webkit-text-stroke: 10px var(--ink);
  paint-order: stroke fill;
}
.ninja-over-detail { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--text-soft); }

.ninja-save { font-weight: 500; color: var(--text-soft); }
.ninja-save p { margin: 0; }
.ninja-save-ok { color: var(--text); font-weight: 700; }
.ninja-save-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

.ninja-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 22px;
  border-radius: 999px;
  background: var(--pop);
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-width: 3px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 80ms, box-shadow 80ms;
}
.ninja-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

.ninja-btn-quiet { background: var(--paper); color: var(--text); }

.ninja-quiet-link { font-weight: 600; color: var(--text-soft); }
.ninja-form { display: none; }

/* ---------- leaderboard ---------- */

.ninja-page { position: relative; width: min(720px, 100%); margin: 0 auto; padding: 16px 16px 140px; }

.ninja-page-title {
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 700;
  margin: 8px 0 6px;
  color: #fff;
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
}
.ninja-page-caption { margin: 0 0 20px; font-weight: 600; }

.ninja-board {
  list-style: none;
  margin: 0;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--paper);
}

.ninja-board-row {
  display: grid;
  grid-template-columns: 48px 44px 1fr auto;
  grid-template-areas: "rank avatar name score" "rank avatar best score";
  align-items: center;
  column-gap: 12px;
  padding: 12px;
  border-radius: 22px;
}

.ninja-board-row + .ninja-board-row { border-top: 3px dashed color-mix(in srgb, var(--ink) 15%, transparent); }
.ninja-board-row.is-you { background: color-mix(in srgb, var(--sun) 35%, transparent); }

.ninja-board-rank { grid-area: rank; font-size: 1.7rem; font-weight: 700; text-align: center; }
.ninja-board-row svg { grid-area: avatar; border-radius: 50%; display: block; border: 3px solid var(--ink); }
.ninja-board-name { grid-area: name; font-size: 1.25rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ninja-board-you {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pop);
  color: #fff;
  border: 2px solid var(--ink);
  vertical-align: middle;
}
.ninja-board-best { grid-area: best; font-size: 0.95rem; color: var(--text-soft); font-weight: 500; }
.ninja-board-score {
  grid-area: score;
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
}
.ninja-board-unit { font-size: 0.75rem; font-weight: 600; color: var(--text-soft); }

.ninja-empty {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--paper);
  border: var(--outline);
  box-shadow: var(--lift);
  font-weight: 600;
  text-align: center;
}
.ninja-foot { margin-top: 22px; font-weight: 600; line-height: 2.8; }
.ninja-inline-form { display: inline-block; vertical-align: middle; margin: 0; }

.ninja-invite {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--paper);
  margin-bottom: 18px;
  font-weight: 600;
}
.ninja-invite p { margin: 0 0 10px; }
.ninja-invite-row { display: flex; gap: 8px; }
.ninja-invite-link {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 8px 14px;
  border-radius: 16px;
  border: 3px solid var(--ink);
  background: #fff;
  color: #1f1a3d;
  font: inherit;
  font-size: 16px;
  user-select: text;
  -webkit-user-select: text;
}

.ninja-peek { margin-top: 36px; }
.ninja-peek-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ninja-peek-head h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 12px; }
.ninja-peek-head a { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ninja-demo,
  .ninja-title-letter,
  .ninja-cloud,
  .ninja-game.is-missed .ninja-dock { animation: none; }
  .ninja-game.is-missed::after { animation-duration: 1ms; }
}

/* ---------- invite landing, sign-up & sign-in ---------- */

.ninja-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px 32px;
  border: var(--outline);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--lift);
  text-align: center;
  font-weight: 600;
}
.ninja-join svg { border-radius: 50%; border: 3px solid var(--ink); }
.ninja-join .ninja-page-title { margin: 4px 0 0; overflow-wrap: anywhere; }
.ninja-join .ninja-page-caption { margin: 0 0 6px; }
.ninja-join p { margin: 0; }
.ninja-join-fine { font-size: 0.9rem; font-weight: 500; color: var(--text-soft); margin-top: 6px !important; }

.ninja-auth-form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: min(360px, 100%); margin: 6px 0; }
.ninja-input {
  min-height: 56px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: #fff;
  color: #1f1a3d;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.ninja-input:focus { outline: 4px solid var(--sun); outline-offset: 2px; }
.ninja-auth-form .ninja-btn:disabled { opacity: 0.6; cursor: default; }