/* Modular images derived from the approved menu concept. Values stay live HTML. */
:root {
    --ui-action: url('../../images/theme/parts/game-action.webp?v=585bfbd71ba2');
    --ui-secondary: url('../../images/theme/parts/calm-secondary.webp?v=ff3a47c11c10');
    --ui-danger: url('../../images/theme/parts/game-danger.webp?v=32b11173ce50');
    --ui-confirm-cancel: url('../../images/theme/parts/confirm-cancel.webp?v=6f58fc71b39e');
    --ui-confirm-execute: url('../../images/theme/parts/confirm-execute.webp?v=cda00005b4ab');
    --popup-title-size: clamp(22px, calc(var(--title-container-width, 100vw) * 0.075), 32px);
    --ui-home: url('../../images/theme/parts/game-home.webp?v=601ee855e220');
    --ui-choice: url('../../images/theme/parts/game-answer.webp?v=30bf5205d468');
    --ui-small-control: url('../../images/theme/parts/game-control.webp?v=90d11ce28542');
    --ui-field: url('../../images/theme/parts/approved-field.webp?v=5732d9906e2c');
    --ui-panel: url('../../images/theme/parts/approved-frame.webp?v=2fad87808226');
    --ui-answer: url('../../images/theme/parts/approved-slot.webp?v=7d88bb11e662');
    --menu-paper: url('../../images/theme/parts/approved-paper.webp?v=00debccf88d6');
}

/* 녹색 선택창의 항목 제목은 밝게, 양피지 입력칸의 값은 기존 어두운 잉크로 표시한다. */
.card.mode-selection .mode-selection-body > label,
.card.mode-selection .mode-question-types legend {
    color: var(--ui-text-label);
    font-weight: 800;
    text-shadow: none;
}
#practice-mode-game .practice-explanation-hint {
    color: #e9e3bf;
    opacity: 1;
}

/* 로비 모드 이름은 이미지에 넣지 않고 게임·선택창과 같은 문구를 쓴다. */
.title-menu-art #title-practice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--ui-action) center / 100% 100% no-repeat;
}
.title-menu-art #title-practice-btn > img {
    width: 30%;
    height: 65%;
    flex: 0 0 30%;
    object-fit: contain;
}
.practice-menu-caption {
    color: #fff7e0;
    font-size: clamp(12px, 3.7cqw, 20px);
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: 0 2px 3px #16331e;
}

/* 내부 메뉴·결과의 닫기는 팝업 우상단의 44px X로 통일한다. */
:is(
    .card.rpg-modal,
    .card.mode-selection,
    .card.story-card,
    .story-map-card,
    .revenge-panel,
    .result-modal,
    .skyfall-result
) {
    position: relative;
}
:is(.modal-header, .menu-heading, .story-map-header, .revenge-panel > header, #detail-header) {
    position: relative;
}
.modal-close-x {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #fff7df;
    background: var(--ui-small-control) center / 100% 100% no-repeat;
    box-shadow: none;
    font:
        800 25px/1 system-ui,
        sans-serif;
    cursor: pointer;
}
.modal-close-x:hover {
    filter: brightness(1.12);
}
.modal-close-x:active {
    transform: scale(0.94);
}
.modal-close-x:focus-visible {
    outline: 2px solid #ffe7a6;
    outline-offset: 2px;
}
.modal-close-x-glyph {
    display: block;
    font:
        800 25px/1 system-ui,
        sans-serif;
}
.story-map-header > .btn-gray {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ui-small-control) center / 100% 100% no-repeat;
    color: #fff7df;
    box-shadow: none;
    flex: 0 0 44px;
    font:
        800 25px/1 system-ui,
        sans-serif;
}
.story-map-header > .btn-gray:hover {
    filter: brightness(1.12);
}
.story-map-header > .btn-gray .visually-hidden {
    position: absolute;
}
.result-modal .modal-close-x,
.skyfall-result .modal-close-x {
    top: 10px;
    right: 10px;
}

.practice-memorization-arena {
    flex-basis: clamp(150px, 24cqh, 250px);
    min-height: 0;
    background-size: cover;
}

/* 풀이·단어·뜻을 먼저 확보하고, 남는 높이만 배경에 사용한다. */
#practice-mode-game .practice-memorization-arena {
    flex: 0 999 clamp(44px, 18cqh, 180px);
    min-height: 44px;
}
#practice-mode-game .practice-memorization-content {
    flex: 1 1 auto;
    margin-top: 0;
    padding-block: 8px;
    gap: 8px;
}
#practice-mode-game
    :is(.practice-word-section, .practice-meaning-section, .practice-explanation-section) {
    min-height: 0;
    padding: 8px 12px;
}
#practice-mode-game .practice-meaning-text {
    margin-top: 0;
}
#practice-mode-game .practice-explanation-text {
    line-height: 1.4;
}

/* 연습 화면은 앱 프레임 안에서만 스크롤하고, 페이지 배경은 고정한다. */
#practice-mode-game,
#practice-mode-game .practice-memorization-container {
    overflow: hidden;
    overscroll-behavior: contain;
}

/* 높이 경계에서 카드 크기가 갑자기 바뀌지 않도록 연속적으로 조절한다. */
#practice-mode-game .practice-memorization-content {
    gap: clamp(4px, 1cqh, 8px);
    padding: clamp(4px, 1cqh, 8px) 10px;
}
#practice-mode-game
    :is(.practice-word-section, .practice-meaning-section, .practice-explanation-section) {
    border-width: 6px !important;
    border-image-width: 6px !important;
    padding: clamp(4px, 1cqh, 8px) 8px;
}
#practice-mode-game .practice-word-text {
    font-size: clamp(24px, 4.2cqh, 36px);
    line-height: 1.15;
}
#practice-mode-game .practice-word-section::after {
    display: none;
}
#practice-mode-game .practice-meaning-text {
    font-size: clamp(16px, 2.7cqh, 23px);
    line-height: 1.25;
}
#practice-mode-game .practice-explanation-text {
    font-size: clamp(14px, 2cqh, 16px);
    line-height: 1.35;
}
#practice-mode-game .gameplay-card-label {
    font-size: 11px;
    margin-bottom: 2px;
}
#practice-mode-game .practice-explanation-hint {
    margin-top: 2px;
    font-size: 10px;
}
#practice-mode-game .practice-memorized-row {
    padding: 4px 10px;
}
#practice-mode-game .practice-memorization-navigation {
    padding: 0 10px max(4px, env(safe-area-inset-bottom));
}
#practice-mode-game .practice-nav-btn {
    height: 44px;
    min-height: 44px;
    font-size: 13px;
    white-space: nowrap;
}
#practice-mode-game :is(#practice-prev-btn, #practice-next-btn)::before {
    display: none;
}
@media (max-height: 420px) {
    #practice-mode-game .practice-memorization-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: max-content max-content;
        align-content: start;
    }
    #practice-mode-game .practice-explanation-section {
        grid-column: 1 / -1;
    }
    #practice-mode-game .practice-meaning-section {
        display: grid;
        align-items: center;
    }
    #practice-mode-game .practice-memorization-header {
        top: 0;
    }
}
#practice-mode-game .practice-memorization-content {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 뜻은 항상 보이며, 회상 안내/숨기기 조작은 표시하지 않는다. */
#practice-mode-game .practice-meaning-section {
    justify-content: center;
}

/* 연습 화면의 필터·발음·이동 버튼을 같은 이미지 재질로 통일한다. */
#practice-mode-game :is(.practice-chip, .practice-nav-btn, .practice-speak-btn) {
    --ui-control-art: var(--ui-action);
    border: 12px solid transparent !important;
    border-image: var(--ui-control-art) 48 fill / 12px / 0 stretch !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ui-text-warm) !important;
    box-shadow: none !important;
}
#practice-mode-game .practice-speak-btn {
    --ui-control-art: var(--ui-small-control);
}

