/* === Kana Ninja — slice-the-kana arcade game =======================
   Companion to js/games/ninja.js, hosted on the standalone /games/ninja
   page (ninja.html). Follows the Kana Rain card layout conventions
   (css/games/rain-level.css): every colour is a var(--…) token so it
   themes light/dark with the rest of the site.

   Structure: a centred card holds a header (level badge + family +
   controls), a segmented level-progress bar, a HUD row (hearts /
   target prompt / score), the canvas arena, and overlays (start,
   level-up, out-of-hearts, all-cleared, level picker). The fruit,
   blade trail, and particles are all drawn on the canvas from JS.
   ==================================================================== */

/* script toggle (hiragana / katakana) — segmented pill above the game */
.ninja-scripts {
  display: flex; justify-content: center; gap: 6px;
  margin: 2px auto 14px; padding: 5px;
  width: max-content; max-width: 94vw;
  background: var(--inset); border: 1px solid var(--line); border-radius: 999px;
}
.ninja-scripts__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--muted);
  padding: 8px 18px; border: none; border-radius: 999px; background: transparent; cursor: pointer;
  transition: background .2s, color .2s;
}
.ninja-scripts__btn b { font-family: var(--font-kana-sans); font-size: 16px; font-weight: 700; }
.ninja-scripts__btn:hover { color: var(--accent); }
.ninja-scripts__btn.is-on { background: var(--accent); color: #fff; }
.ninja-scripts__btn.is-on:hover { color: #fff; }

.ninja-host { display: flex; justify-content: center; padding: 4px 0 8px; }

.nj {
  position: relative;
  width: min(460px, 94vw);
  height: min(788px, 80vh);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  border-radius: 26px;
  background: var(--card);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--ink);
}

/* ── mobile fullscreen ───────────────────────────────────────── */
/* Applied when Start is tapped on a coarse-pointer device: the card pins
   to the viewport (and, where supported, enters native fullscreen).
   Safe-area padding keeps the HUD clear of notches and home bars. */
.nj--fs {
  position: fixed; inset: 0; z-index: 1000;
  width: 100%; height: 100%; max-width: none; min-height: 0;
  border-radius: 0; border: none; box-shadow: none;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
body.nj-fs-lock { overflow: hidden; }

/* ── header ──────────────────────────────────────────────────── */
.nj__top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.nj__level {
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.nj__levelbadge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 22px -8px var(--accent-line);
}
.nj__levelbadge small { font-size: 9px; font-weight: 700; letter-spacing: .12em; opacity: .8; line-height: 1; }
.nj__levelbadge b { font-size: 22px; font-weight: 700; line-height: 1; margin-top: 2px; }
.nj__fam { display: flex; flex-direction: column; gap: 3px; }
.nj__famname {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-kana-sans); font-weight: 700; font-size: 20px;
  color: var(--ink); line-height: 1;
}
.nj__famname i { font-style: normal; font-size: 11px; color: var(--accent); }
.nj__famromaji { font-size: 11px; color: var(--faint); letter-spacing: .02em; }

.nj__actions { display: flex; align-items: center; gap: 8px; }
.nj__form {
  cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--inset);
  transition: background .2s, color .2s, border-color .2s;
}
.nj__form:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.nj__reset {
  cursor: pointer; font-family: inherit; font-size: 15px; color: var(--faint);
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--inset);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.nj__reset:hover { background: var(--accent-bg); color: var(--accent); }

/* ── progress ────────────────────────────────────────────────── */
.nj__progress {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
}
.nj__segs { flex: 1; display: flex; gap: 4px; }
.nj__seg {
  flex: 1; height: 6px; border-radius: 99px;
  background: var(--line); transition: background .3s;
}
.nj__seg.is-on { background: var(--accent); }
.nj__seg.is-lost { animation: njSegLost .6s ease-out; }
.nj__progresslabel { font-size: 11px; font-weight: 600; color: var(--faint); white-space: nowrap; }

