/* Mobile Landing Page — Redesign C (Typography-led)
   Visual language bridges landing -> focus mode.
   All rules scoped to body.mobile-home or the .mobile-home-container. */

/* Typed custom property for scroll-driven station entrance */
@property --station-progress {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

/* ========================================
   0. Seasonal consciousness (季節感 — kisetsukan)
   ======================================== */

:root {
    --seasonal-tint: rgba(201, 169, 110, 0.04); /* default/fallback */
}

/* 春 (haru) — Spring: faint cherry warmth */
.season-spring { --seasonal-tint: rgba(255, 183, 197, 0.035); }
/* 夏 (natsu) — Summer: cool morning air */
.season-summer { --seasonal-tint: rgba(61, 90, 128, 0.025); }
/* 秋 (aki) — Autumn: amber late light */
.season-autumn { --seasonal-tint: rgba(201, 169, 110, 0.045); }
/* 冬 (fuyu) — Winter: blue-gray stillness */
.season-winter { --seasonal-tint: rgba(140, 150, 165, 0.03); }

/* ========================================
   0b. 和紙 (washi) — Paper texture
   ======================================== */

body.mobile-home::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* ========================================
   1. Visibility: hide desktop chrome when mobile-home is active
   ======================================== */

body.mobile-home .grid-container,
body.mobile-home .flashcard-container,
body.mobile-home .bottom-action-bar,
body.mobile-home .premium-progress-wrapper,
body.mobile-home .hero-top-bar,
body.mobile-home .ink-wash-nav,
body.mobile-home .app-branding-topleft,
body.mobile-home .channel-logo-badge,
body.mobile-home .category-badge,
body.mobile-home .lesson-badge,
body.mobile-home .screen-category-indicator,
body.mobile-home .focus-exit-button,
body.mobile-home .focus-progress,
body.mobile-home .lower-third,
body.mobile-home .video-pause-button,
body.mobile-home .japanese-flag,
body.mobile-home .shortcuts-info,
body.mobile-home .card-flow-mode-indicator,
body.mobile-home .media-status,
body.mobile-home .mf-card-status,
body.mobile-home .tf-card-status,
body.mobile-home .mf-gesture-hint,
body.mobile-home .tf-gesture-hint,
body.mobile-home .mobile-focus-bottombar { display: none !important; }

body.mobile-home.mobile-focus #card-number,
body.mobile-home.focus-mode #card-number,
body.mobile-home #card-number { display: none !important; }

body:not(.mobile-home) .mobile-home-container { display: none !important; }

/* Kill global button:hover lift (components.css translateY(-2px)) for ALL mobile landing buttons */
.mobile-home-container button:hover,
.mobile-home-container button:active {
    transform: none;
    box-shadow: none;
}

body.mobile-home #app { visibility: hidden; height: 0; overflow: hidden; }
body.mobile-home { overflow: hidden; padding: 0; color-scheme: light; }

/* ========================================
   2. Container — warm stone ground
   ======================================== */

.mobile-home-container {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, var(--seasonal-tint) 0%, transparent 70%),
        #F0EDE8;
    padding: 0 20px env(safe-area-inset-bottom, 0);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   3. Header — logo left, sign-in right
   Matches demo-landing-C.html exactly
   ======================================== */

.mh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 0;
}

.mh-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.9;
}

/* Sign-in — border pill (demo-landing-C style) */
.mh-sign-in {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #57534e;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 20px;
    padding: 10px 16px;
    min-height: 44px;
    box-sizing: border-box;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.mh-sign-in:active {
    background: rgba(0, 0, 0, 0.04);
}

.mh-sign-in svg {
    flex-shrink: 0;
}

/* --- Mobile avatar (signed-in state) --- */

.mh-avatar {
    margin-left: auto;
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mh-avatar:active { opacity: 0.85; }

.mh-avatar-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EDE8E0;
    border: 1.5px solid rgba(201, 169, 110, 0.25);
    color: #8C7A5E;
    font-size: 13px;
    font-weight: 600;
    font-family: Inter, system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
}

.mh-avatar-sync-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #F0EDE8;
    pointer-events: none;
    transition: background 0.3s ease;
}

