/* Shared generated parts. Text, form controls and state remain live HTML. */

/* 화면별 버튼 위에 공통 이미지 부품을 적용한다. 최종 동작별 색상은 shared-ui.css가 정한다. */
:is(.mode-actions, .story-actions, .app-confirm-actions, #detail-actions) button,
button:is(
    .boss-submit,
    .result-btn,
    .buy-btn,
    .modal-btn-main,
    .image-action-button,
    .practice-reveal-btn,
    .practice-nav-btn,
    .practice-chip,
    .practice-speak-btn,
    .music-toggle-btn,
    .skill-btn,
    .gold-arrow,
    .num-btn
),
.skill-btn.skill-passive {
    --ui-control-art: var(--ui-action);
    background: var(--ui-control-art) center / 100% 100% no-repeat !important;
    border: 0 !important;
    border-image: none !important;
    box-shadow: none !important;
    color: var(--ui-text-on-art) !important;
    text-shadow: 0 1px 1px var(--ui-text-shadow);
    min-height: 44px;
    padding: 10px 16px;
}
:is(.mode-actions, .story-actions) button:not(.mode-start, .btn-main),
button:is(.app-confirm-cancel, .practice-chip, .gold-arrow, .num-btn),
#practice-prev-btn,
#practice-next-btn,
.gameplay-actions :is(.practice-nav-btn, .music-toggle-btn),
.skill-btn.skill-passive {
    --ui-control-art: var(--ui-secondary);
}
button.btn-danger {
    --ui-control-art: var(--ui-danger);
}
.practice-chip.practice-chip-active,
#practice-memorized-btn[aria-pressed='true'] {
    --ui-control-art: var(--ui-action);
}
button:disabled:not(.option-btn) {
    opacity: 0.55;
}
.result-btn::before,
.image-action-button::before {
    display: none;
}

/* Generated frames retain their corners while the empty center fits variable content. */
dialog.screen-overlay
    :is(
        .card.rpg-modal,
        .card.mode-selection,
        .card.story-card,
        .card.story-map-card,
        .result-modal
    ),
.app-confirm-box,
#battle-mode-game .question-box,
#practice-mode-game
    :is(.practice-word-section, .practice-meaning-section, .practice-explanation-section),
#inventory-modal #inv-item-detail {
    border: 14px solid transparent !important;
    border-image: var(--ui-panel) 18% fill / 14px / 0 stretch !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ui-text-on-art);
}
.result-modal::before,
.result-modal::after {
    display: none;
}
.card.rpg-modal {
    container-type: inline-size;
}

#battle-mode-game .option-btn,
#inventory-modal :is(.inv-slot, .inv-item, .inv-torso) {
    --ui-option-art: var(--ui-answer);
    border: 0 !important;
    border-image: none !important;
    background: var(--ui-option-art) center / 100% 100% no-repeat !important;
    box-shadow: none !important;
    color: var(--ui-text-on-art) !important;
}
#battle-mode-game .option-btn {
    transition:
        transform 140ms ease,
        filter 140ms ease;
}
#battle-mode-game .option-btn:is(.option-btn-correct, .option-btn-picked-correct) {
    --ui-option-art: var(--ui-confirm-execute);
}
#battle-mode-game .option-btn.option-btn-picked-wrong {
    --ui-option-art: var(--ui-danger);
}
dialog.screen-overlay select,
#battle-mode-game .boss-input {
    background: var(--ui-field) center / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    color: #263e30;
    padding-inline: 16px;
}
#battle-mode-game .boss-input-correct {
    outline: 2px solid #8dda9c;
}
#battle-mode-game .boss-input-wrong {
    outline: 2px solid #e9aa9e;
}

/* Independent icon files are shared by headings, navigation and gameplay. */
.game-emblem {
    background: var(--ui-icon) center / contain no-repeat;
    filter: none;
}
.emblem-book {
    --ui-icon: url('../../images/theme/parts/ui-book.webp?v=066ef792d67d');
}
.emblem-swords {
    --ui-icon: url('../../images/theme/parts/ui-swords.webp?v=b4ffe6b9675e');
}
.emblem-dragon {
    --ui-icon: url('../../images/theme/parts/ui-dragon.webp?v=958cd86a6cba');
}
.emblem-chest {
    --ui-icon: url('../../images/theme/parts/ui-chest.webp?v=ed777e196d79');
}
.emblem-shield {
    --ui-icon: url('../../images/theme/parts/ui-backpack.webp?v=4fd8d16011ba');
}
.emblem-trophy {
    --ui-icon: url('../../images/theme/parts/ui-trophy.webp?v=7f5617f39fa6');
}
.emblem-gears {
    --ui-icon: url('../../images/theme/parts/ui-gear.webp?v=6b0bb7365a86');
}
.emblem-quill {
    --ui-icon: url('../../images/theme/parts/ui-scroll.webp?v=3d282987160b');
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .game-emblem {
    background-image: var(--ui-icon);
}
#statistics-modal .emblem-trophy {
    --ui-icon: url('../../images/theme/parts/ui-bars.webp?v=230d0ac60fec');
}
.item-art {
    display: inline-block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    vertical-align: middle;
}
.inv-slot .item-art,
.inv-item .item-art {
    width: 100%;
    height: 100%;
    max-width: 48px;
    max-height: 48px;
}
.hero-weapon .item-art,
.hero-effect .item-art,
.hero-head .item-art {
    width: 100%;
    height: 100%;
}
.skill-btn .item-art {
    width: 24px;
    height: 24px;
}

