/* 角色能力：左欄專注配點，右欄查閱即時計算後的完整戰鬥數值。 */
@media (min-width: 768px) {
    body[data-mpage="char"][data-ability-view="1"] #game-screen {
        grid-template-columns: 263px minmax(0, 1fr) 375px;
    }
    body[data-mpage="char"][data-ability-view="1"] #col-center { display: none !important; }
    body[data-mpage="char"][data-ability-view="1"] #col-right {
        grid-column: 2 / 4; grid-row: 2; display: grid !important;
        grid-template-columns: minmax(0, 1fr) 375px;
        grid-template-rows: 54px minmax(0, 1fr);
        width: auto !important; min-width: 0; min-height: 0; gap: 0;
    }
    body[data-mpage="char"][data-ability-view="1"] #tabbar {
        grid-column: 2; grid-row: 1; z-index: 2;
        min-width: 0; border-left: 1px solid var(--ed-line);
    }
    body[data-mpage="char"][data-ability-view="1"] #col-right > .panel:last-child {
        grid-column: 1 / 3; grid-row: 1 / 3;
        min-width: 0; min-height: 0; border: 0; background: #152123;
    }
    body[data-mpage="char"][data-ability-view="1"] #tab-stats:not(.hidden) {
        display: grid; grid-template-columns: minmax(0, 1fr) 375px;
        grid-template-rows: minmax(0, 1fr);
        overflow: hidden;
    }
    body[data-mpage="char"][data-ability-view="1"] .ability-main { overflow-y: auto; }
    body[data-mpage="char"][data-ability-view="1"] .ability-detail {
        padding-top: 54px; border-left: 1px solid var(--ed-line); overflow-y: auto;
    }
}