.mh-avatar-sync-dot.synced { background: rgba(163, 177, 138, 0.9); }
.mh-avatar-sync-dot.syncing,
.mh-avatar-sync-dot.connecting { background: #C9A96E; animation: syncPulse 1.2s ease-in-out infinite; }
.mh-avatar-sync-dot.error { background: #c97d6e; }
.mh-avatar-sync-dot.none { display: none; }

/* ========================================
   4. Greeting — SEPARATE block below header
   Generous padding, typography-led hero
   ======================================== */

.mh-greeting {
    padding: 48px 0 24px;
}

.mh-greeting-en {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #2C2C2C;
    line-height: 1.2;
}

.mh-greeting-jp-line {
    margin-top: 6px;
}

.mh-greeting-jp {
    font-family: 'Klee One', serif;
    font-size: 15px;
    color: #8C8578;
    letter-spacing: 0.02em;
}

.mh-greeting-romaji {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #a8a29e;
    letter-spacing: 0.04em;
}

.mh-greeting-date {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #a8a29e;
    margin-top: 4px;
}

/* ========================================
   5. Filter row — word count left, + Filter right
   ======================================== */

.mh-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 14px;
}

.mh-word-count {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #2C2C2C;
}

.mh-filter-btn {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #57534e;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 16px;
    padding: 5px 14px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.mh-filter-btn:active {
    background: rgba(0, 0, 0, 0.04);
}

.mh-filter-btn.mh-filter-active {
    background: #3D5A80;
    color: #fff;
    border-color: #3D5A80;
}

/* Active filter pills — separate row below filter controls */
.mh-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 16px;
    margin-top: -4px;
}

.mh-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(240, 237, 232, 0.5);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #57534e;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mh-filter-pill:active {
    opacity: 0.7;
}

.mh-filter-pill .mh-pill-remove {
    font-size: 13px;
    opacity: 0.5;
    line-height: 1;
}

