/* Character inventory viewer — giao diện mô phỏng client Ninja School, chỉ đọc. */
:root {
    --nso-panel: #4b311d;
    --nso-panel-dark: #2a1a10;
    --nso-panel-soft: #654225;
    --nso-gold: #f5d58a;
    --nso-gold-strong: #ffb928;
    --nso-line: #9f7240;
    --nso-slot: #2c1d14;
    --nso-slot-light: #5f4127;
    --nso-text: #fff4cd;
    --nso-muted: #d7bd91;
}
.inventory-page {
    --slot-size: 68px;
}
.inventory-shell {
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 211, 120, .16), transparent 32%),
        linear-gradient(145deg, #5d3a21 0%, #342013 52%, #24150d 100%);
    border: 1px solid rgba(245, 213, 138, .38);
    box-shadow: 0 22px 70px rgba(35, 20, 10, .28), inset 0 1px rgba(255,255,255,.12);
    color: var(--nso-text);
}
.dark .inventory-shell {
    box-shadow: 0 25px 85px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.09);
}
.inventory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid rgba(245, 213, 138, .22);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.1));
}
.inventory-player-select {
    min-width: 220px;
    max-width: 100%;
    border: 1px solid rgba(245,213,138,.45);
    border-radius: 10px;
    background: rgba(26,16,10,.72);
    color: #fff4cd;
    padding: 9px 36px 9px 12px;
    outline: none;
}
.inventory-status {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.inventory-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(20, 12, 8, .42);
    border: 1px solid rgba(245,213,138,.23);
    color: var(--nso-muted);
    font-size: 12px;
    font-weight: 700;
}
.inventory-chip.online { color: #75ef9b; border-color: rgba(66,225,122,.38); }
.inventory-chip.offline { color: #d9c5a2; }
.inventory-money {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.inventory-money span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: rgba(15,9,5,.36);
    padding: 5px 9px;
    border-radius: 8px;
}
.inventory-money img { width: 19px; height: 19px; object-fit: contain; }
.inventory-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 9px 10px 0;
    scrollbar-width: thin;
    background: rgba(29,17,10,.36);
}
.inventory-tab {
    appearance: none;
    border: 1px solid rgba(245,213,138,.25);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    padding: 10px 13px;
    min-width: max-content;
    color: #d6bb8f;
    background: rgba(54,34,20,.65);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: .18s ease;
}
.inventory-tab:hover { color: #fff; transform: translateY(-1px); }
.inventory-tab[aria-selected="true"] {
    color: #2b1a0d;
    background: linear-gradient(180deg, #ffe5a8, #dca24f);
    border-color: #ffd883;
    box-shadow: 0 -5px 20px rgba(255,184,40,.18);
}
.inventory-tab .tab-count {
    margin-left: 5px;
    opacity: .82;
    font-size: 11px;
}
.inventory-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    min-height: 610px;
}
.inventory-stage {
    min-width: 0;
    padding: 18px;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 22px 22px;
}
.inventory-category-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.inventory-category-title h2 {
    font-size: 18px;
    font-weight: 900;
    color: var(--nso-gold);
}
.inventory-category-title p {
    color: var(--nso-muted);
    font-size: 12px;
}
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--slot-size), 1fr));
    gap: 8px;
    align-content: start;
}
.inventory-slot {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-height: 86px;
    border: 1px solid rgba(212,158,82,.52);
    border-radius: 9px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.055), transparent 45%),
        radial-gradient(circle at center, var(--nso-slot-light), var(--nso-slot));
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), inset 0 0 20px rgba(0,0,0,.32);
    cursor: pointer;
    overflow: hidden;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
    touch-action: manipulation;
}
.inventory-slot:hover,
.inventory-slot:focus-visible {
    transform: translateY(-2px);
    border-color: #ffd879;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.16), 0 8px 22px rgba(0,0,0,.28), 0 0 0 2px rgba(255,207,104,.14);
    outline: none;
}
.inventory-slot.is-selected {
    border-color: #fff3a0;
    box-shadow: inset 0 0 0 2px rgba(255,229,137,.42), 0 0 19px rgba(255,190,49,.4);
}
.inventory-slot.empty {
    cursor: default;
    opacity: .62;
}
.inventory-slot.empty:hover { transform: none; border-color: rgba(212,158,82,.52); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), inset 0 0 20px rgba(0,0,0,.32); }
.inventory-slot img {
    position: absolute;
    inset: 10%;
    width: 80%;
    height: 80%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,.6));
}
.inventory-slot .slot-index {
    position: absolute;
    left: 4px;
    top: 3px;
    color: rgba(255,242,207,.55);
    font-size: 9px;
    font-weight: 700;
}
.inventory-slot .slot-quantity {
    position: absolute;
    right: 4px;
    bottom: 2px;
    color: #fff;
    text-shadow: 0 1px 3px #000, 1px 0 2px #000;
    font-size: 11px;
    font-weight: 900;
}
.inventory-slot .slot-upgrade {
    position: absolute;
    left: 4px;
    bottom: 3px;
    font-size: 10px;
    font-weight: 900;
    text-shadow: 0 1px 3px #000;
}
.inventory-slot .slot-lock {
    position: absolute;
    right: 4px;
    top: 3px;
    font-size: 10px;
    color: #ffd359;
    text-shadow: 0 1px 3px #000;
}
.inventory-slot .slot-new {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #ff5c4d;
    box-shadow: 0 0 8px #ff5c4d;
}
.inventory-slot-label {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    text-align: center;
    color: rgba(241,215,171,.45);
    font-size: 9px;
    line-height: 1.05;
    pointer-events: none;
}
.inventory-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(62px, 82px));
    grid-template-rows: repeat(4, minmax(62px, 82px));
    justify-content: center;
    gap: 10px;
    min-height: 430px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(245,213,138,.18);
    background:
        radial-gradient(circle at 50% 43%, rgba(230,174,94,.19), transparent 24%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.24));
}
.inventory-character-silhouette {
    grid-column: 2 / 5;
    grid-row: 1 / 5;
    align-self: center;
    justify-self: center;
    width: 210px;
    height: 310px;
    border-radius: 110px 110px 32px 32px;
    border: 1px solid rgba(245,213,138,.22);
    background:
        radial-gradient(circle at 50% 22%, rgba(252,220,157,.2) 0 13%, transparent 14%),
        radial-gradient(ellipse at 50% 69%, rgba(252,220,157,.13) 0 35%, transparent 36%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(246,217,160,.55);
    text-align: center;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    pointer-events: none;
}
.inventory-board .inventory-slot { width: 100%; height: 100%; max-height: none; }
.inventory-board .slot-pos-0 { grid-column: 1; grid-row: 1; }
.inventory-board .slot-pos-1 { grid-column: 5; grid-row: 1; }
.inventory-board .slot-pos-2 { grid-column: 1; grid-row: 2; }
.inventory-board .slot-pos-3 { grid-column: 5; grid-row: 2; }
.inventory-board .slot-pos-4 { grid-column: 1; grid-row: 3; }
.inventory-board .slot-pos-5 { grid-column: 5; grid-row: 3; }
.inventory-board .slot-pos-6 { grid-column: 1; grid-row: 4; }
.inventory-board .slot-pos-7 { grid-column: 5; grid-row: 4; }
.inventory-board .slot-pos-8 { grid-column: 2; grid-row: 4; }
.inventory-board .slot-pos-9 { grid-column: 4; grid-row: 4; }
.inventory-board .slot-pos-10 { grid-column: 2; grid-row: 1; }
.inventory-board .slot-pos-11 { grid-column: 4; grid-row: 1; }
.inventory-board .slot-pos-12 { grid-column: 2; grid-row: 2; }
.inventory-board .slot-pos-13 { grid-column: 4; grid-row: 2; }
.inventory-board .slot-pos-14 { grid-column: 2; grid-row: 3; }
.inventory-board .slot-pos-15 { grid-column: 4; grid-row: 3; }
.inventory-special-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(70px, 96px));
    gap: 12px;
    justify-content: center;
    padding: 30px 18px;
    border-radius: 16px;
    border: 1px solid rgba(245,213,138,.18);
    background: radial-gradient(circle at center, rgba(230,174,94,.17), rgba(0,0,0,.18) 58%);
}
.inventory-special-grid .inventory-slot {
    max-height: none;
}
.inventory-details {
    border-left: 1px solid rgba(245,213,138,.22);
    background: linear-gradient(180deg, rgba(31,18,10,.88), rgba(18,10,6,.96));
    padding: 18px;
    overflow: auto;
}
.inventory-details-placeholder {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bda47c;
    text-align: center;
    gap: 12px;
}
.inventory-details-placeholder i { font-size: 44px; opacity: .4; }
.item-detail-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(245,213,138,.18);
}
.item-detail-icon {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245,213,138,.55);
    border-radius: 12px;
    background: radial-gradient(circle, #694627, #291a10);
    box-shadow: inset 0 0 18px rgba(0,0,0,.42);
}
.item-detail-icon img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0,0,0,.6)); }
.item-detail-title { min-width: 0; }
.item-detail-title h3 {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.item-detail-title p { color: #bda47c; font-size: 11px; }
.item-tone-normal { color: #fff3cf; }
.item-tone-blue { color: #55aaff; }
.item-tone-green { color: #6cf18b; }
.item-tone-gold { color: #ffd85b; }
.item-tone-purple { color: #d48cff; }
.item-tone-red { color: #ff6d64; }
.item-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.item-badge {
    border-radius: 7px;
    border: 1px solid rgba(245,213,138,.24);
    background: rgba(255,255,255,.055);
    color: #dcc69f;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 800;
}
.item-detail-section {
    padding: 13px 0;
    border-bottom: 1px solid rgba(245,213,138,.14);
}
.item-detail-section:last-child { border-bottom: 0; }
.item-detail-section h4 {
    color: var(--nso-gold);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.item-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 0;
    color: #d6c09b;
    font-size: 12px;
}
.item-detail-row strong { color: #fff3cf; text-align: right; overflow-wrap: anywhere; }
.item-option {
    position: relative;
    padding: 5px 0 5px 12px;
    font-size: 12px;
    line-height: 1.35;
}
.item-option::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.option-muted { color: #a9a39a; }
.option-blue { color: #59a7ff; }
.option-cyan { color: #67d8f4; }
.option-green { color: #69eb83; }
.option-gold { color: #ffd568; }
.item-description { color: #eee0c1; font-size: 12px; line-height: 1.55; white-space: pre-line; }
.item-gems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.item-gem {
    border: 1px solid rgba(245,213,138,.18);
    border-radius: 8px;
    padding: 7px;
    text-align: center;
    color: #dac39d;
    font-size: 10px;
}
.item-gem img { width: 36px; height: 36px; object-fit: contain; margin: auto; }
.inventory-warning {
    margin-bottom: 14px;
    border: 1px solid rgba(255,190,58,.38);
    border-radius: 10px;
    background: rgba(255,171,34,.1);
    color: #ffe0a0;
    padding: 10px 12px;
    font-size: 12px;
}
.inventory-unavailable {
    min-height: 300px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #c6ae87;
    border: 1px dashed rgba(245,213,138,.25);
    border-radius: 14px;
    padding: 28px;
}
.inventory-empty-note {
    color: #c6ae87;
    font-size: 12px;
    margin-top: 12px;
}
.inventory-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    min-height: 38px;
    border-radius: 9px;
    padding: 8px 12px;
    color: #2d1b0e;
    background: linear-gradient(180deg,#ffe19c,#d69a42);
    border: 1px solid #ffd87d;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(143,86,22,.22);
}
.inventory-view-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
@media (max-width: 1023px) {
    .inventory-main { grid-template-columns: 1fr; }
    .inventory-details {
        border-left: 0;
        border-top: 1px solid rgba(245,213,138,.22);
        max-height: none;
    }
    .inventory-details-placeholder { min-height: 220px; }
}
@media (max-width: 767px) {
    .inventory-page { --slot-size: 54px; }
    .inventory-toolbar { align-items: stretch; flex-direction: column; }
    .inventory-player-select { width: 100%; max-width: none; }
    .inventory-stage { padding: 12px; }
    .inventory-tabs { padding-left: 7px; padding-right: 7px; }
    .inventory-tab { padding: 9px 10px; }
    .inventory-board {
        display: grid;
        grid-template-columns: repeat(4, minmax(54px, 1fr));
        grid-template-rows: auto;
        min-height: 0;
        padding: 12px;
        gap: 8px;
    }
    .inventory-character-silhouette { display: none; }
    .inventory-board .inventory-slot { grid-column: auto !important; grid-row: auto !important; }
    .inventory-special-grid { grid-template-columns: repeat(3, minmax(58px, 86px)); padding: 18px 10px; gap: 8px; }
    .inventory-slot-label { font-size: 8px; }
}
@media (max-width: 390px) {
    .inventory-page { --slot-size: 48px; }
    .inventory-grid { gap: 6px; }
    .inventory-stage { padding: 9px; }
    .inventory-special-grid { grid-template-columns: repeat(3, minmax(50px, 1fr)); }
}

/* Character full view v2: thông tin, kỹ năng, JSON item và Trang bị 2 */
.character-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.character-panel {
    border: 1px solid rgba(245,213,138,.22);
    border-radius: 14px;
    padding: 15px;
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(0,0,0,.16));
    min-width: 0;
}
.character-panel h3 {
    color: var(--nso-gold);
    font-size: 13px;
    font-weight: 900;
    margin: 0 0 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.character-main-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    grid-column: 1 / -1;
    background:
        radial-gradient(circle at 10% 50%, rgba(255,205,104,.18), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.18));
}
.character-main-icon,
.character-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 18px;
    color: #ffe6a7;
    font-size: 37px;
    border: 1px solid rgba(255,220,139,.46);
    background: radial-gradient(circle, #76502d, #29190f);
    box-shadow: inset 0 0 22px rgba(0,0,0,.42), 0 8px 22px rgba(0,0,0,.2);
}
.character-main-panel h3 { margin: 0 0 4px; font-size: 22px; text-transform: none; }
.character-main-panel p,
.character-location { color: #cbb58e; font-size: 12px; }
.character-level-line { color: #f4dfb8; margin: 8px 0; }
.character-level-line strong { color: #ffd76d; font-size: 21px; }
.character-location i { color: #ffbd55; margin-right: 4px; }
.character-wide-panel { grid-column: 1 / -1; }
.character-stat-list,
.character-stat-grid { display: grid; gap: 7px; }
.character-stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; }
.character-stat-list > div,
.character-stat-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(17,10,6,.28);
    color: #cdb793;
    font-size: 12px;
}
.character-stat-list strong,
.character-stat-grid strong { color: #fff0ca; text-align: right; overflow-wrap: anywhere; }
.character-detail-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(245,213,138,.18);
}
.character-detail-hero .character-avatar { width: 62px; height: 62px; font-size: 28px; border-radius: 14px; }
.character-detail-hero h3 { color: #ffe09b; font-size: 19px; font-weight: 900; }
.character-detail-hero p { color: #bca57f; font-size: 12px; }

.skill-shortcut-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    margin-bottom: 14px;
}
.skill-shortcut-group {
    border: 1px solid rgba(245,213,138,.18);
    border-radius: 11px;
    padding: 10px;
    background: rgba(15,9,5,.22);
}
.skill-shortcut-group > strong { display: block; color: #ffd66f; font-size: 11px; margin-bottom: 7px; }
.skill-shortcut-group > div { display: flex; flex-wrap: wrap; gap: 5px; }
.skill-shortcut {
    border: 1px solid rgba(245,213,138,.16);
    border-radius: 7px;
    padding: 4px 6px;
    color: #8f816b;
    background: rgba(255,255,255,.03);
    font-size: 9px;
    font-weight: 800;
}
.skill-shortcut.active { color: #7ef19a; border-color: rgba(82,224,122,.35); }
.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px,1fr));
    gap: 10px;
}
.skill-card {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(245,213,138,.24);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
    color: #fff0cb;
    text-align: left;
    cursor: pointer;
    transition: .16s ease;
}
.skill-card:hover,
.skill-card.is-selected { transform: translateY(-2px); border-color: #ffd475; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.skill-card img {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: contain;
    border: 1px solid rgba(245,213,138,.3);
    border-radius: 10px;
    padding: 4px;
    background: radial-gradient(circle,#664426,#27180e);
}
.skill-card div { min-width: 0; }
.skill-card strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.skill-card span,
.skill-card small { display: block; color: #bda47f; font-size: 10px; margin-top: 3px; }

.inventory-fashion-board {
    border-color: rgba(214,139,255,.28);
    background:
        radial-gradient(circle at 50% 43%, rgba(203,119,255,.17), transparent 25%),
        linear-gradient(180deg, rgba(56,22,74,.18), rgba(0,0,0,.24));
}
.inventory-fashion-board .inventory-character-silhouette {
    border-color: rgba(221,151,255,.26);
    color: rgba(232,187,255,.58);
    background:
        radial-gradient(circle at 50% 22%, rgba(221,161,255,.2) 0 13%, transparent 14%),
        radial-gradient(ellipse at 50% 69%, rgba(218,143,255,.13) 0 35%, transparent 36%);
}

.item-option-table { display: grid; gap: 5px; }
.item-option-row {
    display: grid;
    grid-template-columns: 42px 72px minmax(0,1fr);
    gap: 7px;
    align-items: start;
    padding: 7px 8px;
    border: 1px solid rgba(245,213,138,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    font-size: 11px;
}
.item-option-row span { font-weight: 900; }
.item-option-row b { color: #fff1c8; }
.item-option-row em { font-style: normal; overflow-wrap: anywhere; }
.json-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.json-detail-head h4 { margin: 0; }
.inventory-copy-json {
    appearance: none;
    border: 1px solid rgba(245,213,138,.28);
    border-radius: 7px;
    background: rgba(255,255,255,.05);
    color: #f4d99e;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.inventory-copy-json:hover { border-color: #ffd572; color: #fff; }
.inventory-json {
    margin: 0;
    max-height: 340px;
    overflow: auto;
    border: 1px solid rgba(245,213,138,.16);
    border-radius: 9px;
    padding: 10px;
    background: #120c08;
    color: #bce6bd;
    font: 10px/1.55 Consolas, Monaco, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
}

@media (max-width: 767px) {
    .character-overview-grid { grid-template-columns: 1fr; }
    .character-main-panel,
    .character-wide-panel { grid-column: auto; }
    .character-main-panel { align-items: flex-start; }
    .character-main-icon { width: 62px; height: 62px; font-size: 29px; }
    .character-stat-grid { grid-template-columns: 1fr; }
    .skill-shortcut-groups { grid-template-columns: 1fr; }
    .skill-grid { grid-template-columns: 1fr; }
    .item-option-row { grid-template-columns: 34px 58px minmax(0,1fr); padding: 6px; }
    .inventory-json { max-height: 280px; font-size: 9px; }
}

/* Client information/options v3 — hiển thị ngắn gọn như cửa sổ trong game. */
.client-info-window {
    position: relative;
    width: min(100%, 540px);
    margin: 0 auto;
    padding: 11px 18px 15px;
    border: 2px solid #bba482;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.055), transparent 8%, transparent 92%, rgba(255,255,255,.04)),
        linear-gradient(180deg, #652304 0%, #4b1706 54%, #3a1105 100%);
    box-shadow:
        0 0 0 2px #17100a,
        0 0 0 4px #d7c6a9,
        inset 0 0 0 1px rgba(255,231,183,.24),
        inset 0 0 30px rgba(25,4,0,.48),
        0 16px 35px rgba(0,0,0,.28);
    color: #ead9c4;
}
.client-info-window::before,
.client-info-window::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px double rgba(234,223,202,.86);
    pointer-events: none;
}
.client-info-window::before {
    left: -5px;
    top: -5px;
    border-right: 0;
    border-bottom: 0;
}
.client-info-window::after {
    right: -5px;
    bottom: -5px;
    border-left: 0;
    border-top: 0;
}
.client-info-nav {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    margin: -2px 0 8px;
}
.client-info-nav > div {
    min-height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid #ef6407;
    background: linear-gradient(180deg, #7a2605, #5a1a03);
    box-shadow: inset 0 0 0 1px rgba(255,188,74,.12);
    color: #ffe900;
    text-align: center;
}
.client-info-nav strong {
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    text-shadow: 0 1px 1px #3c1200;
}
.client-info-nav span {
    color: #ffca5f;
    font-size: 10px;
    font-weight: 900;
}
.client-info-nav button {
    appearance: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #fff10a;
    background: transparent;
    font-size: 21px;
    cursor: pointer;
    filter: drop-shadow(0 2px 1px #5b1700);
    touch-action: manipulation;
    transition: transform .14s ease, filter .14s ease;
}
.client-info-nav button:hover,
.client-info-nav button:focus-visible {
    transform: scale(1.12);
    filter: drop-shadow(0 0 5px rgba(255,241,10,.72));
    outline: none;
}
.client-info-body {
    min-height: 325px;
    max-height: 520px;
    overflow: auto;
    padding: 7px 17px 9px;
    border: 1px solid #d8c5a7;
    background: linear-gradient(180deg, rgba(44,10,1,.28), rgba(13,2,0,.16));
    scrollbar-width: thin;
    scrollbar-color: #ad7141 rgba(24,6,0,.45);
}
.client-info-row {
    display: grid;
    grid-template-columns: minmax(128px, auto) minmax(0, 1fr);
    gap: 5px;
    align-items: baseline;
    min-height: 24px;
    padding: 2px 0;
    color: #e8d6c5;
    font: 15px/1.28 Arial, Helvetica, sans-serif;
}
.client-info-row span {
    color: #e7d2c3;
    white-space: nowrap;
}
.client-info-row strong {
    min-width: 0;
    color: #f1e4d4;
    font-weight: 400;
    overflow-wrap: anywhere;
}
.client-info-row.tone-cyan strong { color: #00e7df; }
.client-info-row.tone-green strong { color: #70df22; }
.client-info-row.tone-gold strong { color: #ffd800; }
.client-info-row.tone-red strong { color: #ff665c; }
.client-info-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 10px;
}
.client-info-dots button {
    appearance: none;
    width: 9px;
    height: 9px;
    border: 1px solid rgba(255,225,139,.62);
    border-radius: 999px;
    background: rgba(28,6,0,.8);
    cursor: pointer;
    padding: 0;
}
.client-info-dots button.active {
    background: #ffe600;
    box-shadow: 0 0 7px rgba(255,230,0,.72);
}

.client-compact-head {
    padding-bottom: 9px;
    gap: 10px;
}
.client-compact-head .item-detail-icon {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    border-radius: 5px;
    border-color: #db8c24;
    background: linear-gradient(145deg, #692004, #2f0c01);
}
.client-compact-head .item-detail-icon img {
    width: 54px;
    height: 54px;
}
.client-compact-head .item-detail-title h3 {
    margin-bottom: 2px;
    font: 900 16px/1.25 Georgia, "Times New Roman", serif;
}
.client-compact-head .item-detail-title h3 small {
    color: #d4c6b9;
    font: 700 10px/1.2 Arial, sans-serif;
    white-space: nowrap;
}
.client-compact-head .item-detail-title p {
    color: #02d8dc;
    font-size: 11px;
    line-height: 1.35;
}
.client-item-summary {
    padding: 9px 0 8px;
    color: #e2d0bf;
    font-size: 14px;
    line-height: 1.52;
    border-bottom: 1px solid rgba(245,213,138,.14);
}
.client-item-summary > div { overflow-wrap: anywhere; }
.client-item-summary .price-line { color: #ffd500; }
.upgrade-diamonds {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
    line-height: 1;
}
.upgrade-diamond {
    color: #ff1744;
    font-size: 11px;
    text-shadow: 0 0 4px rgba(255,23,68,.72);
}
.client-option-section h4 { margin-bottom: 5px; }
.client-option-list {
    display: grid;
    gap: 1px;
}
.client-option-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.34;
}
.client-option-line > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.client-option-line > small {
    flex: 0 0 auto;
    color: rgba(233,219,201,.66);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}
.client-option-line.option-muted { color: #d4c8bd; }
.client-option-line.option-blue { color: #48a8ff; }
.client-option-line.option-cyan { color: #00dedf; }
.client-option-line.option-green { color: #70dc1f; }
.client-option-line.option-gold { color: #ffe000; }
.client-brief-lines .item-detail-row { margin: 4px 0; }
.skill-card strong small {
    display: inline;
    margin: 0 0 0 3px;
    color: #79dfe1;
    font-size: 9px;
}

@media (max-width: 767px) {
    .client-info-window {
        width: calc(100% - 6px);
        padding: 9px 10px 12px;
        box-shadow: 0 0 0 2px #17100a, 0 0 0 3px #d7c6a9, inset 0 0 20px rgba(25,4,0,.4);
    }
    .client-info-nav {
        grid-template-columns: 34px minmax(0,1fr) 34px;
        gap: 4px;
    }
    .client-info-nav button { width: 34px; height: 38px; font-size: 18px; }
    .client-info-nav > div { min-height: 43px; padding: 6px 9px; }
    .client-info-nav strong { font-size: 15px; }
    .client-info-body { min-height: 300px; max-height: 450px; padding: 7px 10px; }
    .client-info-row {
        grid-template-columns: minmax(112px, 44%) minmax(0, 1fr);
        font-size: 13px;
        min-height: 22px;
    }
    .client-info-row span { white-space: normal; }
    .client-option-line { font-size: 12px; }
    .client-item-summary { font-size: 13px; }
    .client-compact-head .item-detail-icon { width: 56px; height: 56px; flex-basis: 56px; }
    .client-compact-head .item-detail-icon img { width: 49px; height: 49px; }
}

/* ============================================================
   Character inventory client v4
   - Cửa sổ/nút chuyển mục mô phỏng client
   - Icon ưu tiên img/icon
   - Hiệu ứng nâng cấp 1-16 bằng lớp sáng theo tier
   - Hiệu ứng 17+ dùng frame thật trong img/upgrade
   ============================================================ */
.inventory-shell {
    position: relative;
    overflow: visible;
    border-radius: 3px;
    border: 2px solid #d9d2c3;
    background: #6f2204;
    box-shadow:
        0 0 0 2px #15110d,
        0 0 0 4px #bdb7aa,
        inset 0 0 0 1px rgba(255,255,255,.22),
        inset 0 0 32px rgba(36,5,0,.38),
        0 14px 38px rgba(0,0,0,.36);
}
.inventory-shell::before,
.inventory-shell::after {
    content: "";
    position: absolute;
    z-index: 20;
    width: 18px;
    height: 18px;
    pointer-events: none;
    border: 3px double #e7e0d4;
}
.inventory-shell::before {
    left: -6px;
    top: -6px;
    border-right: 0;
    border-bottom: 0;
}
.inventory-shell::after {
    right: -6px;
    bottom: -6px;
    border-left: 0;
    border-top: 0;
}
.inventory-toolbar {
    background: linear-gradient(180deg, #7a2807, #5d1a03);
    border-bottom-color: #d6a037;
    padding: 10px 12px;
}
.inventory-tabs { display: none !important; }
.inventory-main {
    grid-template-columns: minmax(0, 58%) minmax(300px, 42%);
    grid-template-areas:
        "viewnav viewnav"
        "stage details";
    min-height: 560px;
    background: #6f2204;
}
.inventory-client-view-nav {
    grid-area: viewnav;
    display: grid;
    grid-template-columns: 52px minmax(130px, 260px) 52px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 66px;
    padding: 6px 12px 2px;
    background: linear-gradient(180deg, #6f2204, #671e03);
}
.inventory-client-view-nav > button {
    appearance: none;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #fff000;
    font-size: 23px;
    cursor: pointer;
    filter: drop-shadow(0 2px 1px #381000);
    transition: transform .14s ease, filter .14s ease;
    touch-action: manipulation;
}
.inventory-client-view-nav > button:hover,
.inventory-client-view-nav > button:focus-visible {
    transform: scale(1.13);
    filter: drop-shadow(0 0 6px rgba(255,240,0,.8));
    outline: none;
}
.inventory-client-title {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 15px;
    border: 1px solid #f06a00;
    background: linear-gradient(180deg, #842903, #5c1801);
    color: #fff000;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(255,184,48,.13);
}
.inventory-client-title strong {
    font: 900 18px/1.05 Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 1px #3c1000;
}
.inventory-client-title small {
    color: #ffc85d;
    font-size: 10px;
    font-weight: 900;
}
.inventory-stage {
    grid-area: stage;
    padding: 7px;
    background: #6f2204;
    border-top: 1px solid #d99524;
    min-width: 0;
}
.inventory-details {
    grid-area: details;
    padding: 14px 16px;
    border-left: 2px solid #17140e;
    border-top: 1px solid #d99524;
    background: linear-gradient(180deg, #6d2104, #571703);
    color: #ead9c4;
    min-width: 0;
}
.client-category-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 31px;
    padding: 4px 9px;
    border: 1px solid #e0a232;
    border-bottom: 0;
    background: #6e2104;
    color: #f3dfc6;
    font-size: 12px;
}
.client-category-meta strong { color: #fff000; }

/* Lưới Hành trang/Rương giống client: ô vuông, nền xanh đen, đường vàng. */
.client-bag-grid {
    grid-template-columns: repeat(6, minmax(52px, 1fr));
    gap: 0;
    padding: 0;
    border-top: 1px solid #d68a00;
    border-left: 1px solid #d68a00;
    background: #001f20;
}
.inventory-slot {
    border-radius: 0;
    border: 0;
    border-right: 1px solid #d68a00;
    border-bottom: 1px solid #d68a00;
    background:
        radial-gradient(circle at center, rgba(9,60,61,.54), rgba(0,22,23,.92) 70%),
        #001f20;
    box-shadow: inset 0 0 12px rgba(0,0,0,.5);
    overflow: hidden;
    isolation: isolate;
}
.inventory-slot:hover,
.inventory-slot:focus-visible,
.inventory-slot.is-selected {
    z-index: 5;
    transform: none;
    border-color: #fff000;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #e90000, 0 0 10px rgba(255,238,0,.65);
}
.inventory-slot.empty,
.inventory-slot.empty:hover {
    opacity: 1;
    background:
        radial-gradient(circle at center, rgba(17,66,67,.34), rgba(0,24,25,.94) 68%),
        #001f20;
    box-shadow: inset 0 0 12px rgba(0,0,0,.48);
}
.inventory-slot-label {
    color: rgba(212,220,213,.38);
    font-size: 11px;
    line-height: 1.25;
}
.inventory-slot .slot-index { z-index: 8; color: rgba(255,255,255,.3); }
.inventory-slot .slot-quantity {
    z-index: 9;
    right: 5px;
    bottom: 1px;
    color: #fff400;
    font-size: 13px;
}
.inventory-slot .slot-upgrade { z-index: 9; color: #fff; }
.inventory-slot .slot-lock { z-index: 9; }
.inventory-slot .slot-new { z-index: 10; }

/* Icon và lớp hiệu ứng nâng cấp. */
.inventory-icon-stack {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: visible;
    pointer-events: none;
}
.inventory-icon-stack.is-large {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
}
.inventory-icon-stack.is-creature {
    position: relative;
    inset: auto;
    width: min(190px, 78%);
    aspect-ratio: 1 / 1;
}
.inventory-slot img,
.inventory-icon-stack .inventory-item-icon {
    position: absolute;
    z-index: 4;
    inset: 8%;
    width: 84%;
    height: 84%;
    object-fit: contain;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,.72));
    image-rendering: auto;
}
.inventory-icon-stack.is-large .inventory-item-icon {
    inset: 8%;
    width: 84%;
    height: 84%;
}
.upgrade-effect {
    position: absolute;
    z-index: 2;
    inset: -4%;
    display: block;
    pointer-events: none;
    transform-origin: center;
}
.upgrade-effect.is-large { inset: -10%; }
.upgrade-effect-animated img {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: .96;
    filter: drop-shadow(0 0 5px rgba(255,237,93,.72)) !important;
}
.upgrade-effect-static {
    border-radius: 50%;
    animation: nso-upgrade-pulse 1.25s ease-in-out infinite alternate;
}
.upgrade-effect-static::before,
.upgrade-effect-static::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    pointer-events: none;
}
.upgrade-effect-static::before {
    border: 2px dotted currentColor;
    animation: nso-upgrade-spin 3.2s linear infinite;
    opacity: .75;
}
.upgrade-effect-static::after {
    inset: 16%;
    border: 1px solid currentColor;
    box-shadow: 0 0 9px currentColor, inset 0 0 8px currentColor;
    opacity: .58;
}
.upgrade-tier-1 { color: #52a8ff; filter: drop-shadow(0 0 3px #52a8ff); }
.upgrade-tier-2 { color: #65ef79; filter: drop-shadow(0 0 4px #65ef79); }
.upgrade-tier-3 { color: #ffe43b; filter: drop-shadow(0 0 5px #ffca22); }
.upgrade-tier-4 { color: #d98cff; filter: drop-shadow(0 0 6px #c858ff); }
.upgrade-tier-5 { color: #ff4242; filter: drop-shadow(0 0 7px #ff1717); }
@keyframes nso-upgrade-spin { to { transform: rotate(360deg); } }
@keyframes nso-upgrade-pulse { from { opacity: .5; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }

/* Trang bị giống bố cục client. */
.inventory-board {
    min-height: 405px;
    grid-template-columns: repeat(5, minmax(58px, 78px));
    grid-template-rows: repeat(4, minmax(58px, 78px));
    gap: 3px;
    padding: 10px;
    border-radius: 0;
    border: 1px solid #d88c00;
    background: #6f2204;
}
.inventory-board .inventory-slot {
    border: 1px solid #d88c00;
    background: #001e1f;
}
.inventory-character-silhouette {
    width: 205px;
    height: 250px;
    border-radius: 0;
    border: 1px solid #d88c00;
    background:
        radial-gradient(circle at 50% 45%, rgba(255,224,50,.14), transparent 34%),
        #6a2104;
    color: #ffe46d;
}
.inventory-character-silhouette i {
    display: block;
    margin-bottom: 10px;
    font-size: 62px;
    color: #ffd83d;
    filter: drop-shadow(0 4px 3px #240800);
}
.inventory-character-silhouette strong,
.inventory-character-silhouette small { display: block; }
.inventory-character-silhouette small { margin-top: 5px; color: #08e3de; font-size: 11px; }
.inventory-fashion-board {
    border-color: #d88c00;
    background: #6f2204;
}

/* Thú cưỡi/Vĩ thú: vật chính giữa, bốn ô phụ kiện xung quanh. */
.inventory-creature-board {
    position: relative;
    min-height: 405px;
    display: grid;
    grid-template-columns: 74px minmax(170px, 1fr) 74px;
    grid-template-rows: 1fr 1fr;
    gap: 10px 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #d88c00;
    background: #6f2204;
}
.creature-center {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: stretch;
    display: grid;
    place-items: center;
    min-width: 0;
    border: 1px solid #d88c00;
    background: #002324;
}
.creature-main-item {
    appearance: none;
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: #fff0d8;
    cursor: pointer;
}
.creature-main-item strong { font-size: 16px; text-align: center; }
.creature-slot-0 { grid-column: 1; grid-row: 1; }
.creature-slot-1 { grid-column: 1; grid-row: 2; }
.creature-slot-2 { grid-column: 3; grid-row: 1; }
.creature-slot-3 { grid-column: 3; grid-row: 2; }
.creature-empty { text-align: center; color: #ad9a84; }
.creature-empty i { display: block; font-size: 58px; margin-bottom: 10px; }

/* Cửa sổ tiềm năng/kỹ năng. */
.client-potential-window,
.client-skill-window {
    min-height: 405px;
    padding: 13px;
    border: 1px solid #d88c00;
    background: #6f2204;
    color: #ead9c4;
}
.potential-points,
.skill-point-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: #fff000;
    font: 900 17px/1.2 Arial, sans-serif;
}
.potential-list { display: grid; gap: 9px; }
.potential-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding: 12px 10px;
    border: 1px solid #e3d7c7;
    background: #6f2204;
    font-size: 15px;
}
.potential-row strong { color: #fff; }
.potential-row small { grid-column: 1 / -1; color: #77d824; font-size: 10px; }
.potential-help { margin-top: 26px; color: #70d420; font-size: 13px; }
.client-skill-icons {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 3px;
    margin-bottom: 8px;
    border: 1px solid #f1d98f;
    background: #120e08;
}
.skill-icon-button {
    position: relative;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: 1px solid #d88c00;
    background: #002324;
    cursor: pointer;
}
.skill-icon-button img { width: 90%; height: 90%; object-fit: contain; }
.skill-icon-button span {
    position: absolute;
    right: 2px;
    bottom: 1px;
    color: #fff000;
    font-size: 10px;
    font-weight: 900;
    text-shadow: 0 1px 2px #000;
}
.skill-grid { grid-template-columns: 1fr; }
.skill-card {
    border-radius: 0;
    border-color: #d88c00;
    background: #6f2204;
}
.skill-card img { border-radius: 0; border-color: #d88c00; background: #002324; }
.skill-card span { color: #03e3de; }

/* Chi tiết item/skill như bảng tooltip client. */
.item-detail-head { border-bottom-color: #d88c00; }
.item-detail-icon {
    overflow: visible;
    border-radius: 0;
    border-color: #d88c00;
    background: #002324;
}
.item-detail-icon .inventory-icon-stack { width: 100%; height: 100%; }
.client-compact-head .item-detail-icon { border-radius: 0; background: #002324; }
.client-option-line {
    padding: 3px 0;
    font-size: 14px;
}
.client-option-line > small {
    color: #04dfe2;
    font-size: 10px;
}
.item-detail-section { border-bottom-color: rgba(216,140,0,.42); }
.inventory-details-placeholder { color: #e1d2c0; }

/* Trang thông tin: giữ giao diện client nhưng dùng nav chung. */
.client-info-window {
    width: 100%;
    max-width: none;
    min-height: 405px;
    margin: 0;
    border-radius: 0;
    border: 1px solid #d8c5a7;
    box-shadow: none;
    background: #6f2204;
}
.client-info-pagebar {
    display: grid;
    grid-template-columns: 35px minmax(0,1fr) auto 35px;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
    color: #fff000;
}
.client-info-pagebar button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff000;
    font-size: 19px;
    cursor: pointer;
}
.client-info-pagebar strong { text-align: center; }
.client-info-pagebar span { color: #ffc768; font-size: 10px; }
.client-info-body { min-height: 340px; max-height: 500px; }

.inventory-class-chip { color: #03e3de; }

@media (max-width: 1023px) {
    .inventory-main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "viewnav"
            "stage"
            "details";
    }
    .inventory-details {
        border-left: 0;
        border-top: 2px solid #17140e;
    }
}
@media (max-width: 767px) {
    .inventory-client-view-nav {
        grid-template-columns: 40px minmax(110px, 220px) 40px;
        min-height: 57px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .inventory-client-view-nav > button { width: 38px; height: 40px; font-size: 19px; }
    .inventory-client-title { min-height: 44px; padding: 6px 10px; }
    .inventory-client-title strong { font-size: 16px; }
    .client-bag-grid { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
    .inventory-board {
        grid-template-columns: repeat(4, minmax(52px, 1fr));
        grid-template-rows: auto;
        min-height: 0;
    }
    .inventory-board .inventory-slot { grid-column: auto !important; grid-row: auto !important; }
    .inventory-character-silhouette { display: none; }
    .inventory-creature-board {
        grid-template-columns: 58px minmax(135px, 1fr) 58px;
        min-height: 330px;
        gap: 7px;
        padding: 8px;
    }
    .creature-main-item { min-height: 235px; }
    .client-potential-window,
    .client-skill-window,
    .client-info-window { min-height: 330px; }
    .client-info-body { min-height: 285px; }
}
@media (max-width: 430px) {
    .client-bag-grid { grid-template-columns: repeat(4, minmax(45px, 1fr)); }
    .inventory-creature-board {
        grid-template-columns: 52px minmax(120px,1fr) 52px;
    }
    .client-option-line { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .upgrade-effect-static,
    .upgrade-effect-static::before { animation: none !important; }
}

/* V5: phân biệt kỹ năng đã học/chưa học và phần cấp kế theo đúng client. */
.skill-icon-button.is-unlearned,
.skill-card.is-unlearned {
    filter: grayscale(.72);
    opacity: .68;
}
.skill-icon-button.is-unlearned:hover,
.skill-card.is-unlearned:hover,
.skill-icon-button.is-unlearned.is-selected,
.skill-card.is-unlearned.is-selected {
    filter: none;
    opacity: 1;
}
.skill-icon-button.is-selected {
    outline: 2px solid #fff000;
    outline-offset: -3px;
    box-shadow: 0 0 12px rgba(255,240,0,.55);
}
.skill-card.is-selected {
    border-color: #fff000;
    box-shadow: inset 0 0 0 1px #fff000, 0 4px 12px rgba(0,0,0,.26);
}
.skill-unlearned-title { color: #ff3b2f !important; }
.item-badge.is-locked {
    color: #ff857c;
    border-color: rgba(255,74,61,.55);
    background: rgba(130,18,12,.32);
}
.client-skill-description {
    color: #f0dfcd;
    line-height: 1.55;
    white-space: pre-line;
}
.skill-next-level {
    margin-top: 8px;
    border: 1px solid rgba(255,75,56,.48);
    background: rgba(85,15,7,.22);
    padding: 10px;
}
.skill-next-level h4 {
    color: #ff5142;
    margin-bottom: 8px;
}
.skill-shortcut {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-skill-icons::-webkit-scrollbar { height: 7px; }
.client-skill-icons::-webkit-scrollbar-thumb { background: #d88c00; border-radius: 10px; }