dialog.screen-overlay .card.story-map-card {
    width: calc(var(--title-container-width, 100vw) - 32px);
    max-width: min(600px, calc(var(--title-container-width, 100vw) - 32px));
    max-height: calc(var(--app-height, 100dvh) - 84px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: calc(10px - var(--popup-header-padding)) 10px 10px;
    color: #f5eccd;
    border-radius: 0;
    border-image-slice: 15% fill !important;
    overscroll-behavior: contain;
}
.story-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative !important;
    flex: 0 0 auto;
    z-index: 10;
    padding: var(--popup-header-padding) 0;
    background: none;
}
.story-map-header h2 {
    margin: 0;
    color: #fff3d2;
    font-size: clamp(28px, 10cqw, 38px);
    line-height: 1.2;
    text-shadow: 0 2px 1px #133a27;
}
#story-map-content,
.story-popup-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
}
.story-map-header button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: var(--ui-home) center / 100% 100% no-repeat;
    color: #fff8df;
    cursor: pointer;
}
#story-market-status {
    color: #f1ddb3;
    line-height: 1.4;
}
.story-map-path {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 12px auto;
    isolation: isolate;
    background: #ecdcb6;
    box-shadow: 0 8px 20px #07140b88;
}
.story-map-path::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(#fff6db22, #fff6db22),
        url('../../images/theme/story-map-background.webp?v=78cc2a810673') center / cover no-repeat;
    pointer-events: none;
}
.story-map-row {
    display: contents;
}
.story-map-edges,
.story-map-edges svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.story-map-edges path {
    fill: none;
    stroke: #836341;
    stroke-width: 2px;
    opacity: 0.5;
    vector-effect: non-scaling-stroke;
}
.story-map-edges path.available {
    stroke: #31714c;
    stroke-width: 3px;
    opacity: 1;
}
.story-map-edges path.visited {
    stroke: #795923;
    opacity: 1;
}
.story-map-node {
    --crown-color: #ddc58d;
    position: absolute;
    z-index: 1;
    width: clamp(44px, 13%, 60px);
    aspect-ratio: 1;
    padding: 0;
    transform: translate(-50%, -50%);
    background: #17382f;
    border: 3px solid #f9de8b;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #26331c;
    cursor: pointer;
}
.story-map-node::before {
    content: '';
    position: absolute;
    inset: 7px;
    background: var(--map-node-icon, url('../../images/theme/parts/ui-swords.webp?v=b4ffe6b9675e')) center /
        contain no-repeat;
    pointer-events: none;
}
.story-map-node-label {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    display: block;
    width: max-content;
    max-width: 110px;
    padding: 3px 7px;
    transform: translateX(-50%);
    color: #fff9dc;
    background: #17382fea;
    border: 1px solid #e4c47e;
    border-radius: 8px;
    font-family: inherit;
    font-size: clamp(10px, 2.8vw, 13px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    pointer-events: none;
}
.story-map-node-market {
    border-color: #cfadf4;
    --map-node-icon: url('../../images/theme/parts/approved-coin.webp?v=8a6fc77092b1');
}
.story-map-node-treasure {
    --map-node-icon: url('../../images/theme/parts/ui-chest.webp?v=ed777e196d79');
}
.story-map-node-objective {
    --map-node-icon: url('../../images/theme/parts/monster-slime.webp?v=688e0ed43d2a');
}
.story-map-node-spelling {
    --map-node-icon: url('../../images/theme/parts/monster-goblin.webp?v=8ed392d569a1');
}
.story-map-node-listening {
    --map-node-icon: url('../../images/theme/parts/monster-bat.webp?v=6eca356df838');
}
.story-map-node-assault {
    --map-node-icon: url('../../images/theme/parts/calm-attack-icon.webp?v=f17fabaf4b5d');
    border-color: #a2d8e1;
}
.story-map-node-miniboss {
    --map-node-icon: url('../../images/theme/parts/monster-dragon.webp?v=fb0ed4814d7e');
    border-color: #ffaf80;
}
.story-map-node-mystery::before {
    content: '?';
    background: none;
    color: #fff3c8;
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}
.story-map-node-boss {
    border-color: #ffaf80;
    --map-node-icon: url('../../images/theme/parts/monster-dragon.webp?v=fb0ed4814d7e');
}
.story-map-row[data-state='current'] .story-map-node-label {
    display: block;
}
.story-map-row[data-state='current'] .story-map-node:not(:disabled) {
    z-index: 2;
    box-shadow:
        0 0 0 3px #213523,
        0 0 0 5px #f6df7499;
}
.story-map-path .story-map-row .story-map-node:disabled {
    opacity: 0.32;
    filter: grayscale(0.8);
    cursor: not-allowed;
    pointer-events: none;
}
.story-map-row[data-state='passed'] .story-map-node {
    opacity: 0.6;
}
.story-map-row[data-state='passed'] .story-map-node[data-visited='true'] {
    border-color: #ffe69b;
    box-shadow: 0 0 0 3px #ffe69b88;
}
.story-map-path .story-map-node[data-cleared='true']:disabled {
    opacity: 1;
    filter: none;
    border: 4px double var(--crown-color);
    box-shadow: 0 0 0 2px #26331c;
}
.story-map-node[data-cleared='true']::before,
.story-map-node[data-cleared='true'] .story-map-node-label {
    opacity: 0.32;
}
.story-map-path .story-map-node[data-crown='gold'] {
    --crown-color: #ffd45c;
}
.story-map-path .story-map-node[data-crown='silver'] {
    --crown-color: #e2e8ec;
}
.story-map-path .story-map-node[data-crown='bronze'] {
    --crown-color: #d79a60;
}
.story-map-crown {
    position: absolute;
    top: -9px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 3px;
    color: var(--crown-color);
    background: #17382f;
    border: 1px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
}
.story-map-crown svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.story-map-restart {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 50%;
    width: 56%;
    min-height: 44px;
    transform: translateX(-50%);
}
.story-treasure-art {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: 16px auto;
}
.story-treasure-card .image-action-button {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
}
@media (max-height: 500px) {
    .story-map-header h2 {
        font-size: 22px;
    }
    .story-map-header button {
        min-width: 60px;
    }
}
.story-market-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 12px;
    background: #244539;
    border: 1px solid #b69556;
    border-radius: 14px;
}
.story-market-item > span:first-child {
    font-size: 28px;
}
.story-market-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.story-market-actions button {
    flex: 1;
    min-width: 130px;
}

.lobby-weapon-burst {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 9;
    pointer-events: none;
    color: #fff5ce;
    filter: drop-shadow(0 0 9px currentColor);
}
.lobby-weapon-burst[data-element='fire'] {
    color: #ff8b42;
}
.lobby-weapon-burst[data-element='ice'] {
    color: #a5eaff;
}
.lobby-weapon-burst[data-element='lightning'] {
    color: #fff16d;
}
.lobby-weapon-burst[data-element='void'] {
    color: #ce9eff;
}
.lobby-weapon-burst[data-element='gold'] {
    color: #ffe28a;
}
.lobby-weapon-burst img {
    position: absolute;
    width: 72px;
    height: 72px;
    left: -36px;
    top: -36px;
    object-fit: contain;
    animation: lobby-strike 0.7s ease-out both;
}
.lobby-weapon-burst span {
    position: absolute;
    width: 9px;
    height: 9px;
    left: -4px;
    top: -4px;
    border-radius: 50%;
    background: currentColor;
    animation: lobby-spark 0.7s ease-out both;
    transform: rotate(calc(var(--i) * 72deg));
}
@keyframes lobby-strike {
    from {
        opacity: 0;
        transform: scale(0.35) rotate(-45deg);
    }
    35% {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: scale(1.5) rotate(35deg);
    }
}
@keyframes lobby-spark {
    from {
        opacity: 1;
        transform: rotate(calc(var(--i) * 72deg)) translateX(0);
    }
    to {
        opacity: 0;
        transform: rotate(calc(var(--i) * 72deg)) translateX(60px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lobby-weapon-burst img,
    .lobby-weapon-burst span {
        animation-duration: 0.1s;
    }
}

/* 상단 조작 영역까지 같은 일러스트 장면을 이어 붙인다. */
#practice-mode-game::before,
#skyfall-mode-game::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-position: center;
    background-size: cover;
}
#practice-mode-game::before {
    background-image: linear-gradient(#173d3230, #173d3266), url('../../images/theme/library.webp?v=6bc816130648');
}
#skyfall-mode-game::before {
    background-image:
        linear-gradient(#102f2b33, #102f2b66), url('../../images/theme/skyfall-field.webp?v=7c49a58641aa');
}
#practice-mode-game .gameplay-header,
#practice-mode-game .practice-memorization-arena,
#skyfall-mode-game .skyfall-hud {
    background: transparent !important;
}
#practice-mode-game .practice-memorization-container {
    background: transparent !important;
}
#practice-mode-game .gameplay-header,
#practice-mode-game .practice-memorization-container,
#skyfall-mode-game > :is(.skyfall-hud, .skyfall-field, .skyfall-answer-panel) {
    position: relative;
    z-index: 1;
}
@media (max-height: 550px) {
    .practice-memorization-arena,
    :root[data-compact='true'] .practice-memorization-arena {
        flex-basis: 100px;
        min-height: 100px;
    }
    :root[data-compact='true'] .practice-word-section {
        min-height: 80px;
    }
}

@media (max-height: 420px) {
    .practice-memorization-arena,
    :root[data-compact='true'] .practice-memorization-arena {
        flex-basis: 76px;
        min-height: 76px;
    }
    :root[data-compact='true'] .practice-memorized-row {
        padding-block: 0;
    }
    :root[data-compact='true'] .practice-memorization-navigation {
        padding-block: 0 4px;
    }
    :root[data-compact='true'] .practice-memorization-navigation .practice-nav-btn {
        min-height: 44px;
        padding-block: 3px;
    }
}

/* Preserve each illustrated button corner instead of stretching it into an oval. */
:is(
        .mode-actions,
        .story-actions,
        .app-confirm-actions,
        #detail-actions,
        .listening-actions,
        .spelling-tools
    )
    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,
#practice-memorized-btn {
    border: 12px solid transparent !important;
    border-image: var(--ui-control-art, var(--ui-action)) 48 fill / 12px / 0 stretch !important;
    background: transparent !important;
    padding: 3px 8px !important;
    border-radius: 0 !important;
    min-height: 44px;
}

button:is(.gold-arrow, .num-btn, .music-toggle-btn, .practice-speak-btn) {
    --ui-control-art: var(--ui-small-control);
}
button.image-action-button:has(.menu-home-icon),
button[data-action='result-close'] {
    --ui-control-art: var(--ui-home);
}
#battle-mode-game .boss-submit {
    --ui-control-art: var(--ui-danger);
}
button:has(> .action-icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
button .action-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex: 0 0 24px;
    object-fit: contain;
}
.gameplay-actions :is(.music-toggle-btn, .practice-nav-btn) {
    width: 44px;
    height: 44px;
    border: 0 !important;
    border-image: none !important;
    background: var(--ui-small-control) center / 100% 100% no-repeat !important;
    padding: 8px !important;
    white-space: nowrap;
}
.gameplay-actions .practice-nav-exit {
    width: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game) {
    --header-top: max(12px, env(safe-area-inset-top));
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .gameplay-header {
    height: calc(var(--header-top) + 57px);
    min-height: calc(var(--header-top) + 57px);
    padding-block: var(--header-top) 12px;
    gap: 8px;
}

/* One continuous scene behind the unchanged header and arena content. */
#battle-mode-game {
    --battle-scene-height: max(35cqh, 252px);
    --battle-scene-tint: linear-gradient(#114a2b00 55%, #143f3f77);
}
:root[data-compact='true'] #battle-mode-game {
    --battle-scene-height: max(35cqh, clamp(160px, 42cqh, 230px));
}
#battle-mode-game[data-game-mode='boss'] {
    --battle-scene-tint: linear-gradient(#4762b01a, #223e5377);
}
#battle-mode-game::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--header-top) + 57px + var(--battle-scene-height));
    background-image: var(--battle-scene-tint), url('../../images/theme/guild-courtyard.webp?v=6093abb89d1f');
    background-size: cover;
    background-position: center 62%;
    pointer-events: none;
    z-index: 0;
}
#battle-mode-game .gameplay-header {
    background: linear-gradient(#112b2170, #112b212d);
}
#battle-mode-game .battle-arena,
#battle-mode-game[data-game-mode='boss'] .battle-arena {
    background: none;
    z-index: 1;
}

.battle-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
}
.battle-status .overlay-gold {
    flex: 0 0 auto;
}
#battle-mode-game .overlay-timer {
    display: flex;
    align-items: center;
    min-height: 34px;
}
.gameplay-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 44px;
}
.gameplay-heading p {
    margin-top: 3px;
}
.music-toggle-btn::after {
    position: absolute;
    top: 8px;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    background-image: url('../../images/theme/parts/game-music-off.webp?v=947b6c8c1230');
    opacity: 1 !important;
}
.music-toggle-btn::before {
    content: 'OFF';
    position: absolute;
    bottom: 7px;
    left: 0;
    width: 100%;
    font-size: 8px;
    line-height: 8px;
    font-weight: 900;
    letter-spacing: 0.6px;
    color: #fff3d2;
    text-align: center;
}
.music-toggle-btn[data-music-state='on']::before {
    content: 'ON';
}
.music-toggle-btn[data-music-state='on']::after {
    background-image: url('../../images/theme/parts/game-music-on.webp?v=bf18dbfc67f4');
}

