/* Moonvale mobile base — reset + shell layout + M1 components. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-md);
    line-height: 1.5;
    /* 手機遊戲觸感：去掉點擊灰框、禁止長按選字/放大鏡（遊戲不是可選文字的 app） */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
/* 例外：仍需可選取的內容區（存檔匯出文字之類）可個別覆蓋 .mv-selectable */
.mv-selectable, .mv-selectable * { -webkit-user-select: text; user-select: text; }

/* 遊戲內背景＝水彩夜景（David 2026-07-05：遊戲裡也要看得到 mockup 背景）。
   html 保留 --paper 當底、body 透明讓 ::before 的畫透出來；
   卡片/tab bar/sheet 都是不透明元件，可讀性不受影響。紙色罩控制存在感。 */
body { background: transparent; }
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(246, 241, 231, .88), rgba(246, 241, 231, .88)),
        url("/resources/img/splash-night-moon.jpg") center / cover no-repeat;
    filter: blur(6px);
    transform: scale(1.08); /* 蓋掉 blur 邊緣暈開的白邊 */
    pointer-events: none;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--mv-time-tint, transparent);
    pointer-events: none;
    transition: background-color 1.2s linear;
}
[data-theme="night"] body::before,
body[data-theme="night"]::before {
    background:
        linear-gradient(rgba(35, 42, 61, .90), rgba(35, 42, 61, .90)),
        url("/resources/img/splash-night-moon.jpg") center / cover no-repeat;
}

#app {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* splash（背景＝水彩滿月夜 mockup，blur 防搶焦點 — David 2026-07-04） */
#mv-splash {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    background: var(--paper);
    text-align: center;
    overflow: hidden;
}
#mv-splash::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/resources/img/splash-night-moon.jpg") center / cover no-repeat;
    filter: blur(4px) brightness(.6);
    transform: scale(1.06); /* 蓋掉 blur 邊緣暈開的白邊 */
    z-index: 0;
}
#mv-splash > * { position: relative; z-index: 1; }
/* 深色夜景背景上，日間主題的深色 ink 會看不見 — splash 文字固定亮色（顏色值直接寫進下方逐元素規則，避免被同 specificity 蓋掉） */
#mv-splash h1 { color: #f6efe0; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.mv-splash-moon {
    font-size: 56px;
    animation: mv-moon-drift 2.6s ease-in-out infinite;
}
@keyframes mv-moon-drift {
    0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .85; }
    50% { transform: translateY(-8px) rotate(6deg); opacity: 1; }
}
#mv-splash-progress { color: rgba(246, 239, 224, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); font-size: var(--text-sm); }
#mv-splash-warning { color: var(--warn); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); font-size: var(--text-sm); max-width: 80%; }
#mv-splash-version { color: rgba(246, 239, 224, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); font-size: var(--text-xs); }
@media (prefers-reduced-motion: reduce) {
    .mv-splash-moon { animation: none; }
}

/* status strip — 兩行：頂行（時間/月相/天氣/錢）＋ vitals 行（HP/耐/EXP 常駐迷你條） */
.mv-status {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    padding-top: calc(var(--sp-2) + var(--mv-safe-top));
    border-bottom: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}
.mv-status-top {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 22px;
    white-space: nowrap;
}
.mv-status-spacer { flex: 1; }
.mv-status-money { color: var(--accent-warm); font-weight: 700; }

/* 常駐 vitals（David 最強痛點）：三顆 pill 迷你條，療癒柔和、回復平滑動。
   圖示｜條｜數字，等寬三欄，所有畫面隨時瞄一眼。 */
