/* ============================================================
   flj-theme.css — FLJ unified design system (base layer; overridden by flj-bright.css)
   Tokyo neon arcade × JRPG: cyber-indigo base, sakura/torii/mint
   accents, glassmorphism, custom form controls, micro-interactions,
   audio buttons, tooltips, victory/defeat FX.
   Replaces the retired style.css + modern.css layers.
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --bg:        #0d0f12;   /* deep cyber slate */
  --bg2:       #14162b;   /* indigo card */
  --bg3:       #1a1d36;   /* raised indigo */
  --surface:   #14162b;
  --surface2:  #1a1d36;
  --red:       #e63946;   /* torii gate red */
  --red-d:     #c22834;
  --sakura:    #ff6584;   /* vibrant sakura pink */
  --sakura-2:  #ffb7c5;   /* soft sakura */
  --mint:      #00f5d4;   /* neon mint (success) */
  --cyan:      #22d3ee;
  --gold:      #f5a623;
  --purple:    #a855f7;
  --green:     #00f5d4;   /* success now maps to mint */
  --text:      #f4f6ff;
  --text2:     #d7dcf2;
  --text3:     #9aa3c0;   /* muted — ≥4.5:1 on --bg */
  --muted:     #9aa3c0;
  --border:    rgba(255, 255, 255, 0.08);
  --glass-bg:  rgba(20, 22, 43, 0.55);
  --glass-brd: rgba(255, 255, 255, 0.05);
  --accent:        var(--red);
  --accent-hover:  var(--sakura);
  --glow-red:    0 0 18px rgba(230, 57, 70, 0.35);
  --glow-mint:   0 0 18px rgba(0, 245, 212, 0.30);
  --glow-sakura: 0 0 18px rgba(255, 101, 132, 0.35);
  --ease-tactile: all 0.2s ease-in-out;
}

/* ── 2. BASE / RESET (was style.css) ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
button { cursor: pointer; }

/* Seigaiha wave pattern — fixed ambient layer behind every page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 50% 110%, transparent 36%, rgba(255, 183, 197, 0.55) 37%, transparent 40%),
    radial-gradient(circle at 0% 110%, transparent 36%, rgba(0, 245, 212, 0.45) 37%, transparent 40%),
    radial-gradient(circle at 100% 110%, transparent 36%, rgba(230, 57, 70, 0.5) 37%, transparent 40%);
  background-size: 96px 48px;
  background-position: 0 0, 48px 0, 48px 0;
}
body > * { position: relative; z-index: 1; }

::selection { background: rgba(255, 101, 132, 0.35); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 101, 132, 0.5); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--sakura); }

/* ── 3. SHARED PRIMARY BUTTON (was style.css/modern.css) ──── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 13px 28px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: var(--ease-tactile);
}
.btn-primary:hover {
  background: var(--sakura);
  transform: scale(1.03);
  box-shadow: var(--glow-sakura);
}
.btn-primary:active { transform: scale(0.97); }

/* ── 4. GLASSMORPHISM ─────────────────────────────────────── */
.glass,
.kana-quiz-section, .quiz-wrap,
.fc-front, .fc-back,
.pricing-card, .login-box,
.stat-card, .skill-card, .lesson-card, .content-card,
.struct-card, .sentence-card, .phrase-item, .match-item,
.kana-game-card, .kana-game-panel,
.lg-panel, .lg-card .lg-card-face,
.day-letter, .day-vocab-card, .course-section, .day-step,
.kanji-canvas-section, .premium-lock-box,
.trace-modal-box, .fljr-card {
  background: rgba(16, 18, 36, 0.94) !important;
  border: 1px solid var(--glass-brd) !important;
}
.nav-dropdown {
  background: rgba(14, 16, 32, 0.98) !important;
  border: 1px solid var(--glass-brd) !important;
}
#main-nav.scrolled {
  background: rgba(10, 10, 14, 0.96) !important;
}

/* ── 5. CUSTOM SELECTS / DROPDOWN CONTROLS ────────────────── */
select, .lg-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bg3) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff6584' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 38px 10px 14px !important;
  cursor: pointer;
  transition: var(--ease-tactile);
}
select:hover { border-color: rgba(255, 101, 132, 0.45) !important; }
select:focus {
  outline: none !important;
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.18) !important;
}
select option, .lg-select option {
  background: var(--bg3) !important;
  color: var(--text) !important;
}

