/* ==========================================================================
   N3 Mojigoi & Bunpou Flashcard — Design System v2
   Palette: ocean blue -> mint gradient, soft glass cards, dark mode support
   Written from scratch; direction only inspired by user-described references.
   ========================================================================== */

:root {
  --hanko: #1565C0;
  --gold: #4FC3F7;
  --mint: #4FD8B8;
  --ink: #16232F;
  --ink-soft: #4A5C6B;
  --line: rgba(21, 101, 192, 0.14);
  --white: #FFFFFF;
  --surface: rgba(255, 255, 255, 0.62);
  --surface-solid: #FFFFFF;
  --shadow: rgba(21, 101, 192, 0.12);
  --correct-bg: rgba(79, 216, 184, 0.16);
  --correct-text: #0E7C63;
  --wrong-bg: rgba(192, 57, 43, 0.1);
  --wrong-text: #C0392B;

  --serif: "Noto Serif JP", Georgia, serif;
  --display: "Baloo 2", "Zen Maru Gothic", sans-serif;
  --sans: "Quicksand", "Zen Maru Gothic", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

:root[data-theme="dark"] {
  --ink: #F1F5F9;
  --ink-soft: rgba(226, 232, 240, 0.78);
  --line: rgba(125, 211, 252, 0.22);
  --surface: rgba(23, 33, 43, 0.82);
  --surface-solid: #182530;
  --shadow: rgba(0, 0, 0, 0.55);
  --correct-bg: rgba(79, 216, 184, 0.20);
  --correct-text: #7EEFCF;
  --wrong-bg: rgba(255, 107, 90, 0.22);
  --wrong-text: #FFA694;
  --hanko: #7DD3FC;
  --gold: #7DD3FC;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  background: linear-gradient(160deg, #F4F9FF 0%, #E4F0FF 45%, #EAF6F2 100%);
  transition: background .3s ease, color .3s ease;
  position: relative;
}

:root[data-theme="dark"] body {
  background: linear-gradient(160deg, #10151A 0%, #131B23 45%, #0E1620 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,0.55) 0%, transparent 45%),
    radial-gradient(circle at 82% 74%, rgba(79,216,184,0.22) 0%, transparent 50%);
}

:root[data-theme="dark"] body::before { background-image: none; }

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

.kanji-watermark span {
  position: absolute;
  font-family: var(--display);
  font-weight: 800;
  color: rgba(21, 101, 192, 0.08);
  line-height: 1;
  user-select: none;
}

.kanji-watermark span.one { top: 2%; left: -5%; font-size: min(40vw, 300px); }
.kanji-watermark span.two {
  bottom: 0%; right: -8%; font-size: min(34vw, 240px);
  color: rgba(79, 216, 184, 0.10);
}

:root[data-theme="dark"] .kanji-watermark span.one { color: rgba(100, 181, 246, 0.06); }
:root[data-theme="dark"] .kanji-watermark span.two { color: rgba(79, 216, 184, 0.06); }

::selection { background: rgba(79, 195, 247, 0.35); color: var(--ink); }
a { color: inherit; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

:root[data-theme="dark"] .topbar { background: rgba(16, 21, 26, 0.6); }

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
}

.topbar .brand .stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hanko), var(--mint));
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.topbar nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}

.topbar nav a:hover { color: var(--hanko); border-color: var(--gold); }

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all .15s ease;
}

.theme-toggle:hover { border-color: var(--gold); transform: translateY(-1px); }

/* ---------- Layout shells ---------- */
.wrap {
  position: relative;
  z-index: 10;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero { padding: 56px 0 32px; }

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hanko);
  margin: 0 0 14px;
}

.hero .eyebrow::before, .hero .eyebrow::after {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--hanko);
  opacity: 0.5;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.1;
}

