/*
 * Dark editorial fantasy art direction.
 * This layer changes presentation only. Layout, controls, and semantic item
 * colors remain owned by styles.css and the existing UI modules.
 */
:root {
    --ed-canvas: #080c0d;
    --ed-surface: #111a1d;
    --ed-surface-raised: #172226;
    --ed-field: #0d1518;
    --ed-line: #445257;
    --ed-line-soft: #303e42;
    --ed-text: #eeeee7;
    --ed-muted: #a8b5b1;
    --ed-quiet: #7d908d;
    --ed-gold: #bda374;
    --ed-gold-light: #e3cca0;
    --ed-danger: #b56d61;
}

body {
    background-color: var(--ed-canvas);
    background-image: linear-gradient(rgba(4, 7, 8, .72), rgba(4, 7, 8, .88)),
        url('../assets/background/background.png');
    color: var(--ed-text);
    font-family: "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
}

/* One restrained frame language across every game surface. */
.panel,
#col-left > .panel,
#col-center > .panel,
#col-right > .panel,
#col-right > .panel:last-child {
    background-color: var(--ed-surface);
    border-color: var(--ed-line-soft);
    border-radius: 0;
    box-shadow: none;
}
.panel-header {
    background: var(--ed-field);
    border-color: var(--ed-line);
    border-radius: 0;
    color: var(--ed-gold-light);
    font-weight: 700;
    letter-spacing: .055em;
}
.btn,
.m-act,
.seg,
.ui-pick-row,
.gd-seg button,
.charcard {
    border-radius: 0;
    box-shadow: none;
}
.btn {
    background: var(--ed-surface-raised);
    border-color: var(--ed-line);
    color: var(--ed-text);
}
.btn:hover:not(:disabled) { background: #213036; }
.btn.active,
#create-classbox .btn.active {
    background: #242b26;
    border-color: var(--ed-gold);
    color: var(--ed-gold-light);
}
.m-act {
    background: var(--ed-field);
    border-color: var(--ed-line);
    border-radius: 0;
    color: var(--ed-text);
}
.m-act.pri {
    background: var(--ed-gold);
    border-color: var(--ed-gold);
    color: #101719;
}
.m-act.warn {
    background: #382826;
    border-color: var(--ed-danger);
    color: #e7d8d1;
}
.m-act.mag {
    background: #292638;
    border-color: #8b819f;
    color: #ded9eb;
}
.m-act.tog.on {
    background: #343024;
    border-color: var(--ed-gold);
    color: var(--ed-gold-light);
}
.seg { background: var(--ed-field); border-color: var(--ed-line-soft); color: var(--ed-muted); }
.seg.active { background: #262c28; border-color: var(--ed-gold); color: var(--ed-gold-light); }

/* Session ended: one clear exit, using the same restrained frame as game sheets. */
#session-ended {
    padding: 18px;
    background: rgba(5, 11, 13, .9);
    backdrop-filter: blur(7px);
}
#session-ended-card {
    width: min(100%, 470px);
    max-width: 470px;
    max-height: calc(var(--app-h, 100dvh) - 36px);
    padding: 0;
    overflow-y: auto;
    border: 1px solid #58645e;
    border-top: 2px solid var(--ed-gold);
    border-radius: 0;
    background: #172326;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
    text-align: left;
}
#session-ended-kicker {
    padding: 27px 28px 0;
    color: var(--ed-gold-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
}
#session-ended-title {
    margin: 9px 28px 0;
    color: var(--ed-text);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .05em;
}
#session-ended-body {
    margin: 14px 28px 0;
    color: #bdcac3;
    font-size: 13px;
    line-height: 1.75;
}
#session-ended-actions {
    margin-top: 28px;
    padding: 17px 28px 25px;
    border-top: 1px solid var(--ed-line);
    background: #1b292a;
}
#session-ended-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 47px;
    padding: 0 16px;
    border: 1px solid var(--ed-gold);
    border-radius: 0;
    background: var(--ed-gold);
    color: #101719;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}
#session-ended-btn:hover { background: #d1b789; border-color: #d1b789; }
#session-ended-btn:active { background: #aa9065; }
#session-ended-btn:focus-visible { outline: 2px solid var(--ed-text); outline-offset: 3px; }
#session-ended-btn span { font-size: 17px; font-weight: 400; line-height: 1; }
@media (max-width: 767px) {
    #session-ended-card { max-height: calc(var(--app-h, 100dvh) - 28px); }
    #session-ended-kicker { padding: 22px 21px 0; }
    #session-ended-title { margin: 8px 21px 0; font-size: 21px; }
    #session-ended-body { margin: 13px 21px 0; font-size: 12px; }
    #session-ended-actions { margin-top: 23px; padding: 15px 21px 21px; }
    #session-ended-btn { min-height: 48px; }
}

/* Keep health and mana distinct, while letting the world and loot lead. */
#status-panel { background: var(--ed-surface); }
#st-avatar { border-radius: 0; border-color: var(--ed-line); box-shadow: none; }
#st-head .who > b { color: var(--ed-text); }
#st-head .who > span,
#st-head .nums { color: var(--ed-muted); }
#st-head .nums .g b,
#st-head .nums .g .uic { color: var(--ed-gold-light); }
.gold-label,
.gold-value em { display: none; }
.defense-grid .defense-stat + .defense-stat::before { content: '　'; }
#st-bars .lb.hp { color: #d7a29b; }
#st-bars .lb.mp { color: #a8c3cc; }
#st-bars .lb.xp { color: var(--ed-gold-light); }
#st-bars .bar-bg,
.bar-bg { background: #344246; border-radius: 0; }
#bar-hp { background: #b76c61 !important; }
#bar-mp { background: #688e9f !important; }
#bar-exp { background: var(--ed-gold) !important; }
#st-buffs { border-color: var(--ed-line-soft) !important; }
#st-buffs .bi,
#st-buffs .bi-t { border-radius: 0; background: var(--ed-field); }

/* Page navigation uses a slim editorial rule, with gold reserved for selection. */
#mobile-nav,
#tabbar,
#m-logtabs {
    background: var(--ed-field) !important;
    border-color: var(--ed-line) !important;
}
#mobile-nav button { color: var(--ed-muted); }
#mobile-nav button[aria-current="page"] { color: var(--ed-gold-light); }
#tabbar button { color: var(--ed-muted) !important; }
#tabbar button.active,
#m-logtabs button[aria-current="true"] {
    color: var(--ed-gold-light) !important;
    border-bottom-color: var(--ed-gold) !important;
}

/* The scene is the image layer; targets remain readable without heavy cards. */
#map-panel::before {
    background: linear-gradient(180deg, rgba(8, 14, 16, .24), rgba(8, 14, 16, .78));
    border-radius: 0;
}
body[data-mtown] #map-panel::before {
    background: linear-gradient(180deg, rgba(8, 14, 16, .1) 0,
        rgba(8, 14, 16, .16) 120px, rgba(8, 14, 16, .75) 190px,
        rgba(8, 14, 16, .9) 100%);
}
#map-header,
#m-logtabs { border-color: var(--ed-line); }
#map-header { background: var(--ed-field); }
#town-head b { color: var(--ed-text); }
#town-head span { color: var(--ed-muted); }
#map-switch > i { color: var(--ed-gold-light); }
#hunt-ctl { background: rgba(10, 17, 19, .8); border-color: var(--ed-line-soft); }
.mob-target,
.npcc {
    background: rgba(13, 21, 24, .86);
    border-color: var(--ed-line);
    border-radius: 0;
    box-shadow: none;
}
#map-panel[data-scene]:not([data-scene=""]) .npcc,
#map-panel[data-scene]:not([data-scene=""]) .mob-target {
    background: rgba(13, 21, 24, .75);
}
.mob-target.active,
#map-panel[data-scene]:not([data-scene=""]) .mob-target.active {
    background: rgba(28, 32, 29, .91) !important;
    border-color: var(--ed-gold) !important;
}
.npcc .nm { color: var(--ed-text); }
.npcc .ti,
.npcc .ic { color: var(--ed-muted); }