/* Custom checkboxes & radios (e.g. kana-games character set picker) */
input[type="radio"], input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0 6px 0 0;
  vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: var(--bg3);
  cursor: pointer;
  transition: var(--ease-tactile);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"]:hover, input[type="checkbox"]:hover {
  border-color: var(--sakura);
  box-shadow: var(--glow-sakura);
}
input[type="radio"]:checked, input[type="checkbox"]:checked {
  border-color: var(--mint);
  background: radial-gradient(circle, var(--mint) 0 38%, var(--bg3) 45%);
  box-shadow: var(--glow-mint);
}
input[type="checkbox"]:checked {
  background: var(--mint) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' fill='none' stroke='%230d0f12' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 8px no-repeat;
}

/* Text inputs (was modern.css global input rules) */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text) !important;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}
input:focus, textarea:focus {
  outline: none !important;
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.15) !important;
}
input::placeholder, textarea::placeholder { color: rgba(154, 163, 192, 0.65) !important; }

/* ── 6. TACTILE MICRO-INTERACTIONS ────────────────────────── */
.btn-red, .btn-ghost, .btn-hero-primary, .btn-hero-ghost, .btn-tenno,
.kana-tab, .level-btn, .cat-btn, .quiz-btn-primary, .quiz-btn-ghost,
.kana-quiz-btn, .fc-btn, .sen-btn, .match-new-btn, .pricing-btn,
.login-btn, .rank-btn, .wp-btn, .lg-btn, .lg-tab, .course-btn,
.struct-nav-btn, .trace-tool, .trace-done-btn, .mark-learned-btn,
.btn-trace-open, .kanji-action-btn, .kanji-nav-btn, .kc-next-btn,
.btn-nav-red, .btn-nav-ghost, .nav-login-btn, .kg-hint-btn,
.kg-board-choice, .quiz-opt, .day-master-btn, .fljr-btn {
  transition: var(--ease-tactile) !important;
}
.btn-red:hover, .btn-hero-primary:hover, .quiz-btn-primary:hover:not(:disabled),
.kana-quiz-btn:hover, .pricing-btn:hover, .login-btn:hover, .lg-btn:hover,
.course-btn:hover, .trace-done-btn:hover:not(:disabled), .btn-trace-open:hover,
.mark-learned-btn:not(.locked):not(:disabled):hover, .kc-next-btn:hover,
.btn-nav-red:hover, .fljr-btn:hover {
  transform: scale(1.03) !important;
  box-shadow: var(--glow-red) !important;
}
.btn-ghost:hover, .btn-hero-ghost:hover, .sen-btn:hover, .match-new-btn:hover,
.wp-btn:hover, .lg-btn-ghost:hover, .trace-tool:hover, .kana-tab:hover,
.level-btn:hover, .cat-btn:hover, .lg-tab:hover, .kg-hint-btn:hover,
.struct-nav-btn:hover, .btn-nav-ghost:hover, .nav-login-btn:hover {
  transform: scale(1.03);
}
.btn-red:active, .btn-ghost:active, .btn-hero-primary:active, .btn-hero-ghost:active,
.kana-tab:active, .level-btn:active, .cat-btn:active, .quiz-btn-primary:active,
.kana-quiz-btn:active, .fc-btn:active, .sen-btn:active, .match-new-btn:active,
.pricing-btn:active, .login-btn:active, .rank-btn:active, .wp-btn:active,
.lg-btn:active, .lg-tab:active, .course-btn:active, .struct-nav-btn:active,
.trace-tool:active, .trace-done-btn:active, .mark-learned-btn:active,
.btn-trace-open:active, .kanji-action-btn:active, .kanji-nav-btn:active,
.kc-next-btn:active, .btn-nav-red:active, .btn-nav-ghost:active,
.nav-login-btn:active, .kg-hint-btn:active, .kg-board-choice:active,
.quiz-opt:active, .day-master-btn:active, .match-item:active,
.kana-cell:active, .kg-bingo-cell:active, .lg-bingo-cell:active,
.lg-token:active, .kg-memory-card:active, .lg-card:active, .fljr-btn:active {
  transform: scale(0.97) !important;
}
a, button { cursor: pointer; }

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── 7. ACCENT / SUCCESS RECOLOR (torii red + neon mint) ──── */
.kana-quiz-input.correct { border-color: var(--mint) !important; box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.2) !important; }
.kana-quiz-input.wrong   { border-color: var(--red) !important;  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2) !important; }
.match-item.matched {
  border-color: rgba(0, 245, 212, 0.55) !important;
  background: rgba(0, 245, 212, 0.08) !important;
  color: var(--mint) !important;
  box-shadow: var(--glow-mint);
}
.phrase-item.heard { border-color: rgba(0, 245, 212, 0.45) !important; }
.phrase-check { color: var(--mint) !important; }
.kana-cell.mastered-kana {
  border-color: rgba(0, 245, 212, 0.5) !important;
  background: rgba(0, 245, 212, 0.07) !important;
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.12);
}