/* A visible native select keeps both the selected track and its list readable. */
.music-info-overlay,
.practice-memorization-arena .music-info-overlay {
    top: auto;
    bottom: 10px;
    width: 164px;
    max-width: calc(100% - 32px);
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    backdrop-filter: none;
}
.music-track-select {
    display: block;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid var(--ui-field-border);
    border-radius: 9px;
    background: var(--ui-field-bg);
    color: var(--menu-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    opacity: 1;
    appearance: auto;
    color-scheme: light;
}
.music-track-select option,
.music-track-select option:checked {
    background: var(--ui-field-bg);
    color: var(--menu-ink);
}
.gameplay-heading h2 {
    white-space: nowrap;
    font-size: clamp(14px, 4cqw, 19px);
}
.gameplay-day-label {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: #f8df9d;
    font-size: clamp(10px, 3cqw, 14px);
    font-weight: 800;
    white-space: nowrap;
}
#battle-mode-game .gameplay-heading {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: start;
    column-gap: 5px;
}
#battle-mode-game .gameplay-heading .gameplay-day-label {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
}
#battle-mode-game .gameplay-heading p {
    grid-column: 1 / -1;
    grid-row: 2;
}
@container battle-game (max-width: 350px) {
    #battle-mode-game .gameplay-heading {
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }
    #battle-mode-game .gameplay-heading .gameplay-day-label {
        grid-column: 1;
        grid-row: 2;
        margin-left: 0;
        line-height: 1.2;
    }
    #battle-mode-game .gameplay-heading:has(.gameplay-day-label:not([hidden])) p {
        display: none;
    }
}
.gameplay-heading p {
    white-space: nowrap;
    font-size: clamp(8px, 1.8cqw, 10px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Answer rims keep a fixed thickness; labels live inside the frame. */
#battle-mode-game .option-btn {
    --ui-option-art: var(--ui-choice);
    border: 12px solid transparent !important;
    border-image: var(--ui-option-art) 48 fill / 12px / 0 stretch !important;
    border-radius: 0;
    background: transparent !important;
    padding: 8px 12px !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}
#battle-mode-game .option-btn::before {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    content: none;
}

/* 모드 셋은 한 줄에 배치하고 왼쪽 아이콘으로 폭을 줄인다. */
.title-menu-art {
    aspect-ratio: 1490 / 560;
}
.title-menu-art .menu-hotspot {
    transform: scale(0.88);
    transform-origin: center;
}
.title-menu-art :is(#title-story-mode-btn, #title-battle-mode-btn, #title-practice-btn) {
    top: 0;
    width: 33.333333%;
    height: 42%;
    min-height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: clamp(12px, 3.5cqw, 20px);
}
.title-menu-art #title-story-mode-btn {
    left: 0;
}
.title-menu-art #title-battle-mode-btn {
    left: 33.333333%;
}
.title-menu-art #title-practice-btn {
    left: 66.666667%;
}
.title-menu-art :is(.battle-menu-caption, .practice-menu-caption) {
    font-size: clamp(12px, 3.5cqw, 20px);
}
.title-menu-art :is(#title-story-mode-btn, #title-battle-mode-btn, #title-practice-btn) > img {
    width: 20%;
    height: 48%;
    flex: 0 0 20%;
    object-fit: contain;
    transform: translateX(-2px);
}
.title-menu-art
    :is(#title-shop-btn, #title-inventory-btn, #title-statistics-btn, #title-setting-btn) {
    top: 48%;
    height: 52%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px;
    background: var(--ui-small-control) center / 100% 100% no-repeat;
    color: #fff7e0;
    font-weight: 900;
    font-size: clamp(10px, 2.8cqw, 14px);
    line-height: 1;
}
.title-menu-art
    :is(#title-shop-btn, #title-inventory-btn, #title-statistics-btn, #title-setting-btn)
    > img {
    width: 28%;
    height: 35%;
    flex: 0 0 auto;
    object-fit: contain;
}
.title-toolbar .revenge-shortcut .action-icon {
    transform: none;
}

/* Skyfall results share the illustrated frame, parchment and home control. */
#skyfall-result-modal .skyfall-result {
    width: min(440px, calc(var(--title-container-width, 100vw) - 24px));
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding: 14px;
    border: 18px solid transparent;
    border-image: var(--ui-panel) 48 fill / 18px / 0 stretch;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    font-family: inherit;
}
#skyfall-result-modal .result-emblem {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
}
#skyfall-result-modal h2 {
    font-size: clamp(20px, 5cqw, 27px);
    line-height: 1.25;
}
#skyfall-result-detail {
    font-size: 14px;
    line-height: 1.5;
}
#skyfall-mode-modal .skyfall-selection .menu-heading h2 {
    color: #fff4cb;
    text-shadow: 0 2px 3px #102b2b99;
}
#skyfall-result-modal .skyfall-result-stats {
    margin: 14px 0;
}
#skyfall-result-modal .skyfall-result-stats div {
    border: 10px solid transparent;
    border-image: var(--menu-paper) 15% fill / 10px / 0 stretch;
    border-radius: 0;
    background: transparent;
    padding: 8px 4px;
}
#skyfall-result-modal .skyfall-result-stats small {
    color: #514332;
    font-size: 13px;
}
#skyfall-result-modal .skyfall-result-stats strong {
    color: #2d3928;
    font-size: 21px;
    font-variant-numeric: tabular-nums;
}
@media (max-height: 500px) {
    #skyfall-result-modal .skyfall-result {
        padding-block: 8px;
    }
    #skyfall-result-modal .result-emblem {
        width: 32px;
        height: 32px;
        margin-bottom: 2px;
    }
    #skyfall-result-modal .skyfall-result-stats {
        margin: 8px 0;
    }
}
#battle-mode-game .option-btn:focus-visible {
    outline: 2px solid #fff3d2;
    outline-offset: -3px;
}

/* The artwork supplies the silhouette. A larger CSS radius must not crop its rim. */
#global-fullscreen-btn {
    background: var(--ui-small-control) center / 100% 100% no-repeat;
    border-radius: 0;
    border: 0;
    overflow: visible;
    color: var(--ui-field-bg);
}
#global-fullscreen-btn:focus-visible {
    outline-offset: 3px;
}

:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .card.rpg-modal {
    width: calc(var(--title-container-width, 100vw) - 32px);
    max-width: min(600px, calc(var(--title-container-width, 100vw) - 32px));
    max-height: calc(var(--app-height, 100dvh) - 84px);
    padding: calc(10px - var(--popup-header-padding)) 10px 10px;
    border-radius: 0;
    border-image-slice: 15% fill !important;
    overflow: hidden;
    --theme-ink: var(--menu-ink);
    --theme-muted: #566348;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .modal-header {
    background: none;
    border: 0;
    border-radius: 0;
    min-height: var(--popup-header-min-height);
    padding: var(--popup-header-padding) 0;
    margin: 0;
    gap: 6px 8px;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .approved-menu-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    grid-template-rows: auto;
    align-items: center;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .modal-title {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(28px, 10cqw, 38px);
    line-height: 1.2;
    color: #fff3d2;
    text-shadow: 0 2px 1px #133a27;
    min-width: 0;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .modal-title .game-emblem {
    width: var(--popup-header-icon-size);
    height: var(--popup-header-icon-size);
    flex-shrink: 0;
}
.menu-wallet {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid #b4cc8d;
    border-radius: 16px;
    background: #082d20;
    color: var(--ui-text-warm);
    font-size: clamp(12px, 3.9cqw, 17px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: max-content;
    justify-self: end;
}
.menu-wallet img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
:is(#shop-modal, #statistics-modal, #setting-modal) .modal-body,
#inventory-modal .inv-container,
#inventory-modal #inv-item-detail {
    border: 12px solid transparent !important;
    border-image: var(--menu-paper) 15% fill / 12px / 0 stretch !important;
    border-radius: 0;
    padding: 6px;
    background: transparent !important;
    color: var(--menu-ink);
    min-width: 0;
}
:is(#shop-modal, #statistics-modal, #setting-modal) .modal-body,
#inventory-modal .inv-container {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .modal-footer {
    border: 0;
    padding: 10px 0 0;
    margin: 0;
    flex-shrink: 0;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .image-action-button {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 54px;
    font-size: 20px;
}
.image-action-button .menu-home-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex: 0 0 32px;
    object-fit: contain;
}
.image-action-button > span {
    white-space: nowrap;
}
#shop-modal .shop-section,
#statistics-modal .statistics-section,
#inventory-modal .inv-section-title {
    color: #514129;
    border: 0;
    font-size: 16px;
    line-height: 1.5;
    margin: 8px 0;
    padding: 0;
    text-shadow: none;
}
#shop-modal .shop-item,
#statistics-modal .statistics-item,
#setting-modal .setting-option-row,
.settings-gold-editor {
    border: 8px solid transparent !important;
    border-image: var(--menu-paper) 15% fill / 8px / 0 stretch !important;
    background: transparent;
    border-radius: 0;
    color: var(--menu-ink);
    padding: 6px;
    margin-bottom: 10px;
}
#shop-modal .shop-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    margin-bottom: 12px;
}
#shop-modal .shop-item-heading {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}
#shop-modal .shop-item-art {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    width: 48px;
    height: 48px;
    background: var(--ui-answer) center / 100% 100% no-repeat;
    padding: 6px;
    overflow: hidden;
}
#shop-modal .shop-item-art .item-art {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
}
#shop-modal :is(.shop-item-copy, .shop-item-description) {
    min-width: 0;
    color: var(--menu-ink);
    text-shadow: none;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
#shop-modal .shop-item-name {
    display: block;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
}
#shop-modal .shop-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
}
#shop-modal .shop-item-condition {
    display: inline-block;
    padding: 3px 7px;
    border: 1px solid var(--ui-field-border);
    border-radius: 6px;
    background: var(--ui-surface-forest);
    color: var(--ui-text-warm);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}
#shop-modal .shop-item-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}
#shop-modal .shop-item-purchase {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
    padding-top: 8px;
    border-top: 1px solid var(--ui-field-border);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#shop-modal .shop-price {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-height: 24px;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}