/* Inventory keeps the existing grid and rarity cues. */
.itile,
.eqc,
.sk,
.bq-card,
.gd-card,
.bf,
.gd-rk {
    border-radius: 0;
    background: var(--ed-surface-raised);
    border-color: var(--ed-line-soft);
    box-shadow: none;
}
.itile.eqd { border-color: var(--ed-gold); box-shadow: inset 0 0 0 1px rgba(189, 163, 116, .35); }
.itile .st,
.eqc .st { color: var(--ed-gold-light); }
.eqc.empty { border-color: var(--ed-line); }
.eqc.set { border-color: #80a894; box-shadow: inset 0 0 0 1px rgba(128, 168, 148, .4); }

/* Dense information pages use quiet rules and consistent control surfaces. */
.dgrp,
.sgrp,
#panel-auto .sgrp,
.gd-card,
.bf,
.gd-rk { border-color: var(--ed-line-soft); }
.dgh,
.gd-sec,
.gd-sub,
.bq-hd { color: var(--ed-gold-light); }
.gd-title,
.bf-v { color: var(--ed-gold-light); }
#panel-auto .sgrp,
#panel-auto .slot,
.ui-pick-row { background: var(--ed-surface); }
#panel-auto .sgrp > .gh { background: var(--ed-field); color: var(--ed-gold-light); }
.logwrap,
#combat-log,
#sys-log { background: var(--ed-field); }
.log-entry { color: #cbd5d1; }
.ssel,
.numin,
.acc-in,
.pet-rename {
    border-radius: 0;
    background: var(--ed-field);
    border-color: var(--ed-line);
    color: var(--ed-text);
}
.acc-in:focus,
.pet-rename:focus { border-color: var(--ed-gold); box-shadow: none; }
#acc-remember-row { color: var(--ed-muted); }
#acc-remember-row input[type=checkbox] { accent-color: var(--ed-gold); }
.charcard {
    background: var(--ed-surface-raised);
    border-color: var(--ed-line);
    color: var(--ed-text);
}
.charcard:hover { background: #223035; border-color: var(--ed-gold); }
.charcard.on { background: #252d29; border-color: var(--ed-gold); }
.charcard.new { color: var(--ed-muted); }
.cc-sub { color: var(--ed-muted); }
.cc-when { color: var(--ed-quiet); }

/* Drawers are part of the same flat visual system. Preserve their geometry. */
#item-modal,
#m-awaysheet,
#m-mapsheet,
#m-wbsheet,
#town-interaction-container {
    background: var(--ed-surface);
    border-color: var(--ed-line);
    border-radius: 0;
    box-shadow: none;
}
#m-awaysheet-body,
#m-mapsheet-body,
.awrow { background: var(--ed-surface); }
.awrow { border-color: var(--ed-line-soft); }
.awrow.gold .awn,
.awrow.gold .awc { color: var(--ed-gold-light); }
#toast-root .toast {
    border-radius: 0;
    background: var(--ed-surface);
    border-color: var(--ed-line);
    box-shadow: none;
}

/* The first screen should introduce the same world as the game HUD. */
#creation-screen {
    background: rgba(17, 26, 29, .96) !important;
    border-color: var(--ed-line);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none !important;
}
#creation-screen > div:first-child { border-color: var(--ed-line); }
#creation-screen h1 { color: var(--ed-text); letter-spacing: .07em; }
#creation-screen > div:first-child p { color: var(--ed-muted); }
#create-portrait {
    background: var(--ed-field) !important;
    border: 1px solid var(--ed-line) !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
#class-preview-img { border-radius: 0; }
#create-classbox,
#stat-allocation {
    background: var(--ed-surface-raised) !important;
    border-color: var(--ed-line) !important;
    border-radius: 0 !important;
}
#creation-screen h2,
#creation-screen label[for="create-name"] { color: var(--ed-gold-light); }
#create-name { background: var(--ed-field); color: var(--ed-text); border: 1px solid var(--ed-line); border-radius: 0; }
#create-name::placeholder { color: var(--ed-quiet); }
#btn-start:not(:disabled) { background: var(--ed-gold); color: #101719; border-color: var(--ed-gold); }

/* 入口頁主視覺與登入表單只在未登入狀態出現。 */
.entry-brand-en,
#entry-art { display: none; }
#creation-screen:has(#acc-form) {
    width: min(1040px, calc(100vw - 32px));
    max-width: 1040px !important;
    min-height: min(646px, calc(var(--app-h, 100dvh) - 32px));
    padding: 0;
    gap: 0;
    display: grid;
    grid-template-columns: 36% minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    overflow-y: auto;
    border: 1px solid var(--ed-line);
}
#creation-screen:has(#acc-form) > div:first-child {
    grid-column: 2;
    grid-row: 1;
    padding: 34px 52px 0;
    border: 0;
    text-align: left;
}
#creation-screen:has(#acc-form) > div:first-child h1 {
    margin: 0;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: .16em;
}
#creation-screen:has(#acc-form) > div:first-child p { display: none; }
#creation-screen:has(#acc-form) .entry-brand-en {
    display: block;
    margin-bottom: 7px;
    color: var(--ed-gold);
    font-size: 10px;
    letter-spacing: .18em;
    font-weight: 700;
}
#creation-screen:has(#acc-form) #entry-art {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 646px;
    padding: 28px 24px;
    border-right: 1px solid var(--ed-line);
    overflow: hidden;
    background: var(--ed-field);
}
#entry-art .entry-art-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#entry-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 53%, rgba(5, 9, 11, .18) 68%, rgba(5, 9, 11, .9) 100%);
    pointer-events: none;
}
.entry-art-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--ed-gold);
    text-align: left;
}
.entry-art-kicker,
.entry-login-intro > span {
    color: var(--ed-gold-light);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}
.entry-art-copy strong { color: var(--ed-text); font-size: 18px; letter-spacing: .08em; }
.entry-art-copy > span:last-child { color: var(--ed-muted); font-size: 12px; }
#creation-screen:has(#acc-form) #main-menu {
    grid-column: 2;
    grid-row: 2;
    display: block;
    margin: 0;
    padding: 24px 52px 28px;
    min-width: 0;
}
#creation-screen:has(#acc-form) #account-box {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}
.entry-login-intro { padding-bottom: 22px; margin-bottom: 21px; border-bottom: 1px solid var(--ed-line); }
#creation-screen .entry-login-intro h2 {
    margin: 12px 0 4px;
    color: var(--ed-text);
    font-size: 31px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: .07em;
}
.entry-login-intro p { color: var(--ed-muted); font-size: 13px; }
#acc-form.acc-form { gap: 0; }
#acc-form .entry-field-label {
    display: block;
    margin: 0 0 7px;
    color: var(--ed-gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}
#acc-form .acc-in {
    height: 52px;
    margin-bottom: 16px;
    padding: 0 17px;
    font-size: 14px;
}
#acc-form .acc-in::placeholder { color: var(--ed-quiet); }
.entry-remember-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -2px 0 11px;
    color: var(--ed-muted);
    font-size: 11px;
}
.entry-remember-line > span { text-align: right; }
#acc-form #acc-remember-row { font-size: 12px; min-width: 0; }
#acc-form .acc-btns { display: block; }
#acc-form .acc-btns .m-act {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-height: 54px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
}
#acc-form .acc-btns .m-act:hover { background: #d2ba8b; }
#acc-form .acc-btns .m-act span { font-size: 21px; line-height: 1; }
.entry-register {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 9px 0 2px;
    color: var(--ed-muted);
    font-size: 12px;
}
.entry-register button {
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid var(--ed-gold);
    background: transparent;
    color: var(--ed-gold-light);
    font-weight: 700;
    cursor: pointer;
}
.entry-register button:hover { color: var(--ed-text); }
#acc-form #acc-hint { color: var(--ed-quiet); font-size: 11px; }
.entry-save-note {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid var(--ed-line);
    color: var(--ed-muted);
    font-size: 11px;
}

@media (max-width: 700px) {
    #creation-screen:has(#acc-form) {
        width: 100%;
        max-width: 500px !important;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }
    #creation-screen:has(#acc-form) #entry-art {
        grid-column: 1;
        grid-row: 1;
        min-height: 180px;
        padding: 18px 20px;
        border-right: 0;
        border-bottom: 1px solid var(--ed-line);
    }
    #entry-art .entry-art-image { object-position: center 40%; }
    #entry-art::after { background: linear-gradient(180deg, transparent 20%, rgba(5, 9, 11, .22) 48%, rgba(5, 9, 11, .84) 100%); }
    .entry-art-copy { gap: 4px; padding-top: 9px; }
    .entry-art-copy strong { font-size: 14px; }
    #creation-screen:has(#acc-form) > div:first-child {
        grid-column: 1;
        grid-row: 2;
        padding: 17px 22px 0;
    }
    #creation-screen:has(#acc-form) #main-menu {
        grid-column: 1;
        grid-row: 3;
        padding: 12px 22px 24px;
    }
    .entry-login-intro { padding-bottom: 14px; margin-bottom: 17px; }
    #creation-screen .entry-login-intro h2 { margin-top: 7px; font-size: 25px; }
    #acc-form .acc-in { height: 46px; margin-bottom: 12px; }
    .entry-save-note { margin-top: 13px; }
}