/* ── 8. CONTRAST CORRECTIONS (WCAG) ───────────────────────── */
.page-sub, .section-sub, .dash-sub, .skill-desc, .tool-desc,
.path-step-desc, .quiz-blank-hint, .lesson-desc, .lesson-channel,
.kana-chart-hint, .pricing-note, .footer-copy, .sen-counter,
.fc-hint, .sentence-hint, .card-counter, .pricing-period {
  color: var(--text3) !important;
}
footer p, .footer-inner p { color: var(--text3) !important; }
.footer-links a, .footer-inner > div:last-child a { color: var(--text3) !important; }
.footer-links a:hover { color: var(--text) !important; }
.nav-drop-label { color: #6b749a !important; }
.page-eyebrow, .section-eyebrow { color: var(--sakura) !important; }
.page-eyebrow::before, .section-eyebrow::before { background: var(--sakura) !important; }

/* ── 9. AUDIO BUTTON + RIPPLE FX (Item 2.1) ───────────────── */
.flj-say {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(255, 101, 132, 0.4);
  background: rgba(255, 101, 132, 0.1);
  color: var(--sakura);
  font-size: 0.85rem;
  line-height: 1;
  position: relative;
  cursor: pointer;
  transition: var(--ease-tactile);
}
.flj-say:hover {
  transform: scale(1.1);
  background: rgba(255, 101, 132, 0.2);
  box-shadow: var(--glow-sakura);
}
.flj-say:active { transform: scale(0.92); }
.flj-say svg { width: 15px; height: 15px; display: block; pointer-events: none; }
.flj-say .flj-say-wave { opacity: 0; transition: opacity 0.2s; }
.flj-say:hover .flj-say-wave { opacity: 1; animation: fljWave 1s ease-in-out infinite; }
.flj-say.flj-saying { border-color: var(--mint); color: var(--mint); }
.flj-say.flj-saying .flj-say-wave { opacity: 1; animation: fljWave 0.6s ease-in-out infinite; }
@keyframes fljWave {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.flj-say--lg { width: 40px; height: 40px; }
.flj-say--lg svg { width: 20px; height: 20px; }

/* Concentric ripple rings expanding from the tapped sound button */
.flj-ripple {
  position: fixed;
  z-index: 9999;
  border-radius: 50%;
  border: 2px solid var(--sakura);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.85;
  animation: fljRipple 0.7s ease-out forwards;
}
.flj-ripple--2 { border-color: var(--mint); animation-delay: 0.12s; }
.flj-ripple--3 { border-color: var(--sakura-2); animation-delay: 0.24s; }
@keyframes fljRipple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── 10. KANJI HOVER TOOLTIP (Item 2.6) ───────────────────── */
.flj-tip {
  position: fixed;
  z-index: 10000;
  max-width: 290px;
  padding: 10px 14px;
  background: rgba(16, 18, 36, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 101, 132, 0.35);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), var(--glow-sakura);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(4px) scale(0.94);
  transition: opacity 0.18s ease-in-out, transform 0.18s ease-in-out;
}
.flj-tip.show { opacity: 1; transform: translate(-50%, -100%) translateY(-8px) scale(1); }
.flj-tip-reading {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--mint);
  margin-bottom: 3px;
}
.flj-tip-en {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.78rem;
  color: var(--text2);
  line-height: 1.45;
}
.flj-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: rgba(16, 18, 36, 0.92);
  border-right: 1px solid rgba(255, 101, 132, 0.35);
  border-bottom: 1px solid rgba(255, 101, 132, 0.35);
  transform: translateX(-50%) rotate(45deg);
}
[data-flj-tip] { cursor: help; border-bottom: 1px dotted rgba(255, 101, 132, 0.45); }