#shop-modal .buy-btn {
    flex: 0 0 88px;
    width: 88px;
    min-width: 88px;
    min-height: 44px;
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
}
@container (max-width: 280px) {
    :is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .modal-title {
        grid-column: 1 / 3;
        white-space: nowrap;
    }
    :is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .menu-wallet {
        grid-column: 1 / 3;
        grid-row: 2;
        justify-self: start;
    }
}

#inventory-modal .inv-player {
    display: block;
}
.inventory-paperdoll {
    --inventory-slot-size: clamp(44px, 17cqw, 56px);
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: var(--inventory-slot-size) minmax(0, 1fr) var(--inventory-slot-size);
    grid-template-rows: repeat(3, var(--inventory-slot-size));
    gap: 8px;
}
.inventory-boy {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    min-width: 0;
}
#inventory-modal .inventory-paperdoll .inv-slot {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 6px 6px 18px;
    position: relative;
    border-radius: 0;
}
#inventory-modal .inv-slot::after {
    content: attr(data-slot-label);
    position: absolute;
    bottom: 5px;
    inset-inline: 0;
    font-size: 10px;
    line-height: 12px;
    font-weight: 800;
    white-space: nowrap;
    color: #fff4d8;
}
#inventory-modal .inv-slot:disabled {
    opacity: 1;
    cursor: default;
}
#inventory-modal .inv-slot[data-empty='true'] .item-art {
    opacity: 0.4;
    filter: saturate(0.4);
}
#inv-head {
    grid-column: 1;
    grid-row: 1;
}
#inv-gloves {
    grid-column: 3;
    grid-row: 1;
}
#inv-hand-1 {
    grid-column: 1;
    grid-row: 2;
}
#inv-hand-2 {
    grid-column: 3;
    grid-row: 2;
}
#inv-foot-1 {
    grid-column: 3;
    grid-row: 3;
}
#inv-foot-2 {
    grid-column: 1;
    grid-row: 3;
}
.inventory-slot-caption {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    color: #566348;
}
.inventory-equipment-guide {
    border-block: 1px solid #cdbd91;
    padding: 8px 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--menu-ink);
}
.inventory-equipment-guide summary {
    cursor: pointer;
    font-weight: 800;
}
.inventory-equipment-guide dl {
    margin: 8px 0;
}
.inventory-equipment-guide dl > div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 6px;
    margin-block: 4px;
}
.inventory-equipment-guide dt {
    font-weight: 800;
}
.inventory-equipment-guide dd {
    margin: 0;
}
.inventory-equipment-guide p {
    margin: 0;
}
.inventory-bonus,
.inventory-storage-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    font-variant-numeric: tabular-nums;
}
.inventory-bonus strong {
    font-size: 24px;
}
#inventory-modal .inventory-storage-heading .inv-section-title {
    width: auto;
    margin: 0;
}
#inventory-modal .inv-capacity {
    margin: 0;
    color: #514129 !important;
    font-size: 14px;
    flex-shrink: 0;
    white-space: nowrap;
}
#inventory-modal .inv-capacity span {
    color: inherit;
}
#inventory-modal :is(.inv-items, .inv-relics) {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
}
#inventory-modal .inv-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
#inventory-modal .inv-items .inv-item {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: 8px;
    border-radius: 0;
}
.inventory-empty {
    grid-column: 1 / -1;
    font-size: 13px;
    margin: 8px 0;
}
#inventory-modal .relic-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    width: 100%;
    min-width: 0;
    background: #f4e3bd;
    color: var(--menu-ink);
    font-size: 13px;
    padding: 10px;
    text-align: left;
}
#inventory-modal .relic-item .item-art {
    display: block;
    width: 36px;
    height: 36px;
    min-width: 0;
    object-fit: contain;
}
#inventory-modal .relic-item-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
#inventory-modal .relic-item-name {
    font-size: 14px;
    font-weight: 800;
}
#inventory-modal .relic-item-remaining {
    font-size: 12px;
}
#inventory-modal #detail-desc {
    color: var(--menu-ink);
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
#inventory-modal #inv-item-detail {
    width: calc(100% - 24px);
    max-height: calc(100% - 36px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 40;
}
#inventory-modal #detail-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: start;
    gap: 8px;
    min-width: 0;
}
#inventory-modal #detail-icon {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    width: 44px;
    height: 44px;
    overflow: hidden;
}
#inventory-modal #detail-icon .item-art {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
}
#inventory-modal #detail-name {
    align-self: center;
    min-width: 0;
    color: var(--menu-ink);
    font-family: inherit;
    font-size: clamp(16px, calc(var(--title-container-width, 100vw) * 0.05), 20px);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
#inventory-modal #detail-close {
    position: static;
    inset: auto;
    width: 44px;
    height: 44px;
    margin: 0;
    background: url('../../images/theme/parts/approved-control.webp?v=722fcbc582fe') center / 100% 100% no-repeat;
    color: #fff6de;
    font-size: 25px;
    line-height: 1;
}
#inventory-modal #detail-actions {
    display: grid;
    gap: 8px;
    min-width: 0;
}
#inventory-modal #detail-actions:empty {
    display: none;
}
#inventory-modal #inv-close-btn {
    margin-top: 10px;
}

#statistics-modal .statistics-book-info {
    grid-column: 1 / -1;
    background: #59462d;
    color: #fff5d8;
    border-radius: 8px;
    text-align: center;
    padding: 6px 10px;
    margin: 4px 0;
    font-size: 13px;
    overflow-wrap: anywhere;
}
#statistics-modal :is(.statistics-stat-row, .statistics-value, .statistics-label) {
    color: var(--menu-ink);
    text-shadow: none;
}
#statistics-modal .statistics-value-correct {
    color: #30603f;
}
#statistics-modal .statistics-value-wrong {
    color: #984d38;
}
#statistics-modal .statistics-value-wave {
    color: var(--menu-ink);
    font-size: 28px;
}
#statistics-modal .statistics-stat-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
#statistics-modal .statistics-stat-row:first-child .statistics-value {
    font-size: 21px;
    font-weight: 900;
}
.statistics-progress {
    height: 10px;
    background: #d9c9a6;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
}
.statistics-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(#91cd62, #49a347);
    border-radius: inherit;
}
#setting-modal :is(.setting-checkbox-label, .setting-option-label, .setting-select) {
    color: var(--menu-ink);
    text-shadow: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}
#setting-modal .setting-checkbox-label {
    display: flex;
    gap: 8px;
}
#setting-modal .setting-checkbox-label input {
    margin-left: auto;
    flex-shrink: 0;
}
.setting-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}
.settings-gold-editor h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 18px;
}
.settings-gold-current {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
#setting-modal .gold-display-box {
    border: 0;
    background: var(--ui-field) center / 100% 100% no-repeat;
    color: var(--menu-ink);
    padding: 10px 6px;
    min-width: 0;
    font-size: 23px;
    font-variant-numeric: tabular-nums;
}
#setting-modal .gold-adjust-controls {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
}
#setting-modal .gold-arrow {
    width: 44px;
    height: 44px;
}
.settings-gold-apply {
    width: 100%;
    margin-top: 10px;
}
#setting-modal .settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
#setting-modal .settings-primary-actions {
    grid-template-columns: minmax(0, 1fr);
}
#setting-modal .settings-actions .modal-btn-main {
    min-width: 0;
    font-size: 13px;
}
#setting-modal .settings-actions .modal-btn-main > span {
    white-space: nowrap;
}
#setting-modal .settings-reset-game {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    color: #fff5db;
    --ui-control-art: var(--ui-danger);
}
@container (max-width: 320px) {
    #setting-modal .card.rpg-modal .settings-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}
#setting-modal .password-box {
    color: var(--menu-ink);
    background: #f4e3bd;
}
#setting-modal #password-error {
    color: #a1382f !important;
}
@media (max-height: 560px) {
    :is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .approved-menu-header {
        grid-template-rows: auto;
    }
    :is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .modal-title {
        grid-row: 1;
        font-size: 24px;
    }
    :is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .image-action-button {
        min-height: 48px;
        font-size: 16px;
    }
}

/* Monster lessons keep the existing illustrated frame and use live text/buttons. */
#battle-mode-game #hero-wrapper::before {
    display: none;
}
#battle-mode-game #hero-img {
    opacity: 1;
    object-fit: contain;
}
#battle-mode-game .battle-arena .char-wrapper:is(#hero-wrapper, :has(#monster-img)) {
    width: clamp(88px, 21cqh, 180px);
    height: clamp(88px, 21cqh, 180px);
}
#battle-mode-game[data-monster]:not([data-monster='']) .char-wrapper:has(#monster-img)::before {
    display: none;
}
#battle-mode-game[data-monster]:not([data-monster='']) #monster-img {
    opacity: 1;
    object-fit: contain;
    filter: drop-shadow(0 6px 3px #123b3d55);
}
#battle-mode-game .q-label {
    color: #d8edbd;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.5;
    margin: 0 0 6px;
}
#battle-mode-game .gameplay-card-label {
    letter-spacing: 0;
    line-height: 1.5;
    font-size: 11px;
}
#question-instruction:empty {
    display: none;
}
#battle-mode-game:is([data-question-kind='cloze'], [data-question-kind='riddle']) .q-text {
    font-size: clamp(16px, 4.4cqw, 24px);
    line-height: 1.55;
    text-wrap: pretty;
}
#battle-mode-game :is(.listening-panel, .spelling-panel)[hidden] {
    display: none;
}
#battle-mode-game .listening-panel {
    flex-shrink: 0;
    width: 100%;
}
#battle-mode-game .overlay-timer[hidden] {
    display: none;
}
#battle-mode-game[data-monster]:not([data-monster='']) .overlay-timer {
    align-self: start;
}
.listening-actions,
.spelling-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#battle-mode-game :is(.listening-actions, .spelling-tools) button {
    flex: 1 1 120px;
    min-width: 0;
    min-height: 44px;
    font-size: 13px;
    padding: 10px 12px;
    margin: 0;
    color: #fff6d8;
    text-shadow: none;
}
#battle-mode-game:is([data-question-kind='cloze'], [data-question-kind='riddle']) #boss-title {
    display: none;
}
#battle-mode-game:is([data-question-kind='cloze'], [data-question-kind='riddle']) .boss-hint {
    letter-spacing: normal;
    font-size: 14px;
    line-height: 1.6;
}
#listening-status {
    color: #d6e7d4;
    font-size: 12px;
    line-height: 1.5;
    margin: 8px 0 0;
}

