/* ==========================================================================
   Grammar Tutor - Clean Minimalist Japanese Learning Styles
   Preserves and refines the styling from jap.html
   ========================================================================== */

:root {
  --bg-color: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --card-bg: #ffffff;
  --card-border: #e2e8f0;
  --card-hover-border: #94a3b8;
  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --primary-light: #eff6ff;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
  --accent-amber: #f59e0b;
}

html.dark {
  --bg-color: #0b0f19;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --card-bg: #131b2e;
  --card-border: #1e293b;
  --card-hover-border: #334155;
  --primary-light: #1e293b;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  margin: 0;
  padding: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  body {
    padding: 24px;
  }
}

.container {
  max-width: 1040px;
  margin: 0 auto;
}

/* Card Styling (Exact jap.html aesthetic) */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  transition: all 0.15s ease;
}

.card-hover:hover {
  border-color: var(--card-hover-border);
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

/* Buttons */
.btn-primary {
  background: var(--primary-blue);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary:hover {
  background: var(--primary-blue-hover);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-secondary {
  background: #ffffff;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 12px;
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.tab-active {
  background: var(--primary-blue) !important;
  color: #ffffff !important;
  border-color: var(--primary-blue) !important;
}

#screen-topics .tab-active {
  background: #4338ca !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  box-shadow: 0 1px 2px rgba(67, 56, 202, 0.15);
}

/* Ruby Furigana */
.furigana rt {
  font-size: 0.65em;
  color: var(--text-secondary);
  user-select: none;
}

/* Blind Audio Mode (Hidden text until click) */
.blurred-text {
  filter: blur(5px);
  user-select: none;
  transition: filter 0.2s ease;
}

.blurred-text:hover,
.blurred-text.revealed {
  filter: blur(0);
}

/* 3D Tactile Flashcard */
.perspective-1000 {
  perspective: 1000px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  min-height: 290px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}

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

.flashcard-front,
.flashcard-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  padding: 24px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.flashcard-back {
  transform: rotateY(180deg);
  background: #fcfdfe;
}

/* Leitner Box Progress Indicators */
.leitner-step {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  transition: all 0.2s;
}

.leitner-step.active {
  background: var(--primary-blue);
}

.leitner-step.mastered {
  background: var(--accent-emerald);
}

/* Smooth Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.2s ease forwards;
}

/* Inline Vocab Assist Chips */
.vocab-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.72rem;
  color: #334155;
  transition: all 0.15s ease;
}

.vocab-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

/* Grammar Pattern Visual Accent */
.grammar-highlight {
  color: #2563eb;
  font-weight: 700;
  background-color: #eff6ff;
  padding: 0 3px;
  border-radius: 4px;
}

/* 4-Quadrant Genkouyoushi Box Guide */
.grid-char-box {
  width: 36px;
  height: 36px;
  position: relative;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
  color: #0f172a;
  margin: 2px;
  user-select: none;
}

.grid-char-box::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.45);
  pointer-events: none;
}

.grid-char-box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(148, 163, 184, 0.45);
  pointer-events: none;
}

.grid-char-target {
  border-color: #6366f1 !important;
  background: #e0e7ff !important;
  color: #4338ca !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.btn-notebook-done {
  background-color: #059669 !important;
  color: #ffffff !important;
  border-color: #047857 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

/* Component Anatomy Chips (matching light-theme UI) */
.comp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
}

.comp-operator {
  font-size: 13px;
  font-weight: bold;
  color: #94a3b8;
  margin: 0 2px;
}

.comp-kinship-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  transition: all 0.15s ease;
  cursor: pointer;
}

.comp-kinship-btn:hover {
  background: #f1f5f9;
  border-color: #6366f1;
  color: #4338ca;
}

/* ==========================================================================
   Shadowing & Speech Recognition Engine Soundwaves
   ========================================================================== */
@keyframes speechPulse {
  0%, 100% { height: 6px; }
  50% { height: 24px; }
}

.soundwave-bar {
  width: 4px;
  min-height: 6px;
  border-radius: 9999px;
  background-color: #0d9488;
  display: inline-block;
  transition: height 0.1s ease;
}