.mv-vitals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}
.mv-vital {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-chip);
    box-shadow: 0 1px 2px var(--shadow-ink);
    min-width: 0;
}
.mv-vital-icon { font-size: 12px; line-height: 1; flex: none; }
.mv-vital-hp .mv-vital-icon { color: var(--hp); }
.mv-vital-stam .mv-vital-icon { color: var(--stamina); }
.mv-vital-xp .mv-vital-icon { color: var(--xp); }
/* HUD 圖示 img 版：內嵌在文字旁，微微下沉對齊基線 */
.mv-status-moon-img, .mv-status-wx-img, .mv-status-money-img { vertical-align: -2px; }
.mv-vital-icon.mv-icon, .mv-vital-icon .mv-icon { width: 15px; height: 15px; }
.mv-vital .mv-bar {
    flex: 1;
    height: 8px;
    margin-top: 0;
    border-radius: var(--radius-bar);
    box-shadow: inset 0 1px 1px var(--bar-inset);
}
.mv-vital .mv-bar-fill {
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
    border-radius: var(--radius-bar);
}
.mv-vital .mv-bar-fill::after {
    content: ""; position: absolute; inset: 0 0 50% 0;
    background: linear-gradient(rgba(255,255,255,.3), transparent);
    border-radius: var(--radius-bar) var(--radius-bar) 0 0;
}
.mv-vital-hp .mv-bar-fill { background: linear-gradient(180deg, #E07A6B 0%, var(--hp) 50%, #A85A4A 100%); }
.mv-vital-stam .mv-bar-fill { background: linear-gradient(180deg, #6BC98A 0%, var(--stamina) 50%, #4A9A64 100%); }
.mv-vital-xp .mv-bar-fill { background: linear-gradient(180deg, #C49FE8 0%, var(--xp) 50%, #9070B8 100%); }
.mv-vital-num {
    font-size: 11px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: none;
}
@media (prefers-reduced-motion: reduce) {
    .mv-vital .mv-bar-fill { transition: none; }
}

/* scroll hint（David 鐵律：可捲動必有箭頭 — scroll_hint.js）
   sticky 末子元素、0 尺寸不佔版面；chevron 從中浮出 */
.mv-scroll-hint {
    position: sticky;
    display: block;
    height: 0;
    width: 0;
    z-index: 6;
    pointer-events: none;
}
.mv-scroll-hint[hidden] { display: none; } /* [hidden] vs display:block（見 gotcha） */
.mv-scroll-hint[data-axis="y"] { bottom: 0; left: 50%; }
.mv-scroll-hint[data-axis="x"] { right: 0; align-self: center; }
.mv-scroll-hint-dot {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--paper-card);
    border: 1px solid var(--line);
    box-shadow: 0 1px 4px rgba(62, 58, 51, .15);
    color: var(--moon);
}
.mv-scroll-hint-dot[hidden] { display: none; }
.mv-scroll-hint[data-axis="y"] > .mv-scroll-hint-dot {
    bottom: 10px;
    left: -14px;
    animation: mv-hint-bounce 1.6s ease-in-out infinite;
}
.mv-scroll-hint[data-axis="x"] > .mv-scroll-hint-dot {
    right: 2px;
    top: -14px;
}
@keyframes mv-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
    .mv-scroll-hint-dot { animation: none; }
}

/* screens */
.mv-screens { flex: 1; overflow-y: auto; position: relative; } /* relative＝地圖模式 absolute 填滿的參考 */
/* 地圖模式：整個 screens 容器不捲（地圖固定滿版，節點/label 貼邊也不撐出捲軸）。
   ⚠ 必須限定「當前 active 的場景」才鎖 — .mv-scene-mapmode 元素永遠留在 DOM 裡
   （切 tab 只是 display:none 隱藏場景，不移除地圖 div），若只寫 :has(.mv-scene-mapmode)
   會讓所有 tab（技能/背包/日誌/更多）都被連坐鎖死不能捲。用 .mv-active 限定＝
   只有真正在看地圖時才不捲。（David 2026-07-12 回報「所有頁都不能捲」的根因） */
.mv-screens:has(.mv-scene-mapmode.mv-active) { overflow: hidden; }
.mv-screen { display: none; padding: var(--sp-4); }
.mv-screen.mv-active { display: block; }
.mv-scene.mv-active { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 100%; }
/* 切 tab 過場：方向感水平滑動（往右切=從右滑入、往左切=從左滑入）。
   data-slide 由 shell.js 設定、animationend 清除，tick 重繪不重跑。 */
.mv-screen.mv-active[data-slide="right"] { animation: mv-slide-from-right 220ms ease-out; }
.mv-screen.mv-active[data-slide="left"] { animation: mv-slide-from-left 220ms ease-out; }
.mv-screen.mv-active:not([data-slide]) { animation: none; }
@keyframes mv-slide-from-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mv-slide-from-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mv-screen.mv-active { animation: none; }
}
/* SPEC D per-tab background identity */
.mv-screen[data-screen="skills"],
.mv-screen[data-screen="bag"],
.mv-screen[data-screen="journal"],
.mv-screen[data-screen="more"] { position: relative; }
.mv-screen[data-screen="skills"]::before,
.mv-screen[data-screen="bag"]::before,
.mv-screen[data-screen="journal"]::before,
.mv-screen[data-screen="more"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.18;
    pointer-events: none;
    filter: blur(8px);
    transform: scale(1.1);
}
.mv-screen[data-screen="skills"]::before { background-image: url("/resources/img/backgrounds/bg-skills-path-clean-cel-v1.webp"); }
.mv-screen[data-screen="bag"]::before { background-image: url("/resources/img/backgrounds/bg-backpack-v2.webp"); }
.mv-screen[data-screen="journal"]::before { background-image: url("/resources/img/backgrounds/bg-journal.png"); }
.mv-screen[data-screen="more"]::before {
    background-image: url("/resources/img/backgrounds/bg-character-page-clean-cel-v2.webp");
    opacity: .68;
    filter: blur(2px) saturate(.92) brightness(1.02);
}
[data-theme="night"] .mv-screen[data-screen="skills"]::before,
[data-theme="night"] .mv-screen[data-screen="bag"]::before,
[data-theme="night"] .mv-screen[data-screen="journal"]::before,
[data-theme="night"] .mv-screen[data-screen="more"]::before {
    opacity: .46;
    filter: blur(2px) saturate(.86) brightness(.72);
}
.mv-placeholder { color: var(--ink-soft); text-align: center; padding: var(--sp-6) 0; }

/* scene: location header */
/* 場景插圖 banner（SPEC A v1）：水彩地圖當地點視覺身份。
   不塞整張（縮到手機寬會糊）→ 固定高度＋object-fit cover 對焦村莊中心＝放大看局部，清楚。
   底部漸層讓地點名/描述浮上去有沉浸感（在 scene.js 靠 DOM 順序，header 疊圖下方）。 */
.mv-scene-art {
    position: relative;
    margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0; /* 出血到 screen 邊緣 */
    height: 200px;
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 2px 8px var(--shadow-ink);
}
.mv-scene-art[hidden] { display: none; }
.mv-scene-art-img {
    position: relative;
    z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 42%; /* 對焦村莊屋群（圖偏上中），避開頂部天空/底部河 */
    display: block;
}
.mv-scene-art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--mv-time-tint, transparent);
    pointer-events: none;
}
.mv-scene-art::after { /* 底部柔和漸層，讓下方地點名區銜接不突兀 */
    content: ""; position: absolute; inset: auto 0 0 0; z-index: 2; height: 40%;
    background: linear-gradient(transparent, var(--paper));
    pointer-events: none;
}

/* ═══ 村莊地圖模式（GOLDEN RULE：REAL mobile game、圖為主、文字只是輔助）═══
   全螢幕水彩村莊圖＋圖上發光可點節點。點節點→單動作直接觸發 / 多動作彈 sheet。 */
/* 地圖模式：地圖固定填滿可見區、不可捲動（David 明令：地圖固定）。
   scene screen 撐滿 .mv-screens 高度、overflow hidden，圖 cover 填框、節點 % 定位。 */
.mv-scene-mapmode {
    /* 出血貼邊＝真手機遊戲主城感。用絕對定位填滿 screen（負 margin 會撐出水平捲軸）。 */
    position: absolute;
    inset: 0;
    padding: 0;
    gap: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}
/* 地圖模式下：文字 header／清單／快捷列全隱藏（純地圖） */
.mv-scene-mapmode > .mv-loc-header,
.mv-scene-mapmode > .mv-actions,
.mv-scene-mapmode > .mv-quick { display: none; }

.mv-village-map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.mv-village-map[hidden] { display: none; }
.mv-village-map-img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填滿固定框、不捲；節點座標跟著圖的可見範圍走 */
    object-position: center;
    user-select: none; -webkit-user-drag: none;
}
.mv-village-map::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--mv-time-tint, transparent);
    pointer-events: none;
}
.mv-journey-layer,
.mv-village-nodes { position: absolute; inset: 0; }
.mv-journey-layer {
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.mv-journey-layer[hidden] { display: none; }
.mv-village-nodes { z-index: 3; } /* 節點層疊在旅程層上，座標=框的% */
.mv-route-ledger-slot {
    display: flex;
}
.mv-route-ledger-slot[hidden] {
    display: none;
}
.mv-scene-mapmode > .mv-route-ledger-slot {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(8px + var(--mv-safe-top));
    z-index: 4;
    pointer-events: none;
}
.mv-route-ledger {
    width: 100%;
    padding: 8px 10px 9px;
    color: #4f3529;
    background: rgba(255, 242, 211, .84);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(62, 38, 24, .2);
}
.mv-route-ledger-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}
.mv-route-ledger-mark {
    width: 21px;
    height: 14px;
    border: 2px solid #b17848;
    border-radius: 10px 5px 10px 5px;
    background:
        linear-gradient(90deg, transparent 42%, rgba(126, 82, 49, .55) 43% 50%, transparent 51%),
        radial-gradient(circle at 28% 50%, #f7d391 0 3px, transparent 4px),
        radial-gradient(circle at 72% 50%, #c48958 0 3px, transparent 4px),
        #fff0c4;
    box-shadow: inset 0 1px rgba(255,255,255,.65), 0 1px 2px rgba(65, 40, 26, .18);
}
.mv-route-trail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 6px;
}
.mv-route-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    color: #9a7a62;
}
.mv-route-step::before {
    content: "";
    position: absolute;
    top: 8px;
    left: calc(-50% - 3px);
    width: calc(100% + 6px);
    height: 2px;
    background: rgba(151, 111, 74, .32);
}
.mv-route-step:first-child::before { display: none; }
.mv-route-dot {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #f7dfae;
    box-shadow: inset 0 1px rgba(255,255,255,.7);
}
.mv-route-done,
.mv-route-active {
    color: #8e5b35;
}
.mv-route-done .mv-route-dot {
    background: #d99b55;
}
.mv-route-active .mv-route-dot {
    background: #fff4ca;
    box-shadow: 0 0 0 3px rgba(217, 155, 85, .22), inset 0 1px rgba(255,255,255,.8);
}
.mv-route-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
}
.mv-route-note {
    margin: 5px 1px 0;
    color: #6c4f3d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

/* Act II：四地路約證據板。收合仍保留四張圖；玩家主動展開才覆蓋地圖。 */
.mv-evidence-board {
    width: min(100%, 350px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--atlas-route, #a76d43) 58%, transparent);
    border-bottom: 3px solid var(--atlas-route, #a76d43);
    background: color-mix(in srgb, var(--atlas-paper, #f8edcf) 94%, transparent);
    color: var(--atlas-ink, #40372f);
    box-shadow: 0 7px 22px rgba(49, 35, 27, .28);
    pointer-events: auto;
}
.mv-evidence-summary {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "heading affordance"
        "preview preview";
    gap: 6px 8px;
    min-height: 76px;
    padding: 8px 10px;
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mv-evidence-summary::-webkit-details-marker {
    display: none;
}
.mv-evidence-summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--atlas-route, #a76d43) 58%, white);
    outline-offset: -3px;
}
.mv-evidence-heading {
    grid-area: heading;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 12px;
    letter-spacing: .04em;
}
.mv-evidence-heading strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mv-evidence-count {
    flex: none;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--atlas-route, #a76d43) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--atlas-paper, #f8edcf) 72%, white);
    color: var(--atlas-route-dark, #6f4934);
    font-weight: 900;
    letter-spacing: 0;
}
.mv-evidence-affordance {
    grid-area: affordance;
    align-self: center;
    min-width: 44px;
    color: var(--atlas-route-dark, #6f4934);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}
.mv-evidence-affordance::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
}
.mv-evidence-board[open] .mv-evidence-affordance::after {
    transform: translateY(2px) rotate(225deg);
}
.mv-evidence-preview {
    grid-area: preview;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    height: 38px;
}
.mv-evidence-preview-tile {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 248, 225, .78);
    border-radius: 7px 3px 7px 3px;
    background: #6a6257;
}
.mv-evidence-preview-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mv-evidence-preview-tile[data-state="missing"] img {
    opacity: .48;
    filter: grayscale(.72) saturate(.55);
}
.mv-evidence-preview-tile[data-state="done"]::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 6px;
    width: 10px;
    height: 5px;
    border-left: 2px solid #fff8df;
    border-bottom: 2px solid #fff8df;
    filter: drop-shadow(0 1px 1px rgba(35, 29, 24, .7));
    transform: rotate(-45deg);
}
.mv-evidence-body {
    max-height: min(440px, calc(100dvh - 190px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 10px 10px;
    border-top: 1px solid color-mix(in srgb, var(--atlas-route, #a76d43) 26%, transparent);
}
.mv-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-top: 9px;
}
.mv-evidence-card {
    position: relative;
    min-height: 108px;
    overflow: hidden;
    border: 2px solid rgba(255, 247, 219, .86);
    border-radius: 13px 5px 12px 6px;
    background: #56584d;
    box-shadow: 0 3px 9px rgba(49, 35, 27, .22);
}
.mv-evidence-card-art,
.mv-evidence-card-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.mv-evidence-card-art {
    display: block;
    object-fit: cover;
}
.mv-evidence-card-shade {
    background: linear-gradient(180deg, rgba(28, 24, 19, .02) 25%, rgba(28, 24, 19, .78) 100%);
}
.mv-evidence-card[data-state="missing"] .mv-evidence-card-art {
    opacity: .56;
    filter: grayscale(.68) saturate(.58);
}
.mv-evidence-card-state {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 248, 224, .7);
    border-radius: 999px;
    background: rgba(45, 42, 34, .72);
    color: #fff8e2;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
}
.mv-evidence-card[data-state="done"] .mv-evidence-card-state {
    background: rgba(73, 111, 77, .84);
}
.mv-evidence-card-copy {
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 8px;
    display: grid;
    gap: 1px;
    color: #fffaf0;
    text-shadow: 0 1px 2px rgba(24, 19, 16, .9);
}
.mv-evidence-card-copy strong {
    font-size: 13px;
    line-height: 1.15;
}
.mv-evidence-card-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}
.mv-evidence-footer {
    display: grid;
    gap: 2px;
    min-height: 52px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed color-mix(in srgb, var(--atlas-route, #a76d43) 54%, transparent);
    border-radius: 9px 4px 9px 4px;
    background: color-mix(in srgb, var(--atlas-paper, #f8edcf) 74%, white);
    color: var(--atlas-ink, #40372f);
}
.mv-evidence-footer strong {
    font-size: 12px;
    line-height: 1.2;
}
.mv-evidence-footer span {
    font-size: 11px;
    line-height: 1.35;
}
.mv-evidence-action.mv-cozy-button {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 52px;
    padding: 7px 12px;
    border: 1px solid color-mix(in srgb, var(--atlas-route, #a76d43) 72%, #5c3e2c);
    border-bottom-width: 3px;
    border-radius: 10px 4px 10px 4px;
    background: linear-gradient(180deg, #d99b61, #bd7449);
    color: #fff9e8;
    font-family: inherit;
    text-align: left;
    text-shadow: 0 1px 1px rgba(67, 38, 25, .55);
    box-shadow: 0 3px 8px rgba(70, 43, 28, .24);
}
.mv-evidence-action.mv-cozy-button:active {
    transform: translateY(2px);
    border-bottom-width: 1px;
}
.mv-evidence-action.mv-cozy-button:disabled {
    opacity: .64;
}
.mv-evidence-board[data-finished="true"] .mv-evidence-summary {
    background: color-mix(in srgb, #dce8cf 48%, transparent);
}
[data-theme="night"] .mv-evidence-board {
    background: color-mix(in srgb, var(--atlas-paper, #e9ddbc) 86%, #263943);
}
[data-theme="night"] .mv-evidence-footer {
    background: color-mix(in srgb, var(--atlas-paper, #e9ddbc) 82%, #263943);
}
@media (max-height: 740px) {
    .mv-evidence-summary {
        min-height: 70px;
        padding-block: 6px;
    }
    .mv-evidence-preview { height: 32px; }
    .mv-evidence-card { min-height: 92px; }
    .mv-evidence-body { max-height: calc(100dvh - 174px); }
}

/* 地圖模式：進行中活動卡浮在地圖底部（不佔版面、不撐出捲軸）；地圖固定=主城感 */
.mv-scene-mapmode > .mv-ongoing:not([hidden]) {
    position: absolute;
    left: var(--sp-3); right: var(--sp-3);
    bottom: calc(var(--sp-3) + var(--mv-safe-bottom));
    z-index: 5;
    padding: var(--sp-2) var(--sp-3);
    background: color-mix(in srgb, var(--paper-card) 88%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px var(--shadow-ink-strong);
}

/* 地圖節點：發光 pin＋標籤膠囊。座標由 JS 設 left/top（%），translate 置中對準地標。
   affordance 鐵律：脈動光暈＋按鈕感＝一眼知道能按。觸控 ≥44px。 */
.mv-map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: var(--touch-min); min-height: var(--touch-min);
    padding: 0; border: none; background: none; cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mv-map-node-pin {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    font-size: 24px; line-height: 1;
    background: var(--paper-card);
    border: 2px solid var(--accent-warm);
    border-radius: 50%;
    box-shadow: 0 2px 6px var(--shadow-ink-strong), 0 0 0 0 var(--glow-moon);
    animation: mv-node-pulse 2.4s ease-in-out infinite;
    overflow: hidden;
}
/* 節點 pin 內的水彩 img：填滿圓框(比 registry 預設 30 大)、圓形裁切 */
.mv-map-node-pin-img {
    width: 40px !important; height: 40px !important;
    border-radius: 50%;
}
@keyframes mv-node-pulse {
    0%, 100% { box-shadow: 0 2px 6px var(--shadow-ink-strong), 0 0 0 0 rgba(217, 160, 91, .5); }
    50%      { box-shadow: 0 2px 6px var(--shadow-ink-strong), 0 0 0 8px rgba(217, 160, 91, 0); }
}
.mv-map-node-label {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px;
    background: var(--paper-card); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-chip);
    font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
    box-shadow: 0 1px 3px var(--shadow-ink);
}
/* 「多動作」暗示：小圓點（取代語意不明的數字徽章 — Chief #2）。
   只表示「這裡有多樣事可做」，不硬塞數字。 */
.mv-map-node-more {
    width: 5px; height: 5px; margin-left: 4px;
    background: var(--accent-warm); border-radius: 50%;
    box-shadow: 6px 0 0 -1px var(--accent-warm);
}
.mv-map-node:active .mv-map-node-pin { transform: scale(.9); }
/* 鎖住節點：灰階＋去脈動＋鎖感（看得到目標但點了出提示） */
.mv-map-node-locked .mv-map-node-pin {
    filter: grayscale(1); opacity: .55; border-color: var(--line);
    animation: none;
}
.mv-map-node-locked .mv-map-node-label { opacity: .6; }
@media (prefers-reduced-motion: reduce) {
    .mv-map-node-pin { animation: none; }
}

/* 節點 sheet 標題（復用 .mv-sheet 版型） */
.mv-node-sheet-title { display: flex; align-items: center; gap: var(--sp-2); }

.mv-loc-name-row { display: flex; align-items: center; gap: var(--sp-2); }
.mv-loc-name-row h2 { font-size: var(--text-lg); }
.mv-light { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mv-light[data-level="safe"] { background: var(--safe); }
.mv-light[data-level="warn"] { background: var(--warn); }
.mv-light[data-level="danger"] { background: var(--danger); }
.mv-loc-desc { color: var(--ink-soft); font-size: var(--text-sm); margin-top: var(--sp-1); }
.mv-loc-types { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.mv-chip {
    background: var(--mv-tf-button-secondary) center / 100% 100% no-repeat;
    border: none;
    border-radius: var(--radius-chip);
    padding: 0 var(--sp-3);
    font-size: var(--text-xs);
    color: var(--ink-soft);
}

/* scene: action cards */
.mv-actions { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.mv-action-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-action-group h3 { font-size: var(--text-xs); color: var(--ink-soft); font-weight: 400; letter-spacing: 2px; }
.mv-action {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-3);
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform 150ms ease-out;
}
.mv-action:active { transform: scale(.97); box-shadow: 0 1px 2px var(--shadow-ink), inset 0 2px 4px var(--shadow-ink); }
.mv-action-icon { font-size: var(--text-lg); flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; }
.mv-action-icon .mv-icon { width: 28px; height: 28px; }
.mv-action-text { display: flex; flex-direction: column; min-width: 0; }
.mv-action-sub { font-size: var(--text-xs); color: var(--ink-soft); }
.mv-action-off { opacity: .45; cursor: default; }
.mv-action-off.mv-action-route { opacity: .78; cursor: pointer; }
.mv-action-dev { opacity: .55; }
.mv-action-dev::after { content: "\1f6a7"; margin-left: auto; }

/* scene: ongoing activity card */
/* [hidden] 會被下面的 display:flex 蓋掉（同 mv-sheet-overlay 的坑）— 必須補回 */
.mv-ongoing[hidden] { display: none; }
.mv-ongoing {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--paper-card);
    border: 1px solid var(--moon);
    border-radius: var(--radius-card);
    box-shadow: 0 -2px 12px rgba(62, 58, 51, .08);
}
.mv-ongoing-body { flex: 1; min-width: 0; }
.mv-ongoing-title { font-weight: 700; }
.mv-ongoing-info { font-size: var(--text-xs); color: var(--ink-soft); }
.mv-ongoing-bar { height: 6px; margin-top: var(--sp-1); background: var(--line); border-radius: var(--radius-chip); overflow: hidden; }
.mv-ongoing-bar-fill { height: 100%; width: 0; background: var(--moon); transition: width 200ms ease-out; }
.mv-ongoing-stop {
    flex: none;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0 var(--sp-4);
    border: none;
    border-radius: var(--radius-card);
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    color: #fff;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--glow-moon);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: transform 120ms ease-out;
}
.mv-ongoing-stop:active { transform: scale(.95); box-shadow: 0 1px 3px var(--glow-moon); }

/* harvest timeline (Phase 2) */
.mv-log-panel { display: flex; flex-direction: column; gap: var(--sp-2); min-height: 100%; }
.mv-journal-log-summary {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-2);
    min-height: 62px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--paper-card) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
    border-radius: 18px;
    box-shadow: 0 5px 16px rgba(86,61,39,.13), inset 0 1px 0 rgba(255,255,255,.42);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.mv-journal-log-summary > span { display: flex; flex-direction: column; min-width: 0; }
.mv-journal-log-summary strong { font-size: var(--text-md); color: var(--ink); }
.mv-journal-log-summary small { font-size: 10px; color: var(--ink-soft); letter-spacing: 1px; }
.mv-journal-entry-count {
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-card) 82%, var(--stamina));
    color: var(--moon-deep);
    font-size: 11px;
    white-space: nowrap;
}
.mv-harvest-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 3px 0 24px;
}
.mv-harvest-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 8px;
    left: 23px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(120,91,62,.12), rgba(120,91,62,.55), rgba(120,91,62,.12));
}
.mv-harvest-timeline.mv-is-empty::before { display: none; }
.mv-log-row {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-2);
    padding: 0;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    overflow: visible;
}
.mv-harvest-node {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(108,139,95,.62);
    border-radius: 50%;
    background: color-mix(in srgb, var(--paper-card) 88%, transparent);
    box-shadow: 0 3px 10px rgba(76,55,40,.17), inset 0 1px 0 rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.mv-harvest-row[data-group="combat"] .mv-harvest-node { border-color: rgba(177,94,86,.7); }
.mv-harvest-row[data-group="growth"] .mv-harvest-node { border-color: rgba(143,105,184,.72); }
.mv-harvest-row[data-group="events"] .mv-harvest-node { border-color: rgba(191,136,60,.72); }
.mv-harvest-card {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 9px 11px 10px;
    background: color-mix(in srgb, var(--paper-card) 87%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 9px 17px 17px 14px;
    box-shadow: 0 3px 11px rgba(76,55,40,.12), inset 0 1px 0 rgba(255,255,255,.42);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.mv-harvest-header {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--text-xs); color: var(--ink-soft);
}
.mv-harvest-label { font-weight: 800; letter-spacing: 1.5px; color: var(--ink); }
.mv-harvest-ts { margin-left: auto; font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap; }
.mv-harvest-body { font-size: var(--text-sm); line-height: 1.45; }
.mv-harvest-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.mv-harvest-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 5px;
    background: color-mix(in srgb, var(--paper-card) 74%, var(--stamina));
    border: 1px solid color-mix(in srgb, var(--line) 65%, var(--stamina));
    border-radius: 12px;
    font-size: var(--text-xs);
}
.mv-harvest-chip > span { min-width: 0; }
.mv-harvest-chip b { color: var(--moon-deep); margin-left: 2px; white-space: nowrap; }
.mv-harvest-chip .mv-icon { flex: none; }
.mv-harvest-loc { font-weight: 800; font-size: var(--text-sm); color: var(--ink); }
.mv-harvest-kills { font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.35; }
.mv-harvest-gold {
    display: inline-flex; align-items: center; gap: 4px;
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-card) 76%, #f2c56f);
    font-size: var(--text-xs); color: var(--accent-warm); font-weight: 700;
}
.mv-log-row[data-harvest-type="levelup"] .mv-harvest-card {
    background: linear-gradient(90deg, color-mix(in srgb, var(--paper-card) 85%, var(--xp)) 0%, var(--paper-card) 40%);
    box-shadow: 0 4px 14px rgba(76,55,40,.14), inset 0 1px 0 rgba(255,255,255,.4), inset 3px 0 10px color-mix(in srgb, var(--xp) 18%, transparent);
}
.mv-harvest-lvup-line { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); }
.mv-harvest-offline { opacity: .78; }
.mv-harvest-separator {
    min-height: 30px;
    margin-left: 48px;
    display: grid;
    place-items: center;
    background: var(--mv-tf-button-secondary) center / 100% 100% no-repeat;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: 2px;
}
.mv-filterchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--sp-2); }
.mv-filterchips .mv-chip-toggle { width: 100%; min-height: 46px; align-self: auto; padding: 6px 18px; color: #4b3c34; }
.mv-filterchips .mv-chip-toggle.mv-on { color: #fff; outline: 0; }
.mv-journal-empty[hidden] { display: none; }
.mv-journal-empty {
    min-height: 255px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 22px 32px 64px;
    text-align: center;
    color: var(--ink-soft);
}
.mv-journal-empty > .mv-icon { filter: drop-shadow(0 6px 10px rgba(80,55,38,.22)); }
.mv-journal-empty strong { font-size: var(--text-lg); color: var(--ink); letter-spacing: 1px; }
.mv-journal-empty > span:last-child { max-width: 245px; font-size: var(--text-xs); line-height: 1.55; }
.mv-harvest-timeline.mv-hide-loot > [data-group="loot"],
.mv-harvest-timeline.mv-hide-combat > [data-group="combat"],
.mv-harvest-timeline.mv-hide-growth > [data-group="growth"],
.mv-harvest-timeline.mv-hide-events > [data-group="events"] { display: none; }

/* 技能 screen V2：空白清單改成可探索的成長場景；有技能後收成短 hero 區與牌組。
   背景上的六個平台是 GPT Image 2 為互動節點預留的構圖，不是裝飾底圖。 */
.mv-skills { padding: 0; min-height: 100%; overflow: hidden; }
.mv-skills.mv-active { display: flex; flex-direction: column; min-height: 100%; }
.mv-skills-hero {
    position: relative;
    flex: none;
    min-height: 168px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,248,231,.08) 0%, rgba(49,37,31,.08) 55%, rgba(49,37,31,.58) 100%),
        url("/resources/img/backgrounds/bg-skills-path-clean-cel-v1.webp") center 38% / cover no-repeat;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(48,35,28,.16);
}
.mv-skills:not(.mv-has-skills) .mv-skills-hero { min-height: 100%; flex: 1; background-position: center; }
[data-theme="night"] .mv-skills-hero {
    background-image:
        linear-gradient(180deg, rgba(26,30,47,.34) 0%, rgba(26,30,47,.24) 55%, rgba(18,21,34,.72) 100%),
        url("/resources/img/backgrounds/bg-skills-path-clean-cel-v1.webp");
}
.mv-skills-hero-copy {
    position: relative;
    z-index: 3;
    padding: var(--sp-4);
    padding-right: 108px;
    color: #49362c;
    text-shadow: 0 1px 1px rgba(255,251,239,.85), 0 2px 8px rgba(255,244,214,.55);
}
[data-theme="night"] .mv-skills-hero-copy { color: #fff5df; text-shadow: 0 2px 8px rgba(14,16,28,.85); }
.mv-screen-kicker {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    color: #916443;
}
[data-theme="night"] .mv-screen-kicker { color: #f2c98f; }
.mv-skills-hero-copy h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; letter-spacing: .02em; }
.mv-skills-hero-copy p { margin: 4px 0 0; max-width: 240px; font-size: var(--text-xs); line-height: 1.45; }
.mv-skills-awakened {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-height: 44px;
    padding: 7px 12px;
    border: 1px solid rgba(139,96,59,.38);
    border-radius: 999px;
    background: rgba(255,248,230,.78);
    box-shadow: 0 3px 12px rgba(62,43,31,.14), inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter: blur(8px);
    font-size: 10px;
    text-shadow: none;
}
.mv-skills-awakened strong { font-size: 1.25rem; color: #845b9b; }
.mv-skills-awakened span { color: #806d62; }
.mv-skill-path-preview { position: absolute; inset: 0; z-index: 2; }
.mv-has-skills .mv-skill-path-preview { display: none; }
.mv-skill-preview-node {
    position: absolute;
    left: var(--node-x);
    top: var(--node-y);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    padding: 0;
    border: 2px solid rgba(255,237,187,.92);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.96), rgba(251,225,169,.9) 58%, rgba(153,102,67,.92));
    color: #4d392e;
    box-shadow: 0 5px 16px rgba(62,42,28,.3), inset 0 2px 4px rgba(255,255,255,.85), 0 0 0 5px rgba(255,234,184,.18);
    cursor: pointer;
    transition: transform 120ms ease-out, filter 160ms ease-out;
}
.mv-skill-preview-node::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(255,239,190,.62);
    border-radius: 50%;
}
.mv-skill-preview-node .mv-icon { filter: drop-shadow(0 2px 2px rgba(64,43,31,.2)); }
.mv-skill-preview-node > span {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 54px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(55,42,34,.82);
    color: #fff8e8;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 2px 7px rgba(48,33,25,.24);
}
.mv-skill-preview-node.mv-recommended { animation: mv-skill-pulse 2.2s ease-in-out infinite; }
.mv-skill-preview-node.mv-recommended::after {
    content: "先從這裡";
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 999px;
    background: #76568f;
    color: white;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(71,48,82,.3);
}
.mv-skill-preview-node:active { transform: translate(-50%, -50%) scale(.9); filter: brightness(1.05); }
@keyframes mv-skill-pulse {
    0%, 100% { box-shadow: 0 5px 16px rgba(62,42,28,.3), inset 0 2px 4px rgba(255,255,255,.85), 0 0 0 5px rgba(255,234,184,.18); }
    50% { box-shadow: 0 7px 20px rgba(62,42,28,.34), inset 0 2px 4px rgba(255,255,255,.85), 0 0 0 10px rgba(203,172,230,.24); }
}
.mv-skill-path-hint {
    position: absolute;
    left: 50%;
    bottom: var(--sp-4);
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 8px 14px;
    border: 1px solid rgba(255,243,211,.34);
    border-radius: 999px;
    background: rgba(50,39,33,.76);
    color: #fff8e9;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 4px 14px rgba(43,30,24,.24);
    backdrop-filter: blur(8px);
}
.mv-skills-deck {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: -18px;
    padding: var(--sp-4);
    border-radius: 24px 24px 0 0;
    background:
        linear-gradient(rgba(246,241,231,.94), rgba(246,241,231,.97)),
        url("/resources/img/texture-parchment.png") center / cover;
    box-shadow: 0 -8px 24px rgba(55,40,30,.18), inset 0 1px 0 rgba(255,255,255,.72);
}
[data-theme="night"] .mv-skills-deck {
    background:
        linear-gradient(rgba(35,42,61,.94), rgba(35,42,61,.97)),
        url("/resources/img/texture-parchment.png") center / cover;
}
.mv-skills:not(.mv-has-skills) .mv-skills-deck { display: none; }
.mv-skill-list:not(:empty) ~ .mv-empty { display: none; }
.mv-catchips {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: var(--sp-1);
    scrollbar-width: none;
}
.mv-catchips::-webkit-scrollbar { display: none; }
.mv-catchip {
    flex: 0 0 auto;
    min-height: var(--touch-min);
    color: var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, transform 100ms ease-out;
    background: var(--mv-tf-button-secondary) center / 100% 100% no-repeat;
    border: none;
    box-shadow: 0 1px 3px var(--shadow-ink);
}
.mv-catchip:active { transform: scale(.95); }
.mv-catchip.mv-active {
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px var(--glow-moon);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.mv-skill-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.mv-skill-section.mv-filtered-out { display: none; }
.mv-skill-header { color: var(--ink-soft); font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.mv-skill-box { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mv-skill-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    width: 100%;
    text-align: center;
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--sp-3) var(--sp-2);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    cursor: pointer;
    min-height: 140px;
    box-shadow: 0 2px 6px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform 120ms ease-out;
}
.mv-skill-row:active { transform: scale(.97); box-shadow: 0 1px 3px var(--shadow-ink), inset 0 2px 4px var(--shadow-ink); }
.mv-skill-emblem {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    margin-bottom: var(--sp-1);
}
.mv-skill-emblem .mv-icon { width: 48px; height: 48px; }
.mv-skill-body { flex: 1; min-width: 0; width: 100%; }
.mv-skill-top { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mv-skill-name { font-weight: 600; font-size: var(--text-sm); }
.mv-skill-lv { color: var(--ink-soft); font-size: var(--text-xs); white-space: nowrap; }
.mv-bar-xp { height: 8px; border-radius: var(--radius-bar); box-shadow: inset 0 1px 2px var(--bar-inset); }
.mv-bar-xp > .mv-bar-fill {
    background: linear-gradient(180deg, #C49FE8 0%, var(--xp) 50%, #9070B8 100%);
    border-radius: var(--radius-bar);
    transition: width 160ms ease-out;
}
.mv-bar-xp > .mv-bar-fill::after {
    content: ""; position: absolute; inset: 0 0 50% 0;
    background: linear-gradient(rgba(255,255,255,.35), transparent);
    border-radius: var(--radius-bar) var(--radius-bar) 0 0;
}
.mv-skill-capped .mv-bar-xp > .mv-bar-fill { background: linear-gradient(180deg, #E8C06A 0%, var(--accent-warm) 50%, #B8802A 100%); }
.mv-skill-sub {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    color: var(--ink-soft);
    font-size: var(--text-xs);
    margin-top: var(--sp-1);
}
.mv-skill-desc { font-size: var(--text-sm); white-space: pre-line; }
.mv-skill-flavour { color: var(--ink-soft); font-size: var(--text-sm); font-style: italic; }
.mv-skill-effect { font-size: var(--text-sm); white-space: pre-line; }
.mv-skill-rewards h4, .mv-bestiary-drops h4 { margin-bottom: var(--sp-1); }
.mv-skill-rewards { font-size: var(--text-sm); }
.mv-skill-next { color: var(--moon-deep); font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) {
    .mv-bar-xp > .mv-bar-fill { transition: none; }
    .mv-skill-preview-node.mv-recommended { animation: none; }
}

/* 背包 screen（M3）：物品格網＋品質色框＋裝備列表＋書架 */
.mv-bag-items.mv-active { display: flex; flex-direction: column; gap: var(--sp-3); }
/* 物品/書架空狀態由 JS 控制（分類過濾/隱藏列讓 :empty 不可靠，codex P3） */
.mv-item-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    min-height: 480px;
}
.mv-item-ghost {
    min-height: 96px;
    border: none;
    border-radius: 0;
    opacity: 0.5;
    background: url("/resources/ui/slot-empty.png") center / contain no-repeat;
}
.mv-item-cell {
    position: relative;
    min-height: 96px;
    background: url("/resources/ui/slot-empty.png") center / contain no-repeat;
    border: none;
    border-radius: 0;
    padding: 10px 8px 6px;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    cursor: pointer;
    box-shadow: none;
    transition: transform 120ms ease-out;
}
.mv-item-cell:active { transform: scale(.96); }
.mv-item-icon {
    font-size: 1.4rem;
    line-height: 1;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: rgba(0,0,0,.04);
    flex-shrink: 0;
}
.mv-item-icon .mv-icon { width: 40px; height: 40px; }
.mv-item-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: center; }
/* 品質色框：左邊條+微光暈（SPEC D rarity frames） */
.mv-item-cell[data-rarity="trash"] { border-left: 3px solid #C9C4B9; }
.mv-item-cell[data-rarity="uncommon"] { border-left: 3px solid #5BA974; box-shadow: inset 0 0 6px rgba(91,169,116,.15); }
.mv-item-cell[data-rarity="rare"] { border-left: 3px solid #6B7FD4; box-shadow: inset 0 0 6px rgba(107,127,212,.18); }
.mv-item-cell[data-rarity="epic"] { border-left: 3px solid #B08FD4; box-shadow: inset 0 0 8px rgba(176,143,212,.2); }
.mv-item-cell[data-rarity="legendary"] { border-left: 3px solid #D9A05B; box-shadow: inset 0 0 10px rgba(217,160,91,.22); }
.mv-item-cell[data-rarity="mythical"] { border-left: 4px solid #D98B5B; box-shadow: inset 0 0 12px rgba(217,139,91,.25); }
.mv-item-name { font-weight: 600; overflow-wrap: anywhere; font-size: var(--text-xs); }
.mv-item-meta { color: var(--ink-soft); font-size: 0.65rem; }
.mv-item-count { color: var(--ink-soft); font-size: var(--text-xs); font-weight: 700; }
.mv-item-fav { position: absolute; top: 2px; right: 6px; color: var(--accent-warm); display: none; font-size: var(--text-xs); }
.mv-item-cell.mv-faved > .mv-item-fav { display: block; }
/* 分類 chips 過濾：非當前分類的格子藏起 */
.mv-item-grid[data-cat="equip"] > .mv-item-cell:not([data-cat="equip"]),
.mv-item-grid[data-cat="usable"] > .mv-item-cell:not([data-cat="usable"]),
.mv-item-grid[data-cat="material"] > .mv-item-cell:not([data-cat="material"]),
.mv-item-grid[data-cat="book"] > .mv-item-cell:not([data-cat="book"]),
.mv-item-grid[data-cat="other"] > .mv-item-cell:not([data-cat="other"]) { display: none; }

.mv-equip-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-equip-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: var(--touch-min);
    align-items: center;
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--sp-2) var(--sp-3);
    font-family: inherit;
    font-size: var(--text-md);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 3px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.25);
}
.mv-equip-row.mv-equip-empty { color: var(--ink-soft); cursor: default; }
.mv-equip-slot { color: var(--ink-soft); font-size: var(--text-sm); white-space: nowrap; }
.mv-equip-name { text-align: right; overflow-wrap: anywhere; }
.mv-equip-row[data-rarity="rare"] .mv-equip-name { color: var(--moon-deep); }
.mv-equip-row[data-rarity="epic"] .mv-equip-name { color: #8F6BB8; }
.mv-equip-row[data-rarity="legendary"] .mv-equip-name { color: var(--accent-warm); }

.mv-book-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-book-row {
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--sp-2) var(--sp-3);
    box-shadow: 0 1px 3px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.25);
}
.mv-book-head { display: flex; justify-content: space-between; gap: var(--sp-2); }
.mv-book-title { font-weight: 600; }
.mv-book-badge { color: var(--stamina); font-size: var(--text-sm); white-space: nowrap; }
.mv-book-body { color: var(--ink-soft); font-size: var(--text-sm); margin-top: var(--sp-1); }

/* 物品詳情 sheet：tooltip 內容＋底部動作大按鈕 */
.mv-item-tooltip { font-size: var(--text-sm); max-height: 40vh; overflow-y: auto; }
.mv-item-tooltip-title { color: #263f46; font-weight: 850; }
.mv-item-rarity-trash { color: #59615f; }
.mv-item-rarity-common { color: #24434b; }
.mv-item-rarity-uncommon { color: #2f694b; }
.mv-item-rarity-rare { color: #245b83; }
.mv-item-rarity-epic { color: #70456e; }
.mv-item-rarity-legendary { color: #7b4a12; }
.mv-item-rarity-mythical { color: #8c3b28; }
.mv-item-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.mv-item-hint, .mv-map-hint { width: 100%; margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--ink-soft); }
.mv-item-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1 1 40%;
    min-height: var(--touch-min);
    background: var(--mv-tf-button-secondary) center / 100% 100% no-repeat;
    border: none;
    border-radius: var(--radius-card);
    font-family: inherit;
    font-size: var(--text-md);
    color: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 4px var(--shadow-ink);
}
.mv-item-action .mv-icon { flex: none; object-fit: contain; }
.mv-item-action-primary {
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    border: none;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px var(--glow-moon);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.mv-item-action-primary:active { transform: scale(.96); box-shadow: 0 1px 3px var(--glow-moon); }
.mv-item-action.mv-on { outline: 2px solid var(--moon-deep); outline-offset: -2px; color: var(--moon-deep); font-weight: 700; }
.mv-item-action-primary.mv-on { color: #fff; }

/* Backpack V2 — the inventory is a physical watercolor satchel, not a web grid.
   The art owns the screen; item buttons sit on the stitched interior and the
   selected-item action dock stays in the bottom thumb zone. */
.mv-screens:has(.mv-bag.mv-active) { overflow: hidden; }
.mv-screen.mv-bag {
    height: 100%;
    min-height: 100%;
    padding: 0;
    overflow: hidden;
}
.mv-screen.mv-bag.mv-active { display: block; }
.mv-screen.mv-bag::before { opacity: 0; }
.mv-bag > .mv-subtabs {
    position: absolute;
    z-index: 9;
    top: 8px;
    left: 10px;
    right: 10px;
    margin: 0;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 18px;
    background: color-mix(in srgb, var(--paper-card) 80%, transparent);
    box-shadow: 0 4px 14px rgba(72,50,34,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mv-bag > .mv-subtabs .mv-subtab {
    min-height: 44px;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.mv-bag > .mv-subtabs .mv-subtab .mv-icon { flex: none; }
.mv-bag > .mv-subtabs .mv-subtab.mv-active {
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    box-shadow: 0 3px 10px rgba(72,50,34,.2);
}
.mv-bag > .mv-journal-panel { min-height: 100%; height: 100%; }
.mv-bag > .mv-bag-equipment.mv-active,
.mv-bag > .mv-bag-books.mv-active {
    display: flex;
    padding: 70px var(--sp-3) var(--sp-4);
    overflow-y: auto;
}
.mv-bag-items.mv-active {
    position: relative;
    display: block;
    height: 100%;
    min-height: 100%;
}
.mv-bag-stage {
    --mv-bag-selection-height: 78px;
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
}
.mv-bag-stage.mv-has-selection { --mv-bag-selection-height: 192px; }
.mv-bag-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(45,29,18,.16) 0%, transparent 25%, transparent 66%, rgba(48,31,20,.32) 100%);
}
.mv-bag-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    filter: saturate(.88) brightness(.94);
    transform: scale(1.01);
    user-select: none;
    -webkit-user-drag: none;
}
[data-theme="night"] .mv-bag-art {
    filter: saturate(.72) brightness(.52) contrast(1.08) hue-rotate(8deg);
}
.mv-bag-capacity {
    position: absolute;
    z-index: 5;
    top: 66px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 5px 15px 5px 9px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 24px;
    background: color-mix(in srgb, var(--paper-card) 84%, transparent);
    box-shadow: 0 3px 12px rgba(57,35,20,.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}
.mv-bag-capacity > span { display: flex; flex-direction: column; line-height: 1.05; }
.mv-bag-capacity b { font-size: var(--text-sm); }
.mv-bag-capacity small { color: var(--ink-soft); font-size: 10px; }
.mv-bag-stage > .mv-catchips {
    position: absolute;
    z-index: 5;
    top: 118px;
    left: 10px;
    right: 10px;
    padding: 2px 2px 6px;
}
.mv-bag-stage > .mv-catchips .mv-catchip {
    min-height: var(--touch-min);
    padding: 0 11px;
    background: color-mix(in srgb, var(--paper-card) 84%, transparent);
    border: 1px solid rgba(255,255,255,.38);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.mv-bag-stage > .mv-catchips .mv-catchip .mv-icon {
    flex: none;
    filter: saturate(.82);
}
.mv-bag-stage > .mv-catchips .mv-catchip.mv-active {
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    border-color: transparent;
}
.mv-bag-board {
    position: absolute;
    z-index: 3;
    top: 168px;
    left: 14%;
    right: 14%;
    bottom: calc(var(--mv-bag-selection-height) + 10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    mask-image: linear-gradient(transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
    padding: 14px 0 20px;
}
.mv-bag-board::-webkit-scrollbar { display: none; }
.mv-bag .mv-item-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(52px, 62px));
    justify-content: center;
    align-content: start;
    gap: 8px 6px;
    min-height: 0;
}
.mv-bag .mv-item-cell,
.mv-bag .mv-item-ghost {
    width: 58px;
    height: 58px;
    min-height: 58px;
    border-radius: 50%;
}
.mv-bag .mv-item-ghost {
    opacity: .5;
    background: radial-gradient(circle, rgba(255,247,221,.08) 50%, rgba(88,54,33,.18) 53%, transparent 57%);
}
.mv-bag .mv-item-cell {
    padding: 4px;
    overflow: visible;
    background: radial-gradient(circle at 42% 34%, rgba(255,253,239,.94), rgba(238,205,153,.88) 70%, rgba(130,82,45,.78) 74%, rgba(83,51,31,.74) 78%, transparent 80%);
    border: none;
    box-shadow: 0 3px 7px rgba(56,34,20,.28), inset 0 2px 0 rgba(255,255,255,.55);
}
.mv-bag .mv-item-cell:active { transform: scale(.9); }
.mv-bag .mv-item-cell.mv-selected {
    transform: translateY(-3px) scale(1.12);
    box-shadow: 0 5px 14px rgba(52,33,23,.36), 0 0 0 3px var(--moon), 0 0 0 7px rgba(255,241,191,.42);
    z-index: 2;
}
.mv-bag .mv-item-icon {
    width: 46px;
    height: 46px;
    background: none;
}
.mv-bag .mv-item-icon .mv-icon { width: 44px; height: 44px; }
.mv-bag .mv-item-icon .mv-icon[src*="/indigolay/"] {
    filter: saturate(.82) brightness(1.03) drop-shadow(0 2px 2px rgba(69,43,25,.2));
}
.mv-bag .mv-item-info { display: none; }
.mv-bag .mv-item-count {
    position: absolute;
    right: -5px;
    bottom: -3px;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid rgba(255,248,226,.9);
    border-radius: 12px;
    background: #6b4936;
    color: #fff8e9;
    font-size: 10px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(46,29,18,.28);
}
.mv-bag .mv-item-count:empty { display: none; }
.mv-bag .mv-item-fav {
    z-index: 2;
    top: -6px;
    right: -4px;
    width: 20px;
    height: 20px;
}
.mv-bag .mv-item-fav .mv-icon { width: 18px; height: 18px; }
.mv-bag-stage > .mv-empty {
    position: absolute;
    z-index: 4;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 70%;
    padding: 8px 14px;
    border-radius: 18px;
    background: rgba(255,246,221,.76);
    color: #72513c;
    box-shadow: 0 2px 9px rgba(60,36,20,.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="night"] .mv-bag-stage > .mv-empty { background: rgba(43,49,73,.84); color: var(--ink); }
.mv-bag-selection {
    position: absolute;
    z-index: 7;
    left: 8px;
    right: 8px;
    bottom: 6px;
    min-height: 70px;
    padding: 9px 12px calc(9px + var(--mv-safe-bottom));
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 24px 24px 16px 16px;
    background:
        linear-gradient(rgba(250,238,211,.94), rgba(242,217,177,.96)),
        url("/resources/img/texture-parchment.png") center / cover;
    box-shadow: 0 -7px 24px rgba(55,33,20,.24), inset 0 1px 0 rgba(255,255,255,.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="night"] .mv-bag-selection {
    border-color: rgba(202,210,244,.18);
    background:
        linear-gradient(rgba(43,50,76,.96), rgba(35,42,65,.97)),
        url("/resources/img/texture-parchment.png") center / cover;
    box-shadow: 0 -7px 24px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}
.mv-bag-selection-idle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    color: var(--ink-soft);
    font-size: var(--text-sm);
}
.mv-bag-selection[data-state="idle"] .mv-bag-selected-main,
.mv-bag-selection[data-state="idle"] .mv-bag-action-dock,
.mv-bag-selection[data-state="idle"] .mv-bag-selection-close { display: none; }
.mv-bag-selection[data-state="selected"] .mv-bag-selection-idle { display: none; }
.mv-bag-selection-close {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 124px;
    min-height: 44px;
    padding: 6px 14px;
    font-size: var(--text-xs);
}
.mv-bag-selected-main {
    display: flex;
    align-items: center;
    min-height: 74px;
    gap: 12px;
    padding-right: 126px;
}
.mv-bag-selected-icon {
    display: grid;
    place-items: center;
    width: 82px;
    height: 74px;
    flex: none;
    margin-top: -24px;
    border-radius: 22px;
    background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,222,165,.72) 62%, rgba(138,87,48,.28) 66%, transparent 70%);
    filter: drop-shadow(0 5px 6px rgba(71,43,24,.22));
}
.mv-bag-selected-icon .mv-icon { width: 72px !important; height: 72px !important; }
.mv-bag-selected-copy { display: flex; flex-direction: column; min-width: 0; }
.mv-bag-selected-copy strong { font-size: 1.04rem; line-height: 1.2; }
.mv-bag-selected-copy span { margin-top: 3px; color: var(--ink-soft); font-size: var(--text-xs); }
.mv-bag-selection .mv-item-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 0;
}
.mv-bag-selection .mv-item-action {
    min-height: 46px;
    font-size: var(--text-sm);
}
[data-theme="night"] .mv-bag-selection .mv-item-action:not(.mv-item-action-primary) {
    color: #5d402e;
}
.mv-bag-selection .mv-item-hint { display: none; }
.mv-bag-details { margin-top: 2px; }
.mv-bag-details > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    color: var(--ink-soft);
    font-size: var(--text-xs);
    cursor: pointer;
    list-style: none;
}
.mv-bag-details > summary::-webkit-details-marker { display: none; }
.mv-bag-details > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: -4px 0 0 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 120ms ease-out;
}
.mv-bag-details[open] > summary::after { transform: rotate(225deg); }
.mv-bag-tooltip {
    max-height: 22vh;
    overflow-y: auto;
    padding: 8px 4px 2px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--text-xs);
    user-select: text;
    -webkit-user-select: text;
}
@media (max-height: 740px) {
    .mv-bag-stage.mv-has-selection { --mv-bag-selection-height: 180px; }
    .mv-bag-board { top: 162px; left: 10%; right: 10%; }
    .mv-bag .mv-item-cell, .mv-bag .mv-item-ghost { width: 54px; height: 54px; min-height: 54px; }
    .mv-bag .mv-item-icon { width: 42px; height: 42px; }
    .mv-bag .mv-item-icon .mv-icon { width: 40px; height: 40px; }
    .mv-bag-selected-main { min-height: 66px; }
    .mv-bag-selected-icon { width: 72px; height: 66px; }
    .mv-bag-selected-icon .mv-icon { width: 64px !important; height: 64px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .mv-bag .mv-item-cell { transition: none; }
}

/* Backpack equipment V3 — pictorial loadout grid. Equipment is recognized
   by silhouette and item art first; labels only confirm what the picture says. */
.mv-bag > .mv-bag-equipment.mv-active {
    display: block;
    padding: 70px 10px calc(16px + var(--mv-safe-bottom));
    background:
        linear-gradient(180deg, rgba(250,243,224,.72), rgba(239,221,188,.9)),
        url("/resources/img/backgrounds/bg-backpack-v2.webp") center 44% / cover no-repeat;
    overflow-y: auto;
    overscroll-behavior: contain;
}
[data-theme="night"] .mv-bag > .mv-bag-equipment.mv-active {
    background:
        linear-gradient(180deg, rgba(35,42,63,.78), rgba(30,36,56,.94)),
        url("/resources/img/backgrounds/bg-backpack-v2.webp") center 44% / cover no-repeat;
}
.mv-equip-intro {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    margin: 2px 2px 10px;
    padding: 9px 15px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 18px;
    background: color-mix(in srgb, var(--paper-card) 86%, transparent);
    box-shadow: 0 3px 12px rgba(57,35,20,.17);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mv-equip-intro strong { font-size: var(--text-md); }
.mv-equip-intro span { color: var(--ink-soft); font-size: 11px; text-align: right; }
.mv-bag-equipment .mv-equip-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 6px;
    padding-bottom: 8px;
}
.mv-bag-equipment .mv-equip-row {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 104px;
    padding: 8px 5px 7px;
    border: 0;
    border-radius: 0;
    background: url("/resources/ui/slot-empty.png") center / 100% 100% no-repeat;
    box-shadow: none;
    overflow: hidden;
}
.mv-bag-equipment .mv-equip-row:not(:disabled):active { transform: scale(.94); }
.mv-bag-equipment .mv-equip-row.mv-equip-empty {
    opacity: .72;
    color: var(--ink-soft);
}
.mv-bag-equipment .mv-equip-art {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex: none;
}
.mv-bag-equipment .mv-equip-art .mv-icon {
    width: 58px !important;
    height: 58px !important;
    object-fit: contain;
    filter: saturate(.82) brightness(1.03) drop-shadow(0 2px 2px rgba(69,43,25,.2));
}
.mv-bag-equipment .mv-equip-art .mv-equip-placeholder {
    width: 38px !important;
    height: 38px !important;
    opacity: .48;
    filter: sepia(.28) saturate(.6);
}
.mv-bag-equipment .mv-equip-slot {
    width: 100%;
    color: var(--ink);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
.mv-bag-equipment .mv-equip-name {
    width: 100%;
    min-height: 11px;
    margin-top: 2px;
    color: var(--ink-soft);
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mv-bag-equipment .mv-equip-row[data-rarity="rare"],
.mv-bag-equipment .mv-equip-row[data-rarity="epic"],
.mv-bag-equipment .mv-equip-row[data-rarity="legendary"],
.mv-bag-equipment .mv-equip-row[data-rarity="mythical"] {
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--moon) 55%, transparent));
}
@media (max-height: 740px) {
    .mv-bag-equipment .mv-equip-row { min-height: 96px; }
    .mv-bag-equipment .mv-equip-art { width: 54px; height: 52px; }
    .mv-bag-equipment .mv-equip-art .mv-icon { width: 52px !important; height: 52px !important; }
}

/* Backpack V4 — one foreground grammar.
   ToffeeCraft CozyUi owns every Backpack panel, tab, chip, slot and action
   state. IndigoLay remains content illustration only (items/equipment), so
   the screen no longer mixes blue CSS capsules, lavender brush tabs and
   parchment equipment frames. */
.mv-bag {
    --mv-tf-button-default: url("/resources/ui/toffeecraft/cozy/button-default.png");
    --mv-tf-button-selected: url("/resources/ui/toffeecraft/cozy/button-selected.png");
    --mv-tf-button-disabled: url("/resources/ui/toffeecraft/cozy/button-disabled.png");
    --mv-tf-button-secondary: url("/resources/ui/toffeecraft/cozy/button-secondary.png");
    --mv-tf-panel-square: url("/resources/ui/toffeecraft/cozy/panel-square.png");
    --mv-tf-panel-wide: url("/resources/ui/toffeecraft/cozy/panel-wide.png");
    --mv-tf-slot-empty: url("/resources/ui/toffeecraft/cozy/slot-empty.png");
    --mv-tf-slot-default: url("/resources/ui/toffeecraft/cozy/slot-default.png");
    --mv-tf-slot-selected: url("/resources/ui/toffeecraft/cozy/slot-selected.png");
}
.mv-bag > .mv-subtabs {
    top: 6px;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mv-bag > .mv-subtabs .mv-subtab {
    min-width: 0;
    min-height: 52px;
    padding: 7px 8px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: #62483b;
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 1px rgba(255,255,255,.7);
    box-shadow: none;
}
.mv-bag > .mv-subtabs .mv-subtab .mv-icon {
    width: 29px !important;
    height: 29px !important;
    filter: saturate(.86) drop-shadow(0 1px 1px rgba(75,45,31,.2));
}
.mv-bag > .mv-subtabs .mv-subtab.mv-active {
    border-image-source: var(--mv-tf-button-selected);
    background: none;
    color: #fff6e8;
    text-shadow: 0 1px 1px rgba(65,34,27,.6);
    box-shadow: none;
}
.mv-bag > .mv-subtabs .mv-subtab:active {
    transform: translateY(2px) scale(.98);
    filter: brightness(.94);
}
.mv-bag-capacity {
    top: 64px;
    min-height: 50px;
    padding: 7px 18px 7px 12px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    border-radius: 0;
    background: none;
    color: #5f4638;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mv-bag-capacity small { color: #886c5a; }
.mv-bag-stage > .mv-catchips {
    top: 116px;
    gap: 5px;
    padding: 3px 8px 7px;
}
.mv-bag-stage > .mv-catchips .mv-catchip {
    min-width: 62px;
    min-height: 46px;
    padding: 5px 7px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: #654b3e;
    font-size: 11px;
    font-weight: 800;
    text-shadow: 0 1px rgba(255,255,255,.65);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mv-bag-stage > .mv-catchips .mv-catchip .mv-icon {
    width: 23px !important;
    height: 23px !important;
}
.mv-bag-stage > .mv-catchips .mv-catchip.mv-active {
    border-color: transparent;
    border-image-source: var(--mv-tf-button-selected);
    background: none;
    color: #fff6e8;
    text-shadow: 0 1px 1px rgba(65,34,27,.6);
}
.mv-bag .mv-item-cell,
.mv-bag .mv-item-ghost {
    width: 60px;
    height: 60px;
    min-height: 60px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    border-radius: 0;
    background: none;
    box-shadow: 0 3px 7px rgba(65,41,28,.22);
}
.mv-bag .mv-item-ghost {
    border-image-source: var(--mv-tf-slot-empty);
    opacity: .42;
}
.mv-bag .mv-item-cell.mv-selected {
    border-image-source: var(--mv-tf-slot-selected);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 5px 12px rgba(65,41,28,.28);
}
.mv-bag-selection {
    left: 6px;
    right: 6px;
    bottom: 4px;
    padding: 12px 15px calc(10px + var(--mv-safe-bottom));
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: #5e4538;
    box-shadow: 0 -5px 18px rgba(65,40,26,.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="night"] .mv-bag-selection {
    border-color: transparent;
    background: none;
    color: #5e4538;
    box-shadow: 0 -5px 18px rgba(0,0,0,.34);
}
.mv-bag-selection-idle,
.mv-bag-selected-copy span,
.mv-bag-details > summary,
.mv-bag-tooltip {
    color: #806554;
}
.mv-bag-selection-close,
.mv-bag-selection .mv-item-action {
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: #63493d;
    text-shadow: 0 1px rgba(255,255,255,.65);
    box-shadow: none;
}
.mv-bag-selection .mv-item-action-primary,
.mv-bag-selection .mv-item-action.mv-on {
    border-image-source: var(--mv-tf-button-selected);
    background: none;
    color: #fff7eb;
    text-shadow: 0 1px 1px rgba(65,34,27,.6);
    outline: 0;
}
.mv-bag-selection .mv-item-action:disabled {
    border-image-source: var(--mv-tf-button-disabled);
}
[data-theme="night"] .mv-bag-selection .mv-item-action:not(.mv-item-action-primary) {
    color: #63493d;
}
.mv-equip-intro {
    min-height: 58px;
    margin: 3px 2px 9px;
    padding: 11px 18px;
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: #5d4437;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mv-equip-intro strong {
    color: #53392f;
    font-size: 17px;
}
.mv-equip-intro span { color: #826856; }
.mv-bag-equipment .mv-equip-list { gap: 7px 6px; }
.mv-bag-equipment .mv-equip-row {
    min-height: 104px;
    padding: 10px 7px 8px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-square) 9 fill / 9px stretch;
    background: none;
    color: #5b4236;
    box-shadow: none;
}
.mv-bag-equipment .mv-equip-row.mv-equip-empty {
    opacity: .68;
    color: #7d6556;
}
.mv-bag-equipment .mv-equip-art {
    width: 100%;
    height: 58px;
    margin: 0 auto;
}
.mv-bag-equipment .mv-equip-slot {
    color: #5a4034;
    font-size: 11px;
    text-shadow: 0 1px rgba(255,255,255,.68);
}
.mv-bag-equipment .mv-equip-name {
    min-height: 12px;
    color: #816858;
    font-size: 9px;
    text-shadow: 0 1px rgba(255,255,255,.5);
}
@media (max-height: 740px) {
    .mv-bag-stage > .mv-catchips { padding-inline: 4px; gap: 3px; }
    .mv-bag-stage > .mv-catchips .mv-catchip {
        min-width: 56px;
        padding-inline: 5px;
    }
    .mv-bag .mv-item-cell,
    .mv-bag .mv-item-ghost {
        width: 56px;
        height: 56px;
        min-height: 56px;
    }
}

/* 倉庫 sheet（M5）：兩側 chips＋格網＋「全部」角標 */
.mv-storage-hint { color: var(--ink-soft); font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.mv-storage-grid { max-height: 45vh; overflow-y: auto; margin-top: var(--sp-2); }
.mv-storage-grid .mv-item-cell { padding-bottom: var(--sp-4); }
.mv-storage-all {
    position: absolute;
    right: 4px;
    bottom: 4px;
    font-size: var(--text-xs);
    padding: 0 var(--sp-2);
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}
.mv-storage-close { flex: none; width: 100%; margin-top: var(--sp-3); }

/* 場景高頻快捷列（M5）：[hidden] 必須贏過 .mv-catchips 的 display:flex */
.mv-quick { margin-bottom: var(--sp-2); }
.mv-quick[hidden] { display: none; }

/* 製作 sheet（M5） */
.mv-craft-body { max-height: 50vh; overflow-y: auto; margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-craft-title { margin: var(--sp-1) 0; }
.mv-craft-cats { margin-top: var(--sp-2); }
.mv-craft-recipe-back { align-self: flex-start; min-width: 152px; }

/* D2-2: recipe visual cards */
.mv-craft-recipe-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.3);
    transition: transform 120ms ease-out;
    min-height: var(--touch-min);
}
.mv-craft-recipe-card:active { transform: scale(.97); }
.mv-craft-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
}
.mv-craft-result-name { font-weight: 700; font-size: var(--text-md); }
.mv-craft-badge {
    flex: none;
    font-size: var(--text-xs);
    color: var(--ink-soft);
    padding: 1px var(--sp-2);
    background: color-mix(in srgb, var(--paper-card) 80%, var(--moon));
    border: 1px solid color-mix(in srgb, var(--line) 70%, var(--moon));
    border-radius: var(--radius-chip);
    white-space: nowrap;
}
.mv-craft-mats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
    margin-top: 2px;
}
.mv-craft-mat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px var(--sp-2);
    background: color-mix(in srgb, var(--paper-card) 85%, var(--accent-warm));
    border: 1px solid color-mix(in srgb, var(--line) 75%, var(--accent-warm));
    border-radius: var(--radius-chip);
    font-size: var(--text-xs);
    white-space: nowrap;
}
.mv-craft-arrow {
    font-size: var(--text-xs);
    color: var(--ink-soft);
}

/* 交易 sheet（M5） */
.mv-trade-selected { border-color: var(--moon-deep); border-width: 2px; }
.mv-trade-badges { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 4px; }
.mv-trade-badges .mv-storage-all { position: static; }
.mv-trade-minus { color: var(--danger); }
.mv-trade-summary { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--ink-soft); }
.mv-trade-accept:disabled { opacity: 0.5; cursor: default; }

/* ═══ Paper-doll character screen (SPEC E Phase 2, Stitch ref 03) ═══ */
.mv-char-paperdoll { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: var(--sp-5); }

/* Reusable drawn-button family. The raster is the button body; CSS only
   scales it and supplies hit area / pressed / selected / disabled states. */
.mv-cozy-button {
    min-height: var(--touch-min);
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 8px 18px;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(255,255,255,.35);
    transition: transform 100ms ease-out, filter 100ms ease-out;
}
.mv-cozy-button-primary {
    background-image: var(--mv-tf-button-selected);
    color: #fff;
    text-shadow: 0 1px 2px rgba(35,42,61,.55);
}
.mv-cozy-button-secondary {
    background-image: var(--mv-tf-button-secondary);
    color: #4b3c34;
}
.mv-cozy-button-primary {
    background-image: var(--mv-tf-button-selected);
    color: #fff;
    text-shadow: 0 1px 2px rgba(35,42,61,.55);
}
.mv-cozy-button:disabled,
.mv-cozy-button[aria-disabled="true"] {
    background-image: var(--mv-tf-button-disabled);
    color: #676b74;
    cursor: default;
    text-shadow: none;
}
.mv-cozy-button:not(:disabled):active { transform: scale(.965); filter: brightness(.92); }

.mv-pd-body {
    display: flex; align-items: center; justify-content: center;
    gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-1);
}
.mv-pd-left, .mv-pd-right {
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.mv-pd-center { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }

.mv-pd-portrait-frame {
    width: 170px; height: 210px;
    background: url("/resources/ui/slot-empty.png") center / 100% 100% no-repeat;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
}
.mv-pd-portrait-img {
    width: 150px; height: 190px;
    object-fit: cover; border-radius: 8px;
}

.mv-pd-name-row {
    min-height: 54px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: 5px 18px;
    background: url("/resources/ui/ribbon-header.png") center / 100% 100% no-repeat;
    color: #4b3c34;
}
.mv-pd-name-row > span { display: flex; align-items: center; justify-content: center; flex: 1; line-height: 1.15; min-width: 0; }
.mv-pd-name { font-weight: 800; font-size: var(--text-lg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-pd-rename {
    width: 92px;
    flex: none;
    padding-inline: 16px;
    color: #4b3c34;
}

.mv-pd-slot {
    width: 48px; height: 48px;
    background: url("/resources/ui/slot-empty.png") center / contain no-repeat;
    border: none; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 4px;
    transition: transform 120ms ease-out;
}
.mv-pd-slot:active { transform: scale(0.92); }
.mv-pd-slot:disabled { opacity: 0.5; cursor: default; }
.mv-pd-slot .mv-icon { width: 36px; height: 36px; }
.mv-pd-slot-empty { width: 24px; height: 24px; }

.mv-pd-bottom-equip {
    display: flex; justify-content: center; gap: var(--sp-6);
}
.mv-pd-bottom-left, .mv-pd-bottom-right {
    display: flex; gap: var(--sp-2);
}

.mv-pd-stats-panel {
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.mv-pd-base-stats {
    background-color: color-mix(in srgb, var(--paper-card) 90%, transparent);
    background-size: 100% 100%;
    border: 0; border-radius: var(--radius-card); padding: 20px 22px;
    color: #4b3c34;
}
.mv-pd-stats-title {
    font-size: var(--text-sm); font-weight: 700;
    margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-1);
}
.mv-pd-base-row {
    display: flex; justify-content: space-around; text-align: center;
}
.mv-pd-base-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mv-pd-base-label { font-size: var(--text-xs); color: var(--ink-soft); font-weight: 600; }
.mv-pd-base-val { font-size: var(--text-lg); font-weight: 700; }

.mv-pd-combat-row { display: flex; gap: var(--sp-2); }
.mv-pd-atk-panel, .mv-pd-def-panel {
    flex: 1;
    background-color: color-mix(in srgb, var(--paper-card) 90%, transparent);
    background-size: 100% 100%;
    border: 0; border-radius: var(--radius-card); padding: 18px 20px;
    color: #4b3c34;
}
.mv-pd-atk-title, .mv-pd-def-title {
    font-size: var(--text-sm); font-weight: 700;
    margin-bottom: var(--sp-2); display: flex; align-items: center; gap: var(--sp-1);
}
.mv-pd-stat-row {
    display: flex; justify-content: space-between; gap: var(--sp-2);
    font-size: var(--text-sm); padding: 2px 0;
}
.mv-pd-stat-val { font-weight: 700; font-variant-numeric: tabular-nums; }

.mv-pd-xp-section {
    display: flex; flex-direction: column; gap: 4px;
}
.mv-pd-xp-info {
    display: flex; justify-content: space-between;
    font-size: var(--text-sm); color: var(--ink-soft);
}
.mv-pd-vitals-row {
    display: flex; gap: var(--sp-3);
}
.mv-pd-vital {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.mv-pd-vital-label { font-size: var(--text-xs); color: var(--ink-soft); }

.mv-pd-effects {
    display: flex; flex-wrap: wrap; gap: var(--sp-1);
}
.mv-pd-reputation-card {
    display: grid; gap: var(--sp-2); padding: var(--sp-3);
}
.mv-pd-reputation-heading {
    display: flex; align-items: center; gap: var(--sp-2);
}
.mv-pd-reputation-heading h4 {
    margin: 0; font-size: var(--text-md);
}
.mv-pd-reputation-hint {
    margin: 1px 0 0; color: var(--ink-soft); font-size: var(--text-xs);
}
.mv-pd-reputation {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2);
}
.mv-pd-reputation-tile {
    min-width: 0; min-height: 70px; padding: 7px 4px;
    display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 1px 5px;
    background: var(--paper-card); border: 1px solid var(--line);
}
.mv-pd-reputation-label {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ink-soft); font-size: var(--text-xs);
}
.mv-pd-reputation-value {
    grid-column: 1 / -1; text-align: center; font-size: var(--text-xl); font-variant-numeric: tabular-nums;
}
.mv-pd-reputation-tile:not(.mv-has-reputation) { opacity: .68; }
.mv-pd-effect-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px var(--sp-3);
    background: var(--paper-card); border: 1px solid var(--line);
    border-radius: var(--radius-chip); font-size: var(--text-xs);
}
.mv-pd-effect-time { color: var(--ink-soft); }
.mv-pd-bonuses { color: var(--ink-soft); font-size: var(--text-xs); text-align: center; }

/* 改名 sheet */
.mv-rename-title { margin: 0 0 var(--sp-1); font-size: var(--text-lg); font-weight: 600; }
.mv-rename-hint { margin: 0 0 var(--sp-3); font-size: var(--text-sm); color: var(--ink-soft); }
.mv-rename-input {
    width: 100%; box-sizing: border-box; padding: var(--sp-3);
    font-size: var(--text-lg); text-align: center;
    border: 1px solid var(--line); border-radius: var(--radius-card);
    background: var(--paper-card); color: var(--ink);
    margin-bottom: var(--sp-3);
}
.mv-rename-input:focus { outline: none; border-color: var(--moon); }
.mv-rename-actions { display: flex; gap: var(--sp-2); }
.mv-rename-actions button { flex: 1; font-size: var(--text-md); }
.mv-rename-actions button[hidden] { display: none; }
.mv-char-itemlog { margin-top: var(--sp-2); }
.mv-char-itemlog summary {
    min-height: var(--touch-min); display: flex; align-items: center; justify-content: center;
    padding: 8px 18px; cursor: pointer; color: #4b3c34; font-weight: 700;
    background: var(--mv-tf-button-secondary) center / 100% 100% no-repeat;
}
.mv-char-itemlog-rows { max-height: 40vh; overflow-y: auto; }
.mv-char-effect { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-sm); padding: 2px 0; }
.mv-char-effect-time { color: var(--ink-soft); white-space: nowrap; }

/* toasts */
.mv-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-h) + var(--mv-safe-bottom) + var(--sp-3));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    z-index: 20;
    width: min(92vw, 480px);
    pointer-events: none;
}
.mv-toast {
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius-card);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    max-width: 100%;
    animation: mv-toast-in 160ms ease-out;
}
body:has(.mv-scene.mv-active[data-mode="dialogue"]) .mv-toasts { display: none; }
.mv-toast-overflow { padding: var(--sp-1) var(--sp-3); opacity: .7; }
@keyframes mv-toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mv-toast { animation: none; }
    .mv-action { transition: none; }
    .mv-ongoing-bar-fill { transition: none; }
}

/* More / character V2: one illustrated room with four switchable drawers. */
.mv-screens:has(.mv-more-v2.mv-active) { overflow: hidden; }
.mv-more-v2.mv-active {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    height: 100%;
    min-height: 0;
    padding: 8px 12px 0;
    overflow: hidden;
}
.mv-more-header {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 3px 22px;
    background: url("/resources/ui/ribbon-header.png") center / min(100%, 340px) 100% no-repeat;
    color: #4b3c34;
    text-shadow: 0 1px rgba(255,255,255,.55);
}
.mv-more-header > div { width: 42px; height: 42px; flex: none; }
.mv-more-header > span { display: flex; flex-direction: column; line-height: 1.15; }
.mv-more-header strong { font-size: var(--text-md); }
.mv-more-header small { font-size: 10px; letter-spacing: 1.5px; opacity: .72; }
.mv-more-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px var(--sp-2);
    flex: none;
}
.mv-more-nav-button {
    width: 100%;
    min-height: 48px;
    padding: 6px 18px;
    font-size: var(--text-md);
}
.mv-more-nav-button .mv-icon { flex: none; }
.mv-more-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-2) 4px calc(var(--sp-5) + var(--mv-safe-bottom));
}
.mv-more-panel[hidden] { display: none; }
.mv-more-panel { min-height: 100%; }
.mv-more-panel[data-more-panel="travel"],
.mv-more-panel[data-more-panel="settings"],
.mv-more-panel[data-more-panel="saves"] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-2);
    background-color: color-mix(in srgb, var(--paper-card) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    box-shadow: 0 3px 14px var(--shadow-ink);
    border-radius: var(--radius-card);
}
.mv-more-panel[data-more-panel="travel"][hidden],
.mv-more-panel[data-more-panel="settings"][hidden],
.mv-more-panel[data-more-panel="saves"][hidden] { display: none; }
.mv-settings-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-settings-group h3 {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 1px;
}
.mv-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-3);
    background-color: color-mix(in srgb, var(--paper-card) 92%, transparent);
    background-size: 100% 100%;
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: none;
    color: #4b3c34;
}
.mv-setting-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--moon);
    flex: none;
}
.mv-setting-number {
    width: 64px;
    min-height: 36px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-md);
}
.mv-settings-button {
    min-height: 54px;
    width: 100%;
    justify-content: flex-start;
    padding-inline: 24px;
    font-size: var(--text-md);
}
.mv-settings-danger { color: var(--danger); }
.mv-more-footer { color: var(--ink-soft); font-size: var(--text-xs); text-align: center; padding: var(--sp-4) 0; }
/* 致謝與授權連結（footer 內）。要看得出可點——affordance 鐵律：底線＋可讀色，
   而且觸控目標要夠大（44px 是 CLAUDE.md 的硬標準，這裡用 padding 撐起來）。 */
/* footer 的致謝連結。
   ⚠ 這裡只放「一個」連結：版本號文字本身就佔滿一個 flex 行，再加第二個連結必然換行，
   footer 變 92px 後在 .mv-save-archive-scroll 裡被裁掉，第二個要捲動才點得到（違反 affordance 鐵律）。
   更新紀錄改從致謝頁連出去。觸控高度用 min-height 而非 line-height（後者會撐高整行）。 */
.mv-more-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 2px;
}
.mv-more-credits-link {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-2);
}
.mv-more-credits-link:active { color: var(--accent-warm); }
.mv-more-v2 .mvcs-note { color: var(--ink-soft); opacity: 1; }
.mv-more-v2 .mvcs-btn {
    min-height: 54px;
    margin-top: var(--sp-2);
    justify-content: flex-start;
    padding-inline: 24px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: var(--text-sm);
}
.mv-more-v2 .mvcs-btn-primary { color: #fff; }
.mv-more-v2 .mvcs-btn.mv-cozy-button-secondary { background-image: var(--mv-tf-button-secondary); }
.mv-more-v2 .mvcs-btn.mv-cozy-button-primary { background-image: var(--mv-tf-button-selected); }
.mv-more-v2 .mvcs-btn:disabled { background-image: var(--mv-tf-button-disabled); }

@media (max-width: 370px), (max-height: 740px) {
    .mv-more-v2.mv-active { padding-inline: 8px; }
    .mv-more-header { min-height: 44px; }
    .mv-more-nav-button { min-height: 46px; }
    .mv-pd-portrait-frame { width: 150px; height: 178px; }
    .mv-pd-portrait-img { width: 132px; height: 158px; }
    .mv-pd-slot { width: 44px; height: 44px; }
    .mv-pd-base-stats { padding: 18px 16px; }
    .mv-pd-atk-panel, .mv-pd-def-panel { padding: 16px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .mv-cozy-button { transition: none; }
}

/* tab bar — 木紋材質底板（SPEC D Phase 2: tabbar-wood.png） */
.mv-tabbar {
    display: flex;
    min-height: 74px;
    padding-top: 6px;
    padding-bottom: max(4px, var(--mv-safe-bottom));
    border-top: none;
    background:
        linear-gradient(to top, rgba(246,241,231,.55) 0%, rgba(246,241,231,.35) 60%, rgba(246,241,231,.65) 100%),
        url("/resources/img/tabbar-wood.png") center / cover no-repeat;
    box-shadow: 0 -4px 16px rgba(62, 58, 51, .10), inset 0 1px 0 rgba(255,255,255,.25);
    position: relative;
}
.mv-tabbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--accent-warm) 0%, var(--moon) 50%, var(--accent-warm) 100%);
    opacity: 0.06;
    pointer-events: none;
}
[data-theme="night"] .mv-tabbar,
body[data-theme="night"] .mv-tabbar {
    background:
        linear-gradient(to top, rgba(35,42,61,.7) 0%, rgba(35,42,61,.5) 60%, rgba(35,42,61,.75) 100%),
        url("/resources/img/tabbar-wood.png") center / cover no-repeat;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255,255,255,.08);
}
.mv-tab {
    flex: 1;
    min-height: var(--touch-min);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
}
.mv-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 50% 50% 46% 46%;
    transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1), background 160ms ease-out, box-shadow 160ms ease-out;
}
.mv-tab.mv-active { color: var(--moon-deep); font-weight: 700; }
.mv-tab.mv-active .mv-tab-icon {
    transform: translateY(-7px) scale(1.06);
    border-color: rgba(183,139,75,.48);
    background: radial-gradient(circle at 42% 32%, rgba(255,255,255,.96), rgba(247,226,184,.88) 64%, rgba(181,128,73,.72));
    box-shadow: 0 5px 14px rgba(72,50,34,.2), inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 4px rgba(255,244,216,.35);
}
[data-theme="night"] .mv-tab.mv-active .mv-tab-icon {
    border-color: rgba(194,172,232,.52);
    background: radial-gradient(circle at 42% 32%, rgba(108,119,163,.96), rgba(61,70,104,.94) 66%, rgba(31,37,59,.95));
    box-shadow: 0 5px 16px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 4px rgba(133,111,174,.2);
}
.mv-tab.mv-active::after {
    content: "";
    display: none;
    position: absolute;
    bottom: calc(var(--mv-safe-bottom) + 0px);
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 22px;
    background: url("/resources/ui/tab-active.png") center / contain no-repeat;
    border-radius: 0;
}
/* tab icon: active glow + bounce, pressed shrink */
.mv-tab > span:first-child { transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1); }
.mv-tab.mv-active > span:first-child {
    transform: translateY(-7px) scale(1.06);
    filter: drop-shadow(0 0 4px rgba(123, 143, 191, .35));
}
.mv-tab:active > span:first-child { transform: translateY(-3px) scale(.9); }
@media (prefers-reduced-motion: reduce) {
    .mv-tab > span:first-child { transition: none; }
}