#battle-mode-game .boss-letter-entry {
    position: relative;
    width: 100%;
    min-height: 52px;
}
#battle-mode-game #boss-title,
#battle-mode-game .boss-hint:not(.boss-hint-revealed) {
    display: none;
}
#boss-letter-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 6px;
}
#boss-letter-slots .letter-slot {
    width: 24px;
    min-height: 32px;
    font-size: 24px;
    color: var(--ui-text-warm);
    border-bottom: 2px solid #b4ce9c;
}
#boss-letter-slots .letter-slot-active {
    border-bottom-color: #ffd66b;
}
#battle-mode-game .boss-letter-entry #boss-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 16px;
    cursor: text;
}
#battle-mode-game .boss-letter-entry:focus-within {
    outline: 2px solid #e8d28e;
    outline-offset: 2px;
}
#battle-mode-game[data-keyboard='true'] {
    height: var(--keyboard-height) !important;
    top: var(--keyboard-top) !important;
}
#battle-mode-game[data-keyboard='true'] .battle-arena {
    display: none;
}
#battle-mode-game[data-keyboard='true'] .quiz-area {
    margin-top: 0;
    padding: 6px 12px;
    gap: 6px;
}
#battle-mode-game[data-keyboard='true'] #q-text {
    font-size: 22px;
}
#battle-mode-game[data-keyboard='true'] .question-box {
    padding: 4px;
    min-height: 0;
    border-width: 6px !important;
    border-image-width: 6px !important;
}
#battle-mode-game[data-keyboard='true'] #skill-display {
    display: none;
}
#battle-mode-game[data-keyboard='true'] .boss-ui {
    gap: 4px !important;
    padding-top: 0;
    margin-top: auto;
}
#battle-mode-game[data-keyboard='true'] .boss-submit {
    margin: 0 !important;
    height: 44px;
    min-height: 44px;
    padding: 4px !important;
    border-width: 6px !important;
    border-image-width: 6px !important;
    font-size: 14px;
}

[data-admin][hidden] {
    display: none !important;
}
.settings-actions:has([data-admin][hidden]) {
    grid-template-columns: 1fr;
}
.inventory-capacity-summary,
.shop-capacity-summary {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #dcc17b;
    border-radius: 8px;
    background: #183e32;
    color: #fff1cd;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    flex: 0 0 auto;
}
/* Gameplay controls share one compact header. The scene remains visible behind it. */
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .gameplay-header {
    position: relative;
    z-index: 20;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .gameplay-header
    > .game-emblem {
    display: none !important;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .gameplay-actions {
    position: static;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .gameplay-actions
    .practice-nav-exit {
    position: absolute;
    left: max(10px, env(safe-area-inset-left));
    top: var(--header-top);
    z-index: 3;
    --ui-control-art: var(--ui-danger);
    width: 44px;
    min-width: 44px;
    border: 0 !important;
    border-image: none !important;
    border-radius: 0 !important;
    background: var(--ui-small-control) center / 100% 100% no-repeat !important;
    filter: hue-rotate(240deg) saturate(1.6);
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .gameplay-heading {
    margin-left: 46px;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .music-info-overlay {
    display: block !important;
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    bottom: auto;
    z-index: 25;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 44px;
    background: var(--ui-small-control) center / 100% 100% no-repeat;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .music-info-overlay::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 12px;
    width: 20px;
    height: 14px;
    background: repeating-linear-gradient(
        to bottom,
        var(--ui-field-bg) 0 3px,
        transparent 3px 5.5px
    );
    pointer-events: none;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .music-info-overlay::after {
    content: '곡';
    position: absolute;
    bottom: 7px;
    left: 0;
    right: 0;
    color: var(--ui-field-bg);
    text-align: center;
    font:
        800 9px/1 system-ui,
        sans-serif;
    pointer-events: none;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .music-track-select {
    width: 44px;
    height: 44px;
    padding: 0 4px;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    text-shadow: none;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .music-track-select
    option {
    color: var(--menu-ink);
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .music-info-overlay:focus-within {
    outline: 2px solid #ffe7a6;
    outline-offset: 2px;
}
:is(#battle-mode-game, #practice-mode-game, #hangman-game, #shell-game, #story-puzzle-game)
    .gameplay-actions
    .music-toggle-btn {
    margin-left: auto;
}
#battle-mode-game #listening-status {
    display: none !important;
}
#battle-mode-game .option-btn::before,
#battle-mode-game .option-btn::after {
    content: none !important;
    display: none !important;
}
button .action-icon,
button img:not([class]) {
    transform: scale(0.8);
    transform-origin: center;
}
#practice-mode-game .practice-nav-btn:is(#practice-prev-btn, #practice-next-btn) {
    --ui-control-art: var(--ui-secondary);
    filter: saturate(0.78) brightness(1.08);
}
#practice-mode-game .practice-memorized-btn {
    --ui-control-art: var(--ui-action);
}
#practice-mode-game .practice-memorized-row .practice-speak-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 68px;
    height: 44px;
    min-height: 44px;
    border-width: 6px !important;
    border-image-width: 6px !important;
    padding: 2px !important;
    font-size: 11px !important;
    line-height: 1;
    white-space: nowrap;
}
#practice-mode-game .practice-speak-btn > img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
#practice-mode-game .practice-speak-btn::after {
    content: none;
}
#practice-mode-game .practice-memorized-row .practice-chip {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 2px !important;
    font-size: clamp(10px, 2.8cqw, 12px);
    white-space: normal;
    overflow-wrap: anywhere;
}
#overlay-gold,
.menu-wallet {
    font-weight: 900;
    font-size: clamp(14px, 4.2cqw, 19px);
    letter-spacing: 0.01em;
}
#overlay-gold {
    flex: 0 0 auto;
    width: auto;
    font-variant-numeric: tabular-nums;
}
#battle-mode-game .battle-status .overlay-gold {
    min-width: 0;
    justify-content: center;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal) .modal-title {
    padding-right: 0;
}
:is(#shop-modal, #inventory-modal, #statistics-modal, #setting-modal)
    .approved-menu-header
    > .modal-close-x {
    position: static;
    grid-column: 3;
    grid-row: 1;
}
#battle-mode-game .listening-actions button {
    box-shadow: none !important;
    animation: none;
    overflow: visible;
    background: transparent !important;
}
#battle-mode-game .listening-actions button::before {
    content: none;
}
:is(#shop-modal, #statistics-modal, #setting-modal) .modal-footer,
#inv-close-btn,
#revenge-modal footer > [data-action='revenge-close'] {
    display: none;
}
#battle-mode-game .spelling-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    flex-shrink: 0;
}
#battle-mode-game .quiz-area {
    justify-content: flex-start;
}
#battle-mode-game .options-grid {
    flex: 0 0 auto;
    margin-top: auto;
    grid-auto-rows: minmax(72px, auto);
}
#battle-mode-game[data-question-kind='listening'] .listening-panel {
    margin-top: 0;
}
#battle-mode-game[data-question-kind='listening'] .quiz-area {
    justify-content: flex-start;
    overflow-y: auto;
}
#battle-mode-game :is(.spelling-panel, .boss-ui, .listening-panel) {
    margin-top: auto;
}
#battle-mode-game .boss-ui {
    flex: 0 0 auto;
}
.spelling-answer,
.spelling-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}
.spelling-answer {
    color: #fff4d7;
    align-items: center;
    min-height: 38px;
    font-size: 20px;
    font-weight: 800;
}
.spelling-tiles {
    --tile-size: 44px;
    display: grid;
    grid-template-columns: repeat(var(--tile-columns, 1), minmax(0, var(--tile-size)));
}
.letter-slot {
    width: 25px;
    height: 34px;
    border-bottom: 2px solid #b2cd94;
    line-height: 32px;
    text-align: center;
}
.letter-separator {
    min-width: 10px;
    white-space: pre;
}
#battle-mode-game .letter-tile {
    width: 100%;
    height: 48px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 7px solid transparent;
    border-image: url('../../images/theme/parts/game-answer.webp?v=30bf5205d468') 40 fill / 7px / 0 stretch;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    color: #fff6d8;
    text-shadow: none;
    font-size: 20px;
    font-weight: 800;
    display: grid;
    place-items: center;
    line-height: 1;
    text-align: center;
}
#battle-mode-game .letter-tile > span {
    display: block;
    line-height: 1;
    transform: translateY(-1px);
}
#battle-mode-game .letter-tile:disabled {
    opacity: 0.3;
}
#battle-mode-game .letter-tile:focus-visible {
    outline: 2px solid #f5de9e;
    outline-offset: 2px;
}
#battle-mode-game .spelling-revealed {
    color: #ffccbb;
    overflow-wrap: anywhere;
}
#battle-mode-modal .mode-question-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
#battle-mode-modal .mode-question-types label {
    min-width: 0;
}
@container (max-width: 350px) {
    .spelling-answer,
    .spelling-tiles {
        gap: 4px;
    }
    .letter-slot {
        width: 22px;
    }
}

/* On short phones leave more room for the answer controls below the question. */
@container battle-game (max-height: 560px) {
    #battle-mode-game[data-monster]:not([data-monster='']) .quiz-area {
        gap: 8px;
    }
    #battle-mode-game[data-monster]:not([data-monster='']) .question-box {
        padding: 6px 8px;
        border-width: 8px;
        border-image-width: 8px;
    }
    #battle-mode-game[data-monster]:not([data-monster='']) .gameplay-card-label {
        display: none;
    }
    #battle-mode-game[data-monster]:not([data-monster='']) .q-label {
        margin-bottom: 2px;
        font-size: 11px;
    }
    #battle-mode-game[data-monster]:not([data-monster='']) .q-text {
        font-size: 18px;
    }
    #battle-mode-game .spelling-panel {
        gap: 8px;
    }
    #battle-mode-game :is(.listening-actions, .spelling-tools) button {
        padding: 1px 6px !important;
        line-height: 18px;
    }
}

/* Give answer controls priority on portrait screens near the 3:4 limit. */
@media (max-height: 850px) {
    :root[data-layout='portrait'] #battle-mode-game {
        --battle-scene-height: clamp(110px, 26cqh, 200px);
    }
    :root[data-layout='portrait'] #battle-mode-game .battle-arena {
        flex-basis: 26%;
        min-height: clamp(110px, 26cqh, 200px);
        padding: 8px 12px 20px;
    }
    :root[data-layout='portrait'] #battle-mode-game .battle-arena .char-wrapper {
        width: clamp(72px, 18cqw, 110px);
        height: clamp(72px, 18cqw, 110px);
    }
    :root[data-layout='portrait'] #battle-mode-game .quiz-area {
        gap: 8px;
        padding: 10px 12px 14px;
    }
    :root[data-layout='portrait'] #battle-mode-game .question-box {
        padding: 8px;
    }
    :root[data-layout='portrait'] #battle-mode-game .spelling-panel {
        gap: 6px;
    }
    :root[data-layout='portrait'] #battle-mode-game .options-grid {
        gap: 8px;
        grid-auto-rows: minmax(52px, auto);
    }
    :root[data-layout='portrait'] #battle-mode-game .option-btn {
        min-height: 52px;
        padding: 6px;
    }
    :root[data-layout='portrait'] #battle-mode-game .letter-tile {
        height: 40px;
        min-height: 40px;
    }
}