.soundwave-bar:nth-child(1) { animation: speechPulse 0.75s ease-in-out infinite; }
.soundwave-bar:nth-child(2) { animation: speechPulse 0.75s ease-in-out infinite 0.15s; }
.soundwave-bar:nth-child(3) { animation: speechPulse 0.75s ease-in-out infinite 0.3s; }
.soundwave-bar:nth-child(4) { animation: speechPulse 0.75s ease-in-out infinite 0.45s; }
.soundwave-bar:nth-child(5) { animation: speechPulse 0.75s ease-in-out infinite 0.2s; }
.soundwave-bar:nth-child(6) { animation: speechPulse 0.75s ease-in-out infinite 0.35s; }

/* Utility: hide scrollbars while preserving scroll functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}



/* Hide the default disclosure triangle on <details> popovers (Safari/Chrome) */
summary::-webkit-details-marker {
  display: none;
}

/* <nn-audio> (js/elements/audio-button.js): no box of its own, so layouts are unchanged.
   While its clip plays, a button gets a teal ring and clickable text turns teal. */
nn-audio {
  display: contents;
}
nn-audio[playing] > button {
  box-shadow: 0 0 0 2px #5eead4;
  animation: nnAudioPulse 1.2s ease-in-out infinite;
}
nn-audio[playing] > :not(button) {
  color: #0f766e;
}
/* Playing in Nanami's voice because Keita has no recording of the clip (js/core/audio.js): a
   small tag on the button's corner, outside its layout, so even a tiny ▶ button keeps its shape. */
nn-audio[stand-in] > * {
  position: relative;
}
nn-audio[stand-in] > *::after {
  content: "Nanami";
  position: absolute;
  top: -0.85rem;
  right: -0.25rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  background: #0f766e;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
nn-audio[empty] > * {
  opacity: 0.4;
  cursor: not-allowed;
}
@keyframes nnAudioPulse {
  50% { box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.45); }
}

/* Furigana: one setting for the whole app (state.showFurigana; setFurigana() in app.js).
   Turning it off puts .furigana-off on <html>: every <rt> and every .reading-hint
   disappears at once, without re-rendering. */
.furigana-off rt {
  display: none;
}
.furigana-off .reading-hint {
  visibility: hidden;
}

/* ==========================================================================
   Vocabulary Studio: ink & washi. Paper panels, sumi ink, a vermilion hanko.
   ========================================================================== */
#screen-vocabulary {
  --washi: #ffffff;
  --washi-edge: #e2e8f0;
  --sumi: #0f172a;
  --sumi-soft: #64748b;
  --shu: #c8372d;
  color: var(--sumi);
}
#screen-vocabulary .mincho {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Source Han Serif", serif;
}
#screen-vocabulary .washi {
  background: #ffffff;
  border: 1px solid var(--washi-edge);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
#screen-vocabulary .hanko {
  display: inline-block;
  color: var(--shu);
  border: 2px solid var(--shu);
  border-radius: 6px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  transform: rotate(-3deg);
  background: rgba(254, 242, 242, 0.7);
}
#screen-vocabulary .vocab-tab {
  padding: 0.375rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sumi-soft);
  cursor: pointer;
  transition: all 0.15s ease;
}
#screen-vocabulary .vocab-tab:hover { background: #f1f5f9; color: var(--sumi); }
#screen-vocabulary .vocab-tab.on { background: var(--sumi); color: #fff; shadow: 0 1px 2px rgba(0,0,0,0.05); }
#screen-vocabulary .vocab-rung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.75rem 0.5rem;
  border-radius: 12px;
  border: 1px solid var(--washi-edge);
  background: #ffffff;
  color: var(--sumi-soft);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
#screen-vocabulary .vocab-rung:hover { transform: translateY(-1px); border-color: #cbd5e1; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
#screen-vocabulary .vocab-rung.on {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15), 0 0 0 2px var(--shu);
}
#screen-vocabulary .vocab-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--washi-edge);
  background: #f8fafc;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sumi-soft);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