body[data-ability-view="1"] #tab-stats:not(.hidden) {
    width: 100%; height: 100%; padding: 0 !important; gap: 0 !important;
    background: #152123; color: var(--ed-text); font-size: 12px;
}
.ability-main, .ability-detail { min-width: 0; min-height: 0; scrollbar-width: thin; scrollbar-color: #53635d #152123; }
.ability-hero {
    position: relative; min-height: 165px; padding: 28px 34px;
    border-bottom: 1px solid var(--ed-line);
    background: linear-gradient(90deg,#172326 0%,#172326ed 48%,#17232670),
        url('../assets/background/background.png') center 46% / cover;
}
.ability-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 65px #0d171a9e; }
.ability-hero > * { position: relative; z-index: 1; }
.ability-hero > span, .ability-section-head > div > span, .ability-detail-head > span {
    color: var(--ed-gold-light); font-size: 10px; font-weight: 800; letter-spacing: .15em;
}
.ability-hero h2 { margin: 11px 0 6px; color: var(--ed-text); font-size: 29px; letter-spacing: .08em; }
.ability-hero p { margin: 0; color: #b6c7bb; font-size: 12px; }
.ability-hero > small {
    position: absolute; top: 30px; right: 34px; padding: 7px 10px;
    border: 1px solid #81745c; background: #222b29b8;
    color: #e2c995; font-size: 10px; font-weight: 700; letter-spacing: .07em;
}
.ability-main-body { padding: 27px 34px 24px; }
.ability-section-head {
    display: flex; align-items: end; justify-content: space-between; gap: 10px;
    padding-bottom: 15px; border-bottom: 1px solid var(--ed-line);
}
.ability-section-head h3 { margin: 6px 0 0; font-size: 19px; letter-spacing: .04em; }
.ability-section-head > small { color: var(--ed-muted); font-size: 10px; text-align: right; }
.ability-point-summary, #tab-stats .ability-bonus-summary {
    position: relative; min-height: 91px; margin: 17px 0 20px; padding: 18px 20px;
    border: 1px solid #887b5e; background: linear-gradient(110deg,#39372b,#252f2c 68%);
}
.ability-point-summary strong, #tab-stats .ability-bonus-summary strong {
    display: block; color: #f0d9a7; font-size: 29px; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.ability-point-summary strong small, #tab-stats .ability-bonus-summary strong small {
    margin-left: 5px; font-size: 13px; font-weight: 800;
}
.ability-point-summary p, #tab-stats .ability-bonus-help { display: block; margin: 8px 0 0; color: #b9c0b0; font-size: 11px; font-weight: 400; }
.ability-point-symbol {
    position: absolute; top: 18px; right: 20px; width: 45px; height: 45px;
    display: grid; place-items: center; border: 1px solid #8f7b54;
    color: #e0c78c; font-size: 24px;
}
#tab-stats:not(.ability-has-points) .ability-point-summary { border-color: #61776b; background: linear-gradient(110deg,#2d3a34,#25312f); }
#tab-stats:not(.ability-has-points) .ability-point-summary strong { color: #dbe8d9; }
#tab-stats:not(.ability-has-points) .ability-point-symbol { border-color: #64776b; color: #a9d4b2; }
#tab-stats .ability-concealed { display: none !important; }
#tab-stats .ability-base-grid, #tab-stats .ability-alloc-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
}
#tab-stats .ability-card, #tab-stats .ability-stat-row {
    display: grid; grid-template-columns: minmax(0,1fr) auto auto; grid-template-rows: auto auto;
    align-items: center; gap: 5px 8px; min-width: 0; min-height: 88px;
    padding: 13px 14px; border: 1px solid var(--ed-line); background: #1d292a;
}
#tab-stats .ability-card-name, #tab-stats .ability-stat-name {
    grid-column: 1; grid-row: 1; width: auto; font-size: 14px; font-weight: 800;
}
#tab-stats .ability-card-sub, #tab-stats .ability-stat-sub {
    grid-column: 1; grid-row: 2; color: var(--ed-quiet); font-size: 10px;
}
#tab-stats .ability-card-score, #tab-stats .ability-stat-score {
    grid-column: 2; grid-row: 1 / 3; width: auto; white-space: nowrap;
    color: #e6ece4; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
}
#tab-stats .ability-card-score { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; }
#tab-stats .ability-card-score small { color: #899a91; font-size: 11px; font-weight: 500; }
#tab-stats .ability-stat-score { font-size: 15px; }
#tab-stats .ability-stat-row > span:last-child {
    grid-column: 3; grid-row: 1 / 3; display: flex; gap: 4px;
}
#tab-stats .ability-stat-row button {
    width: 44px; height: 44px; padding: 0; border: 1px solid #9a8a69;
    border-radius: 0; background: #2b3430; color: #e7c989;
    font-size: 25px; line-height: 1; cursor: pointer;
}
#tab-stats .ability-stat-row button:disabled { border-color: #47514d; background: #202827; color: #77857e; cursor: default; }
#tab-stats .ability-str .ability-card-name, #tab-stats .ability-str .ability-stat-name { color: #e9b4af; }
#tab-stats .ability-dex .ability-card-name, #tab-stats .ability-dex .ability-stat-name { color: #b8e3c4; }
#tab-stats .ability-con .ability-card-name, #tab-stats .ability-con .ability-stat-name { color: #e6c092; }
#tab-stats .ability-int .ability-card-name, #tab-stats .ability-int .ability-stat-name { color: #b5d4f3; }
#tab-stats .ability-wis .ability-card-name, #tab-stats .ability-wis .ability-stat-name { color: #d3b9e7; }
#tab-stats .ability-cha .ability-card-name, #tab-stats .ability-cha .ability-stat-name { color: #e9bed7; }
#tab-stats .ability-bonus { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
#tab-stats .ability-bonus-summary { margin-top: 17px; }
#tab-stats #ui-respec-hint { margin: 0 0 12px; padding: 11px 12px; border-left: 2px solid #bda782; background: #2d302b; color: #e6d4a7; font-size: 11px; }
#tab-stats #ui-respec-actions { margin-top: 16px; }
#tab-stats #ui-respec-actions button { min-height: 44px; }
.ability-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--ed-line);
}
.ability-foot p { flex: 1 1 250px; margin: 0; color: var(--ed-muted); font-size: 11px; line-height: 1.5; }
#tab-stats .ability-foot button { width: auto; min-height: 38px; margin: 0; padding: 7px 10px; border-radius: 0; background: transparent; color: var(--ed-gold-light); font-size: 11px; }
#tab-stats .ability-foot button.hidden { display: none !important; }
.ability-detail { background: var(--ed-surface); padding: 0 20px 30px; }
.ability-detail-head { padding: 21px 0 15px; border-bottom: 1px solid var(--ed-line); }
.ability-detail-head h3 { margin: 7px 0 4px; color: var(--ed-text); font-size: 18px; }
.ability-detail-head p { margin: 0; color: var(--ed-muted); font-size: 10px; }
.ability-detail .dgrp { margin-top: 21px; }
.ability-detail .dgh { margin-bottom: 9px; color: var(--ed-gold-light); font-size: 12px; }
.ability-detail .dgrid { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 12px; font-size: 11px; }
.ability-detail .dgrid .stat-row { display: contents; }
.ability-detail .dgrid .stat-row.row-hidden { display: none; }
.ability-detail .dgrid div {
    min-width: 0; padding: 7px 0; border-bottom: 1px solid var(--ed-line-soft);
    color: var(--ed-muted); line-height: 1.25;
}
.ability-detail .dgrid div.text-right { color: var(--ed-text); font-weight: 800; }
.ability-detail .dgrid .stat-row.sub div { color: var(--ed-quiet); font-size: 10px; }
.ability-detail .dgrid .stat-row.sub div:first-child { padding-left: 10px; }
.ability-detail #dt-buffs { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ed-line); font-size: 11px; }