/* Village: keep the scene unobstructed, with services on a separate surface. */
#town-directory { display: none; }
body[data-mtown] #status-panel { background: var(--ed-surface); }
body[data-mtown] #st-buffs { border-color: var(--ed-line-soft) !important; }
/* 2026-10-11 玩家「剛剛只有改狩獵，村莊也要一樣」：同狩獵版面（hunting-theme.css）—— 左欄是固定高度的格子，增益很多時寵物那一列會被切掉，
   改成縱向可捲（橫向照舊藏起來，同 .scroll-fill 的理由）；桌面寬度另把增益圖示限制在四列內自己捲。 */
body[data-mtown] #st-buffs { min-width: 0; overflow-x: hidden; overflow-y: auto; min-height: 0; }
body[data-mtown] #st-buffs .town-status-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
body[data-mtown] #st-buffs .town-status-row + .town-status-row { margin-top: 6px; }
body[data-mtown] #st-buffs .town-status-label { flex: 0 0 58px; color: var(--ed-gold-light); font-size: 10px; font-weight: 700; line-height: 1.3; }
body[data-mtown] #st-buffs .town-status-empty { color: var(--ed-quiet); font-size: 11px; }
body[data-mtown] #st-buffs .town-pet-empty { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ed-muted); font-size: 11px; text-align: left; cursor: pointer; }
body[data-mtown] #st-buffs .town-pet-empty:hover { color: var(--ed-gold-light); }
body[data-mtown] #st-buffs .bi-row,
body[data-mtown] #st-buffs .town-pet-list { display: flex; align-items: center; gap: 4px; min-width: 0; }
body[data-mtown] #st-buffs .bi-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body[data-mtown] #st-buffs .bi-row::-webkit-scrollbar { display: none; }
body[data-mtown] #st-buffs .bi,
body[data-mtown] #st-buffs .town-pet-chip { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--ed-line); border-radius: 0; background: #1b292c; box-shadow: none; }
body[data-mtown] #st-buffs .bi { object-fit: contain; }
body[data-mtown] #st-buffs .bi-t { min-height: 44px; border-radius: 0; background: var(--ed-field); box-shadow: inset 0 0 0 1px var(--ed-line); }
body[data-mtown] #st-buffs .town-pet-chip { position: relative; display: grid; place-items: center; padding: 1px; cursor: pointer; }
body[data-mtown] #st-buffs .town-pet-chip:hover { border-color: var(--ed-gold); }
body[data-mtown] #st-buffs .town-pet-chip.downed { border-color: var(--ed-danger); background: #352323; }
body[data-mtown] #st-buffs .town-pet-chip img { display: block; width: 37px; height: 37px; object-fit: contain; image-rendering: pixelated; }
body[data-mtown] #st-buffs .town-pet-chip b { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 1px; background: rgba(10,16,17,.9); color: var(--ed-gold-light); font-size: 9px; font-weight: 700; line-height: 1; text-align: center; }
body[data-mtown] #st-buffs .town-pet-chip.downed b { color: #f0b2a9; }
body[data-mtown] #map-panel::before { background: linear-gradient(180deg, rgba(5,9,10,.74), rgba(5,9,10,.12) 39%, rgba(5,9,10,.82) 100%); }
body[data-mtown] #map-header { background: transparent; border: 0; }
body[data-mtown] #town-head b { color: var(--ed-text); }
body[data-mtown] #map-switch > i { color: var(--ed-text); }
body[data-mtown] #hunt-ctl { background: transparent; border: 0; }
body[data-mtown] #hunt-ctl[data-state="idle"] .dot { background: #9dc5a4; }
body[data-mtown] #hunt-ctl-btn.pri { background: var(--ed-gold); border-color: var(--ed-gold); color: #101719; }
body[data-mtown] #hunt-ctl-btn.pri:hover { background: var(--ed-gold-light); }