#screen-vocabulary .vocab-chip.small { padding: 0.15rem 0.55rem; font-size: 0.7rem; }
#screen-vocabulary .vocab-chip:hover { border-color: var(--shu); color: var(--shu); background: #ffffff; }
#screen-vocabulary .vocab-chip.on { background: var(--shu); border-color: var(--shu); color: #fff; }
#screen-vocabulary .vocab-tile {
  padding: 0.85rem 0.9rem 0.65rem;
  border-radius: 12px;
  border: 1px solid var(--washi-edge);
  background: #ffffff;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
#screen-vocabulary .vocab-tile:hover {
  transform: translateY(-2px);
  border-color: #fca5a5;
  box-shadow: 0 6px 16px rgba(200, 55, 45, 0.08);
}
#screen-vocabulary .vocab-unit {
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#screen-vocabulary .vocab-unit:hover {
  transform: translateY(-1px);
  border-color: var(--shu);
  box-shadow: 0 4px 12px rgba(200, 55, 45, 0.08);
}
#screen-vocabulary .vocab-play {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--washi-edge);
  background: #f8fafc;
  font-size: 0.6rem;
  color: var(--sumi-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
#screen-vocabulary .vocab-play:hover { border-color: var(--shu); color: var(--shu); background: #ffffff; }
#screen-vocabulary nn-audio[playing] .vocab-play { border-color: var(--shu); color: #fff; background: var(--shu); }
#screen-vocabulary .vocab-heading {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sumi);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-bottom: 1px solid var(--washi-edge);
  padding-bottom: 0.35rem;
}
#screen-vocabulary .vocab-heading span {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sumi-soft);
}
#screen-vocabulary .vocab-level {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  border: 1px solid;
}
#screen-vocabulary .vocab-level-n5 { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
#screen-vocabulary .vocab-level-n4 { background: #f0f9ff; color: #075985; border-color: #bae6fd; }
#screen-vocabulary .vocab-level-n3 { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
#screen-vocabulary .vocab-level-n2 { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
#screen-vocabulary .vocab-level-n1 { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
#screen-vocabulary .vocab-rule-badge {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #f1f5f9;
  color: var(--sumi-soft);
  border: 1px solid var(--washi-edge);
}
#screen-vocabulary .vocab-conj-card {
  background: #ffffff;
  border: 1px solid var(--washi-edge);
  border-radius: 10px;
  padding: 0.75rem 0.85rem;
  transition: transform 0.12s, border-color 0.12s;
}
#screen-vocabulary .vocab-conj-card:hover {
  border-color: #cbd5e1;
}

/* The sign-in pages (js/studios/account/screen.js): only the brand shows in the header. */
body.auth-screen header nav,
body.auth-screen #audioSettings,
body.auth-screen #accountSlot {
  display: none !important;
}
body.auth-screen header > div:first-child {
  pointer-events: none;
}