.hero h1 .accent {
  background: linear-gradient(120deg, var(--hanko) 0%, var(--mint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lede {
  max-width: 640px;
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Index: year grid ---------- */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 40px 0 18px;
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.period-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.period-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px var(--shadow);
  border-color: var(--gold);
  background: var(--surface-solid);
}

.period-card .p-period {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  flex-shrink: 0;
}

.period-card .p-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-family: var(--mono);
}

.period-card .p-stats span {
  background: rgba(79, 195, 247, 0.14);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}

.period-card .p-stats span.b { color: var(--hanko); background: rgba(21, 101, 192, 0.1); }

@media (max-width: 420px) {
  .period-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .period-card .p-stats { justify-content: flex-start; }
}

.footer-note {
  margin: 64px 0 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* ---------- Flashcard page ---------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 10px;
  margin: 24px 0 8px;
}

.filter-btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}

.filter-btn.active {
  background: linear-gradient(120deg, var(--hanko), var(--mint));
  border-color: transparent;
  color: #fff;
}

:root[data-theme="dark"] .filter-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .periode-select {
  background: #1E2A38;
  border-color: rgba(125, 211, 252, 0.28);
  color: #E2E8F0;
}
:root[data-theme="dark"] .filter-btn:hover:not(.active),
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .periode-select:hover {
  border-color: #7DD3FC;
  color: #F8FAFC;
}
:root[data-theme="dark"] .filter-btn.active {
  color: #0B1220;
  background: linear-gradient(120deg, #7DD3FC, #4FD8B8);
}

:root[data-theme="dark"] .deck-status {
  color: rgba(226, 232, 240, 0.75);
}

.filter-btn:hover:not(.active) { border-color: var(--gold); color: var(--ink); }

.controls .spacer { flex: 1; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}

.icon-btn:hover { border-color: var(--gold); color: var(--ink); }

.periode-select {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-soft);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234A5C6B'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 30px;
  transition: all .15s ease;
}

.periode-select:hover { border-color: var(--gold); color: var(--ink); }

.progress-track {
  height: 5px;
  background: var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0 18px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--hanko), var(--mint));
  width: 0%;
  transition: width .25s ease;
}

.deck-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.deck-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.score-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--correct-text);
  background: var(--correct-bg);
  border-radius: 20px;
  padding: 2px 12px;
  white-space: nowrap;
}

.score-status:empty { display: none; }

/* card */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 56px;
}

.card-scene {
  width: 100%;
  max-width: 620px;
  perspective: 1600px;
}

@media (min-width: 900px) {
  .card-scene { max-width: 720px; }
}

.flashcard {
  position: relative;
  width: 100%;
  height: 620px;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
  will-change: transform;
  /* Without this, some mobile browsers can misinterpret a vertical
     scroll gesture inside .q-body as a tap-to-flip on this parent,
     especially with a click handler + 3D transform in play. pan-y
     tells the browser vertical dragging is scrolling, not a gesture
     this element should intercept. Horizontal swipe (next/prev) is
     handled in JS via touchstart/touchend, not native panning, so it
     still works fine alongside this. */
  touch-action: pan-y;
}

@media (min-width: 900px) {
  .flashcard { height: 660px; }
}

.flashcard.flipped { transform: rotateY(180deg); }

/* Applied for one frame when Next/Prev/Shuffle resets flip state together
   with a content swap, so the 180deg rotation snaps instantly instead of
   animating at the same time the DOM content underneath is replaced. */
.flashcard.no-flip-transition { transition: none; }

/* Both faces are absolutely stacked and fill the .flashcard box above.
   Card height is generous (see .flashcard) so most questions — even
   long ones with furigana — fit without scrolling. .q-body still
   scrolls internally as a last-resort safety net for the rare
   extra-long prompt, but sizing/wrapping (see .q-text tiers below) is
   the primary way long questions stay readable. */
.face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: var(--surface-solid);
  border: 1px solid rgba(21, 101, 192, 0.22);
  border-radius: 20px;
  box-shadow: 0 22px 56px var(--shadow), 0 2px 8px rgba(21, 101, 192, 0.08);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  /* will-change is applied only while the card is actively flipping
     (see .flashcard.is-flipping below) — leaving it on permanently
     keeps this element pinned to its own compositing layer at all
     times, which can make scrolling inside .q-body feel sluggish or
     unresponsive on lower-end devices. */
  /* The whole card face is now the scroll container (not just the
     inner .q-body/.answer-block) so a finger can drag-scroll from
     ANYWHERE on the card — the tag row, the hint text, the padding —
     not only from directly on top of the question text or the thin
     scrollbar. This is what users actually expect from a "scrollable
     card": grab it anywhere and drag. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  /* The card's content is swapped via innerHTML on every question
     change. Without this, the browser's scroll-anchoring heuristic can
     try to "compensate" for that DOM change by shifting scrollTop,
     which is what made freshly-rendered cards appear shifted upward /
     cut off at the top instead of starting cleanly at the top. */
  overflow-anchor: none;
}

/* Subtle scrollbar on the whole face so it doesn't fight the
   washi/sakura aesthetic. */
.face::-webkit-scrollbar { width: 6px; }
.face::-webkit-scrollbar-track { background: transparent; }
.face::-webkit-scrollbar-thumb {
  background: rgba(21, 101, 192, 0.22);
  border-radius: 10px;
}
:root[data-theme="dark"] .face::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 252, 0.28);
}

.flashcard.is-flipping .face {
  will-change: transform;
}

.face.back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.face .tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.face .q-num {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--hanko);
  border: 1px solid rgba(21, 101, 192, 0.3);
  background: rgba(21, 101, 192, 0.06);
  border-radius: 20px;
  padding: 3px 11px;
}