@media (max-width: 767px) {
    body[data-mtown] #st-main { gap: 9px; padding: 9px 10px 6px; }
    body[data-mtown] #st-avatar { width: 48px; height: 48px; border-width: 1px; border-radius: 0; }
    body[data-mtown] #st-avatar img { width: 310%; height: 310%; }
    body[data-mtown] #st-head .who > b { font-size: 15px; }
    body[data-mtown] #st-head .who > span,
    body[data-mtown] #st-head .nums { font-size: 10px; }
    body[data-mtown] #st-bars { gap: 1px; }
    body[data-mtown] #st-bars .bar-bg { height: 9px; }
    body[data-mtown] #st-bars .bar-bg.xp { height: 7px; }
    body[data-mtown] #st-bars .bar-text { line-height: 9px; font-size: 9px; }
    body[data-mtown] #st-bars .xp .bar-text { line-height: 7px; font-size: 8px; }
    body[data-mtown] #st-buffs { padding: 7px 10px 8px !important; }
    body[data-mtown] #st-buffs .town-status-label { flex-basis: 58px; }
    body[data-mtown][data-mpage="adv"] #col-center { min-height: 0; }
    body[data-mtown][data-mpage="adv"] #map-panel { display: flex; flex-direction: column; min-height: 0; }
    body[data-mtown] #map-header { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: 19px 20px; }
    body[data-mtown] #town-head b { font-size: 24px; letter-spacing: .07em; }
    body[data-mtown] #town-head span { margin-top: 3px; color: #d1ddd3; font-size: 10px; }
    body[data-mtown] #map-switch { display: flex; align-items: center; justify-content: center; min-width: 108px; min-height: 44px; padding: 0 11px; border: 1px solid rgba(220,218,199,.6); background: rgba(11,17,18,.7); }
    body[data-mtown] #map-switch > i { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; gap: 9px; font-size: 11px; white-space: nowrap; }
    body[data-mtown] #map-switch > i span { position: static; color: var(--ed-gold-light); font-size: 16px; font-weight: 400; }
    body[data-mtown] #map-scene-band { display: block; height: 214px; flex: 0 0 214px; }
    body[data-mtown][data-mnpc] #map-scene-band { display: none; }
    body[data-mtown] #hunt-ctl { position: absolute; z-index: 3; top: 155px; left: 20px; right: 20px; justify-content: space-between; padding: 0; }
    body[data-mtown] #hunt-ctl-state { color: #d5e1d8; font-size: 10px; }
    body[data-mtown] #hunt-ctl-btn.pri { min-height: 44px; padding: 0 16px; font-size: 11px; }
    body[data-mtown] #town-view { min-height: 0; background: var(--ed-surface); }
    body[data-mtown] #town-npc-container { gap: 0 14px; padding: 16px 20px 10px; overflow-y: auto; align-content: start; }
    body[data-mtown] #town-npc-container::before { content: 'TOWN DIRECTORY / 村莊人物'; grid-column: 1 / -1; display: block; padding: 0 0 12px; border-bottom: 1px solid var(--ed-line); color: var(--ed-gold-light); font-size: 11px; font-weight: 700; letter-spacing: .09em; }
    body[data-mtown] .npcc,
    body[data-mtown] #map-panel[data-scene]:not([data-scene=""]) .npcc { display: grid; grid-template-columns: 34px minmax(0, 1fr) 12px; grid-template-rows: auto auto; align-content: center; gap: 2px 7px; min-height: 74px; padding: 8px 0; background: transparent; border: 0; border-bottom: 1px solid var(--ed-line-soft); border-radius: 0; box-shadow: none; backdrop-filter: none; }
    body[data-mtown] .npcc .ic { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ed-line); background: #252921; color: var(--ed-gold-light); }
    body[data-mtown] .npcc .ic .uic { width: 19px; height: 19px; }
    body[data-mtown] .npcc .nm { grid-column: 2; grid-row: 1; color: var(--ed-text); font-size: 13px; text-align: left; }
    body[data-mtown] .npcc .ti { grid-column: 2; grid-row: 2; color: var(--ed-muted); font-size: 10px; text-align: left; }
    body[data-mtown] .npcc::after { content: '↗'; grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--ed-quiet); font-size: 13px; }
    /* 2026-10-04（玩家回報「手機版 NPC 顯示亂掉：妖森、歐瑞村、燃柳」）：兩欄的清單，**落單的最後一張**才橫跨整列。
       落單＝總數是奇數＝最後一張是第奇數個。原本寫成 `nth-child(even)`，剛好相反：偶數張（妖精森林 12、歐瑞與燃柳各 2）時
       最後一張被拉成整列，倒數第二張就獨自佔一列的左半、右邊空著；奇數張時落單的那張反而只有半寬。
       ⚠️ 上面那個 `::before` 標題不是子元素，不算進 nth-child。 */
    body[data-mtown] .npcc:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
    body[data-mtown] { padding: 0; }
    body[data-mtown] #game-screen { display: grid; grid-template-columns: 263px minmax(0, 1fr) 338px; grid-template-rows: 62px minmax(0, 1fr); width: 100%; max-width: 1440px !important; height: var(--app-h, 100dvh); gap: 0; padding: 0; overflow: hidden; }
    body[data-mtown] #mobile-nav { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 0; padding: 0 27px; border-bottom: 1px solid var(--ed-line); background: var(--ed-field); }
    body[data-mtown] #mobile-nav::before { content: 'LINEAGE    /    IDLE ADVENTURE'; margin-right: 64px; color: var(--ed-text); font-size: 13px; font-weight: 700; letter-spacing: .15em; white-space: pre; }
    body[data-mtown] #mobile-nav button { align-self: stretch; min-width: 62px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ed-muted); font-size: 12px; }
    body[data-mtown] #mobile-nav button .uic { display: none; }
    body[data-mtown] #mobile-nav button[aria-current="page"] { border-bottom-color: var(--ed-gold); color: var(--ed-gold-light); }
    body[data-mtown] #col-left { grid-column: 1; grid-row: 2; width: auto !important; min-width: 0; gap: 0; border-right: 1px solid var(--ed-line); background: var(--ed-surface); }
    body[data-mtown] #panel-auto { display: none; }
    body[data-mtown] #status-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; border: 0; }
    /* 2026-10-11 玩家「村莊也要一樣」：金幣／HP／MP／EXP／AC 的間距同狩獵版面縮緊，省下的高度給增益與寵物（原本 30／17／22+16+17／23+20／27／47） */
    body[data-mtown] #st-main { display: block; padding: 18px 23px 0; }
    body[data-mtown] #st-avatar { display: block; width: 108px; height: 108px; margin: 0 auto; border-width: 1px; border-radius: 0; }
    body[data-mtown] #st-avatar img { width: 310%; height: 310%; }
    body[data-mtown] #st-right { display: flex; flex-direction: column; gap: 0; }
    body[data-mtown] #st-head,
    body[data-mtown] #st-head .nums { display: contents; }
    body[data-mtown] #st-head .who { order: 1; margin-top: 10px; }
    body[data-mtown] #st-head .who > b { font-size: 18px; }
    body[data-mtown] #st-head .nums .g { order: 2; display: block; margin-top: 12px; padding: 10px 0 11px; border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line); text-align: left; }
    body[data-mtown] #st-head .nums .g .gold-label { display: block; color: var(--ed-quiet); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
    body[data-mtown] #st-head .nums .g .gold-value { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; white-space: nowrap; }
    body[data-mtown] #st-head .nums .g b { color: var(--ed-gold-light); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
    body[data-mtown] #st-head .nums .g em { display: inline; color: var(--ed-muted); font-size: 11px; font-style: normal; }
    body[data-mtown] #st-bars { order: 3; display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
    body[data-mtown] #st-bars > div { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 0; }
    body[data-mtown] #st-bars .lb { grid-column: 1; grid-row: 1; flex: none; color: var(--ed-text); font-size: 13px; font-weight: 500; text-align: left; }
    body[data-mtown] #st-bars .bar-bg { grid-column: 1 / -1; grid-row: 2; overflow: visible; }
    body[data-mtown] #st-bars .bar-bg,
    body[data-mtown] #st-bars .bar-bg.xp { height: 5px; }
    body[data-mtown] #st-bars .bar-text,
    body[data-mtown] #st-bars .xp .bar-text { position: absolute; top: -28px; right: 0; left: auto; display: block; width: auto; color: var(--ed-muted); font-size: 12px; font-weight: 500; line-height: 1.3; text-align: right; text-shadow: none; }
    body[data-mtown] #st-head .defense-grid { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
    body[data-mtown] #st-head .defense-stat { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 10px; border: 1px solid var(--ed-line); color: var(--ed-quiet); font-size: 11px; }
    body[data-mtown] #st-head .defense-stat + .defense-stat::before { content: none; }
    body[data-mtown] #st-head .defense-stat b { color: var(--ed-text); font-size: 15px; }
    body[data-mtown] #st-buffs { margin-top: 12px; padding: 12px 22px 14px !important; }   /* 2026-10-11 同狩獵：不再釘在左欄最底下，直接接在 AC／MR 下面 */
    body[data-mtown] #st-buffs .town-status-row { display: block; }
    body[data-mtown] #st-buffs .town-status-row + .town-status-row { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--ed-line-soft); }
    body[data-mtown] #st-buffs .town-status-label { display: block; margin-bottom: 10px; font-size: 10px; letter-spacing: .1em; }
    body[data-mtown] #st-buffs .bi-row { flex-wrap: wrap; overflow: visible; }
    body[data-mtown] #st-buffs .bi-row { max-height: 164px; overflow-y: auto; overflow-x: hidden; align-content: flex-start; scrollbar-width: thin; }   /* 四列 38px ＋ 間距；第五列起自己捲，捲軸要看得到。⚠️ 一定要排在上面那行 overflow: visible 之後，否則上限等於沒有 */
    body[data-mtown] #st-buffs .bi,
    body[data-mtown] #st-buffs .town-pet-chip { width: 38px; height: 38px; flex-basis: 38px; }
    body[data-mtown] #st-buffs .town-pet-chip img { width: 34px; height: 34px; }
    body[data-mtown] #col-center { grid-column: 2; grid-row: 2; width: auto !important; min-width: 0; gap: 0; }
    body[data-mtown] #col-center > .panel:not(#map-panel),
    body[data-mtown] #m-logtabs { display: none !important; }
    body[data-mtown] #map-panel { display: block; flex: 1; min-height: 0; border: 0; background-position: center; }
    body[data-mtown] #map-header { position: absolute; z-index: 3; top: 0; left: 0; right: 0; padding: 34px 36px; }
    body[data-mtown] #town-head b { font-size: 35px; letter-spacing: .08em; }
    body[data-mtown] #town-head span { color: #d1ddd3; font-size: 12px; }
    body[data-mtown] #map-switch { display: flex; align-items: center; justify-content: center; min-width: 132px; min-height: 44px; padding: 0 17px; border: 1px solid rgba(220,218,199,.6); background: rgba(11,17,18,.7); }
    body[data-mtown] #map-switch > i { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; gap: 10px; font-size: 12px; white-space: nowrap; }
    body[data-mtown] #map-switch > i span { position: static; color: var(--ed-gold-light); font-size: 17px; font-weight: 400; }
    body[data-mtown] #hunt-ctl { position: absolute; z-index: 3; bottom: 30px; left: 36px; right: 36px; justify-content: space-between; padding: 0; }
    body[data-mtown] #hunt-ctl-state { color: #d5e1d8; font-size: 12px; }
    body[data-mtown] #hunt-ctl-btn.pri { min-width: 190px; min-height: 51px; font-size: 13px; }
    body[data-mtown] #map-scene-band,
    body[data-mtown] #town-npc-container { display: none; }
    body[data-mtown] #town-view { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    body[data-mtown] #town-view.sheet { position: absolute; pointer-events: auto; }
    body[data-mtown] #town-view.sheet #town-scrim { background: rgba(3,8,9,.68); }
    body[data-mtown] #town-interaction-container { max-height: calc(100% - 64px); }
    body[data-mtown] #col-right { grid-column: 3; grid-row: 2; width: auto !important; min-width: 0; }
    body[data-mtown][data-mpage="adv"] #col-right { display: none; }
    body[data-mtown][data-mpage="set"] #col-left { grid-column: 1 / -1; display: grid; grid-template-columns: 263px minmax(0, 1fr); gap: 0; }
    body[data-mtown][data-mpage="set"] #status-panel { min-width: 0; border-right: 1px solid var(--ed-line); }
    body[data-mtown][data-mpage="set"] #panel-auto { display: flex; min-width: 0; min-height: 0; border: 0; }
    body[data-mtown][data-mpage="set"] #col-center,
    body[data-mtown][data-mpage="set"] #col-right { display: none; }
    body[data-mtown] #town-directory { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; min-height: 0; padding: 31px 24px 24px; border-left: 1px solid var(--ed-line); background: var(--ed-surface); }
    body[data-mtown]:not([data-mpage="adv"]) #town-directory { display: none; }
    #town-directory .town-eyebrow { color: var(--ed-gold-light); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
    #town-directory h2 { margin: 10px 0 6px; color: var(--ed-text); font-size: 25px; font-weight: 700; letter-spacing: .07em; }
    #town-directory > p { margin: 0 0 23px; color: var(--ed-muted); font-size: 11px; line-height: 1.6; }
    .town-directory-head { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line); color: var(--ed-gold-light); font-size: 11px; }
    .town-directory-head span { color: var(--ed-quiet); font-size: 10px; }
    #town-directory-list { flex: 1; min-height: 0; overflow-y: auto; }
    .town-directory-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 87px; padding: 0 20px 0 0; border: 0; border-bottom: 1px solid var(--ed-line-soft); background: transparent; color: var(--ed-text); text-align: left; cursor: pointer; }
    .town-directory-row:hover { background: #1c292d; }
    .town-directory-mark { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border: 1px solid #5c5848; background: #252921; color: var(--ed-gold-light); font-size: 15px; }
    .town-directory-copy { display: block; min-width: 0; }
    .town-directory-copy strong { display: block; font-size: 14px; }
    .town-directory-copy small { display: block; margin-top: 4px; color: var(--ed-muted); font-size: 11px; }
    .town-directory-arrow { margin-left: auto; color: var(--ed-quiet); font-size: 18px; }
    .town-directory-foot { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--ed-line); }
    .town-directory-foot strong { color: var(--ed-gold-light); font-size: 11px; }
    .town-directory-foot p { margin: 8px 0 0; color: var(--ed-muted); font-size: 11px; line-height: 1.7; }
}