/* ==========================================================================
   Accounts: the learner's hanko seal (header menu, account page) and the
   account page's pickers.
   ========================================================================== */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #c8372d;
  border: 2px solid #c8372d;
  border-radius: 9999px;
  background: #fffaf3;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-6deg);
  overflow: hidden;
}
.seal-sm { width: 1.4rem; height: 1.4rem; font-size: 0.75rem; border-width: 1.5px; }
.seal-lg { width: 4rem; height: 4rem; font-size: 2rem; border-width: 3px; box-shadow: 0 0 0 3px #fffaf3, 0 0 0 4px rgba(200, 55, 45, 0.25); }
.hanko-choice {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  border: 1.5px solid #e2d6c2;
  background: #fffaf3;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  font-size: 1rem;
  font-weight: 800;
  color: #5b534d;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, color 0.12s;
}
.hanko-choice:hover { transform: rotate(-6deg); border-color: #c8372d; color: #c8372d; }
.hanko-choice.on { border-color: #c8372d; color: #c8372d; background: #fff; transform: rotate(-6deg); box-shadow: 0 0 0 2px rgba(200, 55, 45, 0.18); }
.level-choice span {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.level-choice span:hover { border-color: #10b981; }
.level-choice input:checked + span { background: #065f46; border-color: #065f46; color: #fff; }
.level-choice input:focus-visible + span { outline: 2px solid #10b981; outline-offset: 2px; }

/* Hide scrollbars on horizontal scroll ribbons */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   Dark Mode Overrides & Polish
   ========================================================================== */
html.dark {
  background-color: var(--bg-color);
}
html.dark body {
  background-color: var(--bg-color);
  color: var(--text-primary);
}

/* Header & Nav */
html.dark header {
  border-color: #1e293b;
}
html.dark header h1 {
  color: #f8fafc !important;
}
html.dark #themeToggleBtn {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark #themeToggleBtn:hover {
  background-color: #27354f;
  border-color: #475569;
}
html.dark #audioSettings summary {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark #audioSettings summary:hover {
  background-color: #27354f;
}
html.dark #audioSettings > div {
  background-color: #131b2e;
  border-color: #1e293b;
  color: #f1f5f9;
}
html.dark #audioSettings select {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark #audioSettings button {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark [data-account-menu] summary {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark [data-account-menu] > div {
  background-color: #131b2e;
  border-color: #1e293b;
  color: #f1f5f9;
}

/* Nav tabs */
html.dark nav button {
  color: #94a3b8;
}
html.dark nav button:hover {
  background-color: #1e293b;
  color: #f8fafc;
}
html.dark nav button.bg-blue-50,
html.dark nav button[id$="-home"].bg-blue-50 {
  background-color: #172554 !important;
  border-color: #1e3a8a !important;
  color: #93c5fd !important;
}

/* Cards & Panels */
html.dark .card,
html.dark .card-transition,
html.dark .bg-white {
  background-color: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text-primary);
}
html.dark .border-slate-300,
html.dark .border-slate-200,
html.dark .border-slate-200\/90,
html.dark .border-slate-200\/80,
html.dark .border-slate-200\/60,
html.dark .border-slate-100 {
  border-color: #1e293b !important;
}
html.dark .text-slate-900,
html.dark .text-slate-950 {
  color: #f8fafc !important;
}
html.dark .text-slate-800 {
  color: #f1f5f9 !important;
}
html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #cbd5e1 !important;
}
html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #94a3b8 !important;
}
html.dark .bg-slate-50 {
  background-color: #0f172a !important;
}
html.dark .bg-slate-100 {
  background-color: #1e293b !important;
}

/* Buttons in dark mode */
html.dark .btn-secondary {
  background-color: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}
html.dark .btn-secondary:hover {
  background-color: #27354f;
  border-color: #475569;
}