@media (max-height: 550px) {
    :root[data-layout='portrait'] #battle-mode-game {
        --battle-scene-height: clamp(90px, 21cqh, 110px);
    }
    :root[data-layout='portrait'] #battle-mode-game .gameplay-header {
        height: 56px;
        min-height: 56px;
        padding-block: 12px 0;
    }
    :root[data-layout='portrait'] #battle-mode-game .battle-arena {
        flex-basis: 21%;
        min-height: clamp(90px, 21cqh, 110px);
        padding: 8px 8px 20px;
    }
    :root[data-layout='portrait'] #battle-mode-game .battle-arena .char-wrapper {
        width: clamp(62px, 16cqw, 88px);
        height: clamp(62px, 16cqw, 88px);
    }
    :root[data-layout='portrait'] #battle-mode-game .quiz-area {
        gap: 4px;
        padding: 4px 8px max(4px, env(safe-area-inset-bottom));
    }
    :root[data-layout='portrait'] #battle-mode-game .question-box {
        padding: 4px 6px;
    }
    :root[data-layout='portrait'] #battle-mode-game .q-label {
        display: none !important;
    }
    :root[data-layout='portrait'] #battle-mode-game .options-grid {
        gap: 4px;
        grid-auto-rows: minmax(44px, auto);
    }
    :root[data-layout='portrait'] #battle-mode-game .option-btn {
        min-height: 44px;
        padding: 2px 4px;
        font-size: 12px;
        line-height: 1.1;
    }
    :root[data-layout='portrait'] #battle-mode-game #listening-status {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    :root[data-layout='portrait']
        #battle-mode-game
        :is(.listening-actions, .spelling-tools)
        button {
        min-height: 44px;
        font-size: 11px;
    }
    :root[data-layout='portrait'] #battle-mode-game .spelling-panel {
        gap: 4px;
    }
    :root[data-layout='portrait'] #battle-mode-game .letter-tile {
        width: 100%;
        height: 38px;
        min-height: 38px;
        padding: 2px;
        font-size: 16px;
    }
    :root[data-layout='portrait'] #battle-mode-game .spelling-tiles {
        --tile-size: 32px;
    }
    :root[data-layout='portrait'] #battle-mode-game .spelling-answer {
        min-height: 24px;
        font-size: 16px;
    }
    :root[data-layout='portrait'] #battle-mode-game .letter-slot {
        width: 20px;
        height: 24px;
        line-height: 22px;
    }
    :root[data-layout='portrait'] #battle-mode-game .boss-ui {
        gap: 6px;
    }
}

.title-toolbar {
    grid-template-columns: max-content minmax(0, 1fr) 44px 44px;
}
:root[data-fullscreen-control-hidden='true'] .title-toolbar {
    grid-template-columns: max-content minmax(0, 1fr) 44px;
}
/* Keep the selected book readable when a long balance fills a narrow frame. */
@media (max-width: 350px), (max-height: 466px) {
    .title-toolbar:has(#title-ui-gold[data-gold-size='long']) {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
    }
    :root[data-fullscreen-control-hidden='true']
        .title-toolbar:has(#title-ui-gold[data-gold-size='long']) {
        grid-template-columns: minmax(0, 1fr) 44px;
    }
    .title-toolbar:has(#title-ui-gold[data-gold-size='long']) .title-gold-display {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        font-size: 11px;
    }
    .title-toolbar:has(#title-ui-gold[data-gold-size='long']) .title-data-selector {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .title-toolbar:has(#title-ui-gold[data-gold-size='long']) .revenge-shortcut {
        grid-column: 2;
        grid-row: 1;
    }
    .title-toolbar:has(#title-ui-gold[data-gold-size='long']) .fullscreen-space {
        grid-column: 3;
        grid-row: 1;
    }
}
:root[data-fullscreen-control-hidden='true'] .fullscreen-space {
    display: none;
}
.title-toolbar .revenge-shortcut {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    color: #fff5ce;
    font-size: 10px;
    line-height: 10px;
    border: 6px solid transparent !important;
    border-image: var(--ui-small-control) 48 fill / 6px / 0 stretch !important;
    padding: 0 !important;
}
.revenge-shortcut .action-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
}
#revenge-modal {
    padding: 56px 0 12px;
}
.revenge-panel {
    width: min(760px, calc(var(--title-container-width, 100vw) - 24px));
    max-height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #fff5ce;
    border: 18px solid transparent;
    border-image: var(--ui-panel) 48 fill / 18px / 0 stretch;
    padding: 12px;
    box-sizing: border-box;
}
.revenge-panel header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 48px;
}
.revenge-panel header img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}
.revenge-panel h2 {
    margin: 0;
    font-size: 24px;
}
.revenge-panel p {
    margin: 0;
    line-height: 1.5;
}
#revenge-summary,
.revenge-guide {
    font-size: 12px;
    color: #e9e3bf;
}
#revenge-list {
    overflow-y: auto;
    min-height: 50px;
    display: grid;
    gap: 8px;
}
.revenge-card,
.revenge-empty {
    padding: 10px;
    border: 9px solid transparent;
    border-image: var(--menu-paper) 32 fill / 9px / 0 stretch;
    color: var(--menu-ink);
}
.revenge-card {
    display: flex;
    gap: 12px;
    align-items: center;
}
.revenge-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}
.revenge-card div {
    min-width: 0;
    overflow-wrap: anywhere;
}
.revenge-card p {
    font-size: 12px;
    margin-top: 4px;
    color: #466347;
}
.revenge-panel footer {
    display: grid;
    gap: 8px;
    flex-shrink: 0;
}
.revenge-panel footer button {
    color: #fff5ce;
    font-weight: 750;
}
@media (max-height: 500px) {
    .revenge-panel {
        gap: 6px;
        padding: 6px;
    }
    .revenge-panel header img {
        width: 38px;
        height: 38px;
    }
    .revenge-panel h2 {
        font-size: 20px;
    }
    .revenge-guide {
        display: none;
    }
}

.equipment-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Combo stays beside the character as plain text. */
#battle-mode-game[data-combo]:not([data-combo='']) .battle-arena::after {
    content: var(--combo-count);
    position: absolute;
    left: 18%;
    bottom: 12%;
    z-index: 25;
    display: block;
    width: max-content;
    color: var(--ui-text-on-art);
    font-size: clamp(14px, 4cqw, 20px);
    font-weight: 900;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 1px 2px var(--color-black);
    transform: none;
    pointer-events: none;
}
.equipment-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #f7edca;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
    border: 6px solid transparent;
    border-image: var(--ui-small-control) 48 fill / 6px / 0 stretch;
    background: transparent;
    padding: 1px 3px;
    min-height: 32px;
    box-sizing: border-box;
}
button.equipment-control {
    min-height: 44px;
    cursor: pointer;
}
.equipment-control .item-art {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.equipment-control,
.skill-bar .skill-btn {
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    vertical-align: middle;
}
.skill-bar .skill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.skill-bar .skill-btn .item-art {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
#equipment-hint {
    font-size: 13px;
    color: #ffe6a2;
    margin: 8px 0 0;
    letter-spacing: 0;
}
#equipment-route-modal {
    padding: 56px 10px 12px;
}
.route-panel {
    max-width: 520px;
}
.route-panel header p {
    font-size: 12px;
    margin-top: 4px;
}
.route-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.route-choices button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #fff5ce;
    min-width: 0;
}
.route-choices img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.route-choices strong {
    font-size: 18px;
}
.route-choices span {
    font-size: 12px;
    line-height: 1.5;
}
@media (max-height: 500px) {
    .route-choices img {
        width: 38px;
        height: 38px;
    }
    .route-choices button {
        gap: 4px;
    }
}
#res-retry-note {
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0;
    color: #eadfba;
}
.revenge-shortcut > span {
    display: block;
    white-space: nowrap;
    font-size: 10px;
    line-height: 10px;
    font-weight: 800;
}
/* A parchment prompt separates the question from the green answer controls. */
#battle-mode-game .question-box {
    border: 12px solid transparent !important;
    border-image: url('../../images/theme/parts/quest-paper.webp?v=4508631406be') 18% fill / 12px / 0 stretch !important;
    background: transparent;
    box-shadow: 0 3px 0 #0b2c29 !important;
    min-height: 68px;
    display: grid;
    place-items: safe center;
    align-content: safe center;
}