@media (min-width: 768px) and (max-width: 1080px) {
    body[data-mtown] #game-screen { grid-template-columns: 205px minmax(0, 1fr) 278px; }
    body[data-mtown] #mobile-nav::before { margin-right: 20px; }
    body[data-mtown] #mobile-nav button { min-width: 52px; padding: 0 8px; }
    body[data-mtown] #col-left #st-main { padding: 22px 14px 0; }
    body[data-mtown] #col-left #st-buffs { padding: 14px !important; }
    body[data-mtown] #st-avatar { width: 88px; height: 88px; }
    body[data-mtown] #st-head .nums .g b { font-size: 21px; }
    body[data-mtown][data-mpage="set"] #col-left { grid-template-columns: 205px minmax(0, 1fr); }
    body[data-mtown] #st-buffs .bi,
    body[data-mtown] #st-buffs .town-pet-chip { width: 32px; height: 32px; flex-basis: 32px; }
    body[data-mtown] #st-buffs .town-pet-chip img { width: 28px; height: 28px; }
}

/* 選角頁：空角色與已有角色共用同一個檔案式版面。 */
#char-art { display: none; }
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) {
    width: min(690px, calc(100vw - 32px));
    max-width: 690px !important;
    height: min(587px, calc(var(--app-h, 100dvh) - 32px));
    padding: 0;
    gap: 0;
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--ed-line);
}
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) > div:first-child,
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #btn-new { display: none !important; }
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #char-art {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    position: relative;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid var(--ed-line);
    background: var(--ed-field);
}
#char-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(.65) brightness(.75); }
#char-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 15, 17, .12) 32%, rgba(7, 15, 17, .25) 56%, #112026 89%); pointer-events: none; }
.char-art-copy { position: relative; z-index: 1; align-self: end; width: 100%; margin: 0 23px 22px; padding-top: 13px; border-top: 1px solid rgba(227, 204, 160, .55); text-align: left; }
.char-art-copy span { display: block; color: #d8d3bc; font-size: 10px; letter-spacing: .16em; }
.char-art-copy strong { display: block; margin-top: 8px; color: var(--ed-text); font-size: 16px; letter-spacing: .07em; }
.char-art-copy small { display: block; margin-top: 7px; color: #bdc8c5; font-size: 11px; letter-spacing: .04em; }
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #main-menu {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 36px 32px 25px;
    overflow: hidden;
}
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #char-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    overflow-y: auto;
    text-align: left;
}
.char-page-kicker { color: #d3b780; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
#creation-screen .char-page-intro h2 { margin: 12px 0 7px; color: var(--ed-text); font-size: 23px; line-height: 1.4; letter-spacing: .07em; }
.char-page-intro p { margin: 0; color: #b4bfbd; font-size: 12px; }
.char-section-title { margin-top: 40px; padding-bottom: 9px; border-bottom: 1px solid var(--ed-line); color: #d4b985; font-size: 10px; letter-spacing: .2em; }
#char-list { display: flex; flex-direction: column; gap: 0; min-height: 0; overflow-y: auto; }
#char-list.char-list-empty { flex: 0 0 200px; align-items: flex-start; padding-top: 27px; overflow: visible; }
.char-empty-mark { display: grid; place-items: center; width: 34px; height: 34px; margin: 4px 0 18px 5px; border: 1px solid #897d5e; color: #d2bd91; font-size: 22px; transform: rotate(45deg); }
.char-empty-mark span { transform: rotate(-45deg); }
.char-list-empty strong { color: var(--ed-text); font-size: 21px; letter-spacing: .08em; }
.char-list-empty p { max-width: 330px; margin: 7px 0 0; color: var(--ed-muted); font-size: 12px; line-height: 1.65; }
.char-create-primary { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 100%; min-height: 44px; border: 0; background: var(--ed-gold); color: #111717; font-size: 13px; font-weight: 700; letter-spacing: .07em; cursor: pointer; }
.char-create-primary span { margin-left: 14px; font-size: 21px; line-height: 1; }
.char-create-primary:hover { background: #d2ba8b; }
.char-slots { padding-top: 12px; color: var(--ed-muted); font-size: 11px; }
#char-list .cc-row { position: relative; display: block; border-bottom: 1px solid var(--ed-line-soft); }
#char-list .charcard { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-height: 84px; padding: 17px 0 13px 64px; border: 0; border-radius: 0; background: transparent; color: var(--ed-text); text-align: left; cursor: pointer; }
#char-list .charcard:hover { background: rgba(189, 163, 116, .06); }
#char-list .charcard.on { background: transparent; border: 0; box-shadow: none; }
#char-list .cc-row:first-child .charcard { min-height: 171px; padding-top: 20px; }
#char-list .cc-portrait { position: absolute; top: 16px; left: 0; display: block; width: 52px; height: 52px; overflow: hidden; border: 1px solid var(--ed-line); background: var(--ed-field); pointer-events: none; }
#char-list .cc-row:first-child .cc-portrait { top: 20px; }
#char-list .cc-portrait img { position: absolute; width: 260%; height: 260%; max-width: none; object-fit: cover; }
#char-list .cc-portrait-fallback { display: grid; place-items: center; color: var(--ed-muted); font-size: 20px; font-family: Georgia, serif; }
#char-list .cc-name { max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 700; letter-spacing: .06em; }
#char-list .cc-row:first-child .cc-name { font-size: 23px; }
#char-list .cc-sub { margin-top: 9px; color: #c4cfcc; font-size: 12px; }
#char-list .cc-when { align-self: flex-start; margin: 7px 0 0; color: var(--ed-muted); font-size: 11px; }
#char-list .cc-enter { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: calc(100% + 64px); min-height: 44px; margin-top: 18px; margin-left: -64px; background: var(--ed-gold); color: #111717; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
#char-list .cc-enter span { margin-left: 12px; font-size: 20px; }
#char-list .cc-row:not(:first-child) .cc-enter { display: none; }
#char-list .cc-del { position: absolute; top: 12px; right: 0; width: 44px; min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--ed-quiet); }
#char-list .cc-del:hover { color: #e6a59d; background: rgba(181, 109, 97, .1); }
#char-list .charcard.new { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 61px; margin-right: 0; padding: 16px 0; border-bottom: 1px solid var(--ed-line); color: var(--ed-text); }
#char-list .charcard.new .cc-name { font-size: 12px; }
#char-list .charcard.new .cc-sub { margin: 0; align-self: center; font-size: 11px; }
#char-list .cc-full { padding: 16px 0; color: var(--ed-muted); font-size: 12px; text-align: left; }
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #account-box { flex: 0 0 auto; width: 100%; max-width: none; margin: 14px 0 0; padding: 15px 0 0; border-top: 1px solid var(--ed-line); text-align: left; }
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #acc-msg:empty { display: none; }
.entry-account { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; text-align: left; }
.entry-account strong { color: var(--ed-text); font-size: 12px; }
.entry-account small { display: block; margin-top: 4px; color: var(--ed-muted); font-size: 11px; }
#creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) .entry-account .m-act { min-width: 44px; min-height: 44px; padding: 0 5px; border: 0; background: transparent; color: var(--ed-gold-light); font-size: 11px; }

@media (max-width: 700px) {
    #creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) {
        width: 100%;
        max-width: 500px !important;
        height: min(761px, calc(var(--app-h, 100dvh) - 32px));
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 169px minmax(0, 1fr);
    }
    #creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #char-art { grid-column: 1; grid-row: 1; border-right: 0; border-bottom: 1px solid var(--ed-line); }
    #char-art img { object-position: center 40%; }
    #char-art::after { background: linear-gradient(180deg, transparent 20%, rgba(7, 15, 17, .2) 50%, rgba(7, 15, 17, .86)); }
    .char-art-copy { margin: 0 22px 14px; padding-top: 9px; }
    .char-art-copy span { font-size: 9px; }
    .char-art-copy strong { margin-top: 5px; font-size: 14px; }
    .char-art-copy small { display: none; }
    #creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #main-menu { grid-column: 1; grid-row: 2; padding: 23px 22px 23px; }
    .char-page-kicker { font-size: 10px; }
    #creation-screen .char-page-intro h2 { margin: 8px 0 5px; font-size: 23px; }
    .char-section-title { margin-top: 29px; padding-bottom: 8px; }
    #char-list.char-list-empty { flex-basis: 184px; padding-top: 21px; }
    .char-empty-mark { width: 29px; height: 29px; margin: 2px 0 16px 5px; font-size: 19px; }
    .char-list-empty strong { font-size: 19px; }
    .char-create-primary { min-height: 48px; }
    .char-slots { padding-top: 10px; }
    #creation-screen:has(#main-menu:not(.hidden) #char-box:not(.hidden)) #account-box { margin-top: 12px; padding-top: 14px; }
}

@media (max-width: 540px) {
    /* Retain the existing edge-to-edge phone layout. */
    #col-left > .panel,
    #col-center > .panel,
    #col-right > .panel,
    #col-right > .panel:last-child {
        border-left-width: 0;
        border-right-width: 0;
    }
}

/* Character creation: portrait, choice and allocation share one editorial sheet. */
#creation-screen:has(#creation-panel:not(.hidden)) {
    width: min(1100px, calc(100vw - 32px));
    max-width: 1100px !important;
    max-height: calc(var(--app-h, 100dvh) - 32px);
    padding: 0;
    gap: 0;
    background: transparent !important;
    border: 0;
    overflow-y: auto;
}
#creation-screen:has(#creation-panel:not(.hidden)) > div:first-child { display: none; }
#creation-panel.hidden { display: none; }
#creation-panel:not(.hidden) { display: block; width: 100%; font-size: 12px; }
.create-masthead { padding: 0 0 34px 1px; color: var(--ed-text); font-size: 13px; font-weight: 700; letter-spacing: .15em; }
.create-masthead span { margin-left: 18px; color: var(--ed-muted); font-size: 11px; font-weight: 400; letter-spacing: .12em; }
.create-layout { display: grid; grid-template-columns: 31% 40% 29%; min-height: 690px; border: 1px solid var(--ed-line); background: var(--ed-surface); }
#create-portrait {
    position: relative; display: block; width: auto; height: auto; min-width: 0; padding: 0; aspect-ratio: auto; align-self: stretch;
    overflow: hidden; background: #0b1113 !important; border: 0 !important;
    border-right: 1px solid var(--ed-line) !important;
}
#class-preview-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.72) brightness(.84); }
#create-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 52%, rgba(7,13,15,.18) 65%, #101b1e 100%); pointer-events: none; }
.create-portrait-copy { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px; padding-top: 14px; border-top: 1px solid var(--ed-gold); }
.create-kicker { display: block; color: var(--ed-gold-light); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.create-portrait-copy strong { display: block; margin: 8px 0 4px; color: var(--ed-text); font-size: 20px; letter-spacing: .07em; }
.create-portrait-copy small { color: #bdc8c5; font-size: 11px; }
#create-classbox { display: block; width: auto; height: auto; min-width: 0; padding: 30px 25px 24px; overflow: visible; background: var(--ed-surface) !important; border: 0 !important; }
#creation-screen .create-title { margin: 10px 0 4px; color: var(--ed-text); font-size: 25px; font-weight: 700; line-height: 1.3; letter-spacing: .09em; }
.create-subtitle { margin: 0; color: var(--ed-muted); font-size: 12px; }
#creation-screen .create-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 25px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ed-line); color: var(--ed-gold-light); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.create-section-title small { color: var(--ed-quiet); font-size: 10px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.create-class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#create-classbox .create-class-grid .btn { min-height: 44px; padding: 5px 8px; background: #19272b; border: 1px solid var(--ed-line); color: #dce4df; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
#create-classbox .create-class-grid .btn:hover:not(.active) { background: #223136; }
#create-classbox .create-class-grid .btn.active { background: #252d29; border-color: var(--ed-gold); color: var(--ed-gold-light); box-shadow: inset 0 0 0 1px rgba(189,163,116,.22); }
#class-desc { max-height: 82px; margin-top: 14px; padding-top: 12px; overflow-y: auto; border-top: 1px solid var(--ed-line-soft); color: #b7c3bf; font-size: 11px; line-height: 1.65; }
.create-name-group { margin-top: 18px; }
#creation-screen .create-name-group label { display: block; margin-bottom: 7px; color: var(--ed-gold-light); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.create-name-group label span { color: var(--ed-quiet); font-weight: 400; letter-spacing: 0; }
#create-name { display: block; width: 100%; min-height: 44px; padding: 0 13px; font-size: 12px; }
#create-name:focus { outline: 1px solid var(--ed-gold); outline-offset: 0; }
#create-name-err { min-height: 16px; margin-top: 4px; color: #e3a8a0; font-size: 11px; }
#stat-allocation { display: flex; flex-direction: column; min-width: 0; height: auto; padding: 30px 24px 24px; background: #121c20 !important; border: 0 !important; border-left: 1px solid var(--ed-line) !important; }
#stat-allocation .create-section-title { margin-top: 48px; }
.create-remaining { color: #d9c08d; font-size: 11px; white-space: nowrap; }
.create-remaining strong { margin-left: 3px; font-size: 19px; }
.create-stat-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 38px 44px; align-items: center; gap: 8px; min-height: 50px; border-bottom: 1px solid rgba(69,83,89,.38); color: #c6d3cc; font-size: 12px; }
.create-stat-row > strong { color: var(--ed-text); font-size: 15px; text-align: center; }
.create-stat-row button { width: 44px; min-height: 44px; border: 1px solid var(--ed-line); background: #1c2b2f; color: var(--ed-text); font-size: 17px; }
.create-stat-row button:hover { background: #2b3c40; border-color: var(--ed-gold); }
#create-block-why { margin-top: 23px; color: var(--ed-gold-light); font-size: 11px; line-height: 1.6; white-space: pre-line; }
.create-actions { display: flex; gap: 9px; margin-top: auto; padding-top: 18px; }
.create-actions button { min-height: 44px; padding: 0 12px; border: 1px solid var(--ed-line); background: transparent; color: var(--ed-muted); font-size: 12px; font-weight: 700; }
.create-actions button:first-child { min-width: 73px; }
.create-actions button:first-child:hover { color: var(--ed-text); border-color: var(--ed-gold); }
#btn-start { flex: 1; background: var(--ed-gold); border-color: var(--ed-gold); color: #101719; }
#btn-start:disabled { background: #484334; border-color: #73664c; color: #c0b291; cursor: not-allowed; }
#btn-start:not(:disabled):hover { background: var(--ed-gold-light); }

@media (max-width: 700px) {
    #creation-screen:has(#creation-panel:not(.hidden)) { width: 100%; max-width: 500px !important; max-height: var(--app-h, 100dvh); }
    .create-masthead { padding: 0 18px 19px; font-size: 11px; }
    .create-masthead span { margin-left: 10px; font-size: 10px; }
    .create-layout { display: flex; flex-direction: column; min-height: 0; border-left: 0; border-right: 0; }
    #create-portrait { width: 100%; height: 212px; min-height: 212px; aspect-ratio: auto; border-right: 0 !important; border-bottom: 1px solid var(--ed-line) !important; }
    #class-preview-img { object-position: center top; }
    #create-portrait::after { background: linear-gradient(transparent 33%, rgba(7,13,15,.13) 52%, #101b1e 100%); }
    .create-portrait-copy { left: 22px; right: 22px; bottom: 14px; padding-top: 9px; }
    .create-portrait-copy strong { margin: 5px 0 0; font-size: 16px; }
    .create-portrait-copy small { display: none; }
    #create-classbox { width: 100%; padding: 22px 22px 24px; }
    #creation-screen .create-title { margin: 8px 0 4px; font-size: 24px; }
    #creation-screen .create-section-title { margin-top: 23px; }
    #create-classbox .create-class-grid .btn { min-height: 46px; }
    #class-desc { max-height: 75px; margin-top: 13px; padding-top: 11px; }
    .create-name-group { margin-top: 17px; }
    #create-name { min-height: 46px; }
    #stat-allocation { width: 100%; padding: 22px 22px 24px; border-left: 0 !important; border-top: 1px solid var(--ed-line) !important; }
    #stat-allocation .create-section-title { margin-top: 0; }
    .create-stat-row { grid-template-columns: minmax(0, 1fr) 44px 38px 44px; min-height: 50px; }
    .create-stat-row button { width: 44px; min-height: 44px; }
    #create-block-why { margin-top: 16px; }
    .create-actions { margin-top: 0; }
    .create-actions button { min-height: 48px; }
    .create-actions button:first-child { min-width: 92px; }
}

/* Screen visibility must win over the editorial grid layouts in every state. */
#creation-screen.hidden,
body[data-mtown] #game-screen.hidden { display: none !important; }

/* Inventory: the item grid owns the center; all actions stay in the detail rail. */
#bag-intro[hidden], #bag-detail[hidden], #equip-compare-scrim[hidden], #equip-compare-dialog[hidden] { display: none !important; }
.bag-eyebrow, #bag-intro > span { color: var(--ed-gold-light); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
#bag-intro { padding: 28px 34px 18px; border-bottom: 1px solid var(--ed-line); background: var(--ed-surface-raised); }
#bag-intro > div { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
#bag-intro h2 { margin: 7px 0 3px; font-size: 29px; line-height: 1.2; letter-spacing: .07em; }
#bag-intro small { color: var(--ed-gold-light); font-size: 11px; }
#bag-intro p { margin: 3px 0 0; color: var(--ed-muted); font-size: 11px; }
#bag-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 25px 20px 18px; overflow: hidden; border-left: 1px solid var(--ed-line); background: var(--ed-surface); }
#bag-detail h3 { margin: 7px 0 16px; color: var(--ed-text); font-size: 23px; line-height: 1.2; cursor: pointer; }
.bag-item-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ed-line); }
.bag-item-head img { display: block; width: 70px; height: 70px; flex: 0 0 70px; object-fit: contain; border: 1px solid var(--ed-line); background: #233034; }
.bag-item-head strong { display: block; font-size: 16px; }
.bag-item-head small { display: block; margin-top: 5px; color: var(--ed-muted); font-size: 10px; }
.bag-item-head em { display: block; margin-top: 8px; color: var(--ed-gold-light); font-size: 10px; font-style: normal; }
.bag-stat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px 0 5px; }
.bag-stat { min-height: 50px; padding: 7px 8px; border: 1px solid var(--ed-line-soft); }
.bag-stat span { display: block; color: var(--ed-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag-stat b { display: block; margin-top: 4px; color: var(--ed-text); font-size: 13px; }
.bag-action-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #8d805f #182326; }
.bag-action-group { margin-top: 13px; }
.bag-action-group h4 { margin: 0 0 8px; color: var(--ed-gold-light); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.bag-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bag-pet-note { grid-column: 1 / -1; margin: 0; padding: 11px; color: var(--ed-muted); font-size: 11px; }
#bag-detail .m-act { min-height: 43px; padding: 5px 7px; border-color: #526164; background: #1a282b; color: var(--ed-text); font-size: 11px; line-height: 1.25; }
#bag-detail .m-act.span2 { grid-column: 1 / -1; }
#bag-detail .m-act.pri { border-color: var(--ed-gold); background: var(--ed-gold); color: #132023; }
#bag-detail .m-act.warn { border-color: #775b58; color: #e4b4aa; }
#bag-detail .m-act.mag { border-color: #706b7e; background: #2a2833; color: #e5ddec; }
#bag-detail .m-act:disabled { border-color: #39484a; background: #172124; color: #7d8a85; cursor: default; }
.bag-action-note { margin: 0; padding-top: 12px; border-top: 1px solid var(--ed-line); color: var(--ed-muted); font-size: 10px; line-height: 1.5; }
/* 🔮 2026-10-11 詞綴效果那幾行（桌面物品資訊面板）：一行一列，顏色沿用詞綴自己的 class（c-attr-*／text-*） */
.bag-affix-list { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 10px; font-size: 11.5px; line-height: 1.5; }
.bag-affix { padding: 5px 8px; border: 1px solid var(--ed-line-soft); background: var(--ed-field); }
.bag-empty { margin-top: 20px; color: var(--ed-muted); }
.itile.bag-selected { border-color: var(--ed-gold) !important; box-shadow: inset 0 0 0 1px var(--ed-gold); background: #29302c; }

@media (min-width: 768px) {
    body[data-mtown][data-mpage="bag"] #game-screen { grid-template-columns: 263px minmax(0, 1fr) 350px; }
    body[data-mtown][data-mpage="bag"] #col-center { display: none !important; }
    body[data-mtown][data-mpage="bag"] #col-right { grid-column: 2 / 4; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) 350px; grid-template-rows: auto 55px minmax(0, 1fr); width: auto !important; min-height: 0; gap: 0; }
    body[data-mtown][data-mpage="bag"] #bag-intro { grid-column: 1; grid-row: 1; }
    body[data-mtown][data-mpage="bag"] #tabbar { grid-column: 1; grid-row: 2; }
    body[data-mtown][data-mpage="bag"] #col-right > .panel:last-child { grid-column: 1; grid-row: 3; min-height: 0; border: 0; background: var(--ed-surface-raised); }
    body[data-mtown][data-mpage="bag"] #bag-detail { grid-column: 2; grid-row: 1 / 4; }
    body[data-mtown][data-mpage="bag"] #tab-all:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-items:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-weapons:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-armors:not(.hidden) { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding: 18px 34px; }
}
@media (min-width: 768px) and (max-width: 1080px) {
    body[data-mtown][data-mpage="bag"] #game-screen { grid-template-columns: 205px minmax(0, 1fr) 278px; }
    body[data-mtown][data-mpage="bag"] #col-right { grid-template-columns: minmax(0, 1fr) 278px; }
    body[data-mtown][data-mpage="bag"] #tab-all:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-items:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-weapons:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-armors:not(.hidden) { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 14px 18px; gap: 6px; }
    #bag-detail { padding: 20px 14px 14px; }
}
@media (min-width: 768px) and (max-width: 840px) {
    body[data-mtown][data-mpage="bag"] #game-screen { grid-template-columns: 205px minmax(0, 1fr) 260px; }
    body[data-mtown][data-mpage="bag"] #col-right { grid-template-columns: minmax(0, 1fr) 260px; }
    body[data-mtown][data-mpage="bag"] #tab-all:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-items:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-weapons:not(.hidden),
    body[data-mtown][data-mpage="bag"] #tab-armors:not(.hidden) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    body[data-mpage="bag"] #bag-intro { padding: 13px 18px 11px; border: 0; background: var(--ed-surface); }
    body[data-mpage="bag"] #bag-intro h2 { font-size: 25px; }
    body[data-mpage="bag"] #bag-intro p { font-size: 10px; }
    #bag-detail { display: none !important; }
}

/* A focused same-slot comparison, shared by desktop and phone. */
#equip-compare-scrim { position: fixed; z-index: 60; inset: 0; background: rgba(3, 7, 8, .76); }
#equip-compare-dialog { position: fixed; z-index: 61; top: 50%; left: 50%; width: min(760px, calc(100vw - 28px)); max-height: min(720px, calc(var(--app-h, 100dvh) - 28px)); transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow-y: auto; border: 1px solid #718078; border-top: 3px solid var(--ed-gold); background: var(--ed-surface-raised); box-shadow: 0 28px 90px #000b; }
.ec-head { display: flex; justify-content: space-between; padding: 23px 30px 18px; border-bottom: 1px solid var(--ed-line); }
.ec-head h2 { margin: 6px 0 4px; font-size: 27px; }
.ec-head p { margin: 0; color: var(--ed-muted); font-size: 11px; }
.ec-close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ed-muted); font-size: 26px; }
.ec-gear { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 21px 30px; }
.ec-gear-card { min-width: 0; padding: 16px; border: 1px solid var(--ed-line); background: #1c282a; }
.ec-gear-card.next { border-color: var(--ed-gold); background: #242b29; }
.ec-gear-main { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.ec-gear-main img { width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain; border: 1px solid var(--ed-line); background: #273438; }
.ec-gear-main strong { display: block; font-size: 17px; }
.ec-gear-main small { display: block; margin-top: 5px; color: var(--ed-muted); font-size: 11px; }
.ec-stats { padding: 0 30px; }
.ec-row { display: grid; grid-template-columns: 1.15fr .9fr .9fr .65fr; align-items: center; min-height: 48px; border-top: 1px solid var(--ed-line-soft); }
.ec-row:first-of-type { margin-top: 8px; border-top-color: var(--ed-line); }
.ec-row span { color: var(--ed-muted); font-size: 12px; }
.ec-row b { font-size: 14px; }
.ec-row em { justify-self: end; color: var(--ed-muted); font-size: 11px; font-style: normal; }
.ec-row em.up { color: #a9d8ae; }.ec-row em.down { color: #e5a9a1; }
.ec-impact { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 30px 0; padding: 14px 18px; border-left: 3px solid #a9d8ae; background: #26362f; }
.ec-impact strong { display: block; margin-top: 5px; font-size: 15px; }
.ec-impact > b { white-space: nowrap; font-size: 21px; }
.ec-impact i { margin: 0 8px; color: var(--ed-gold-light); font-style: normal; }
.ec-note { margin: 0; padding: 12px 30px; color: var(--ed-muted); font-size: 10px; line-height: 1.5; }
.ec-actions { display: flex; gap: 9px; margin-top: auto; padding: 14px 30px 20px; border-top: 1px solid var(--ed-line); }
.ec-actions .bag-action { flex: 1; min-height: 46px; border: 1px solid var(--ed-gold); background: transparent; color: var(--ed-gold-light); }
.ec-actions .bag-action.primary { flex: 1.4; background: var(--ed-gold); color: #132023; font-weight: 700; }
.ec-actions .bag-action:disabled { opacity: .45; cursor: default; }
@media (max-width: 767px) {
    #equip-compare-dialog { top: 0; left: 0; width: 100%; height: calc(var(--app-h, 100dvh) - var(--vp-cut, 0px)); max-height: none; transform: none; border-left: 0; border-right: 0; }
    .ec-head { padding: 20px 18px 16px; }
    .ec-head h2 { font-size: 24px; }
    .ec-gear { gap: 8px; padding: 18px; }
    .ec-gear-card { padding: 11px; }
    .ec-gear-main { flex-direction: column; align-items: start; gap: 8px; }
    .ec-gear-main img { width: 60px; height: 60px; flex-basis: 60px; }
    .ec-gear-main strong { font-size: 14px; }
    .ec-stats { padding: 0 18px; }
    .ec-row { min-height: 54px; grid-template-columns: 1.1fr .85fr .85fr .6fr; }
    .ec-row span, .ec-row em { font-size: 10px; }
    .ec-row b { font-size: 12px; }
    .ec-impact { display: block; margin: 17px 18px 0; }
    .ec-impact > b { display: block; margin-top: 10px; }
    .ec-note { padding: 12px 18px; }
    .ec-actions { position: sticky; bottom: 0; padding: 12px 18px 22px; background: var(--ed-surface-raised); }
}

/* Map picker keeps the existing filters, favorites and live world data. */
body[data-msheet="map"] #m-scrim { background: rgba(3, 8, 9, .7); }
#m-mapsheet { border-color: #718078; border-top: 3px solid var(--ed-gold); background: var(--ed-surface-raised); }
#m-mapsheet-head { align-items: start; padding: 22px 26px 19px; border-color: var(--ed-line); color: var(--ed-text); font-size: 25px; letter-spacing: .05em; }
#m-mapsheet-head em { display: block; margin-bottom: 6px; color: var(--ed-gold-light); font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .14em; }
#m-mapsheet-head small { margin-top: 5px; color: var(--ed-muted); font-size: 11px; letter-spacing: 0; }
#m-mapsheet-head button { color: var(--ed-muted); }
#m-mapsheet-body { background: var(--ed-surface-raised); }
#m-mapsheet-body .mchips { padding: 10px 18px; gap: 6px; background: var(--ed-surface-raised); border-color: var(--ed-line); }
#m-mapsheet-body .mchips .seg { min-height: 36px; border: 1px solid var(--ed-line); background: transparent; color: var(--ed-muted); font-size: 11px; }
#m-mapsheet-body .mchips .seg.on,
#m-mapsheet-body .mchips .seg.active { border-color: var(--ed-gold); background: #282e29; color: var(--ed-gold-light); }
#m-mapsheet-body .mchips .msub { border-color: var(--ed-line-soft); }
#m-mapsheet-body .gh { padding: 13px 22px 8px; color: var(--ed-gold-light); background: var(--ed-surface-raised); border-bottom: 1px solid var(--ed-line); }
#m-mapsheet-body .mrow-wrap { border-color: var(--ed-line-soft); }
#m-mapsheet-body .mrow { min-height: 58px; padding: 9px 22px; background: var(--ed-surface-raised); color: var(--ed-text); }
#m-mapsheet-body .mrow:hover { background: #223035; }
#m-mapsheet-body .mrow.on { background: #26302e; box-shadow: inset 3px 0 var(--ed-gold); }
#m-mapsheet-body .mrow .lv { color: var(--ed-muted); }
#m-mapsheet-body .mrow .cur { background: #bda374; color: #142124; border-radius: 0; }
#m-mapsheet-body .mfav { min-height: 58px; border-color: var(--ed-line-soft); color: var(--ed-muted); }
#m-mapsheet-body .mfav.on { color: var(--ed-gold-light); }
/* 🪟 2026-10-06（玩家：「後面的框框背景是否可移除」）：製作確認／技能說明／討伐結果這幾個抽屜在寬畫面上，暗幕原本只蓋中間那 500px
   （`styles.css` 段 12 的 `left/right: max(0px, calc(50% - 250px))` —— 那是版面還收在 500px 一欄時的規則），新版面下變成一條浮在中間的暗色直條。
   寬畫面改成：暗幕**鋪滿整個視窗、不上色** —— 看不到那條直條，點抽屜外面任何地方照樣關閉（onclick 還在）。
   ⚠️ 地圖（`map`）與掛機收穫（`away`）有自己的全幕暗幕，不在這條裡；手機寬度照舊（暗幕本來就是整個畫面）。 */
@media (min-width: 768px) {
    body[data-msheet]:not([data-msheet="0"]):not([data-msheet="map"]):not([data-msheet="away"]) #m-scrim { left: 0; right: 0; background: transparent; }
    /* 🖥️ 2026-10-08（玩家：「桌面版用賦予祝福卷會跳出裝備彈窗，後面有黑色的背景蓋住」）：物品抽屜有自己的暗幕 `#modal-scrim`，
       上面那條沒管到它 —— 同一個問題（`styles.css` 段 18 的 `left/right: max(0px, calc(50% - 250px))`）、同一個修法。
       桌面版從物品資訊面板點名稱刻意打開抽屜時，看到的就不再是一條浮在中間的暗色直條；點抽屜外面照樣關閉。 */
    #modal-scrim { left: 0; right: 0; background: transparent; }
}
@media (min-width: 768px) {
    body[data-msheet="map"] #m-scrim { display: block; inset: 0; width: auto; }
    body[data-mtown] #m-mapsheet { top: 50%; left: 50%; right: auto; bottom: auto; width: 630px; height: min(744px, calc(var(--app-h, 100dvh) - 28px)); max-height: none; padding-bottom: 0; border: 1px solid #718078; border-top: 3px solid var(--ed-gold); box-shadow: 0 30px 90px #000b; transition: none; }
    body[data-mtown][data-msheet="map"] #m-mapsheet { transform: translate(-50%, -50%); }
    body[data-mtown] #m-mapsheet-grip { display: none; }
}
@media (max-width: 767px) {
    body[data-mtown] #m-mapsheet { left: 12px; right: 12px; bottom: max(12px, var(--vp-cut, 0px)); max-height: calc(var(--app-h, 100dvh) - 70px - var(--vp-cut, 0px)); border: 1px solid #718078; border-top: 3px solid var(--ed-gold); border-radius: 0; }
    body[data-mtown] #m-mapsheet-grip { display: none; }
    body[data-mtown] #m-mapsheet-head { padding: 18px 18px 15px; font-size: 22px; }
    body[data-mtown] #m-mapsheet-body .mchips { padding: 8px 12px; }
    body[data-mtown] #m-mapsheet-body .gh { padding: 11px 18px 7px; }
    body[data-mtown] #m-mapsheet-body .mrow { min-height: 58px; padding: 8px 18px; }
}