/* src/styles/tokens.css */
/* Lumo design tokens. Default theme "Dusk" (ink-indigo canvas, lantern amber, cream paper cards). Theme "Paper" is the light variant. */
:root,
html[data-theme='dusk'] {
  color-scheme: dark;
  --lm-paper: #1a1d4a;
  --lm-paper-2: #242964;
  --lm-surface: #20245c;
  --lm-ink: #f8efdd;
  --lm-ink-2: #d9d5ee;
  --lm-muted: #aeb3df;
  --lm-line: #343a86;
  --lm-line-2: #4a52a6;

  --lm-coral: #ffb84d;
  --lm-coral-h: #ffc766;
  --lm-coral-edge: #c98318;
  --lm-coral-soft: #3d3a66;
  --lm-coral-ink: #ffd08a;
  --lm-on-coral: #2a1a00;

  --lm-teal: #ffc266;
  --lm-teal-h: #ffd088;
  --lm-teal-edge: #c98318;
  --lm-teal-soft: #343668;
  --lm-on-teal: #2a1a00;

  --lm-sage: #2b3174;
  --lm-sage-h: #353c8a;
  --lm-sage-edge: #1b1f58;

  --lm-gold: #ffd97a;
  --lm-gold-edge: #d9a32e;
  --lm-gold-soft: #3f3b60;
  --lm-gold-ink: #ffe3a1;

  --lm-ok: #4fd09a;
  --lm-ok-h: #43c28d;
  --lm-ok-edge: #2e9e6f;
  --lm-ok-soft: #173f48;
  --lm-ok-ink: #9af2cb;

  --lm-bad: #ff7090;
  --lm-bad-h: #f25f80;
  --lm-bad-edge: #cc4560;
  --lm-bad-soft: #4a2347;
  --lm-bad-ink: #ffb8c6;

  --lm-cream: #f5e9cf;
  --lm-cream-2: #ebdcb8;
  --lm-cream-ink: #1d2150;
  --lm-cream-muted: #44487a;
  --lm-cream-line: #d3c29a;
  --lm-cream-sel: #fff2cf;
  --lm-cream-ok: #d3efdc;
  --lm-cream-bad: #fbd9df;

  --lm-glow: 0 0 28px rgba(255, 184, 77, 0.38);
  --lm-glow-sm: 0 0 14px rgba(255, 184, 77, 0.4);
  --lm-heat-0: #242964;
  --lm-heat-1: #3d3a66;
  --lm-heat-2: #8a6a3a;
  --lm-heat-3: #e0a040;
  --lm-heat-4: #ffd97a;
  --lm-scrim: rgba(10, 12, 38, 0.66);
  --lm-shadow-float: 0 16px 40px rgba(6, 8, 30, 0.5);
  --lm-sky: #12153a;
  --lm-bldg: #2a3080;
  --lm-bldg-2: #343b94;
  --lm-win-off: #3a4290;
}

html[data-theme='paper'] {
  color-scheme: light;
  --lm-paper: #f4eedf;
  --lm-paper-2: #eadfc6;
  --lm-surface: #fffbf1;
  --lm-ink: #1d2150;
  --lm-ink-2: #3e4278;
  --lm-muted: #585c8a;
  --lm-line: #ddcfae;
  --lm-line-2: #c4b28a;

  --lm-coral: #ffb84d;
  --lm-coral-h: #f5a62e;
  --lm-coral-edge: #c7791a;
  --lm-coral-soft: #ffe9c2;
  --lm-coral-ink: #8a4b00;
  --lm-on-coral: #2a1a00;

  --lm-teal: #3b3fa6;
  --lm-teal-h: #2f3390;
  --lm-teal-edge: #23276f;
  --lm-teal-soft: #e4e5f8;
  --lm-on-teal: #ffffff;

  --lm-sage: #e8dec4;
  --lm-sage-h: #ddd0ae;
  --lm-sage-edge: #cbbb92;

  --lm-gold: #f2b632;
  --lm-gold-edge: #c98f12;
  --lm-gold-soft: #fff0c7;
  --lm-gold-ink: #7a5400;

  --lm-ok: #1e9e62;
  --lm-ok-h: #198d56;
  --lm-ok-edge: #167a4b;
  --lm-ok-soft: #ddf3e6;
  --lm-ok-ink: #12663e;

  --lm-bad: #d9435f;
  --lm-bad-h: #c73a55;
  --lm-bad-edge: #a82e46;
  --lm-bad-soft: #fbe0e6;
  --lm-bad-ink: #8e2237;

  --lm-cream: #fffbf1;
  --lm-cream-2: #f3e9d0;
  --lm-cream-ink: #1d2150;
  --lm-cream-muted: #474b7c;
  --lm-cream-line: #ddcfae;
  --lm-cream-sel: #fff0cc;
  --lm-cream-ok: #d3efdc;
  --lm-cream-bad: #fbd9df;

  --lm-glow: 0 0 24px rgba(255, 170, 40, 0.35);
  --lm-glow-sm: 0 0 12px rgba(255, 170, 40, 0.4);
  --lm-heat-0: #eadfc6;
  --lm-heat-1: #f6dba5;
  --lm-heat-2: #f2b84e;
  --lm-heat-3: #c7791a;
  --lm-heat-4: #1d2150;
  --lm-scrim: rgba(29, 33, 80, 0.5);
  --lm-shadow-float: 0 14px 36px rgba(29, 33, 80, 0.2);
  --lm-sky: #dfe3f5;
  --lm-bldg: #b9bfe6;
  --lm-bldg-2: #a2a9d9;
  --lm-win-off: #8e96cf;
}