/* Inputs & Selects */
html.dark select,
html.dark input {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

/* Hanko stamps on dark tiles: maintain elevated dark background while preserving vibrant character colors */
html.dark .w-9.h-9.rounded-xl.bg-white {
  background-color: #0f172a !important;
}
html.dark .text-indigo-700 { color: #818cf8 !important; }
html.dark .border-indigo-500 { border-color: #6366f1 !important; }
html.dark .text-teal-700 { color: #2dd4bf !important; }
html.dark .border-teal-500 { border-color: #14b8a6 !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }
html.dark .border-amber-500 { border-color: #f59e0b !important; }
html.dark .text-\[\#c8372d\] { color: #f87171 !important; }
html.dark .border-\[\#c8372d\] { border-color: #ef4444 !important; }
html.dark .text-blue-700 { color: #60a5fa !important; }
html.dark .border-blue-500 { border-color: #3b82f6 !important; }
html.dark .text-rose-700 { color: #fb7185 !important; }
html.dark .border-rose-500 { border-color: #f43f5e !important; }
html.dark .text-sky-700 { color: #38bdf8 !important; }
html.dark .border-sky-500 { border-color: #0ea5e9 !important; }
html.dark .text-\[\#4a6344\] { color: #a3c29b !important; }
html.dark .border-\[\#76916c\] { border-color: #84a97b !important; }

/* Status and count badges in dark mode */
html.dark #homeDueBadge {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
html.dark #homeCurriculumStatusBadge {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark #statWritingKanji {
  background-color: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}
html.dark #statListeningSentences {
  background-color: rgba(20, 184, 166, 0.15) !important;
  color: #5eead4 !important;
  border-color: rgba(20, 184, 166, 0.3) !important;
}
html.dark #statReadingStories {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
html.dark #statVocabWords {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
html.dark #statTopicsCount {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #93c5fd !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
html.dark #statGrammarPatterns {
  background-color: rgba(244, 63, 94, 0.15) !important;
  color: #fda4af !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}

/* ==========================================================================
   Studio Dark Mode Overrides
   ========================================================================== */

/* 1. Vocabulary Studio: dark washi paper & tiles */
html.dark #screen-vocabulary {
  --washi: #131b2e;
  --washi-edge: #1e293b;
  --sumi: #f1f5f9;
  --sumi-soft: #94a3b8;
  color: var(--sumi);
}
html.dark #screen-vocabulary .washi,
html.dark #screen-vocabulary .vocab-unit,
html.dark #screen-vocabulary .vocab-tile {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
}
html.dark #screen-vocabulary .vocab-rung {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
  color: #94a3b8 !important;
}
html.dark #screen-vocabulary .vocab-rung:hover {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html.dark #screen-vocabulary .vocab-rung.on {
  background-color: #0f172a !important;
  border-color: #c8372d !important;
  color: #ffffff !important;
}
html.dark #screen-vocabulary .vocab-chip {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark #screen-vocabulary .vocab-chip:hover {
  background-color: #27354f !important;
  border-color: #c8372d !important;
  color: #f87171 !important;
}
html.dark #screen-vocabulary .vocab-chip.on {
  background-color: #c8372d !important;
  border-color: #c8372d !important;
  color: #ffffff !important;
}
html.dark #screen-vocabulary .vocab-tab {
  color: #94a3b8 !important;
}
html.dark #screen-vocabulary .vocab-tab:hover {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
html.dark #screen-vocabulary .vocab-tab.on {
  background-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
html.dark #screen-vocabulary .vocab-play {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark #screen-vocabulary .vocab-play:hover {
  background-color: #27354f !important;
  border-color: #c8372d !important;
  color: #ffffff !important;
}
html.dark #screen-vocabulary .vocab-rule-badge {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html.dark #screen-vocabulary .vocab-conj-card {
  background-color: #1a233a !important;
  border-color: #334155 !important;
}
html.dark #screen-vocabulary .vocab-conj-card:hover {
  border-color: #475569 !important;
}

/* 2. Flashcard Decks */
html.dark .flashcard-front,
html.dark .flashcard-back {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
html.dark [data-back-note] {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #94a3b8 !important;
}
html.dark button[data-action="again"],
html.dark button[data-action="got-it"] {
  background-color: #131b2e !important;
}
html.dark button[data-action="again"]:hover {
  background-color: rgba(244, 63, 94, 0.12) !important;
}
html.dark button[data-action="got-it"]:hover {
  background-color: rgba(16, 185, 129, 0.12) !important;
}
html.dark .leitner-step {
  background-color: #334155 !important;
}

/* 3. Writing Studio */
/* User requirement: "EXCEPT the svg for the writing should stay the white/light mode image" */
html.dark #kanjiStrokeSvg {
  background-color: transparent !important;
}
html.dark #kanjiStrokeSvg path {
  stroke: #1e293b !important;
}
html.dark .relative.w-\[220px\].h-\[220px\].bg-slate-50,
html.dark .relative.w-\[220px\].h-\[220px\].bg-white {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html.dark #wrtGhostGuide {
  color: #94a3b8 !important;
}
/* Component Anatomy & Kinship Chips */
html.dark .comp-chip {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html.dark .comp-chip .text-slate-900 {
  color: #f8fafc !important;
}
html.dark .comp-chip .text-slate-600 {
  color: #94a3b8 !important;
}
html.dark .comp-chip.bg-indigo-50 {
  background-color: #1e1b4b !important;
  border-color: #3730a3 !important;
  color: #c7d2fe !important;
}
html.dark .comp-chip.bg-indigo-50 .text-indigo-950 {
  color: #e0e7ff !important;
}
html.dark .comp-chip.bg-indigo-50 .text-indigo-700 {
  color: #a5b4fc !important;
}
html.dark .comp-kinship-btn {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark .comp-kinship-btn:hover {
  background-color: #2e384d !important;
  border-color: #6366f1 !important;
  color: #c7d2fe !important;
}
html.dark .comp-kinship-btn .text-slate-600 {
  color: #94a3b8 !important;
}
html.dark .comp-operator {
  color: #64748b !important;
}
/* Genkouyoushi grid boxes */
html.dark .grid-char-box {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html.dark .grid-char-box::before,
html.dark .grid-char-box::after {
  border-color: rgba(148, 163, 184, 0.25) !important;
}
html.dark .grid-char-target {
  background-color: #312e81 !important;
  border-color: #6366f1 !important;
  color: #c7d2fe !important;
}
html.dark #btnWrtNotebookDone.bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
/* Exemplar and Story cards gradients */
html.dark #screen-writing [class*="via-white"],
html.dark #screen-writing [class*="to-white"] {
  background: #131b2e !important;
}
html.dark #screen-writing .bg-indigo-50\/40 {
  background-color: rgba(30, 27, 75, 0.4) !important;
  border-color: #3730a3 !important;
}

/* 4. Listening Studio */
html.dark #listeningHeroAudioCard {
  background: #131b2e !important;
  border-color: #1e293b !important;
}
html.dark #listeningDrillWorkspace {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
}
html.dark #listeningDrillTypeBadge {
  background-color: rgba(6, 182, 212, 0.15) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  color: #67e8f9 !important;
}
html.dark #listeningDrillWorkspace h3 {
  color: #f8fafc !important;
}
html.dark #listeningDrillWorkspace .text-slate-800 {
  color: #f8fafc !important;
}
html.dark #listeningDrillWorkspace .text-slate-700 {
  color: #e2e8f0 !important;
}
html.dark #listeningDrillWorkspace .text-slate-600 {
  color: #cbd5e1 !important;
}
html.dark #listeningDrillWorkspace .text-slate-500 {
  color: #94a3b8 !important;
}
html.dark #listeningDrillWorkspace button[data-action="meaning"],
html.dark #listeningDrillWorkspace button[data-action="particle"] {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html.dark #listeningDrillWorkspace button[data-action="meaning"]:hover,
html.dark #listeningDrillWorkspace button[data-action="particle"]:hover {
  background-color: #2e384d !important;
  border-color: #0d9488 !important;
  color: #ffffff !important;
}
html.dark #listeningDrillWorkspace button[data-action="meaning"].bg-cyan-700,
html.dark #listeningDrillWorkspace button[data-action="particle"].bg-teal-700 {
  background-color: #0f766e !important;
  border-color: #14b8a6 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35) !important;
}
html.dark #particleSlot {
  background-color: #134e4a !important;
  border-color: #2dd4bf !important;
  color: #a7f3d0 !important;
}
html.dark .min-h-\[52px\].p-2\.5.bg-slate-50 {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}
html.dark button.listening-ch-pill.bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark button.listening-ch-pill.bg-white:hover {
  background-color: #2e384d !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}
html.dark #listeningChapterBadge,
html.dark #listeningCurrentQNum {
  color: #f8fafc !important;
}
html.dark #listeningFeedbackBox.bg-emerald-50 {
  background-color: #064e3b !important;
  border-color: #047857 !important;
  color: #ecfdf5 !important;
}
html.dark #listeningFeedbackBox.bg-rose-50 {
  background-color: #4c0519 !important;
  border-color: #9f1239 !important;
  color: #ffe4e6 !important;
}
html.dark #listeningFeedbackBox .text-emerald-950,
html.dark #listeningFeedbackBox .text-slate-900 {
  color: #ffffff !important;
}
html.dark #listeningFeedbackBox .text-emerald-800,
html.dark #listeningFeedbackBox .text-slate-700 {
  color: #cbd5e1 !important;
}
html.dark #listeningFeedbackBox .bg-white\/70 {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark #listeningCurriculumRibbon {
  background: #131b2e !important;
  border-color: #1e293b !important;
}
html.dark .bg-slate-50\/70,
html.dark [class*="bg-slate-50/"] { /* every see-through slate-50 (/40, /50, /90…), not just /70 */
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}
html.dark #screen-listening .bg-slate-50\/70 {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}
html.dark #listeningDrillTypeSelect {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}