/* Global navigation V4 — the same ToffeeCraft CozyUi family as Backpack.
   The purchased raster family now owns the bar, idle controls and selected
   state; the old white wood strip, CSS orb and lavender night state are gone. */
.mv-tabbar {
    --mv-tf-nav-panel: url("/resources/ui/toffeecraft/cozy/panel-wide.png");
    --mv-tf-nav-default: url("/resources/ui/toffeecraft/cozy/button-default.png");
    --mv-tf-nav-selected: url("/resources/ui/toffeecraft/cozy/button-selected.png");
    min-height: 76px;
    gap: 3px;
    padding: 8px 6px max(6px, var(--mv-safe-bottom));
    border: 10px solid transparent;
    border-image: var(--mv-tf-nav-panel) 10 fill / 10px stretch;
    background: none;
    box-shadow: 0 -5px 16px rgba(65,40,26,.22);
}
.mv-tabbar::before {
    display: none;
}
[data-theme="night"] .mv-tabbar,
body[data-theme="night"] .mv-tabbar {
    border-color: transparent;
    border-image-source: var(--mv-tf-nav-panel);
    background: none;
    box-shadow: 0 -5px 18px rgba(0,0,0,.38);
}
.mv-tab {
    min-width: 0;
    min-height: 52px;
    gap: 1px;
    padding: 4px 2px 3px;
    border: 6px solid transparent;
    border-image: var(--mv-tf-nav-default) 7 10 fill / 6px 8px stretch;
    background: none;
    color: #684d40;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px rgba(255,255,255,.66);
}
.mv-tab-icon {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: none;
    transition: filter 150ms ease-out;
}
.mv-tab-icon .mv-icon {
    width: 27px !important;
    height: 27px !important;
}
.mv-tab.mv-active {
    border-image-source: var(--mv-tf-nav-selected);
    color: #fff6e9;
    font-weight: 800;
    text-shadow: 0 1px 1px rgba(65,34,27,.62);
}
.mv-tab.mv-active .mv-tab-icon,
[data-theme="night"] .mv-tab.mv-active .mv-tab-icon {
    transform: none;
    border: 0;
    background: none;
    box-shadow: none;
    filter: saturate(1.04) drop-shadow(0 2px 2px rgba(54,31,24,.35));
}
.mv-tab > span:first-child,
.mv-tab.mv-active > span:first-child {
    transform: none;
    filter: none;
}
.mv-tab:active {
    transform: translateY(2px) scale(.97);
    filter: brightness(.94);
}
.mv-tab:active > span:first-child {
    transform: none;
}
@media (max-width: 370px), (max-height: 740px) {
    .mv-tabbar {
        gap: 2px;
        padding-inline: 4px;
    }
    .mv-tab {
        padding-inline: 1px;
        font-size: 9px;
    }
}

