@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* Fonts */
  --mmz-font-display: "Noto Serif SC", "Source Han Serif SC", serif;
  --mmz-font-body: "Inter", "Noto Sans SC", "PingFang SC", "Hiragino Sans", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --mmz-font-mono: "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;

  /* Radius */
  --mmz-radius-sm: 4px;
  --mmz-radius-md: 12px;
  --mmz-radius-lg: 16px;
  --mmz-radius-pill: 999px;

  /* Shadows */
  --mmz-shadow-1: 0 1px 2px rgba(28, 24, 18, 0.04), 0 1px 1px rgba(28, 24, 18, 0.02);
  --mmz-shadow-2: 0 8px 24px -8px rgba(28, 24, 18, 0.05);
  --mmz-shadow-3: 0 24px 48px -16px rgba(0, 0, 0, 0.05);

  /* Light theme (from design drafts) */
  --mmz-background: #FDF8F3;
  --mmz-foreground: #2C241B;
  --mmz-card: #FFFFFF;
  --mmz-card-foreground: #2C241B;
  --mmz-popover: #F7F1EA;
  --mmz-popover-foreground: #2C241B;
  --mmz-primary: #C7791A;
  --mmz-primary-foreground: #FFFFFF;
  --mmz-muted: #F7F1EA;
  --mmz-muted-foreground: #6B5E51;
  --mmz-border: #EAE3DA;
  --mmz-input: #EAE3DA;
  --mmz-ring: #D99530;

  --mmz-surface: #FFFFFF;
  --mmz-surface-2: #F7F1EA;
  --mmz-surface-3: #EFE8DF;
  --mmz-ink: #2C241B;
  --mmz-ink-2: #6B5E51;
  --mmz-ink-3: #A69B8F;
  --mmz-line: #EAE3DA;
  --mmz-line-2: #DDD5CB;
  --mmz-primary-60: #D99530;
  --mmz-primary-40: #EAB66B;
  --mmz-primary-soft: #FDF3E6;
  --mmz-glow: rgba(199, 121, 26, 0.18);

  --mmz-state-success: #16A34A;
  --mmz-state-success-soft: #DCFCE7;
  --mmz-state-warning: #D97706;
  --mmz-state-warning-soft: #FEF3C7;
  --mmz-state-error: #DC2626;
  --mmz-state-error-soft: #FEE2E2;

  /* Japanese difficulty tag colors (from design-instructions §3.3) */
  --tag-shuku-bg: #fed7aa; --tag-shuku-fg: #9a3412;   /* 缩略形 */
  --tag-datsu-bg: #fecaca; --tag-datsu-fg: #991b1b;   /* 音脱落 */
  --tag-ren-bg: #e9d5ff;   --tag-ren-fg: #6b21a8;     /* 连浊 */
  --tag-soku-bg: #fde68a;  --tag-soku-fg: #92400e;     /* 促音・長音 */
  --tag-tango-bg: #bfdbfe; --tag-tango-fg: #1e40af;   /* 生词 */

  /* Tailwind semantic aliases */
  --background: var(--mmz-background);
  --foreground: var(--mmz-foreground);
  --card: var(--mmz-card);
  --card-foreground: var(--mmz-card-foreground);
  --popover: var(--mmz-popover);
  --popover-foreground: var(--mmz-popover-foreground);
  --primary: var(--mmz-primary);
  --primary-foreground: var(--mmz-primary-foreground);
  --muted: var(--mmz-muted);
  --muted-foreground: var(--mmz-muted-foreground);
  --border: var(--mmz-border);
  --input: var(--mmz-input);
  --ring: var(--mmz-ring);
  --radius-sm: var(--mmz-radius-sm);
  --radius-md: var(--mmz-radius-md);
  --radius-lg: var(--mmz-radius-lg);

  color-scheme: light;
}