/* ── 11. VICTORY / DEFEAT FX (Item 2.3) ───────────────────── */
.flj-shake { animation: fljShake 0.45s ease-in-out; }
@keyframes fljShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(2px); }
}

#flj-sakura-canvas {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
}

.flj-victory {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9995;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  text-align: center;
  padding: 28px 56px;
  background: rgba(16, 18, 36, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 101, 132, 0.4);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 101, 132, 0.25);
  pointer-events: none;
  animation: fljVictoryPop 2.4s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.flj-victory-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 900;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--sakura-2), var(--sakura) 45%, var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.flj-victory-en {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text2);
  margin-top: 6px;
}
@keyframes fljVictoryPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  18%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(0.96); }
}

/* Starburst particles (canvas reward pop) */
.flj-burst {
  position: absolute;
  z-index: 9;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  animation: fljBurst 0.7s ease-out forwards;
}
@keyframes fljBurst {
  to { transform: translate(var(--bx, 0), var(--by, 0)) scale(0.2); opacity: 0; }
}

/* ── 12. PAYMENT BUTTON LOADING STATE (Item 2.7) ──────────── */
.flj-btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
}
.flj-btn-loading::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  vertical-align: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: fljSpin 0.7s linear infinite;
}
@keyframes fljSpin { to { transform: rotate(360deg); } }

/* ── 13. WRITING CANVAS / PREMIUM LOCK (live blocks kept from
        the retired modern.css, restyled to the neon system) ── */