/* 5. Kata Dojo */
html.dark .kata-time-btn:not(.border-amber-500),
html.dark .kata-env-btn:not(.border-amber-500),
html.dark .kata-tier-pill:not(.border-amber-500),
html.dark .kata-option-btn:not(.border-amber-500) {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
}
html.dark .kata-time-btn:not(.border-amber-500):hover,
html.dark .kata-env-btn:not(.border-amber-500):hover,
html.dark .kata-tier-pill:not(.border-amber-500):hover,
html.dark .kata-option-btn:not(.border-amber-500):hover {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
html.dark .kata-time-btn.border-amber-500,
html.dark .kata-env-btn.border-amber-500,
html.dark .kata-tier-pill.border-amber-500 {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: #f59e0b !important;
  color: #fef3c7 !important;
}
html.dark .kata-time-btn.border-amber-500 .text-amber-700,
html.dark .kata-env-btn.border-amber-500 .text-amber-700 {
  color: #fbbf24 !important;
}
html.dark label.border-slate-200.bg-slate-50 {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
}
html.dark label.border-slate-200.bg-slate-50:hover {
  background-color: #1e293b !important;
}
html.dark [data-lifetime-reps] {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
}

/* 6. Course Studio (Curriculum) */
html.dark #curriculumStation3VocabCompact button {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html.dark #curriculumStation3VocabCompact button:hover {
  background-color: #27354f !important;
  border-color: #a855f7 !important;
}
html.dark #curriculumStation3VocabCompact button span,
html.dark #curriculumStation3VocabCompact .font-serif-jp {
  color: #f8fafc !important;
}
html.dark #curriculumStation3VocabCompact button:hover span,
html.dark #curriculumStation3VocabCompact button:hover .font-serif-jp {
  color: #d8b4fe !important;
}
html.dark #curriculumStation3VocabCompact button span.text-\[10px\],
html.dark #curriculumStation3VocabCompact .text-\[10px\] {
  color: #94a3b8 !important;
}
html.dark #curriculumStation3VocabCompact button:hover span.text-\[10px\] {
  color: #cbd5e1 !important;
}
html.dark #curriculumStation3SentencesCompact > div {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