html.dark {
  --mmz-background: #0F0E0C;
  --mmz-foreground: #FAF6F1;
  --mmz-card: #1A1816;
  --mmz-card-foreground: #FAF6F1;
  --mmz-popover: #242220;
  --mmz-popover-foreground: #FAF6F1;
  --mmz-primary: #F59E0B;
  --mmz-primary-foreground: #0F0E0C;
  --mmz-muted: #242220;
  --mmz-muted-foreground: #B8B0A7;
  --mmz-border: #2E2C29;
  --mmz-input: #2E2C29;
  --mmz-ring: #FBBF24;

  --mmz-surface: #1A1816;
  --mmz-surface-2: #242220;
  --mmz-surface-3: #2E2C29;
  --mmz-ink: #FAF6F1;
  --mmz-ink-2: #B8B0A7;
  --mmz-ink-3: #7A736C;
  --mmz-line: #2E2C29;
  --mmz-line-2: #3A3835;
  --mmz-primary-60: #FBBF24;
  --mmz-primary-40: #FCD34D;
  --mmz-primary-soft: #2A1F0F;
  --mmz-glow: rgba(245, 158, 11, 0.28);

  --mmz-state-success: #4ADE80;
  --mmz-state-success-soft: #14532D;
  --mmz-state-warning: #FBBF24;
  --mmz-state-warning-soft: #713F12;
  --mmz-state-error: #F87171;
  --mmz-state-error-soft: #7F1D1D;

  /* Dark mode tag colors (adjusted for contrast) */
  --tag-shuku-bg: #7c2d12; --tag-shuku-fg: #fed7aa;
  --tag-datsu-bg: #7f1d1d; --tag-datsu-fg: #fecaca;
  --tag-ren-bg: #581c87;   --tag-ren-fg: #e9d5ff;
  --tag-soku-bg: #78350f;  --tag-soku-fg: #fde68a;
  --tag-tango-bg: #1e3a8a; --tag-tango-fg: #bfdbfe;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --mmz-background: #0F0E0C;
    --mmz-foreground: #FAF6F1;
    --mmz-card: #1A1816;
    --mmz-card-foreground: #FAF6F1;
    --mmz-popover: #242220;
    --mmz-popover-foreground: #FAF6F1;
    --mmz-primary: #F59E0B;
    --mmz-primary-foreground: #0F0E0C;
    --mmz-muted: #242220;
    --mmz-muted-foreground: #B8B0A7;
    --mmz-border: #2E2C29;
    --mmz-input: #2E2C29;
    --mmz-ring: #FBBF24;

    --mmz-surface: #1A1816;
    --mmz-surface-2: #242220;
    --mmz-surface-3: #2E2C29;
    --mmz-ink: #FAF6F1;
    --mmz-ink-2: #B8B0A7;
    --mmz-ink-3: #7A736C;
    --mmz-line: #2E2C29;
    --mmz-line-2: #3A3835;
    --mmz-primary-60: #FBBF24;
    --mmz-primary-40: #FCD34D;
    --mmz-primary-soft: #2A1F0F;
    --mmz-glow: rgba(245, 158, 11, 0.28);

    --mmz-state-success: #4ADE80;
    --mmz-state-success-soft: #14532D;
    --mmz-state-warning: #FBBF24;
    --mmz-state-warning-soft: #713F12;
    --mmz-state-error: #F87171;
    --mmz-state-error-soft: #7F1D1D;

    --tag-shuku-bg: #7c2d12; --tag-shuku-fg: #fed7aa;
    --tag-datsu-bg: #7f1d1d; --tag-datsu-fg: #fecaca;
    --tag-ren-bg: #581c87;   --tag-ren-fg: #e9d5ff;
    --tag-soku-bg: #78350f;  --tag-soku-fg: #fde68a;
    --tag-tango-bg: #1e3a8a; --tag-tango-fg: #bfdbfe;

    color-scheme: dark;
  }
}

/* ===== Skin themes (applied via data-skin on html) ===== */
html[data-skin="forest"] {
  --mmz-background: #F1F7F2; --mmz-primary: #3F7D5A; --mmz-primary-60: #5BA17B;
  --mmz-primary-soft: #E3F1E8; --mmz-glow: rgba(63, 125, 90, 0.18);
  --mmz-ring: #5BA17B;
}
html[data-skin="night"] {
  --mmz-background: #0B1026; --mmz-foreground: #E8ECF8; --mmz-card: #141A35;
  --mmz-card-foreground: #E8ECF8; --mmz-primary: #8B9BFF; --mmz-primary-foreground: #0B1026;
  --mmz-surface-2: #1A2142; --mmz-ink-2: #A4ACC8; --mmz-ink-3: #6B7390;
  --mmz-line: #232B4D; --mmz-primary-soft: #1C2147; --mmz-glow: rgba(139, 155, 255, 0.28);
}
html[data-skin="sakura"] {
  --mmz-background: #FFF5F7; --mmz-primary: #E85D7A; --mmz-primary-60: #EE8799;
  --mmz-primary-soft: #FFE4EA; --mmz-glow: rgba(232, 93, 122, 0.18);
  --mmz-ring: #EE8799;
}
html[data-skin="autumn"] {
  --mmz-background: #FBF3EC; --mmz-primary: #C2410C; --mmz-primary-60: #EA580C;
  --mmz-primary-soft: #FFEDD5; --mmz-glow: rgba(194, 65, 12, 0.18);
  --mmz-ring: #EA580C;
}
html[data-skin="snow"] {
  --mmz-background: #F4F8FC; --mmz-primary: #0EA5E9; --mmz-primary-60: #38BDF8;
  --mmz-primary-soft: #E0F2FE; --mmz-glow: rgba(14, 165, 233, 0.18);
  --mmz-ring: #38BDF8;
}
html[data-skin="firefly"] {
  --mmz-background: #1A1626; --mmz-foreground: #F5F3FF; --mmz-card: #252038;
  --mmz-card-foreground: #F5F3FF; --mmz-primary: #A78BFA; --mmz-primary-foreground: #1A1626;
  --mmz-surface-2: #2D2842; --mmz-ink-2: #C4B5E0; --mmz-ink-3: #7C7399;
  --mmz-line: #383350; --mmz-primary-soft: #2E2447; --mmz-glow: rgba(167, 139, 250, 0.3);
}