/* Color-coded pills by filter type — matches desktop palette */
.mh-filter-pill.mh-pill-category {
    background: rgba(201,169,110,0.10);
    color: #8B7340;
    border-color: rgba(201,169,110,0.15);
}
.mh-filter-pill.mh-pill-category .mh-pill-remove { color: #8B7340; }

.mh-filter-pill.mh-pill-tb-ippo {
    background: rgba(180,120,80,0.10);
    color: #7A5030;
    border-color: rgba(180,120,80,0.15);
}
.mh-filter-pill.mh-pill-tb-ippo .mh-pill-remove { color: #7A5030; }

.mh-filter-pill.mh-pill-tb-genki1 {
    background: rgba(61,90,128,0.10);
    color: #3D5A80;
    border-color: rgba(61,90,128,0.15);
}
.mh-filter-pill.mh-pill-tb-genki1 .mh-pill-remove { color: #3D5A80; }

.mh-filter-pill.mh-pill-tb-genki2 {
    background: rgba(100,140,100,0.10);
    color: #4A6B48;
    border-color: rgba(100,140,100,0.15);
}
.mh-filter-pill.mh-pill-tb-genki2 .mh-pill-remove { color: #4A6B48; }

.mh-filter-pill.mh-pill-textbook {
    background: rgba(201,169,110,0.12);
    color: #8B7340;
    border-color: rgba(201,169,110,0.15);
}
.mh-filter-pill.mh-pill-textbook .mh-pill-remove { color: #8B7340; }

.mh-filter-pill.mh-pill-pos {
    background: rgba(140,133,120,0.10);
    color: #5C564E;
    border-color: rgba(140,133,120,0.15);
}
.mh-filter-pill.mh-pill-pos .mh-pill-remove { color: #5C564E; }

/* ========================================
   6. Action cards — Concept C styling
   ======================================== */

.mh-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

.mh-action-card {
    display: block;
    text-align: left;
    width: 100%;
    background: #FAFAF7;
    border-radius: 10px;
    padding: 20px;
    border: none;
    border-left: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.mh-action-card:active {
    background: #F5F2ED;
}

/* Accent left borders */
.mh-learn-card { border-left-color: #8C8578; }
.mh-review-card { border-left-color: #C9A96E; }

.mh-card-body {
    display: flex;
    flex-direction: column;
}

.mh-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.mh-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2C2C2C;
}

.mh-card-badge {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}
.mh-card-badge:empty {
    display: none;
}

.mh-learn-card .mh-card-badge {
    background: rgba(140,133,120,0.1);
    color: #8C8578;
}

.mh-review-card .mh-card-badge {
    background: rgba(201,169,110,0.12);
    color: #9a7d4a;
}


.mh-card-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #57534e;
    margin-bottom: 14px;
}

.mh-card-guide {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #78756f;
    line-height: 1.55;
}

.mh-card-guide strong {
    font-weight: 500;
    color: #57534e;
}

/* Browse hero preview — rotating word card inside Browse */
.mh-browse-hero {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    margin: 10px 0 0;
    background-size: cover;
    background-position: center;
    /* background-image is not animatable; crossfade handled by JS opacity */
}

.mh-browse-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0;
}

.mh-browse-hero-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mh-browse-stamps {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.mh-browse-stamp {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Klee One', serif;
    font-size: 15px;
}

.mh-browse-stamp:first-child {
    border: 1.5px solid rgba(160, 120, 80, 0.35);
    color: rgba(160, 120, 80, 0.45);
}

.mh-browse-stamp:last-child {
    border: 1.5px solid rgba(107, 127, 92, 0.35);
    color: rgba(107, 127, 92, 0.45);
}

.mh-browse-hero-jp {
    font-family: 'Klee One', serif;
    font-size: 22px;
    color: #2C2C2C;
    transition: opacity 0.35s ease;
}

.mh-browse-hero-en {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #8C8578;
    transition: opacity 0.35s ease;
}

/* Mark key — Known/Learning inline legend */
.mh-mark-key {
    display: inline;
    font-size: 12px;
    color: #8C8578;
}

/* Connector between Browse and Review */
.mh-connector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 0;
}

.mh-connector-line {
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.06);
}

.mh-connector-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #a09a90;
    white-space: nowrap;
}

.mh-connector.mh-hidden { display: none; }

/* Learned count — quiet progress */
.mh-learned-count {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #a09a90;
    text-align: center;
    padding: 12px 0 0;
}

.mh-learned-count.mh-hidden { display: none; }

/* Disabled state */
.mh-action-card.mh-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Hidden */
.mh-action-card.mh-hidden { display: none; }

/* All-seen / zero-match message */
.mh-all-seen {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #78756f;
    text-align: center;
    padding: 16px 0 0;
    line-height: 1.5;
}

.mh-all-seen.mh-hidden { display: none; }

/* ========================================
   7. Settings — no card wrapper, plain text
   Matches demo-settings-A.html exactly
   ======================================== */

.mh-below-fold {
    padding: 12px 0 0;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
}

/* Settings toggle row — plain text, no card background */
/* 22px left padding aligns with card text (2px border + 20px card padding) */
.mh-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    padding-left: 22px;
    margin-top: 4px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    width: 100%;
}

.mh-settings-toggle-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #57534e;
}

.mh-settings-toggle-chevron {
    width: 16px;
    height: 16px;
    color: #57534e;
    opacity: 0.5;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.mh-settings-toggle.is-open .mh-settings-toggle-chevron {
    transform: rotate(90deg);
}

/* Settings body — expand/collapse */
.mh-settings-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.mh-settings-body.is-open {
    max-height: 500px;
}

.mh-settings-inner {
    padding: 4px 0 20px;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section labels — sentence case, not uppercase */
.mh-settings-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mh-settings-section-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #57534e;
}

/* Options row — plain text with pipe dividers */
.mh-settings-options {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.mh-settings-option {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #9C958C;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 2px 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    transition: none;
    transform: none !important;
    white-space: nowrap;
}

.mh-settings-option:hover {
    color: #57534e;
}

.mh-settings-option:active {
    transform: none !important;
    background: none !important;
}

.mh-settings-option.is-active {
    font-weight: 600;
    color: #2C2C2C;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.mh-settings-jp {
    font-family: 'Klee One', serif;
}

.mh-settings-divider {
    color: #D4CFC8;
    font-size: 13px;
    font-weight: 300;
    user-select: none;
    pointer-events: none;
}

/* Reset progress — plain text link */
.mh-reset {
    align-self: flex-start;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #9C958C;
    cursor: pointer;
    padding: 0;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
}

.mh-reset:hover {
    color: #57534e;
}

/* Reset confirm */
.mh-reset-confirm {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
}

.mh-reset-confirm.active { display: flex; }

.mh-reset-confirm > span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #57534e;
}

.mh-reset-confirm-actions {
    display: flex;
    gap: 8px;
}

.mh-reset-confirm button {
    padding: 2px 0;
    border-radius: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease;
}

.mh-reset-confirm button:active {
    transform: none;
}

.mh-reset-yes {
    background: none;
    color: #2C2C2C;
}

.mh-reset-no {
    background: none;
    color: #9C958C;
}

/* ========================================
   8. Filter bottom sheet — 3-level drill-down
   ======================================== */

.mh-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(44, 40, 36, 0.14);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mh-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* Filter sheet inherits the blanket mobile button reset above */

.mh-filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 75vh;
    background: rgba(244, 241, 235, 0.97);
    backdrop-filter: blur(24px) saturate(110%);
    -webkit-backdrop-filter: blur(24px) saturate(110%);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(212, 207, 200, 0.4);
    box-shadow: 0 -2px 20px rgba(44, 40, 36, 0.05);
    z-index: 3001;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mh-filter-sheet.active {
    transform: translateY(0);
}

.mh-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 14px 0 8px;
    flex-shrink: 0;
    cursor: grab;
}

.mh-sheet-handle-bar {
    width: 36px;
    height: 4px;
    background: rgba(140, 133, 120, 0.16);
    border-radius: 2px;
    transition: background 0.2s ease;
}

.mh-sheet-handle:active .mh-sheet-handle-bar {
    background: rgba(140, 133, 120, 0.26);
}

.mh-sheet-header {
    display: flex;
    align-items: center;
    padding: 4px 20px 16px;
    flex-shrink: 0;
}

.mh-sheet-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mh-sheet-back {
    display: none;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 22px;
    color: #8C8578;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    margin-left: -10px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

.mh-sheet-back.visible {
    display: flex;
}

.mh-sheet-back:active {
    background: rgba(201, 169, 110, 0.08);
    color: #57534e;
}

.mh-sheet-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #2C2C2C;
    letter-spacing: 0.03em;
}

.mh-sheet-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 20px 14px;
    flex-shrink: 0;
}

.mh-sheet-active-filters:empty {
    display: none;
}

.mh-sheet-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    min-height: 32px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.mh-sheet-active-pill:active {
    opacity: 0.7;
}

.mh-sheet-active-pill[data-dim="textbook"],
.mh-sheet-active-pill[data-dim="lessons"] {
    background: rgba(61, 90, 128, 0.06);
    border: 1px solid rgba(61, 90, 128, 0.12);
    color: #4A6D94;
}

.mh-sheet-active-pill[data-dim="category"] {
    background: rgba(201, 169, 110, 0.07);
    border: 1px solid rgba(201, 169, 110, 0.16);
    color: #8C7A5E;
}

.mh-sheet-active-pill[data-dim="pos"] {
    background: rgba(107, 127, 92, 0.06);
    border: 1px solid rgba(107, 127, 92, 0.12);
    color: #5A6E4E;
}

.mh-sheet-active-pill .mh-sap-x {
    font-size: 12px;
    line-height: 1;
    opacity: 0.4;
}

.mh-sheet-body {
    padding: 0 20px 36px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
    transition: opacity 0.2s ease;
}

.mh-sheet-body.transitioning {
    opacity: 0;
}

/* Browse menu rows */
.mh-browse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 10px 16px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
    position: relative;
    border-radius: 10px;
}

