/* Character pages share one medium-width layout in town and while hunting.
   The full three-column views stay at 1200px; phones keep their existing layout. */
@media (min-width: 768px) and (max-width: 1199px) {
    body[data-mpage="char"] { padding: 0; }
    body[data-mpage="char"]:is([data-ability-view="1"], [data-skill-view="1"], [data-mastery-view="1"]) #game-screen {
        display: grid; grid-template-columns: 205px minmax(0, 1fr);
        grid-template-rows: 62px minmax(0, 1fr);
        width: 100%; max-width: 1199px !important;
        height: var(--app-h, 100dvh); margin: 0 auto; padding: 0; gap: 0; overflow: hidden;
    }
    body[data-mpage="char"] #mobile-nav {
        grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center;
        gap: 0; padding: 0 16px; border-bottom: 1px solid var(--ed-line);
        background: var(--ed-field);
    }
    body[data-mpage="char"] #mobile-nav::before {
        content: 'LINEAGE  /  IDLE ADVENTURE'; margin-right: auto;
        color: var(--ed-text); font-size: 11px; font-weight: 700;
        letter-spacing: .08em; white-space: pre;
    }
    body[data-mpage="char"] #mobile-nav button {
        align-self: stretch; min-width: 52px; padding: 0 8px;
        border: 0; border-bottom: 2px solid transparent;
        background: transparent; color: var(--ed-muted); font-size: 11px;
    }
    body[data-mpage="char"] #mobile-nav button .uic { display: none; }
    body[data-mpage="char"] #mobile-nav button[aria-current="page"] {
        border-bottom-color: var(--ed-gold); color: var(--ed-gold-light);
    }
    body[data-mpage="char"] #col-left {
        grid-column: 1; grid-row: 2; display: flex; flex-direction: column;
        width: auto !important; min-width: 0; min-height: 0; gap: 0;
        border-right: 1px solid var(--ed-line); background: var(--ed-surface);
    }
    body[data-mpage="char"] #panel-auto { display: none; }
    body[data-mpage="char"] #status-panel {
        display: flex; flex: 1; flex-direction: column; min-height: 0; border: 0;
    }
    body[data-mpage="char"] #st-main { display: block; padding: 22px 14px 0; }
    body[data-mpage="char"] #st-avatar {
        display: block; width: 88px; height: 88px; margin: 0 auto;
        border-width: 1px; border-radius: 0;
    }
    body[data-mpage="char"] #st-avatar img { width: 310%; height: 310%; }
    body[data-mpage="char"] #st-right { display: flex; flex-direction: column; gap: 0; }
    body[data-mpage="char"] #st-head,
    body[data-mpage="char"] #st-head .nums { display: contents; }
    body[data-mpage="char"] #st-head .who { order: 1; margin-top: 17px; }
    body[data-mpage="char"] #st-head .who > b { font-size: 18px; }
    body[data-mpage="char"] #st-head .nums .g {
        order: 2; display: block; margin-top: 22px; padding: 16px 0 17px;
        border-top: 1px solid var(--ed-line); border-bottom: 1px solid var(--ed-line);
        text-align: left;
    }
    body[data-mpage="char"] #st-head .nums .g .gold-label {
        display: block; color: var(--ed-quiet); font-size: 10px;
        font-weight: 700; letter-spacing: .14em;
    }
    body[data-mpage="char"] #st-head .nums .g .gold-value {
        display: flex; align-items: baseline; gap: 8px; margin-top: 10px; white-space: nowrap;
    }
    body[data-mpage="char"] #st-head .nums .g b {
        color: var(--ed-gold-light); font-size: 21px; line-height: 1.1;
        font-variant-numeric: tabular-nums;
    }
    body[data-mpage="char"] #st-head .nums .g em {
        display: inline; color: var(--ed-muted); font-size: 11px; font-style: normal;
    }
    body[data-mpage="char"] #st-bars {
        order: 3; display: flex; flex-direction: column; gap: 18px; margin-top: 23px;
    }
    body[data-mpage="char"] #st-bars > div {
        display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 0;
    }
    body[data-mpage="char"] #st-bars .lb {
        grid-column: 1; grid-row: 1; flex: none; color: var(--ed-text);
        font-size: 12px; text-align: left;
    }
    body[data-mpage="char"] #st-bars .bar-bg,
    body[data-mpage="char"] #st-bars .bar-bg.xp {
        grid-column: 1 / -1; grid-row: 2; height: 5px; overflow: visible;
    }
    body[data-mpage="char"] #st-bars .bar-text,
    body[data-mpage="char"] #st-bars .xp .bar-text {
        position: absolute; top: -27px; right: 0; left: auto; display: block;
        width: auto; color: var(--ed-muted); font-size: 11px;
        line-height: 1.3; text-align: right; text-shadow: none;
    }
    body[data-mpage="char"] #st-head .defense-grid {
        order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px; margin-top: 26px;
    }
    body[data-mpage="char"] #st-head .defense-stat {
        display: flex; justify-content: space-between; align-items: center;
        min-height: 45px; padding: 0 10px; border: 1px solid var(--ed-line);
        color: var(--ed-quiet); font-size: 11px;
    }
    body[data-mpage="char"] #st-head .defense-stat + .defense-stat::before { content: none; }
    body[data-mpage="char"] #st-head .defense-stat b { color: var(--ed-text); font-size: 15px; }
    body[data-mpage="char"] #st-buffs {
        margin-top: auto; padding: 14px !important;
    }
    body[data-mpage="char"] #st-buffs .town-status-row { display: block; }
    body[data-mpage="char"] #st-buffs .town-status-row + .town-status-row {
        margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ed-line-soft);
    }
    body[data-mpage="char"] #st-buffs .town-status-label {
        display: block; margin-bottom: 10px; font-size: 10px; letter-spacing: .1em;
    }
    body[data-mpage="char"] #st-buffs .bi-row { flex-wrap: wrap; overflow: visible; }
    body[data-mpage="char"] #st-buffs .bi,
    body[data-mpage="char"] #st-buffs .town-pet-chip {
        width: 32px; height: 32px; flex-basis: 32px;
    }
    body[data-mpage="char"] #st-buffs .town-pet-chip img { width: 28px; height: 28px; }

    body[data-mpage="char"]:is([data-ability-view="1"], [data-skill-view="1"], [data-mastery-view="1"]) #col-right {
        grid-column: 2; grid-row: 2; display: flex !important;
        flex-direction: column; width: auto !important; min-width: 0; min-height: 0;
        gap: 0; overflow-y: auto; overflow-x: hidden; background: #152123;
    }
    body[data-mpage="char"]:is([data-ability-view="1"], [data-skill-view="1"], [data-mastery-view="1"]) #tabbar {
        position: sticky; top: 0; z-index: 3; order: 0;
        display: flex; flex: 0 0 54px; width: 100%; min-width: 0;
        border-left: 0; border-bottom: 1px solid var(--ed-line);
    }
    body[data-mpage="char"] #tabbar button[data-mgroup="char"] {
        flex: 1; min-width: 0;
    }
    body[data-mpage="char"]:is([data-ability-view="1"], [data-skill-view="1"], [data-mastery-view="1"]) #col-right > .panel:last-child {
        order: 1; flex: 0 0 auto; width: 100%; height: auto;
        min-width: 0; min-height: 0; overflow: visible; border: 0; background: #152123;
    }

    body[data-mpage="char"][data-ability-view="1"] #tab-stats:not(.hidden) {
        display: flex; flex-direction: column; width: 100%; height: auto;
        min-height: 0; overflow: visible;
    }
    body[data-mpage="char"][data-ability-view="1"] .ability-main {
        flex: 0 0 auto; width: 100%; overflow: visible;
    }
    body[data-mpage="char"][data-ability-view="1"] .ability-detail {
        flex: 0 0 auto; width: 100%; padding: 0 28px 30px;
        border-left: 0; border-top: 1px solid var(--ed-line); overflow: visible;
    }
    body[data-mpage="char"][data-ability-view="1"] .ability-detail-head { padding-top: 22px; }
    body[data-mpage="char"][data-ability-view="1"] .ability-main-body {
        padding: 24px 28px 27px;
    }
    body[data-mpage="char"][data-ability-view="1"] .ability-hero { min-height: 132px; padding: 23px 28px; }
    body[data-mpage="char"][data-ability-view="1"] #tab-stats .ability-base-grid,
    body[data-mpage="char"][data-ability-view="1"] #tab-stats .ability-alloc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-mpage="char"][data-skill-view="1"] #tab-skill:not(.hidden) {
        height: auto; overflow: visible;
    }
    body[data-mpage="char"][data-skill-view="1"] #skill-detail:not([hidden]) {
        order: 2; display: block; flex: 0 0 auto; width: 100%; height: auto;
        overflow: visible; border-left: 0; border-top: 1px solid var(--ed-line);
    }
    body[data-mpage="char"][data-skill-view="1"] #tab-skill .m-skgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-mpage="char"][data-mastery-view="1"] #tab-mastery:not(.hidden) {
        height: auto; overflow: visible;
    }
    body[data-mpage="char"][data-mastery-view="1"] #tab-mastery .scroll-fill {
        flex: 0 0 auto; overflow: visible;
    }
    body[data-mpage="char"][data-mastery-view="1"] #mastery-detail:not([hidden]) {
        order: 2; display: block; flex: 0 0 auto; width: 100%; height: auto;
        overflow: visible; border-left: 0; border-top: 1px solid var(--ed-line);
    }
}

@media (min-width: 768px) and (max-width: 850px) {
    body[data-mpage="char"] #mobile-nav::before { content: 'LINEAGE'; }
    body[data-mpage="char"] #mobile-nav button { min-width: 48px; padding: 0 5px; }
    body[data-mpage="char"][data-ability-view="1"] #tab-stats .ability-base-grid,
    body[data-mpage="char"][data-ability-view="1"] #tab-stats .ability-alloc-grid {
        grid-template-columns: 1fr;
    }
}