/* combat mode (M4): scene screen takeover via data-mode */
.mv-combat { display: none; }
.mv-scene[data-mode="combat"] > .mv-loc-header,
.mv-scene[data-mode="combat"] > .mv-actions,
.mv-scene[data-mode="combat"] > .mv-quick,
.mv-scene[data-mode="combat"] > .mv-route-ledger-slot,
.mv-scene[data-mode="combat"] > .mv-village-map,
.mv-scene[data-mode="combat"] > .mv-ongoing { display: none; }
.mv-scene[data-mode="combat"] > .mv-combat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
    min-height: 0;
}
.mv-combat-counts { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--ink-soft); }

/* leave = demoted 到 header 的小 ghost 按鈕（原本是全寬高強調卡，跟敵人/HUD 搶注意力，
   新手拇指停在「逃跑」上）。現在只是 name row 右側一顆小鈕。 */
.mv-loc-name-row { justify-content: flex-start; }
.mv-loc-name-row h2 { flex: 1; min-width: 0; }
/* 返回鈕：觸控友善 ≥44px＋紙卡按鈕感（Affordance 鐵律：讓玩家感覺得到能按），
   但用柔和 paper-card 不搶敵人視覺重量。 */
.mv-combat-leave {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: var(--touch-min); padding: 0 var(--sp-4);
    border: 1px solid var(--line); border-radius: var(--radius-chip);
    background: var(--paper-card); color: var(--ink-soft);
    box-shadow: 0 1px 3px var(--shadow-ink);
    font-family: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
    transition: transform .1s ease, box-shadow .1s ease;
}
.mv-combat-leave:active { transform: scale(.95); box-shadow: 0 0 0 var(--shadow-ink); }
.mv-leave-icon { font-size: var(--text-md); }
.mv-leave-label { white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }

/* enemy cards = 現在是舞台下方的「敵群名冊」次要列（只在多敵時顯示，補充其餘敵人的
   詳細屬性）。單敵時整列隱藏 — 舞台已把每隻敵人畫成 sprite，名冊會是冗餘重複。 */
.mv-enemies { display: flex; flex-direction: column; gap: var(--sp-1); }
.mv-enemies[hidden] { display: none; }
.mv-enemy {
    position: relative;
    padding: 6px var(--sp-3);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-bar);
    transition: opacity 200ms ease-out;
}
.mv-enemy.mv-dead { opacity: .35; }
.mv-enemy-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.mv-enemy-name { font-weight: 700; }
.mv-enemy-hp-num { font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mv-enemy-stats { margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--ink-soft); overflow-wrap: anywhere; }

/* ── 戰鬥競技場（combat reskin slice 2 2026-07-11）─────────────────────
   全寬 arena 背板（水彩漸層 + 內 vignette）讓敵人「站在戰場上」而非漂在跟血條同一張
   紙上；所有存活敵人都是舞台上的一隻 sprite（JRPG/crawler 列），primary 放大強調。
   真場景圖之後 drop-in（.mv-arena-sky 換 <img>）。純 CSS，不碰邏輯。 */
.mv-arena {
    position: relative;
    margin: 0 calc(-1 * var(--sp-4)); /* 出血到 screen 邊緣，脫離扁平紙面 */
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-radius: var(--radius-lg);
    overflow: visible; /* 浮傷字要能溢出頂端 — 千萬別 hidden（原 clipping bug 教訓） */
}
/* 背板天空/地面：淺水彩漸層 placeholder（真場景圖之後 drop-in）＋內 vignette 加深邊緣 */
.mv-arena-sky {
    content: ""; position: absolute; inset: 0; z-index: 0;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 80% at 50% 18%, var(--glow-moon), transparent 62%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--moon) 22%, var(--paper-card)) 0%,
            color-mix(in srgb, var(--moon) 8%, var(--paper-card)) 52%,
            color-mix(in srgb, var(--ink) 12%, var(--paper-card)) 100%);
    box-shadow: inset 0 0 42px var(--shadow-ink-strong), inset 0 2px 0 var(--bar-gloss);
}
.mv-combat[data-combat-art-owner="Gentle mountain slope"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Precarious tree bridge"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Fight the giant crab again"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Crab spawning grounds"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="The swamplands"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Infested field"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Cave room"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Cave depths"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Suspicious wall"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-arena-sky,
.mv-combat[data-combat-art-owner="Mysterious gate"] .mv-arena-sky {
    background:
        radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--glow-moon) 38%, transparent), transparent 62%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--paper-card) 10%, transparent) 0%,
            color-mix(in srgb, var(--moon) 8%, transparent) 52%,
            color-mix(in srgb, var(--ink) 30%, transparent) 100%),
        var(--combat-environment-image) var(--combat-environment-position) / cover no-repeat;
}
[data-theme="night"] .mv-combat[data-combat-art-owner="Gentle mountain slope"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Precarious tree bridge"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Fight the giant crab again"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Crab spawning grounds"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="The swamplands"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Infested field"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave room"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave depths"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Suspicious wall"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-arena-sky,
[data-theme="night"] .mv-combat[data-combat-art-owner="Mysterious gate"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Gentle mountain slope"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Precarious tree bridge"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Fight the giant crab again"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Crab spawning grounds"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="The swamplands"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Infested field"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Cave room"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Cave depths"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Suspicious wall"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-arena-sky,
body[data-theme="night"] .mv-combat[data-combat-art-owner="Mysterious gate"] .mv-arena-sky {
    background:
        radial-gradient(120% 80% at 50% 18%, color-mix(in srgb, var(--glow-moon) 22%, transparent), transparent 62%),
        linear-gradient(180deg, rgba(21, 31, 53, .42) 0%, rgba(25, 36, 57, .5) 55%, rgba(17, 24, 39, .66) 100%),
        var(--combat-environment-image) var(--combat-environment-position) / cover no-repeat;
}
.mv-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.mv-stage[hidden] { display: none; }

/* 敵人 sprite 列：所有存活敵人並排（wrap 到多列），primary 放大 */
.mv-stage-mob {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center;
    gap: var(--sp-3); min-height: 132px; width: 100%;
}
.mv-mob {
    position: relative; /* 傷害浮字錨定在「被打中的那隻 sprite」上（float_over 需 positioned box），
                           多敵時才不會飄到整排中央 */
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 92px; transition: opacity 200ms ease-out;
}
.mv-mob[hidden] { display: none; }
/* 每隻 sprite 的圖示台座（placeholder emoji；真 sprite 換 <img>）。地面陰影用 ::after。 */
.mv-mob-body {
    position: relative;
    width: 84px; height: 84px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 6px var(--shadow-ink-strong));
    animation: mv-stage-idle 2.6s ease-in-out infinite;
}
.mv-mob-body::after {
    content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%);
    width: 56px; height: 10px; border-radius: 50%;
    background: radial-gradient(var(--shadow-ink-strong), transparent 70%);
}
.mv-mob-emoji { font-size: 56px; line-height: 1; }
/* 水彩敵人 sprite（SPEC B）：填滿舞台身體框、等比 contain */
.mv-mob-sprite-host { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mv-mob-sprite { width: 100%; height: 100%; object-fit: contain; }
.mv-mob-name {
    max-width: 100%; font-size: var(--text-xs); color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px var(--paper);
}
.mv-mob-hp { width: 64px; height: 5px; margin-top: 0; }

/* ═══ 擊敗特效（David 2026-07-12：擊殺要有視覺爽感）═══ */
/* fx wrapper：掛在舞台容器、絕對定位對齊死掉那隻 sprite 中心（脫離 sprite 生命週期，
   set_new_combat 重建 sprite 也不影響）。內層 burst/poof/tag 全錨在 wrapper 原點(0,0)。 */
.mv-mob-fx { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 5; }
/* 爆光圈：柔光圈向外爆開淡出（水彩碎的光感） */
.mv-mob-burst {
    position: absolute; left: 0; top: 0;
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,244,214,.95) 0%, rgba(255,210,140,.7) 40%, rgba(255,180,120,0) 72%);
    animation: mv-mob-burst 560ms ease-out forwards;
}
@keyframes mv-mob-burst {
    0%   { transform: scale(.3); opacity: 0; }
    22%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}
/* poof 煙霧：三坨煙球從中心「啵」一下往上＋左右飄散淡出（敵人化煙消失手感） */
.mv-mob-poof {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    pointer-events: none;
}
.mv-poof-puff {
    position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,240,232,.92) 0%, rgba(214,205,190,.7) 55%, rgba(200,190,175,0) 78%);
    opacity: 0;
    animation: mv-poof-puff 620ms ease-out forwards;
}
/* 三坨錯開方向與時間差，像一團煙散開 */
.mv-poof-puff:nth-child(1) { --px: -18px; --py: -22px; animation-delay: 0ms; }
.mv-poof-puff:nth-child(2) { --px: 20px; --py: -16px; animation-delay: 60ms; width: 30px; height: 30px; }
.mv-poof-puff:nth-child(3) { --px: 2px; --py: -30px; animation-delay: 30ms; width: 22px; height: 22px; }
@keyframes mv-poof-puff {
    0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
    28%  { transform: translate(calc(var(--px) * .5), calc(var(--py) * .5)) scale(1); opacity: .9; }
    100% { transform: translate(var(--px), var(--py)) scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    /* 暈眩敏感：煙不飄不縮放，原地短淡出 */
    .mv-poof-puff { animation: mv-poof-puff-reduced 450ms ease-out forwards; }
}
@keyframes mv-poof-puff-reduced {
    0% { opacity: 0; } 30% { opacity: .8; } 100% { opacity: 0; }
}
/* 「擊敗！」字：從 sprite 頭頂飄起淡出（正回饋、慶祝暖色） */
.mv-mob-defeat-tag {
    position: absolute; left: 0; top: -34px; transform: translateX(-50%);
    pointer-events: none; z-index: 6; white-space: nowrap;
    font-size: var(--text-md); font-weight: 800; color: var(--accent-warm, #e8934a);
    text-shadow: 0 1px 2px var(--paper), 0 0 6px rgba(255,220,160,.8);
    animation: mv-mob-defeat-tag 780ms ease-out forwards;
}
@keyframes mv-mob-defeat-tag {
    0%   { transform: translate(-50%, 6px) scale(.6); opacity: 0; }
    24%  { transform: translate(-50%, -8px) scale(1.15); opacity: 1; }
    60%  { transform: translate(-50%, -18px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -34px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    /* 暈眩敏感：爆光圈不縮放（短淡出即可）、擊敗字不飄（原地淡出）——資訊仍在 */
    .mv-mob-burst { animation: mv-mob-burst-reduced 400ms ease-out forwards; }
    .mv-mob-defeat-tag { animation: mv-mob-defeat-tag-reduced 700ms ease-out forwards; }
}
@keyframes mv-mob-burst-reduced { 0% { opacity: .8; } 100% { opacity: 0; } }
@keyframes mv-mob-defeat-tag-reduced {
    0% { transform: translate(-50%, -18px); opacity: 0; }
    30% { transform: translate(-50%, -18px); opacity: 1; }
    100% { transform: translate(-50%, -18px); opacity: 0; }
}

/* primary（鎖定的敵人）放大＋亮圈強調 */
.mv-mob-primary { width: 116px; }
.mv-mob-primary .mv-mob-body { width: 108px; height: 108px; }
.mv-mob-primary .mv-mob-emoji { font-size: 76px; }
.mv-mob-primary .mv-mob-name { font-size: var(--text-sm); font-weight: 700; }
.mv-mob-primary .mv-mob-hp { width: 84px; height: 6px; }
/* Four- and five-enemy groups must stay on one grounded row in the short mobile
   arena. The runtime already exposes the alive count; using it avoids a wrapped
   second row colliding with the primary plate while preserving larger single/
   three-enemy silhouettes. */
.mv-stage-mob[data-count="4"],
.mv-stage-mob[data-count="5"] { flex-wrap: nowrap; }
.mv-stage-mob[data-count="4"] { gap: 4px; }
.mv-stage-mob[data-count="4"] .mv-mob { width: 72px; }
.mv-stage-mob[data-count="4"] .mv-mob-body { width: 66px; height: 66px; }
.mv-stage-mob[data-count="4"] .mv-mob-primary { width: 84px; }
.mv-stage-mob[data-count="4"] .mv-mob-primary .mv-mob-body { width: 78px; height: 78px; }
.mv-stage-mob[data-count="5"] { gap: 2px; }
.mv-stage-mob[data-count="5"] .mv-mob { width: 60px; }
.mv-stage-mob[data-count="5"] .mv-mob-body { width: 54px; height: 54px; }
.mv-stage-mob[data-count="5"] .mv-mob-primary { width: 72px; }
.mv-stage-mob[data-count="5"] .mv-mob-primary .mv-mob-body { width: 66px; height: 66px; }
.mv-stage-mob:is([data-count="4"], [data-count="5"]) .mv-mob-name { font-size: 10px; }
.mv-stage-mob:is([data-count="4"], [data-count="5"]) .mv-mob-hp { width: 52px; }
.mv-stage-mob:is([data-count="4"], [data-count="5"]) .mv-mob-primary .mv-mob-hp { width: 60px; }
/* Six-to-eight enemy groups use two grounded rows of at most four. Keeping the
   same readable sizes as four-enemy groups avoids hiding authored enemies or
   shrinking their per-index name/HP feedback into an indistinct strip. */
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) {
    column-gap: 4px;
    row-gap: 2px;
    max-width: 328px;
}
.mv-arena:has(.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"])) .mv-stage {
    gap: 4px;
}
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob { width: 72px; }
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-body { width: 66px; height: 66px; }
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-primary { width: 84px; }
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-primary .mv-mob-body { width: 78px; height: 78px; }
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-name { font-size: 10px; }
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-hp { width: 52px; }
.mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-primary .mv-mob-hp { width: 60px; }
.mv-mob-dying { pointer-events: none; } /* 死亡動畫播放中；JS 播完再 hidden */
@keyframes mv-stage-idle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}
.mv-stage.mv-stage-dead .mv-mob-primary .mv-mob-body { animation: none; }

/* primary 詳細名牌（大血條＋蓄力＋屬性） */
.mv-stage-plate { width: 100%; max-width: 100%; }
/* queue 8 — 舞台蓄力條左側的攻擊錨點。粗 HP 條與細蓄力條之前只差顏色，
   玩家讀不出第二條是誰的什麼；讓蓄力條縮排、左邊放一個小刀刃記號 →
   「這條是敵人的攻擊」有了圖像錨。
   純 CSS——combat.js／combat_stage.js 受 presentation SHA pin，不新增 DOM 也不改 render 呼叫。 */
.mv-stage-plate .mv-bar-charge {
    /* 錨點是這條自己的 ::before，畫在條的左外側，所以這裡必須解開 .mv-bar 的
       overflow:hidden（否則錨點被裁掉）。條本身是 position:relative（.mv-bar），
       ::before 就以它為定位框。fill 失去父層裁切後改由自己的 border-radius ＋
       max-width 收邊（fill 是唯一子層，圓角一致就看不出差別）。 */
    overflow: visible;
    margin-left: 14px;
    border-radius: var(--radius-chip);
}
.mv-stage-plate .mv-bar-charge > .mv-bar-fill {
    border-radius: var(--radius-chip);
    max-width: 100%;
}
.mv-stage-plate .mv-bar-charge::before {
    content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 10px;
    transform: translateY(-50%);
    /* 斜刀刃：往右上的尖角，小尺寸下仍讀得出「攻擊」 */
    background: var(--charge);
    clip-path: polygon(0% 72%, 62% 0%, 100% 8%, 88% 46%, 22% 100%);
    opacity: .9;
}
.mv-stage-nameline { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.mv-stage-name { font-weight: 700; font-size: var(--text-md); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-stage-hp-num { flex: none; font-size: var(--text-sm); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mv-stage-stats { margin-top: var(--sp-1); min-height: 1.4em; font-size: var(--text-xs); color: var(--ink-soft); text-align: center; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.mv-stage-stats::-webkit-scrollbar { display: none; }

.mv-cadence-seal {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: 28px;
    margin-top: 4px;
    padding: 3px 8px 3px 6px;
    border: 1px solid rgba(83, 72, 132, .28);
    border-radius: 999px;
    background: rgba(241, 238, 255, .72);
    color: #4f4774;
    box-shadow: inset 0 1px rgba(255, 255, 255, .72);
    font-size: var(--text-xs);
    line-height: 1.05;
}
.mv-cadence-seal[hidden] { display: none; }
.mv-cadence-seal > span { display: flex; align-items: baseline; gap: 5px; }
.mv-cadence-seal strong { font-size: inherit; }
.mv-cadence-seal small { color: inherit; font-size: 10px; opacity: .78; }
.mv-cadence-seal.mv-active {
    border-color: rgba(129, 103, 202, .58);
    background: rgba(221, 213, 255, .88);
    color: #392e67;
    box-shadow: 0 0 12px rgba(158, 132, 232, .28), inset 0 1px rgba(255, 255, 255, .8);
}
@media (prefers-reduced-motion: reduce) {
    .mv-mob-body { animation: none; }
}

/* shared bars（血/耐/蓄力，spec §5.3 ProgressBar 共用一件） */
.mv-bar { position: relative; height: 6px; margin-top: var(--sp-1); background: var(--line); border-radius: var(--radius-chip); overflow: hidden; }
.mv-bar-fill { position: relative; height: 100%; width: 0; transition: width .12s ease-out; }
.mv-bar-hp > .mv-bar-fill { background: var(--hp); }
.mv-bar-stam > .mv-bar-fill { background: var(--stamina); }
/* HP 色帶語意：由 JS 設 data-hp（high/mid/low）→ 綠/琥珀/紅，掉血時眼睛立刻讀到危險 */
.mv-bar-hp[data-hp="high"] > .mv-bar-fill { background: var(--hp-high); }
.mv-bar-hp[data-hp="mid"] > .mv-bar-fill { background: var(--hp-mid); }
.mv-bar-hp[data-hp="low"] > .mv-bar-fill { background: var(--hp-low); }
/* 蓄力條 = 敵人自己的警示橘紅（不再跟「掉血黃拖尾」同色，兩個意思不再混淆） */
.mv-bar-atk, .mv-bar-charge { height: 4px; }
.mv-bar-atk > .mv-bar-fill { background: var(--accent-warm); }
.mv-bar-charge > .mv-bar-fill { background: var(--charge); }

/* queue 8 — 蓄力條語意（David 2026-08-28 真機回報「細紅橘條看不懂是第二條血還是 bug」）。
   行為早就正確（systems/combat.js do_enemy_attack_loop：count/60 穩定 0→100% 後攻擊歸零），
   缺的是「一眼讀成敵方攻擊倒數」的圖像語意。三件純呈現層的 cue，不碰 timing/傷害/HP/lunar：
   1) 斜紋跑道 — 條的底不再是素色，而是斜線紋理 → 讀成「正在充填的計量」而非血量。
   2) 條頭亮點 — fill 前緣一道亮邊，眼睛跟得住它在走（解決「有時填滿有時沒到端點」＝
      其實是滿的瞬間就攻擊歸零，人眼只抓到中途幀）。
   3) 環境脈動 — 整條恆常緩慢呼吸，讀成「這是一個活的計量」。注意這是 ambient 而非
      臨界警告：要在「接近滿」才脈動得改 JS 加 class，而 combat.js／combat_stage.js
      受 presentation SHA pin，這裡不動它們。 */
.mv-bar-charge {
    height: 5px;
    /* 這條原本是素色底（只有 var(--line)），跟上方 HP 條只差顏色 → 讀不出是兩種東西。
       斜紋要在 5px 高的條上真的看得見，alpha 不能客氣：先試 18%，交替幾乎看不出來，
       拉到 55% 才是清楚的明暗跑道。
       ⚠ 別在這裡寫死對比數字：實際渲染值取決於量測情境（單看本規則的 var(--line) 底，
       還是 impeccable 主題各戰鬥地點的覆蓋底），同一份 CSS 在不同情境會量到不同值，
       寫死一個就一定有情境對不上。要數字就跑 .codex-tmp/probe-queue8-charge.mjs
       （必須先 freeze 再截未填段，否則會量到移動中的 fill 或條外面板，得到假數字）。 */
    background:
        repeating-linear-gradient(115deg,
            color-mix(in srgb, var(--charge) 55%, transparent) 0 3px,
            transparent 3px 7px),
        var(--line);
    box-shadow: inset 0 1px 1px var(--bar-inset);
}
.mv-bar-charge > .mv-bar-fill {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--charge) 72%, transparent) 0%,
        var(--charge) 78%,
        color-mix(in srgb, var(--charge) 45%, #FFF) 100%);
    /* 輝光用 inset：外擴 box-shadow 在 .mv-stage-plate 版（overflow:visible）會滲出條外，
       蓄滿那一幀最明顯。inset 一樣有發燙感又永遠留在條內。 */
    box-shadow: inset 0 0 4px color-mix(in srgb, var(--charge) 65%, #FFF);
}
/* 條頭亮點：貼在 fill 右緣，蓄力越滿越靠右 → 明確的「進度頭」 */
.mv-bar-charge > .mv-bar-fill::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2px;
    background: color-mix(in srgb, var(--charge) 30%, #FFF);
    border-radius: 1px;
}
/* 環境脈動：整條恆常緩慢呼吸（不分蓄力多寡）。用 animation 不用 JS → 不新增任何
   render 呼叫或狀態；要做成「接近滿才警告」得由 JS 加 class，那會動到 SHA-pin 的檔。 */
.mv-bar-charge { animation: mv-charge-breath 1.15s ease-in-out infinite; }
/* 兩個 keyframe 都必須是 inset：這條在 .mv-stage-plate 版是 overflow:visible，而 overflow
   不裁元素自己的 box-shadow → 外擴陰影會滲出條外。條與上方 HP 條只隔 4px，正好等於這裡的
   模糊半徑，滲出去就直接糊在 HP 條上，反而製造 queue 8 要消滅的「這是第二條血嗎」混淆。 */
@keyframes mv-charge-breath {
    0%, 100% { box-shadow: inset 0 1px 1px var(--bar-inset); }
    /* 脈動強度是取捨過的：inset 光會壓暗紋理，把它調強（試過 72%/5px）會量到斜紋對比
       明顯下降——多次獨立量測方向一致。斜紋是主要 cue、脈動是次要，所以留在 40%/4px：
       擺動偏小，但不吃掉主 cue。改這兩個值前先用 probe 對照斜紋對比有沒有被拉低。 */
    50% { box-shadow: inset 0 1px 1px var(--bar-inset), inset 0 0 4px color-mix(in srgb, var(--charge) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    /* 減少動態：拿掉呼吸，但保留斜紋與條頭亮點 → 語意資訊不因無障礙設定消失 */
    .mv-bar-charge { animation: none; }
}

/* 遊戲感血條：更粗、圓角、內陰影 + 頂部高光（reskin slice 2026-07-11）。
   .mv-bar-lg = 舞台主血條（醒目）。 */
.mv-bar-lg { height: 16px; border-radius: var(--radius-bar); box-shadow: inset 0 1px 2px var(--bar-inset); }
.mv-bar-lg > .mv-bar-fill { border-radius: var(--radius-bar); }
.mv-bar-lg > .mv-bar-fill::after {
    content: ""; position: absolute; inset: 0 0 55% 0;
    background: linear-gradient(var(--bar-gloss), transparent);
    border-radius: var(--radius-bar) var(--radius-bar) 0 0;
}

/* 傷害拖尾（JRPG 手感）：琥珀殘影層墊在血色 fill 底下，掉血時慢速跟上 →
   血條瞬間縮、殘影慢慢追，露出的「碎片」= 剛剛扣的血。fill 用 .12s 快、trail 用 .55s 慢 →
   trail 一定墊在 fill 後面較長，不會反過來看起來像「比血還多」。 */
.mv-bar-trail { background: var(--line); }
.mv-bar-trail-fill {
    position: absolute; top: 0; left: 0; height: 100%; width: 0; z-index: 0;
    background: var(--accent-warm);
    transition: width .55s cubic-bezier(.4, 0, .2, 1); /* 古典 JRPG drain 曲線（原 bezier front-load 後卡住） */
}
.mv-bar-trail > .mv-bar-fill { z-index: 1; } /* fill 疊在 trail 上 */
.mv-bar-lg .mv-bar-trail-fill { border-radius: var(--radius-bar); }
@media (prefers-reduced-motion: reduce) {
    /* reduced-motion：trail 不動但保留短淡出，讓「剛扣血」的資訊不消失（只是不動） */
    .mv-bar-trail-fill { transition: width .01s, opacity .5s ease-out; }
    .mv-bar-trail > .mv-bar-fill, .mv-bar-fill { transition: none; }
}

/* player card + low-HP 危機 — 玩家 HUD（reskin slice 2: 視覺重量退位給敵人）。
   降低 chrome：邊框 --moon→--line、陰影減半、去掉 moon border，讓眼睛先落在敵人。 */
.mv-player {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-3);
    padding-bottom: calc(var(--sp-3) + var(--mv-safe-bottom)); /* notched 手機不撞 home indicator */
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 -2px 8px var(--shadow-ink);
}
/* 低血脈動紅光暈（< 25% HP）：截圖 2/60 HP 卻毫無危險提示 → 加危機感 */
.mv-player.mv-low-hp {
    border-color: var(--danger);
    animation: mv-lowhp-pulse 1.1s ease-in-out infinite;
}
.mv-player.mv-low-hp::before {
    content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none;
    box-shadow: inset 0 0 90px 20px color-mix(in srgb, var(--danger) 42%, transparent);
    animation: mv-lowhp-vignette 1.1s ease-in-out infinite;
}
@keyframes mv-lowhp-pulse {
    0%, 100% { box-shadow: 0 -2px 8px var(--shadow-ink), 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent); }
    50% { box-shadow: 0 -2px 8px var(--shadow-ink), 0 0 14px 2px color-mix(in srgb, var(--danger) 55%, transparent); }
}
@keyframes mv-lowhp-vignette {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}
.mv-player-row { display: flex; align-items: center; gap: var(--sp-2); }
.mv-player-row .mv-bar { flex: 1; margin-top: 0; height: 12px; border-radius: 7px; box-shadow: inset 0 1px 2px var(--bar-inset); }
.mv-player-row .mv-bar-atk { height: 7px; }
.mv-player-row .mv-bar > .mv-bar-fill,
.mv-player-row .mv-bar > .mv-bar-trail-fill { border-radius: 7px; }
.mv-player-icon { width: 22px; text-align: center; flex: none; font-size: var(--text-md); }
.mv-player-num { min-width: 66px; text-align: right; font-size: var(--text-xs); color: var(--ink-soft); flex: none; font-variant-numeric: tabular-nums; }
.mv-player-stats {
    margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line);
    font-size: var(--text-xs); color: var(--ink-soft); text-align: center; overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
    .mv-player.mv-low-hp { animation: none; }
    .mv-player.mv-low-hp::before { animation: none; opacity: .8; }
}

/* stance quick bar — 觸控友善的架勢控制列（reskin: 更像遊戲底部技能鈕） */
.mv-stancebar { display: flex; align-items: center; gap: var(--sp-2); }
.mv-stancebar-chips { display: flex; gap: var(--sp-2); overflow-x: auto; flex: 1; padding-bottom: 2px; }
.mv-stance-chip {
    min-height: var(--touch-min);
    padding: 0 var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-chip);
    background: var(--paper-card);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px var(--shadow-ink);
    transition: transform 120ms ease-out;
}
.mv-stance-chip:active { transform: scale(.95); }
.mv-stance-chip.mv-active { border: none; background: var(--mv-tf-button-selected) center / 100% 100% no-repeat; color: #fff; box-shadow: 0 2px 8px var(--glow-moon); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.mv-stancebar-open {
    flex: none;
    min-height: var(--touch-min);
    padding: 0 var(--sp-4);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    color: #fff;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px var(--glow-moon);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    transition: transform 120ms ease-out;
}
.mv-stancebar-open:active { transform: scale(.96); }

/* bottom sheet（spec §2.3：tooltip 內容 → tap 開 sheet） */
.mv-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(40, 36, 30, .45);
    display: flex;
    align-items: flex-end;
}
/* 作者的 display:flex 會蓋過 UA 的 [hidden]{display:none} — 必須自己補回，
   否則 overlay 永遠罩住整頁擋掉所有觸控（E2E 的 JS .click() 測不出來） */
.mv-sheet-overlay[hidden] { display: none; }
.mv-sheet {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    max-height: 70vh;
    overflow-y: auto;
    background:
        linear-gradient(180deg, rgba(246,241,231,.88) 0%, rgba(246,241,231,.82) 100%),
        url("/resources/img/texture-parchment.png") center / cover;
    border-radius: 20px 20px 0 0;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-4) + var(--mv-safe-bottom));
    box-shadow: 0 -4px 24px rgba(40, 36, 30, .18), inset 0 1px 0 rgba(255,255,255,.3);
    animation: mv-sheet-in 200ms ease-out;
}
[data-theme="night"] .mv-sheet {
    background:
        linear-gradient(180deg, rgba(35,42,61,.92) 0%, rgba(35,42,61,.88) 100%),
        url("/resources/img/texture-parchment.png") center / cover;
}
.mv-sheet-grip { width: 40px; height: 4px; margin: 0 auto var(--sp-3); border-radius: var(--radius-chip); background: var(--line); }
/* sheet 動作列 sticky footer（David 2026-07-04：成交/清空/離開不准被捲走） */
.mv-sheet-footer {
    position: sticky;
    bottom: calc(-1 * (var(--sp-4) + var(--mv-safe-bottom)));
    z-index: 7;
    margin: 0 calc(-1 * var(--sp-4));
    padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + var(--mv-safe-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
}
.mv-sheet h3 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.mv-sheet-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.mv-sheet-heading h3 { flex: 1; min-width: 0; margin-bottom: 0; }
.mv-sheet-visible-close {
    flex: none;
    width: 112px;
    min-height: 44px;
    padding: 6px 14px;
    font-size: var(--text-xs);
}
/* SPEC D: themed sheet header banners */
.mv-sheet-banner {
    margin: calc(-1 * var(--sp-3)) calc(-1 * var(--sp-4)) var(--sp-3);
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 20px 20px 0 0;
    opacity: 0.85;
}
.mv-sheet[data-theme="merchant"] .mv-sheet-banner { background-image: url("/resources/img/sheet-merchant.png"); }
.mv-sheet[data-theme="crafting"] .mv-sheet-banner { background-image: url("/resources/img/sheet-crafting.png"); }
.mv-sheet[data-theme="storage"] .mv-sheet-banner { background-image: url("/resources/img/sheet-storage.png"); }
.mv-sheet[data-theme="dialogue"] .mv-sheet-banner { background-image: url("/resources/img/sheet-dialogue.png"); }
.mv-sheet-list { display: flex; flex-direction: column; gap: var(--sp-2); }
@keyframes mv-sheet-in {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* stance rows in sheet */
.mv-stance-row {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.25);
}
.mv-stance-row.mv-active { border-color: var(--moon-deep); }
.mv-stance-fav {
    flex: none;
    width: var(--touch-min);
    border: none;
    background: none;
    color: var(--ink-soft);
    font-size: var(--text-lg);
    cursor: pointer;
}
.mv-stance-fav.mv-on { color: var(--accent-warm); }
.mv-stance-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
    border: none;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    min-height: var(--touch-min);
}
.mv-stance-name { font-weight: 700; }
.mv-stance-desc, .mv-stance-stats { font-size: var(--text-xs); color: var(--ink-soft); }

/* floating combat text */
.mv-float {
    position: fixed;
    z-index: 40;
    pointer-events: none;
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--ink);
    text-shadow: 0 1px 2px var(--paper);
    animation: mv-float-up 1.4s ease-out forwards;
}
/* 傷害數字：大且依傷害量放大（爆擊感 — 原本 16px 在晃動 sprite 上幾乎讀不到）。
   base = lg(20px)、mv-float-lg = xl(26px)、mv-float-xl = 34px。 */