.kanji-canvas-section { border-radius: 24px; padding: 32px; margin-bottom: 48px; }
.kanji-canvas-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.kanji-canvas-title { font-size: 1.4rem !important; font-weight: 800 !important; color: #fff !important; margin: 0 0 6px !important; }
.kanji-canvas-sub { color: var(--text3); font-size: 0.85rem; }
.kanji-reps-badge {
  background: rgba(255, 101, 132, 0.12);
  border: 1px solid rgba(255, 101, 132, 0.4);
  border-radius: 14px;
  padding: 8px 18px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sakura);
  white-space: nowrap;
}
.kanji-reps-badge span:last-child { color: var(--text3); font-weight: 500; font-size: 0.85rem; }
.kanji-practice-grid {
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 800px) { .kanji-practice-grid { grid-template-columns: 1fr; } }
.kanji-ref-panel, .kanji-progress-panel {
  text-align: center;
  padding: 24px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-brd);
  border-radius: 16px;
}
.kanji-ref-label, .kanji-canvas-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 14px;
}
.kanji-ref-char {
  font-size: 7rem;
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 0 0 40px rgba(255, 101, 132, 0.3);
}
.kanji-ref-rom { font-size: 1.2rem; font-weight: 700; color: var(--sakura); margin-bottom: 6px; }
.kanji-ref-meaning { font-size: 0.8rem; color: var(--text3); margin-bottom: 20px; }
.kanji-nav-btns { display: flex; gap: 8px; justify-content: center; }
.kanji-nav-btn { padding: 7px 16px !important; font-size: 0.8rem !important; }
.kanji-draw-panel { text-align: center; }
.kanji-canvas-wrap {
  position: relative;
  display: inline-block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
#writing-canvas {
  display: block;
  width: 288px;
  height: 288px;
  background: #101226;
  border: 2px solid rgba(230, 57, 70, 0.4);
  border-radius: 16px;
  cursor: crosshair;
  touch-action: none;
}
.kanji-canvas-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.kanji-action-btn { padding: 8px 16px !important; font-size: 0.82rem !important; border-radius: 12px !important; }
.kc-status {
  min-height: 20px;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text3);
}
.kc-status.ok  { color: var(--mint); }
.kc-status.bad { color: var(--red); }
.kc-rep-track { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; justify-content: center; }
.kc-rep-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.kc-rep-dot.filled { background: var(--mint); border-color: var(--mint); box-shadow: var(--glow-mint); }
.kc-streak-info { text-align: center; margin-bottom: 20px; }
.kc-streak-num { font-size: 2.4rem; font-weight: 900; color: var(--gold); line-height: 1; }
.kc-streak-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kc-char-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-height: 180px; overflow-y: auto; }
.kc-char-chip {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--ease-tactile);
}
.kc-char-chip:hover { border-color: var(--sakura); transform: scale(1.08); }
.kc-char-chip.kc-active { border-color: var(--sakura); background: rgba(255, 101, 132, 0.15); color: #fff; }
.kc-char-chip.kc-mastered { border-color: rgba(0, 245, 212, 0.55); background: rgba(0, 245, 212, 0.08); }
.kc-complete-banner {
  margin-top: 24px;
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.12) 0%, rgba(0, 245, 212, 0.04) 100%);
  border: 1px solid rgba(0, 245, 212, 0.4);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  animation: fljFadeUp 0.4s ease;
}
.kc-complete-icon { font-size: 2.5rem; }
.kc-complete-title { font-size: 1.3rem; font-weight: 800; color: var(--mint); }
.kc-complete-sub { color: var(--text2); font-size: 0.9rem; }
.kc-next-btn { margin-top: 8px; padding: 12px 28px !important; }
@keyframes fljFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.premium-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(10, 11, 22, 0.82);
  animation: fljFadeIn 0.3s ease;
  overscroll-behavior: contain;
}
.premium-lock-box {
  border-radius: 24px;
  padding: 40px 36px;
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  animation: fljPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.premium-lock-icon { font-size: 3rem; margin-bottom: 16px; }
.premium-lock-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.premium-lock-sub { color: var(--text3); font-size: 0.9rem; margin-bottom: 20px; line-height: 1.6; }
.premium-lock-price {
  display: inline-block;
  background: rgba(255, 101, 132, 0.12);
  border: 1px solid rgba(255, 101, 132, 0.4);
  border-radius: 20px;
  padding: 6px 18px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--sakura);
  margin-bottom: 24px;
}
.premium-lock-btns { display: flex; flex-direction: column; gap: 10px; }
.rank-paywall-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  color: var(--text3);
  font-size: 1rem;
  transition: var(--ease-tactile);
}
.rank-paywall-close:hover { color: var(--red); border-color: var(--red); transform: scale(1.08); }
@keyframes fljFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fljPopIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── 14. KANA FLIP-CARD GRID (Item 2.4) ───────────────────── */
.kana-cell {
  perspective: 700px;
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  padding: 0 !important;
}
.kana-cell-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1);
  border-radius: 12px;
}
.kana-cell.flipped .kana-cell-inner { transform: rotateY(180deg); }
.kana-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-brd);
  padding: 8px 4px;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.kana-cell:hover .kana-face--front {
  border-color: rgba(255, 101, 132, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), var(--glow-sakura);
}
.kana-face--back {
  transform: rotateY(180deg);
  border-color: rgba(0, 245, 212, 0.3);
  gap: 3px;
  padding: 6px 4px;
}
.kana-cell.mastered-kana .kana-face--front {
  border-color: rgba(0, 245, 212, 0.5);
  background: rgba(0, 245, 212, 0.07);
}
.kana-back-rom {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--mint);
  line-height: 1;
}
.kana-back-say { font-size: 0.6rem; color: var(--text3); line-height: 1.2; }
.kana-back-vocab {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.62rem;
  color: var(--text2);
  line-height: 1.3;
  text-align: center;
  padding: 0 2px;
}
.kana-back-write {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--sakura);
  text-decoration: none;
  border: 1px solid rgba(255, 101, 132, 0.4);
  border-radius: 100px;
  padding: 2px 9px;
  margin-top: 2px;
  transition: var(--ease-tactile);
}
.kana-back-write:hover { background: rgba(255, 101, 132, 0.15); transform: scale(1.05); }
.kana-cell .flj-say { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; margin: 0; }
.kana-cell .flj-say svg { width: 11px; height: 11px; }