:root {
  --lm-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .28  0 0 0 0 .12  0 0 0 .1 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  --lm-common: #aeb3df;
  --lm-rare: #6fb4ff;
  --lm-legend: #ffc266;
  --lm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lm-ease-in: cubic-bezier(0.3, 0, 0, 1);
  --lm-fast: 150ms;
  --lm-normal: 200ms;
  --lm-slow: 300ms;
  --lm-font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --lm-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lm-font-ja: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --lm-font-ko: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

html[data-theme='paper'] { --lm-rare: #2f6fd0; --lm-common: #6c70a0; --lm-legend: #c7791a; }

/* Bootstrap variable overrides so nothing reads as stock Bootstrap */
html,
html[data-bs-theme] {
  --bs-body-bg: var(--lm-paper);
  --bs-body-color: var(--lm-ink);
  --bs-body-font-family: var(--lm-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-heading-color: var(--lm-ink);
  --bs-emphasis-color: var(--lm-ink);
  --bs-secondary-color: var(--lm-muted);
  --bs-primary: #ffb84d;
  --bs-primary-rgb: 255, 184, 77;
  --bs-link-color: var(--lm-coral-ink);
  --bs-link-hover-color: var(--lm-ink);
  --bs-border-color: var(--lm-line);
  --bs-border-width: 1px;
  --bs-border-radius: 12px;
  --bs-border-radius-lg: 16px;
  --bs-focus-ring-color: rgba(255, 184, 77, 0.35);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lm-paper);
  color: var(--lm-ink);
  font-family: var(--lm-font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .lm-display {
  font-family: var(--lm-font-display);
  color: var(--lm-ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-weight: 800;
  margin: 0;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }

a { color: var(--lm-coral-ink); text-underline-offset: 3px; }
a:hover { color: var(--lm-ink); }

:focus-visible { outline: 3px solid var(--lm-coral); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
button { font-family: inherit; }

/* Script typography: target-language text is large, well set, and has a romanization line */
[lang='ja'] { font-family: var(--lm-font-ja); }
[lang='ko'] { font-family: var(--lm-font-ko); }

.lm-tt { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.lm-tt__t { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lm-tt__t:not([lang='ja']):not([lang='ko']) { font-family: var(--lm-font-display); letter-spacing: -0.01em; }
.lm-tt__r { font-size: 14px; line-height: 1.35; color: var(--lm-muted); font-weight: 600; letter-spacing: 0.01em; }
/* Romanization on cream paper must hold 4.5:1: every cream surface re-colours it */
.lm-bubble .lm-tt__r, .lm-sbubble .lm-tt__r, .lm-flip__face .lm-tt__r, .lm-opt .lm-tt__r, .lm-pair .lm-tt__r, .lm-cardpaper .lm-tt__r, .lm-reply .lm-tt__r { color: var(--lm-cream-muted); }
.lm-tt--sm .lm-tt__t { font-size: 20px; }
.lm-tt--md .lm-tt__t { font-size: 26px; }
.lm-tt--lg .lm-tt__t { font-size: 36px; }
.lm-tt--xl .lm-tt__t { font-size: 44px; line-height: 1.25; }

/* Paper surface: cream card with fibre grain. Content that must be read at high contrast lives on it. */
.lm-paper,
.lm-opt, .lm-chipword, .lm-key, .lm-flip__face, .lm-cardpaper {
  background-color: var(--lm-cream);
  background-image: var(--lm-grain);
  color: var(--lm-cream-ink);
}
.lm-paper .lm-tt__r, .lm-opt .lm-tt__r, .lm-chipword .lm-tt__r, .lm-flip__face .lm-tt__r, .lm-cardpaper .lm-tt__r { color: var(--lm-cream-muted); }

.lm-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-muted); }
.lm-muted { color: var(--lm-muted); }
.lm-icon { flex: none; display: block; }

/* Course tiles: a script glyph on a flat tint (no flags, no emoji) */
.lm-tile { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 700; font-size: 18px; line-height: 1; background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-tile--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 32px; }
.lm-tile span { font-family: var(--lm-font-display); }
.lm-tile span[lang='ja'] { font-family: var(--lm-font-ja); }
.lm-tile span[lang='ko'] { font-family: var(--lm-font-ko); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* src/styles/controls.css */
/* Bespoke controls layered over Bootstrap: buttons, cards, chips, progress, inputs, modal, toast, dropdown */

/* ---------- Buttons: flat fill, inner highlight, lantern glow on hover, press sinks 2px ---------- */
.lm-btn.lm-btn.btn {
  --b-bg: var(--lm-surface);
  --b-bg-h: var(--lm-paper-2);
  --b-fg: var(--lm-ink);
  --b-bd: var(--lm-line-2);
  --b-glow: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid var(--b-bd);
  border-radius: 12px;
  background: var(--b-bg);
  color: var(--b-fg);
  font: 700 16px/1.2 var(--lm-font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 0 rgba(0, 0, 0, 0.18);
  transform: translateY(0);
  transition: transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease),
    background-color var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lm-btn.lm-btn.btn:hover {
  background: var(--b-bg-h);
  color: var(--b-fg);
  border-color: var(--b-bd);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 0 rgba(0, 0, 0, 0.18), 0 0 18px var(--b-glow);
}
.lm-btn.lm-btn.btn:active,
.lm-btn.lm-btn.btn.active,
.lm-btn.lm-btn.btn.show {
  background: var(--b-bg-h);
  color: var(--b-fg);
  border-color: var(--b-bd);
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
}
.lm-btn.lm-btn.btn:focus-visible { outline: 3px solid var(--lm-ink); outline-offset: 3px; color: var(--b-fg); }
.lm-btn.lm-btn.btn:disabled,
.lm-btn.lm-btn.btn.disabled {
  opacity: 1;
  --b-bg: var(--lm-paper-2);
  --b-bg-h: var(--lm-paper-2);
  --b-fg: var(--lm-muted);
  --b-bd: var(--lm-line);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.lm-btn--primary.lm-btn.btn { --b-bg: var(--lm-coral); --b-bg-h: var(--lm-coral-h); --b-fg: var(--lm-on-coral); --b-bd: var(--lm-coral-edge); --b-glow: rgba(255, 184, 77, 0.55); }
.lm-btn--teal.lm-btn.btn { --b-bg: var(--lm-teal); --b-bg-h: var(--lm-teal-h); --b-fg: var(--lm-on-teal); --b-bd: var(--lm-teal-edge); --b-glow: rgba(255, 184, 77, 0.4); }
.lm-btn--sage.lm-btn.btn { --b-bg: var(--lm-sage); --b-bg-h: var(--lm-sage-h); --b-fg: var(--lm-ink); --b-bd: var(--lm-sage-edge); }
.lm-btn--ok.lm-btn.btn { --b-bg: var(--lm-ok); --b-bg-h: var(--lm-ok-h); --b-fg: #04281a; --b-bd: var(--lm-ok-edge); --b-glow: rgba(79, 208, 154, 0.45); }
.lm-btn--bad.lm-btn.btn { --b-bg: var(--lm-bad); --b-bg-h: var(--lm-bad-h); --b-fg: #2e0714; --b-bd: var(--lm-bad-edge); --b-glow: rgba(255, 112, 144, 0.4); }
html[data-theme='paper'] .lm-btn--ok.lm-btn.btn,
html[data-theme='paper'] .lm-btn--bad.lm-btn.btn,
html[data-theme='paper'] .lm-btn--teal.lm-btn.btn { --b-fg: #ffffff; }
.lm-btn--quiet.lm-btn.btn { --b-bg: transparent; --b-bg-h: var(--lm-paper-2); --b-fg: var(--lm-muted); --b-bd: transparent; box-shadow: none; }
.lm-btn--quiet.lm-btn.btn:hover { color: var(--lm-ink); box-shadow: none; }
.lm-btn--quiet.lm-btn.btn:active { transform: scale(0.97); box-shadow: none; }
.lm-btn--block.lm-btn.btn { display: flex; width: 100%; }
.lm-btn--sm.lm-btn.btn { min-height: 44px; padding: 8px 16px; font-size: 14px; }

.lm-iconbtn {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--lm-muted); text-decoration: none; cursor: pointer;
  transition: background-color var(--lm-fast) var(--lm-ease), color var(--lm-fast) var(--lm-ease), transform var(--lm-fast) var(--lm-ease);
}
.lm-iconbtn:hover { background: var(--lm-paper-2); color: var(--lm-ink); }
.lm-iconbtn:active { transform: scale(0.92); }

/* ---------- Cards ---------- */
.lm-card {
  background: var(--lm-surface);
  color: var(--lm-ink);
  border: 1px solid var(--lm-line);
  border-radius: 16px;
  padding: 16px;
  min-width: 0;
}
a.lm-card--link, button.lm-card--link {
  display: block; width: 100%; text-align: left; text-decoration: none; cursor: pointer;
  transition: transform var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease);
}
a.lm-card--link:hover, button.lm-card--link:hover { border-color: var(--lm-coral); box-shadow: var(--lm-glow-sm); transform: translateY(-2px); color: var(--lm-ink); }
a.lm-card--link:active, button.lm-card--link:active { transform: translateY(1px); }
.lm-card--flat { box-shadow: none; }

/* ---------- Chips ---------- */
.lm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 9999px; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-chip--streak { background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-chip--xp { background: var(--lm-gold-soft); color: var(--lm-gold-ink); }
.lm-chip--xp .lm-icon { color: var(--lm-gold); }
.lm-chip--freeze { background: var(--lm-teal-soft); color: var(--lm-ink); }

/* ---------- Progress ---------- */
.progress.lm-progress { height: 12px; background: var(--lm-paper-2); border-radius: 9999px; overflow: hidden; box-shadow: none; }
.lm-progress .progress-bar { position: relative; background: var(--lm-coral); border-radius: 9999px; transition: width var(--lm-slow) var(--lm-ease); }
.lm-progress .progress-bar::after { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 3px; border-radius: 9999px; background: rgba(255, 255, 255, 0.4); }
.lm-progress--teal .progress-bar { background: var(--lm-coral); }
.lm-progress--gold .progress-bar { background: var(--lm-gold); }
.lm-progress--sm.progress.lm-progress { height: 8px; }
.lm-progress--sm .progress-bar::after { display: none; }

/* ---------- Inputs ---------- */
.form-control.lm-input {
  min-height: 56px; padding: 12px 16px; border: 2px solid var(--lm-cream-line); border-radius: 12px;
  background-color: var(--lm-cream); background-image: var(--lm-grain); color: var(--lm-cream-ink); font-size: 20px; box-shadow: none;
  transition: border-color var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease);
}
.form-control.lm-input::placeholder { color: var(--lm-cream-muted); opacity: 0.85; }
.form-control.lm-input:hover { border-color: var(--lm-coral-edge); }
.form-control.lm-input:focus { border-color: var(--lm-coral); box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.35); background-color: var(--lm-cream); color: var(--lm-cream-ink); }
.form-control.lm-input.is-ok { border-color: var(--lm-ok); background-color: var(--lm-cream-ok); }
.form-control.lm-input.is-bad { border-color: var(--lm-bad); background-color: var(--lm-cream-bad); }

.lm-switch.form-check { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0; margin: 0; }
.lm-switch.form-check .form-check-input {
  width: 52px; height: 32px; margin: 0; float: none; border: 2px solid var(--lm-line-2); background-color: var(--lm-paper-2); cursor: pointer;
  transition: background-color var(--lm-normal) var(--lm-ease), border-color var(--lm-normal) var(--lm-ease), background-position var(--lm-normal) var(--lm-ease);
}
.lm-switch.form-check .form-check-input:checked { background-color: var(--lm-coral); border-color: var(--lm-coral); }
.lm-switch.form-check .form-check-input:focus { box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.35); border-color: var(--lm-coral); }
.lm-switch .form-check-label { font-weight: 600; cursor: pointer; flex: 1; }

/* ---------- Modal / bottom sheet ---------- */
.modal-backdrop { --bs-backdrop-bg: #0a0c26; --bs-backdrop-opacity: 0.66; }
.modal-content.lm-modal { background: var(--lm-surface); color: var(--lm-ink); border: 1px solid var(--lm-line-2); border-radius: 24px; box-shadow: var(--lm-shadow-float); padding: 24px; }
.modal.fade .modal-dialog { transition: transform var(--lm-slow) var(--lm-ease-in); }
.modal-dialog.lm-sheet { margin: 0 auto; min-height: 100%; max-width: 560px; display: flex; align-items: flex-end; }
.lm-sheet .modal-content.lm-modal { width: 100%; border-radius: 24px 24px 0 0; border-bottom: 0; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .modal-dialog.lm-sheet { align-items: center; padding: 24px; }
  .lm-sheet .modal-content.lm-modal { border-radius: 24px; border-bottom: 1px solid var(--lm-line-2); }
}

/* ---------- Toast ---------- */
.toast.lm-toast { background: var(--lm-cream); background-image: var(--lm-grain); color: var(--lm-cream-ink); border: 1px solid var(--lm-coral-edge); border-radius: 9999px; box-shadow: var(--lm-shadow-float); width: auto; max-width: calc(100vw - 32px); }
.lm-toast .toast-body { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-weight: 700; font-size: 15px; }
.lm-toast--ok .lm-icon { color: var(--lm-ok-edge); }
.lm-toast--gold .lm-icon { color: var(--lm-coral-edge); }
.lm-toasts { z-index: 1090; }

/* ---------- Dropdown ---------- */
.dropdown-menu.lm-menu { min-width: 288px; padding: 8px; border: 1px solid var(--lm-line-2); border-radius: 16px; background: var(--lm-surface); box-shadow: var(--lm-shadow-float); }
.dropdown-item.lm-menu__item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; color: var(--lm-ink); font-weight: 700; transition: background-color var(--lm-fast) var(--lm-ease); }
.dropdown-item.lm-menu__item:hover, .dropdown-item.lm-menu__item:focus { background: var(--lm-paper-2); color: var(--lm-ink); }
.dropdown-item.lm-menu__item.active { background: var(--lm-teal-soft); color: var(--lm-ink); }
.dropdown-item.lm-menu__item:active { background: var(--lm-sage); color: var(--lm-ink); }
.lm-menu__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lm-menu__sub { font-size: 13px; font-weight: 500; color: var(--lm-muted); }


/* src/styles/anim.css */
/* Motion: 150-300ms interaction transitions, ceremonies up to ~1.2s. Reduced motion is handled in tokens.css */
@keyframes lm-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes lm-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes lm-pop { 0% { transform: scale(0.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lm-rise { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes lm-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes lm-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes lm-wisp { 0%, 100% { transform: scale(1, 1) translateY(0); opacity: 1; } 50% { transform: scale(0.88, 1.12) translateY(-2px); opacity: 0.85; } }
@keyframes lm-arm-l { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-9deg); } }
@keyframes lm-arm-r { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } }
@keyframes lm-zzz { 0% { opacity: 0.2; transform: translateY(4px); } 60% { opacity: 1; } 100% { opacity: 0.2; transform: translateY(-6px); } }
@keyframes lm-flicker { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 30% { transform: scale(1.04, 1.08) skewX(-2deg); } 60% { transform: scale(0.97, 1.03) skewX(2deg); } }
@keyframes lm-flame-lit { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lm-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 184, 77, 0.55); } 100% { box-shadow: 0 0 0 16px rgba(255, 184, 77, 0); } }
@keyframes lm-light-up { 0% { opacity: 0.2; transform: scale(0.6); } 40% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes lm-halo { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 0.9; } 100% { opacity: 0.55; transform: scale(1); } }
@keyframes lm-confetti { 0% { transform: translate3d(0, -24px, 0) rotate(0deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate3d(var(--x), 420px, 0) rotate(var(--r)); opacity: 0; } }
@keyframes lm-burst { 0% { transform: translate(0, 0) scale(0.4); opacity: 1; } 100% { transform: translate(var(--bx), var(--by)) scale(1); opacity: 0; } }
@keyframes lm-slam { 0% { transform: translateY(-140px) rotate(-18deg) scale(1.9); opacity: 0; } 55% { transform: translateY(0) rotate(-9deg) scale(0.96); opacity: 1; } 70% { transform: translateY(0) rotate(-9deg) scale(1.04); } 100% { transform: translateY(0) rotate(-9deg) scale(1); opacity: 1; } }
@keyframes lm-page-jolt { 0%, 100% { transform: translateY(0); } 55% { transform: translateY(5px); } 70% { transform: translateY(-2px); } }
@keyframes lm-ink-spread { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 0.35; transform: scale(1.12); } }
@keyframes lm-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes lm-shimmer { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes lm-flip-in { 0% { transform: rotateY(90deg) scale(0.8); opacity: 0; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }
@keyframes lm-drop-in { 0% { transform: translateY(-40px) scale(0.7); opacity: 0; } 70% { transform: translateY(6px) scale(1.04); opacity: 1; } 100% { transform: translateY(0) scale(1); } }
@keyframes lm-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes lm-chest-shake { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-4px) rotate(-3deg); } 40% { transform: translateX(4px) rotate(3deg); } 60% { transform: translateX(-3px) rotate(-2deg); } 80% { transform: translateX(3px) rotate(2deg); } }
@keyframes lm-chest-open { 0% { transform: rotate(0deg); } 100% { transform: rotate(-62deg); } }
@keyframes lm-skel { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes lm-sound { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes lm-combo { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes lm-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.lm-rise { animation: lm-rise var(--lm-slow) var(--lm-ease) both; }
.lm-popin { animation: lm-pop var(--lm-normal) var(--lm-ease) both; }
.lm-fade { animation: lm-fade var(--lm-slow) var(--lm-ease) both; }
.lm-skel { background: var(--lm-paper-2); border-radius: 16px; animation: lm-skel 1.2s ease-in-out infinite; }

/* Flame (streak) */
.lm-flame { display: block; overflow: visible; transform-origin: 50% 100%; animation: lm-flicker 2.4s ease-in-out infinite; }
.lm-flame__outer { fill: var(--lm-coral); }
.lm-flame__inner { fill: #fff0c7; }
.lm-flame--dim { animation: none; }
.lm-flame--dim .lm-flame__outer { fill: var(--lm-line-2); }
.lm-flame--dim .lm-flame__inner { fill: var(--lm-paper-2); }
.lm-flame--lit { animation: lm-flame-lit 600ms var(--lm-ease) both, lm-flicker 2.4s 600ms ease-in-out infinite; }

/* Lumi */
.lm-lumi { display: block; flex: none; overflow: visible; }
.lm-lumi--idle, .lm-lumi--think { animation: lm-bob 3.2s ease-in-out infinite; }
.lm-lumi--cheer { animation: lm-bob 0.9s ease-in-out infinite; }
.lm-lumi--sleep { animation: lm-bob 5s ease-in-out infinite; }
.lm-lumi__flame { transform-origin: 60px 20px; animation: lm-wisp 1.6s ease-in-out infinite; }
.lm-lumi__eyes { transform-origin: 60px 76px; animation: lm-blink 5s infinite; }
.lm-lumi__arm--l { transform-origin: 24px 86px; animation: lm-arm-l 0.7s ease-in-out infinite; }
.lm-lumi__arm--r { transform-origin: 96px 86px; animation: lm-arm-r 0.7s ease-in-out infinite; }
.lm-lumi__zzz path { animation: lm-zzz 2.2s ease-in-out infinite; }

/* Confetti: deterministic pieces, positions come from inline custom properties */
.lm-confetti { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; z-index: 5; }
.lm-confetti i { position: absolute; display: block; width: 10px; height: 14px; border-radius: 2px; animation: lm-confetti var(--d) var(--delay) cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.lm-confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
.lm-confetti i:nth-child(5n + 1) { background: var(--lm-coral); }
.lm-confetti i:nth-child(5n + 2) { background: var(--lm-cream); }
.lm-confetti i:nth-child(5n + 3) { background: var(--lm-gold); }
.lm-confetti i:nth-child(5n + 4) { background: var(--lm-bad); }
.lm-confetti i:nth-child(5n) { background: var(--lm-rare); }

/* Spark burst (SVG circles/rects spawned with custom properties) */
.lm-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 6; }
.lm-burst i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--lm-coral); animation: lm-burst var(--bd, 900ms) var(--bdelay, 0ms) ease-out both; }
.lm-burst i:nth-child(odd) { background: var(--lm-cream); width: 6px; height: 6px; margin: -3px; }
.lm-burst i:nth-child(4n) { background: var(--lm-gold); }
@media (prefers-reduced-motion: reduce) { .lm-confetti, .lm-burst { display: none; } }


/* src/styles/shell.css */
/* App shell: top bar + bottom tabs on mobile, left rail + side panel on desktop */
.lm-shell { min-height: 100vh; min-height: 100dvh; }
.lm-col { min-width: 0; }
.lm-rail { display: none; }
.lm-side { display: none; }

.lm-shell { --lm-tabs-h: calc(76px + env(safe-area-inset-bottom, 0px)); }
.lm-body { padding: 0 16px calc(var(--lm-tabs-h) + 32px); }
.lm-main { width: 100%; max-width: 640px; margin: 0 auto; padding-bottom: 16px; min-width: 0; }
.lm-main::after { content: ''; display: block; height: 1px; }

/* Top bar */
.lm-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  box-sizing: content-box;
  height: 64px;
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--lm-paper);
}
.lm-topbar__stats { display: flex; align-items: center; gap: 8px; }
.lm-topbar__ring { display: inline-flex; width: 36px; height: 36px; flex: none; }
.lm-ring__spark { fill: var(--lm-coral); }

.btn.lm-switcher.lm-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--lm-line-2);
  border-radius: 12px;
  background: var(--lm-surface);
  color: var(--lm-ink);
  font-weight: 700;
  font-size: 16px;
  transition: border-color var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) var(--lm-ease);
}
.btn.lm-switcher.lm-switcher::after { display: none; }
.btn.lm-switcher.lm-switcher:hover,
.btn.lm-switcher.lm-switcher.show { border-color: var(--lm-line-2); background: var(--lm-surface); color: var(--lm-ink); }
.btn.lm-switcher.lm-switcher:active { transform: scale(0.98); }
.btn.lm-switcher.lm-switcher:focus-visible { outline: 3px solid var(--lm-teal); outline-offset: 2px; }
.lm-switcher__name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .lm-switcher__name { display: none; } }

/* Bottom tabs */
.lm-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  gap: 4px;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--lm-surface);
  border-top: 1px solid var(--lm-line);
}
.lm-tab {
  flex: 1;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  color: var(--lm-muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.lm-tab__ico {
  width: 56px;
  height: 32px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--lm-normal) var(--lm-ease), color var(--lm-normal) var(--lm-ease),
    transform var(--lm-fast) var(--lm-ease);
}
.lm-tab:hover { color: var(--lm-ink); }
.lm-tab:hover .lm-tab__ico { background: var(--lm-paper-2); }
.lm-tab:active .lm-tab__ico { transform: scale(0.94); }
.lm-tab.is-active { color: var(--lm-ink); }
.lm-tab.is-active .lm-tab__ico { background: var(--lm-teal-soft); color: var(--lm-teal); }
.lm-tab:focus-visible { outline: 3px solid var(--lm-teal); outline-offset: -3px; }

/* Left rail */
.lm-rail__brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 16px; color: var(--lm-ink); text-decoration: none; }
.lm-rail__brand:hover { color: var(--lm-ink); }
.lm-rail__word { font-family: var(--lm-font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }
.lm-rail__link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 0 16px;
  border: 2px solid transparent;
  border-radius: 12px;
  color: var(--lm-ink-2);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease);
}
.lm-rail__link:hover { background: var(--lm-paper-2); color: var(--lm-ink); }
.lm-rail__link:active { transform: scale(0.98); }
.lm-rail__link.is-active { background: var(--lm-teal-soft); border-color: var(--lm-teal); color: var(--lm-teal); }