/* 승인한 숲 모험 시안: 이미지 키와 HTML 글자를 분리한다. */
#battle-mode-game {
    --ui-choice: url('../../images/theme/parts/quest-key.webp?v=90f5637e3ceb');
    --ui-action: url('../../images/theme/parts/quest-key.webp?v=90f5637e3ceb');
    --ui-danger: url('../../images/theme/parts/quest-delete.webp?v=873f753b662a');
}
.english-keyboard {
    display: grid;
    gap: 5px;
    width: 100%;
    padding: 6px 2px;
    border: 1px solid #ad9057;
    background: #102e24;
}
.english-keyboard-row {
    display: flex;
    justify-content: center;
    gap: 3px;
}
:is(#battle-mode-game, #hangman-game, #shell-game, #story-puzzle-game) .english-key {
    flex: 0 0 calc((100% - 27px) / 10);
    min-width: 0;
    height: clamp(32px, 5.5cqh, 52px);
    min-height: 32px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: url('../../images/theme/parts/quest-key.webp?v=90f5637e3ceb') center / 100% 100% no-repeat !important;
    color: #fff2d0;
    font-family: Georgia, serif;
    font-size: clamp(16px, 4.5cqw, 26px);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px #102e24;
    box-shadow: none;
    touch-action: manipulation;
}
:is(#battle-mode-game, #hangman-game, #shell-game, #story-puzzle-game) .english-key-delete {
    background-image: url('../../images/theme/parts/quest-delete.webp?v=873f753b662a') !important;
}
:is(#battle-mode-game, #hangman-game, #shell-game, #story-puzzle-game) .english-key:disabled {
    opacity: 0.5;
}
:is(#battle-mode-game, #hangman-game, #shell-game, #story-puzzle-game) .english-key:focus-visible {
    outline: 2px solid #ffe4a1;
    outline-offset: 1px;
}
#battle-mode-game .boss-submit {
    --ui-control-art: url('../../images/theme/parts/quest-attack.webp?v=c344d91a3302');
    border-image: var(--ui-control-art) 24% fill / 10px / 0 stretch !important;
    min-height: 48px;
    margin: 0;
    font-weight: 900;
    color: #fff2d0;
}
:root[data-layout] #battle-mode-game[data-answer-entry='letters'] {
    --battle-scene-height: clamp(52px, 35cqh, 320px);
}
:root[data-layout] #battle-mode-game[data-answer-entry='letters'] .battle-arena {
    flex: 0 999 var(--battle-scene-height);
    min-height: 52px;
}
#battle-mode-game[data-answer-entry='letters'] .battle-arena::after {
    display: none;
}
#battle-mode-game[data-answer-entry='letters'] :is(#skill-display, #equipment-display) {
    display: none;
}
#battle-mode-game[data-answer-entry='letters'] .quiz-area {
    flex: 1 0 auto;
    padding: 6px 10px max(6px, env(safe-area-inset-bottom));
    gap: 5px;
    overflow: hidden;
}
#battle-mode-game[data-answer-entry='letters'] .question-box {
    flex: 1 0 auto;
    min-height: calc(clamp(24px, 9cqw, 48px) * 1.25 + 36px);
    max-height: max(min(30cqh, calc(100cqh - 330px)), calc(clamp(24px, 9cqw, 48px) * 1.25 + 36px));
    overflow: auto;
    padding: 6px;
}
#battle-mode-game[data-answer-entry='letters'] #q-text {
    font-size: clamp(24px, 9cqw, 48px);
}
#battle-mode-game[data-answer-entry='letters'] .boss-ui {
    flex: 0 0 auto;
    gap: 5px;
    margin-top: 0;
    padding: 0;
}
#battle-mode-game[data-answer-entry='letters'] .boss-letter-entry {
    min-height: 40px;
}
#battle-mode-game .boss-letter-entry:focus-within {
    outline: none;
}
#boss-letter-slots .letter-slot {
    color: #fff2d0;
    border-bottom-color: #d9ba71;
    font-family: Georgia, serif;
}
@media (max-height: 500px) {
    :root[data-layout] #battle-mode-game[data-answer-entry='letters'] {
        --battle-scene-height: clamp(52px, 14cqh, 70px);
    }
    #battle-mode-game .battle-arena .char-wrapper:is(#hero-wrapper, :has(#monster-img)) {
        width: 64px;
        height: 64px;
    }
    #battle-mode-game[data-answer-entry='letters'] .battle-hud {
        top: 0;
    }
    #battle-mode-game[data-answer-entry='letters'] .boss-submit {
        height: 44px;
        min-height: 44px;
        padding: 3px !important;
    }
    #battle-mode-game[data-answer-entry='letters'] .english-keyboard {
        gap: 2px;
        padding-block: 3px;
    }
}
#battle-mode-game .question-box :is(.gameplay-card-label, .q-label) {
    display: none !important;
}
#battle-mode-game .question-box .q-text {
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #342b25;
    text-shadow: none;
    line-height: 1.25;
}
#battle-mode-game[data-question-kind='listening'] .question-box {
    display: none;
}
#battle-mode-game #equipment-hint:not([hidden]) {
    margin: 0;
    padding: 5px 10px;
    color: #fff0c7;
    background: #554537;
    border: 1px solid #b69b6a;
    border-radius: 8px;
}

#story-market-modal .story-market-risk {
    margin: 8px 0;
    color: #f8d8a0;
    font-size: 13px;
    line-height: 1.45;
}
#story-market-modal .story-market-actions .image-action-button {
    --ui-control-art: var(--ui-action);
    min-height: 50px;
    min-width: 0;
    flex: 1 1 0;
    margin: 0;
    padding: 8px 12px;
    font-weight: 800;
    font-size: 16px;
    color: #fff8df;
    text-shadow: 0 1px 2px #15342a;
}
#story-market-modal .story-market-actions .image-action-button:disabled {
    opacity: 0.5;
}

/* Results use the same parchment and illustrated buttons as the rest of the menus. */
#result-modal .result-modal {
    width: min(92vw, 440px);
    max-width: min(92vw, 440px);
    padding: 16px;
    background: linear-gradient(160deg, #193f37, #122e2c);
    border: 2px solid #c5a86d;
    border-radius: 18px;
    color: #fff3d5;
    font-family: inherit;
}
#result-modal .result-modal::before,
#result-modal .result-modal::after {
    display: none;
}
#result-modal .result-emblem {
    align-self: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 2px;
}
#result-modal .result-modal-kicker {
    margin: 0;
    color: #d9c690;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}
#result-modal .result-modal-title {
    margin: 3px 0 0;
    color: #fff3d5;
    font-size: clamp(22px, 5cqw, 28px);
    line-height: 1.2;
    letter-spacing: 0;
    text-shadow: none;
}
#result-modal .result-modal-subtitle {
    margin: 4px 0 2px;
    color: #d8e4cd;
    font-size: 13px;
    text-align: center;
}
#result-modal .result-modal-summary {
    margin: 0 0 10px;
    color: #f1daa5;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
#result-modal .result-modal-body {
    padding: 14px;
    border: 12px solid transparent;
    border-image: var(--menu-paper) 15% fill / 12px / 0 stretch;
    background: transparent;
    color: #352f25;
    box-shadow: none;
}
#result-modal .result-modal-row {
    flex-wrap: nowrap;
    padding: 7px 4px;
    color: #493d2f;
    font-size: 14px;
    border-bottom: 1px solid #8e744d4d;
}
#result-modal .result-value {
    font-size: 20px;
    font-weight: 900;
    white-space: nowrap;
}
#result-modal .result-value.gold {
    color: #785018;
}
#result-modal .result-value.danger {
    color: #963d35;
}
#result-modal .result-modal-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0 0;
    padding: 10px 4px 2px;
    border: 0;
    color: #304d39;
    font-size: 13px;
}
#result-modal .result-modal-total strong {
    font-size: 19px;
    white-space: nowrap;
}
#result-modal .result-record-container,
#result-modal .result-wrong-words-container {
    margin-top: 10px;
    padding-top: 10px;
    border-color: #8e744d66;
}
#result-modal .result-modal-section {
    color: #654826;
    font-size: 13px;
    font-weight: 900;
}
#result-modal .result-modal-item,
#result-modal .result-stat-row,
#result-modal .result-stat-label {
    color: #493d2f;
}
#result-modal .result-stat-value {
    color: #1d5743;
}
#result-modal .result-wrong-word-item {
    background: #f6e6c6;
    border-color: #bfa276;
}
#result-modal .result-wrong-word-item .wrong-word {
    color: #7e352e;
}
#result-modal .result-wrong-word-item .wrong-meaning {
    color: #493d2f;
}
#result-modal .result-btn {
    --ui-control-art: var(--ui-action);
    color: #fff4d8;
    font-weight: 800;
    font-size: 15px;
}
#result-modal #res-retry-note {
    color: #704f29;
    font-size: 12px;
}
@media (max-height: 550px) {
    #result-modal .result-modal {
        max-height: calc(100dvh - 20px);
        padding: 9px;
    }
    #result-modal .result-emblem {
        display: none;
    }
    #result-modal .result-modal-subtitle {
        margin-bottom: 0;
    }
    #result-modal .result-modal-summary {
        margin-bottom: 5px;
    }
}

@media (max-height: 550px) {
    #battle-mode-game .battle-hud {
        --hud-badge-height: 28px;
        --hud-control-height: 24px;
        top: 4px;
        gap: 2px 6px;
    }
    #battle-mode-game .battle-hud :is(.info-badge, .overlay-gold) {
        min-height: var(--hud-badge-height);
        padding: 4px 6px;
        font-size: 11px;
        line-height: 16px;
        white-space: nowrap;
    }
    #battle-mode-game .battle-hud .music-info-overlay {
        position: static;
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        width: 128px;
        max-width: 100%;
        min-height: var(--hud-control-height);
        transform: none;
    }
    #battle-mode-game .battle-hud .music-track-select {
        height: var(--hud-control-height);
        padding: 2px 6px;
        font-size: 11px;
    }
    #battle-mode-game .battle-hud .overlay-timer {
        min-height: var(--hud-control-height);
    }
    #battle-mode-game .gameplay-header,
    #battle-mode-game[data-question-kind='spelling'] .gameplay-header {
        height: 68px !important;
        min-height: 68px !important;
    }
    #battle-mode-game[data-question-kind='spelling'] .gameplay-header {
        padding-block: 8px;
    }
    #battle-mode-game[data-question-kind='spelling'] .battle-arena {
        flex-basis: 16% !important;
        min-height: 70px !important;
    }
    #battle-mode-game[data-question-kind='spelling'] .question-box {
        min-height: 50px;
    }
    #battle-mode-game[data-question-kind='spelling'] .spelling-panel {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }
    #battle-mode-game[data-question-kind='spelling'] :is(.spelling-answer, .spelling-tiles) {
        grid-column: 1 / -1;
    }
    #battle-mode-game[data-question-kind='spelling'] .spelling-tools {
        display: contents;
    }
    #battle-mode-game[data-question-kind='spelling'] :is(.spelling-tools button, #spelling-submit) {
        min-height: 44px;
        padding-inline: 0 !important;
        font-size: 11px;
        line-height: 1.15;
    }
}

@media (max-height: 410px) {
    #battle-mode-game .battle-hud {
        --hud-badge-height: 26px;
        --hud-control-height: 22px;
        top: 2px;
    }
    #battle-mode-game[data-question-kind='spelling'] .battle-arena {
        flex-basis: 16% !important;
        min-height: 66px !important;
    }
    #battle-mode-game[data-question-kind='spelling'] .question-box {
        min-height: 40px;
        padding: 2px;
        border-width: 8px !important;
        border-image-width: 8px !important;
    }
    #battle-mode-game[data-question-kind='spelling'] .spelling-panel {
        gap: 2px;
    }
    #battle-mode-game[data-question-kind='spelling'] :is(.spelling-tools button, #spelling-submit) {
        height: 44px !important;
        min-height: 44px !important;
        border-width: 8px !important;
        border-image-width: 8px !important;
    }
    #battle-mode-game[data-question-kind='spelling'] #spelling-submit .action-icon {
        display: none;
    }
}