.mv-float-dmg { color: var(--accent-warm); font-size: var(--text-lg); -webkit-text-stroke: .5px var(--paper); }
.mv-float-lg { font-size: var(--text-xl); }
.mv-float-xl { font-size: 34px; }
.mv-float-hurt { color: var(--hp); font-size: var(--text-lg); }
@keyframes mv-float-up {
    from { transform: translate(-50%, 0); opacity: 1; }
    to { transform: translate(-50%, -44px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mv-sheet { animation: none; }
    .mv-float { animation: mv-float-fade 1.4s ease-out forwards; }
    @keyframes mv-float-fade { from { opacity: 1; } to { opacity: 0; } }
}

/* dialogue mode (M6): scene screen takeover via data-mode */
.mv-dialogue { display: none; }
.mv-scene[data-mode="dialogue"] > .mv-loc-header,
.mv-scene[data-mode="dialogue"] > .mv-actions,
.mv-scene[data-mode="dialogue"] > .mv-quick,
.mv-scene[data-mode="dialogue"] > .mv-route-ledger-slot,
.mv-scene[data-mode="dialogue"] > .mv-village-map,
.mv-scene[data-mode="dialogue"] > .mv-ongoing,
.mv-scene[data-mode="dialogue"] > .mv-combat { display: none; }
.mv-scene[data-mode="dialogue"] > .mv-dialogue {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--sp-3);
    flex: 1;
    min-height: 0;
}
.mv-player-avatar { display: none; }
.mv-player-vitals { display: contents; }
.mv-dlg-head { display: flex; align-items: center; gap: var(--sp-3); }
.mv-dlg-identity { display: contents; }
.mv-dlg-head h2 { flex: 1; min-width: 0; font-size: var(--text-lg); }
.mv-dlg-visible-exit {
    flex: none;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
}
.mv-dlg-visible-exit[hidden] { display: none; }
.mv-dlg-exit-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.mv-dlg-exit-glyph {
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 248, 220, .48);
    border-radius: 13px;
    background: rgba(31, 65, 59, .78);
    color: #fff8dc;
    box-shadow: 0 3px 9px rgba(13, 35, 34, .18);
    transition: transform 120ms ease, background-color 120ms ease;
}
.mv-dlg-visible-exit:active .mv-dlg-exit-glyph { transform: scale(.92); }
.mv-dlg-visible-exit[data-exit-kind="close"] .mv-dlg-exit-glyph::before,
.mv-dlg-visible-exit[data-exit-kind="close"] .mv-dlg-exit-glyph::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 10px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.mv-dlg-visible-exit[data-exit-kind="close"] .mv-dlg-exit-glyph::before { transform: rotate(45deg); }
.mv-dlg-visible-exit[data-exit-kind="close"] .mv-dlg-exit-glyph::after { transform: rotate(-45deg); }
.mv-dlg-visible-exit[data-exit-kind="back"] .mv-dlg-exit-glyph::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 11px;
    width: 13px;
    height: 13px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
.mv-dlg-visible-exit[data-exit-kind="back"] .mv-dlg-exit-glyph::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 11px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.mv-dlg-avatar {
    flex: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--moon);
    color: #fff;
    font-size: var(--text-lg);
    font-weight: 700;
}
.mv-dlg-avatar-art {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mv-dlg-avatar-art[data-portrait] {
    background-image: url("/resources/characters/story-opening-cast-atlas-v1.webp");
    background-repeat: no-repeat;
    background-size: 200% 200%;
    color: transparent;
}
.mv-dlg-avatar-art[data-portrait="ella"] { background-position: 0 0; }
.mv-dlg-avatar-art[data-portrait="ed"] { background-position: 100% 0; }
.mv-dlg-avatar-art[data-portrait="mara"] { background-position: 0 100%; }
.mv-dlg-avatar-art[data-portrait="millers"] { background-position: 100% 100%; }
/* NPC 台詞＝氣泡＋左上尖角指向頭像；旁白（.mv-dlg-desc）不長尖角（David P1：
   NPC 說的 vs 玩家可選的要一眼分得開） */
.mv-dlg-answer {
    position: relative;
    min-height: 0;
    padding: var(--sp-3);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    font-style: italic;
    line-height: 1.55;
    overflow-y: auto;
    scrollbar-width: none;
    white-space: pre-line;
}
.mv-dlg-answer::-webkit-scrollbar { display: none; }
.mv-dlg-answer:not(.mv-dlg-desc)::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 16px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid var(--line);
}
.mv-dlg-answer:not(.mv-dlg-desc)::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 17.5px;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-bottom: 8px solid var(--paper-card);
}
.mv-dlg-answer.mv-dlg-desc { font-style: normal; color: var(--ink-soft); }
.mv-dlg-options { display: flex; flex-direction: column; gap: var(--sp-2); flex: none; }
.mv-dlg-options[hidden] { display: none; } /* [hidden] vs display:flex（見 gotcha） */
.mv-dlg-option {
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-3);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    transition: transform 150ms ease-out;
}
.mv-dlg-option:active { transform: scale(.98); }
/* 玩家發言（textline「…」）＝聊天式靠右、月色 tint、右下角收窄；
   非發言選項（✨行動/🛒商人/↩結束）維持全寬中性卡。
   affordance 鐵律（CLAUDE.md 鐵律 9）：選項要一眼看出可按 — 陰影＋尾端 ❯ */
.mv-dlg-option { box-shadow: 0 1px 3px rgba(62, 58, 51, .12); }
.mv-dlg-option-say {
    align-self: flex-end;
    max-width: 88%;
    background: color-mix(in srgb, var(--moon) 14%, var(--paper-card));
    border-color: var(--moon);
    border-bottom-right-radius: 4px;
    text-align: right;
}
.mv-dlg-option-say::after { content: " ❯"; color: var(--moon); font-weight: 700; }
.mv-dlg-option-end { color: var(--ink-soft); }
.mv-dlg-option-dev { opacity: .55; }
.mv-dlg-option-dev::after { content: " \1f6a7"; }
.mv-dlg-action {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-3);
    background: var(--paper-card);
    border: 1px solid var(--moon);
    border-radius: var(--radius-card);
}
/* [hidden] 會被上面的 display:flex 蓋掉（同 mv-sheet-overlay 的坑）— 補回 */
.mv-dlg-action[hidden] { display: none; }
.mv-bar-action { height: 8px; }
.mv-bar-action > .mv-bar-fill { background: var(--moon); transition: width 100ms linear; }
.mv-dlg-action-end {
    min-height: var(--touch-min);
    border: none;
    border-radius: var(--radius-card);
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    color: #fff;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--glow-moon);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.mv-escape-cue { animation: mv-escape-cue 700ms ease-out; }
@keyframes mv-escape-cue {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.06); filter: drop-shadow(0 0 8px var(--moon)); }
}
@media (prefers-reduced-motion: reduce) {
    .mv-dlg-option { transition: none; }
    .mv-bar-action > .mv-bar-fill { transition: none; }
    .mv-escape-cue { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    body::after { transition: none; }
}

/* ═══ 環境粒子（CSS-only）：夜=螢火蟲、日=光塵 ═══
   固定層疊在 time-tint 上方但在 toast/sheet 下方。pointer-events:none 不擋操作。
   Day: 暖金色小光塵緩慢飄落（陽光粒子感）
   Night: 綠黃色螢火蟲脈動浮游（宮崎駿療癒夜）
   使用 box-shadow 多點技巧 — 單一 pseudo-element 用 box-shadow 畫出多個粒子。 */
.mv-particles {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}
.mv-particles::before,
.mv-particles::after {
    content: "";
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    opacity: 0;
}
/* 日間：暖金色光塵向下飄 */
.mv-particles::before {
    background: rgba(217, 160, 91, .6);
    box-shadow:
        20vw 10vh 0 0 rgba(217, 160, 91, .4),
        55vw 5vh 0 1px rgba(217, 160, 91, .3),
        80vw 20vh 0 0 rgba(217, 160, 91, .5),
        35vw 35vh 0 1px rgba(217, 160, 91, .3),
        65vw 50vh 0 0 rgba(217, 160, 91, .4),
        10vw 60vh 0 1px rgba(217, 160, 91, .3),
        45vw 75vh 0 0 rgba(217, 160, 91, .5),
        75vw 85vh 0 1px rgba(217, 160, 91, .3),
        25vw 45vh 0 0 rgba(217, 160, 91, .4),
        90vw 30vh 0 0 rgba(217, 160, 91, .3);
    animation: mv-dust-drift 18s linear infinite;
    opacity: .7;
}
@keyframes mv-dust-drift {
    0%   { transform: translateY(-10vh) translateX(0); opacity: 0; }
    10%  { opacity: .7; }
    90%  { opacity: .7; }
    100% { transform: translateY(105vh) translateX(15px); opacity: 0; }
}
/* 夜間：螢火蟲脈動上浮 */
.mv-particles::after {
    background: rgba(180, 220, 100, .7);
    box-shadow:
        15vw 80vh 0 1px rgba(180, 220, 100, .5),
        40vw 70vh 0 2px rgba(200, 230, 120, .4),
        70vw 85vh 0 1px rgba(180, 220, 100, .6),
        25vw 60vh 0 2px rgba(200, 230, 120, .3),
        55vw 90vh 0 1px rgba(180, 220, 100, .5),
        85vw 75vh 0 2px rgba(200, 230, 120, .4),
        30vw 95vh 0 1px rgba(180, 220, 100, .5),
        60vw 65vh 0 2px rgba(200, 230, 120, .3);
    animation: mv-firefly-float 22s ease-in-out infinite;
    opacity: 0;
}
@keyframes mv-firefly-float {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    8%   { opacity: .8; }
    25%  { transform: translateY(-20vh) translateX(8px); opacity: .5; }
    50%  { transform: translateY(-45vh) translateX(-6px); opacity: .9; }
    75%  { transform: translateY(-70vh) translateX(10px); opacity: .4; }
    92%  { opacity: .7; }
    100% { transform: translateY(-100vh) translateX(0); opacity: 0; }
}
/* 日間只顯示光塵，隱藏螢火蟲 */
.mv-particles::before { opacity: .7; }
.mv-particles::after { opacity: 0; }
/* 夜間反轉：螢火蟲出現，光塵隱藏 */
[data-theme="night"] .mv-particles::before { opacity: 0; animation: none; }
[data-theme="night"] .mv-particles::after { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
    .mv-particles::before, .mv-particles::after { animation: none; opacity: 0; }
}

/* 離線結算 modal（spec §3.5，M7）：boot 後首屏置中卡片。
   開/關 = DOM append/remove（不用 [hidden]，避開 display 蓋掉 UA 規則的坑） */
.mv-offline-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(40, 36, 30, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.mv-offline-card {
    width: 100%;
    max-width: 420px;
    background:
        linear-gradient(180deg, rgba(246,241,231,.9) 0%, rgba(246,241,231,.85) 100%),
        url("/resources/img/texture-parchment.png") center / cover;
    border-radius: var(--radius-card);
    padding: var(--sp-4);
    box-shadow: 0 8px 28px rgba(40, 36, 30, .25), inset 0 1px 0 rgba(255,255,255,.3);
    animation: mv-sheet-in 200ms ease-out;
}
[data-theme="night"] .mv-offline-card {
    background:
        linear-gradient(180deg, rgba(35,42,61,.92) 0%, rgba(35,42,61,.88) 100%),
        url("/resources/img/texture-parchment.png") center / cover;
}
.mv-offline-card h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.mv-offline-away { font-size: var(--text-sm); color: var(--ink-soft, inherit); margin-bottom: var(--sp-3); }
.mv-offline-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mv-offline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-md);
}
.mv-offline-value { font-weight: 600; }
.mv-offline-quiet { font-size: var(--text-sm); margin-bottom: var(--sp-3); }
.mv-offline-cap { font-size: var(--text-sm); color: var(--moon-deep); margin-bottom: var(--sp-3); }
.mv-offline-close {
    width: 100%;
    min-height: var(--touch-min);
    border: none;
    border-radius: var(--radius-card);
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    color: #fff;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px var(--glow-moon);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
@media (prefers-reduced-motion: reduce) {
    .mv-offline-card { animation: none; }
}

/* ═══ 戰敗回饋（spec defeat-feedback-v1，David「戰敗要 FEEL it、螢幕變紅/震動」）═══ */
/* 全螢幕紅閃：一次性 element，蓋在最上層、pointer-events:none 不擋操作，動畫完自我移除 */
.mv-defeat-flash {
    position: fixed; inset: 0; z-index: 40; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(200, 30, 30, .0) 30%, rgba(170, 20, 20, .55) 100%);
    animation: mv-defeat-flash 700ms ease-out forwards;
}
@keyframes mv-defeat-flash {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    100% { opacity: 0; }
}
/* 畫面震動：加在 app root，短促幾下位移 */
.mv-screen-shake { animation: mv-screen-shake 500ms cubic-bezier(.36, .07, .19, .97); }
@keyframes mv-screen-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-6px, 3px); }
    25% { transform: translate(5px, -4px); }
    40% { transform: translate(-5px, 4px); }
    55% { transform: translate(4px, -3px); }
    70% { transform: translate(-3px, 2px); }
    85% { transform: translate(2px, -1px); }
}
.mv-defeat-title { color: var(--hp-low, #c0392b); }
@media (prefers-reduced-motion: reduce) {
    /* 暈眩敏感：關掉震動與紅閃動畫（紅閃不顯示、畫面不抖）——modal 敘事仍在，資訊不丟 */
    .mv-defeat-flash { animation: none; opacity: 0; }
    .mv-screen-shake { animation: none; }
}

/* journal tab: 分頁（訊息/任務/圖鑑）——screen 內分頁只此一層（spec §2.2） */
.mv-subtabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mv-subtab {
    flex: 1;
    min-height: var(--touch-min);
    border: none;
    border-radius: var(--radius-chip);
    background: var(--mv-tf-button-secondary) center / 100% 100% no-repeat;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    box-shadow: 0 1px 3px var(--shadow-ink);
    transition: transform 100ms ease-out;
}
.mv-subtab:active { transform: scale(.97); }
.mv-subtab.mv-active {
    border: none;
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 6px var(--glow-moon);
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.mv-journal-panel { display: none; }
.mv-journal-panel.mv-active { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-empty { color: var(--ink-soft); text-align: center; padding: var(--sp-6) 0; }
.mv-quest-list:not(:empty) ~ .mv-empty,
.mv-bestiary-list:not(:empty) ~ .mv-empty { display: none; }

/* journal-quests */
.mv-quest-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-chip-toggle { align-self: flex-end; min-height: var(--touch-min); cursor: pointer; font-family: inherit; }
.mv-chip-toggle.mv-on { outline: 2px solid var(--moon-deep); outline-offset: -2px; color: var(--moon-deep); font-weight: 700; }
.mv-hide-finished .mv-quest-finished { display: none; }
.mv-quest {
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 2px 5px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.3);
}
.mv-quest-finished { opacity: .6; }
.mv-quest-head {
    display: flex;
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-3);
    border: none;
    background: none;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.mv-quest-body { display: none; padding: 0 var(--sp-3) var(--sp-3); }
.mv-quest.mv-open > .mv-quest-body { display: block; }
.mv-quest-desc { font-size: var(--text-sm); color: var(--ink-soft); white-space: pre-line; }
.mv-quest-tasks { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.mv-quest-task { display: flex; flex-direction: column; font-size: var(--text-sm); }
.mv-quest-task.mv-done { color: var(--ink-soft); }
.mv-quest-task-cond { font-size: var(--text-xs); color: var(--ink-soft); padding-left: var(--sp-4); }

/* journal-bestiary */
.mv-bestiary-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-bestiary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-3);
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.3);
}
.mv-bestiary-kills { color: var(--accent-warm); font-weight: 700; }
.mv-bestiary-desc { font-size: var(--text-sm); white-space: pre-line; }
.mv-bestiary-meta { font-size: var(--text-xs); color: var(--ink-soft); }
.mv-bestiary-stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mv-statgroup { margin-bottom: var(--sp-2); }
.mv-statgroup-label { display: block; font-size: var(--text-xs); color: var(--ink-soft); letter-spacing: 1px; margin-bottom: var(--sp-1); text-transform: uppercase; }
.mv-statgroup-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.mv-statchip {
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 90%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-chip);
    padding: 2px var(--sp-3);
    font-size: var(--text-sm);
    box-shadow: 0 1px 3px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.3);
}
.mv-bestiary-drops h4 { font-size: var(--text-xs); color: var(--ink-soft); font-weight: 400; letter-spacing: 2px; margin-bottom: var(--sp-1); }
.mv-bestiary-drop { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--text-sm); }
.mv-bestiary-chance { color: var(--ink-soft); font-size: var(--text-xs); }

/* more tab: 地圖・旅行 */
.mv-map summary { list-style: none; cursor: pointer; min-height: var(--touch-min); display: flex; align-items: center; }
.mv-map summary::-webkit-details-marker { display: none; }
.mv-map summary::after { content: "▸"; margin-left: auto; color: var(--ink-soft); transition: transform 150ms ease-out; }
.mv-map[open] summary::after { transform: rotate(90deg); }
.mv-map-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-map-group { font-size: var(--text-xs); color: var(--ink-soft); font-weight: 400; letter-spacing: 2px; margin-top: var(--sp-2); }
.mv-map-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--touch-min);
    padding: var(--sp-2) var(--sp-3);
    background: linear-gradient(180deg, var(--paper-card) 0%, color-mix(in srgb, var(--paper-card) 92%, var(--line)) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    color: var(--ink);
    font-family: inherit;
    font-size: var(--text-md);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 5px var(--shadow-ink), inset 0 1px 0 rgba(255,255,255,.3);
}
.mv-more-v2 .mv-map summary {
    padding: 8px 22px;
    background: var(--mv-tf-button-selected) center / 100% 100% no-repeat;
    color: #fff;
    text-shadow: 0 1px 2px rgba(35,42,61,.55);
}
.mv-more-v2 .mv-map summary h3 { color: inherit; }
.mv-more-v2 .mv-map-row {
    background: var(--mv-tf-button-secondary) center / 100% 100% no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-inline: 24px;
    color: #4b3c34;
}
.mv-more-v2 .mv-map-far {
    background-image: var(--mv-tf-button-disabled);
    opacity: 1;
}
.mv-more-v2 .mv-map-here {
    background-image: var(--mv-tf-button-selected);
    color: #fff;
    text-shadow: 0 1px 2px rgba(35,42,61,.55);
}
.mv-map-icon { font-size: var(--text-lg); flex: none; }
.mv-map-far { opacity: .5; cursor: default; }
.mv-map-here { border-color: var(--moon-deep); }
@media (prefers-reduced-motion: reduce) {
    .mv-map summary::after { transition: none; }
}

/* ============================================================
   Icon system (emoji -> 水彩 img 圖示化，見 design/icons.js)
   單一 .mv-icon 基底：img 與 emoji fallback 共用同一版型，
   遷移期間兩者可無縫替換、不造成 layout shift。
   ============================================================ */
.mv-icon {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    /* width/height 由 helper 依 registry 寫進 img 屬性（防 CLS）；
       emoji fallback span 用 1em 跟隨字級。 */
    user-select: none;
    -webkit-user-drag: none;
}
/* emoji fallback：讓 emoji 字形對齊、尺寸貼近未來 img，減少切換抖動 */
.mv-icon-emoji {
    line-height: 1;
    font-size: 1.15em;
}
/* 查無 key 的 placeholder（dev 期間才會看到） */
.mv-icon-missing {
    display: inline-grid; place-items: center;
    width: 1em; height: 1em;
    color: var(--accent-warm); font-weight: 700;
    outline: 1px dashed var(--accent-warm);
}
/* 夜間主題：水彩 img 在深底可能對比不足 -> 極淡柔光，通吃 day/night
   （council 定案：單張圖 + CSS 微調，不做雙套 PNG）。 */
[data-theme="night"] .mv-icon:not(.mv-icon-emoji) {
    filter: drop-shadow(0 0 1.5px rgba(246, 241, 231, .45));
}

/* Journal V2 — an illustrated travel book with drawn chapter controls and a
   real event trail. The harvest store and renderer contracts stay unchanged. */