/* Side panel */
.lm-side__stack { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.lm-goal { display: flex; align-items: center; gap: 16px; }
.lm-goal__ring { flex: none; }
.lm-goal__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lm-goal__big { font-family: var(--lm-font-display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.lm-ring__bg { stroke: var(--lm-paper-2); }
.lm-ring__fg { stroke: var(--lm-coral); transition: stroke-dashoffset var(--lm-slow) var(--lm-ease); filter: drop-shadow(0 0 4px rgba(255, 184, 77, 0.5)); }
.lm-ring__fg.is-done { stroke: var(--lm-ok); }
.lm-ring__num { font-family: var(--lm-font-display); font-weight: 800; fill: var(--lm-ink); }

@media (min-width: 992px) {
  .lm-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .lm-tabs { display: none; }
  .lm-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 16px;
    border-right: 2px solid var(--lm-line);
  }
  .lm-body { padding: 0 24px 48px; }
  .lm-main { padding-bottom: 0; }
}

@media (min-width: 1200px) {
  .lm-body { display: grid; grid-template-columns: 640px 320px; gap: 24px; justify-content: center; }
  .lm-main { margin: 0; }
  .lm-side { display: block; padding-top: 72px; }
}


/* src/styles/onboarding.css */
.lm-ob { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.lm-ob__top { width: 100%; max-width: 560px; box-sizing: content-box; height: 64px; padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; gap: 24px; }
.lm-ob__brand { font-family: var(--lm-font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.03em; }
.lm-ob__steps { flex: 1; }
.lm-ob__main { width: 100%; max-width: 560px; flex: 1; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.lm-ob__title { font-size: 28px; margin-bottom: 16px; }
.lm-ob__hero { display: flex; align-items: center; gap: 16px; }

.lm-bubble {
  position: relative;
  flex: 1;
  background: var(--lm-surface);
  border: 2px solid var(--lm-line);
  border-radius: 16px;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
}
.lm-bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--lm-surface);
  border-left: 2px solid var(--lm-line);
  border-bottom: 2px solid var(--lm-line);
  transform: translateY(-50%) rotate(45deg);
}

.lm-ob__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm-ob__goals { display: flex; flex-direction: column; gap: 12px; }

.lm-course {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 176px;
  padding: 16px;
  text-align: left;
  background: var(--lm-surface);
  color: var(--lm-ink);
  border: 2px solid var(--lm-line);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--lm-line);
  cursor: pointer;
  transition: transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease),
    border-color var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) var(--lm-ease);
}
.lm-course:hover { border-color: var(--lm-line-2); box-shadow: 0 6px 0 var(--lm-line); transform: translateY(-2px); }
.lm-course:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lm-line); }
.lm-course.is-selected { border-color: var(--lm-teal); background: var(--lm-teal-soft); box-shadow: 0 4px 0 var(--lm-teal-edge); }
.lm-course__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.lm-course .lm-tile { width: 40px; height: 40px; font-size: 22px; }
.lm-course__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lm-teal);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform var(--lm-normal) var(--lm-ease);
}
.lm-course.is-selected .lm-course__check { transform: scale(1); }
.lm-course__greet { font-size: 24px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lm-course__greet:not([lang='ja']):not([lang='ko']) { font-family: var(--lm-font-display); }
.lm-course__roman { font-size: 13px; line-height: 18px; color: var(--lm-muted); }
.lm-course__name { margin-top: auto; display: flex; flex-direction: column; font-weight: 700; padding-top: 8px; }
.lm-course__native { font-size: 13px; font-weight: 500; color: var(--lm-muted); }

.lm-goalopt {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 12px 16px;
  text-align: left;
  background: var(--lm-surface);
  color: var(--lm-ink);
  border: 2px solid var(--lm-line);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--lm-line);
  cursor: pointer;
  transition: transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease),
    border-color var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) var(--lm-ease);
}
.lm-goalopt:hover { border-color: var(--lm-line-2); transform: translateY(-2px); box-shadow: 0 6px 0 var(--lm-line); }
.lm-goalopt:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lm-line); }
.lm-goalopt.is-selected { border-color: var(--lm-teal); background: var(--lm-teal-soft); box-shadow: 0 4px 0 var(--lm-teal-edge); }
.lm-goalopt__dot { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--lm-line-2); background: var(--lm-surface); transition: all var(--lm-fast) var(--lm-ease); }
.lm-goalopt.is-selected .lm-goalopt__dot { border-color: var(--lm-teal); background: radial-gradient(circle, var(--lm-teal) 0 5px, var(--lm-surface) 6px); }
.lm-goalopt__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lm-goalopt__label { font-weight: 700; font-size: 17px; }
.lm-goalopt__note { font-size: 14px; color: var(--lm-muted); }
.lm-goalopt__xp { font-family: var(--lm-font-display); font-weight: 800; font-size: 18px; color: var(--lm-gold-ink); background: var(--lm-gold-soft); padding: 4px 12px; border-radius: 9999px; }