@media (min-width: 768px) and (max-width: 1080px) {
    body[data-mpage="char"][data-ability-view="1"] #game-screen { grid-template-columns: 205px minmax(0,1fr) 278px; }
    body[data-mpage="char"][data-ability-view="1"] #col-right { grid-template-columns: minmax(0,1fr) 278px; }
    body[data-mpage="char"][data-ability-view="1"] #tab-stats:not(.hidden) { grid-template-columns: minmax(0,1fr) 278px; }
    .ability-main-body { padding-left: 18px; padding-right: 18px; }
    #tab-stats .ability-base-grid, #tab-stats .ability-alloc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    body[data-mpage="char"][data-ability-view="1"] #st-buffs { display: none !important; }
    body[data-mpage="char"][data-ability-view="1"] #col-right { display: flex; flex-direction: column; min-height: 0; }
    body[data-mpage="char"][data-ability-view="1"] #tabbar { order: 0; flex: 0 0 47px; }
    body[data-mpage="char"][data-ability-view="1"] #col-right > .panel:last-child { order: 1; flex: 1 1 auto; min-height: 0; }
    body[data-mpage="char"][data-ability-view="1"] #tab-stats:not(.hidden) { display: block; overflow-y: auto; overflow-x: hidden; }
    .ability-hero { min-height: 68px; padding: 14px 15px; background: #1a2729; }
    .ability-hero > span, .ability-hero p, .ability-hero > small { display: none; }
    .ability-hero h2 { margin: 2px 0 0; font-size: 20px; }
    .ability-main-body { padding: 15px 14px 20px; }
    .ability-section-head h3 { font-size: 15px; }
    .ability-section-head > small { font-size: 9px; }
    .ability-point-summary, #tab-stats .ability-bonus-summary { min-height: 81px; margin: 12px 0 13px; padding: 14px; }
    .ability-point-summary strong, #tab-stats .ability-bonus-summary strong { font-size: 25px; }
    .ability-point-symbol { top: 12px; right: 14px; width: 39px; height: 39px; }
    #tab-stats .ability-base-grid, #tab-stats .ability-alloc-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
    #tab-stats .ability-card, #tab-stats .ability-stat-row { min-height: 71px; padding: 9px; gap: 3px 5px; }
    #tab-stats .ability-card-name, #tab-stats .ability-stat-name { font-size: 12px; }
    #tab-stats .ability-card-sub, #tab-stats .ability-stat-sub { display: none; }
    #tab-stats .ability-card-score, #tab-stats .ability-stat-score { grid-column: 1; grid-row: 2; font-size: 15px; }
    #tab-stats .ability-card-score { justify-content: flex-start; }
    #tab-stats .ability-stat-score { font-size: 13px; }
    #tab-stats .ability-stat-row > span:last-child { grid-column: 2; grid-row: 1 / 3; }
    #tab-stats .ability-stat-row button { width: 38px; height: 38px; font-size: 22px; }
    #tab-stats.ability-respec .ability-stat-row button { width: 31px; height: 38px; }
    .ability-detail { padding: 0 15px 24px; border-top: 1px solid var(--ed-line); }
    .ability-detail-head { padding-top: 16px; }
}