.mv-screens:has(.mv-journal-v2.mv-active) { overflow: hidden; }
.mv-screen.mv-journal-v2 {
    height: 100%;
    min-height: 100%;
    padding: 0;
    overflow: hidden;
    background-color: #edddb9;
    background-image:
        linear-gradient(180deg, rgba(255,249,232,.08), rgba(239,218,178,.18)),
        url("/resources/img/backgrounds/bg-journal-v2.webp");
    background-position: center, center bottom;
    background-size: cover, 100% auto;
    background-repeat: no-repeat;
}
.mv-screen.mv-journal-v2::before { opacity: 0; }
.mv-screen.mv-journal-v2.mv-active { display: flex; flex-direction: column; }
[data-theme="night"] .mv-screen.mv-journal-v2 {
    background-color: #343a4d;
    background-image:
        linear-gradient(180deg, rgba(35,40,60,.58), rgba(29,34,52,.74)),
        url("/resources/img/backgrounds/bg-journal-v2.webp");
}
.mv-journal-header {
    min-height: 58px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 12px 2px;
    color: #563d2e;
    text-shadow: 0 1px 1px rgba(255,251,238,.8);
}
.mv-journal-header > span { display: flex; flex-direction: column; line-height: 1.12; }
.mv-journal-header strong { font-size: var(--text-lg); letter-spacing: 2px; }
.mv-journal-header small { font-size: 10px; letter-spacing: 1px; opacity: .72; }
[data-theme="night"] .mv-journal-header { color: #fff3d8; text-shadow: 0 2px 7px rgba(15,18,31,.72); }
.mv-journal-v2 > .mv-journal-nav {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0 8px 5px;
}
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button {
    width: 100%;
    min-height: 46px;
    padding: 6px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: var(--text-sm);
}
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button.mv-cozy-button-secondary {
    background-image: var(--mv-tf-button-secondary);
    color: #4b3c34;
}
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button.mv-cozy-button-primary {
    background-image: var(--mv-tf-button-selected);
    color: #fff;
}
.mv-journal-view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(14px, var(--mv-safe-bottom));
}
.mv-journal-view > .mv-journal-panel { min-height: 100%; padding: 5px 10px 22px; }
.mv-journal-view > .mv-journal-panel.mv-active { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-journal-view > .mv-log-panel.mv-active { display: flex; }
[data-theme="night"] .mv-journal-log-summary,
[data-theme="night"] .mv-harvest-card,
[data-theme="night"] .mv-harvest-node {
    background-color: color-mix(in srgb, var(--paper-card) 82%, transparent);
}
[data-theme="night"] .mv-journal-empty strong { color: #fff2d6; }
[data-theme="night"] .mv-journal-empty { color: #d8cfbe; }
@media (max-width: 370px), (max-height: 740px) {
    .mv-journal-header { min-height: 52px; padding-top: 2px; }
    .mv-journal-header .mv-icon { width: 40px; height: 40px; }
    .mv-journal-header strong { font-size: var(--text-md); }
    .mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button { min-height: 44px; padding-inline: 8px; }
    .mv-journal-view > .mv-journal-panel { padding-top: 3px; }
    .mv-journal-log-summary { min-height: 56px; }
    .mv-journal-empty { min-height: 210px; padding-bottom: 42px; }
}

/* Journal + More cohesion pass (2026-07-16).
   One illustrated world, one quiet parchment surface, one icon-tile control
   grammar. In particular, never reuse panel-content.png here: its preview
   checkerboard is baked into the opaque centre of the raster. */
.mv-more-v2.mv-active {
    gap: 0;
    padding: 8px 10px 0;
}
.mv-more-header {
    min-height: 54px;
    justify-content: flex-start;
    padding: 2px 6px 7px;
    background: none;
    border-bottom: 1px solid rgba(255, 244, 218, .34);
    color: #fff5e7;
    text-shadow: 0 2px 9px rgba(37, 25, 49, .72);
}
.mv-more-header small { opacity: .82; }
.mv-more-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 7px 0 5px;
}
.mv-more-nav-button,
.mv-more-nav-button.mv-cozy-button-secondary,
.mv-more-nav-button.mv-cozy-button-primary {
    min-height: 66px;
    padding: 7px 2px;
    flex-direction: column;
    gap: 1px;
    background-image: url("/resources/ui/slot-empty.png");
    background-size: 58px 58px;
    color: #544236;
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 1px rgba(255,255,255,.48);
    filter: saturate(.74) opacity(.88);
}
.mv-more-nav-button[aria-selected="true"] {
    color: #3f315d;
    filter: saturate(1.08) drop-shadow(0 4px 7px rgba(62,43,83,.34));
    transform: translateY(-1px);
}
.mv-more-view { padding: 5px 2px calc(var(--sp-5) + var(--mv-safe-bottom)); }
.mv-more-view,
.mv-journal-view { scrollbar-width: none; }
.mv-more-view::-webkit-scrollbar,
.mv-journal-view::-webkit-scrollbar { display: none; }
.mv-char-paperdoll {
    gap: 10px;
    padding: 10px 10px 20px;
    background: color-mix(in srgb, #fff8e8 72%, transparent);
    border: 1px solid rgba(255,245,220,.54);
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(45,30,55,.18), inset 0 1px rgba(255,255,255,.46);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.mv-pd-name-row {
    min-height: 46px;
    padding: 0 2px 7px 8px;
    background: none;
    border-bottom: 1px solid rgba(93,67,52,.2);
}
.mv-pd-name-row > span { justify-content: flex-start; }
.mv-pd-name { font-size: var(--text-md); color: var(--ink); }
.mv-pd-rename { width: 82px; min-height: 44px; }
.mv-pd-body { padding: 3px 0 0; }
.mv-pd-portrait-frame {
    width: 154px;
    height: 184px;
    padding: 5px;
    background: color-mix(in srgb, #f7dfb6 52%, transparent);
    border: 2px solid rgba(128,88,57,.38);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(58,39,55,.2), inset 0 1px rgba(255,255,255,.5);
}
.mv-pd-portrait-img { width: 144px; height: 174px; border-radius: 13px; }
.mv-pd-stats-panel {
    gap: 0;
    padding: 13px 14px 11px;
    background: color-mix(in srgb, #fffaf0 74%, transparent);
    border: 1px solid rgba(112,82,58,.2);
    border-radius: 18px;
    color: var(--ink);
}
.mv-pd-base-stats,
.mv-pd-atk-panel,
.mv-pd-def-panel {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
}
.mv-pd-base-stats { padding-bottom: 11px; }
.mv-pd-combat-row {
    gap: 0;
    padding-top: 11px;
    border-top: 1px solid rgba(112,82,58,.18);
}
.mv-pd-atk-panel { padding-right: 13px; }
.mv-pd-def-panel {
    padding-left: 13px;
    border-left: 1px solid rgba(112,82,58,.18);
}
.mv-pd-stats-title,
.mv-pd-atk-title,
.mv-pd-def-title { margin-bottom: 7px; }
.mv-pd-base-label { color: var(--ink-soft); }

/* More settings / saves share the same parchment and icon-tile grammar.
   Rows are separated by hairlines instead of stacking independent frames. */
.mv-more-panel[data-more-panel="settings"],
.mv-more-panel[data-more-panel="saves"] {
    gap: 0;
    padding: 9px 13px 12px;
    background: color-mix(in srgb, #fff8e8 74%, transparent);
    border-color: rgba(255,245,220,.54);
    border-radius: 22px;
    box-shadow: 0 12px 34px rgba(45,30,55,.18), inset 0 1px rgba(255,255,255,.46);
    color: #4b3c34;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.mv-settings-group[data-more-group] { gap: 0; }
.mv-settings-group[data-more-group] > h3 {
    min-height: 36px;
    margin: 0;
    padding: 2px 3px 5px;
    color: #4b3c34;
}
.mv-settings-group[data-more-group] > h3 .mv-icon { flex: none; }
.mv-setting-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    min-height: 60px;
    gap: 9px;
    padding: 5px 2px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(112,82,58,.18);
    border-radius: 0;
    color: #4b3c34;
}
.mv-setting-row:last-child { border-bottom: 0; }
.mv-setting-row > .mv-icon {
    width: 46px !important;
    height: 46px !important;
    box-sizing: border-box;
    padding: 9px;
    object-fit: contain;
    background: url("/resources/ui/slot-empty.png") center / 46px 46px no-repeat;
    filter: saturate(.86);
}
.mv-setting-row > span {
    min-width: 0;
    line-height: 1.3;
}
.mv-setting-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 46px;
    height: 46px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: url("/resources/ui/slot-empty.png") center / 46px 46px no-repeat;
    filter: saturate(.55) opacity(.72);
    cursor: pointer;
    transition: transform 100ms ease-out, filter 100ms ease-out;
}
.mv-setting-row input[type="checkbox"]:checked {
    background-image:
        radial-gradient(circle at center, rgba(91,75,153,.96) 0 5px, rgba(255,244,214,.92) 6px 9px, transparent 10px),
        url("/resources/ui/slot-empty.png");
    background-position: center, center;
    background-size: 46px 46px, 46px 46px;
    background-repeat: no-repeat;
    filter: saturate(1.12) drop-shadow(0 3px 5px rgba(67,48,91,.24));
}
.mv-setting-row input[type="checkbox"]:active { transform: scale(.94); }
.mv-setting-row input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--moon) 74%, white);
    outline-offset: 1px;
}
.mv-setting-number {
    width: 46px;
    min-height: 46px;
    padding: 0 5px;
    border: 0;
    border-radius: 0;
    background: url("/resources/ui/slot-empty.png") center / 46px 46px no-repeat;
    color: #4b3c34;
    font-weight: 800;
    -moz-appearance: textfield;
}
.mv-setting-number::-webkit-inner-spin-button,
.mv-setting-number::-webkit-outer-spin-button { appearance: none; margin: 0; }

.mv-more-panel[data-more-panel="saves"] .mv-settings-group {
    padding: 3px 0 12px;
    border-bottom: 1px solid rgba(112,82,58,.2);
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-group:last-of-type {
    padding-bottom: 5px;
    border-bottom: 0;
}
.mv-settings-group[data-more-group="local"],
.mv-settings-group[data-more-group="danger"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}
.mv-settings-group[data-more-group="local"] > h3,
.mv-settings-group[data-more-group="danger"] > h3 { grid-column: 1 / -1; }
.mv-settings-group[data-more-group="cloud"] > .mvcs-note {
    margin: 0 3px 6px;
    color: #6d5b50;
    font-size: 12px;
    line-height: 1.45;
}
.mv-settings-group[data-more-group="cloud"] > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn.mv-cozy-button-primary,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn.mv-cozy-button-secondary {
    width: 100%;
    min-height: 82px;
    margin: 0;
    padding: 11px 4px 5px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url("/resources/ui/slot-empty.png");
    background-position: center top;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    color: #4b3c34;
    font-size: 11px;
    line-height: 1.12;
    text-align: center;
    text-shadow: 0 1px rgba(255,255,255,.5);
    filter: saturate(.78) opacity(.92);
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button > .mv-icon,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn > .mv-icon {
    width: 27px !important;
    height: 27px !important;
    flex: none;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button > span,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn > span {
    max-width: 112px;
    margin-top: 11px;
    white-space: normal;
}
.mv-settings-group[data-more-group="cloud"] > div > button:only-child,
.mv-settings-group[data-more-group="cloud"] > div > button:last-child:nth-child(odd),
.mv-settings-group[data-more-group="danger"] > button {
    grid-column: 1 / -1;
    width: calc(50% - 3px);
    justify-self: center;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button:active,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn:active {
    transform: scale(.96);
    filter: saturate(.92) brightness(.92);
}
.mv-more-panel[data-more-panel="saves"] .mvcs-btn-primary {
    color: #44335f;
    filter: saturate(1.08) drop-shadow(0 3px 6px rgba(88,66,112,.24));
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-danger { color: #a34442; }
.mv-more-panel[data-more-panel="saves"] .mv-more-footer {
    margin: 0;
    padding: 9px 0 0;
    color: #6d5b50;
}

.mv-journal-header {
    min-height: 54px;
    justify-content: flex-start;
    padding: 4px 13px 3px;
    border-bottom: 1px solid rgba(105,75,48,.16);
}
.mv-journal-header .mv-icon { width: 40px; height: 40px; }
.mv-journal-v2 > .mv-journal-nav {
    gap: 4px;
    padding: 5px 28px 3px;
}
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button,
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button.mv-cozy-button-secondary,
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button.mv-cozy-button-primary {
    min-height: 62px;
    padding: 6px 2px;
    flex-direction: column;
    gap: 0;
    background-image: url("/resources/ui/slot-empty.png");
    background-size: 56px 56px;
    color: #5a4638;
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 1px rgba(255,255,255,.52);
    filter: saturate(.72) opacity(.86);
}
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button[aria-selected="true"] {
    color: #43335f;
    filter: saturate(1.06) drop-shadow(0 4px 7px rgba(88,66,112,.3));
    transform: translateY(-1px);
}
.mv-journal-view > .mv-journal-panel { padding: 4px 12px 22px; }
.mv-journal-log-summary {
    min-height: 54px;
    padding: 5px 3px 8px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(105,75,48,.2);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mv-journal-entry-count {
    padding: 4px 8px;
    background: rgba(255,248,228,.5);
    border: 1px solid rgba(105,75,48,.16);
}
.mv-filterchips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
}
.mv-filterchips .mv-chip-toggle,
.mv-filterchips .mv-chip-toggle.mv-cozy-button-primary,
.mv-filterchips .mv-chip-toggle.mv-cozy-button-secondary {
    min-height: 58px;
    padding: 5px 1px;
    flex-direction: column;
    gap: 0;
    background-image: url("/resources/ui/slot-empty.png");
    background-size: 52px 52px;
    color: #584539;
    font-size: 10px;
    line-height: 1;
    text-shadow: 0 1px rgba(255,255,255,.48);
    filter: saturate(.68) opacity(.76);
}
.mv-filterchips .mv-chip-toggle.mv-on {
    color: #44335f;
    filter: saturate(1.04) drop-shadow(0 3px 6px rgba(88,66,112,.26));
}
.mv-harvest-card {
    background: color-mix(in srgb, #fff9e9 78%, transparent);
    border-color: rgba(105,75,48,.16);
    box-shadow: 0 3px 10px rgba(76,55,40,.09), inset 0 1px rgba(255,255,255,.35);
}
.mv-harvest-node {
    background: color-mix(in srgb, #fff9e9 82%, transparent);
    box-shadow: 0 3px 9px rgba(76,55,40,.12), inset 0 1px rgba(255,255,255,.42);
}

@media (max-width: 370px), (max-height: 740px) {
    .mv-more-nav-button,
    .mv-more-nav-button.mv-cozy-button-secondary,
    .mv-more-nav-button.mv-cozy-button-primary { min-height: 60px; background-size: 54px 54px; }
    .mv-char-paperdoll { padding-inline: 8px; }
    .mv-pd-portrait-frame { width: 142px; height: 166px; }
    .mv-pd-portrait-img { width: 132px; height: 156px; }
    .mv-pd-stats-panel { padding-inline: 11px; }
    .mv-journal-v2 > .mv-journal-nav { padding-inline: 20px; }
    .mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button { min-height: 58px; background-size: 52px 52px; }
    .mv-filterchips .mv-chip-toggle { min-height: 54px; background-size: 48px 48px; }
}

/* Mobile Web Polish RC — one foreground grammar across Journal, More,
   character and the three high-friction utility sheets. Existing watercolor
   worlds stay in charge; these rules only align chrome, touch targets and
   information hierarchy. */
.mv-surface-header {
    display: flex;
    align-items: center;
    gap: 9px;
}
.mv-surface-header-art {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid !important;
    place-items: center;
    background: url("/resources/ui/slot-empty.png") center / 48px 48px no-repeat;
    filter: saturate(.9) drop-shadow(0 4px 7px rgba(66,43,55,.2));
}
.mv-surface-header-copy {
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    line-height: 1.15;
}
.mv-surface-header-copy strong { font-size: var(--text-md); letter-spacing: 1.5px; }
.mv-surface-header-copy small { font-size: 10px; letter-spacing: .8px; opacity: .78; }
.mv-more-header,
.mv-journal-header { justify-content: flex-start; }

.mv-first-trail[hidden] { display: none; }
.mv-first-trail {
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 2px;
    padding: 8px 9px 7px;
    background: color-mix(in srgb, #fff8e8 74%, transparent);
    border: 1px solid rgba(105,75,48,.17);
    border-radius: 18px;
    box-shadow: 0 5px 15px rgba(76,55,40,.1), inset 0 1px rgba(255,255,255,.4);
}
.mv-first-trail-title {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--ink-soft);
}
.mv-first-trail-step {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 10px;
    color: var(--ink);
}
.mv-first-trail-step b { white-space: nowrap; }
.mv-first-trail-arrow { color: rgba(85,64,49,.48); font-size: 22px; }

.mv-pd-glance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}
.mv-pd-glance > span {
    min-height: 66px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 4px;
    padding: 7px 8px;
    background: color-mix(in srgb, #fff9eb 72%, transparent);
    border: 1px solid rgba(112,82,58,.17);
    border-radius: 15px;
}
.mv-pd-glance > span > .mv-icon { grid-row: 1 / -1; }
.mv-pd-glance b { font-size: 12px; line-height: 1.1; white-space: nowrap; }
.mv-pd-glance small { color: var(--ink-soft); font-size: 9px; white-space: nowrap; }

.mv-polish-sheet {
    height: min(82vh, 720px);
    max-height: min(82vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: var(--mv-safe-bottom);
}
.mv-polish-sheet .mv-sheet-banner {
    flex: none;
    height: 88px;
    margin-bottom: 0;
    opacity: .94;
}
.mv-polish-sheet .mv-sheet-grip {
    position: relative;
    z-index: 2;
    flex: none;
    margin-top: -9px;
    margin-bottom: 4px;
    background: rgba(89,68,52,.28);
}
.mv-sheet-title-block {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mv-sheet-title-art {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: url("/resources/ui/slot-empty.png") center / 48px 48px no-repeat;
}
.mv-sheet-title-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.16; }
.mv-sheet-title-copy h3 { margin: 0; font-size: var(--text-md); }
.mv-sheet-title-copy small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; line-height: 1.3; }
.mv-polish-sheet .mv-sheet-heading { flex: none; margin: 2px 0 3px; }
.mv-polish-sheet .mv-sheet-visible-close { width: 88px; padding-inline: 11px; }
.mv-sheet-lead { flex: none; margin: 0 2px 5px; font-size: 11px; line-height: 1.35; }
.mv-sheet-mode-tabs {
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 5px;
}
.mv-sheet-mode-tabs .mv-catchip {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    background-image: var(--mv-tf-button-secondary);
    background-size: 100% 100%;
    color: #514035;
    font-weight: 700;
    filter: saturate(.78);
}
.mv-sheet-mode-tabs .mv-catchip.mv-active {
    background-image: var(--mv-tf-button-selected);
    color: #fff;
    filter: saturate(1.04) drop-shadow(0 3px 5px rgba(73,54,97,.22));
}
.mv-sheet-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.mv-sheet-scroll::-webkit-scrollbar { display: none; }
.mv-polish-sheet .mv-empty {
    width: calc(100% - 10px);
    min-height: 150px;
    margin: 10px auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--ink);
    background: color-mix(in srgb, #fff9e9 72%, transparent);
    border: 1px dashed rgba(109,78,51,.24);
    border-radius: 20px;
}
.mv-polish-sheet .mv-empty[hidden] { display: none; }
.mv-polish-sheet .mv-empty strong { font-size: var(--text-sm); }
.mv-polish-sheet .mv-empty span:not(.mv-icon) { max-width: 240px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.mv-polish-sheet .mv-storage-grid {
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 7px 2px 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mv-polish-sheet .mv-item-cell { min-height: 108px; padding-top: 7px; }
.mv-polish-sheet .mv-item-cell[data-rarity] { border-left: none; }
.mv-polish-sheet .mv-item-cell[data-rarity="uncommon"] { border-bottom: 3px solid #5BA974; }
.mv-polish-sheet .mv-item-cell[data-rarity="rare"] { border-bottom: 3px solid #6B7FD4; }
.mv-polish-sheet .mv-item-cell[data-rarity="epic"] { border-bottom: 3px solid #B08FD4; }
.mv-polish-sheet .mv-item-cell[data-rarity="legendary"] { border-bottom: 3px solid #D9A05B; }
.mv-polish-sheet .mv-item-cell[data-rarity="mythical"] { border-bottom: 3px solid #D98B5B; }
.mv-polish-sheet .mv-item-art {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 1px;
}
.mv-polish-sheet .mv-item-name { text-align: center; line-height: 1.15; }
.mv-polish-sheet .mv-item-meta { text-align: center; }
.mv-polish-sheet .mv-storage-all { min-width: 35px; justify-content: center; }
.mv-polish-sheet .mv-sheet-footer {
    position: static;
    flex: none;
    margin: 0 calc(-1 * var(--sp-4));
    padding: 7px var(--sp-4) max(7px, var(--mv-safe-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 -7px 18px rgba(65,49,38,.08);
}
.mv-polish-sheet .mv-item-action {
    min-height: 46px;
    background-image: var(--mv-tf-button-secondary);
    border-radius: 0;
    box-shadow: none;
}
.mv-polish-sheet .mv-item-action-primary { background-image: var(--mv-tf-button-selected); }
.mv-storage-footer .mv-storage-close,
.mv-craft-footer .mv-storage-close { width: 100%; margin: 0; }

.mv-trade-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 5px;
}
.mv-trade-summary > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    background: rgba(255,248,230,.52);
    border: 1px solid rgba(102,74,52,.14);
    border-radius: 11px;
}
.mv-trade-summary small { font-size: 9px; color: var(--ink-soft); }
.mv-trade-summary b { max-width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-trade-summary .mv-trade-short { color: var(--danger); background: rgba(190,76,72,.08); }
.mv-trade-sheet .mv-item-actions { margin: 0; }

.mv-craft-cats {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.mv-craft-cats::-webkit-scrollbar { display: none; }
.mv-craft-cats .mv-catchip { min-width: 82px; flex: 1 0 82px; }
.mv-sheet-mode-tabs-small { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mv-sheet-mode-tabs-small .mv-catchip { min-height: 44px; }
.mv-craft-body { max-height: none; margin: 0; padding: 4px 1px 14px; }
.mv-craft-recipe-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: color-mix(in srgb, #fff9e9 82%, transparent);
    border-color: rgba(105,75,48,.16);
    border-radius: 17px;
}
.mv-craft-result-art { width: 48px; height: 48px; display: grid; place-items: center; }
.mv-craft-recipe-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mv-craft-result-name { font-size: var(--text-sm); }
.mv-craft-body > .mv-item-actions {
    position: sticky;
    bottom: -14px;
    z-index: 3;
    margin: 5px -1px 0;
    padding: 7px 1px 14px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-top: 1px solid rgba(105,75,48,.15);
}

@media (max-width: 370px), (max-height: 740px) {
    .mv-polish-sheet { height: 84vh; max-height: 84vh; }
    .mv-polish-sheet .mv-sheet-banner { height: 76px; }
    .mv-sheet-title-copy small { max-width: 176px; }
    .mv-polish-sheet .mv-item-cell { min-height: 101px; }
    .mv-pd-glance > span { padding-inline: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ToffeeCraft CozyUi — global runtime chrome contract
   V4 proved the family on Backpack/navbar.  These primitives make it the
   only reusable panel/button/slot language for the complete product overhaul.
   IndigoLay/watercolor assets remain content illustration only.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --mv-tf-button-default: url("/resources/ui/toffeecraft/cozy/button-default.png");
    --mv-tf-button-selected: url("/resources/ui/toffeecraft/cozy/button-selected.png");
    --mv-tf-button-disabled: url("/resources/ui/toffeecraft/cozy/button-disabled.png");
    --mv-tf-button-secondary: url("/resources/ui/toffeecraft/cozy/button-secondary.png");
    --mv-tf-panel-square: url("/resources/ui/toffeecraft/cozy/panel-square.png");
    --mv-tf-panel-wide: url("/resources/ui/toffeecraft/cozy/panel-wide.png");
    --mv-tf-slot-empty: url("/resources/ui/toffeecraft/cozy/slot-empty.png");
    --mv-tf-slot-default: url("/resources/ui/toffeecraft/cozy/slot-default.png");
    --mv-tf-slot-selected: url("/resources/ui/toffeecraft/cozy/slot-selected.png");
    --mv-tf-ink: #442f27;
    --mv-tf-ink-soft: #5d463a;
    --mv-tf-light: #fff5e5;
}

.mv-cozy-panel {
    border-color: transparent;
    border-style: solid;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
}

.mv-cozy-button {
    min-height: var(--touch-min);
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    font-family: inherit;
    font-weight: 800;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}
.mv-cozy-button-primary,
.mv-cozy-button[aria-pressed="true"],
.mv-cozy-button.mv-active {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
    text-shadow: 0 1px 1px rgba(65,34,27,.62);
}
.mv-cozy-button-secondary {
    border-image-source: var(--mv-tf-button-secondary);
    color: var(--mv-tf-ink-soft);
    text-shadow: none;
}
.mv-cozy-button:disabled,
.mv-cozy-button[aria-disabled="true"] {
    border-image-source: var(--mv-tf-button-disabled);
    color: #927b6d;
    cursor: default;
}
.mv-cozy-button:not(:disabled):active {
    transform: translateY(2px) scale(.97);
    filter: brightness(.94);
}

.mv-cozy-slot {
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 6px stretch;
    border-radius: 0;
    background: none;
}

/* Scene shell slice 1 — status HUD.  The vitals remain semantic progress
   fills, but their old generic white pills are replaced by CozyUi controls. */
.mv-status.mv-cozy-panel {
    position: relative;
    z-index: 12;
    gap: 2px;
    min-height: 72px;
    padding: calc(5px + var(--mv-safe-top)) 11px 6px;
    border-width: 9px;
    border-image-width: 9px;
    border-bottom: 9px solid transparent;
    color: var(--mv-tf-ink-soft);
    box-shadow: 0 4px 12px rgba(65,40,26,.18);
}
.mv-status .mv-status-top {
    min-height: 19px;
    gap: 6px;
    padding: 0 4px;
    color: var(--mv-tf-ink);
    font-size: 12px;
    font-weight: 700;
}
.mv-status .mv-status-money {
    color: #b66f35;
    font-weight: 900;
}
.mv-status .mv-vitals { gap: 4px; }
.mv-status .mv-vital.mv-cozy-control {
    min-height: 27px;
    gap: 4px;
    padding: 1px 5px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-button-secondary) 7 10 fill / 5px 7px stretch;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.mv-status .mv-vital-icon .mv-icon {
    width: 14px !important;
    height: 14px !important;
}
.mv-status .mv-vital .mv-bar {
    height: 7px;
    background: #dbc9aa;
    box-shadow: inset 0 1px 2px rgba(76,48,31,.28);
}
.mv-status .mv-vital-num {
    color: var(--mv-tf-ink);
    font-size: 10px;
    font-weight: 800;
}
[data-theme="night"] .mv-status.mv-cozy-panel,
[data-theme="night"] .mv-status .mv-vital.mv-cozy-control {
    color: var(--mv-tf-ink-soft);
}

/* Scene shell slice 1 — active activity/sleep/reading card. */
.mv-ongoing.mv-cozy-panel,
.mv-scene-mapmode > .mv-ongoing.mv-cozy-panel:not([hidden]) {
    align-items: center;
    gap: 8px;
    min-height: 82px;
    padding: 8px 10px;
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 6px 17px rgba(65,40,26,.27);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.mv-scene-mapmode > .mv-ongoing.mv-cozy-panel:not([hidden]) {
    left: 7px;
    right: 7px;
    bottom: 6px;
}
.mv-ongoing-art {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
}
.mv-ongoing-art .mv-icon {
    width: 34px !important;
    height: 34px !important;
    filter: saturate(.9) drop-shadow(0 2px 2px rgba(72,44,29,.22));
}
.mv-ongoing-title {
    color: #5a3f34;
    font-size: 15px;
    line-height: 1.15;
}
.mv-ongoing-info {
    max-height: 31px;
    overflow: hidden;
    color: var(--mv-tf-ink-soft);
    font-size: 10px;
    line-height: 1.4;
}
.mv-ongoing-bar {
    height: 6px;
    margin-top: 3px;
    background: #d9c5a6;
    box-shadow: inset 0 1px 2px rgba(76,48,31,.24);
}
.mv-ongoing-bar-fill {
    background: linear-gradient(180deg, #e6b06d, #b86f3c);
}
.mv-ongoing-stop.mv-cozy-button {
    min-width: 68px;
    min-height: 48px;
    padding: 0 9px;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-light);
    font-size: 14px;
    box-shadow: none;
}
.mv-ongoing-stop.mv-cozy-button:active {
    transform: translateY(2px) scale(.97);
    box-shadow: none;
}
[data-theme="night"] .mv-ongoing.mv-cozy-panel {
    color: var(--mv-tf-ink);
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
[data-theme="night"] .mv-ongoing-info { color: var(--mv-tf-ink-soft); }

/* Scene shell slice 1 — defeat narrative.  The red flash/shake remains a
   semantic effect; only modal and action chrome move to CozyUi. */
.mv-defeat-overlay { background: rgba(35,25,22,.58); }
.mv-defeat-card.mv-cozy-panel {
    width: min(100%, 328px);
    max-width: 328px;
    padding: 17px 20px 18px;
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 10px 30px rgba(49,29,22,.34);
}
.mv-defeat-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}
.mv-defeat-heading .mv-defeat-art {
    flex: none;
    width: 44px !important;
    height: 44px !important;
    filter: saturate(.9) drop-shadow(0 2px 2px rgba(72,44,29,.24));
}
.mv-defeat-card .mv-defeat-title {
    margin: 0;
    color: #b85343;
    font-size: 20px;
}
.mv-defeat-card .mv-offline-away {
    margin-bottom: 9px;
    color: #684f42;
    font-size: 13px;
    line-height: 1.7;
}
.mv-defeat-card .mv-offline-quiet {
    margin-bottom: 12px;
    color: #7e6657;
    font-size: 12px;
    line-height: 1.65;
}
.mv-defeat-close.mv-cozy-button {
    min-height: 49px;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-light);
    box-shadow: none;
}
[data-theme="night"] .mv-defeat-card.mv-cozy-panel {
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 10px 32px rgba(0,0,0,.48);
}

@media (max-width: 370px), (max-height: 740px) {
    .mv-status.mv-cozy-panel {
        min-height: 70px;
        padding-inline: 8px;
    }
    .mv-status .mv-vital.mv-cozy-control { padding-inline: 3px; }
    .mv-ongoing.mv-cozy-panel,
    .mv-scene-mapmode > .mv-ongoing.mv-cozy-panel:not([hidden]) {
        gap: 6px;
        min-height: 78px;
        padding: 7px 8px;
    }
    .mv-ongoing-art { width: 44px; height: 44px; }
    .mv-ongoing-art .mv-icon { width: 31px !important; height: 31px !important; }
    .mv-ongoing-stop.mv-cozy-button { min-width: 64px; padding-inline: 7px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Complete overhaul Wave 2 — Scene interaction shell
   Map/combat artwork remains content.  Every surrounding label, action,
   sheet, dialogue choice, combat HUD and stance state uses CozyUi chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Map nodes: watercolor art stays inside a CozyUi slot; the readable label is
   the same default/selected/disabled button family used everywhere else. */
.mv-map-node {
    gap: 0;
    min-width: 58px;
    min-height: 58px;
}
.mv-map-node-pin.mv-cozy-slot {
    width: 54px;
    height: 54px;
    border: 6px solid transparent;
    border-image: url("/resources/ui/toffeecraft/cozy/panel-square-light.png") 10 fill / 7px stretch;
    border-radius: 0;
    background: none;
    box-shadow: 0 4px 10px rgba(65,40,26,.28);
    animation: mv-node-pulse 2.4s ease-in-out infinite;
}
.mv-map-node-pin .mv-map-node-pin-img {
    width: 39px !important;
    height: 39px !important;
    border-radius: 8px;
    filter: saturate(.92) drop-shadow(0 1px 1px rgba(65,40,26,.2));
}
.mv-map-node-label.mv-cozy-button {
    min-height: 30px;
    margin-top: -7px;
    padding: 0 8px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 5px 7px stretch;
    background: none;
    color: var(--mv-tf-ink);
    font-size: 11px;
    line-height: 1;
    box-shadow: 0 3px 7px rgba(65,40,26,.22);
    pointer-events: none;
}
.mv-map-node[aria-expanded="true"] .mv-map-node-pin {
    border-image-source: var(--mv-tf-slot-selected);
    animation: none;
    transform: translateY(2px) scale(.96);
}
.mv-map-node[aria-expanded="true"] .mv-map-node-label {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
    text-shadow: 0 1px 1px rgba(65,34,27,.62);
}
.mv-map-node:active .mv-map-node-pin {
    transform: translateY(2px) scale(.92);
    filter: brightness(.94);
}
.mv-map-node:active .mv-map-node-label { filter: brightness(.94); }
.mv-map-node[aria-disabled="true"] .mv-map-node-pin {
    border-image-source: var(--mv-tf-slot-empty);
    filter: grayscale(.72) saturate(.45);
    opacity: .72;
    animation: none;
}
.mv-map-node[aria-disabled="true"] .mv-map-node-label {
    border-image-source: var(--mv-tf-button-disabled);
    color: #927b6d;
    opacity: .92;
}
.mv-map-node-more {
    background: #cf8248;
    box-shadow: 6px 0 0 -1px #cf8248;
}

/* Non-map location header, quick travel and action groups. */
.mv-loc-header.mv-cozy-panel {
    padding: 10px 13px;
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 4px 12px rgba(65,40,26,.18);
}
.mv-loc-header .mv-loc-desc { color: var(--mv-tf-ink-soft); }
.mv-loc-types .mv-chip.mv-cozy-slot {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 8px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    background: none;
    color: var(--mv-tf-ink-soft);
    font-weight: 800;
}
.mv-quick {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.mv-quick::-webkit-scrollbar { display: none; }
.mv-quick .mv-cozy-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 46px;
    padding: 0 11px;
    background: none;
    color: var(--mv-tf-ink);
    white-space: nowrap;
}
.mv-action-group.mv-cozy-panel {
    gap: 6px;
    padding: 10px 11px 11px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
    box-shadow: 0 3px 10px rgba(65,40,26,.15);
}
.mv-action-group.mv-cozy-panel h3 {
    padding: 0 4px;
    color: var(--mv-tf-ink-soft);
    font-weight: 800;
    letter-spacing: 1.5px;
}
.mv-route-ledger.mv-cozy-panel {
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
}
.mv-action.mv-cozy-button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 3px 12px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
    text-align: left;
    box-shadow: none;
}
.mv-action.mv-cozy-button .mv-action-sub { color: var(--mv-tf-ink-soft); }
.mv-action.mv-cozy-button[aria-disabled="true"] {
    border-image-source: var(--mv-tf-button-disabled);
    color: #927b6d;
    opacity: .82;
}
.mv-action.mv-cozy-button.mv-action-dev::after,
.mv-dlg-option.mv-cozy-button.mv-dlg-option-dev::after {
    content: none;
}
.mv-action.mv-cozy-button.mv-action-route {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-action.mv-cozy-button.mv-action-route .mv-action-sub { color: #f3dfc7; }

/* Node/stance bottom sheets use the wide CozyUi panel instead of generic
   parchment. The grip remains a semantic drag affordance. */
.mv-sheet.mv-cozy-panel {
    padding: 12px 14px calc(14px + var(--mv-safe-bottom));
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 -8px 28px rgba(49,29,22,.34);
}
[data-theme="night"] .mv-sheet.mv-cozy-panel {
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 -8px 30px rgba(0,0,0,.48);
}
.mv-sheet.mv-cozy-panel .mv-sheet-grip {
    width: 44px;
    height: 6px;
    margin-bottom: 8px;
    background: #b99572;
    box-shadow: inset 0 1px 1px rgba(86,52,34,.28);
}
.mv-sheet.mv-cozy-panel .mv-sheet-heading { margin-bottom: 7px; }
.mv-sheet.mv-cozy-panel .mv-sheet-title-copy h3 {
    color: #5a3f34;
    font-size: 17px;
}
.mv-sheet.mv-cozy-panel .mv-sheet-visible-close {
    width: 92px;
    min-height: 46px;
    padding: 0 10px;
}
.mv-node-sheet .mv-action.mv-cozy-button { min-height: 58px; }

/* Dialogue: preserve conversation geometry, but all foreground chrome is the
   same panel/button/slot family. */
.mv-scene[data-mode="dialogue"] > .mv-dialogue.mv-cozy-panel {
    gap: 9px;
    padding: 11px 12px calc(10px + var(--mv-safe-bottom));
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 5px 16px rgba(65,40,26,.2);
}
.mv-dlg-avatar.mv-cozy-slot {
    width: 64px;
    height: 64px;
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-selected) 4 fill / 6px stretch;
    border-radius: 0;
    background: none;
    color: #8b583e;
}
.mv-dlg-avatar.mv-cozy-slot .mv-dlg-avatar-art {
    border-radius: 3px;
}
.mv-dlg-visible-exit.mv-cozy-button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-image: none;
    background: none;
    box-shadow: none;
}
.mv-dlg-answer.mv-cozy-panel,
.mv-dlg-action.mv-cozy-panel {
    padding: 12px 14px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-dlg-answer.mv-cozy-panel {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.mv-dlg-answer.mv-cozy-panel::before,
.mv-dlg-answer.mv-cozy-panel::after { display: none; }
.mv-dlg-answer.mv-dlg-desc { color: var(--mv-tf-ink-soft); }
.mv-dlg-options { gap: 6px; overflow-y: auto; scrollbar-width: none; }
.mv-dlg-options::-webkit-scrollbar { display: none; }
.mv-dlg-option.mv-cozy-button {
    min-height: 50px;
    padding: 3px 13px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-dlg-option.mv-cozy-button.mv-cozy-button-primary {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-dlg-option.mv-cozy-button.mv-cozy-button-secondary {
    border-image-source: var(--mv-tf-button-secondary);
    color: var(--mv-tf-ink-soft);
}
.mv-dlg-option-say {
    max-width: 90%;
    border-bottom-right-radius: 0;
    background: none;
}
.mv-dlg-option-say::after { color: #b66f35; }
.mv-dlg-action-end.mv-cozy-button {
    min-height: 49px;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Combat HUD: only the arena/sprites/effects remain art. */
.mv-combat-head.mv-cozy-panel {
    padding: 9px 12px 10px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 4px 12px rgba(65,40,26,.17);
}
.mv-combat-head .mv-loc-desc { color: var(--mv-tf-ink-soft); }
.mv-combat-leave.mv-cozy-button {
    min-height: 44px;
    padding: 0 9px;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink-soft);
    box-shadow: none;
}
.mv-combat-counts {
    gap: 5px;
    margin-top: 5px;
    color: var(--mv-tf-ink-soft);
}
.mv-combat-counts .mv-cozy-slot {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 8px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    font-size: 11px;
    font-weight: 800;
}
.mv-stage-plate.mv-cozy-panel {
    padding: 8px 11px 9px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 4px 12px rgba(65,40,26,.2);
}
.mv-stage-plate .mv-stage-stats { color: var(--mv-tf-ink-soft); }
.mv-combat[data-combat-art-owner="Cave depths"] .mv-mob-name,
.mv-combat[data-combat-art-owner="Suspicious wall"] .mv-mob-name,
.mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-mob-name,
.mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-mob-name,
.mv-combat[data-combat-art-owner="Mysterious gate"] .mv-mob-name,
.mv-combat[data-combat-art-owner="Cave depths"] .mv-stage-plate.mv-cozy-panel,
.mv-combat[data-combat-art-owner="Suspicious wall"] .mv-stage-plate.mv-cozy-panel,
.mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-stage-plate.mv-cozy-panel,
.mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-stage-plate.mv-cozy-panel,
.mv-combat[data-combat-art-owner="Mysterious gate"] .mv-stage-plate.mv-cozy-panel,
.mv-combat[data-combat-art-owner="Cave depths"] .mv-stage-plate .mv-stage-hp-num,
.mv-combat[data-combat-art-owner="Suspicious wall"] .mv-stage-plate .mv-stage-hp-num,
.mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-stage-plate .mv-stage-hp-num,
.mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-stage-plate .mv-stage-hp-num,
.mv-combat[data-combat-art-owner="Mysterious gate"] .mv-stage-plate .mv-stage-hp-num,
.mv-combat[data-combat-art-owner="Cave depths"] .mv-stage-plate .mv-stage-stats,
.mv-combat[data-combat-art-owner="Suspicious wall"] .mv-stage-plate .mv-stage-stats,
.mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-stage-plate .mv-stage-stats,
.mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-stage-plate .mv-stage-stats,
.mv-combat[data-combat-art-owner="Mysterious gate"] .mv-stage-plate .mv-stage-stats {
    color: var(--mv-tf-light);
    text-shadow: 0 1px 2px rgba(16, 22, 31, .92), 0 0 5px rgba(16, 22, 31, .68);
}
.mv-enemy.mv-cozy-panel {
    padding: 7px 11px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-enemy.mv-cozy-panel .mv-enemy-hp-num,
.mv-enemy.mv-cozy-panel .mv-enemy-stats { color: var(--mv-tf-ink-soft); }
.mv-player.mv-cozy-panel {
    gap: 5px;
    padding: 9px 11px calc(9px + var(--mv-safe-bottom));
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 -4px 14px rgba(65,40,26,.22);
}
.mv-player.mv-cozy-panel .mv-player-num,
.mv-player.mv-cozy-panel .mv-player-stats { color: var(--mv-tf-ink-soft); }
.mv-player.mv-cozy-panel.mv-low-hp {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--danger) 68%, transparent));
}
[data-theme="night"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-stage-plate.mv-cozy-panel,
[data-theme="night"] .mv-player.mv-cozy-panel,
[data-theme="night"] .mv-enemy.mv-cozy-panel {
    background: none;
    color: var(--mv-tf-ink);
}

/* Combat cards sit directly on the navy night surface, including generic arenas. */
[data-theme="night"] .mv-combat {
    --mv-tf-ink: var(--mv-tf-light);
    --mv-tf-ink-soft: #f3dfc7;
}

/* Illustrated combat skies expose the transparent header against navy at night. */
[data-theme="night"] .mv-combat[data-combat-art-owner="Gentle mountain slope"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Gentle mountain slope"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Gentle mountain slope"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Gentle mountain slope"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Precarious tree bridge"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Precarious tree bridge"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Precarious tree bridge"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Precarious tree bridge"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Fight the giant crab again"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Fight the giant crab again"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Fight the giant crab again"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Fight the giant crab again"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Crab spawning grounds"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Crab spawning grounds"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Crab spawning grounds"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Crab spawning grounds"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="The swamplands"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="The swamplands"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="The swamplands"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="The swamplands"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Infested field"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Infested field"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Infested field"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Infested field"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave room"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave room"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave room"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave room"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave depths"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave depths"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave depths"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Cave depths"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Suspicious wall"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Suspicious wall"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Suspicious wall"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Suspicious wall"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Hidden tunnel"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Pitch black tunnel"] .mv-combat-counts,
[data-theme="night"] .mv-combat[data-combat-art-owner="Mysterious gate"] .mv-combat-head.mv-cozy-panel,
[data-theme="night"] .mv-combat[data-combat-art-owner="Mysterious gate"] .mv-combat-head .mv-loc-desc,
[data-theme="night"] .mv-combat[data-combat-art-owner="Mysterious gate"] .mv-combat-leave.mv-cozy-button,
[data-theme="night"] .mv-combat[data-combat-art-owner="Mysterious gate"] .mv-combat-counts {
    color: var(--mv-tf-light);
    text-shadow: 0 1px 2px rgba(18, 31, 39, .72);
}

/* Stance default/selected/pressed states, plus selected favorites in sheet. */
.mv-stancebar.mv-cozy-panel {
    gap: 6px;
    padding: 7px 9px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
    box-shadow: 0 3px 10px rgba(65,40,26,.18);
}
.mv-stancebar-chips { gap: 5px; }
.mv-stance-chip.mv-cozy-button,
.mv-stancebar-open.mv-cozy-button {
    min-height: 46px;
    padding: 0 10px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 12px;
}
.mv-stance-chip.mv-cozy-button.mv-active,
.mv-stance-chip.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    background: none;
    color: var(--mv-tf-light);
    box-shadow: none;
}
.mv-stance-row.mv-cozy-panel {
    gap: 5px;
    padding: 7px 8px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.mv-stance-row.mv-active {
    border-image-source: var(--mv-tf-panel-square);
}
.mv-stance-fav.mv-cozy-button {
    flex: none;
    width: 50px;
    min-height: 50px;
    padding: 0;
    background: none;
    box-shadow: none;
}
.mv-stance-fav.mv-cozy-button .mv-icon { opacity: .42; }
.mv-stance-fav.mv-cozy-button[aria-pressed="true"] .mv-icon {
    opacity: 1;
    filter: saturate(1.08) drop-shadow(0 1px 2px rgba(83,48,29,.25));
}
.mv-stance-body.mv-cozy-button {
    min-height: 58px;
    padding: 6px 10px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-stance-body.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-stance-body[aria-pressed="true"] .mv-stance-desc,
.mv-stance-body[aria-pressed="true"] .mv-stance-stats { color: #f3dfc7; }
.mv-stance-desc,
.mv-stance-stats { color: var(--mv-tf-ink-soft); }

@media (max-width: 370px), (max-height: 740px) {
    .mv-map-node-pin.mv-cozy-slot { width: 50px; height: 50px; }
    .mv-map-node-pin .mv-map-node-pin-img {
        width: 35px !important;
        height: 35px !important;
    }
    .mv-map-node-label.mv-cozy-button {
        min-height: 28px;
        padding-inline: 6px;
        font-size: 10px;
    }
    .mv-scene[data-mode="combat"] > .mv-combat { gap: 5px; }
    .mv-combat-head.mv-cozy-panel {
        padding: 4px 8px 5px;
        border-width: 6px;
        border-image-width: 6px;
    }
    .mv-combat-head .mv-loc-desc {
        max-height: 22px;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.15;
    }
    .mv-combat-counts .mv-cozy-slot { min-height: 24px; }
    .mv-arena {
        flex: 1 1 auto;
        min-height: 176px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .mv-stage {
        height: 100%;
        gap: 4px;
        justify-content: space-between;
    }
    .mv-stage-mob { min-height: 82px; }
    /* Keep indexed hit feedback inside the short combat arena. The default
       -14px / -44px rise can escape into the location copy at 360x720. */
    .mv-stage-mob .mv-float {
        top: 16px !important;
        animation-name: mv-stage-float-up-compact;
    }
    .mv-mob-primary { width: 86px; }
    .mv-mob-primary .mv-mob-body { width: 78px; height: 78px; }
    .mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) {
        flex: 0 0 auto;
        max-width: 260px;
    }
    .mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob { width: 60px; }
    .mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-body { width: 54px; height: 54px; }
    .mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-primary { width: 68px; }
    .mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-primary .mv-mob-body { width: 62px; height: 62px; }
    .mv-stage-mob:is([data-count="6"], [data-count="7"], [data-count="8"]) .mv-mob-name {
        font-size: 9px;
        line-height: 1;
    }
    .mv-stage-plate.mv-cozy-panel {
        padding: 3px 7px 4px;
        border-width: 6px;
        border-image-width: 6px;
    }
    .mv-stage-stats { min-height: 1.2em; margin-top: 2px; }
    .mv-player.mv-cozy-panel {
        gap: 3px;
        padding: 4px 8px calc(4px + var(--mv-safe-bottom));
        border-width: 6px;
        border-image-width: 6px;
    }
    .mv-player-stats {
        margin-top: 0;
        padding-top: 3px;
        font-size: 10px;
    }
    .mv-stancebar.mv-cozy-panel {
        padding: 2px 6px;
        border-width: 6px;
        border-image-width: 6px;
    }
    .mv-stance-chip.mv-cozy-button,
    .mv-stancebar-open.mv-cozy-button { min-height: 44px; padding-inline: 8px; }
}

@keyframes mv-stage-float-up-compact {
    from { transform: translate(-50%, 0); opacity: 1; }
    to { transform: translate(-50%, -16px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mv-stage-mob .mv-float { animation-name: mv-float-fade; }
}

/* Wave44: this owner is one LARGE inanimate target, not a dense enemy group.
   Keep it materially larger than the generic primary at both mobile widths so
   the runtime wall reads as the attackable loose support section rather than a
   miniature wall pasted onto the sealed environmental alcove. */
.mv-combat[data-combat-art-owner="Suspicious wall"] .mv-mob-primary { width: 136px; }
.mv-combat[data-combat-art-owner="Suspicious wall"] .mv-mob-primary .mv-mob-body { width: 128px; height: 128px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Complete overhaul Wave 3 — Transaction sheets
   Trade, storage, crafting and item detail share the same CozyUi sheet,
   tab, slot and button grammar. Watercolor banners and item art remain
   semantic content illustration.
   ═══════════════════════════════════════════════════════════════════════════ */
.mv-transaction-sheet.mv-cozy-panel,
.mv-item-detail-sheet.mv-cozy-panel {
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 -9px 30px rgba(49,29,22,.38);
}
[data-theme="night"] .mv-transaction-sheet.mv-cozy-panel,
[data-theme="night"] .mv-item-detail-sheet.mv-cozy-panel {
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 -9px 32px rgba(0,0,0,.52);
}
.mv-transaction-sheet .mv-sheet-title-art,
.mv-item-detail-sheet .mv-sheet-title-art {
    width: 50px;
    height: 50px;
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-selected) 4 fill / 6px stretch;
    background: none;
}
.mv-transaction-sheet .mv-sheet-title-copy h3,
.mv-item-detail-sheet .mv-sheet-title-copy h3 { color: #5a3f34; }
.mv-transaction-sheet .mv-sheet-title-copy small,
.mv-item-detail-sheet .mv-sheet-title-copy small,
.mv-transaction-sheet .mv-sheet-lead { color: var(--mv-tf-ink-soft); }
.mv-transaction-sheet .mv-sheet-visible-close,
.mv-item-detail-sheet .mv-sheet-visible-close {
    width: 92px;
    min-height: 46px;
    padding-inline: 10px;
}

.mv-transaction-sheet .mv-sheet-mode-tabs .mv-catchip.mv-cozy-button {
    min-height: 50px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
    filter: none;
    text-shadow: 0 1px rgba(255,255,255,.68);
    box-shadow: none;
}
.mv-transaction-sheet .mv-sheet-mode-tabs .mv-catchip.mv-cozy-button.mv-active,
.mv-transaction-sheet .mv-sheet-mode-tabs .mv-catchip.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    background: none;
    color: var(--mv-tf-light);
    filter: none;
    text-shadow: 0 1px 1px rgba(65,34,27,.62);
}
.mv-transaction-sheet .mv-sheet-mode-tabs .mv-catchip.mv-cozy-button:active {
    transform: translateY(2px) scale(.97);
    filter: brightness(.94);
}

.mv-transaction-sheet .mv-storage-grid {
    gap: 7px;
    padding: 7px 2px 16px;
}
.mv-transaction-sheet .mv-item-cell.mv-cozy-slot {
    min-height: 116px;
    padding: 8px 7px 45px;
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 6px stretch;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 3px 8px rgba(65,41,28,.19);
}
.mv-transaction-sheet .mv-item-cell.mv-cozy-slot.mv-trade-selected,
.mv-transaction-sheet .mv-item-cell.mv-cozy-slot[aria-pressed="true"] {
    border-image-source: var(--mv-tf-slot-selected);
    color: #5a3f34;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(65,41,28,.25);
}
.mv-transaction-sheet .mv-item-cell.mv-cozy-slot:active {
    transform: translateY(2px) scale(.97);
    filter: brightness(.95);
}
.mv-transaction-sheet .mv-item-art {
    width: 44px;
    height: 44px;
}
.mv-transaction-sheet .mv-item-name { color: #5a4034; }
.mv-transaction-sheet .mv-item-meta,
.mv-transaction-sheet .mv-item-count { color: var(--mv-tf-ink-soft); }
.mv-transaction-sheet .mv-trade-badges {
    left: 5px;
    right: 5px;
    bottom: 4px;
    justify-content: flex-end;
}
.mv-transaction-sheet .mv-storage-all.mv-cozy-button {
    min-width: 44px;
    min-height: 44px;
    padding: 0 7px;
    border: 6px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 6px 8px stretch;
    background: none;
    color: var(--mv-tf-ink);
    font-size: 11px;
    font-weight: 900;
    text-shadow: 0 1px rgba(255,255,255,.68);
    box-shadow: none;
}
.mv-transaction-sheet .mv-storage-all.mv-cozy-button.mv-trade-minus {
    border-image-source: var(--mv-tf-button-secondary);
    color: #a45145;
}
.mv-transaction-sheet .mv-item-cell > .mv-storage-all.mv-cozy-button {
    right: 5px;
    bottom: 4px;
}

.mv-transaction-sheet .mv-empty {
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-transaction-sheet .mv-sheet-footer {
    margin: 0 -14px calc(-1 * var(--mv-safe-bottom));
    padding: 9px 14px max(9px, var(--mv-safe-bottom));
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
    box-shadow: 0 -5px 14px rgba(65,40,26,.16);
}
.mv-transaction-sheet .mv-item-action.mv-cozy-button,
.mv-item-detail-sheet .mv-item-action.mv-cozy-button {
    min-height: 48px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-secondary) 7 10 fill / 7px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink-soft);
    text-shadow: 0 1px rgba(255,255,255,.68);
    box-shadow: none;
}
.mv-transaction-sheet .mv-item-action.mv-cozy-button-primary,
.mv-item-detail-sheet .mv-item-action.mv-cozy-button-primary,
.mv-item-detail-sheet .mv-item-action.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    background: none;
    color: var(--mv-tf-light);
    text-shadow: 0 1px 1px rgba(65,34,27,.62);
    outline: 0;
}
.mv-transaction-sheet .mv-item-action.mv-cozy-button:disabled {
    border-image-source: var(--mv-tf-button-disabled);
    background: none;
    color: #927b6d;
    opacity: .86;
}
.mv-transaction-sheet .mv-item-action.mv-cozy-button:not(:disabled):active,
.mv-item-detail-sheet .mv-item-action.mv-cozy-button:not(:disabled):active {
    transform: translateY(2px) scale(.97);
    filter: brightness(.94);
}

.mv-transaction-sheet .mv-trade-summary > span {
    min-height: 43px;
    padding: 4px 5px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-transaction-sheet .mv-trade-summary > .mv-trade-short {
    border-image-source: var(--mv-tf-slot-empty);
    background: none;
    color: #a45145;
}
.mv-transaction-sheet .mv-trade-summary small { color: var(--mv-tf-ink-soft); }

.mv-crafting-transaction-sheet .mv-craft-recipe-card.mv-cozy-button {
    min-height: 68px;
    padding: 8px 10px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 8px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-crafting-transaction-sheet .mv-craft-recipe-card.mv-action-off {
    border-image-source: var(--mv-tf-button-secondary);
    color: var(--mv-tf-ink-soft);
    opacity: .88;
}
.mv-crafting-transaction-sheet .mv-craft-recipe-card.mv-cozy-button:active {
    transform: translateY(2px) scale(.98);
    filter: brightness(.94);
}
.mv-crafting-transaction-sheet .mv-craft-badge,
.mv-crafting-transaction-sheet .mv-craft-mat {
    min-height: 25px;
    padding: 1px 7px;
    border: 4px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 4px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink-soft);
}
.mv-crafting-transaction-sheet .mv-craft-recipe-back.mv-cozy-button {
    min-width: 160px;
    min-height: 46px;
    padding: 0 12px;
}
.mv-crafting-transaction-sheet .mv-craft-title {
    margin: 3px 2px;
    color: #5a3f34;
    font-size: 17px;
}
.mv-crafting-transaction-sheet .mv-char-effect.mv-cozy-slot {
    align-items: center;
    min-height: 44px;
    padding: 5px 9px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-crafting-transaction-sheet .mv-char-effect-time { color: var(--mv-tf-ink-soft); }
.mv-crafting-transaction-sheet .mv-skill-row.mv-cozy-button {
    min-height: 58px;
    padding: 7px 10px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-crafting-transaction-sheet .mv-skill-row.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-crafting-transaction-sheet .mv-skill-row.mv-cozy-button:disabled {
    border-image-source: var(--mv-tf-button-disabled);
    color: #927b6d;
    opacity: .86;
}
.mv-crafting-transaction-sheet .mv-skill-row.mv-cozy-button .mv-skill-lv {
    color: inherit;
    opacity: .78;
}
.mv-crafting-transaction-sheet .mv-craft-body > .mv-item-actions {
    border-top: 0;
    background: none;
}
.mv-crafting-transaction-sheet .mv-craft-actions-slot {
    flex: none;
    padding: 7px 1px 4px;
    border-top: 1px solid color-mix(in srgb, var(--mv-tf-ink-soft) 24%, transparent);
}
.mv-crafting-transaction-sheet .mv-craft-actions-slot[hidden] { display: none; }
.mv-crafting-transaction-sheet .mv-craft-actions-slot > .mv-item-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
}
.mv-crafting-transaction-sheet .mv-craft-actions-slot > .mv-item-actions:has(.mv-item-action:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mv-crafting-transaction-sheet .mv-craft-actions-slot .mv-item-action:only-child {
    grid-column: 1 / -1;
}

.mv-item-detail-sheet.mv-cozy-panel {
    max-height: 82vh;
    overflow: hidden;
    padding: 12px 14px calc(14px + var(--mv-safe-bottom));
}
.mv-item-detail-sheet .mv-sheet-heading { margin-bottom: 8px; }
.mv-item-detail-sheet .mv-item-tooltip.mv-cozy-panel {
    min-height: 120px;
    max-height: 42vh;
    padding: 10px 12px;
    overflow-y: auto;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-item-detail-sheet .mv-item-actions {
    flex: none;
    margin-top: 7px;
}
.mv-item-detail-sheet .mv-item-action.mv-on { outline: 0; }
.mv-item-detail-sheet .mv-item-hint { color: var(--mv-tf-ink-soft); }

@media (max-width: 370px), (max-height: 740px) {
    .mv-transaction-sheet.mv-cozy-panel { height: 86vh; max-height: 86vh; }
    .mv-transaction-sheet .mv-sheet-banner { height: 70px; }
    .mv-transaction-sheet .mv-storage-grid { gap: 5px; }
    .mv-transaction-sheet .mv-item-cell.mv-cozy-slot {
        min-height: 108px;
        padding-inline: 5px;
    }
    .mv-transaction-sheet .mv-storage-all.mv-cozy-button {
        min-width: 42px;
        min-height: 44px;
        padding-inline: 5px;
    }
    .mv-item-detail-sheet.mv-cozy-panel { max-height: 86vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Complete overhaul Wave 4 — top-level screens
   Skills, Backpack books, Journal and More retain their watercolor worlds and
   content art. Every foreground panel, tab, row, toggle and state now uses the
   shared ToffeeCraft CozyUi contract.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Skills — growth-world art remains the scene; CozyUi owns the growth deck,
   category controls, skill rows and detail sheet. */
.mv-skills-deck.mv-cozy-panel {
    gap: 9px;
    margin-top: -14px;
    padding: 17px 12px calc(18px + var(--mv-safe-bottom));
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 -7px 22px rgba(55,40,30,.2);
}
[data-theme="night"] .mv-skills-deck.mv-cozy-panel {
    background: none;
    color: var(--mv-tf-ink);
}
.mv-skills-awakened.mv-cozy-slot {
    min-height: 46px;
    padding: 5px 11px;
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-selected) 4 fill / 6px stretch;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 3px 10px rgba(62,43,31,.2);
}
.mv-skill-preview-node.mv-cozy-slot {
    width: 66px;
    height: 66px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 7px stretch;
    border-radius: 0;
    background: none;
    box-shadow: 0 5px 15px rgba(62,42,28,.3);
}
.mv-skill-preview-node.mv-recommended {
    border-image-source: var(--mv-tf-slot-selected);
}
.mv-skill-preview-node::before { display: none; }
.mv-skills-deck .mv-catchips { gap: 5px; padding-bottom: 2px; }
.mv-skills-deck .mv-catchip.mv-cozy-button {
    min-width: 72px;
    min-height: 46px;
    padding: 0 12px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-skills-deck .mv-catchip.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-skill-header {
    margin: 3px 4px 5px;
    color: var(--mv-tf-ink-soft);
    font-weight: 900;
    letter-spacing: 1.4px;
}
.mv-skill-box { gap: 7px; }
.mv-skill-row.mv-cozy-button {
    min-height: 142px;
    padding: 9px 7px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 8px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-skill-row.mv-cozy-button:active {
    transform: translateY(2px) scale(.97);
    filter: brightness(.94);
}
.mv-skill-row .mv-skill-emblem {
    width: 58px;
    height: 58px;
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 6px stretch;
    border-radius: 0;
    background: none;
}
.mv-skill-row .mv-skill-lv,
.mv-skill-row .mv-skill-sub { color: var(--mv-tf-ink-soft); }
.mv-skill-sheet .mv-sheet-list { gap: 7px; }
.mv-skill-sheet .mv-skill-desc.mv-cozy-panel,
.mv-skill-sheet .mv-skill-effect.mv-cozy-panel,
.mv-skill-sheet .mv-skill-rewards.mv-cozy-panel,
.mv-bestiary-sheet .mv-bestiary-desc.mv-cozy-panel,
.mv-bestiary-sheet .mv-bestiary-drops.mv-cozy-panel {
    margin: 0;
    padding: 9px 11px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-skill-sheet .mv-bestiary-stats.mv-cozy-panel,
.mv-bestiary-sheet .mv-bestiary-stats.mv-cozy-panel {
    gap: 5px;
    padding: 7px 8px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    background: none;
}
.mv-skill-sheet .mv-statchip.mv-cozy-slot,
.mv-bestiary-sheet .mv-statchip.mv-cozy-slot,
.mv-skill-sheet .mv-skill-next.mv-cozy-slot {
    min-height: 30px;
    padding: 3px 8px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink-soft);
    box-shadow: none;
}

/* Backpack books — item/book art remains content illustration. */
.mv-bag > .mv-subtabs .mv-subtab.mv-cozy-button {
    border-image-source: var(--mv-tf-button-default);
}
.mv-bag > .mv-subtabs .mv-subtab.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
}
.mv-bag-books { padding: 8px 2px calc(18px + var(--mv-safe-bottom)); }
.mv-book-list { gap: 8px; }
.mv-book-row.mv-cozy-panel {
    padding: 9px 10px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 3px 9px rgba(65,40,26,.17);
}
.mv-book-head { align-items: center; justify-content: flex-start; gap: 9px; }
.mv-book-art.mv-cozy-slot {
    flex: none;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-selected) 4 fill / 6px stretch;
    background: none;
}
.mv-book-copy {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}
.mv-book-title { color: #5a3f34; font-size: 14px; line-height: 1.3; }
.mv-book-badge.mv-cozy-slot {
    flex: none;
    min-height: 30px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    background: none;
    color: #6a7750;
    font-size: 10px;
    font-weight: 900;
}
.mv-book-badge:empty { display: none; }
.mv-book-body {
    margin: 7px 3px 0 61px;
    color: var(--mv-tf-ink-soft);
    font-size: 12px;
    line-height: 1.45;
}

/* Journal — watercolor travel-book world stays untouched. */
.mv-journal-v2 > .mv-journal-nav {
    gap: 5px;
    padding: 5px 20px 4px;
}
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button.mv-cozy-button {
    min-height: 58px;
    padding: 5px 5px;
    flex-direction: column;
    gap: 0;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
    font-size: 11px;
    filter: none;
    box-shadow: none;
}
.mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
    transform: none;
}
.mv-journal-log-summary.mv-cozy-panel,
.mv-journal-empty.mv-cozy-panel,
.mv-first-trail.mv-cozy-panel {
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 3px 10px rgba(65,40,26,.16);
}
.mv-journal-log-summary.mv-cozy-panel {
    min-height: 66px;
    padding: 7px 10px;
}
.mv-journal-log-summary strong,
.mv-journal-empty.mv-cozy-panel strong { color: #5a3f34; }
.mv-journal-log-summary small,
.mv-journal-empty.mv-cozy-panel > span:last-child { color: var(--mv-tf-ink-soft); }
.mv-journal-entry-count {
    min-height: 30px;
    padding: 3px 7px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink-soft);
}
.mv-first-trail.mv-cozy-panel {
    min-height: 100px;
    padding: 8px 9px;
}
.mv-first-trail-step.mv-cozy-slot {
    min-height: 58px;
    padding: 4px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    background: none;
}
.mv-filterchips { gap: 5px; }
.mv-filterchips .mv-chip-toggle.mv-cozy-button {
    min-width: 80px;
    min-height: 50px;
    padding: 4px 7px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-secondary) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink-soft);
    outline: 0;
    box-shadow: none;
}
.mv-filterchips .mv-chip-toggle.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-harvest-node.mv-cozy-slot {
    width: 48px;
    height: 48px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-selected) 4 fill / 5px stretch;
    border-radius: 0;
    background: none;
    box-shadow: 0 2px 7px rgba(65,40,26,.16);
}
.mv-harvest-card.mv-cozy-panel {
    padding: 8px 10px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-harvest-chip.mv-cozy-slot {
    min-height: 32px;
    padding: 3px 7px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
}
[data-theme="night"] .mv-journal-log-summary.mv-cozy-panel,
[data-theme="night"] .mv-journal-empty.mv-cozy-panel,
[data-theme="night"] .mv-first-trail.mv-cozy-panel,
[data-theme="night"] .mv-harvest-card.mv-cozy-panel {
    background: none;
    color: var(--mv-tf-ink);
}
.mv-quests > .mv-chip-toggle.mv-cozy-button {
    min-height: 46px;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-secondary) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink-soft);
    outline: 0;
}
.mv-quests > .mv-chip-toggle.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-quest.mv-cozy-panel {
    padding: 3px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 3px 9px rgba(65,40,26,.16);
}
.mv-quest-head.mv-cozy-button {
    align-items: center;
    gap: 7px;
    min-height: 58px;
    padding: 5px 8px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-quest.mv-open .mv-quest-head.mv-cozy-button {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-quest-art.mv-cozy-slot {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-width: 5px;
}
.mv-quest-name { flex: 1; min-width: 0; }
.mv-quest-state.mv-cozy-slot {
    flex: none;
    min-height: 29px;
    padding: 2px 7px;
    border-width: 5px;
    color: var(--mv-tf-ink-soft);
    font-size: 10px;
}
.mv-quest.mv-open .mv-quest-state { color: var(--mv-tf-light); }
.mv-quest-body { padding: 5px 9px 10px; }
.mv-quest-task.mv-cozy-slot {
    min-height: 44px;
    padding: 6px 8px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-bestiary-row.mv-cozy-button {
    justify-content: flex-start;
    min-height: 60px;
    padding: 5px 8px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
}
.mv-bestiary-art.mv-cozy-slot {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-width: 5px;
}
.mv-bestiary-name { flex: 1; min-width: 0; }
.mv-bestiary-kills.mv-cozy-slot {
    min-width: 44px;
    min-height: 32px;
    display: grid;
    place-items: center;
    padding: 2px 7px;
    border-width: 5px;
    color: #a65c38;
}
.mv-bestiary-sheet .mv-bestiary-meta.mv-cozy-slot,
.mv-bestiary-sheet .mv-bestiary-drop.mv-cozy-slot {
    min-height: 36px;
    padding: 5px 8px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    background: none;
    color: var(--mv-tf-ink-soft);
}
.mv-bestiary-sheet .mv-bestiary-drops { display: flex; flex-direction: column; gap: 5px; }

/* More — moonlit watercolor room remains the world; room controls, paper
   doll, travel, settings and save/account controls use CozyUi. */
.mv-more-nav { gap: 5px; padding: 6px 0 5px; }
.mv-more-nav-button.mv-cozy-button {
    min-height: 62px;
    padding: 5px 3px;
    flex-direction: column;
    gap: 1px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
    font-size: 11px;
    filter: none;
    box-shadow: none;
}
.mv-more-nav-button.mv-cozy-button[aria-pressed="true"] {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
    transform: none;
}
.mv-char-paperdoll.mv-cozy-panel {
    gap: 9px;
    padding: 10px 10px 18px;
    border: 10px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 9px 26px rgba(45,30,55,.2);
    backdrop-filter: none;
}
.mv-pd-name-row { border-bottom-color: rgba(112,82,58,.2); }
.mv-pd-rename.mv-cozy-button { min-height: 46px; padding-inline: 10px; }
.mv-pd-portrait-frame.mv-cozy-slot {
    border: 8px solid transparent;
    border-image: var(--mv-tf-slot-selected) 4 fill / 8px stretch;
    border-radius: 0;
    background: none;
    box-shadow: 0 7px 18px rgba(58,39,55,.2);
}
.mv-pd-slot.mv-cozy-slot {
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 6px stretch;
    border-radius: 0;
    background: none;
    box-shadow: 0 3px 8px rgba(65,40,26,.16);
}
.mv-pd-slot.mv-cozy-slot:disabled {
    border-image-source: var(--mv-tf-slot-empty);
    opacity: .75;
}
.mv-pd-glance > span.mv-cozy-slot,
.mv-pd-base-cell.mv-cozy-slot,
.mv-pd-stat-row.mv-cozy-slot,
.mv-pd-effect-chip.mv-cozy-slot,
.mv-char-effect.mv-cozy-slot {
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-pd-glance > span.mv-cozy-slot { padding: 6px 7px; }
.mv-pd-stats-panel.mv-cozy-panel,
.mv-pd-base-stats.mv-cozy-panel,
.mv-pd-atk-panel.mv-cozy-panel,
.mv-pd-def-panel.mv-cozy-panel,
.mv-pd-xp-section.mv-cozy-panel,
.mv-pd-vital.mv-cozy-panel {
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-pd-stats-panel.mv-cozy-panel { gap: 7px; padding: 7px; }
.mv-pd-base-stats.mv-cozy-panel,
.mv-pd-atk-panel.mv-cozy-panel,
.mv-pd-def-panel.mv-cozy-panel { padding: 7px 8px; }
.mv-pd-combat-row { gap: 6px; padding-top: 0; border-top: 0; }
.mv-pd-atk-panel.mv-cozy-panel,
.mv-pd-def-panel.mv-cozy-panel { flex: 1; border-left: 8px solid transparent; }
.mv-pd-base-row { gap: 4px; }
.mv-pd-base-cell.mv-cozy-slot { min-height: 48px; padding: 4px; }
.mv-pd-stat-row.mv-cozy-slot { min-height: 34px; padding: 3px 7px; }
.mv-pd-xp-section.mv-cozy-panel,
.mv-pd-vital.mv-cozy-panel { padding: 7px 9px; }
.mv-char-itemlog.mv-cozy-panel {
    padding: 4px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    background: none;
}
.mv-char-itemlog > summary.mv-cozy-button {
    min-height: 46px;
    padding: 3px 10px;
}
.mv-settings-group.mv-cozy-panel {
    padding: 8px 9px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: 0 5px 16px rgba(45,30,55,.16);
}
.mv-setting-row.mv-cozy-panel {
    position: relative;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    min-height: 62px;
    padding: 4px 5px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 7px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-setting-row > .mv-icon {
    padding: 7px;
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 5px stretch;
    background: none;
}
.mv-setting-row input[type="checkbox"],
.mv-setting-number {
    border: 5px solid transparent;
    border-image: var(--mv-tf-slot-empty) 4 fill / 5px stretch;
    background: none;
    color: var(--mv-tf-ink);
    filter: none;
}
.mv-setting-row input[type="checkbox"]:checked {
    border-image-source: var(--mv-tf-slot-selected);
    background:
        radial-gradient(circle at center, #8d5e42 0 5px, #f9e6c8 6px 9px, transparent 10px);
    filter: none;
}
.mv-setting-row:has(input[type="checkbox"]:checked)::after {
    content: "✓";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 18px;
    transform: translateY(-53%);
    color: #fff5e5;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(60,35,26,.7);
    pointer-events: none;
}
.mv-more-panel[data-more-panel="settings"],
.mv-more-panel[data-more-panel="saves"] {
    gap: 7px;
    padding: 7px 2px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-group.mv-cozy-panel {
    padding: 8px 9px;
    border: 9px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 9px stretch;
    background: none;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button.mv-cozy-button,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn.mv-cozy-button {
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 6px 7px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-secondary) 7 10 fill / 7px 10px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink-soft);
    font-size: 11px;
    filter: none;
    box-shadow: none;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button.mv-cozy-button-primary,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn.mv-cozy-button-primary {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button.mv-cozy-button:disabled,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn.mv-cozy-button:disabled {
    border-image-source: var(--mv-tf-button-disabled);
    color: #927b6d;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-button > span,
.mv-more-panel[data-more-panel="saves"] .mvcs-btn > span {
    margin-top: 0;
}
.mv-more-panel[data-more-panel="saves"] .mv-settings-danger {
    border-image-source: var(--mv-tf-button-secondary);
    color: #a34442;
}
.mv-map.mv-cozy-panel { gap: 6px; }
.mv-more-v2 .mv-map summary.mv-cozy-button {
    min-height: 52px;
    padding: 4px 10px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-selected) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-light);
}
.mv-more-v2 .mv-map-row.mv-cozy-button {
    min-height: 58px;
    padding: 4px 10px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-button-default) 7 10 fill / 7px 10px stretch;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-more-v2 .mv-map-row.mv-map-far {
    border-image-source: var(--mv-tf-button-disabled);
    color: #927b6d;
    opacity: 1;
}
.mv-more-v2 .mv-map-row.mv-map-here {
    border-image-source: var(--mv-tf-button-selected);
    color: var(--mv-tf-light);
}
.mv-map-hint.mv-cozy-panel {
    padding: 7px 9px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 7px stretch;
    background: none;
    color: var(--mv-tf-ink-soft);
}
[data-theme="night"] .mv-char-paperdoll.mv-cozy-panel,
[data-theme="night"] .mv-settings-group.mv-cozy-panel,
[data-theme="night"] .mv-setting-row.mv-cozy-panel,
[data-theme="night"] .mv-map-hint.mv-cozy-panel {
    background: none;
    color: var(--mv-tf-ink);
}

@media (max-width: 370px), (max-height: 740px) {
    .mv-skills-hero { min-height: 154px; }
    .mv-skills-hero-copy h1 { max-width: 210px; font-size: 1.12rem; }
    .mv-skills-hero-copy p { max-width: 210px; }
    .mv-skills-deck.mv-cozy-panel { padding-inline: 9px; }
    .mv-skill-row.mv-cozy-button { min-height: 132px; padding-inline: 5px; }
    .mv-skill-row .mv-skill-emblem { width: 52px; height: 52px; }
    .mv-skill-row .mv-skill-emblem .mv-icon { width: 43px !important; height: 43px !important; }
    .mv-book-body { margin-left: 3px; }
    .mv-journal-v2 > .mv-journal-nav { padding-inline: 15px; }
    .mv-journal-v2 > .mv-journal-nav .mv-journal-nav-button.mv-cozy-button { min-height: 54px; }
    .mv-filterchips .mv-chip-toggle.mv-cozy-button { min-width: 74px; min-height: 48px; padding-inline: 5px; }
    .mv-first-trail.mv-cozy-panel { min-height: 92px; }
    .mv-first-trail-step.mv-cozy-slot { min-height: 54px; }
    .mv-more-nav-button.mv-cozy-button { min-height: 58px; }
    .mv-char-paperdoll.mv-cozy-panel { padding-inline: 7px; }
    .mv-pd-portrait-frame.mv-cozy-slot { width: 138px; height: 162px; }
    .mv-pd-portrait-frame .mv-pd-portrait-img { width: 128px; height: 152px; }
    .mv-pd-stats-panel.mv-cozy-panel { padding-inline: 5px; }
    .mv-pd-base-stats.mv-cozy-panel,
    .mv-pd-atk-panel.mv-cozy-panel,
    .mv-pd-def-panel.mv-cozy-panel { padding-inline: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Complete UI overhaul Wave 5 — global overlays and transient chrome.
   These rules intentionally come last: shared cloud/decision modules keep a
   desktop fallback, while canonical mobile web always resolves to CozyUi.
   ═══════════════════════════════════════════════════════════════════════════ */
.mv-splash-panel.mv-cozy-panel {
    width: min(318px, calc(100vw - 32px));
    min-height: 286px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 24px 22px 19px;
    border-width: 11px;
    border-image-width: 11px;
    color: var(--mv-tf-ink);
    text-shadow: none;
    filter: drop-shadow(0 10px 20px rgba(26, 20, 19, .34));
}
.mv-splash-mark.mv-cozy-slot {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-width: 8px;
    border-image-width: 8px;
}
#mv-splash .mv-splash-moon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    animation: mv-moon-drift 2.6s ease-in-out infinite;
}
#mv-splash .mv-splash-panel h1 {
    margin-top: 2px;
    color: var(--mv-tf-ink);
    text-shadow: 0 1px rgba(255, 255, 255, .64);
}
#mv-splash .mv-splash-panel #mv-splash-progress,
#mv-splash .mv-splash-panel #mv-splash-version {
    color: var(--mv-tf-ink-soft);
    text-shadow: none;
}
#mv-splash .mv-splash-panel #mv-splash-warning {
    width: 100%;
    max-width: none;
    margin-top: 3px;
    padding: 7px 9px;
    color: #9a3f3c;
    font-weight: 800;
    line-height: 1.4;
    text-shadow: none;
    border: 6px solid transparent;
    border-image: var(--mv-tf-slot-selected) 4 fill / 6px stretch;
}
#mv-splash .mv-splash-panel #mv-splash-warning[hidden] { display: none; }

.mv-toast.mv-cozy-panel {
    width: max-content;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px 5px 7px;
    border: 8px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 8px stretch;
    background: none;
    color: var(--mv-tf-ink);
    font-weight: 800;
    line-height: 1.35;
    filter: drop-shadow(0 5px 9px rgba(54, 36, 27, .26));
}
.mv-toast-icon.mv-cozy-slot {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    border-width: 5px;
    border-image-width: 5px;
}
.mv-toast-copy { min-width: 0; overflow-wrap: anywhere; }
.mv-toast[data-category="message_critical"] .mv-toast-icon {
    border-image-source: var(--mv-tf-slot-selected);
}
.mv-toast-overflow.mv-cozy-slot {
    width: 48px;
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border-width: 6px;
    color: var(--mv-tf-ink-soft);
    font-weight: 900;
    opacity: 1;
}

.mv-scroll-hint-dot.mv-cozy-slot {
    width: 32px;
    height: 32px;
    border-width: 6px;
    border-image: var(--mv-tf-slot-selected) 4 fill / 6px stretch;
    background: none;
    color: var(--mv-tf-light);
    filter: drop-shadow(0 2px 4px rgba(54, 36, 27, .3));
}
.mv-scroll-hint[data-axis="y"] > .mv-scroll-hint-dot { left: -16px; }
.mv-scroll-hint[data-axis="x"] > .mv-scroll-hint-dot { top: -16px; }

.mvcs-overlay,
.mv-offline-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(23, 20, 28, .72);
    font-family: inherit;
}
.mvcs-modal.mv-cozy-panel,
.mv-offline-card.mv-cozy-panel {
    width: 100%;
    max-width: 430px;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    padding: 18px;
    border-width: 11px;
    border-image-width: 11px;
    background: none;
    color: var(--mv-tf-ink);
    box-shadow: none;
    filter: drop-shadow(0 10px 24px rgba(25, 17, 14, .42));
    outline: none;
}
.mv-offline-card.mv-cozy-panel {
    display: flex;
    flex-direction: column;
}
.mvcs-modal.mv-cozy-panel { overflow-y: auto; }
.mv-offline-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 5px;
    color: #3f2c26;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .01em;
}
.mv-offline-away {
    margin: 0 0 10px;
    color: #806c61;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
}
.mv-offline-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(46dvh, 330px);
    overflow-y: auto;
    margin: 0 0 10px;
    padding: 2px 1px 9px;
}
.mv-offline-group.mv-cozy-slot {
    min-height: 54px;
    padding: 7px 10px 8px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-panel-wide) 10 fill / 7px stretch;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-offline-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 4px 6px;
    border-bottom: 1px solid rgba(111, 77, 56, .18);
    color: #785b4b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
}
.mv-offline-value-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.mv-offline-stat {
    min-width: 0;
    min-height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 8px;
    color: #513b32;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    overflow-wrap: anywhere;
}
.mv-offline-stat:nth-child(even) {
    border-left: 1px solid rgba(111, 77, 56, .18);
}
.mv-offline-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(111, 77, 56, .14);
}
.mv-offline-stat:only-child {
    grid-column: 1 / -1;
}
.mv-offline-stat-name {
    color: #4a342c;
    font-weight: 600;
}
.mv-offline-stat-delta {
    margin-top: 1px;
    color: #8a6d5d;
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.mv-offline-quiet,
.mv-offline-cap {
    color: var(--mv-tf-ink-soft);
    text-align: center;
}
.mv-offline-close.mv-cozy-button { width: 100%; min-height: 49px; }

.mv-rename-sheet > .mv-sheet.mv-cozy-panel {
    max-width: 560px;
    padding: 16px;
    border-width: 11px;
    border-image-width: 11px;
    background: none;
    color: var(--mv-tf-ink);
}
.mv-rename-input.mv-cozy-slot,
.mvd-input.mv-cozy-slot {
    min-height: 52px;
    padding: 8px 12px;
    border: 7px solid transparent;
    border-image: var(--mv-tf-slot-default) 4 fill / 7px stretch;
    border-radius: 0;
    background: none;
    color: var(--mv-tf-ink);
    font: inherit;
}
.mv-rename-input.mv-cozy-slot {
    font-size: var(--text-lg);
    text-align: center;
}
.mv-rename-input.mv-cozy-slot:focus,
.mvd-input.mv-cozy-slot:focus {
    outline: none;
    border-image-source: var(--mv-tf-slot-selected);
}
.mv-rename-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mv-rename-actions button { min-height: 49px; }
.mv-rename-actions button:only-child { grid-column: 1 / -1; }

.mvd-modal { max-width: 430px; }
.mvd-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}
.mvd-heading img,
.mvcs-card-title img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: none;
}
.mvd-heading h2,
.mvcs-modal h2 { margin: 0; font-size: 1.12rem; }
.mvd-message { margin: 0; line-height: 1.52; }
.mvd-detail,
.mvcs-note {
    margin: 7px 0 0;
    color: var(--mv-tf-ink-soft);
    font-size: .84rem;
    line-height: 1.48;
    opacity: 1;
}
.mvd-requirement {
    display: block;
    margin-top: 12px;
    color: var(--mv-tf-ink);
    font-size: .88rem;
    font-weight: 900;
}
.mvd-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 13px;
}
.mvd-actions .mvcs-btn { min-height: 49px; margin: 0; }
.mvd-danger { color: #a34442 !important; }

.mvcs-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.mvcs-card.mv-cozy-panel {
    flex: 1 1 auto;
    padding: 10px;
    border-width: 8px;
    border-image-width: 8px;
    background: none;
    color: var(--mv-tf-ink);
}
.mvcs-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
}
.mvcs-card table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.mvcs-card td { padding: 1px 0; vertical-align: top; }
.mvcs-card td:first-child {
    width: 74px;
    padding-right: 7px;
    color: var(--mv-tf-ink-soft);
    white-space: nowrap;
}
.mvcs-btn.mv-cozy-button {
    width: 100%;
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
}
.mvcs-required {
    margin: 9px 0 0;
    color: #8c4b3c;
    font-size: .84rem;
    font-weight: 900;
    text-align: center;
}
.mvcs-toast.mv-cozy-panel {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-h) + var(--mv-safe-bottom) + 12px);
    z-index: 10001;
    width: max-content;
    max-width: min(328px, calc(100vw - 32px));
    min-height: 50px;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-width: 8px;
    border-image-width: 8px;
    color: var(--mv-tf-ink);
    font-weight: 800;
    text-align: center;
    transition: opacity .4s;
    filter: drop-shadow(0 5px 9px rgba(54, 36, 27, .26));
}

@media (max-width: 370px), (max-height: 740px) {
    .mv-splash-panel.mv-cozy-panel { min-height: 270px; padding-block: 18px 15px; }
    .mvcs-modal.mv-cozy-panel,
    .mv-offline-card.mv-cozy-panel { padding: 13px; }
    .mvcs-card.mv-cozy-panel { padding: 7px; }
    .mvcs-card table { font-size: .78rem; }
    .mv-offline-list { max-height: 42dvh; }
}

@media (prefers-reduced-motion: reduce) {
    #mv-splash .mv-splash-moon,
    .mv-toast.mv-cozy-panel,
    .mvcs-required-nudge { animation: none; }
}

/* ── Exact-phone readability floor ───────────────────────────────────────
   Narrow screens used to shrink navigation and supporting TC copy to 9–11px.
   Keep interactive labels at 12px, supporting copy at 12–13px, and reserve
   the 11px micro token for short high-contrast HUD numbers. These final rules
   intentionally outrank the earlier density media queries at 360×720. */
.mv-status .mv-status-top { font-size: var(--text-meta); }
.mv-status .mv-vital-num { font-size: var(--text-micro); font-weight: 700; }

.mv-tab { font-size: var(--text-xs); line-height: 1.1; }

.mv-map-node-label {
    min-height: 32px;
    font-size: var(--text-xs);
}
.mv-map-node.mv-disabled .mv-map-node-label {
    color: #6d5548;
    opacity: 1;
}

.mv-ongoing { min-height: 92px; }
.mv-ongoing-info {
    max-height: 48px;
    font-size: var(--text-xs);
    line-height: 1.35;
}

.mv-surface-header-subtitle,
.mv-skills-kicker,
.mv-skill-awakened,
.mv-first-trail-title,
.mv-first-trail-step,
.mv-bag-capacity small,
.mv-more-nav-button,
.mv-journal-nav .mv-subtab,
.mv-sheet-subtitle,
.mv-offline-stat-delta,
.mv-quest-state,
.mv-save-btn {
    font-size: var(--text-xs);
}

.mv-surface-header-subtitle { opacity: 1; }
.mv-skills-hero p,
.mv-sheet-lead { font-size: var(--text-meta); }
.mv-character-glance small { font-size: var(--text-micro); }