.mh-browse-row:active {
    background-color: rgba(201, 169, 110, 0.05);
}

.mh-browse-row + .mh-browse-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.08) 0%, transparent 70%);
}

.mh-browse-row-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mh-browse-row-label {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #2C2C2C;
    letter-spacing: 0.01em;
}

.mh-browse-row-sub {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #9C958C;
    letter-spacing: 0.01em;
}

.mh-browse-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mh-browse-row-count {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #8C7A5E;
    background: rgba(201, 169, 110, 0.10);
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mh-browse-row-chevron {
    width: 14px;
    height: 14px;
    color: #B8B2A8;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.mh-browse-row:active .mh-browse-row-chevron {
    color: #8C8578;
}

/* Toggle rows */
.mh-toggle-row {
    display: flex;
    align-items: center;
    padding: 14px 10px 14px 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.mh-toggle-row:active {
    background-color: rgba(201, 169, 110, 0.05);
}

.mh-toggle-row + .mh-toggle-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.08) 0%, transparent 75%);
}

.mh-toggle-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 1.5px;
    background: #C9A96E;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mh-toggle-row.selected::before {
    opacity: 1;
}

.mh-toggle-row.selected {
    background: rgba(201, 169, 110, 0.07);
}

.mh-toggle-row-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #2C2C2C;
    flex: 1;
}

.mh-toggle-row.selected .mh-toggle-row-label {
    color: #2C2C2C;
}

.mh-toggle-row.select-all {
    background: rgba(201, 169, 110, 0.04);
    margin-bottom: 2px;
}

.mh-toggle-row.select-all .mh-toggle-row-label {
    font-weight: 400;
    color: #2C2C2C;
}

.mh-toggle-row.select-all.selected .mh-toggle-row-label {
    color: #2C2C2C;
}

.mh-toggle-row.select-all + .mh-separator + .mh-toggle-row::after,
.mh-toggle-row.select-all + .mh-toggle-row::after {
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.14) 0%, transparent 70%);
}

.mh-toggle-row-count {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #8C8578;
    margin-left: 8px;
}

/* Drill-down rows */
.mh-drill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 10px 15px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.mh-drill-row:active {
    background-color: rgba(201, 169, 110, 0.05);
}

.mh-drill-row + .mh-drill-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.08) 0%, transparent 75%);
}

.mh-drill-row-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #2C2C2C;
    flex: 1;
}

.mh-drill-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mh-drill-row-count {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #9C958C;
}

.mh-drill-row-chevron {
    width: 14px;
    height: 14px;
    color: #B8B2A8;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.mh-drill-row:active .mh-drill-row-chevron {
    color: #8C8578;
}

.mh-separator {
    height: 1px;
    margin: 6px 0;
    background: radial-gradient(ellipse at center, rgba(140, 133, 120, 0.10) 0%, transparent 70%);
}

/* ========================================
   9. Transitions — 敷居 (shikii) threshold crossing
   ======================================== */