/* Simple generated navigation icons coexist with native fullscreen semantics. */
.music-toggle-btn {
    position: relative;
    font-size: 0 !important;
    padding: 8px !important;
}
.music-toggle-btn::after {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    background: url('../../images/theme/parts/ui-music.webp?v=f9c7cb49f7c7') center / contain no-repeat;
}
.music-toggle-btn[aria-pressed='false']::after {
    opacity: 0.65;
}
.practice-speak-btn {
    font-size: 0;
}
.practice-speak-btn::after {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    background: url('../../images/theme/parts/ui-music.webp?v=f9c7cb49f7c7') center / contain no-repeat;
}
#practice-prev-btn::before,
#practice-next-btn::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 16px;
    vertical-align: middle;
    background: url('../../images/theme/parts/ui-left.webp?v=d80472b38b4a') center / contain no-repeat;
}
#practice-next-btn::after {
    background-image: url('../../images/theme/parts/ui-right.webp?v=0d63e0fe98b2');
}

/* The global control keeps its tested frame position; only its surface changes. */
#global-fullscreen-btn {
    background: var(--ui-answer) center / 100% 100% no-repeat;
    border: 0;
    box-shadow: none;
    color: var(--ui-text-on-art);
}
#practice-speak-btn {
    font-size: 0 !important;
    padding: 8px !important;
}
#practice-memorized-btn {
    background: var(--ui-control-art) center / 100% 100% no-repeat !important;
    border: 0 !important;
}
#practice-memorized-btn[aria-pressed='true'] {
    outline: 2px solid #e3f2c9;
    outline-offset: -2px;
}
#detail-close {
    background: var(--ui-secondary) center / 100% 100% no-repeat;
    border: 0;
    color: var(--ui-text-on-art);
}
.equipped-weapon .item-art,
.hero-effect .item-art {
    width: 24px;
    height: 24px;
}
.hero-equip-slot .item-art {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
}

/* 전투와 장비 메뉴는 같은 포즈·정사각형 좌표의 착용 부품을 공유한다. */
.equipment-avatar {
    position: relative;
    aspect-ratio: 1;
    isolation: isolate;
}
.inventory-boy .equipment-avatar {
    width: 100%;
    max-width: 184px;
}
.equipment-avatar .avatar-body {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.equipment-avatar .avatar-layer {
    position: absolute;
    inset: 0;
    background: url('../../images/theme/parts/avatar-equipment.webp?v=be0672e861d8') 0 0 / 300% 100% no-repeat;
    pointer-events: none;
    z-index: 8;
    transform-origin: 0 0;
}
.equipment-avatar .avatar-helmet {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: none;
    z-index: 5;
}
.equipment-avatar[data-helmet='true'] > .avatar-body {
    visibility: hidden;
}
.equipment-avatar :is(.avatar-glove-near, .avatar-glove-far) {
    background-position: 50% 0;
    z-index: 9;
}
.equipment-avatar .avatar-glove-near {
    clip-path: inset(40% 50% 25% 0);
}
.equipment-avatar .avatar-glove-far {
    clip-path: inset(40% 0 25% 50%);
}
.equipment-avatar .avatar-boot-near {
    clip-path: inset(60% 50% 0 0);
}
.equipment-avatar .avatar-boot-far {
    clip-path: inset(60% 0 0 50%);
}
.equipment-avatar .avatar-glove-near {
    transform: translate(26%, 15%) scale(0.72);
}
.equipment-avatar .avatar-glove-far {
    transform: translate(37%, 22%) scale(0.65);
}
.equipment-avatar :is(.avatar-boot-near, .avatar-boot-far) {
    background-position: 100% 0;
    z-index: 7;
}
.equipment-avatar .avatar-boot-near {
    transform: translate(15%, 25%) scale(0.75);
}
.equipment-avatar .avatar-boot-far {
    transform: translate(20%, 25%) scale(0.75);
}
.equipment-avatar :is(.avatar-weapon, .avatar-secondary) {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    pointer-events: none;
    transform: none;
    filter: none;
    mask-image: radial-gradient(
        ellipse 6% 7% at var(--held-hand-x) var(--held-hand-y),
        transparent 85%,
        var(--color-black) 100%
    );
}
.equipment-avatar :is(.avatar-weapon, .avatar-secondary) .item-art {
    position: absolute;
    display: block;
    left: var(--held-left);
    top: var(--held-top);
    width: var(--held-size);
    height: var(--held-size);
    object-fit: contain;
    transform: rotate(var(--held-angle));
    transform-origin: var(--held-grip-x) var(--held-grip-y);
}
.equipment-avatar [data-avatar-part][hidden] {
    display: none;
}
.inv-slot-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #afc3a5;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    opacity: 0.7;
}
.shop-economy-guide {
    color: var(--menu-ink, #243c2b);
    margin: 0 0 12px;
    font-size: clamp(14px, 4cqw, 20px);
    line-height: 1.6;
    font-weight: 700;
}
.shop-economy-guide small {
    font-weight: 400;
}