/* ── 15. 6-DIGIT VERIFICATION CODE (Item 2.10) ────────────── */
.flj-otp {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin: 22px 0 26px;
}
.flj-otp-cell {
  width: 46px;
  height: 56px;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem !important;
  font-weight: 800;
  color: var(--mint) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  caret-color: var(--sakura);
  transition: var(--ease-tactile) !important;
}
.flj-otp-cell:focus {
  border-color: var(--sakura) !important;
  box-shadow: 0 0 0 3px rgba(255, 101, 132, 0.2), var(--glow-sakura) !important;
  transform: scale(1.05);
}
.flj-flash--err {
  border: 1px solid rgba(230, 57, 70, 0.4);
  background: rgba(230, 57, 70, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

/* ── 17. FIRST-VISIT SIGN-UP GATE (home page, anon only) ───── */
.flj-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 9, 18, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: fljFadeIn 0.3s ease;
  overscroll-behavior: contain;
}
.flj-gate-overlay[hidden] { display: none; }
.flj-gate-card {
  width: 100%;
  max-width: 440px;
  text-align: center;
  padding: 40px 34px;
  border-radius: 24px;
  background: rgba(20, 22, 43, 0.9);
  border: 1px solid rgba(255, 101, 132, 0.3);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.65), 0 0 60px rgba(255, 101, 132, 0.15);
  animation: fljPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.flj-gate-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--sakura-2), var(--sakura) 50%, var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.flj-gate-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
}
.flj-gate-sub {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text3);
  margin: 0 0 24px;
}
.flj-gate-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.flj-gate-dismiss {
  background: none;
  border: none;
  color: var(--text3);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  transition: var(--ease-tactile);
}
.flj-gate-dismiss:hover { color: var(--text); }

/* ── 18. REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .flj-victory, .flj-ripple, .flj-burst { display: none !important; }
  #flj-sakura-canvas { display: none !important; }
}

/* ── 19. DARK-MODE PATCH ──────────────────────────────────────
   learning-hub.css / rank-cards.css were written light-first in the
   July 2026 pivot and hardcode cream/white backgrounds. When the
   theme switcher turns flj-bright.css off (html.flj-dark), flip those
   surfaces back to the dark tokens. */
