/* ==========================================================================
   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.
   ========================================================================== */
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) {
  --washi: #ffffff;
  --washi-edge: #e2e8f0;
  --sumi: #0f172a;
  --sumi-soft: #64748b;
  --shu: #c8372d;
  color: var(--sumi);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .mincho {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Source Han Serif", serif;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .washi {
  background: #ffffff;
  border: 1px solid var(--washi-edge);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-lessons, #screen-course, #screen-reading) .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;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-lessons, #screen-course, #screen-reading) .vocab-tab:hover { background: #f1f5f9; color: var(--sumi); }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-lessons, #screen-course, #screen-reading) .vocab-tab.on { background: var(--sumi); color: #fff; shadow: 0 1px 2px rgba(0,0,0,0.05); }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-rung:hover { transform: translateY(-1px); border-color: #cbd5e1; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-chip.small { padding: 0.15rem 0.55rem; font-size: 0.7rem; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-chip:hover { border-color: var(--shu); color: var(--shu); background: #ffffff; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-chip.on { background: var(--shu); border-color: var(--shu); color: #fff; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-tile:hover {
  transform: translateY(-2px);
  border-color: #fca5a5;
  box-shadow: 0 6px 16px rgba(200, 55, 45, 0.08);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-unit {
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-unit:hover {
  transform: translateY(-1px);
  border-color: var(--shu);
  box-shadow: 0 4px 12px rgba(200, 55, 45, 0.08);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-play:hover { border-color: var(--shu); color: var(--shu); background: #ffffff; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) nn-audio[playing] .vocab-play { border-color: var(--shu); color: #fff; background: var(--shu); }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-heading span {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sumi-soft);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-level {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  border: 1px solid;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-level-n5 { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-level-n4 { background: #f0f9ff; color: #075985; border-color: #bae6fd; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-level-n3 { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-level-n2 { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-level-n1 { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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);
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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;
}
:is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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-md { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; border-width: 2px; }
.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-violet-700 { color: #a78bfa !important; }
html.dark .border-violet-500 { border-color: #8b5cf6 !important; }
html.dark .text-orange-700 { color: #fb923c !important; }
html.dark .border-orange-500 { border-color: #f97316 !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 :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) {
  --washi: #131b2e;
  --washi-edge: #1e293b;
  --sumi: #f1f5f9;
  --sumi-soft: #94a3b8;
  color: var(--sumi);
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .washi,
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-unit,
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-tile {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-rung {
  background-color: #131b2e !important;
  border-color: #1e293b !important;
  color: #94a3b8 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-rung:hover {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-rung.on {
  background-color: #0f172a !important;
  border-color: #c8372d !important;
  color: #ffffff !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-chip {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-chip:hover {
  background-color: #27354f !important;
  border-color: #c8372d !important;
  color: #f87171 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-chip.on {
  background-color: #c8372d !important;
  border-color: #c8372d !important;
  color: #ffffff !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-lessons, #screen-course, #screen-reading) .vocab-tab {
  color: #94a3b8 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-lessons, #screen-course, #screen-reading) .vocab-tab:hover {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-lessons, #screen-course, #screen-reading) .vocab-tab.on {
  background-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-play {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-play:hover {
  background-color: #27354f !important;
  border-color: #c8372d !important;
  color: #ffffff !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-rule-badge {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .vocab-conj-card {
  background-color: #1a233a !important;
  border-color: #334155 !important;
}
html.dark :is(#screen-vocabulary, #screen-writing, #screen-grammar, #screen-listening, #screen-reading) .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); } }

/* ---------------------------------------------------------------------------------------------
   Lessons (js/studios/lessons/): the audition pages' look, rows of examples with play buttons.
   Colours come from the theme's variables, so dark mode follows.
   --------------------------------------------------------------------------------------------- */
#screen-lessons, #screen-course { --lesson-chip: color-mix(in srgb, var(--card-border) 45%, var(--card-bg)); --lesson-good: #059669; --lesson-bad: #dc2626; }
html.dark #screen-lessons, html.dark #screen-course { --lesson-good: #34d399; --lesson-bad: #f87171; }
.lesson-page { color: var(--text-primary); font-size: 15px; line-height: 1.65; }
.lesson-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 20px; }
.lesson-card > p { margin: 10px 0; }
.lesson-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.lesson-kicker { margin: 0; font-size: 13px; }
.lesson-muted { color: var(--text-secondary); }
.lesson-h { font-size: 13px; font-weight: 700; margin: 26px 0 8px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.lesson-page .jp { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.lesson-page .jp-inline, .lesson-choice { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.lesson-page .jp { font-size: 21px; }
.lesson-page rt { font-size: 10px; color: var(--text-secondary); font-family: system-ui, sans-serif; }
.lesson-scroll { overflow-x: auto; }
.lesson-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.lesson-table th, .lesson-table td { padding: 10px 8px; border-bottom: 1px solid var(--card-border); vertical-align: middle; text-align: left; }
.lesson-table th { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.lesson-table th.jp { font-size: 21px; color: var(--text-primary); font-weight: 400; }
.lesson-cell-play { width: 1%; white-space: nowrap; text-align: right; }
.lesson-plays { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lesson-play { display: inline-flex; align-items: center; gap: 5px; background: var(--lesson-chip); border: 1px solid var(--card-border); color: var(--text-primary); border-radius: 8px; padding: 4px 9px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.lesson-play:hover { border-color: var(--primary-blue); }
.lesson-tones th { text-align: left; font-size: 12px; font-weight: 600; }
.lesson-tones td, .lesson-tones th { padding: 6px 8px 6px 0; }
.lesson-tone-cell { display: flex; gap: 3px; }
.lesson-tone-word { font-size: 18px; line-height: 1; padding: 5px 6px; border-radius: 7px; background: var(--lesson-chip); border: 1px solid var(--card-border); color: var(--text-primary); cursor: pointer; }
.lesson-tone-word:hover { border-color: var(--primary-blue); }
#screen-lessons nn-audio[playing] > .lesson-tone-word { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
#screen-lessons nn-audio[playing] > .lesson-play, #screen-course nn-audio[playing] > .lesson-play, #screen-lessons nn-audio[playing] > .lesson-kana-tile { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.lesson-spelled { display: block; font-size: 13px; color: var(--text-secondary); }
.lesson-romaji { display: block; font-size: 13px; color: var(--text-secondary); font-family: system-ui, sans-serif; letter-spacing: .02em; }
.lesson-note-small { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.lesson-callout { background: color-mix(in srgb, var(--primary-blue) 9%, transparent); border: 1px solid color-mix(in srgb, var(--primary-blue) 30%, transparent); border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.lesson-kana { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.lesson-kana-tile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; background: var(--lesson-chip); border: 1px solid var(--card-border); border-radius: 12px; color: var(--text-primary); cursor: pointer; }
.lesson-kana-tile:hover { border-color: var(--primary-blue); }
.lesson-kana-tile .jp { font-size: 34px; line-height: 1.1; }
/* Chinese to tap and hear, in any studio (js/ui/say.js). */
.say { font: inherit; color: inherit; background: none; border: 0; padding: 0 1px; border-radius: 4px; cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--primary-blue) 60%, transparent); text-underline-offset: 5px; }
.say:hover, .say:focus-visible { background: color-mix(in srgb, var(--primary-blue) 14%, transparent); }
nn-audio[playing] > .say { background: var(--primary-blue); color: #fff; }
nn-audio[playing] > .say rt { color: #fff; }
.lesson-say { font: inherit; color: inherit; background: none; border: 0; padding: 0 1px; border-radius: 4px; cursor: pointer;
  text-decoration: underline dotted color-mix(in srgb, var(--primary-blue) 60%, transparent); text-underline-offset: 5px; }
.lesson-say:hover, .lesson-say:focus-visible { background: color-mix(in srgb, var(--primary-blue) 14%, transparent); }
nn-audio[playing] > .lesson-say { background: var(--primary-blue); color: #fff; }
nn-audio[playing] > .lesson-say rt { color: #fff; }
.lesson-sounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 8px; margin: 10px 0; }
.lesson-sound-zh { font-size: 30px; line-height: 1.6; }
.lesson-sound-zh rt { font-size: 13px; }
.lesson-zh { font-size: 18px; }
.lesson-words .lesson-romaji { display: block; }
.lesson-q { margin: 16px 0; }
.lesson-q-prompt { font-size: 15px; font-weight: 500; }
.lesson-q-n { color: var(--text-secondary); font-weight: 600; }
.lesson-choices { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lesson-choice { background: var(--lesson-chip); border: 1px solid var(--card-border); color: var(--text-primary); border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 14px; font-weight: 500; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.lesson-choice:hover:not(:disabled) { border-color: var(--primary-blue); }
.lesson-choice:disabled { cursor: default; }
.lesson-choice.is-right { border-color: var(--lesson-good); color: var(--lesson-good); font-weight: 700; }
.lesson-choice.is-wrong { border-color: var(--lesson-bad); color: var(--lesson-bad); }
.lesson-feedback { font-size: 13px; margin-top: 6px; }
.lesson-feedback.is-right { color: var(--lesson-good); }
.lesson-feedback.is-wrong { color: var(--lesson-bad); }
.lesson-finish { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.lesson-btn { display: inline-block; background: var(--primary-blue); color: #fff; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; cursor: pointer; text-decoration: none; }
.lesson-btn:disabled { opacity: .45; cursor: default; }
.lesson-done { margin-top: 18px; border-top: 1px solid var(--card-border); padding-top: 12px; }
.lesson-practice { margin: 6px 0 14px 18px; list-style: disc; }
.lesson-link { color: var(--primary-blue); font-weight: 600; }
.lesson-link:hover { text-decoration: underline; }
.lesson-steps { list-style: none; margin: 12px 0 0 8px; padding: 0 0 0 16px; border-left: 3px solid var(--card-border); }
.lesson-step { display: flex; gap: 10px; align-items: center; padding: 8px 0; flex-wrap: wrap; }
.lesson-step.is-coming { color: var(--text-secondary); }
.lesson-step a.lesson-step-title { color: var(--text-primary); font-weight: 600; }
.lesson-step a.lesson-step-title:hover { color: var(--primary-blue); text-decoration: underline; }
.lesson-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--card-border); flex: none; display: grid; place-items: center; font-size: 12px; margin-left: -29px; background: var(--card-bg); }
.lesson-step.is-done .lesson-dot { background: var(--lesson-good); border-color: var(--lesson-good); color: #fff; }
.lesson-step.is-next .lesson-dot { border-color: var(--primary-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-blue) 22%, transparent); }
.lesson-tag { font-size: 11px; border-radius: 6px; padding: 1px 7px; background: var(--lesson-chip); color: var(--text-secondary); border: 1px solid var(--card-border); }
.lesson-tag.is-next { color: var(--primary-blue); }
.lesson-tag.is-done { color: var(--lesson-good); }
.lesson-examples tr { display: grid; grid-template-columns: 1fr auto; }
.lesson-examples td:first-child { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
.lesson-words td:first-child { white-space: nowrap; }
@media (max-width: 600px) {
  .lesson-card { padding: 16px; }
  .lesson-table th, .lesson-table td { padding: 8px 4px; }
  .lesson-page .jp { font-size: 18px; }
  .lesson-words tr { display: grid; grid-template-columns: 1fr auto; }
  .lesson-words td:first-child { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; white-space: normal; }
  /* the tone grid: each tone a block, its voices two by two, each named (it was 632px wide) */
  .lesson-tones tr:first-child { display: none; }
  .lesson-tones tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--card-border); }
  .lesson-tones th, .lesson-tones td { border-bottom: 0; padding: 0; }
  .lesson-tones tr > th { grid-column: 1 / -1; }
  .lesson-tones tr > th .lesson-muted { display: inline; margin-left: 6px; }
  .lesson-tones td::before { content: attr(data-voice); display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; }
}

/* ---------------------------------------------------------------------------------------------
   The header's Studios menu (index.html #studiosMenu, app.js setupStudiosMenu)
   --------------------------------------------------------------------------------------------- */
.studios-menu { position: relative; margin-left: auto; margin-right: 8px; }
/* The track chip (js/core/track-menu.js): the guide's face, the track and its place; its menu switches either. */
.track-menu { position: relative; margin-left: auto; }
.track-menu + .studios-menu { margin-left: 8px; }
.track-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; white-space: nowrap;
  padding: 4px 10px 4px 4px; border: 1.5px solid var(--c); border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, var(--card-bg)); color: var(--text-primary); font-size: 13px; }
.track-menu > summary::-webkit-details-marker { display: none; }
.track-menu > summary:hover, .track-menu[open] > summary { background: color-mix(in srgb, var(--c) 18%, var(--card-bg)); }
.track-menu-face { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex: none; }
.track-menu-label b { font-weight: 700; }
.track-menu-label > span { color: var(--text-secondary); }
.track-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; width: 270px; padding: 10px; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.track-menu-sub { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-secondary); margin: 4px 4px 6px; }
.track-menu-sub + .track-menu-row { margin-top: 0; }
.track-menu-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px; margin-top: 4px; border-radius: 10px; text-align: left; cursor: pointer; }
.track-menu-row .track-menu-face { width: 32px; height: 32px; }
.track-menu-row b { display: block; font-size: 14px; }
.track-menu-row small { display: block; font-size: 11px; color: var(--text-secondary); }
.track-menu-row[aria-checked="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.track-menu-places { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 2px; }
.track-menu-places .track-place { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.studios-menu > summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--text-primary); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 9px; padding: 6px 11px; }
.studios-menu > summary::-webkit-details-marker { display: none; }
.studios-menu > summary:hover, .studios-menu[open] > summary { border-color: var(--primary-blue); }
.studios-menu-current:not(:empty) { font-weight: 600; color: var(--text-secondary); }
.studios-menu-current:not(:empty)::before { content: "· "; }
.studios-menu-caret { font-size: 11px; color: var(--text-secondary); }
.studios-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(560px, calc(100vw - 24px)); background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, .22); padding: 10px; }
.studios-menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.studios-menu-grid a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--card-border);
  border-bottom: 3px solid var(--c); font-size: 12px; font-weight: 700; color: var(--text-primary); text-align: center; }
.studios-menu-grid a:hover, .studios-menu-grid a[aria-current] { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); }
.studios-menu-seal { width: 30px; height: 30px; border: 1.5px solid var(--c); color: var(--c); border-radius: 6px; display: grid; place-items: center;
  font: 600 17px/1 "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.studios-menu-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--card-border); font-size: 12.5px; text-align: center; }
.studios-menu-more a { padding: 5px 2px; border-radius: 8px; white-space: nowrap; }
.studios-menu-more a:hover, .studios-menu-more a[aria-current] { background: color-mix(in srgb, var(--primary-blue) 10%, transparent); }
.studios-menu-more a { color: var(--text-secondary); font-weight: 600; }
.studios-menu-more a:hover, .studios-menu-more a[aria-current] { color: var(--primary-blue); }
@media (max-width: 640px) {
  .studios-menu-current { display: none; }
  .studios-menu-panel { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}
/* A phone: the header fits its width, or every page scrolls sideways and pinch-zoom shows it
   left-aligned (it needed 500px at 375). The logo stays and the wordmark goes (the logo's alt and the
   page title still say it); Studios is a grid button; the track chip gives way before anything spills. */
@media (max-width: 480px) {
  .site-header { gap: 8px; }
  .brand-word { display: none; }
  .track-menu { min-width: 0; }
  .track-menu > summary { min-width: 0; padding-right: 8px; }
  .track-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .track-menu + .studios-menu { margin-left: 0; margin-right: 0; }
  .studios-menu > summary { padding: 6px 8px; gap: 4px; }
  .studios-menu > summary::before { content: "\25A6"; font-size: 15px; line-height: 1; }
  .studios-menu-label, .studios-menu > summary .studios-menu-caret { display: none; }
}

/* The Command Center's track panel (js/studios/home/view.js trackPanel): a guide per track, in its
   colour (--c), and the places it's spoken; the chosen ones marked by aria-pressed, in either theme. */
.track-guide { border: 2px solid var(--card-border); color: var(--text-primary); }
.track-guide:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--card-border)); }
.track-guide[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.track-guide-seal { border: 2px solid var(--c); color: var(--c); background: var(--card-bg); }
.track-place { border: 1px solid var(--card-border); color: var(--text-secondary); background: var(--card-bg); }
.track-place:hover { border-color: var(--text-secondary); }
.track-place[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--card-bg); }

/* Readings over Chinese (pinyin, zhuyin, jyutping): one syllable per character, often wider than it,
   so each keeps a little room either side and they don't run together. */
:is([lang^="zh"], [lang^="yue"]) rt { font-size: 0.5em; padding-inline: 0.15em; font-family: system-ui, sans-serif; color: var(--text-secondary); }
:is([lang^="zh"], [lang^="yue"]) ruby { ruby-align: center; }

/* Chinese in a serif, in the shapes of the place that writes it: simplified (Beijing, Guangzhou),
   Taiwan's traditional, Hong Kong's. lang is on the text or around it (js/studios/vocabulary/view.js zh). */
.zh-serif:lang(zh-Hans), .zh-serif:lang(yue-Hans) { font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif; }
.zh-serif:lang(zh-Hant) { font-family: "Songti TC", "Noto Serif TC", "Source Han Serif TC", serif; }
.zh-serif:lang(zh-Hant-HK) { font-family: "Songti TC", "Noto Serif HK", "Noto Serif TC", "Source Han Serif HK", serif; }

/* Command Center: your progress in each studio (js/studios/home/index.js renderProgress) */
.cc-progress:empty { display: none; }
.cc-progress { margin-top: 12px; }
.cc-progress-text { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-secondary); }
.cc-progress-text b { color: var(--text-primary); font-weight: 700; text-align: right; }
.cc-progress-bar { height: 5px; border-radius: 5px; background: var(--card-border); overflow: hidden; margin-top: 5px; }
.cc-progress-bar i { display: block; height: 100%; background: var(--accent-emerald); }

/* ---------------------------------------------------------------------------------------------
   Home: the roadmap (js/studios/roadmap/). The studios and the panel follow the theme; the map is
   a night scene in both.
   --------------------------------------------------------------------------------------------- */
#screen-roadmap { --rm-here: #7c86ff; --rm-done: #34d399; }
.rm-page { max-width: 1000px; margin: 0 auto; color: var(--text-primary); }
.rm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rm-head h1 { font-size: 22px; font-weight: 800; margin: 0; }
.rm-cc { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.rm-cc:hover { color: var(--primary-blue); text-decoration: underline; }
.rm-studios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rm-studio { min-width: 0; display: flex; gap: 10px; align-items: center; background: var(--card-bg); border: 1px solid var(--card-border);
  border-bottom: 3px solid var(--c); border-radius: 12px; padding: 11px 12px; color: var(--text-primary); transition: border-color .15s, transform .15s; }
.rm-studio:hover { border-color: var(--c); transform: translateY(-1px); }
.rm-seal { width: 34px; height: 34px; border: 1.5px solid var(--c); color: var(--c); border-radius: 7px; display: grid; place-items: center; flex: none;
  font: 600 19px/1 "Songti SC", "Songti TC", "Noto Serif SC", "Noto Serif TC", serif; }
.rm-studio.is-soon { opacity: .6; border-bottom-style: dashed; cursor: default; }
.rm-studio.is-soon small { display: block; }
.rm-track { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.rm-guide { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; cursor: pointer; text-align: left; }
.rm-guide b { display: block; font-size: 14px; }
.rm-guide small { display: block; font-size: 11px; color: var(--text-secondary); }
.rm-guide-face { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; transform: rotate(-3deg); }
.rm-places { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.rm-places .track-place { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.rm-place { font-family: "Songti SC", "Songti TC", "Noto Serif SC", "Noto Serif TC", serif; color: var(--text-secondary); font-weight: 600; margin-left: 4px; }
.rm-place-en { font-size: 12.5px; }
.rm-story { font-size: 13.5px; margin: 8px 0 4px; }
.rm-map text[lang="zh"] { font-family: "Songti SC", "Songti TC", "Noto Serif SC", "Noto Serif TC", serif; }
.rm-studio-text { min-width: 0; }
.rm-studio b { display: block; font-size: 14px; line-height: 1.25; }
.rm-studio small { display: none; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-studio.is-due small { display: block; color: var(--c); font-weight: 700; }
.rm-flow { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rm-flow a { display: flex; gap: 8px; align-items: center; padding: 6px 4px; color: var(--text-primary); border-radius: 8px; }
.rm-flow a:hover b { color: var(--primary-blue); }
.rm-flow-n { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text-secondary); color: var(--text-secondary); display: grid; place-items: center; font-size: 11.5px; font-weight: 800; flex: none; }
.rm-flow b { display: block; font-size: 13px; }
.rm-flow small { display: block; font-size: 11.5px; color: var(--text-secondary); line-height: 1.3; }
.rm-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: var(--text-secondary); font-size: 11px; letter-spacing: .08em; font-weight: 800; text-transform: uppercase; }
.rm-divider::before, .rm-divider::after { content: ""; flex: 1; height: 1px; background: var(--card-border); }
.rm-intro h2 { font-size: 20px; font-weight: 800; margin: 0; }
.rm-intro p { margin: 2px 0 0; font-size: 14px; }
.rm-intro a { color: var(--primary-blue); font-weight: 600; }
.rm-muted { color: var(--text-secondary); }
.rm-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); margin: 8px 0 12px; }
.rm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.rm-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.rm-map { background: linear-gradient(180deg, #1b2246, #0d1020 70%); border: 1px solid #2a3150; border-radius: 18px; overflow: hidden; }
.rm-map svg { display: block; width: 100%; height: auto; }
.rm-node { cursor: pointer; }
.rm-node:focus { outline: none; }
.rm-node:hover .rm-ring, .rm-node:focus-visible .rm-ring { stroke: #f5c451; stroke-width: 3; }
.rm-twinkle { animation: rm-twinkle 3s ease-in-out infinite; }
@keyframes rm-twinkle { 50% { opacity: .25; } }
.rm-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; padding: 16px; position: sticky; top: 12px; align-self: start; font-size: 14px; }
.rm-panel h2 { margin: 6px 0 2px; font-size: 18px; font-weight: 800; }
.rm-tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--card-border); color: var(--text-secondary); }
.rm-scene { border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); margin: 10px 0; }
.rm-scene svg { display: block; width: 100%; height: auto; }
.rm-panel ul { padding-left: 18px; margin: 8px 0; list-style: disc; }
.rm-sub { font-size: 11px; letter-spacing: .06em; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; margin-top: 12px; }
.rm-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.rm-links a { font-size: 12.5px; border: 1px solid var(--card-border); border-radius: 8px; padding: 3px 9px; color: var(--text-primary); display: inline-flex; gap: 6px; align-items: center; }
.rm-links a span { font-family: "Songti SC", "Songti TC", "Noto Serif SC", serif; color: var(--rm-here); }
.rm-links a:hover { border-color: var(--rm-here); }
.rm-btn { display: inline-block; background: var(--rm-here); color: #fff; border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; margin-top: 10px; cursor: pointer; }
.rm-btn:hover { filter: brightness(1.08); }
.rm-btn.is-game { background: #2dd4bf; color: #04211d; }
.rm-btn.is-off { background: #4a5272; color: #cfd5ee; cursor: default; }
.rm-btn.is-ghost { background: none; color: var(--text-primary); border: 1px solid var(--card-border); font-weight: 600; margin-left: 6px; }
.rm-btn.is-ghost:hover { border-color: var(--rm-here); filter: none; }
.rm-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin: 6px 0 4px; max-height: 260px; overflow-y: auto; }
.rm-theme { position: relative; font-size: 11.5px; border: 1px solid var(--card-border); border-radius: 7px; padding: 4px 7px 6px; overflow: hidden; color: var(--text-secondary); }
.rm-theme span { position: relative; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-theme i { position: absolute; left: 0; bottom: 0; height: 3px; background: #34d399; }
.rm-theme.is-done { color: var(--text-primary); }
.rm-theme.is-here { border-color: var(--rm-here); color: var(--text-primary); font-weight: 600; }

/* Core list (js/studios/core/): a level's words and sentences, on the lesson page's styles. */
.core-stats { font-size: 14px; margin: 12px 0 6px; }
.core-bar { height: 6px; border-radius: 3px; background: var(--card-border); overflow: hidden; }
.core-bar i { display: block; height: 100%; background: #34d399; }
.core-soon { font-size: 13px; margin-top: 10px; }
.core-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.core-themes a { font-size: 12.5px; border: 1px solid var(--card-border); border-radius: 999px; padding: 3px 10px; color: var(--text-primary); }
.core-themes a:hover { border-color: var(--primary-blue); }
.core-theme-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.core-theme-head .lesson-h { margin: 0; }
.core-theme-head .lesson-h span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.core-theme-head button[disabled] { opacity: .6; cursor: default; }
.core-table td { vertical-align: top; }
.core-table td:nth-child(2) { width: 34%; }
.core-rank { width: 1%; color: var(--text-secondary); font-size: 12px; padding-top: 16px !important; }
.lesson-page .core-sentence { font-size: 18px; }
.core-gloss { font-size: 13px; }
.core-row-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 640px) {
  .core-table tr { display: grid; grid-template-columns: auto 1fr; }
  .core-table td { border-bottom: 0; }
  .core-table td:nth-child(2) { width: auto; }
  .core-table td:nth-child(3) { grid-column: 2; padding-top: 0; }
  .core-table tr { border-bottom: 1px solid var(--card-border); }
  .rm-themes { grid-template-columns: 1fr; }
}
.rm-sheet-close, .rm-here { display: none; }
@media (max-width: 820px) {
  .rm-layout { grid-template-columns: 1fr; }
  .rm-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; border-radius: 18px 18px 0 0; max-height: 55vh; overflow: auto;
    transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); }
  .rm-panel.is-open { transform: none; }
  .rm-scene svg { max-height: 96px; }
  .rm-sheet-close { display: block; position: sticky; top: 0; margin: -6px auto 6px; width: 44px; height: 5px; border-radius: 5px; background: var(--card-border); border: 0; cursor: pointer; }
  .rm-here { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 30; display: flex; align-items: center; gap: 10px; overflow: hidden;
    background: linear-gradient(135deg, #262d63, #1a1f45); border: 2px solid var(--rm-here); border-radius: 14px; padding: 8px 8px 10px 10px;
    box-shadow: 0 0 0 3px rgba(124, 134, 255, .16), 0 10px 28px rgba(0, 0, 0, .45); font-size: 13px; transition: transform .2s, opacity .2s; }
  .rm-here-seal { width: 34px; height: 34px; border-radius: 50%; background: var(--rm-here); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; }
  .rm-here-text { flex: 1; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }
  .rm-here-text b { display: block; font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-here-text span { display: block; color: #c7ccff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-here .rm-btn { margin: 0; padding: 8px 14px; flex: none; }
  .rm-here-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .1); }
  .rm-here-bar i { display: block; height: 100%; background: var(--rm-done); }
  .rm-page { padding-bottom: 84px; }
  .rm-page.sheet-open .rm-here { transform: translateY(130%); opacity: 0; pointer-events: none; }
  .rm-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rm-studios { gap: 6px; }
  .rm-studio { flex-direction: column; text-align: center; gap: 4px; padding: 9px 4px; }
  .rm-seal { width: 30px; height: 30px; font-size: 17px; }
  .rm-studio b { font-size: 11.5px; }
  .rm-studio small { display: none; }
  .rm-studio.is-due small { display: block; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .rm-twinkle { animation: none; } .rm-panel, .rm-here, .rm-studio { transition: none; } }
/* The header on a phone: the Studios menu needs the room, so the brand's subtitle and the Audio label step aside. */
@media (max-width: 640px) { .hide-narrow { display: none !important; } }
/* Learn (#/lessons): the guided paths */
.lesson-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.lesson-path { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--card-border); border-radius: 12px; padding: 12px; color: var(--text-primary); }
.lesson-path:hover { border-color: var(--primary-blue); }
.lesson-path-seal { width: 34px; height: 34px; flex: none; border: 1.5px solid var(--primary-blue); color: var(--primary-blue); border-radius: 7px; display: grid; place-items: center; font: 600 19px/1 "Hiragino Mincho ProN", "Yu Mincho", serif; }
.lesson-path b { display: block; font-size: 15px; }
.lesson-path small { display: block; font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; margin-top: 2px; }
.lesson-path em { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--primary-blue); margin-top: 6px; }
/* Course (#/course, js/studios/course/view.js): the days, and a day's stations */
.course-days { display: flex; flex-wrap: wrap; gap: 6px; }
.course-day { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-primary); font-weight: 700; font-size: 13px; cursor: pointer; }
.course-day:hover { border-color: var(--primary-blue); }
.course-day.is-done { background: var(--lesson-good); border-color: var(--lesson-good); color: #fff; }
.course-day.is-on { border: 2px solid var(--primary-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-blue) 22%, transparent); }
.course-station-head { display: flex; align-items: center; gap: 10px; }
.course-station-head .lesson-h { margin: 0; flex: 1; }
.course-station .lesson-dot { margin-left: 0; }
.course-station.is-done .lesson-dot { background: var(--lesson-good); border-color: var(--lesson-good); color: #fff; }
.course-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.course-patterns { margin: 6px 0 0; padding-left: 18px; }
.course-patterns li { margin: 4px 0; }
.course-hanzi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.course-char { display: flex; flex-direction: column; align-items: center; width: 88px; padding: 8px; border: 1px solid var(--card-border); border-radius: 10px; color: var(--text-primary); text-align: center; }
.course-char:hover { border-color: var(--primary-blue); }
.course-char span { font-size: 28px; line-height: 1.2; }
.course-char small { font-size: 11px; color: var(--text-secondary); line-height: 1.3; overflow-wrap: anywhere; }
.course-ear { padding-left: 22px; }
.course-ear li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.course-ear summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.course-station .lesson-cell-play { white-space: nowrap; }
.lesson-path.is-soon { opacity: .6; border-style: dashed; cursor: default; }
.lesson-path.is-soon:hover { border-color: var(--card-border); }
@media (max-width: 700px) { .lesson-paths { grid-template-columns: 1fr; } }

/* Hubs (#/practice, #/use): Learn's selector cards, in each studio's colour, and the picked one's pane */
.hub-cards { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.hub-cards .lesson-path { align-items: center; border-bottom: 3px solid var(--c); }
.hub-cards .lesson-path-seal { border-color: var(--c); color: var(--c); }
.hub-cards .lesson-path em { color: var(--text-secondary); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-cards .lesson-path > span:last-child { min-width: 0; }
.lesson-path.is-on { border-color: var(--c, var(--primary-blue)); background: color-mix(in srgb, var(--c, var(--primary-blue)) 10%, transparent); }
.hub-pane { border-top: 4px solid var(--c); }
.hub-pane-head { display: flex; gap: 12px; align-items: flex-start; }
.hub-pane-head .lesson-path-seal { border-color: var(--c); color: var(--c); width: 42px; height: 42px; font-size: 24px; }
.hub-pane-head p { margin: 2px 0 0; }
.hub-status { font-weight: 700; color: var(--c); margin: 12px 0 4px; }
.hub-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin: 12px 0 16px; }
.hub-links a { border: 1px solid var(--card-border); border-radius: 10px; padding: 9px 12px; color: var(--text-primary); }
.hub-links a:hover { border-color: var(--c); }
.hub-links b { display: block; font-size: 14px; }
.hub-links small { display: block; font-size: 12px; color: var(--text-secondary); }
@media (max-width: 700px) { .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A row of kana in a lesson's table stays on one line (か き く け こ), and a word list starts clear of the table before it. */
.lesson-table td.jp, .lesson-table th.jp { white-space: nowrap; }
.lesson-table + .lesson-scroll, .lesson-scroll + .lesson-scroll { margin-top: 14px; }

/* Writing (js/studios/writing/): the character list, the strokes in a 米字格 grid, the practice
   canvas over a faint copy to trace, and the parts a character is built from. Colours from the theme. */
#screen-writing { --wrt-ink: var(--text-primary); --wrt-red: #c8372d; }
.wrt-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: 1.35rem; border-radius: 8px; border: 1px solid var(--card-border); color: var(--text-primary); background: var(--card-bg); cursor: pointer; }
.wrt-cell:hover { border-color: var(--wrt-red); }
.wrt-cell.on { border-color: var(--wrt-red); background: color-mix(in srgb, var(--wrt-red) 12%, transparent); }
.wrt-cell.done { box-shadow: inset 0 -3px 0 #16a34a; }
/* 4,000 characters: a long group or chip list scrolls in its own box */
.wrt-list { position: relative; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; padding: 1px; }
.wrt-chips { max-height: 8.5rem; overflow-y: auto; overscroll-behavior: contain; padding: 1px; }
.wrt-box { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto; }
/* A phone: denser, so the list, the strokes and the practice box share a screen. */
@media (max-width: 640px) {
  #screen-writing .wrt-list { grid-template-columns: repeat(8, minmax(0, 1fr)); max-height: 13.5rem; }
  #screen-writing .wrt-cell { font-size: 1.1rem; border-radius: 6px; }
  #screen-writing .wrt-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #screen-writing .wrt-pair > .washi { padding: .6rem; }
  #screen-writing .wrt-pair .vocab-heading span { display: block; }
}
.wrt-svg { width: 100%; height: 100%; display: block; }
.wrt-grid rect { fill: none; stroke: var(--wrt-red); stroke-opacity: .45; stroke-width: 6; }
.wrt-grid line { stroke: var(--wrt-red); stroke-opacity: .3; stroke-width: 4; stroke-dasharray: 18 16; }
.wrt-stroke-done { fill: var(--wrt-ink); }
.wrt-stroke-now { fill: var(--wrt-red); }
.wrt-stroke-next { fill: var(--text-secondary); opacity: .18; }
.wrt-num circle { fill: var(--wrt-red); }
.wrt-num text { fill: #fff; font: 700 40px system-ui, sans-serif; }
.wrt-ghost { position: absolute; inset: 0; pointer-events: none; }
.wrt-ghost path { opacity: .22; }
.wrt-ghost.grid-only path { display: none; }
.wrt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.wrt-part { min-width: 6rem; padding: .6rem .75rem; border: 1px solid var(--card-border); border-radius: 12px; text-align: center; background: var(--card-bg); }
.wrt-role { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; }
.wrt-role-meaning { color: #0f766e; }
.wrt-role-sound { color: #b45309; }
.wrt-role-radical { color: #7c3aed; }
html.dark .wrt-role-meaning { color: #5eead4; }
html.dark .wrt-role-sound { color: #fcd34d; }
html.dark .wrt-role-radical { color: #c4b5fd; }

/* Grammar (js/studios/grammar/): a pattern's key marked in its sentences, its formula as fixed
   words and slots to fill, and a sentence taken apart into its words. Colours from the theme. */
#screen-grammar, #screen-reading { --gram-key: #c8372d; --gram-mark: color-mix(in srgb, var(--gram-key) 14%, transparent); }
html.dark :is(#screen-grammar, #screen-reading) { --gram-key: #f87171; }
.gram-key { background: var(--gram-mark); color: inherit; border-radius: 4px; padding: 0 1px; box-shadow: inset 0 -2px 0 var(--gram-key); }
.gram-card-key ruby rt, .gram-key rt { color: var(--text-secondary); }
.gram-card { display: flex; flex-direction: column; gap: .15rem; }
.gram-formula { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.gram-fixed, .gram-slot { padding: .3rem .65rem; border-radius: 8px; font-size: .9rem; }
.gram-fixed { background: var(--gram-mark); border: 1px solid var(--gram-key); color: var(--text-primary); font-weight: 700; }
.gram-slot { border: 1px dashed var(--card-border); color: var(--text-secondary); font-style: italic; }
.gram-plus { color: var(--text-secondary); font-size: .8rem; }
.gram-apart { display: flex; flex-wrap: wrap; align-items: stretch; gap: .35rem; padding-top: .5rem; border-top: 1px dashed var(--card-border); }
.gram-apart.hidden { display: none; }
.gram-piece { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 3.5rem; max-width: 8rem; padding: .3rem .5rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); cursor: pointer; text-align: center; }
.gram-piece:hover { border-color: var(--gram-key); }
.gram-piece.key { border-color: var(--gram-key); background: var(--gram-mark); }
.gram-punct { align-self: center; color: var(--text-secondary); }

/* Listening (js/studios/listening/): the lobby's drill cards, a round's progress, the gap to fill,
   the word tiles, the microphone, and what you said, each character said or missed. */
#screen-listening { --lst-accent: #0369a1; --lst-ok: #15803d; --lst-no: #c8372d; --lst-soft: color-mix(in srgb, var(--lst-accent) 12%, transparent); }
html.dark #screen-listening { --lst-accent: #38bdf8; --lst-ok: #4ade80; --lst-no: #f87171; }
.lst-level { min-width: 7rem; }
.lst-level:disabled { opacity: .45; cursor: default; }
.lst-kind { display: flex; flex-direction: column; gap: .3rem; cursor: pointer; }
.lst-kind.on { border-color: var(--lst-accent); box-shadow: 0 0 0 1px var(--lst-accent); }
.lst-kind:disabled { opacity: .5; cursor: default; }
.lst-bar, .lst-progress { display: block; height: 4px; border-radius: 999px; background: var(--card-border); overflow: hidden; }
.lst-bar > span, .lst-progress > span { display: block; height: 100%; background: var(--lst-accent); transition: width .3s; }
.lst-start { padding: .45rem 1rem; border-radius: 999px; background: var(--lst-accent); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; }
.lst-start:disabled { opacity: .45; cursor: default; }
.lst-play { padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--lst-accent); color: var(--lst-accent); font-weight: 700; font-size: .85rem; cursor: pointer; }
nn-audio[playing] .lst-play { background: var(--lst-accent); color: #fff; }
.lst-gap { display: inline-block; min-width: 1.6em; margin: 0 .15em; border-bottom: 3px solid var(--lst-accent); text-align: center; color: var(--lst-accent); }
.lst-gap.ok { color: var(--lst-ok); border-color: var(--lst-ok); }
.lst-gap.no { color: var(--lst-no); border-color: var(--lst-no); }
.lst-choice { padding: .5rem .9rem; min-width: 3.2rem; border: 1px solid var(--card-border); border-radius: 12px; background: var(--card-bg); font-size: 1.1rem; cursor: pointer; }
.lst-choice.text-left { font-size: .9rem; }
.lst-choice:hover:not(:disabled) { border-color: var(--lst-accent); }
.lst-choice.ok { border-color: var(--lst-ok); background: color-mix(in srgb, var(--lst-ok) 12%, transparent); }
.lst-choice.no { border-color: var(--lst-no); background: color-mix(in srgb, var(--lst-no) 12%, transparent); }
.lst-line { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 3.2rem; padding: .5rem; border: 1px dashed var(--card-border); border-radius: 12px; align-items: center; }
.lst-line.ok { border-color: var(--lst-ok); border-style: solid; }
.lst-line.no { border-color: var(--lst-no); border-style: solid; }
.lst-tile { padding: .35rem .7rem; border: 1px solid var(--card-border); border-radius: 10px; background: var(--card-bg); font-size: 1.2rem; cursor: pointer; }
.lst-tile:hover:not(:disabled) { border-color: var(--lst-accent); }
.lst-tile:disabled:not(.placed) { opacity: .25; cursor: default; }
.lst-tile.placed { background: var(--lst-soft); border-color: var(--lst-accent); }
.lst-mic { padding: .5rem 1.1rem; border-radius: 999px; border: 2px solid var(--lst-no); color: var(--lst-no); font-weight: 700; cursor: pointer; }
.lst-mic.on { background: var(--lst-no); color: #fff; animation: lst-pulse 1.2s ease-in-out infinite; }
@keyframes lst-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lst-no) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .lst-mic.on { animation: none; } }
.lst-said { color: var(--lst-ok); }
.lst-missed { color: var(--lst-no); text-decoration: underline dotted; }
.lst-feedback.ok { border-color: var(--lst-ok); }
.lst-feedback.no { border-color: var(--lst-no); }

/* Reading (js/studios/reading/): the library's cards, a reading's lines (the one playing marked),
   who says each line in a dialogue, and a line taken apart into its words. */
#screen-reading { --rdg-accent: #b45309; --rdg-a: #be185d; --rdg-b: #1d4ed8; }
html.dark #screen-reading { --rdg-accent: #fbbf24; --rdg-a: #f472b6; --rdg-b: #93c5fd; }
.rdg-card { display: flex; flex-direction: column; gap: .2rem; cursor: pointer; }
.rdg-card.done { border-color: color-mix(in srgb, #15803d 50%, var(--card-border)); }
.rdg-status { margin-top: .3rem; font-size: 10px; font-family: ui-monospace, monospace; color: var(--rdg-accent); }
.rdg-shelf { margin: .9rem 0 .1rem; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rdg-accent); }
.rdg-play-all { padding: .4rem 1rem; border-radius: 999px; background: var(--rdg-accent); color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; }
html.dark .rdg-play-all { color: #1c1917; }
.rdg-line { transition: box-shadow .2s, border-color .2s; }
.rdg-line.now { border-color: var(--rdg-accent); box-shadow: 0 0 0 1px var(--rdg-accent); }
.rdg-speaker { flex-shrink: 0; width: 1.6rem; height: 1.6rem; margin-top: .55rem; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: #fff; }
.rdg-speaker.a { background: var(--rdg-a); }
.rdg-speaker.b { background: var(--rdg-b); }
html.dark .rdg-speaker { color: #0f172a; }
.rdg-no-ruby rt { visibility: hidden; }
.rdg-words { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .4rem; border-top: 1px dashed var(--card-border); }
.rdg-tool { width: 1.75rem; height: 1.75rem; border-radius: 8px; border: 1px solid var(--card-border); font-size: .8rem; color: var(--text-secondary); cursor: pointer; }
.rdg-tool[aria-pressed="true"], .rdg-tool:hover { border-color: var(--rdg-accent); color: var(--rdg-accent); }

/* A page's one-time tip (js/ui/guide.js): under the controls it explains, its arrow at their middle. */
.guide-tip { position: absolute; z-index: 70; padding: 10px 12px; border-radius: 12px; background: #fff7e6; color: #2a1d05; border: 1px solid #f2b23a;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28); font-size: 13px; line-height: 1.4; }
.guide-tip::before { content: ""; position: absolute; top: -7px; left: calc(var(--arrow, 24px) - 7px); width: 12px; height: 12px; background: inherit;
  border-left: 1px solid #f2b23a; border-top: 1px solid #f2b23a; transform: rotate(45deg); }
.guide-title { display: block; font-weight: 700; }
.guide-items { display: grid; grid-template-columns: minmax(1.6rem, max-content) 1fr; gap: 4px 8px; margin: 6px 0 8px; }
.guide-items dt { font-weight: 700; text-align: center; }
.guide-items dd { margin: 0; }
.guide-face-small { font-size: 10px; font-weight: 700; border: 1px solid currentColor; border-radius: 5px; padding: 0 3px; }
.guide-ok { background: #2a1d05; color: #fff7e6; border-radius: 7px; padding: 4px 11px; font-weight: 700; font-size: 12px; cursor: pointer; }
.guide-ok:focus-visible { outline: 2px solid #f2b23a; outline-offset: 2px; }