.mobile-home-container.exiting {
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.mobile-home-container.entering {
    animation: mhEntrance 400ms ease-out both;
    overflow-y: hidden; /* prevent transient scrollbar during entrance animation */
}

@keyframes mhEntrance {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   12a. Reduced motion — accessibility
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .mobile-home-container.exiting,
    .mobile-home-container.entering {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    .mh-header, .mh-greeting-compact, .mh-filter-row, .mh-pills-row,
    .mh-review-section, .mh-browse-section, .mh-below-fold {
        animation: none !important;
    }
    .sc-back, .sc-container, .sc-stats-inline, .sc-actions {
        animation: none !important;
    }
}

/* ========================================
   12b. Staggered entrance — elements arrive from below
   ======================================== */

@keyframes mhStaggerIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-home-container.entering .mh-header            { animation: mhStaggerIn 280ms ease-out both; animation-delay: 0ms; }
.mobile-home-container.entering .mh-greeting-compact   { animation: mhStaggerIn 280ms ease-out both; animation-delay: 60ms; }
.mobile-home-container.entering .mh-filter-row         { animation: mhStaggerIn 280ms ease-out both; animation-delay: 100ms; }
.mobile-home-container.entering .mh-pills-row          { animation: mhStaggerIn 280ms ease-out both; animation-delay: 160ms; }
.mobile-home-container.entering .mh-review-section     { animation: mhStaggerIn 280ms ease-out both; animation-delay: 180ms; }
.mobile-home-container.entering .mh-browse-section     { animation: mhStaggerIn 280ms ease-out both; animation-delay: 240ms; }
.mobile-home-container.entering .mh-below-fold         { animation: mhStaggerIn 280ms ease-out both; animation-delay: 280ms; }

/* ========================================
   12c. Returning-user landing — redesigned layout
   ======================================== */

/* --- Compact greeting --- */
.mh-greeting-compact {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 20px 0 12px;
}

/* --- Section headers (shared) --- */
.mh-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.mh-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #2C2C2C;
}
.mh-section-badge {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}
.mh-section-badge:empty { display: none; }

/* --- Review section --- */
.mh-review-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.mh-review-section .mh-section-badge {
    background: rgba(201,169,110,0.12);
    color: #9a7d4a;
}
.mh-review-section .mh-section-action {
    margin-top: 24px;
}
.mh-browse-section .mh-section-action {
    margin-top: 12px;
}

/* --- Review deck (ribbon fan) --- */
.mh-review-deck {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 2.82;
    overflow: visible;
    overscroll-behavior: none;
    touch-action: pan-y;
    border-radius: 16px;
    margin-top: 28px;
}
.mh-deck-card {
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    border-radius: 14px;
    background: #FAFAF7;
    border: 1px solid rgba(229,226,221,0.5);
    overflow: hidden;
    transform-origin: center bottom;
    will-change: transform, opacity, filter;
    contain: content;
    opacity: 0;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.mh-deck-img {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    filter: var(--atmo, none);
}
.mh-deck-img::after {
    display: none;
}
.mh-deck-footer {
    padding: 10px 12px 12px;
}
.mh-deck-text {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.mh-deck-jp {
    font-family: 'Klee One', serif;
    font-size: 20px;
    color: #2C2C2C;
    line-height: 1.2;
}
.mh-deck-en {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #57534e;
    font-weight: 500;
}

/* Atmospheric depth */
.mh-deck-card[data-depth="front"] { --atmo: brightness(1); }
.mh-deck-card[data-depth="mid"]   { --atmo: brightness(0.97) sepia(0.02); }
.mh-deck-card[data-depth="back"]  { --atmo: brightness(0.94) sepia(0.01) saturate(0.98); }

/* --- Browse section --- */
.mh-browse-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.mh-browse-section .mh-section-badge {
    background: rgba(140,133,120,0.1);
    color: #8C8578;
}

/* --- Browse carousel --- */
.mh-browse-wrap {
    position: relative;
    width: calc(100% + 40px);
    margin: 0 -20px;
    margin-top: 12px;
}
.mh-browse-wrap::before,
.mh-browse-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 32px;
    z-index: 2;
    pointer-events: none;
}
.mh-browse-wrap::before {
    left: 0;
    background: linear-gradient(to right, #F0EDE8, transparent);
}
.mh-browse-wrap::after {
    right: 0;
    background: linear-gradient(to left, #F0EDE8, transparent);
}
.mh-browse-strip {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0 15vw 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: 0 15vw;
}
.mh-browse-strip::-webkit-scrollbar { display: none; }
.mh-browse-card {
    flex: 0 0 70vw;
    max-width: 280px;
    border-radius: 12px;
    background: #FAFAF7;
    border: 1px solid rgba(229,226,221,0.5);
    overflow: hidden;
    scroll-snap-align: center;
    position: relative;
    transition: box-shadow 200ms ease, transform 200ms ease, opacity 200ms ease;
}
.mh-browse-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.mh-browse-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.mh-browse-text {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mh-browse-row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.mh-browse-jp {
    font-family: 'Klee One', serif;
    font-size: 20px;
    color: #2C2C2C;
    line-height: 1.2;
}
.mh-browse-en {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #57534e;
    font-weight: 500;
}
.mh-browse-card:not(.mh-browse-active) {
    transform: scale(0.92);
    opacity: 0.7;
}
.mh-browse-card.mh-browse-active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: rgba(201,169,110,0.3);
}

/* --- CTA ghost button --- */
.mh-section-action {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 20px;
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #57534e;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    margin-top: 8px;
    text-align: center;
}
.mh-section-action:active {
    background: rgba(0,0,0,0.04);
}

/* --- Review resting state --- */
.mh-review-resting {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #a09a90;
    text-align: center;
    padding: 24px 0 16px;
}

/* --- Section hidden state --- */
.mh-review-section.mh-hidden,
.mh-browse-section.mh-hidden { display: none; }

/* ========================================
   13. Session Complete Overlay (sc-*)
   ======================================== */

.sc-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, var(--seasonal-tint, rgba(201,169,110,0.04)) 0%, transparent 70%),
        #F0EDE8;
    opacity: 0;
    transition: opacity 400ms ease-out;
}

.sc-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

.sc-overlay.sc-visible {
    opacity: 1;
}

.sc-overlay.sc-exiting {
    opacity: 0;
    transition: opacity 300ms ease-out;
    pointer-events: none;
}

.sc-container {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18vh 24px 0;
    gap: 0;
    width: 100%;
    transform: translateY(-12px);
    transition: transform 400ms ease-out, opacity 400ms ease-out;
    opacity: 0;
}

.sc-visible .sc-container {
    transform: translateY(0);
    opacity: 1;
}

.sc-exiting .sc-container {
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 300ms ease-out, opacity 300ms ease-out;
}

.sc-greeting {
    text-align: center;
    margin-bottom: 44px;
}

.sc-greeting-jp {
    display: block;
    font-family: 'Klee One', serif;
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 600;
    color: #2C2C2C;
    line-height: 1.2;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.sc-greeting-roma {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: rgba(140, 133, 120, 0.55);
    letter-spacing: 0.03em;
    display: block;
    margin-top: 4px;
}

.sc-greeting-en {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #8C8578;
    line-height: 1.3;
    letter-spacing: 0.01em;
    margin-top: 2px;
}

.sc-seal {
    display: block;
    width: 24px;
    height: 24px;
    margin: 12px auto 0;
    opacity: 0.10;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #e8ddd0, #d4c8b8);
    font-family: 'Klee One', serif;
    font-size: 12px;
    color: #2C2C2C;
    line-height: 24px;
    text-align: center;
}

.sc-stats-inline {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-bottom: 48px;
    width: 100%;
}

.sc-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sc-stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.sc-stat-dot.known { background: #6B7F5C; }
.sc-stat-dot.learning { background: #3D5A80; }
.sc-stat-dot.unmarked { background: #d4cfc8; }

.sc-stat-num {
    font-family: 'Klee One', serif;
    font-size: 28px;
    font-weight: 600;
    color: #2C2C2C;
    line-height: 1;
}

.sc-stat-num.zero {
    color: #a8a29e;
}

.sc-stat-word-en {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    color: rgba(140, 133, 120, 0.45);
    letter-spacing: 0.02em;
}

.sc-back {
    position: absolute;
    top: max(env(safe-area-inset-top, 0px), 16px);
    left: 16px;
    z-index: 2;
    height: 44px;
    padding: 0 16px;
    background: rgba(250, 250, 247, 0.85);
    border: 1px solid rgba(229, 226, 221, 0.5);
    border-radius: 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    color: #57534e;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.sc-back:active {
    background: rgba(240, 237, 232, 0.95);
    transform: scale(0.92);
}

.sc-back span {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.sc-actions {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.sc-action {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 22px;
    padding: 0 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    flex: 1;
    justify-content: center;
}

.sc-action-jp {
    font-family: 'Klee One', serif;
    font-size: 14px;
    font-weight: 600;
}

.sc-action-en {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
}

.sc-action-primary {
    background: rgba(250, 250, 247, 0.9);
    border: 1px solid rgba(229, 226, 221, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    color: #2C2C2C;
}

.sc-action-primary:active {
    background: rgba(240, 237, 232, 0.95);
    transform: scale(0.96);
}

.sc-action-primary .sc-action-jp {
    color: #2C2C2C;
}

.sc-action-primary .sc-action-en {
    color: #57534e;
}

.sc-action-secondary {
    background: rgba(250, 250, 247, 0.75);
    border: 1px solid rgba(229, 226, 221, 0.4);
    color: #2C2C2C;
}

.sc-action-secondary:active {
    background: rgba(240, 237, 232, 0.95);
    transform: scale(0.96);
}

.sc-action-secondary .sc-action-jp {
    color: #2C2C2C;
}

.sc-action-secondary .sc-action-en {
    color: #8C8578;
}

/* Staggered entrance for session complete */
@keyframes scSettleDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scStaggerIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.sc-visible .sc-back          { animation: scSettleDown 280ms ease-out both; animation-delay: 0ms; }
.sc-visible .sc-greeting      { animation: scSettleDown 280ms ease-out both; animation-delay: 60ms; }
.sc-visible .sc-stats-inline  { animation: scSettleDown 280ms ease-out both; animation-delay: 200ms; }
.sc-visible .sc-actions       { animation: scStaggerIn 280ms ease-out both; animation-delay: 340ms; }

/* Reduced motion for session complete */
@media (prefers-reduced-motion: reduce) {
    .sc-overlay,
    .sc-overlay.sc-visible,
    .sc-overlay.sc-exiting,
    .sc-container,
    .sc-visible .sc-container,
    .sc-exiting .sc-container {
        transition-duration: 0.01ms !important;
    }
    .sc-visible .sc-back,
    .sc-visible .sc-greeting,
    .sc-visible .sc-stats-inline,
    .sc-visible .sc-actions {
        animation: none !important;
    }
}

/* Screen-reader-only text (VoiceOver/TalkBack aria-live regions) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   14. Emaki Demo (mh-demo-*) — Onboarding scroll story
   ======================================== */

/* Station — full-screen container */
.mh-demo-station {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 20px;
    box-sizing: border-box;
}

/* Setup screen (shown after focus mode deep dive) */
.mh-demo-setup {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    box-sizing: border-box;
}

/* Station inner -- centers content with max width */
.mh-demo-s-inner {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Entrance — immediate visibility (no scroll observer in v3) */
.mh-demo-station .mh-demo-s-inner {
    opacity: 1;
}

/* Annotation text */
.mh-demo-annotation {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #8C8578;
    text-align: center;
    margin-top: 24px;
    line-height: 1.5;
    text-wrap: balance;
}

/* ---- Station 0: Threshold (門) ---- */

.mh-demo-s0 {
    padding-top: 4px;
}

.mh-demo-logo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    opacity: 0.95;
    margin-bottom: 12px;
}

.mh-demo-brand {
    font-family: 'Klee One', serif;
    font-size: 28px;
    color: #2C2C2C;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 14px;
}

.mh-demo-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #8C8578;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}

/* Flippable path cards (Station 0 browse strip) */
.mh-demo-path-flippable {
    perspective: 600px;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
}

.mh-demo-path-flipper {
    position: relative;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.mh-demo-path-flipped .mh-demo-path-flipper {
    transform: rotateY(180deg);
}

.mh-demo-path-front,
.mh-demo-path-back {
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    background: #FAFAF7;
    border: 1px solid rgba(229, 226, 221, 0.5);
}

.mh-demo-path-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    box-sizing: border-box;
}

.mh-demo-path-back .mh-demo-path-kanji {
    font-family: 'Klee One', serif;
    font-size: 36px;
    color: #2C2C2C;
}

.mh-demo-path-back .mh-demo-path-kana2 {
    font-family: 'Klee One', serif;
    font-size: 16px;
    color: #B0903E;
}

.mh-demo-path-back .mh-demo-path-roma2 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #8C8578;
}

.mh-demo-scope {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #8C8578;
    text-align: center;
    margin-bottom: 0;
    line-height: 1.5;
    text-wrap: balance;
}

/* "tap to open" hint — appears after auto-flip */
.mh-demo-tap-hint {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #a8a29e;
    text-align: center;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.mh-demo-tap-hint.mh-tap-hint-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Coaching overlay (onboarding focus mode hints) ---- */
#mh-coach {
    position: fixed;
    inset: 0;
    z-index: 2600;
    pointer-events: none;
}
.mh-coach-pill {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 10px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #6B6560;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    opacity: 0;
    animation: mh-coach-in 400ms ease forwards;
}
.mh-coach-pill.dismissing {
    animation: mh-coach-out 300ms ease forwards;
}
.mh-coach-pill.no-motion {
    animation: none;
    opacity: 1;
}
@keyframes mh-coach-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mh-coach-out {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateY(-8px); }
}

/* ---- Browse strip card styles (used by Station 0 hero strip) ---- */

/* ---- Browse path card styles (Station 0 hero strip) ---- */

/* Wrapper: positions arrows + edge fades */
.mh-demo-path-wrap {
    position: relative;
    width: calc(100% + 40px);
    margin: 0 -20px;
}

/* Edge fade gradients */
.mh-demo-path-wrap::before,
.mh-demo-path-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 12px;
    width: 32px;
    z-index: 2;
    pointer-events: none;
}

.mh-demo-path-wrap::before {
    left: 0;
    background: linear-gradient(to right, #F0EDE8, transparent);
}

.mh-demo-path-wrap::after {
    right: 0;
    background: linear-gradient(to left, #F0EDE8, transparent);
}

.mh-demo-path-strip {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 0 15vw 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding: 0 15vw;
}

.mh-demo-path-strip::-webkit-scrollbar { display: none; }

.mh-demo-path-card {
    flex: 0 0 70vw;
    max-width: 280px;
    border-radius: 12px;
    background: #FAFAF7;
    border: 1px solid rgba(229, 226, 221, 0.5);
    overflow: hidden;
    scroll-snap-align: center;
    position: relative;
    transition: box-shadow 0.35s ease, transform 0.35s ease, opacity 0.35s ease, border-color 0.35s ease;
}

.mh-demo-path-flippable:active {
    opacity: 0.95;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mh-demo-path-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* Thumbnail set as background-image (inline style) acts as persistent
       fallback layer — if the <img> src swap causes a compositor blank frame
       (common on mobile WebKit/Blink), the background stays visible. */
    background-size: cover;
    background-position: center;
}
.mh-demo-path-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: relative; /* paint above background-image layer */
}

/* Path card text — kanji + English (row 1), kana (row 2) */
.mh-demo-path-text {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mh-demo-path-row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.mh-demo-path-kanji {
    font-family: 'Klee One', serif;
    font-size: 20px;
    color: #2C2C2C;
    line-height: 1.2;
}

.mh-demo-path-en {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #57534e;
    font-weight: 500;
}

.mh-demo-path-row2 {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mh-demo-path-kana2 {
    font-family: 'Klee One', serif;
    font-size: 12px;
    color: #B0903E;
}

/* Furigana on card back — mini focus mode style */
.mh-demo-path-furigana {
    font-family: 'Klee One', serif;
    font-size: 38px;
    font-weight: 600;
    color: #2C2C2C;
    line-height: 1.4;
    text-align: center;
}
.mh-demo-path-furigana ruby rt {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 0.45em;
    font-weight: 400;
    color: #B0903E;
    opacity: 0.85;
    letter-spacing: 0.12em;
}

.mh-demo-path-roma2 {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #8C8578;
}

/* Non-active cards: dimmed peek effect */
.mh-demo-path-card:not(.mh-demo-path-active) {
    transform: scale(0.92);
    opacity: 0.7;
}

/* Active card: subtle lift for centered card */
.mh-demo-path-card.mh-demo-path-active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: rgba(201, 169, 110, 0.3);
}


.mh-demo-s5 {
    align-items: stretch;
    max-width: 360px;
}

/* Setup labels use annotation style for coherence */
.mh-demo-setup-label {
    opacity: 1;
    transform: none;
    margin: 0 0 12px;
    text-align: left;
    align-self: flex-start;
}

.mh-demo-setup-label-display {
    margin-top: 28px;
}

/* Deck options */
.mh-demo-deck-opts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(229, 226, 221, 0.5);
    border-radius: 14px;
    overflow: hidden;
}

.mh-demo-deck-opt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: rgba(250, 250, 247, 0.85);
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.mh-demo-deck-opt:active {
    background: rgba(240, 237, 232, 0.95);
}

.mh-demo-deck-opt.mh-demo-deck-sel {
    background: rgba(250, 250, 247, 1);
}

.mh-demo-deck-opt.mh-demo-deck-sel::before {
    content: '';
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    width: 3px;
    background: #C9A96E;
    border-radius: 1.5px;
}

.mh-demo-deck-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mh-demo-deck-name {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #2C2C2C;
}

.mh-demo-deck-count {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #8C8578;
}

.mh-demo-deck-desc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #a8a29e;
    line-height: 1.4;
}

/* Display options */
.mh-demo-display-opts {
    display: flex;
    gap: 1px;
    background: rgba(229, 226, 221, 0.5);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 32px;
}

.mh-demo-display-opt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 12px;
    background: rgba(250, 250, 247, 0.85);
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mh-demo-display-opt:active {
    background: rgba(240, 237, 232, 0.95);
}

.mh-demo-display-opt.mh-demo-display-sel {
    background: rgba(250, 250, 247, 1);
    box-shadow: inset 0 -2px 0 #57534e;
}

.mh-demo-display-preview {
    font-family: 'Klee One', serif;
    font-size: 28px;
    color: #2C2C2C;
    line-height: 1.3;
}

.mh-demo-display-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #8C8578;
    text-align: center;
}

.mh-demo-display-rec {
    display: block;
    font-size: 10px;
    color: #C9A96E;
    font-weight: 500;
    margin-top: 2px;
}

/* CTA button -- gold accent, Inter font for coherence */
.mh-demo-cta {
    width: 100%;
    padding: 18px;
    background: #C9A96E;
    color: #2C2C2C;
    border: none;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
}

.mh-demo-cta:active {
    transform: scale(0.97);
}

@media (hover: hover) {
    .mh-demo-cta:hover {
        background: #D4B87E;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(201, 169, 110, 0.25);
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .mh-demo-path-flipper {
        transition: none !important;
    }
    .mh-demo-tap-hint {
        transition: none !important;
        opacity: 1;
        transform: none;
    }
    .mh-coach-pill {
        animation: none !important;
        opacity: 1;
    }
}