html.flj-dark .hub-hero-shell,
html.flj-dark .hub-hero-shell--home {
  background: linear-gradient(165deg, #1a1d36 0%, #0d0f12 100%) !important;
  border-bottom: 1px solid var(--border) !important;
}
html.flj-dark .hub-hero-meta .hub-meta-pill,
html.flj-dark .hub-flow-mini,
html.flj-dark .hub-flow-step span,
html.flj-dark .hub-stat,
html.flj-dark .hub-pathway,
html.flj-dark .hub-timeline-marker,
html.flj-dark .hub-zone,
html.flj-dark .hub-card,
html.flj-dark .hub-card--featured,
html.flj-dark .hub-card--premium,
html.flj-dark .hub-card-badge,
html.flj-dark .hub-cta,
html.flj-dark .dash-zone-num,
html.flj-dark .rank-aside-card {
  background: var(--surface2) !important;
  border-color: var(--glass-brd) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
html.flj-dark .rank-card-btn,
html.flj-dark .rank-card-btn--tutoring {
  background: linear-gradient(165deg, rgba(26, 29, 54, 0.95), rgba(13, 15, 18, 0.98)) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}
html.flj-dark .rank-card-btn:hover {
  border-color: rgba(255, 101, 132, 0.25) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 101, 132, 0.08) !important;
}
html.flj-dark .rank-card-avatars .flj-avatar-slot {
  background: rgba(13, 15, 28, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25) !important;
}
html.flj-dark .rank-card-quote {
  background: rgba(13, 15, 28, 0.65) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
html.flj-dark .rank-card-level {
  background: rgba(13, 15, 28, 0.85) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
html.flj-dark .rank-card-body,
html.flj-dark .rank-aside-title,
html.flj-dark .rank-aside-steps,
html.flj-dark .rank-aside-card--games p {
  color: var(--text3) !important;
}
html.flj-dark .session-promo-card {
  background: linear-gradient(165deg, rgba(26, 29, 54, 0.95), rgba(13, 15, 18, 0.98)) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(168, 85, 247, 0.1) !important;
}
html.flj-dark .session-promo-title { color: var(--text) !important; }
html.flj-dark .session-promo-sub,
html.flj-dark .session-promo-features li { color: var(--text3) !important; }
html.flj-dark .session-promo-price { color: var(--purple) !important; }
html.flj-dark .session-promo-price span,
html.flj-dark .session-promo-secondary { color: var(--text3) !important; }
html.flj-dark .session-promo-secondary:hover { color: var(--purple) !important; }
@keyframes flj-dark-kbadge-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
/* hero kbadge overlays — dark mode styles */
html.flj-dark body.flj-home .hero-kbadge {
  position: absolute;
  background: rgba(13, 15, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 6px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
  font-weight: 700;
  font-size: .75rem;
  color: #e8ecf8;
  z-index: 2;
  white-space: nowrap;
}
html.flj-dark body.flj-home .hero-kbadge .hero-kbadge-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--sakura);
}
html.flj-dark body.flj-home .hero-kbadge--a {
  top: 12px;
  left: 12px;
  animation: flj-dark-kbadge-bob 4s ease-in-out infinite;
  --r: -8deg;
  font-size: .78rem;
}
html.flj-dark body.flj-home .hero-kbadge--xp {
  bottom: 48px;
  left: 12px;
  background: rgba(0, 245, 212, 0.22);
  border: 1px solid rgba(0, 245, 212, 0.45);
  color: #b0f0e0;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  animation: flj-dark-kbadge-bob 5s ease-in-out .8s infinite;
  --r: -4deg;
  font-size: .78rem;
}
html.flj-dark body.flj-home .hero-kbadge--xp small {
  display: block;
  font-weight: 700;
  font-size: .68rem;
  opacity: .9;
}
html.flj-dark body.flj-home .hero-kbadge--streak {
  top: 48px;
  right: 12px;
  background: rgba(251, 191, 36, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #f5d88a;
  border-radius: 999px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  animation: flj-dark-kbadge-bob 4.5s ease-in-out .4s infinite;
  --r: 8deg;
  font-size: .95rem;
  padding: 0;
}
html.flj-dark body.flj-home .hero-kbadge--streak small {
  display: block;
  font-size: .5rem;
  font-weight: 800;
}
html.flj-dark body.flj-home .hero-kbadge--jp {
  bottom: 12px;
  right: 12px;
  transform: rotate(3deg);
  font-size: .8rem;
  color: #e8ecf8;
}
@media (max-width: 900px) {
  html.flj-dark body.flj-home .hero-kbadge--xp { left: 8px; bottom: 40px; }
  html.flj-dark body.flj-home .hero-kbadge--a { left: 8px; }
  html.flj-dark body.flj-home .hero-kbadge--streak { right: 8px; top: 40px; }
  html.flj-dark body.flj-home .hero-kbadge--jp { right: 8px; bottom: 8px; }
}
html.flj-dark .hub-hero-mountains { opacity: 0.12 !important; }
/* dark mode: bring back the neon seigaiha (flj-quality.css hides it; the
   html.flj-dark selector out-specifies that rule) */
html.flj-dark body:not(.flj-home)::before { display: block !important; opacity: 0.07; }

/* ── 19b. DARK TEXT CONTRAST — readable letters on dark surfaces ──
   learning-hub / rank-cards were light-first: some rules still paint dark
   ink or low-contrast grays. Force light text on study glyphs & headings. */
html.flj-dark {
  color-scheme: dark;
}

html.flj-dark .hub-zone-head {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: var(--border) !important;
}

html.flj-dark .hub-hero-inner .page-title,
html.flj-dark .hub-section-title,
html.flj-dark .hub-zone-title,
html.flj-dark .hub-timeline-content h3,
html.flj-dark .hub-card h3,
html.flj-dark .hub-cta h2,
html.flj-dark .dash-zone-title,
html.flj-dark .rank-aside-title {
  color: var(--text) !important;
}

html.flj-dark .hub-hero-jp,
html.flj-dark .hub-hero-inner .page-sub,
html.flj-dark .hub-section-sub,
html.flj-dark .hub-zone-desc,
html.flj-dark .hub-card p,
html.flj-dark .hub-timeline-content p,
html.flj-dark .hub-cta p,
html.flj-dark .dash-zone-jp,
html.flj-dark .hub-flow-step,
html.flj-dark .hub-flow-arrow,
html.flj-dark .rank-card-body,
html.flj-dark .rank-aside-steps,
html.flj-dark .rank-aside-card--games p,
html.flj-dark .rank-cards-banner {
  color: var(--text3) !important;
}

html.flj-dark .hub-card-badge {
  color: var(--red) !important;
  background: rgba(230, 57, 70, 0.14) !important;
  border-color: rgba(230, 57, 70, 0.35) !important;
}

html.flj-dark .dash-zone-num,
html.flj-dark .hub-flow-step span,
html.flj-dark .hub-timeline-marker {
  color: var(--red) !important;
  background: rgba(230, 57, 70, 0.12) !important;
  border-color: rgba(230, 57, 70, 0.3) !important;
}

/* Japanese / romaji study glyphs */
html.flj-dark .kana-char,
html.flj-dark .kana-page .kana-char,
html.flj-dark .kana-quiz-char,
html.flj-dark .kana-detail-char,
html.flj-dark .kana-face--front,
html.flj-dark .fc-jp,
html.flj-dark .ph-card-jp,
html.flj-dark .ph-quiz-jp,
html.flj-dark .sn-jp,
html.flj-dark .sn-quiz-jp,
html.flj-dark .kg-board-char,
html.flj-dark .kg-bingo-cell,
html.flj-dark .kg-memory-back,
html.flj-dark .vocab-jp,
html.flj-dark .kanji-char,
html.flj-dark .struct-flip-jp,
html.flj-dark .struct-rank-tab-jp { color: #ccc !important; }
html.flj-dark .struct-rank-tab.active .struct-rank-tab-jp,
html.flj-dark .wp-flip-char,
html.flj-dark .gc-jp,
html.flj-dark .promo-day-char,
html.flj-dark .magnet-demo-char,
html.flj-dark .quiz-prompt,
html.flj-dark .sentence-jp,
html.flj-dark .rank-card-header-kanji,
html.flj-dark .hub-card-icon.flj-kanji-icon {
  color: #fff !important;
}

/* Muted labels — bump #666/#555/#444 that disappear on dark bg */
html.flj-dark .page-sub,
html.flj-dark .dash-sub,
html.flj-dark .skill-desc,
html.flj-dark .fc-rom,
html.flj-dark .fc-hint,
html.flj-dark .kana-chart-hint,
html.flj-dark .kana-panel-sub,
html.flj-dark .struct-rank-tab-en,
html.flj-dark .struct-rank-tab-lvl,
html.flj-dark .card-note,
html.flj-dark .vocab-romaji,
html.flj-dark .kanji-romaji,
html.flj-dark .struct-flip-r,
html.flj-dark .rank-paywall-close,
html.flj-dark .footer-copy,
html.flj-dark .fc-tool-btn,
html.flj-dark .ph-stat-lbl,
html.flj-dark .sn-stat-lbl,
html.flj-dark .sn-quest-status,
html.flj-dark .kg-panel-sub,
html.flj-dark .fc-dock-tab:not(.active),
html.flj-dark .ph-dock-tab:not(.active),
html.flj-dark .sn-dock-tab:not(.active),
html.flj-dark .kana-dock-tab:not(.active) {
  color: var(--text3) !important;
}

/* Home hero stats — solid readable numbers & labels on dark hero */
html.flj-dark body.flj-home #hero .hero-stat-num,
html.flj-dark body.flj-home #hero .hub-stat-num {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: currentColor !important;
}
html.flj-dark body.flj-home #hero .hub-stat:nth-child(1) .hub-stat-num { color: #ff6b9d !important; }
html.flj-dark body.flj-home #hero .hub-stat:nth-child(2) .hub-stat-num { color: #ffb020 !important; }
html.flj-dark body.flj-home #hero .hub-stat:nth-child(3) .hub-stat-num { color: #66e0a8 !important; }
html.flj-dark body.flj-home #hero .hub-stat:nth-child(4) .hub-stat-num { color: #b794f6 !important; }
html.flj-dark body.flj-home #hero .hero-stat-lbl,
html.flj-dark body.flj-home #hero .hub-stat-lbl {
  color: var(--text2) !important;
}