/* ===== Base ===== */
body {
  font-family: var(--mmz-font-body);
  background-color: var(--mmz-background);
  color: var(--mmz-foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.mmz-display {
  font-family: var(--mmz-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.mmz-heading {
  font-family: var(--mmz-font-display);
  font-weight: 600;
  line-height: 1.25;
}
.mmz-body {
  font-family: var(--mmz-font-body);
  line-height: 1.65;
}
.mmz-caption {
  font-family: var(--mmz-font-body);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.mmz-mono {
  font-family: var(--mmz-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ===== Utilities ===== */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.fade-in { animation: mmz-fade-in 0.2s ease-out; }
@keyframes mmz-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mmz-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.pop { animation: mmz-pop 0.25s ease-out; }

@keyframes mmz-float-up {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}
.float-up { animation: mmz-float-up 0.8s ease-out forwards; }

@keyframes mmz-slide-down {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-down { animation: mmz-slide-down 0.3s ease-out; }

@keyframes mmz-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* ===== App shell ===== */
.mmz-topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--mmz-background) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mmz-border);
}
.mmz-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  height: 64px;
  background: var(--mmz-surface);
  border-top: 1px solid var(--mmz-line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mmz-content { max-width: 28rem; margin: 0 auto; padding: 0 1rem; }
body { padding-bottom: 80px; }
body.no-tabbar { padding-bottom: 0; }

/* ===== Buttons ===== */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding: 0 1.25rem;
  border-radius: var(--mmz-radius-md);
  background: var(--mmz-primary); color: var(--mmz-primary-foreground);
  font-weight: 600; box-shadow: var(--mmz-shadow-2);
  transition: opacity 0.15s; cursor: pointer; border: none;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1rem;
  border-radius: var(--mmz-radius-md);
  background: var(--mmz-surface-2); color: var(--mmz-ink-2);
  font-weight: 600; transition: background 0.15s; cursor: pointer; border: none;
}
.btn-ghost:hover { background: var(--mmz-muted); }

.btn-soft {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1.25rem;
  border-radius: var(--mmz-radius-md);
  background: var(--mmz-primary-soft); color: var(--mmz-primary);
  font-weight: 600; transition: background 0.15s; cursor: pointer; border: none;
}
.btn-soft:hover { background: var(--mmz-glow); }

/* ===== Card ===== */
.card {
  background: var(--mmz-card);
  color: var(--mmz-card-foreground);
  border-radius: var(--mmz-radius-lg);
  border: 1px solid var(--mmz-border);
  box-shadow: var(--mmz-shadow-2);
  padding: 1.25rem;
}

/* ===== Tag (difficulty) ===== */
.tag {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  font-size: 11.5px; font-weight: 700; line-height: 1.4;
  white-space: nowrap;
}
.tag-shuku { background: var(--tag-shuku-bg); color: var(--tag-shuku-fg); }
.tag-datsu { background: var(--tag-datsu-bg); color: var(--tag-datsu-fg); }
.tag-ren { background: var(--tag-ren-bg); color: var(--tag-ren-fg); }
.tag-soku { background: var(--tag-soku-bg); color: var(--tag-soku-fg); }
.tag-tango { background: var(--tag-tango-bg); color: var(--tag-tango-fg); }

/* ===== Chip ===== */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--mmz-radius-pill);
  font-size: 0.8rem; font-weight: 500;
  background: var(--mmz-surface-2); color: var(--mmz-ink-2);
  cursor: pointer; transition: all 0.15s; border: none;
  white-space: nowrap;
}
.chip:hover { background: var(--mmz-muted); }
.chip.active { background: var(--mmz-primary); color: var(--mmz-primary-foreground); box-shadow: var(--mmz-shadow-1); }

/* ===== Stat block ===== */
.stat-block {
  background: var(--mmz-card);
  border: 1px solid var(--mmz-border);
  border-radius: var(--mmz-radius-md);
  padding: 0.75rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}

/* ===== Progress bar ===== */
.progress-track {
  position: relative; height: 0.5rem; width: 100%;
  border-radius: var(--mmz-radius-pill);
  background: var(--mmz-surface-2);
  overflow: hidden;
}
.progress-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--mmz-primary);
  border-radius: var(--mmz-radius-pill);
  transition: width 0.3s ease;
}

/* ===== Diff text ===== */
.diff-correct { color: var(--mmz-state-success); }
.diff-wrong { color: var(--mmz-state-error); text-decoration: underline; text-decoration-color: var(--mmz-state-error); }

/* ===== Waveform ===== */
.wave-bar {
  width: 6px; border-radius: 3px;
  background: var(--mmz-primary);
  transform-origin: center;
}

/* ===== Toast ===== */
.mmz-toast {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 100;
  background: var(--mmz-ink); color: var(--mmz-background);
  padding: 0.6rem 1.1rem; border-radius: var(--mmz-radius-md);
  font-size: 0.85rem; box-shadow: var(--mmz-shadow-3);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.mmz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 374px) {
  .mmz-content { padding: 0 0.75rem; }
  .card { padding: 1rem; }
}
@media (min-width: 640px) {
  .mmz-content { max-width: 32rem; }
}