:root[data-theme="dark"] .face .q-num {
  color: #93D9FF;
  border-color: rgba(125, 211, 252, 0.40);
  background: rgba(125, 211, 252, 0.10);
}

:root[data-theme="dark"] .face .cat-tag {
  color: rgba(226, 232, 240, 0.72);
}

:root[data-theme="dark"] .face .hint {
  color: rgba(226, 232, 240, 0.68);
}

:root[data-theme="dark"] .face .q-text .underline-word {
  border-bottom-color: #7DD3FC;
}

.face .cat-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.face .q-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-right: 2px;
  padding-top: 4px;
  flex-shrink: 0;
}

.face .q-text {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  line-height: 1.9;
  text-align: center;
  display: block;
  width: 100%;
  align-self: stretch;
  letter-spacing: 0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Kalimat soal panjang (>40 karakter): dikecilkan sedikit dan tetap wrap
   normal ke beberapa baris — tidak pernah dipaksa satu baris, supaya
   tidak overflow keluar kartu di layar sempit. */
.face .q-text.is-long {
  font-size: clamp(1rem, 3.4vw, 1.28rem);
  line-height: 1.85;
}

/* Kalimat soal sangat panjang (>70 karakter): dikecilkan lagi. Tetap
   jauh di atas ambang keterbacaan karena diizinkan wrap ke banyak
   baris; card juga lebih tinggi (lihat .flashcard) untuk menampungnya. */
.face .q-text.is-very-long {
  font-size: clamp(0.92rem, 2.9vw, 1.12rem);
  line-height: 1.75;
}

.face .q-text.is-long.has-furigana,
.face .q-text.is-long:has(ruby) {
  line-height: 2.15;
}
.face .q-text.is-very-long.has-furigana,
.face .q-text.is-very-long:has(ruby) {
  line-height: 2.0;
}

.face .q-text br {
  content: "";
  display: block;
  margin-top: 0.35em;
}

/* Jeda antar penutur dialog A「...」B「...」 */
.face .q-text .speaker-turn {
  display: block;
  margin-top: 0.6em;
}
.face .q-text .speaker-turn:first-child {
  margin-top: 0;
}
.face .q-text .speaker-label {
  font-family: var(--mono);
  font-weight: 600;
  margin-right: 0.15em;
}

.face .q-text:has(ruby),
.face .q-text.has-furigana {
  line-height: 2.3;
}

.face .q-text .underline-word {
  border-bottom: 2px solid var(--hanko);
  padding-bottom: 1px;
}

/* Highlights the repeated target word inside each answer option on
   "usage" mojigoi questions (問31–35), where the same word appears
   embedded in four long example sentences and is otherwise easy to
   lose track of while reading. */
.q-opt-text .hl-word {
  background: rgba(21, 101, 192, 0.14);
  border-radius: 4px;
  padding: 0 2px;
  font-weight: 600;
}
:root[data-theme="dark"] .q-opt-text .hl-word {
  background: rgba(125, 211, 252, 0.22);
}

/* ruby / furigana */
.face .q-text ruby { ruby-align: center; }
.face .q-text rt,
.face .q-text .furigana {
  font-size: 0.48em;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.02em;
  user-select: none;
}
.q-opt ruby { ruby-align: center; text-align: center; }
.q-opt rt {
  font-size: 0.55em;
  line-height: 1.1;
  text-align: center;
}
.face.back .answer-word ruby { ruby-align: center; }
.face.back .answer-word rt {
  font-size: 0.42em;
  line-height: 1.1;
  font-weight: 500;
}

.q-options {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  align-self: center;
}

@media (min-width: 900px) {
  .q-options { max-width: 480px; }
}

.q-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 44px;
  margin: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--f-kanji, var(--serif));
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.q-opt:hover:not(.is-correct):not(.is-wrong):not(.is-disabled) {
  border-color: var(--gold);
  background: var(--surface-solid);
  transform: translateX(2px);
}

.q-opt.is-disabled { cursor: default; }

.q-opt.is-correct {
  border-color: var(--correct-text);
  background: var(--correct-bg);
}

.q-opt.is-wrong {
  border-color: var(--wrong-text);
  background: var(--wrong-bg);
}

.q-opt-num {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hanko), var(--mint));
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff;
  transition: background .15s ease;
}

:root[data-theme="dark"] .q-opt-num {
  background: linear-gradient(135deg, #7DD3FC, #4FD8B8);
  color: #0B1220;
}

.q-opt.is-correct .q-opt-num,
.q-opt.is-wrong .q-opt-num {
  background: none;
}
.q-opt.is-correct .q-opt-num { color: var(--correct-text); }
.q-opt.is-wrong .q-opt-num { color: var(--wrong-text); }

.q-opt-text {
  color: var(--ink);
  text-align: center;
}

.face .hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: var(--mono);
  margin-top: 18px;
}