/* ── HUD: hearts / target prompt / score ─────────────────────── */
.nj__hud {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; min-height: 74px;
}
.nj__hearts { display: flex; gap: 3px; font-size: 16px; width: 72px; }
.nj__heart { color: var(--red, #e05252); transition: opacity .25s, transform .25s; }
.nj__heart.is-lost { opacity: .22; transform: scale(.82); filter: grayscale(1); }
.nj__heart.is-breaking { animation: njHeartBreak .42s ease-in both; }
.nj__hearts.is-critical .nj__heart:not(.is-lost) { animation: njHeartbeat 1s ease-in-out infinite; }
.nj__target {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.nj__target small {
  font-size: 10px; font-weight: 700; letter-spacing: .28em; color: var(--faint);
  transition: color .2s;
}
.nj__target small.is-review { color: var(--accent); }
.nj__target small.is-focus { color: #d9782c; }
.nj__target b {
  font-family: var(--font-kana-sans); font-size: 40px; font-weight: 700;
  color: var(--accent); line-height: 1;
}
.nj__target b.is-pop { animation: njPromptPop .32s ease-out; }
.nj__combo {
  position: absolute; top: 4px; right: -44px;
  font-size: 12px; font-weight: 800; color: #fff;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 6px 16px -6px var(--accent-line);
}
.nj__combo.is-pop { animation: njComboPop .3s ease-out; }
.nj__combo.is-hot {
  background: linear-gradient(135deg, #e0a53c, #d95f3f);
  box-shadow: 0 6px 18px -6px rgba(217, 122, 60, .55);
}
.nj__combo[hidden] { display: none; }
.nj__score {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  width: 72px; color: var(--muted);
}
.nj__scoremain { display: flex; align-items: baseline; gap: 4px; }
.nj__score b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nj__score small { font-size: 10px; font-weight: 600; }
.nj__best { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--faint); }

/* ── arena ───────────────────────────────────────────────────── */
.nj__arena {
  position: relative; z-index: 1; flex: 1; margin-top: 12px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  /* layered dojo-sky backdrop: accent haze up top, warm ground glow below */
  background:
    radial-gradient(130% 85% at 50% -25%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    radial-gradient(120% 60% at 50% 115%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 58%),
    var(--subtle-bg);
}
.nj__arena::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 -18px 34px -22px rgba(0, 0, 0, .28), inset 0 12px 30px -26px rgba(0, 0, 0, .18);
}
.nj__arena.is-shake { animation: njShake .32s ease-out; }
.nj__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: crosshair; touch-action: none;
  user-select: none; -webkit-user-select: none;
}

/* ── foot ────────────────────────────────────────────────────── */
.nj__foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 0 2px;
}
.nj__hint { font-size: 11px; color: var(--faint); }
.nj__sliced { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ── overlays ────────────────────────────────────────────────── */
.nj__overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  padding: 22px 20px 20px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(4px);
}
.nj__overlay[hidden] { display: none; }

/* level picker */
.nj__picker { z-index: 30; }
.nj__pickerhead { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; }
.nj__pickertitle { display: flex; flex-direction: column; gap: 3px; }
.nj__pickertitle b { font-size: 11px; font-weight: 700; letter-spacing: .24em; color: var(--accent); }
.nj__pickertitle span { font-size: 12px; color: var(--muted); }
.nj__x {
  cursor: pointer; font-family: inherit; font-size: 16px; color: var(--muted);
  width: 36px; height: 36px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--inset);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nj__x:hover { background: var(--accent-bg); color: var(--accent); }
.nj__levelgrid {
  flex: 1; overflow-y: auto; margin-top: 12px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
  align-content: start; padding-right: 2px;
}
.nj__lv {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 60px; padding: 9px 4px; border-radius: 14px; cursor: pointer;
  font-family: inherit; text-align: center; transition: transform .12s;
  color: var(--muted); border: 1px solid var(--line); background: var(--inset);
}
.nj__lv:hover { transform: translateY(-1px); }
.nj__lv small { font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: .7; }
.nj__lv b { font-family: var(--font-kana-sans); font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: .02em; }
.nj__lvstars { font-size: 10px; letter-spacing: .12em; color: #d9a53c; line-height: 1; }
.nj__lvstars.is-none { color: var(--faint); opacity: .55; }
.nj__lv.is-current .nj__lvstars { color: #ffd98a; }
.nj__lv.is-current .nj__lvstars.is-none { color: rgba(255,255,255,.55); }
.nj__lv.is-reached { color: var(--ink); border-color: var(--accent-line); background: var(--accent-bg); }
.nj__lv.is-current { color: #fff; border-color: transparent; background: var(--accent); box-shadow: 0 8px 20px -8px var(--accent-line); }

/* start / paused / retry / all-cleared share the centred layout */
.nj__pausedov, .nj__cleared, .nj__start, .nj__retry {
  align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 30px;
}

/* level-up toast — non-blocking banner over the arena; play continues */
.nj__toast {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 15; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 22px; border-radius: 16px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--accent-line);
  box-shadow: 0 12px 30px -12px var(--accent-line);
  backdrop-filter: blur(3px);
}
.nj__toast[hidden] { display: none; }
.nj__toast.is-live { animation: njToast 2.4s ease-in-out both; }
.nj__toasteyebrow { font-size: 10px; font-weight: 700; letter-spacing: .28em; color: var(--accent); }
.nj__toastfam { display: flex; align-items: center; gap: 8px; }
.nj__toastfam b { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; }
.nj__toastfam span { font-family: var(--font-kana-sans); font-size: 18px; font-weight: 700; color: var(--accent); }
.nj__toastchars { font-family: var(--font-kana-sans); font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: .1em; }

.nj__bigicon { font-size: 52px; animation: njPop .5s ease-out both; }
.nj__startsub {
  font-size: 14px; line-height: 1.5; color: var(--muted);
  max-width: 300px; text-wrap: pretty; animation: njRise .5s ease-out .1s both;
}

/* floating kana behind the start screen */
.nj__floatkana { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.nj__floatkana span {
  position: absolute; bottom: -50px;
  font-family: var(--font-kana-sans); font-weight: 700; font-size: 34px;
  color: var(--accent); opacity: 0;
  animation: njFloatUp 7s ease-in-out infinite;
}
.nj__floatkana span:nth-child(1) { left: 16%; }
.nj__floatkana span:nth-child(2) { left: 50%; font-size: 26px; }
.nj__floatkana span:nth-child(3) { left: 78%; font-size: 30px; }

/* session stats on the retry / all-clear screens */
.nj__stats {
  display: flex; gap: 10px; animation: njRise .5s ease-out .16s both;
}
.nj__stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 76px; padding: 10px 12px; border-radius: 14px;
  background: var(--inset); border: 1px solid var(--line);
}
.nj__stat b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.nj__stat small { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.nj__start .nj__cta { font-size: 16px; padding: 15px 40px; margin-top: 4px; }
.nj__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .32em; color: var(--accent); animation: njRise .5s ease-out both; }
.nj__cta {
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; color: #fff;
  padding: 14px 32px; border-radius: 14px; border: none; background: var(--accent);
  box-shadow: 0 12px 30px -10px var(--accent-line); animation: njRise .5s ease-out .28s both;
}
.nj__cta:hover { filter: brightness(1.06); }
.nj__cta--ghost { background: var(--inset); color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.nj__cta--ghost:hover { background: var(--accent-bg); color: var(--accent); filter: none; }

.nj__clearedbig { font-family: var(--font-ui); font-size: 26px; font-weight: 700; color: var(--ink); margin-top: 8px; }
.nj__clearedtext { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 300px; text-wrap: pretty; animation: njRise .5s ease-out .2s both; }
.nj__clearedbtns { display: flex; gap: 10px; animation: njRise .5s ease-out .3s both; }

/* ── keyframes ───────────────────────────────────────────────── */
@keyframes njPop { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
@keyframes njRise { from{transform:translateY(18px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes njToast {
  0% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.94); }
  12%, 82% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(.97); }
}
@keyframes njPromptPop {
  0% { transform: scale(.6); opacity: .4; }
  55% { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes njComboPop {
  0% { transform: scale(.7); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes njShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, 1px); }
  80% { transform: translate(2px, -1px); }
}
@keyframes njSegLost {
  0%, 40% { background: var(--red, #e05252); transform: scaleY(1.8); }
  100% { background: var(--line); transform: scaleY(1); }
}
@keyframes njHeartBreak {
  0% { transform: scale(1); }
  30% { transform: scale(1.35) rotate(-8deg); }
  60% { transform: scale(.9) rotate(6deg); }
  100% { transform: scale(.82); opacity: .22; filter: grayscale(1); }
}
@keyframes njHeartbeat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.22); }
  35% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
@keyframes njFloatUp {
  0% { transform: translateY(0) rotate(-6deg); opacity: 0; }
  12% { opacity: .28; }
  80% { opacity: .18; }
  100% { transform: translateY(-540px) rotate(8deg); opacity: 0; }
}