/* 7. Reading Studio (Reader Room) */
html.dark .reader-line [class*="bg-slate-100"],
html.dark .reader-line span.bg-slate-100 {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html.dark .reader-line .text-slate-800 {
  color: #f1f5f9 !important;
}


/* Reading Room prose (the Classics): a long reading over a short word (兵十 ひょうじゅう) overhangs
   it rather than spreading its kanji apart */
.reader-paragraph ruby { ruby-align: center; }

/* Reading Room prose in dark mode: the hover and the sentence being read are tints that keep the
   light text readable (Tailwind's bg-blue-50 / bg-amber-100 are near-white). */
html.dark .reader-sentence:hover { background-color: rgba(96, 165, 250, 0.18); }
html.dark .reader-sentence.bg-amber-100,
html.dark .commute-line.bg-amber-100 { background-color: rgba(251, 191, 36, 0.28); }

/* ノラの冒険 (js/studios/game): crisp pixels, and the touch pad only on touch screens. */
.game-canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
@media (hover: hover) and (pointer: fine) { .game-pad { display: none !important; } }
.game-pad button { touch-action: none; -webkit-user-select: none; user-select: none; }
.game-dialogue rt { color: #fde68a; font-size: 0.55em; }
/* Duels: the sprites crisp, and the big owl's golden stare (a slow gold pulse). */
.game-sprite { image-rendering: pixelated; image-rendering: crisp-edges; }
/* On a phone the 16:9 game is short: a duel, the quest log or the ending makes it taller (the
   night stays behind it, cropped rather than stretched). */
@media (max-width: 640px) {
  .game-stage.game-tall { aspect-ratio: auto; height: min(560px, 80vh); }
  .game-stage.game-tall .game-canvas { object-fit: cover; }
}
.game-duel .gap-blank { color: #fcd34d; font-weight: 700; }
.game-stare { animation: game-stare 1.2s ease-in-out infinite; }
.game-stare-eyes { filter: drop-shadow(0 0 6px #f5b942); }
@keyframes game-stare { 50% { box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.45), 0 0 28px rgba(245, 185, 66, 0.35); } }
@media (prefers-reduced-motion: reduce) { .game-stare { animation: none; box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.45); } }