.face.back .answer-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
  padding-right: 2px;
  flex-shrink: 0;
}

.face.back .answer-block::-webkit-scrollbar { width: 6px; }
.face.back .answer-block::-webkit-scrollbar-track { background: transparent; }
.face.back .answer-block::-webkit-scrollbar-thumb {
  background: rgba(21, 101, 192, 0.22);
  border-radius: 10px;
}
:root[data-theme="dark"] .face.back .answer-block::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 252, 0.28);
}

.face.back .answer-word {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(120deg, var(--hanko), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.face.back .answer-num {
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--correct-bg);
  color: var(--correct-text);
  border-radius: 20px;
  padding: 3px 12px;
}

.face.back .answer-explanation {
  margin: 12px auto 0;
  max-width: 46ch;
  font-family: var(--body, inherit);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  padding: 0 8px;
}

:root[data-theme="dark"] .face.back .answer-explanation {
  color: rgba(226, 232, 240, 0.85);
}

/* nav */
.card-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}

.nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}

.nav-btn:hover { border-color: var(--gold); background: rgba(79, 195, 247, 0.1); }
.nav-btn:disabled { opacity: .35; cursor: not-allowed; }

:root[data-theme="dark"] .nav-btn {
  background: #1E2A38;
  border-color: rgba(125, 211, 252, 0.30);
  color: #F1F5F9;
}
:root[data-theme="dark"] .nav-btn:hover {
  border-color: #7DD3FC;
  background: rgba(125, 211, 252, 0.14);
}
:root[data-theme="dark"] .flip-btn {
  background: #1E2A38;
  border-color: rgba(125, 211, 252, 0.30);
  color: #E2E8F0;
}
:root[data-theme="dark"] .flip-btn:hover {
  border-color: #7DD3FC;
  color: #F8FAFC;
}

.flip-btn {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}

.flip-btn:hover { border-color: var(--gold); color: var(--ink); }

kbd {
  font-family: var(--mono);
  font-size: 0.7rem;
  background: rgba(21, 101, 192, 0.08);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  color: inherit;
  opacity: 0.85;
}

:root[data-theme="dark"] kbd {
  background: rgba(125, 211, 252, 0.14);
  border-color: rgba(125, 211, 252, 0.30);
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .topbar nav { display: none; }
  .flashcard { height: clamp(500px, 72vh, 680px); }
  .face { padding: 22px 16px; }
  .face.back .answer-word { font-size: 1.5rem; }
  .hero { padding: 32px 0 20px; }
  .section-label { margin: 26px 0 14px; }
}

/* Falling cat illustrations layer */
.sakura-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sakura {
  position: absolute; top: -60px;
  animation: sakuraFall linear infinite;
  will-change: transform;
  opacity: 0.8;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.sakura img { width: 100%; height: auto; display: block; }
@keyframes sakuraFall {
  from { transform: translateY(-5vh) rotate(0deg); }
  to { transform: translateY(105vh) rotate(var(--spin, 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .sakura { animation-duration: 0.01ms !important; }
}

/* ── Side nav buttons (tablet/desktop only) ──────────────────────
   On wide viewports there's empty space to the left/right of the
   card stack; mirror prev/next there so users don't need to reach
   the bottom control bar every time. Hidden on narrower screens
   where that space doesn't exist. */
.side-nav-btn {
  display: none;
}

@media (min-width: 1024px) {
  .stage { position: relative; }

  .side-nav-btn {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--surface-solid);
    color: var(--ink);
    font-size: 1.4rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 5;
  }

  .side-nav-btn:hover { border-color: var(--gold); background: rgba(79, 195, 247, 0.1); transform: translateY(-50%) scale(1.06); }
  .side-nav-btn:disabled { opacity: .3; cursor: not-allowed; }
  .side-nav-btn:disabled:hover { transform: translateY(-50%); }

  .side-nav-btn.prev { left: calc(50% - 460px); }
  .side-nav-btn.next { right: calc(50% - 460px); }
}

@media (min-width: 1240px) {
  .side-nav-btn.prev { left: calc(50% - 500px); }
  .side-nav-btn.next { right: calc(50% - 500px); }
}

:root[data-theme="dark"] .side-nav-btn {
  background: #1E2A38;
  border-color: rgba(125, 211, 252, 0.30);
  color: #F1F5F9;
}
:root[data-theme="dark"] .side-nav-btn:hover {
  border-color: #7DD3FC;
  background: rgba(125, 211, 252, 0.14);
}