/* 골드 조정은 방향 문자가 튀지 않도록 금빛 증감 버튼으로 통일한다. */
#setting-modal .gold-arrow,
#gold-edit-modal .gold-arrow {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-width: 8px !important;
    border-image-width: 8px !important;
    color: #ffe8a6;
    font:
        800 28px/1 system-ui,
        sans-serif;
}
#setting-modal .gold-arrow::after,
#gold-edit-modal .gold-arrow::after {
    content: none;
}
#setting-modal .gold-arrow:active,
#gold-edit-modal .gold-arrow:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 2px 0 #ffffff44,
        0 2px 0 #163b2d,
        0 0 0 2px #7cae72;
}

/* 설정의 체크박스·선택 항목과 골드 편집 영역은 같은 행 높이와 간격을 사용한다. */
:is(#gold-adjuster-modal, #setting-modal) .modal-body {
    gap: 14px;
}
#gold-adjuster-modal .modal-body > * {
    flex-shrink: 0;
}
:is(#gold-adjuster-modal, #setting-modal) .setting-option-row {
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 12px 16px;
    box-sizing: border-box;
}
:is(#gold-adjuster-modal, #setting-modal) .setting-checkbox-label {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 44px;
    align-items: center;
    min-height: 32px;
    gap: 8px;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
}
#setting-modal .setting-checkbox-label input {
    margin: 0;
}
#setting-modal .setting-checkbox-label span {
    display: block;
}
:is(#gold-adjuster-modal, #setting-modal) .setting-icon {
    width: 32px;
    height: 32px;
}
:is(#gold-adjuster-modal, #setting-modal) .settings-gold-editor {
    width: 100%;
    margin: 0;
    padding: 14px 16px;
}
:is(#gold-adjuster-modal, #setting-modal) .settings-gold-editor h3 {
    margin-bottom: 14px;
    line-height: 1.3;
    text-align: left;
}
#setting-modal .gold-adjust-controls {
    align-items: center;
}
#setting-modal .gold-display-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 44px;
    margin: 0;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}
#setting-modal .gold-display-box[data-gold-size='long'] {
    padding-inline: 2px;
    font-size: clamp(12px, 4cqw, 18px);
}
:is(#gold-adjuster-modal, #setting-modal) .settings-gold-apply {
    margin-top: 14px;
}
:is(#gold-adjuster-modal, #setting-modal) .settings-actions {
    gap: 12px;
    margin-top: 0;
}
#setting-modal .settings-reset-game {
    margin: 0;
}
#setting-modal .settings-reset-game > span {
    word-break: keep-all;
}

/* 통계는 긴 기록을 카드 안에서 읽고 스크롤할 수 있도록 고정한다. */
#statistics-modal .card.rpg-modal {
    max-height: calc(var(--app-height, 100dvh) - 24px);
    min-height: 0;
}
#statistics-modal .modal-body {
    padding: 8px 10px;
    overscroll-behavior: contain;
}
#statistics-modal #statistics-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#statistics-modal .statistics-book-info {
    grid-column: auto;
    margin: 0 0 2px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #285644;
    color: #fff3d2;
    text-align: center;
    line-height: 1.3;
}
#statistics-modal .statistics-section {
    margin: 4px 0 0;
    padding: 0 4px 4px;
    font-size: 15px;
    line-height: 1.25;
}
#statistics-modal .statistics-section-major {
    margin-top: 8px;
}
#statistics-modal .statistics-item {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
}
#statistics-modal .statistics-stat-group {
    min-width: 0;
}
#statistics-modal .statistics-stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 14px;
    line-height: 1.35;
}
#statistics-modal .statistics-stat-row .stat-metric:last-child {
    text-align: right;
}
#statistics-modal .statistics-stat-row .statistics-label {
    margin-left: 0;
}
#statistics-modal .statistics-value-wave {
    font-size: 24px;
}
#statistics-modal .modal-footer {
    padding-top: 8px;
}
@media (max-width: 360px) {
    #statistics-modal .statistics-stat-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    #statistics-modal .statistics-stat-row .stat-metric:last-child {
        text-align: left;
    }
}
@container (max-width: 300px) {
    #gold-adjuster-modal :is(.setting-option-row, .settings-gold-editor) {
        padding-inline: 8px;
    }
}

/* Confirmation colors describe the action while preserving the illustrated frame. */
button[data-confirm-tone='cancel'] {
    --ui-control-art: var(--ui-confirm-cancel) !important;
}
button[data-confirm-tone='execute'] {
    --ui-control-art: var(--ui-confirm-execute) !important;
}
button[data-confirm-tone='warning'] {
    --ui-control-art: var(--ui-danger) !important;
}

/* Popup headings use the frame width, independent of each popup's own container. */
dialog.screen-overlay h2 {
    font-family: inherit !important;
    font-size: var(--popup-title-size) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

/* 제목 줄의 위 패딩이 카드 여백에 중복되지 않게 보정한다. */
dialog.screen-overlay .card.mode-selection {
    padding-block: calc(12px - var(--popup-header-padding)) 12px;
}
dialog.screen-overlay .menu-heading {
    padding-block: var(--popup-header-padding);
}
dialog.screen-overlay .modal-header > .modal-close-x {
    top: var(--popup-header-padding);
}
dialog.screen-overlay .menu-heading > .modal-close-x {
    position: static;
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* Hints remain visible without filling or skipping any answer letters. */
#battle-mode-game .letter-slot-hint {
    color: #f5d891;
    border-color: #bfa86d;
}
#battle-mode-game :is(.spelling-revealed, .boss-hint-revealed) {
    color: var(--ui-answer-blue);
    background: #163849;
    border: 1px solid #8ecfff;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 800;
    opacity: 1;
}
#battle-mode-game .option-btn:is(.option-btn-correct, .option-btn-picked-correct) {
    color: var(--ui-text-on-art) !important;
    text-shadow: 0 1px 1px var(--ui-text-shadow);
    outline: none;
    opacity: 1;
    filter: none;
}

#battle-mode-game .letter-slot-fixed {
    color: #f5d891;
    background: #ffffff0d;
}
#battle-mode-game .letter-slot-active {
    position: relative;
    border-bottom: 3px solid #9bd8ff;
    background: transparent;
}
#battle-mode-game .letter-slot-active::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 1em;
    background: var(--ui-answer-blue);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: answer-caret 1s steps(2, start) infinite;
}
#battle-mode-game[data-input-locked='true'] .letter-slot-active::after,
#boss-box:has(#boss-input:disabled) .letter-slot-active::after {
    display: none;
}
@keyframes answer-caret {
    to {
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    #battle-mode-game .letter-slot-active::after {
        animation: none;
    }
}
#skyfall-notice {
    position: relative;
    z-index: 1;
    flex: 0 0 36px;
    height: 36px;
    margin: 0;
    padding: 2px 10px;
    display: grid;
    place-items: center;
    color: var(--ui-answer-blue);
    background: transparent;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    overflow: hidden;
    pointer-events: none;
    text-shadow:
        0 1px 2px #071b14,
        0 0 4px #071b14;
}

/* All English letter controls use the same key art and geometry. */
:is(#battle-mode-game, #hangman-game) {
    --letter-key-width: clamp(20px, calc((100cqw - 64px) / 10), 52px);
    --letter-key-height: clamp(32px, 5.5cqh, 52px);
    --letter-key-font: clamp(16px, 4.5cqw, 26px);
}
:root[data-layout] :is(#battle-mode-game, #hangman-game) .english-key {
    flex: 0 0 var(--letter-key-width);
    width: var(--letter-key-width);
    height: var(--letter-key-height);
    min-height: var(--letter-key-height);
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-image: none !important;
    border-radius: 0;
    background: url('../../images/theme/parts/quest-key.webp?v=90f5637e3ceb') center / 100% 100% no-repeat !important;
    color: #fff2d0;
    font-family: Georgia, serif;
    font-size: var(--letter-key-font);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 1px 1px #102e24;
    box-shadow: none;
}
:root[data-layout] :is(#battle-mode-game, #hangman-game) .english-key-delete {
    background-image: url('../../images/theme/parts/quest-delete.webp?v=873f753b662a') !important;
}
:root[data-layout] #battle-mode-game .spelling-tiles {
    --tile-size: var(--letter-key-width);
    width: 100%;
    grid-template-columns: repeat(auto-fit, var(--letter-key-width));
    justify-content: center;
    gap: 3px;
}
#battle-mode-game .spelling-tiles .letter-tile {
    max-width: none;
}
#battle-mode-game .letter-tile > span {
    transform: none;
}
#hangman-game .hangman-board {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(8px, 2cqw, 20px);
    overflow: hidden;
}
.hangman-content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: clamp(5px, 1.2cqh, 12px);
    overflow: auto;
}
.hangman-content > * {
    flex-shrink: 0;
}
#hangman-game .english-keyboard {
    flex: 0 0 auto;
}
#hangman-game #hangman-next-btn {
    flex: 0 0 54px;
    width: 100%;
    height: 54px;
    min-height: 54px;
    padding: 4px 8px !important;
    font-size: clamp(13px, 3.4cqw, 19px);
    font-weight: 800;
}
#hangman-game #hangman-next-btn[hidden] {
    display: block;
    visibility: hidden;
}
#shell-game .shell-board {
    margin: 0 auto;
    justify-content: flex-start;
    overflow: hidden;
}
#shell-game .shell-table {
    margin-block: auto;
    flex-shrink: 1;
    min-height: 95px;
}
#shell-game .shell-controls {
    margin-top: auto;
    min-height: 76px;
}
#shell-game .shell-controls button {
    min-height: 76px;
    max-width: none;
    font-size: clamp(18px, 5cqw, 28px);
    font-weight: 800;
    line-height: 1.3;
}
@container (max-height: 500px) {
    #shell-game .shell-controls,
    #shell-game .shell-controls button {
        min-height: 48px;
    }
    #shell-game .shell-controls button {
        font-size: 16px;
    }
}
.puzzle-sentence {
    display: block;
}
.puzzle-blank {
    display: inline-block;
    min-width: var(--blank-width, 4em);
    text-align: center;
}
#story-puzzle-game .puzzle-answer {
    color: var(--ui-answer-ink);
}
#puzzle-choices button[data-result='correct'] {
    --ui-control-art: var(--ui-confirm-execute);
    opacity: 1;
}
#puzzle-choices button[data-result='wrong'] {
    --ui-control-art: var(--ui-danger);
    opacity: 1;
}

#hangman-game #hangman-next-btn,
#story-puzzle-game .puzzle-controls button {
    height: var(--action-height, 54px);
    min-height: var(--action-height, 54px);
    padding: 4px 8px !important;
    font-size: var(--action-font-size);
    font-weight: 800;
    line-height: 1.3;
}