.lm-ob__foot {
  position: sticky;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  background: var(--lm-paper);
}

@media (min-width: 768px) {
  .lm-ob__title { font-size: 32px; }
}


/* src/styles/learn.css */
/* Map tab: city header, illustrated neighbourhood maps, route stops, daily chest, golden hour banner */
:root, html[data-theme='dusk'] { --lm-stone: #5b66c4; --lm-stone2: #4650a8; --lm-roof: #262b7a; }
html[data-theme='paper'] { --lm-stone: #d9ccaa; --lm-stone2: #c6b78f; --lm-roof: #8c93c4; }

.lm-learn { display: flex; flex-direction: column; gap: 16px; }

/* City header */
.lm-cityhead { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--lm-surface); border: 1px solid var(--lm-line-2); border-radius: 16px; }
.lm-cityhead__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lm-cityhead__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-cityhead h1 { font-size: 36px; }
.lm-cityhead__lumi { display: block; flex: none; border-radius: 16px; transition: transform var(--lm-fast) var(--lm-ease); }
.lm-cityhead__lumi:hover { transform: translateY(-2px); }
.lm-cityhead__lumi:active { transform: scale(0.96); }
.lm-rank { display: flex; align-items: center; gap: 12px; }
.lm-rank__lv { flex: none; min-width: 48px; height: 32px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--lm-coral); color: var(--lm-on-coral); font-weight: 800; font-size: 14px; }
.lm-rank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lm-rank__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lm-rank__title { font-family: var(--lm-font-display); font-weight: 700; font-size: 18px; }
.lm-rank__next { font-size: 14px; }

/* Golden hour banner */
.lm-golden { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; border: 1px dashed var(--lm-coral); background: var(--lm-surface); }
.lm-golden.is-on { background: var(--lm-coral); border: 1px solid var(--lm-coral-edge); color: var(--lm-on-coral); box-shadow: var(--lm-glow-sm); }
.lm-golden__ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-golden.is-on .lm-golden__ico { background: rgba(42, 26, 0, 0.14); color: var(--lm-on-coral); }
.lm-golden__txt { flex: 1; min-width: 0; }
.lm-golden__t { font-weight: 700; }
.lm-golden__d { font-size: 14px; line-height: 20px; }
.lm-golden:not(.is-on) .lm-golden__d { color: var(--lm-muted); }
.lm-golden__x2 { font-family: var(--lm-font-display); font-weight: 800; font-size: 28px; }

/* Daily chest */
.lm-chestcard { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 16px; transition: border-color var(--lm-normal) var(--lm-ease), box-shadow var(--lm-normal) var(--lm-ease); }
.lm-chestcard.is-ready { border-color: var(--lm-coral); box-shadow: var(--lm-glow-sm); }
.lm-chestcard__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lm-chestcard__txt p { font-size: 14px; line-height: 20px; }
.lm-chest { display: block; overflow: visible; flex: none; }
.lm-chest__body { fill: #8a5a2b; stroke: #3a2412; stroke-width: 3; }
.lm-chest__band { fill: #c98f12; stroke: #3a2412; stroke-width: 2; }
.lm-chest__lidpath { fill: #a8743a; stroke: #3a2412; stroke-width: 3; }
.lm-chest__band-line { fill: none; }
.lm-chest__lock { fill: #ffc266; stroke: #3a2412; stroke-width: 2.4; }
.lm-chest__hole { fill: #3a2412; }
.lm-chest__keyhole { stroke: #3a2412; stroke-width: 3; stroke-linecap: round; }
.lm-chest__light { opacity: 0; transform-origin: 60px 56px; }
.lm-chest__light circle { fill: rgba(255, 194, 102, 0.45); }
.lm-chest__light path { stroke: #ffd97a; stroke-width: 3; stroke-linecap: round; fill: none; }
.lm-chest.is-ready .lm-chest__light { opacity: 0.6; }
.lm-chest.is-ready { animation: lm-wiggle 2.6s ease-in-out infinite; }
.lm-chest__lid { transform-origin: 14px 50px; }
.lm-chest.is-shake { animation: lm-chest-shake 360ms ease-in-out 3; }
.lm-chest.is-shake .lm-chest__light { opacity: 0.75; }
.lm-chest.is-open .lm-chest__lid { animation: lm-chest-open 400ms var(--lm-ease) forwards; }
.lm-chest.is-open .lm-chest__light { opacity: 1; animation: lm-halo 600ms var(--lm-ease) both; }

/* Neighbourhood sections */
.lm-unit { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.lm-unit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--lm-surface); border: 1px solid var(--lm-line); border-left: 4px solid var(--lm-coral); border-radius: 12px; }
.lm-unit__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lm-unit__txt h2 { font-size: 24px; }
.lm-unit__txt p { font-size: 14px; line-height: 20px; color: var(--lm-muted); }
.lm-unit__eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-coral-ink); }
.lm-unit__count { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 32px; padding: 0 12px; border-radius: 9999px; background: var(--lm-coral-soft); color: var(--lm-coral-ink); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

.lm-map { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 360 / 520; overflow: hidden; border-radius: 20px; border: 1px solid var(--lm-line-2); background: var(--lm-sky); }
.lm-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lm-map.is-locked .lm-map__svg { filter: saturate(0.35) brightness(0.72); }
.lm-route { fill: none; stroke: var(--lm-line-2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 12; }
.lm-route.is-lit { stroke: #ffc266; stroke-width: 5; stroke-dasharray: none; filter: drop-shadow(0 0 4px rgba(255, 194, 102, 0.8)); animation: lm-fade 400ms var(--lm-ease) both; }

/* Skyline art classes */
.lm-sky { fill: var(--lm-sky); }
.lm-moon { fill: var(--lm-cream); opacity: 0.92; }
.lm-star { fill: var(--lm-cream); animation: lm-twinkle 3.2s ease-in-out infinite; }
.lm-ground { fill: var(--lm-bldg); }
.lm-ground-line { stroke: var(--lm-line-2); stroke-width: 2; fill: none; }
.lm-bldg { fill: var(--lm-bldg); }
.lm-bldg2 { fill: var(--lm-bldg-2); opacity: 0.75; }
.lm-stone { fill: var(--lm-stone); }
.lm-stone2 { fill: var(--lm-stone2); }
.lm-roof { fill: var(--lm-roof); }
.lm-roof-tip { stroke: var(--lm-roof); stroke-width: 4; stroke-linecap: round; fill: none; }
.lm-hole { fill: var(--lm-sky); }
.lm-pillar { stroke: var(--lm-stone2); stroke-width: 3; fill: none; }
.lm-string { stroke: var(--lm-line-2); stroke-width: 1.6; fill: none; }
.lm-win { fill: var(--lm-win-off); }
.lm-win.is-lit { fill: #ffd27a; filter: drop-shadow(0 0 3px rgba(255, 200, 100, 0.9)); animation: lm-light-up 700ms var(--lm-ease) both; transform-box: fill-box; transform-origin: center; }
.lm-lantern { fill: var(--lm-win-off); }
.lm-lantern.is-lit { fill: #ff9d4d; filter: drop-shadow(0 0 4px rgba(255, 157, 77, 0.9)); }
.lm-accent-gold { fill: #ffc266; }
.lm-accent-gold-line { stroke: #ffc266; stroke-width: 3; fill: none; stroke-linecap: round; }
.lm-torii { fill: #e0523f; }
.lm-awning { fill: #e0523f; }
.lm-awning-stripe { stroke: var(--lm-cream); stroke-width: 6; opacity: 0.85; }
.lm-tower { fill: #e8683a; }
.lm-tower-deck { fill: #f5e9cf; }
.lm-tower-deck2 { fill: var(--lm-bldg); }
.lm-tower-brace { stroke: #f5e9cf; stroke-width: 2; fill: none; opacity: 0.85; }
.lm-map--ko .lm-tower { fill: #aab2e6; }
.lm-map--ko .lm-tower-deck { fill: #d9def7; }
.lm-pine { fill: var(--lm-bldg-2); }
.lm-gable1 { fill: #c47a5a; } .lm-gable2 { fill: #b0617a; } .lm-gable3 { fill: #5f7fbf; } .lm-gable4 { fill: #6aa584; } .lm-gable5 { fill: #c4a45a; }
.lm-lamp { stroke: var(--lm-stone2); stroke-width: 3; fill: none; }
.lm-tram { fill: #e6b43a; }
.lm-clock { fill: var(--lm-cream); }
.lm-clock-hands { stroke: #1d2150; stroke-width: 1.6; fill: none; }

/* Route stops */
.lm-stop { position: absolute; transform: translate(-50%, -62%); display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; min-height: 56px; color: var(--lm-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.lm-stop:hover { color: var(--lm-ink); }
.lm-stop:focus-visible { outline: 3px solid var(--lm-ink); outline-offset: 4px; border-radius: 12px; }
.lm-stop__lamp { position: relative; display: block; transition: transform var(--lm-fast) var(--lm-ease); }
a.lm-stop:hover .lm-stop__lamp { transform: translateY(-3px) scale(1.06); }
a.lm-stop:active .lm-stop__lamp { transform: scale(0.95); }
.lm-stop__lock { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); color: var(--lm-muted); }
.lm-stop__go { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); padding: 2px 12px; border-radius: 9999px; background: var(--lm-coral); color: var(--lm-on-coral); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; animation: lm-bob 1.6s ease-in-out infinite; }
.lm-stop__tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px 2px 4px; border-radius: 9999px; background: var(--lm-cream); color: var(--lm-cream-ink); font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; max-width: 150px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28); }
.lm-stop__n { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--lm-cream-ink); color: var(--lm-cream); font-size: 11px; }
.lm-stop__name { overflow: hidden; text-overflow: ellipsis; }
.lm-stop.is-locked .lm-stop__tag { background: var(--lm-paper-2); color: var(--lm-muted); box-shadow: none; }
.lm-stop.is-locked .lm-stop__n { background: var(--lm-line); color: var(--lm-muted); }

/* Lantern glyph */
.lm-lg { display: block; overflow: visible; }
.lm-lg__halo { fill: rgba(255, 184, 77, 0.35); transform-box: fill-box; transform-origin: center; animation: lm-halo 700ms var(--lm-ease) both; }
.lm-lg__string { stroke: var(--lm-line-2); stroke-width: 2; stroke-linecap: round; }
.lm-lg__cap { fill: #6b3f1d; }
.lm-lg__body { fill: #ffb84d; }
.lm-lg__ribs { fill: none; stroke: #6b3f1d; stroke-opacity: 0.55; stroke-width: 1.8; stroke-linecap: round; }
.lm-lg__core { fill: #fff0c7; opacity: 0.85; }
.lm-lg--done { filter: drop-shadow(0 0 8px rgba(255, 184, 77, 0.55)); }
.lm-lg--current { filter: drop-shadow(0 0 10px rgba(255, 184, 77, 0.8)); animation: lm-bob 1.8s ease-in-out infinite; }
.lm-lg--locked .lm-lg__body { fill: var(--lm-win-off); }
.lm-lg--locked .lm-lg__ribs { stroke: var(--lm-line-2); stroke-opacity: 0.9; }
.lm-lg--locked .lm-lg__cap { fill: var(--lm-stone2); }
.lm-lg.is-fresh { animation: lm-light-up 1.1s var(--lm-ease) both; }
.lm-lg.is-fresh .lm-lg__halo { animation: lm-halo 1.4s var(--lm-ease) both; }

/* Souvenir cards and reveals */
.lm-sv { position: relative; display: flex; justify-content: center; }
.lm-sv__card { position: relative; z-index: 1; width: min(100%, 260px); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 2px solid var(--lm-cream-line); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22); text-align: center; }
.lm-sv__art { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1; max-height: 148px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background-color: var(--lm-cream-2); }
.lm-sv__meta { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lm-sv__rar { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-cream-muted); }
.lm-sv__name { font-family: var(--lm-font-display); font-weight: 800; font-size: 20px; line-height: 1.2; }
.lm-sv__note { font-size: 14px; line-height: 20px; color: var(--lm-cream-muted); }
.lm-sv__count { font-size: 13px; font-weight: 800; color: var(--lm-cream-ink); }
.lm-sv--rare .lm-sv__card { border-color: var(--lm-rare); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), 0 0 18px rgba(111, 180, 255, 0.45); }
.lm-sv--rare .lm-sv__rar { color: #2f6fd0; }
.lm-sv--legend .lm-sv__card { border-color: var(--lm-legend); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), 0 0 30px rgba(255, 194, 102, 0.75); }
.lm-sv--legend .lm-sv__rar { color: #9a5a00; }
.lm-sv.is-compact .lm-sv__card { width: 100%; padding: 8px; gap: 8px; }
.lm-sv.is-compact .lm-sv__art { max-height: 84px; }
.lm-sv.is-compact .lm-sv__name { font-size: 14px; }
.lm-sv.is-locked .lm-sv__card { background-color: var(--lm-paper-2); background-image: none; border-color: var(--lm-line); box-shadow: none; color: var(--lm-muted); }
.lm-sv.is-locked .lm-sv__art { background-color: var(--lm-line); }
.lm-sv.is-locked .lm-sv__rar, .lm-sv.is-locked .lm-sv__note { color: var(--lm-muted); }
.lm-sv-art { display: block; }
.lm-sv-art.is-locked { filter: brightness(0); opacity: 0.35; }
.lm-sv.is-reveal.lm-sv--common .lm-sv__card { animation: lm-drop-in 500ms var(--lm-ease) both; }
.lm-sv.is-reveal.lm-sv--rare .lm-sv__card { animation: lm-flip-in 600ms var(--lm-ease) both; }
.lm-sv.is-reveal.lm-sv--legend .lm-sv__card { animation: lm-drop-in 700ms var(--lm-ease) both; }
.lm-sv__shine { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: rgba(255, 255, 255, 0.6); animation: lm-shimmer 1.1s 500ms var(--lm-ease) both; pointer-events: none; }
.lm-rays { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; max-width: 120vw; }
.lm-rays path { fill: var(--lm-legend); opacity: 0.3; }
.lm-rays__spin { transform-origin: 0 0; animation: lm-spin 16s linear infinite; }

/* Chest modal and generic rewards */
.modal-dialog.lm-reveal { max-width: 420px; }
.modal-content.lm-modal--reveal { overflow: visible; }
.lm-chestmodal { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.lm-chestmodal__stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 200px; width: 100%; }
.lm-chestmodal__reward { position: relative; width: 100%; padding: 8px 0; }
.lm-reward { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; border-radius: 16px; text-align: center; max-width: 280px; margin: 0 auto; border: 2px solid var(--lm-cream-line); }
.lm-reward__ico { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lm-coral); color: var(--lm-on-coral); }
.lm-reward__ico.is-freeze { background: #8c93f0; color: #1d2150; }
.lm-reward__big { font-family: var(--lm-font-display); font-weight: 800; font-size: 28px; }
.lm-reward__link { font-weight: 700; color: #8a4b00; }

.lm-skel-wrap { display: flex; flex-direction: column; gap: 12px; }
.lm-skel-map { aspect-ratio: 360 / 520; width: 100%; max-width: 440px; margin: 0 auto; }

@media (max-width: 400px) { .lm-cityhead h1 { font-size: 32px; } }


/* src/styles/lesson.css */
/* Lesson player shell, combo meter, feedback bar, sheets, complete summary */
.lm-lp { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--lm-paper); }
.lm-lp__col { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 16px; }
.lm-lp__head { position: sticky; top: 0; z-index: 20; height: 64px; display: flex; align-items: center; background: var(--lm-paper); }
.lm-lp__headrow { display: flex; align-items: center; gap: 12px; }
.lm-lp__bar { flex: 1; }
.lm-lp__main { flex: 1; padding: 16px 0 32px; }
.lm-lp__foot { position: sticky; bottom: 0; z-index: 20; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); background: var(--lm-surface); border-top: 1px solid var(--lm-line-2); transition: background-color var(--lm-normal) var(--lm-ease), border-color var(--lm-normal) var(--lm-ease); }
.lm-lp__foot--ok { background: var(--lm-ok-soft); border-color: var(--lm-ok); }
.lm-lp__foot--bad { background: var(--lm-bad-soft); border-color: var(--lm-bad); }
.lm-lp__actions { display: flex; gap: 12px; }
.lm-btn--grow.lm-btn.btn { flex: 1; }

/* Combo meter */
.lm-combo { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 9999px; background: var(--lm-paper-2); color: var(--lm-muted); font-weight: 800; font-variant-numeric: tabular-nums; transition: background-color var(--lm-normal) var(--lm-ease), color var(--lm-normal) var(--lm-ease); }
.lm-combo.is-hot { background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-combo.is-max { background: var(--lm-coral); color: var(--lm-on-coral); box-shadow: var(--lm-glow-sm); }
.lm-combo__pop { display: inline-block; min-width: 12px; text-align: center; animation: lm-combo 300ms var(--lm-ease); }
.lm-combo__dots { display: none; gap: 3px; }
.lm-combo__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--lm-line-2); transition: background-color var(--lm-fast) var(--lm-ease); }
.lm-combo__dots i.is-on { background: currentColor; }
@media (min-width: 480px) { .lm-combo__dots { display: inline-flex; } }

/* Feedback bar */
.lm-fb { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: start; animation: lm-rise var(--lm-slow) var(--lm-ease) both; }
.lm-fb__icon { position: relative; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lm-cream); }
.lm-fb--ok .lm-fb__icon { color: var(--lm-ok-edge); animation: lm-pulse 320ms var(--lm-ease); }
.lm-fb--bad .lm-fb__icon { color: var(--lm-bad-edge); animation: lm-shake 240ms ease; }
.lm-fb__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lm-fb__title { font-size: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lm-fb__combo { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 9999px; background: var(--lm-coral); color: var(--lm-on-coral); font-family: var(--lm-font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; animation: lm-combo 300ms var(--lm-ease) both; }
.lm-fb--ok .lm-fb__title, .lm-fb--ok .lm-fb__note { color: var(--lm-ok-ink); }
.lm-fb--bad .lm-fb__title { color: var(--lm-bad-ink); }
.lm-fb__ans { display: flex; flex-direction: column; gap: 2px; color: var(--lm-bad-ink); }
.lm-fb__lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lm-fb__val { font-size: 20px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.lm-fb__roman { font-size: 14px; opacity: 0.9; }
.lm-fb__note { font-weight: 600; font-size: 14px; }
.lm-fb__why { font-size: 14px; line-height: 20px; color: var(--lm-ink-2); }
.lm-fb__speak { margin-top: 4px; }
.lm-fb .btn { grid-column: 1 / -1; }

/* Bottom sheets */
.lm-sheet__body { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lm-sheet__actions { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

/* Complete summary */
.lm-done { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--lm-paper); }
.lm-done__main { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 16px; text-align: center; }
.lm-done__sub { margin-top: 8px; }
.lm-done__stats { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm-stat { --c: var(--lm-line); --lc: var(--lm-ink); --vc: var(--lm-ink); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c); border-radius: 16px; background: var(--lm-surface); }
.lm-stat__lbl { padding: 4px; background: var(--c); color: var(--lc); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lm-stat__val { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; font-family: var(--lm-font-display); font-size: 28px; font-weight: 800; color: var(--vc); font-variant-numeric: tabular-nums; }
.lm-stat--acc { --c: var(--lm-ok); --lc: #04281a; --vc: var(--lm-ok-ink); }
.lm-stat--streak { --c: var(--lm-coral); --lc: var(--lm-on-coral); --vc: var(--lm-coral-ink); }
.lm-done__goal { width: 100%; text-align: left; }
.lm-done__foot { width: 100%; max-width: 520px; margin: 0 auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }

.lm-tally { width: 100%; list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--lm-surface); border: 1px solid var(--lm-line-2); border-radius: 16px; text-align: left; }
.lm-tally li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; font-variant-numeric: tabular-nums; }
.lm-tally li b { font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.lm-tally .is-bonus { color: var(--lm-coral-ink); }
.lm-tally .is-total { padding-top: 8px; border-top: 1px solid var(--lm-line); font-size: 17px; color: var(--lm-gold-ink); }
.lm-tally .is-total .lm-icon { color: var(--lm-gold); }

@media (min-width: 768px) {
  .lm-fb { grid-template-columns: auto 1fr auto; align-items: center; }
  .lm-fb .btn { grid-column: auto; width: auto; min-width: 160px; }
  .lm-fb__icon { align-self: start; }
}


/* src/styles/exercises.css */
/* Exercise types: cream paper cards on the dusk canvas, amber for selection, tap-to-hear on every foreign line */
.lm-ex__title { font-size: 24px; margin-bottom: 16px; }
.lm-ex__hint { color: var(--lm-muted); margin: -8px 0 16px; }
.lm-ex__row { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.lm-ex__bubble { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; min-height: 72px; font-size: 18px; min-width: 0; }
.lm-ex__word { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.lm-ex__quote { font-family: var(--lm-font-display); font-weight: 700; font-size: 24px; line-height: 1.25; }
.lm-ex__listen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Paper speech bubble (also used by onboarding) */
.lm-bubble { background-color: var(--lm-cream); background-image: var(--lm-grain); color: var(--lm-cream-ink); border: 1px solid var(--lm-cream-line); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); }
.lm-bubble::before { background: var(--lm-cream); border-left: 1px solid var(--lm-cream-line); border-bottom: 1px solid var(--lm-cream-line); }

/* Audio: amber ring buttons, the turtle plays the slow clip */
.lm-audio-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lm-speak { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lm-audio {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid var(--lm-coral); background: var(--lm-coral-soft); color: var(--lm-coral-ink);
  cursor: pointer;
  transition: transform var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease);
}
.lm-audio--lg { width: 72px; height: 64px; border-radius: 16px; }
.lm-audio--sm { min-width: 48px; height: 48px; border-radius: 12px; padding: 0 12px; }
.lm-audio--slow { padding: 0 14px; border-style: dashed; }
.lm-audio:hover { background: var(--lm-coral); color: var(--lm-on-coral); box-shadow: var(--lm-glow-sm); }
.lm-audio:active { transform: scale(0.94); }
.lm-audio.is-playing { animation: lm-sound 600ms ease-in-out infinite; background: var(--lm-coral); color: var(--lm-on-coral); }
.lm-audio__label { font-weight: 700; font-size: 14px; }
.lm-audio__note { font-size: 13px; line-height: 18px; color: var(--lm-muted); max-width: 220px; }
.lm-ex__bubble .lm-audio, .lm-bubble .lm-audio { background: var(--lm-cream-2); color: var(--lm-cream-ink); border-color: var(--lm-coral-edge); }
.lm-ex__bubble .lm-audio:hover, .lm-bubble .lm-audio:hover, .lm-ex__bubble .lm-audio.is-playing { background: var(--lm-coral); color: var(--lm-on-coral); }
.lm-link { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--lm-coral-ink); font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lm-link:hover { color: var(--lm-ink); }
.lm-bubble .lm-link { color: #8a4b00; }

/* Options (multiple choice, listening, match, scene replies) */
.lm-opts { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lm-opt {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; text-align: left;
  border: 1px solid var(--lm-cream-line); border-radius: 14px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  font-weight: 600; font-size: 17px; cursor: pointer;
  transition: transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) var(--lm-ease), opacity var(--lm-fast) var(--lm-ease);
}
.lm-opt:hover:not(:disabled) { border-color: var(--lm-coral-edge); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28), 0 0 14px rgba(255, 184, 77, 0.35); transform: translateY(-2px); }
.lm-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28); }
.lm-opt.is-sel { border: 2px solid var(--lm-coral); background-color: var(--lm-cream-sel); box-shadow: 0 3px 0 var(--lm-coral-edge), 0 0 16px rgba(255, 184, 77, 0.45); padding: 11px 15px; }
.lm-opt.is-ok { border: 2px solid var(--lm-ok); background-color: var(--lm-cream-ok); box-shadow: 0 3px 0 var(--lm-ok-edge); animation: lm-pulse 320ms var(--lm-ease); padding: 11px 15px; }
.lm-opt.is-bad { border: 2px solid var(--lm-bad); background-color: var(--lm-cream-bad); box-shadow: 0 3px 0 var(--lm-bad-edge); animation: lm-shake 240ms ease; padding: 11px 15px; }
.lm-opt:disabled { cursor: default; color: var(--lm-cream-ink); }
.lm-opt:disabled:not(.is-ok):not(.is-bad):not(.is-sel) { opacity: 0.6; }
.lm-opt__n { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--lm-cream-line); border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--lm-cream-muted); background: var(--lm-cream-2); }
.lm-opt.is-sel .lm-opt__n { border-color: var(--lm-coral-edge); color: #8a4b00; background: var(--lm-coral); }
.lm-opt.is-ok .lm-opt__n { border-color: var(--lm-ok); color: var(--lm-ok-edge); }
.lm-opt.is-bad .lm-opt__n { border-color: var(--lm-bad); color: var(--lm-bad-edge); }
.lm-opt__label { min-width: 0; flex: 1; }
@media (hover: none) { .lm-opt__n { display: none; } }
@media (min-width: 576px) { .lm-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Match pairs */
.lm-match { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm-match__col { display: flex; flex-direction: column; gap: 12px; }
.lm-pair { justify-content: center; text-align: center; padding: 8px 12px; }
.lm-pair .lm-tt { align-items: center; }
.lm-pair.is-done, .lm-pair.is-done:disabled { opacity: 0.4; border-color: var(--lm-line); background-color: var(--lm-paper-2); background-image: none; color: var(--lm-muted); box-shadow: none; transform: none; }

/* Build a sentence */
.lm-line { position: relative; min-height: 116px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 4px 0; margin-bottom: 16px; }
.lm-line::before, .lm-line::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--lm-line-2); z-index: 0; }
.lm-line::before { top: 56px; }
.lm-line::after { top: 112px; }
.lm-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 8px; }
.lm-chipword {
  position: relative; z-index: 1; min-height: 48px; padding: 8px 16px; border: 1px solid var(--lm-cream-line); border-radius: 12px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); font-weight: 700; font-size: 17px; line-height: 1.3; cursor: pointer;
  transition: transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease), background-color var(--lm-fast) var(--lm-ease);
}
.lm-chipword[lang='ja'], .lm-chipword[lang='ko'] { font-size: 20px; }
.lm-chipword:hover:not(:disabled) { border-color: var(--lm-coral-edge); transform: translateY(-2px); }
.lm-chipword:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
.lm-chipword:disabled { color: var(--lm-cream-ink); cursor: default; }
.lm-chipword--placed { animation: lm-pop 160ms var(--lm-ease); }
.lm-chipword.is-ghost, .lm-chipword.is-ghost:disabled { background-color: var(--lm-paper-2); background-image: none; border-color: transparent; color: transparent; box-shadow: none; transform: none; pointer-events: none; }
.lm-line.is-ok .lm-chipword { border-color: var(--lm-ok); background-color: var(--lm-cream-ok); box-shadow: 0 3px 0 var(--lm-ok-edge); }
.lm-line.is-bad .lm-chipword { border-color: var(--lm-bad); background-color: var(--lm-cream-bad); box-shadow: 0 3px 0 var(--lm-bad-edge); }

/* Type the translation */
.lm-type__keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lm-key {
  min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--lm-cream-line); border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28);
  font: 700 18px var(--lm-font-body); cursor: pointer;
  transition: transform var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease);
}
.lm-key:hover:not(:disabled) { border-color: var(--lm-coral-edge); transform: translateY(-1px); }
.lm-key:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.lm-key:disabled { opacity: 0.5; cursor: default; }


/* src/styles/scene.css */
/* Scene exercise: illustrated stage, speech bubbles with tappable words, reply choices */
.lm-scene__place { margin: -8px 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lm-coral-ink); }
.lm-stage { display: block; width: 100%; height: auto; aspect-ratio: 360 / 170; border-radius: 16px; border: 1px solid var(--lm-line-2); background: var(--lm-cream-2); }
.lm-person.is-speaking .lm-person__body { animation: lm-bob 500ms ease-in-out infinite; }
.lm-scene__lines { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lm-sline { display: flex; animation: lm-rise var(--lm-slow) var(--lm-ease) both; }
.lm-sline--a { justify-content: flex-start; padding-right: 16px; }
.lm-sline--b { justify-content: flex-end; padding-left: 16px; }
.lm-sbubble { position: relative; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-radius: 16px; background-color: var(--lm-cream); background-image: var(--lm-grain); color: var(--lm-cream-ink); border: 1px solid var(--lm-cream-line); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
.lm-sline--a .lm-sbubble { border-top-left-radius: 4px; }
.lm-sline--b .lm-sbubble { border-top-right-radius: 4px; background-color: var(--lm-cream-sel); align-items: flex-end; text-align: right; }
.lm-sbubble__text { display: flex; flex-wrap: wrap; gap: 2px 4px; font-family: var(--lm-font-display); font-weight: 700; font-size: 22px; line-height: 1.35; }
.lm-sbubble__text[lang='ja'], .lm-sbubble__text[lang='ko'] { font-size: 22px; }
.lm-sline--b .lm-sbubble__text { justify-content: flex-end; }
.lm-word { min-height: 36px; padding: 0 6px; border: 0; border-bottom: 2px dotted var(--lm-coral-edge); border-radius: 6px 6px 0 0; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background-color var(--lm-fast) var(--lm-ease), transform var(--lm-fast) var(--lm-ease); }
.lm-word:hover { background: var(--lm-coral); color: var(--lm-on-coral); }
.lm-word:active { transform: translateY(2px); }
.lm-sbubble__roman { font-size: 14px; line-height: 20px; color: var(--lm-cream-muted); font-weight: 500; }
.lm-sbubble__en { font-size: 14px; line-height: 20px; color: var(--lm-cream-muted); font-style: normal; }
.lm-sbubble .lm-audio { background: var(--lm-cream-2); color: var(--lm-cream-ink); border-color: var(--lm-coral-edge); }
.lm-sbubble .lm-audio:hover, .lm-sbubble .lm-audio.is-playing { background: var(--lm-coral); color: var(--lm-on-coral); }
.lm-scene__ask { font-weight: 700; margin: 8px 0 12px; font-size: 17px; }
.lm-scene .lm-opts { grid-template-columns: 1fr; }
.lm-replyrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lm-reply { flex: 1 1 220px; }


/* src/styles/ceremony.css */
/* Lesson-complete ceremony: stamp slam, souvenir reveal, level-up and streak overlays */
.lm-done--cer { align-items: center; justify-content: center; }
.lm-cer { width: 100%; max-width: 420px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.lm-cer__title { font-size: 32px; }
.lm-cer__btn { margin-top: 8px; }
.lm-cer__reveal { position: relative; width: 100%; display: flex; justify-content: center; padding: 16px 0; min-height: 320px; align-items: center; }

/* Passport page with the stamp slam */
.lm-pp { position: relative; width: 100%; max-width: 360px; padding: 16px; border-radius: 16px; border: 1px solid var(--lm-cream-line); box-shadow: 0 8px 0 rgba(0, 0, 0, 0.25); text-align: left; overflow: hidden; }
.lm-pp.is-jolt { animation: lm-page-jolt 320ms var(--lm-ease); }
.lm-pp__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--lm-cream-line); }
.lm-pp__t { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lm-cream-muted); }
.lm-pp__c { font-family: var(--lm-font-display); font-weight: 800; font-size: 22px; }
.lm-pp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lm-pp__slot { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--lm-cream-line); border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--lm-cream-muted); overflow: hidden; }
.lm-pp__slot.has { border-style: solid; border-color: transparent; }
.lm-pp__big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lm-pp__ink { position: absolute; width: 196px; height: 196px; border-radius: 50%; opacity: 0; animation: lm-ink-spread 500ms 450ms var(--lm-ease) both; }
.lm-pp__slam { position: relative; display: block; opacity: 0; animation: lm-slam 620ms 100ms var(--lm-ease) both; mix-blend-mode: multiply; }
.lm-stamp { display: block; overflow: visible; }
.lm-stamp.is-ghost { opacity: 0.8; }

/* Full-screen overlays (level up, streak milestone) */
.lm-over { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; overflow: hidden; background: var(--lm-paper); animation: lm-fade var(--lm-slow) var(--lm-ease) both; }
.lm-over__main { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; text-align: center; max-width: 520px; width: 100%; margin: 0 auto; }
.lm-over__foot { width: 100%; max-width: 520px; margin: 0 auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); position: relative; z-index: 6; }
.lm-over h1 { font-size: 44px; }
.lm-over__badge { position: relative; display: flex; justify-content: center; padding: 24px; border-radius: 50%; box-shadow: 0 0 0 20px rgba(255, 184, 77, 0.1), 0 0 0 48px rgba(255, 184, 77, 0.06); margin-bottom: 24px; animation: lm-pop 500ms var(--lm-ease) both; }
.lm-over__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--lm-font-display); font-weight: 800; font-size: 28px; color: var(--lm-coral-ink); }
.lm-over__flame { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 168px; height: 168px; padding-bottom: 10px; border-radius: 50%; box-shadow: 0 0 0 20px rgba(255, 184, 77, 0.1), 0 0 0 48px rgba(255, 184, 77, 0.06); margin-bottom: 24px; animation: lm-pop 500ms var(--lm-ease) both; }
.lm-over__days { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-family: var(--lm-font-display); font-weight: 800; font-size: 56px; line-height: 1; color: #2a1a00; }
.lm-over__gift { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 9999px; background: var(--lm-coral); color: var(--lm-on-coral); font-weight: 800; box-shadow: var(--lm-glow-sm); }


/* src/styles/hub.css */
/* Practice hub, flashcards, league, shared page bits */
.lm-hub { display: flex; flex-direction: column; gap: 16px; }
.lm-hub__title { font-size: 32px; }
.lm-hub__h2 { font-size: 20px; margin-bottom: 12px; }
.lm-hub__bar { display: flex; align-items: center; gap: 8px; }

.lm-modes { display: flex; flex-direction: column; gap: 12px; }
a.lm-card--link.lm-mode { display: flex; align-items: center; gap: 16px; }
.lm-mode__ico { width: 48px; height: 48px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.lm-mode__ico--coral { background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-mode__ico--gold { background: var(--lm-gold-soft); color: var(--lm-gold-ink); }
.lm-mode__ico--teal { background: var(--lm-teal-soft); color: var(--lm-teal); }
.lm-mode__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lm-mode__t { font-weight: 700; font-size: 17px; }
.lm-mode__d { font-size: 14px; color: var(--lm-muted); }

.lm-wordlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lm-wordlist__item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 2px solid var(--lm-line); }
.lm-wordlist__item:first-child { border-top: 0; padding-top: 0; }
.lm-wordlist__en { color: var(--lm-muted); font-size: 15px; text-align: right; }

.lm-empty { display: flex; align-items: center; gap: 16px; }
.lm-empty--col { flex-direction: column; text-align: center; }
.lm-tip { display: flex; align-items: center; gap: 16px; }

/* Segmented chips (units, daily goal) */
.lm-seg { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.lm-seg::-webkit-scrollbar { display: none; }
.lm-seg__b {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--lm-line);
  border-radius: 9999px;
  background: var(--lm-surface);
  color: var(--lm-ink);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--lm-fast) var(--lm-ease), border-color var(--lm-fast) var(--lm-ease), transform var(--lm-fast) var(--lm-ease);
}
.lm-seg__b:hover { border-color: var(--lm-line-2); }
.lm-seg__b:active { transform: scale(0.97); }
.lm-seg__b.is-on { background: var(--lm-teal); border-color: var(--lm-teal); color: #ffffff; }
html[data-theme='dark'] .lm-seg__b.is-on { color: #0f211c; }
html[data-theme='dark'] .lm-btn--teal.lm-btn.btn { --b-fg: #0f211c; }

/* Flashcards */
.lm-fc__meta { display: flex; align-items: center; gap: 12px; }
.lm-fc__bar { flex: 1; }
.lm-fc__count { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lm-fc__audio { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lm-fc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

.lm-flip { display: block; width: 100%; height: 280px; padding: 0; border: 0; background: none; border-radius: 24px; perspective: 1000px; cursor: pointer; }
.lm-flip__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--lm-slow) var(--lm-ease); }
.lm-flip.is-flipped .lm-flip__inner { transform: rotateY(180deg); }
.lm-flip__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--lm-surface);
  color: var(--lm-ink);
  border: 2px solid var(--lm-line);
  border-radius: 24px;
  box-shadow: 0 4px 0 var(--lm-line);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.lm-flip__back { transform: rotateY(180deg); background: var(--lm-teal-soft); border-color: var(--lm-teal); box-shadow: 0 4px 0 var(--lm-teal-edge); }
.lm-flip:hover .lm-flip__front { border-color: var(--lm-line-2); }
.lm-flip:focus-visible { outline: 3px solid var(--lm-teal); outline-offset: 4px; }
.lm-flip__hint { font-size: 13px; letter-spacing: 0.04em; color: var(--lm-muted); }
.lm-flip__en { font-family: var(--lm-font-display); font-weight: 800; font-size: 32px; line-height: 1.15; }
.lm-flip__roman { font-size: 16px; }

/* League */
.lm-league__head { display: flex; align-items: center; gap: 16px; }
.lm-league__badge { flex: none; }
.lm-league__status { padding: 12px 16px; border-radius: 12px; background: var(--lm-teal-soft); font-weight: 600; font-size: 15px; }
.lm-board.lm-card { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.lm-zone { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lm-zone--up { color: var(--lm-ok-ink); }
.lm-zone--down { color: var(--lm-bad-ink); margin-top: 8px; }
.lm-zone-rule { height: 2px; margin: 4px 12px; background: var(--lm-line); }
.lm-lrow { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 2px solid transparent; border-radius: 12px; }
.lm-lrow.is-you { background: var(--lm-coral-soft); border-color: var(--lm-coral); }
.lm-lrow__rank { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lm-muted); }
.lm-lrow__rank.is-top1 { background: var(--lm-gold); color: #3a2700; }
.lm-lrow__rank.is-top2 { background: #d9dfdc; color: #2b3a35; }
.lm-lrow__rank.is-top3 { background: #e2b48a; color: #4a2c10; }
.lm-lrow__av { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 14px; }
.lm-lrow__av--0 { background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-lrow__av--1 { background: var(--lm-teal-soft); color: var(--lm-teal); }
.lm-lrow__av--2 { background: var(--lm-gold-soft); color: var(--lm-gold-ink); }
.lm-lrow__av--3 { background: var(--lm-sage); color: var(--lm-ink); }
.lm-lrow__av--4 { background: var(--lm-paper-2); color: var(--lm-ink-2); }
.lm-lrow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lm-lrow__xp { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lm-muted); }


/* src/styles/profile.css */
/* Profile: stat tiles, heatmap, achievements, settings */
.lm-prof__head { display: flex; align-items: center; gap: 16px; }
.lm-prof__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lm-prof__row .lm-hub__h2 { margin-bottom: 0; }

.lm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm-tilestat { display: flex; flex-direction: column; gap: 2px; padding: 16px; background: var(--lm-surface); border: 2px solid var(--lm-line); border-radius: 16px; box-shadow: 0 4px 0 var(--lm-line); }
.lm-tilestat__ico { width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.lm-tilestat--coral .lm-tilestat__ico { background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-tilestat--gold .lm-tilestat__ico { background: var(--lm-gold-soft); color: var(--lm-gold-ink); }
.lm-tilestat--teal .lm-tilestat__ico { background: var(--lm-teal-soft); color: var(--lm-teal); }
.lm-tilestat--ok .lm-tilestat__ico { background: var(--lm-ok-soft); color: var(--lm-ok-ink); }
.lm-tilestat__v { font-family: var(--lm-font-display); font-weight: 800; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lm-tilestat__l { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--lm-muted); }

.lm-heatmap { display: block; width: 100%; height: auto; }
.lm-heatmap__lbl { font-size: 11px; font-weight: 600; fill: var(--lm-muted); }
.lm-heat { transition: opacity var(--lm-fast) var(--lm-ease); }
.lm-heat:hover { opacity: 0.75; }
.lm-heat--0 { fill: var(--lm-heat-0); }
.lm-heat--1 { fill: var(--lm-heat-1); }
.lm-heat--2 { fill: var(--lm-heat-2); }
.lm-heat--3 { fill: var(--lm-heat-3); }
.lm-heat--4 { fill: var(--lm-heat-4); }
.lm-heat.is-today { stroke: var(--lm-coral); stroke-width: 2; }
.lm-heatlegend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 12px; font-size: 12px; color: var(--lm-muted); }
.lm-heatlegend__sw { display: block; width: 14px; height: 14px; border-radius: 4px; }
.lm-heatlegend__sw--0 { background: var(--lm-heat-0); }
.lm-heatlegend__sw--1 { background: var(--lm-heat-1); }
.lm-heatlegend__sw--2 { background: var(--lm-heat-2); }
.lm-heatlegend__sw--3 { background: var(--lm-heat-3); }
.lm-heatlegend__sw--4 { background: var(--lm-heat-4); }

.lm-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; text-align: center; background: var(--lm-paper); border: 2px solid var(--lm-line); border-radius: 16px; }
.lm-badge.is-done { background: var(--lm-gold-soft); border-color: var(--lm-gold); }
.lm-badge__art { position: relative; width: 68px; height: 68px; margin-bottom: 8px; }
.lm-badge__art svg { position: absolute; inset: 0; }
.lm-badge__ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lm-muted); }
.lm-badge__bg { stroke: var(--lm-line); }
.lm-badge__ring { stroke: var(--lm-teal); transition: stroke-dashoffset var(--lm-slow) var(--lm-ease); }
.lm-badge.is-done .lm-badge__bg { stroke: transparent; }
.lm-badge.is-done .lm-badge__ring { stroke: var(--lm-gold); }
.lm-badge.is-done .lm-badge__ico { color: var(--lm-gold-ink); }
.lm-badge__t { font-weight: 700; }
.lm-badge__d { font-size: 13px; line-height: 18px; color: var(--lm-muted); }
.lm-badge__p { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--lm-teal); font-variant-numeric: tabular-nums; }
.lm-badge.is-done .lm-badge__p { color: var(--lm-gold-ink); }

.lm-settings { display: flex; flex-direction: column; gap: 16px; }
.lm-settings .lm-hub__h2 { margin-bottom: 0; }
.lm-set { display: flex; flex-direction: column; gap: 8px; }
.lm-set__lbl { font-weight: 700; }
.lm-set__note { font-size: 14px; }

@media (min-width: 576px) {
  .lm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lm-badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* src/styles/rewards.css */
/* Suitcase, passport pages, wardrobe, medals, and theme-aware fixes for older screens */
.lm-hdr { display: flex; align-items: center; gap: 16px; }
.lm-hdr__ico { width: 56px; height: 56px; flex: none; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--lm-coral-soft); color: var(--lm-coral-ink); }
.lm-sv__sum { font-size: 14px; }
.lm-rarh { display: flex; align-items: center; gap: 8px; }
.lm-rarh::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--lm-common); }
.lm-rarh--rare::before { background: var(--lm-rare); }
.lm-rarh--legend::before { background: var(--lm-legend); box-shadow: 0 0 8px var(--lm-legend); }
.lm-svgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 576px) { .lm-svgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Passport pages */
.lm-ppage { padding: 16px; border-radius: 16px; border: 1px solid var(--lm-cream-line); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; gap: 12px; }
.lm-ppage__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.lm-ppage__city { font-size: 28px; color: var(--lm-cream-ink); }
.lm-ppage__pct { font-family: var(--lm-font-display); font-weight: 800; font-size: 28px; color: var(--lm-cream-ink); font-variant-numeric: tabular-nums; }
.lm-ppage .progress.lm-progress { background: var(--lm-cream-line); }
.lm-ppage__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 480px) { .lm-ppage__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lm-ppage__slot { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--lm-cream-line); border-radius: 12px; overflow: hidden; padding: 4px; }
.lm-ppage__slot.has { border-color: transparent; }
.lm-ppage__slot .lm-stamp { width: 100%; height: auto; mix-blend-mode: multiply; transform: rotate(-6deg); }
.lm-ppage__slot:nth-child(even) .lm-stamp { transform: rotate(5deg); }
.lm-ppage__empty { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 11px; line-height: 14px; font-weight: 600; color: var(--lm-cream-muted); }
.lm-ppage__empty b { font-size: 16px; color: var(--lm-cream-muted); }

/* Wardrobe */
.lm-wprev { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; border: 1px solid var(--lm-cream-line); background-color: var(--lm-cream); }
.lm-wprev__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.lm-wlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lm-wi { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--lm-surface); border: 1px solid var(--lm-line); border-radius: 14px; transition: border-color var(--lm-fast) var(--lm-ease); }
.lm-wi.is-worn { border-color: var(--lm-coral); box-shadow: var(--lm-glow-sm); }
.lm-wi__art { width: 72px; height: 80px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--lm-paper-2); border-radius: 12px; overflow: hidden; }
.lm-wi__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lm-wi__name { font-weight: 700; }
.lm-wi__cost { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--lm-muted); }
.lm-wi__cost .lm-icon { color: var(--lm-gold); }

/* Medals */
.lm-medal { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; text-align: center; background: var(--lm-paper); border: 1px solid var(--lm-line); border-radius: 16px; --tier: #c98a52; --tier-ink: #3a2412; }
.lm-medal--silver { --tier: #c8cde8; --tier-ink: #1d2150; }
.lm-medal--gold { --tier: #ffc266; --tier-ink: #3a2412; }
.lm-medal.is-done { background: var(--lm-surface); border-color: var(--tier); }
.lm-medal__art { position: relative; width: 76px; height: 92px; margin-bottom: 4px; display: block; }
.lm-medal__ribbon { position: absolute; left: 50%; bottom: 0; width: 36px; height: 30px; transform: translateX(-50%); background: var(--lm-line-2); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.lm-medal.is-done .lm-medal__ribbon { background: var(--lm-bad); }
.lm-medal__ring { position: absolute; left: 0; top: 0; }
.lm-medal__bg { stroke: var(--lm-line); }
.lm-medal__prog { stroke: var(--lm-coral); transition: stroke-dashoffset var(--lm-slow) var(--lm-ease); }
.lm-medal.is-done .lm-medal__bg { stroke: transparent; }
.lm-medal.is-done .lm-medal__prog { stroke: transparent; }
.lm-medal__disc { position: absolute; left: 9px; top: 9px; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lm-paper-2); color: var(--lm-muted); border: 1px solid var(--lm-line); }
.lm-medal.is-done .lm-medal__disc { background: var(--tier); color: var(--tier-ink); border: 3px solid rgba(255, 255, 255, 0.45); box-shadow: 0 0 14px var(--tier); }
.lm-medal.is-new .lm-medal__disc { animation: lm-slam-pop 900ms var(--lm-ease) both; }
.lm-medal.is-new .lm-medal__art::after { content: ''; position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--tier); animation: lm-ring-out 1.1s var(--lm-ease) 2 both; }
@keyframes lm-slam-pop { 0% { transform: scale(2.2) rotate(-40deg); opacity: 0; } 55% { transform: scale(0.92) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes lm-ring-out { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
.lm-medal__t { font-weight: 700; }
.lm-medal__d { font-size: 13px; line-height: 18px; color: var(--lm-muted); }
.lm-medal__p { margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--lm-coral-ink); font-variant-numeric: tabular-nums; }
.lm-medal.is-done .lm-medal__p { color: var(--lm-gold-ink); }

/* Fixes for screens built on the previous theme tokens */
.lm-seg__b { border-width: 1px; border-color: var(--lm-line-2); }
.lm-seg__b.is-on { background: var(--lm-coral); border-color: var(--lm-coral-edge); color: var(--lm-on-coral); }
.lm-course__check { background: var(--lm-coral); color: var(--lm-on-coral); }
.lm-course, .lm-goalopt { border-width: 1px; box-shadow: none; }
.lm-course.is-selected, .lm-goalopt.is-selected { border-width: 2px; box-shadow: var(--lm-glow-sm); }
.lm-course__name { color: var(--lm-ink); }
.lm-course__top .lm-tile { background: var(--lm-coral-soft); }
.lm-course__roman { font-size: 14px; line-height: 20px; color: var(--lm-muted); font-weight: 600; }
.lm-fb__roman { font-size: 14px; font-weight: 600; opacity: 1; }
.lm-sbubble__roman, .lm-sbubble__en { font-size: 14px; font-weight: 600; color: var(--lm-cream-muted); }
.lm-course__city { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-coral-ink); }
.lm-tilestat { border-width: 1px; box-shadow: none; }
.lm-card { box-shadow: none; }
.lm-set__row { display: flex; flex-wrap: wrap; gap: 12px; }
.lm-flip__face { border: 1px solid var(--lm-cream-line); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.lm-flip__back { background-color: var(--lm-cream-sel); border-color: var(--lm-coral-edge); box-shadow: 0 4px 0 var(--lm-coral-edge); }
.lm-flip__hint { color: var(--lm-cream-muted); }
.lm-progress--teal .progress-bar { background: var(--lm-coral); }
.lm-lrow.is-you { background: var(--lm-coral-soft); border-color: var(--lm-coral); }
.lm-lrow__rank.is-top1 { color: #3a2700; }
.lm-lrow__rank.is-top2 { color: #1d2150; }
.lm-lrow__rank.is-top3 { color: #3a1f08; }
.lm-league__status { background: var(--lm-coral-soft); }
.lm-prof__head { align-items: center; }


/* src/styles/lamps.css */
/* City lamps: shared ink linework, per-city colours and lighting animations */
@keyframes lm-ignite { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1.7); opacity: 1; } 60% { transform: scale(0.8); } 100% { transform: scale(1); opacity: 1; } }
@keyframes lm-sheen { 0%, 100% { transform: translateX(-5px); opacity: 0; } 50% { transform: translateX(5px); opacity: 0.85; } }
@keyframes lm-paper-glow { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0.55; } }

.lm-lamp .lm-lamp__col, .lm-lamp .lm-lamp__iron, .lm-lamp .lm-lamp__brass { stroke: #2a1a3a; stroke-width: 1.6; stroke-linejoin: round; }
.lm-lamp__iron { fill: #2b2a3a; }
.lm-lamp__brass { fill: #c98f12; }
.lm-lamp__ring { fill: none; stroke: #2b2a3a; stroke-width: 2; }
.lm-lamp__bars { fill: none; stroke: #2b2a3a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lm-lamp__post { fill: none; stroke: #2b2a3a; stroke-width: 3; stroke-linecap: round; }
.lm-lamp__string { fill: none; stroke: var(--lm-cream); stroke-width: 1.6; stroke-linecap: round; opacity: 0.85; }
.lm-lamp__ribs { fill: none; stroke: #2a1a3a; stroke-width: 1.4; stroke-linecap: round; opacity: 0.55; }
.lm-lamp__tassel { fill: #e0523f; stroke: #2a1a3a; stroke-width: 1; }
.lm-lamp__red { fill: #e0523f; }
.lm-lamp__r { fill: #d9433f; }
.lm-lamp__y { fill: #f2c036; }
.lm-lamp__b { fill: #2f55a4; }
.lm-lamp__glass { fill: #ffcf70; }
.lm-lamp__kanji { fill: #f5e9cf; font-family: var(--lm-font-ja); font-weight: 700; font-size: 17px; }
.lm-lamp__glow { fill: rgba(255, 224, 150, 0.5); animation: lm-paper-glow 700ms var(--lm-ease) both; }
.lm-lamp__flame { fill: #fff0c7; stroke: #ff9d4d; stroke-width: 1; transform-box: fill-box; transform-origin: 50% 100%; animation: lm-flicker 1.2s ease-in-out infinite; }
.lm-lamp__sheen { fill: rgba(255, 255, 255, 0.7); animation: lm-sheen 2.6s ease-in-out infinite; }

/* Locked or unlit: everything coloured goes dark paper, text and flames disappear */
.lm-lg--locked .lm-lamp__col { fill: var(--lm-win-off); }
.lm-lg--locked .lm-lamp__kanji { fill: var(--lm-muted); }
.lm-lg--locked .lm-lamp__tassel { fill: var(--lm-win-off); }
.lm-lg--locked .lm-lamp__iron, .lm-lg--locked .lm-lamp__brass { fill: var(--lm-stone2); }

/* Lighting animations per city: paper glow, silk shimmer, flame flicker, gas ignite */
.lm-lamp--ja.is-fresh .lm-lamp__glow { animation: lm-paper-glow 1.4s var(--lm-ease) both; }
.lm-lamp--ko.is-fresh .lm-lamp__sheen { animation: lm-sheen 900ms ease-in-out 3; }
.lm-lamp--pl.is-fresh .lm-lamp__flame { animation: lm-ignite 900ms var(--lm-ease) both, lm-flicker 1.2s 900ms ease-in-out infinite; }
.lm-lamp--es.is-fresh .lm-lamp__flame { animation: lm-flicker 300ms ease-in-out 6, lm-flicker 1.2s 1.8s ease-in-out infinite; }

.lm-lamphead { display: inline-flex; align-items: flex-end; gap: 4px; }
.lm-cer__duo { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.lm-chestcard__art { position: relative; flex: none; display: block; }
.lm-chestcard__lamp { position: absolute; right: -14px; top: -16px; }
.lm-chestmodal__stage { gap: 8px; }


/* src/styles/curio.css */
/* Culture curiosities, journal entries, unlock tags and bonus stops */
.lm-rewardstack { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.lm-curio { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--lm-cream-line); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); text-align: left; animation: lm-rise var(--lm-slow) var(--lm-ease) 250ms both; }
.lm-curio__head { display: flex; align-items: center; gap: 12px; }
.lm-curio__vig { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--lm-cream-2); overflow: hidden; }
.lm-curio__title { display: flex; flex-direction: column; min-width: 0; }
.lm-curio__eyebrow { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8a4b00; }
.lm-curio__city { font-family: var(--lm-font-display); font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--lm-cream-ink); }
.lm-curio__fact { font-size: 16px; line-height: 24px; color: var(--lm-cream-ink); }
.lm-curio__phrase { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; border-top: 2px dashed var(--lm-cream-line); }
.lm-curio__label { font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lm-cream-muted); }
.lm-curio__en { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--lm-cream-muted); }
.lm-curio .lm-audio { background: var(--lm-cream-2); color: var(--lm-cream-ink); border-color: var(--lm-coral-edge); }
.lm-curio .lm-audio:hover, .lm-curio .lm-audio.is-playing { background: var(--lm-coral); color: var(--lm-on-coral); }
.lm-journal { display: flex; flex-direction: column; gap: 12px; }
.lm-journal .lm-curio { max-width: none; }
.lm-cer .lm-curio, .lm-chestmodal .lm-curio { margin-top: 4px; }

/* Unlock tag */
.lm-unlock { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 12px; border-radius: 9999px; border: 1px solid var(--lm-coral); background: var(--lm-surface); color: var(--lm-ink); text-decoration: none; box-shadow: var(--lm-glow-sm); transition: transform var(--lm-fast) var(--lm-ease), box-shadow var(--lm-fast) var(--lm-ease); }
.lm-unlock:hover { color: var(--lm-ink); transform: translateY(-2px); box-shadow: var(--lm-glow); }
.lm-unlock:active { transform: scale(0.97); }
.lm-unlock__lamp { display: flex; flex: none; }
.lm-unlock__txt { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.lm-unlock__t { font-family: var(--lm-font-display); font-weight: 800; font-size: 16px; color: var(--lm-coral-ink); }
.lm-unlock__d { font-size: 14px; font-weight: 600; }

/* Bonus stops on the map */
.lm-stop--bonus { z-index: 2; }
.lm-stop__tag--bonus { white-space: normal; max-width: 132px; text-align: left; padding: 4px 10px; line-height: 15px; border: 1px dashed var(--lm-coral-edge); }
.lm-stop--bonus.is-locked .lm-stop__tag { border-color: var(--lm-line-2); }
.lm-stop__go--bonus { top: -32px; background: var(--lm-cream); color: var(--lm-cream-ink); border: 1px solid var(--lm-coral-edge); }
.lm-stop__badge { position: absolute; right: -4px; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lm-coral); color: var(--lm-on-coral); font-size: 12px; font-weight: 800; border: 1px solid var(--lm-coral-edge); }
.lm-stop__badge.is-mystery { background: var(--lm-paper-2); color: var(--lm-ink); border-color: var(--lm-line-2); }
.lm-stop--bonus.is-current .lm-lg { filter: drop-shadow(0 0 12px rgba(255, 220, 140, 0.95)); }

/* Passport bonus row and counter */
.lm-pass__bonus { font-weight: 700; }
.lm-ppage__bonus { list-style: none; margin: 0; padding: 12px 0 0; border-top: 2px dashed var(--lm-cream-line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lm-ppage__slot--bonus { aspect-ratio: auto; min-height: 104px; }