@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;600;700&display=swap');

:root {
    --daifugo-playable-color: #6fc3ff;
    --daifugo-playable-shadow-rgb: 72, 166, 255;
    --daifugo-unplayable-color: #ff8d8d;
    --daifugo-unplayable-shadow-rgb: 255, 98, 98;
    --daifugo-resettable-color: #7ef08b;
    --daifugo-resettable-shadow-rgb: 92, 255, 125;
    --daifugo-lock-trigger-color: #ffd769;
    --daifugo-lock-trigger-shadow-rgb: 255, 212, 94;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus,
:where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: none;
}

html, body {
    width: 100%;
    height: 100%;
    min-width: 100vw;
    min-height: 100vh;
    background: #000;
}

html.controller-input-active,
html.controller-input-active *,
body.controller-input-active,
body.controller-input-active *,
html.controller-input-active #gameCanvasRoot,
html.controller-input-active #gameViewportShell,
body.controller-input-active #gameCanvasRoot,
body.controller-input-active #gameViewportShell {
    cursor: none !important;
}

:root {
    --game-canvas-scale: 1;
    --game-canvas-inv-scale: 1;
    --game-canvas-offset-x: 0px;
    --game-canvas-offset-y: 0px;
}

body.fixed-canvas-mode {
    position: relative;
    overflow: hidden;
    background: #000;
}

#gameViewportShell {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

#gameCanvasRoot {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #000;
    transform-origin: top left;
    will-change: transform;
}

body.app-boot-hidden #gameViewportShell {
    visibility: visible;
}

body.app-boot-hidden #gameCanvasRoot > *:not(#appLoadingOverlay):not(script) {
    visibility: hidden;
}

body.app-boot-hidden > *:not(#appLoadingOverlay):not(#gameViewportShell):not(.demo-save-import-modal):not(script) {
    visibility: hidden;
}

body.fixed-canvas-mode .title-screen,
body.fixed-canvas-mode .revock-home-screen,
body.fixed-canvas-mode .ending-sequence-screen,
body.fixed-canvas-mode .daifugo-screen,
body.fixed-canvas-mode .library-screen,
body.fixed-canvas-mode .character-select-screen,
body.fixed-canvas-mode .stage-select-screen,
body.fixed-canvas-mode .map-screen,
body.fixed-canvas-mode .drift-memory-screen,
body.fixed-canvas-mode .records-modal,
body.fixed-canvas-mode .option-modal,
body.fixed-canvas-mode .tutorial-intro-screen,
body.fixed-canvas-mode .tutorial-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 1920px !important;
    height: 1080px !important;
}

body.fixed-canvas-mode .game-container {
    width: 1920px;
    height: 1080px;
    min-height: 1080px;
}

* {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(176, 136, 64, 0.95) rgba(23, 18, 12, 0.7) !important;
}

*::-webkit-scrollbar {
    width: 11px !important;
    height: 11px !important;
    display: block !important;
}

*::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(26, 22, 12, 0.7), rgba(8, 10, 16, 0.7)) !important;
    border: 1px solid rgba(195, 162, 88, 0.28) !important;
    border-radius: 999px !important;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(210, 176, 98, 0.88), rgba(124, 84, 34, 0.88)) !important;
    border: 1px solid rgba(242, 214, 142, 0.45) !important;
    border-radius: 999px !important;
}

.title-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background:
        linear-gradient(rgba(2, 10, 8, 0.3), rgba(2, 10, 8, 0.72)),
        url('material/Title.png');
    background-size: cover;
    background-position: center;
    display: block;
    overflow: hidden;
}

.title-screen::before {
    content: none;
    position: absolute;
    left: 17%;
    top: -16%;
    width: min(48vw, 860px);
    height: min(88vh, 1100px);
    transform: translateX(-50%);
    background: linear-gradient(
        to bottom,
        rgba(195, 255, 129, 0.86) 0%,
        rgba(140, 235, 86, 0.42) 24%,
        rgba(72, 185, 60, 0.18) 45%,
        rgba(10, 40, 18, 0) 76%
    );
    clip-path: polygon(50% 0%, 78% 22%, 62% 100%, 38% 100%, 22% 22%);
    filter: blur(18px);
    pointer-events: none;
}

.title-screen::after {
    content: none;
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 16%, rgba(184, 255, 121, 0.3), rgba(0, 0, 0, 0) 38%),
        radial-gradient(circle at 31% 56%, rgba(101, 226, 66, 0.16), rgba(0, 0, 0, 0) 48%);
    pointer-events: none;
}

.title-screen.hidden {
    display: none;
}

.title-screen.boot-fade-enter::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 1;
    transition: opacity 2800ms ease;
    pointer-events: none;
    z-index: 4;
}

.title-screen.boot-fade-enter.boot-fade-visible::after {
    opacity: 0;
}

.revock-home-screen {
    position: fixed;
    inset: 0;
    z-index: 2160;
    overflow: hidden;
}

.revock-home-screen.hidden {
    display: none;
}

.revock-home-backdrop,
.revock-home-vignette {
    position: absolute;
    inset: 0;
}

.revock-home-backdrop {
    background:
        linear-gradient(rgba(18, 8, 4, 0.34), rgba(8, 5, 4, 0.48)),
        url('material/レボックの家の部屋.png') center/cover no-repeat;
    transform: scale(1.03);
}

.revock-home-vignette {
    background:
        radial-gradient(circle at 68% 36%, rgba(255, 170, 112, 0.1), transparent 24%),
        radial-gradient(circle at 32% 24%, rgba(255, 214, 168, 0.08), transparent 18%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.56));
}

.revock-home-layout {
    position: relative;
    width: 100%;
    height: 100%;
}

.revock-home-actor {
    display: none;
}

.tutorial-dialog-panel.revock-home-panel {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(920px, calc(100vw - 28px));
    min-height: 170px;
    background: linear-gradient(180deg, rgba(24, 16, 12, 0.92), rgba(10, 8, 7, 0.94));
    border-color: rgba(214, 170, 124, 0.52);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
    padding: 14px 18px 34px;
}

.tutorial-dialog-panel.revock-home-panel.revock-home-panel-choices {
    left: 36px;
    bottom: 24px;
    transform: none;
    width: min(720px, calc(100vw - 72px));
    min-height: 0;
    padding: 14px 18px 22px;
}

.tutorial-dialog-panel.revock-home-panel.hidden {
    display: none;
}

.tutorial-dialog-panel.revock-home-panel .tutorial-choices,
.tutorial-dialog-panel.revock-home-panel #revockHomeChoices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.tutorial-dialog-panel.revock-home-panel .tutorial-choice-btn {
    width: 100%;
    min-height: 0;
    text-align: left;
    padding: 12px 16px;
}

.tutorial-dialog-panel.revock-home-panel .tutorial-choice-btn.revock-controller-selected,
body:not(.controller-input-active) .tutorial-dialog-panel.revock-home-panel .tutorial-choice-btn:hover,
.tutorial-dialog-panel.revock-home-panel.revock-controller-selected,
body:not(.controller-input-active) .tutorial-dialog-panel.revock-home-panel:hover {
    color: #98ff8f;
    border-color: rgba(255, 226, 143, 0.86);
    box-shadow:
        0 0 0 2px rgba(255, 226, 143, 0.34),
        0 0 24px rgba(241, 177, 68, 0.36),
        inset 0 0 20px rgba(255, 207, 98, 0.1);
    filter: brightness(1.1);
    animation: revockControllerSelectedTextPulse 1800ms ease-in-out infinite;
}

.tutorial-dialog-panel.revock-home-panel .tutorial-hint.hidden {
    display: none;
}

.ending-sequence-screen {
    position: fixed;
    inset: 0;
    z-index: 1992;
    overflow: hidden;
    background: #000;
}

.ending-sequence-screen.hidden {
    display: none;
}

.ending-sequence-backdrop,
.ending-sequence-vignette {
    position: absolute;
    inset: 0;
}

.ending-sequence-backdrop {
    background: #000 center/contain no-repeat;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.ending-sequence-backdrop.visible {
    opacity: 1;
}

.ending-sequence-vignette {
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.64) 88%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42));
    pointer-events: none;
}

.ending-sequence-layout {
    position: relative;
    width: 100%;
    height: 100%;
}

.ending-sequence-fast-indicator {
    position: absolute;
    right: 26px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(235, 214, 172, 0.28);
    border-radius: 999px;
    background: rgba(8, 8, 12, 0.52);
    color: rgba(250, 239, 214, 0.88);
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
    z-index: 3;
    backdrop-filter: blur(6px);
}

.ending-sequence-fast-indicator-icon {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    line-height: 1;
}

.ending-sequence-screen.ending-sequence-fast-hold.ending-sequence-credits-active .ending-sequence-fast-indicator {
    opacity: 1;
    transform: translateY(0);
}

.ending-sequence-art {
    position: absolute;
    inset: 0;
    background: center/contain no-repeat;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 1.6s ease, transform 1.6s ease;
}

.ending-sequence-art.visible {
    opacity: 1;
    transform: scale(1);
}

.tutorial-dialog-panel.ending-sequence-panel {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: min(980px, calc(100vw - 40px));
    min-height: 0;
    padding: 14px 18px 24px;
    background: linear-gradient(180deg, rgba(10, 14, 26, 0.9), rgba(6, 8, 14, 0.94));
    border-color: rgba(214, 184, 136, 0.42);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

.tutorial-dialog-panel.ending-sequence-panel.hidden {
    display: none;
}

.ending-sequence-credits {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    padding: 0;
    background: rgba(0, 0, 0, 0.82);
    color: #f6efe0;
}

.ending-sequence-credits.hidden {
    display: none;
}

.ending-sequence-credits-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ending-sequence-floating-card {
    position: absolute;
    top: calc(100% + 8vmax);
    width: var(--card-width, 132px);
    aspect-ratio: 1;
    border-radius: 16px;
    background: center/cover no-repeat;
    opacity: 0;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
    filter: saturate(0.92) brightness(0.9);
    transform: translate3d(0, 0, 0) rotate(var(--card-rotate, 0deg));
    animation: endingCreditsFloat var(--float-duration, 24000ms) linear 1 both;
}

.ending-sequence-floating-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.28));
}

.ending-sequence-credits-scroll {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, transparent 100%);
}

.ending-sequence-credits-inner {
    position: absolute;
    left: 50%;
    top: 100%;
    width: min(760px, calc(100vw - 56px));
    padding: 0 0 52vh;
    transform: translate(-50%, 0);
    text-align: center;
    will-change: transform;
    z-index: 1;
}

.ending-sequence-credits-final {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    z-index: 2;
    transform: translateY(6vh);
    opacity: 0;
    visibility: hidden;
    transition: opacity 1200ms ease;
}

.ending-sequence-credits-final.hidden {
    opacity: 0;
    visibility: hidden;
}

.ending-sequence-credits-final.visible {
    opacity: 1;
    visibility: visible;
}

.ending-sequence-credits-body {
    font-size: clamp(1.02rem, 1.7vw, 1.24rem);
    line-height: 2.15;
    letter-spacing: 0.12em;
    opacity: 0.88;
    padding-top: 18vh;
}

.ending-sequence-credit-section {
    margin: 0 0 72px;
}

.ending-sequence-credit-role {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.08rem, 1.95vw, 1.48rem);
    letter-spacing: 0.22em;
    color: rgba(248, 234, 207, 0.96);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.ending-sequence-credit-name {
    margin: 10px 0 0;
    color: rgba(244, 238, 228, 0.9);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

.ending-sequence-credit-final {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.3rem, 4.8vw, 4.3rem);
    letter-spacing: 0.18em;
    color: rgba(255, 245, 220, 0.98);
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.ending-sequence-credit-final-sub {
    margin-top: 18px;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    letter-spacing: 0.18em;
    color: rgba(246, 238, 220, 0.88);
}

@keyframes endingCreditsFloat {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--card-rotate, 0deg));
        opacity: 0;
    }
    10% {
        opacity: 0.16;
    }
    24% {
        opacity: 0.24;
    }
    84% {
        opacity: 0.22;
    }
    100% {
        transform: translate3d(var(--card-drift-x, 0px), calc(-130vh - var(--card-height-extra, 120px)), 0) rotate(calc(var(--card-rotate, 0deg) + var(--card-rotate-delta, 0deg)));
        opacity: 0;
    }
}

.daifugo-screen {
    position: fixed;
    inset: 0;
    z-index: 1985;
    overflow: hidden;
    /* Previous CSS table backdrop:
       radial-gradient(circle at 50% 90%, rgba(48, 126, 76, 0.34), transparent 34%),
       radial-gradient(circle at 50% 18%, rgba(255, 237, 183, 0.12), transparent 28%),
       radial-gradient(circle at 20% 18%, rgba(128, 206, 124, 0.16), transparent 32%),
       linear-gradient(180deg, rgba(18, 54, 40, 0.92), rgba(9, 34, 28, 0.97)),
       url('material/field.png');
    */
    background: url('material/table.png');
    background-size: cover;
    background-position: center;
}

.daifugo-screen.hidden {
    display: none;
}

.daifugo-screen-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
}

.daifugo-screen-layout {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 10px 16px 360px;
}

.daifugo-header {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 10px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px;
    border: 1px solid rgba(223, 197, 126, 0.28);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(18, 31, 24, 0.9), rgba(7, 13, 22, 0.84));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.daifugo-header-reveal-zone {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 42px;
    z-index: 61;
    background: transparent;
}

.daifugo-screen.header-stowed .daifugo-header {
    transform: translateY(calc(-100% - 16px));
    opacity: 0;
    pointer-events: none;
}

.daifugo-screen.header-stowed .daifugo-header-reveal-zone:hover + .daifugo-header,
.daifugo-screen.header-stowed .daifugo-header:hover,
.daifugo-screen.header-stowed .daifugo-header:focus-within {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

body.controller-input-active .daifugo-screen.header-stowed .daifugo-header:focus-within {
    transform: translateY(calc(-100% - 16px));
    opacity: 0;
    pointer-events: none;
}

.daifugo-screen.header-stowed.controller-header-open .daifugo-header {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

body.controller-input-active .daifugo-screen.header-stowed.controller-header-open .daifugo-header,
body.controller-input-active .daifugo-screen.header-stowed.controller-header-open .daifugo-header:focus-within {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.daifugo-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    letter-spacing: 0.14em;
    color: #f0d79a;
}

.daifugo-round-indicator {
    color: #f0d79a;
    font-family: 'Cinzel', serif;
    font-size: 1.42rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.34);
}

.daifugo-subtitle {
    color: #d7e4d9;
    font-size: 1.08rem;
    margin-top: 4px;
}

.daifugo-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.daifugo-player-count-label,
.daifugo-turn-badge,
.daifugo-panel-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
}

.daifugo-player-count-label {
    color: #ebd7a8;
    font-size: 1.06rem;
}

.daifugo-player-count-select,
.daifugo-header-btn,
.daifugo-action-btn {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(223, 197, 126, 0.32);
    background: rgba(12, 19, 28, 0.88);
    color: #f7f2df;
    padding: 0 14px;
    font-family: 'Cinzel', serif;
    font-size: 1.04rem;
    cursor: pointer;
}

.daifugo-header-btn,
.daifugo-action-btn {
    background: linear-gradient(180deg, rgba(80, 105, 52, 0.92), rgba(36, 54, 30, 0.94));
}

.daifugo-header-btn.secondary,
.daifugo-action-btn.secondary {
    background: linear-gradient(180deg, rgba(63, 76, 89, 0.92), rgba(28, 38, 52, 0.94));
}

.daifugo-action-btn.ghost {
    background: rgba(14, 18, 30, 0.7);
}

.daifugo-header-btn:hover,
.daifugo-action-btn:hover,
.daifugo-player-count-select:hover {
    filter: brightness(1.06);
}

.daifugo-player-count-select.daifugo-controller-selected,
.daifugo-player-count-select.daifugo-controller-editing,
.daifugo-header-btn.daifugo-controller-selected,
.daifugo-action-btn.daifugo-controller-selected,
.daifugo-help-close.daifugo-controller-selected {
    color: #9cffb5;
    border-color: rgba(126, 255, 159, 0.95);
    box-shadow:
        0 0 0 2px rgba(109, 255, 143, 0.28),
        0 0 18px rgba(75, 255, 124, 0.38),
        inset 0 0 16px rgba(75, 255, 124, 0.1);
    text-shadow:
        0 0 8px rgba(126, 255, 159, 0.85),
        0 0 18px rgba(75, 255, 124, 0.46);
    filter: brightness(1.08);
}

.daifugo-player-count-label:has(+ .daifugo-player-count-select.daifugo-controller-selected) {
    color: #9cffb5;
    text-shadow:
        0 0 8px rgba(126, 255, 159, 0.85),
        0 0 18px rgba(75, 255, 124, 0.4);
}

.daifugo-header-btn:disabled,
.daifugo-action-btn:disabled {
    opacity: 0.45;
    cursor: default;
    filter: none;
}

.daifugo-board-shell {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr) 188px;
    grid-template-rows: 168px minmax(0, 1fr);
    gap: 10px 16px;
    margin-top: 92px;
    transition: margin-top 0.24s ease;
}

.daifugo-screen.header-stowed .daifugo-board-shell {
    margin-top: 12px;
}

.daifugo-screen.result-active .daifugo-board-shell {
    z-index: 18;
}

.daifugo-screen.result-active .daifugo-hand {
    pointer-events: none;
}

.daifugo-side-reveal-zone,
.daifugo-rank-panel {
    display: none;
}

.daifugo-lock-panel {
    position: absolute;
    left: clamp(228px, 16vw, 304px);
    top: 178px;
    width: 248px;
    z-index: 3;
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(223, 197, 126, 0.22);
    background: linear-gradient(180deg, rgba(14, 28, 24, 0.88), rgba(6, 14, 18, 0.82));
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24);
}

.daifugo-lock-panel.chance {
    border-color: rgba(226, 206, 118, 0.42);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24), 0 0 18px rgba(229, 198, 98, 0.12);
}

.daifugo-lock-panel.active {
    border-color: rgba(245, 215, 121, 0.66);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24), 0 0 24px rgba(255, 222, 122, 0.2);
}

.daifugo-lock-title {
    color: #f0d79a;
    font-family: 'Cinzel', serif;
    font-size: 1.18rem;
    letter-spacing: 0.12em;
}

.daifugo-lock-line {
    color: #eef4e0;
    font-size: 1.08rem;
    line-height: 1.45;
}

.daifugo-lock-line.chance {
    color: #ffe8a8;
}

.daifugo-lock-line.active {
    color: #ffe08a;
    font-weight: 700;
    font-size: 1.18rem;
}

.daifugo-lock-empty {
    color: rgba(226, 236, 224, 0.76);
    font-size: 0.94rem;
    line-height: 1.4;
}

.daifugo-board-shell::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 2px;
    width: min(96vw, 1440px);
    height: min(84vh, 920px);
    transform: translateX(-50%);
    border-radius: 48% 48% 40% 40% / 10% 10% 90% 90%;
    background:
        radial-gradient(circle at 50% 42%, rgba(89, 188, 91, 0.22), rgba(9, 68, 41, 0.14) 36%, rgba(3, 28, 19, 0.24) 76%),
        linear-gradient(180deg, rgba(20, 94, 56, 0.9), rgba(8, 63, 36, 0.94));
    border: 8px solid rgba(181, 140, 72, 0.72);
    box-shadow:
        inset 0 0 0 2px rgba(245, 223, 166, 0.35),
        inset 0 -18px 50px rgba(0, 0, 0, 0.32),
        0 28px 60px rgba(0, 0, 0, 0.38);
    display: none;
    pointer-events: none;
}

.daifugo-board-shell::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 64px;
    width: min(78vw, 1000px);
    height: 1px;
    transform: translateX(-50%);
    border-top: 2px solid rgba(239, 218, 164, 0.38);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 245, 208, 0.08);
    display: none;
    pointer-events: none;
}

.daifugo-seat,
.daifugo-table-stage,
.daifugo-bottom-strip,
.daifugo-hand {
    min-height: 0;
    position: relative;
    z-index: 1;
}

.daifugo-seat {
    display: grid;
    align-items: center;
}

.daifugo-seat.top {
    grid-column: 2;
    grid-row: 1;
    transform: translateY(-28px);
    z-index: 24;
}

.daifugo-seat.side.left {
    grid-column: 1;
    grid-row: 2;
}

.daifugo-seat.side.right {
    grid-column: 3;
    grid-row: 2;
}

.daifugo-seat.hidden-seat {
    visibility: hidden;
}

.daifugo-seat-panel {
    display: grid;
    gap: 10px;
}

.daifugo-seat-panel.left,
.daifugo-seat-panel.right {
    justify-items: center;
}

.daifugo-seat-panel.top {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "portrait info"
        "fan fan";
    justify-content: center;
    align-items: center;
    column-gap: 18px;
    row-gap: 8px;
    position: relative;
    z-index: 24;
}

.daifugo-seat-panel.active .daifugo-seat-name,
.daifugo-seat-panel.active .daifugo-seat-status {
    color: #8fd3ff;
    text-shadow:
        0 0 10px rgba(92, 182, 255, 0.42),
        0 0 22px rgba(72, 154, 255, 0.2);
}

.daifugo-seat-panel.passed .daifugo-seat-name,
.daifugo-seat-panel.passed .daifugo-seat-status,
.daifugo-seat-panel.passed .daifugo-seat-count,
.daifugo-seat-panel.passed .daifugo-seat-rank {
    color: #ff8a8a;
}

.daifugo-seat-panel.receiving .daifugo-back-fan {
    filter: drop-shadow(0 0 18px rgba(255, 226, 149, 0.36));
}

.daifugo-seat-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #f2e9d3;
    font-family: 'Cinzel', serif;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}

.daifugo-seat-info {
    display: grid;
    gap: 6px;
    width: fit-content;
    max-width: 260px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(223, 197, 126, 0.14);
    background: rgba(3, 8, 12, 0.58);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
}

.daifugo-seat-info.top {
    grid-area: info;
    align-content: center;
    justify-items: start;
    min-width: 160px;
    transform: translateX(150px);
    position: relative;
    z-index: 26;
}

.daifugo-seat-info.left,
.daifugo-seat-info.right {
    justify-items: center;
    justify-self: center;
    position: relative;
    z-index: 26;
}

.daifugo-seat-panel.top .daifugo-seat-head {
    justify-content: flex-start;
}

.daifugo-seat-panel.top .daifugo-seat-count {
    text-align: left;
}

.daifugo-seat-status,
.daifugo-seat-count {
    color: #d2dfd5;
    font-size: 1.06rem;
    text-align: center;
}

.daifugo-seat-name {
    font-size: 1.12em;
    max-width: 220px;
    overflow-wrap: anywhere;
}

.daifugo-seat-rank {
    color: #f6dda6;
    font-size: 0.84em;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.daifugo-seat-status {
    font-size: 0.92em;
}

.daifugo-seat-portrait {
    border-radius: 18px;
    border: 2px solid rgba(225, 196, 126, 0.34);
    background:
        linear-gradient(180deg, rgba(19, 30, 38, 0.36), rgba(5, 8, 12, 0.42)),
        rgba(10, 16, 18, 0.86);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:
        inset 0 0 0 1px rgba(255, 242, 206, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.28);
}

.daifugo-seat-portrait.top {
    grid-area: portrait;
    width: 150px;
    height: 150px;
    margin-top: 12px;
    transform: translateX(150px);
    position: relative;
    z-index: 26;
}

.daifugo-seat-portrait.left,
.daifugo-seat-portrait.right {
    width: 136px;
    height: 136px;
    position: relative;
    z-index: 26;
}

.daifugo-seat-portrait.empty::before {
    content: 'CPU';
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(247, 236, 209, 0.72);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
}

.daifugo-seat-panel.passed .daifugo-seat-portrait {
    border-color: rgba(255, 92, 92, 0.92);
    box-shadow:
        inset 0 0 0 1px rgba(255, 210, 210, 0.18),
        0 0 0 4px rgba(255, 104, 104, 0.42),
        0 0 24px rgba(255, 84, 84, 0.28),
        0 10px 26px rgba(110, 0, 0, 0.34);
}

.daifugo-seat-panel.disconnected .daifugo-seat-name,
.daifugo-seat-panel.disconnected .daifugo-seat-status,
.daifugo-seat-panel.cpu-replaced .daifugo-seat-name,
.daifugo-seat-panel.cpu-replaced .daifugo-seat-status {
    color: #ffd48a;
}

.daifugo-seat-panel.disconnected .daifugo-seat-portrait {
    border-color: rgba(255, 190, 82, 0.94);
    box-shadow:
        inset 0 0 0 1px rgba(255, 235, 190, 0.18),
        0 0 0 4px rgba(255, 181, 62, 0.34),
        0 0 24px rgba(255, 184, 68, 0.24),
        0 10px 26px rgba(96, 45, 0, 0.32);
    filter: saturate(0.78) brightness(0.82);
}

.daifugo-seat-disconnect-badge {
    justify-self: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid rgba(255, 196, 94, 0.92);
    background: rgba(72, 39, 4, 0.86);
    color: #fff0c9;
    font-family: 'Cinzel', serif;
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    box-shadow:
        0 0 18px rgba(255, 183, 75, 0.22),
        inset 0 0 12px rgba(255, 224, 160, 0.12);
}

.daifugo-seat-disconnect-badge.cpu {
    border-color: rgba(142, 210, 255, 0.88);
    background: rgba(10, 35, 52, 0.86);
    color: #d7efff;
}

.daifugo-seat-pass-badge {
    justify-self: center;
    padding: 6px 14px;
    border-radius: 999px;
    border: 2px solid rgba(255, 112, 112, 0.9);
    background: rgba(88, 8, 8, 0.82);
    color: #fff0f0;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    box-shadow:
        0 0 18px rgba(255, 82, 82, 0.24),
        inset 0 0 12px rgba(255, 180, 180, 0.12);
}

.daifugo-seat-info.top .daifugo-seat-pass-badge {
    justify-self: start;
}

.daifugo-table-stage {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-rows: auto minmax(0, 440px) 240px;
    justify-items: center;
    align-content: center;
    padding: 0 18px 12px;
    overflow: visible;
}

.daifugo-symbol-legend {
    position: absolute;
    left: calc(100% + 12px);
    top: 0;
    z-index: 12;
    display: grid;
    gap: 6px;
    min-width: 148px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(223, 197, 126, 0.2);
    background: linear-gradient(180deg, rgba(11, 22, 20, 0.84), rgba(5, 10, 18, 0.8));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
    pointer-events: none;
}

.daifugo-symbol-legend-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #f0d79a;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

.daifugo-pad-mark {
    display: none;
    min-width: 24px;
    min-height: 24px;
    place-items: center;
    border-radius: 6px;
    border: 1px solid rgba(126, 255, 159, 0.72);
    color: #9cffb5;
    font-family: sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-shadow: 0 0 8px rgba(126, 255, 159, 0.8);
    box-shadow: 0 0 12px rgba(75, 255, 124, 0.24);
}

.daifugo-symbol-legend-line {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    color: #eef4e0;
    font-size: 0.88rem;
    line-height: 1.2;
}

.daifugo-symbol-legend-mark {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.daifugo-symbol-legend-mark.playable {
    color: var(--daifugo-playable-color);
}

.daifugo-symbol-legend-mark.unplayable {
    color: var(--daifugo-unplayable-color);
}

.daifugo-symbol-legend-mark.resettable {
    color: var(--daifugo-resettable-color);
}

.daifugo-symbol-legend-mark.lock-trigger {
    color: var(--daifugo-lock-trigger-color);
}

.daifugo-controller-card-guide {
    display: none;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid rgba(223, 197, 126, 0.18);
    color: #cffff0;
    font-size: 0.82rem;
    line-height: 1.25;
    text-shadow: 0 0 8px rgba(75, 255, 124, 0.24);
}

body.controller-input-active .daifugo-pad-mark,
body.controller-input-active .daifugo-controller-card-guide {
    display: grid;
}

.daifugo-player-status {
    position: absolute;
    left: 72px;
    top: auto;
    bottom: 156px;
    transform: none;
    z-index: 11;
    min-width: 170px;
    display: none;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(223, 197, 126, 0.26);
    background: linear-gradient(180deg, rgba(14, 28, 24, 0.9), rgba(6, 14, 18, 0.84));
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.28);
    cursor: grab;
    user-select: none;
}

.daifugo-player-status.active {
    display: grid;
}

.daifugo-player-status.dragging {
    cursor: grabbing;
}

.daifugo-player-status.turn .daifugo-player-status-name,
.daifugo-player-status.turn .daifugo-player-status-state {
    color: #8fd3ff;
    text-shadow:
        0 0 10px rgba(92, 182, 255, 0.42),
        0 0 22px rgba(72, 154, 255, 0.2);
}

.daifugo-player-status.passed .daifugo-player-status-name,
.daifugo-player-status.passed .daifugo-player-status-rank,
.daifugo-player-status.passed .daifugo-player-status-count,
.daifugo-player-status.passed .daifugo-player-status-state {
    color: #ff8a8a;
}

.daifugo-player-status-name,
.daifugo-player-status-rank,
.daifugo-player-status-count,
.daifugo-player-status-state {
    font-family: 'Cinzel', serif;
    color: #eef4e0;
    letter-spacing: 0.06em;
}

.daifugo-player-status-name {
    color: #f0d79a;
    font-size: 1.16rem;
}

.daifugo-player-status-rank {
    color: #f6dda6;
    font-size: 1rem;
}

.daifugo-player-status-count {
    color: #efe6c6;
    font-size: 0.92rem;
}

.daifugo-player-status-state {
    font-size: 0.96rem;
}

.daifugo-status-toggle-btn {
    margin-top: 2px;
    min-height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(223, 197, 126, 0.28);
    background: rgba(10, 16, 28, 0.86);
    color: #f6e4af;
    font-family: 'Cinzel', serif;
    font-size: 0.84rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.daifugo-status-toggle-btn:hover {
    filter: brightness(1.08);
}

.daifugo-panel-title {
    color: #e9d2a0;
    font-size: 0.9rem;
}

.daifugo-back-fan {
    position: relative;
    width: 100%;
    min-height: 96px;
}

.daifugo-back-fan.top {
    grid-area: fan;
    width: min(62vw, 720px);
    height: 122px;
    transform: translateY(-48px);
}

.daifugo-back-fan.left,
.daifugo-back-fan.right {
    width: 120px;
    height: 320px;
    transform: translateY(-132px);
    z-index: 18;
}

.daifugo-card-back {
    position: absolute;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(16, 26, 38, 0.06), rgba(4, 8, 14, 0.34)),
        url('material/CardFrame2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.32);
}

.daifugo-card-back.top {
    width: 78px;
    height: 114px;
    left: 50%;
    bottom: 0;
    transform:
        translateX(calc((var(--fan-index) - ((var(--fan-total) - 1) / 2)) * 22px))
        rotate(calc((var(--fan-index) - ((var(--fan-total) - 1) / 2)) * 4.2deg));
    transform-origin: center 125%;
}

.daifugo-card-back.side {
    width: 72px;
    height: 106px;
    left: 50%;
    top: 50%;
    transform:
        translate(-50%, calc((var(--fan-index) - ((var(--fan-total) - 1) / 2)) * 18px))
        rotate(calc((var(--fan-index) - ((var(--fan-total) - 1) / 2)) * 2deg));
    transform-origin: center center;
}

.daifugo-back-fan.right .daifugo-card-back.side {
    transform:
        translate(-50%, calc((var(--fan-index) - ((var(--fan-total) - 1) / 2)) * 18px))
        rotate(calc((var(--fan-index) - ((var(--fan-total) - 1) / 2)) * -2deg));
}

.daifugo-card-back.hand {
    position: relative;
    width: 126px;
    height: 184px;
}

.daifugo-table-header,
.daifugo-action-row,
.daifugo-result-row,
.daifugo-bottom-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.daifugo-action-row {
    justify-content: flex-end;
}

.daifugo-table-header {
    flex-direction: column;
    align-self: start;
    justify-self: end;
    width: min(36vw, 420px);
    margin-bottom: -6px;
    transform: translate(88px, -20px);
    align-items: flex-start;
}

.daifugo-table-meta {
    color: #e7eedf;
    font-size: 1.08rem;
    text-align: left;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.daifugo-table-meta.player-turn {
    color: #fff1c8;
    font-size: 1.42rem;
    font-weight: 900;
    letter-spacing: 0;
    text-shadow:
        0 0 14px rgba(255, 214, 101, 0.38),
        0 2px 8px rgba(0, 0, 0, 0.56);
}

.daifugo-bottom-strip {
    position: absolute;
    left: min(calc(50% + 360px), calc(100% - 300px));
    top: 58%;
    transform: translateY(-50%);
    justify-content: flex-end;
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 22;
}

.daifugo-action-btn {
    min-width: 124px;
    font-size: 1.1rem;
}

#daifugoPassBtn {
    min-width: 158px;
    min-height: 56px;
    padding: 0 22px;
    font-size: 1.26rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

body.controller-input-active #daifugoPassBtn::before {
    content: "△";
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    min-height: 24px;
    margin-right: 8px;
    border-radius: 6px;
    border: 1px solid rgba(126, 255, 159, 0.72);
    color: #9cffb5;
    font-family: sans-serif;
    font-size: 0.82rem;
    text-shadow: 0 0 8px rgba(126, 255, 159, 0.8);
    box-shadow: 0 0 12px rgba(75, 255, 124, 0.24);
}

.daifugo-turn-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(226, 193, 117, 0.18);
    color: #f6dda6;
    font-size: 1.12rem;
    box-shadow: 0 0 16px rgba(255, 227, 156, 0.14);
}

.daifugo-deck-stack {
    position: absolute;
    left: 50%;
    top: calc(50% - 26px);
    width: 126px;
    height: 182px;
    transform: translate(-50%, -50%);
    opacity: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    transition: opacity 0.24s ease;
}

.daifugo-play-animation-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 14;
}

.daifugo-play-animation-layer.active {
    display: block;
}

.daifugo-play-animation-track {
    position: absolute;
    display: flex;
    gap: 16px;
    left: 50%;
    top: 50%;
    --to-y: calc(50% - 34px);
    transform: translate(-50%, -50%);
    animation: daifugoPlayFlight 0.52s cubic-bezier(0.2, 0.78, 0.18, 1) forwards;
}

.daifugo-play-animation-track.from-top {
    --from-x: 50%;
    --from-y: 8%;
    --from-rot: -16deg;
}

.daifugo-play-animation-track.from-left {
    --from-x: 11%;
    --from-y: 58%;
    --from-rot: -26deg;
}

.daifugo-play-animation-track.from-right {
    --from-x: 89%;
    --from-y: 58%;
    --from-rot: 26deg;
}

.daifugo-play-animation-track.from-bottom {
    --from-x: 50%;
    --from-y: 94%;
    --from-rot: 8deg;
}

.daifugo-play-animation-track .animation-card {
    filter:
        drop-shadow(0 0 24px rgba(255, 237, 174, 0.22))
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.28));
}

@keyframes daifugoPlayFlight {
    0% {
        left: var(--from-x);
        top: var(--from-y);
        transform: translate(-50%, -50%) rotate(var(--from-rot)) scale(0.72);
        opacity: 0.82;
    }
    55% {
        opacity: 1;
    }
    100% {
        left: 50%;
        top: var(--to-y);
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        opacity: 1;
    }
}

.daifugo-deck-stack.active {
    opacity: 1;
}

.daifugo-deck-stack::before,
.daifugo-deck-stack::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(18, 31, 44, 0.08), rgba(4, 8, 14, 0.28)),
        url('material/CardFrame2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.34);
}

.daifugo-deck-stack::before {
    transform: translate(-8px, -8px);
    opacity: 0.76;
}

.daifugo-deck-stack::after {
    transform: translate(8px, 8px);
    opacity: 0.88;
}

.daifugo-deck-stack.dealing {
    animation: daifugoDeckPulse 0.78s ease-in-out infinite;
}

.daifugo-deck-count {
    position: relative;
    z-index: 2;
    color: #f8e7b3;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.88);
}

.daifugo-table {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: min(88vw, 1120px);
    height: min(46vh, 440px);
    min-height: min(46vh, 440px);
    padding: 22px 28px;
    border-radius: 56px;
    border: 2px solid transparent;
    background: transparent;
    overflow: visible;
    transform: translateY(-20px);
    box-shadow: none;
}

.daifugo-table.droppable {
    cursor: copy;
}

.daifugo-table.drag-over {
    border-color: transparent;
    box-shadow: none;
}

.daifugo-table-empty {
    color: #eef4e0;
    font-family: 'Cinzel', serif;
    font-size: 1.16rem;
    letter-spacing: 0.12em;
    opacity: 0.84;
}

.daifugo-table-play-group {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.daifugo-table-play-label {
    color: #f2e7c2;
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    letter-spacing: 0.08em;
}

.daifugo-table-play-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.daifugo-table-play-group.reset .daifugo-table-play-label {
    color: #89ee97;
}

.daifugo-reset-banner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 28px;
    border-radius: 18px;
    border: 2px solid rgba(255, 219, 126, 0.68);
    background: linear-gradient(180deg, rgba(70, 28, 10, 0.84), rgba(22, 8, 8, 0.9));
    color: #ffe2a1;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    letter-spacing: 0.18em;
    box-shadow:
        0 0 30px rgba(255, 199, 103, 0.18),
        inset 0 0 18px rgba(255, 226, 158, 0.08);
}

.daifugo-draft-area {
    height: 240px;
    min-height: 240px;
    width: min(74vw, 780px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 14px 0;
    margin-top: -42px;
}

.daifugo-draft-area.drag-over {
    filter: drop-shadow(0 0 18px rgba(255, 231, 161, 0.24));
}

.daifugo-draft-area.active {
    min-height: 240px;
}

.daifugo-draft-placeholder {
    color: rgba(239, 244, 226, 0.7);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.1em;
    font-size: 1rem;
}

.daifugo-hand {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 52px;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 128px 200px 20px 12px;
    margin-top: 0;
    border-radius: 0;
    background: none;
    z-index: 6;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.daifugo-hand::-webkit-scrollbar {
    display: none;
}

.daifugo-card-slot.hand {
    width: 150px;
    min-width: 150px;
    height: 264px;
    margin-right: -18px;
}

.daifugo-card-slot.table {
    width: 244px;
    min-width: 244px;
    height: 356px;
}

.daifugo-card-slot.draft {
    width: 214px;
    min-width: 214px;
    height: 314px;
}

.daifugo-card-slot {
    position: relative;
    border: 0;
    background: transparent;
    padding: 0;
    display: grid;
    place-items: start center;
}

.daifugo-card-slot .card,
.daifugo-card-slot .daifugo-fallback-card {
    transform-origin: top center;
    pointer-events: none;
}

.daifugo-card-slot.hand .card {
    transform: scale(0.78);
}

.daifugo-card-slot.table .card {
    transform: scale(1.02);
}

.daifugo-card-slot.draft .card {
    transform: scale(0.92);
}

.daifugo-card-slot.selectable {
    cursor: pointer;
}

.daifugo-card-slot.selectable:hover {
    transform: translateY(-34px);
    z-index: 4;
}

.daifugo-card-slot.hand.selectable:hover .card {
    transform: scale(0.88);
}

body.controller-input-active .daifugo-card-slot.selectable:hover {
    transform: none;
    z-index: auto;
}

body.controller-input-active .daifugo-card-slot.hand.selectable:hover .card {
    transform: scale(0.78);
}

.daifugo-card-slot.hand.daifugo-controller-selected {
    transform: translateY(-34px);
    z-index: 6;
}

.daifugo-card-slot.hand.daifugo-controller-selected .card {
    transform: scale(0.88);
}

.daifugo-card-slot.selected {
    transform: translateY(-52px);
    filter: drop-shadow(0 0 18px rgba(250, 222, 144, 0.4));
    z-index: 5;
}

.daifugo-card-slot.selected:hover {
    transform: translateY(-70px);
}

.daifugo-card-slot.selected:hover .card {
    transform: scale(0.98);
}

body.controller-input-active .daifugo-card-slot.selected:hover {
    transform: translateY(-52px);
}

body.controller-input-active .daifugo-card-slot.selected:hover .card {
    transform: scale(0.78);
}

.daifugo-card-slot.hand.selected.daifugo-controller-selected {
    transform: translateY(-70px);
    z-index: 7;
}

.daifugo-card-slot.hand.selected.daifugo-controller-selected .card {
    transform: scale(0.98);
}

.daifugo-card-slot.playable .card,
.daifugo-card-slot.playable .daifugo-fallback-card {
    filter:
        drop-shadow(0 0 0 rgba(0, 0, 0, 0))
        drop-shadow(0 0 8px rgba(var(--daifugo-playable-shadow-rgb), 0.18));
}

.daifugo-card-slot.playable::after {
    content: none;
}

.daifugo-card-slot.unplayable .card,
.daifugo-card-slot.unplayable .daifugo-fallback-card {
    filter: saturate(0.94) brightness(0.92);
}

.daifugo-card-slot.unplayable::after {
    content: none;
}

.daifugo-card-slot.back-only {
    pointer-events: none;
}

.daifugo-card-slot.dragging {
    opacity: 0.4;
}

.daifugo-card-slot.draft-card {
    cursor: pointer;
}

.daifugo-card-slot.draft-card:hover {
    transform: translateY(-42px);
    z-index: 6;
}

.daifugo-card-slot.draft-card:hover .card {
    transform: scale(1.02);
}

.daifugo-rival-panel {
    display: none !important;
}

.daifugo-rival-body {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 12px;
    padding: 18px 18px 18px;
    border-radius: 20px;
    border: 1px solid rgba(226, 198, 129, 0.28);
    background: linear-gradient(180deg, rgba(17, 31, 22, 0.86), rgba(6, 14, 16, 0.9));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.28);
}

.daifugo-rival-list {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.daifugo-rival-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-width: 164px;
    padding: 0;
    border-radius: 16px;
    background: transparent;
}

.daifugo-rival-portrait {
    width: 156px;
    height: 156px;
    flex: 0 0 156px;
    border-radius: 18px;
    border: 2px solid rgba(225, 196, 126, 0.34);
    background:
        linear-gradient(180deg, rgba(19, 30, 38, 0.36), rgba(5, 8, 12, 0.42)),
        rgba(10, 16, 18, 0.86);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(255, 242, 206, 0.12);
}

.daifugo-rival-portrait.empty::before {
    content: 'NO IMAGE';
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: rgba(247, 236, 209, 0.72);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
    font-size: 0.76rem;
}

.daifugo-rival-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
    justify-items: center;
}

.daifugo-rival-name {
    color: #fff0c5;
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.daifugo-rival-sub {
    color: #d7e4d9;
    font-size: 0.84rem;
}

.daifugo-card-display .card-effect-line {
    display: none;
}

.daifugo-card-display .card-image-race {
    display: none;
}

.daifugo-card-display .card-cost {
    display: grid;
    place-items: center;
    color: #f4ebc8;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.72);
}

.daifugo-card-display .card-effect-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
}

.daifugo-card-display .daifugo-effect-orbs {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28px;
}

.daifugo-card-display .daifugo-effect-orbs .card-attr-orb {
    position: relative;
    width: 24px;
    height: 24px;
    border-width: 1px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.daifugo-card-display .daifugo-effect-orbs .card-attr-orb::after {
    content: attr(data-attr-code);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f8f5ea;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.96),
        0 0 6px rgba(0, 0, 0, 0.72);
    pointer-events: none;
}

.daifugo-card-display .daifugo-origin-attr-orbs {
    display: none;
}

.daifugo-card-display .card-bp-icon.daifugo-bt-symbol {
    background-image: none !important;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid rgba(255, 244, 206, 0.22);
    background: rgba(7, 12, 20, 0.72);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

.daifugo-card-display .card-bp-icon.daifugo-bt-symbol.daifugo-bt-symbol-empty {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.daifugo-card-display .card-bp-icon.daifugo-bt-symbol .card-bp-letter {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.daifugo-card-display .card-bp-icon.daifugo-bt-symbol.daifugo-bt-symbol-empty .card-bp-letter {
    opacity: 0;
}

.daifugo-card-slot.playable .card-name,
.daifugo-card-slot.playable .card-image-lv,
.daifugo-card-slot.playable .card-image-race,
.daifugo-card-slot.playable .card-bp-letter,
.daifugo-card-slot.playable .card-effect-panel,
.daifugo-card-slot.playable .card-stats span {
    color: var(--daifugo-playable-color) !important;
    text-shadow: 0 0 10px rgba(var(--daifugo-playable-shadow-rgb), 0.38);
}

.daifugo-card-slot.unplayable .card-name,
.daifugo-card-slot.unplayable .card-image-lv,
.daifugo-card-slot.unplayable .card-image-race,
.daifugo-card-slot.unplayable .card-bp-letter,
.daifugo-card-slot.unplayable .card-effect-panel,
.daifugo-card-slot.unplayable .card-stats span {
    color: var(--daifugo-unplayable-color) !important;
    text-shadow: 0 0 10px rgba(var(--daifugo-unplayable-shadow-rgb), 0.24);
}

.daifugo-card-slot.pair-playable .card-name,
.daifugo-card-slot.pair-playable .card-image-lv,
.daifugo-card-slot.pair-playable .card-image-race,
.daifugo-card-slot.pair-playable .card-bp-letter,
.daifugo-card-slot.pair-playable .card-effect-panel,
.daifugo-card-slot.pair-playable .card-stats span {
    color: #69c8ff !important;
    text-shadow: 0 0 10px rgba(87, 191, 255, 0.36);
}

.daifugo-card-slot.pair-unplayable .card-name,
.daifugo-card-slot.pair-unplayable .card-image-lv,
.daifugo-card-slot.pair-unplayable .card-image-race,
.daifugo-card-slot.pair-unplayable .card-bp-letter,
.daifugo-card-slot.pair-unplayable .card-effect-panel,
.daifugo-card-slot.pair-unplayable .card-stats span {
    color: #ff6f6f !important;
    text-shadow: 0 0 10px rgba(255, 91, 91, 0.3);
}

.daifugo-card-slot.resettable .card-name,
.daifugo-card-slot.resettable .card-image-lv,
.daifugo-card-slot.resettable .card-image-race,
.daifugo-card-slot.resettable .card-bp-letter,
.daifugo-card-slot.resettable .card-effect-panel,
.daifugo-card-slot.resettable .card-stats span {
    color: var(--daifugo-resettable-color) !important;
    text-shadow: 0 0 10px rgba(var(--daifugo-resettable-shadow-rgb), 0.32);
}

.daifugo-card-slot.lock-trigger .card-name,
.daifugo-card-slot.lock-trigger .card-image-lv,
.daifugo-card-slot.lock-trigger .card-image-race,
.daifugo-card-slot.lock-trigger .card-bp-letter,
.daifugo-card-slot.lock-trigger .card-effect-panel,
.daifugo-card-slot.lock-trigger .card-stats span {
    color: var(--daifugo-lock-trigger-color) !important;
    text-shadow:
        0 0 10px rgba(var(--daifugo-lock-trigger-shadow-rgb), 0.42),
        0 0 22px rgba(var(--daifugo-lock-trigger-shadow-rgb), 0.16);
}

.daifugo-card-slot.resettable.lock-trigger .card-name,
.daifugo-card-slot.resettable.lock-trigger .card-image-lv,
.daifugo-card-slot.resettable.lock-trigger .card-image-race,
.daifugo-card-slot.resettable.lock-trigger .card-bp-letter,
.daifugo-card-slot.resettable.lock-trigger .card-effect-panel,
.daifugo-card-slot.resettable.lock-trigger .card-stats span {
    color: var(--daifugo-resettable-color) !important;
    text-shadow: 0 0 10px rgba(var(--daifugo-resettable-shadow-rgb), 0.32);
}

.daifugo-fallback-card {
    width: 98px;
    height: 144px;
    border-radius: 14px;
    border: 1px solid rgba(223, 197, 126, 0.25);
    background: linear-gradient(180deg, rgba(41, 52, 68, 0.92), rgba(20, 25, 34, 0.92));
    color: #f1ead6;
    display: grid;
    place-items: center;
    padding: 10px;
    text-align: center;
}

.daifugo-result {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    min-width: 260px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(223, 197, 126, 0.38);
    background: linear-gradient(180deg, rgba(24, 36, 20, 0.94), rgba(10, 18, 14, 0.96));
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.42);
    z-index: 30;
    pointer-events: auto;
}

.daifugo-result.active {
    display: grid;
    gap: 10px;
}

.daifugo-help-modal {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
}

.daifugo-help-modal.hidden {
    display: none;
}

.daifugo-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 10, 12, 0.62);
}

.daifugo-help-panel {
    position: relative;
    z-index: 1;
    width: min(920px, calc(100vw - 40px));
    max-height: min(86vh, 920px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 20px;
    border: 1px solid rgba(223, 197, 126, 0.34);
    background: linear-gradient(180deg, rgba(16, 30, 24, 0.96), rgba(7, 14, 18, 0.96));
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.daifugo-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(223, 197, 126, 0.2);
}

.daifugo-help-title {
    color: #f0d79a;
    font-family: 'Cinzel', serif;
    font-size: 1.28rem;
    letter-spacing: 0.12em;
}

.daifugo-help-close {
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(223, 197, 126, 0.32);
    background: rgba(12, 19, 28, 0.88);
    color: #f7f2df;
    font-size: 1.4rem;
    cursor: pointer;
}

.daifugo-help-body {
    overflow: auto;
    display: grid;
    gap: 14px;
    padding: 18px;
}

.daifugo-help-section {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(223, 197, 126, 0.12);
}

.daifugo-help-section-title {
    color: #f0d79a;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.daifugo-help-section p {
    color: #eef4e0;
    font-size: 1rem;
    line-height: 1.7;
}

.daifugo-result-title {
    color: #f3da9f;
    font-family: 'Cinzel', serif;
    font-size: 1.18rem;
    letter-spacing: 0.08em;
}

.daifugo-result-row {
    color: #f6f0de;
    font-size: 1.04rem;
}

@keyframes daifugoDeckPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@media (max-width: 1280px) {
    html:not(.cc-desktop-layout) .daifugo-board-shell {
        grid-template-columns: 138px minmax(0, 1fr) 138px;
    }

    html:not(.cc-desktop-layout) .daifugo-table {
        width: min(90vw, 960px);
    }
}

@media (max-width: 900px) {
    html:not(.cc-desktop-layout) .daifugo-screen-layout {
        padding: 12px;
        grid-template-rows: auto minmax(0, 1fr);
        padding-bottom: 290px;
    }

    html:not(.cc-desktop-layout) .daifugo-header {
        left: 12px;
        right: 12px;
        top: 12px;
        flex-wrap: wrap;
    }

    html:not(.cc-desktop-layout) .daifugo-header-reveal-zone {
        height: 52px;
    }

    html:not(.cc-desktop-layout) .daifugo-round-indicator {
        order: 3;
        width: 100%;
        margin: 0;
        text-align: left;
        font-size: 1.14rem;
    }

    html:not(.cc-desktop-layout) .daifugo-header {
        flex-direction: column;
        align-items: flex-start;
    }

    html:not(.cc-desktop-layout) .daifugo-board-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        margin-top: 92px;
    }

    html:not(.cc-desktop-layout) .daifugo-lock-panel {
        position: static;
        width: 100%;
        margin-bottom: 8px;
    }

    html:not(.cc-desktop-layout) .daifugo-seat.top,
    html:not(.cc-desktop-layout) .daifugo-seat.side.left,
    html:not(.cc-desktop-layout) .daifugo-seat.side.right,
    html:not(.cc-desktop-layout) .daifugo-table-stage {
        grid-column: 1;
    }

    html:not(.cc-desktop-layout) .daifugo-seat.top {
        grid-row: 1;
    }

    html:not(.cc-desktop-layout) .daifugo-seat-panel.top {
        transform: none;
    }

    html:not(.cc-desktop-layout) .daifugo-seat-info.top,
    html:not(.cc-desktop-layout) .daifugo-seat-portrait.top {
        transform: none;
    }

    html:not(.cc-desktop-layout) .daifugo-seat.side.left {
        grid-row: 2;
    }

    html:not(.cc-desktop-layout) .daifugo-seat.side.right {
        grid-row: 3;
    }

    html:not(.cc-desktop-layout) .daifugo-table-stage {
        grid-row: 4;
        grid-template-rows: auto minmax(0, 210px) 96px;
        padding-top: 8px;
    }

    html:not(.cc-desktop-layout) .daifugo-symbol-legend {
        left: calc(100% + 8px);
        top: 0;
    }

    html:not(.cc-desktop-layout) .daifugo-player-status {
        left: 10px;
        top: auto;
        bottom: calc(100% + 10px);
        transform: none;
        min-width: 150px;
    }

    html:not(.cc-desktop-layout) .daifugo-screen.header-stowed .daifugo-board-shell {
        margin-top: 24px;
    }

    html:not(.cc-desktop-layout) .daifugo-bottom-strip {
        position: fixed;
        right: 14px;
        bottom: 14px;
        left: auto;
        top: auto;
        transform: none;
        justify-content: center;
        padding-right: 0;
    }

    html:not(.cc-desktop-layout) .daifugo-action-row {
        width: 100%;
        justify-content: center;
    }

    html:not(.cc-desktop-layout) .daifugo-action-btn {
        flex: 1;
    }

    html:not(.cc-desktop-layout) #daifugoPassBtn {
        min-width: 0;
        min-height: 52px;
        font-size: 1.16rem;
    }

    html:not(.cc-desktop-layout) .daifugo-table {
        min-width: 0;
        width: 100%;
        height: 210px;
        min-height: 210px;
        border-radius: 36px;
    }

    html:not(.cc-desktop-layout) .daifugo-card-slot.hand {
        width: 102px;
        min-width: 102px;
        height: 182px;
        margin-right: -12px;
    }

    html:not(.cc-desktop-layout) .daifugo-card-slot.hand .card {
        transform: scale(0.58);
    }

    html:not(.cc-desktop-layout) .daifugo-card-back.hand {
        width: 98px;
        height: 144px;
    }

    html:not(.cc-desktop-layout) .daifugo-card-slot.table {
        width: 156px;
        min-width: 156px;
        height: 228px;
    }

    html:not(.cc-desktop-layout) .daifugo-card-slot.table .card {
        transform: scale(0.68);
    }

    html:not(.cc-desktop-layout) .daifugo-card-slot.draft {
        width: 138px;
        min-width: 138px;
        height: 204px;
    }

    html:not(.cc-desktop-layout) .daifugo-card-slot.draft .card {
        transform: scale(0.7);
    }

    html:not(.cc-desktop-layout) .daifugo-draft-area {
        width: 100%;
        height: 96px;
        min-height: 96px;
        margin-top: -20px;
    }

    html:not(.cc-desktop-layout) .daifugo-hand {
        left: 6px;
        right: 6px;
        bottom: 28px;
        padding: 92px 150px 12px 6px;
    }

    html:not(.cc-desktop-layout) .daifugo-seat-head {
        font-size: 0.96rem;
    }

    html:not(.cc-desktop-layout) .daifugo-seat-status,
    html:not(.cc-desktop-layout) .daifugo-seat-count {
        font-size: 0.9rem;
    }

    html:not(.cc-desktop-layout) .daifugo-seat-portrait.top {
        width: 112px;
        height: 112px;
    }

    html:not(.cc-desktop-layout) .daifugo-seat-portrait.left,
    html:not(.cc-desktop-layout) .daifugo-seat-portrait.right {
        width: 96px;
        height: 96px;
    }

    html:not(.cc-desktop-layout) .daifugo-back-fan.left,
    html:not(.cc-desktop-layout) .daifugo-back-fan.right {
        transform: none;
    }

    html:not(.cc-desktop-layout) .daifugo-seat-pass-badge {
        font-size: 0.82rem;
        padding: 5px 10px;
    }

    html:not(.cc-desktop-layout) .daifugo-rival-body {
        max-width: 100%;
    }
}

.library-screen {
    position: fixed;
    inset: 0;
    z-index: 1960;
    background:
        linear-gradient(rgba(5, 10, 24, 0.4), rgba(5, 10, 24, 0.82)),
        url('material/field.png');
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    padding: 16px 18px 14px;
}

.library-screen.hidden {
    display: none;
}

body.controller-input-active .library-screen,
body.controller-input-active .library-screen *,
body.controller-input-active .travel-result-confirm,
body.controller-input-active .travel-result-confirm *,
body.controller-input-active .library-controller-select-menu,
body.controller-input-active .library-controller-select-menu * {
    cursor: none !important;
}

.library-header {
    display: grid;
    gap: 8px;
}

.library-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.library-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.3rem, 2vw, 2rem);
    color: #f0d28b;
    letter-spacing: 0.08em;
}

.library-controls {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 170px minmax(270px, 300px) 150px 120px 88px auto;
    align-items: center;
    gap: 10px;
}

body.controller-input-active .library-controls::before,
body.controller-input-active .library-controls::after,
body.controller-input-active .library-filter-btn::before {
    position: absolute;
    top: -24px;
    min-width: 58px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99, 255, 147, 0.68);
    border-radius: 5px;
    background: rgba(4, 18, 14, 0.82);
    color: #9cffb5;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: 0 0 12px rgba(76, 255, 130, 0.22);
    pointer-events: none;
    z-index: 2;
}

body.controller-input-active .library-controls::before {
    content: "□ SEARCH";
    left: clamp(150px, 18vw, 280px);
}

body.controller-input-active .library-controls::after {
    content: "△ MODE";
    left: max(96px, calc(100% - 970px));
}

.library-search-input {
    height: 38px;
    border-radius: 9px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(6, 12, 28, 0.7);
    color: #f2f4f8;
    padding: 0 12px;
    outline: none;
}

.library-search-input:focus {
    border-color: rgba(241, 209, 128, 0.8);
}

.library-count-text {
    color: #d4dfef;
    font-family: 'Cinzel', serif;
    min-width: 92px;
    text-align: right;
}

.library-back-btn {
    width: auto;
    min-width: 128px;
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.95rem;
}

.library-debug-btn {
    height: 38px;
    border-radius: 9px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(8, 16, 36, 0.88);
    color: #f2d89a;
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.library-filter-btn {
    position: relative;
    overflow: visible;
    height: 38px;
    border-radius: 9px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(8, 16, 36, 0.88);
    color: #d8e7ff;
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.library-filter-btn:hover,
.library-debug-btn:hover {
    filter: brightness(1.08);
}

body.controller-input-active .library-filter-btn::before {
    content: "START";
    left: 50%;
    transform: translateX(-50%);
}

body.controller-input-active .library-filter-btn:hover,
body.controller-input-active .library-debug-btn:hover,
body.controller-input-active .library-view-btn:hover,
body.controller-input-active .library-zoom-btn:hover {
    filter: none;
}

.daifugo-controller-select-menu {
    position: fixed;
    z-index: 2600;
    max-height: min(280px, calc(100vh - 32px));
    overflow-y: auto;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(223, 197, 126, 0.58);
    border-radius: 10px;
    background: rgba(6, 14, 18, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.58), 0 0 20px rgba(75, 255, 124, 0.12);
}

.daifugo-controller-select-option {
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(223, 197, 126, 0.24);
    background: rgba(12, 19, 28, 0.9);
    color: #f7f2df;
    font-family: 'Cinzel', serif;
    font-size: 0.96rem;
    cursor: pointer;
    text-align: left;
    padding: 0 12px;
}

.daifugo-controller-select-option.daifugo-controller-selected {
    color: #9cffb5;
    border-color: rgba(126, 255, 159, 0.95);
    box-shadow:
        0 0 0 2px rgba(109, 255, 143, 0.24),
        0 0 18px rgba(75, 255, 124, 0.34),
        inset 0 0 14px rgba(75, 255, 124, 0.1);
    text-shadow: 0 0 8px rgba(126, 255, 159, 0.82);
}

.library-view-switch {
    height: 38px;
    display: grid;
    grid-template-columns: repeat(3, minmax(86px, 1fr));
    min-width: 270px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    border-radius: 9px;
    overflow: hidden;
    background: rgba(8, 16, 36, 0.88);
}

.library-view-btn {
    border: 0;
    background: transparent;
    color: #d4dfef;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
}

body:not(.controller-input-active) .library-view-btn:hover {
    filter: brightness(1.08);
}

.library-view-btn.active {
    background: rgba(238, 204, 126, 0.2);
    color: #f3d99d;
}

body.controller-input-active .library-view-switch {
    position: relative;
    overflow: visible;
}

body.controller-input-active .library-view-switch::before,
body.controller-input-active .library-view-switch::after {
    position: absolute;
    top: -24px;
    min-width: 38px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(99, 255, 147, 0.68);
    border-radius: 5px;
    background: rgba(4, 18, 14, 0.82);
    color: #9cffb5;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: 0 0 12px rgba(76, 255, 130, 0.22);
    pointer-events: none;
}

body.controller-input-active .library-view-switch::before {
    content: "L1";
    left: 4px;
}

body.controller-input-active .library-view-switch::after {
    content: "R1";
    right: 4px;
}

.library-view-switch.disabled {
    opacity: 0.55;
}

.library-view-switch.disabled .library-view-btn {
    pointer-events: none;
}

.library-zoom-switch {
    height: 38px;
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    border-radius: 9px;
    overflow: hidden;
    background: rgba(8, 16, 36, 0.88);
}

.library-zoom-btn {
    border: 0;
    background: transparent;
    color: #d4dfef;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    cursor: pointer;
}

body:not(.controller-input-active) .library-zoom-btn:hover {
    filter: brightness(1.08);
}

.library-zoom-value {
    display: grid;
    place-items: center;
    color: #f3d99d;
    font-size: 0.78rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
    border-left: 1px solid rgba(223, 190, 109, 0.2);
    border-right: 1px solid rgba(223, 190, 109, 0.2);
}

.library-sort-select {
    height: 38px;
    border-radius: 9px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(6, 12, 28, 0.8);
    color: #f2f4f8;
    padding: 0 10px;
}

.library-content {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
}

.library-card-grid {
    --library-card-node-scale: 0.68;
    --library-card-item-min-height: 254px;
    overflow-anchor: none;
    --library-item-min-height: 118px;
    --library-item-icon-size: 72px;
    --library-item-name-size: 1rem;
    --library-item-desc-size: 0.84rem;
    --library-item-owned-size: 0.8rem;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(219, 184, 106, 0.28);
    border-radius: 12px;
    background: rgba(7, 13, 30, 0.62);
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.library-card-item {
    position: relative;
    border: 1px solid rgba(227, 196, 120, 0.2);
    border-radius: 10px;
    background: rgba(4, 9, 20, 0.34);
    min-height: var(--library-card-item-min-height);
    overflow: hidden;
    padding: 0;
}

.library-card-spacer {
    width: 100%;
    pointer-events: none;
}

body:not(.controller-input-active) .library-card-item:hover,
.library-card-item.active,
.library-card-item.library-controller-selected {
    border-color: rgba(253, 221, 142, 0.72);
    background: rgba(26, 22, 10, 0.38);
}

.library-card-item-hidden {
    display: grid;
    place-items: center;
    background:
        linear-gradient(180deg, rgba(26, 22, 16, 0.96), rgba(10, 10, 10, 0.98));
}

.library-card-back-face {
    position: absolute;
    inset: 8px;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 232, 166, 0.03), rgba(12, 10, 15, 0.16)),
        url('material/CardFrame2.png') center / cover no-repeat;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.34);
}

.library-card-back-sigil {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26%;
    height: 72%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}

.library-card-back-sigil::before,
.library-card-back-sigil::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 22%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 244, 214, 0.2), rgba(255, 244, 214, 0.06));
    clip-path: polygon(50% 0%, 100% 28%, 64% 100%, 36% 100%, 0% 28%);
}

.library-card-back-sigil::before {
    top: 0;
    height: 40%;
}

.library-card-back-sigil::after {
    bottom: 0;
    height: 40%;
}

.library-item-entry {
    width: 100%;
    border: 1px solid rgba(227, 196, 120, 0.2);
    border-radius: 10px;
    background: rgba(4, 9, 20, 0.34);
    color: #e9eef9;
    text-align: left;
    padding: 12px;
    display: grid;
    grid-template-columns: var(--library-item-icon-size) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: var(--library-item-min-height);
    cursor: pointer;
}

body:not(.controller-input-active) .library-item-entry:hover,
.library-item-entry.active,
.library-item-entry.library-controller-selected {
    border-color: rgba(253, 221, 142, 0.72);
    background: rgba(26, 22, 10, 0.38);
}

.library-item-entry-icon {
    width: var(--library-item-icon-size);
    height: var(--library-item-icon-size);
    border-radius: 8px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.08);
}

.library-item-entry-main {
    min-width: 0;
}

.library-item-entry-name {
    font-size: var(--library-item-name-size);
    color: #f7f4ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-item-entry-desc {
    margin-top: 4px;
    font-size: var(--library-item-desc-size);
    color: #c5d3ea;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
}

.library-item-entry-owned {
    margin-top: 4px;
    font-size: var(--library-item-owned-size);
    color: #f2d89a;
}

@keyframes libraryControllerCursorPulse {
    0%, 100% {
        border-color: rgba(109, 255, 143, 0.72);
        box-shadow: 0 0 0 1px rgba(109, 255, 143, 0.22), 0 0 12px rgba(75, 255, 124, 0.18);
    }
    50% {
        border-color: rgba(126, 255, 159, 1);
        box-shadow: 0 0 0 2px rgba(126, 255, 159, 0.34), 0 0 22px rgba(75, 255, 124, 0.34);
    }
}

.library-screen .library-controller-selected,
.travel-result-confirm .library-controller-selected {
    border-color: rgba(126, 255, 159, 0.95) !important;
    outline: 2px solid rgba(112, 255, 150, 0.8);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px rgba(109, 255, 143, 0.22), 0 0 18px rgba(75, 255, 124, 0.28);
    animation: libraryControllerCursorPulse 1.65s ease-in-out infinite;
}

.library-screen .library-controller-editing {
    border-color: rgba(255, 224, 138, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(255, 224, 138, 0.24), 0 0 18px rgba(255, 205, 94, 0.32);
}

.library-controller-select-menu {
    position: fixed;
    z-index: 2300;
    max-height: min(280px, calc(100vh - 32px));
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(223, 190, 109, 0.72);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62), 0 0 20px rgba(75, 255, 124, 0.12);
}

.library-controller-select-option {
    width: 100%;
    min-height: 34px;
    display: block;
    border: 1px solid rgba(186, 201, 229, 0.2);
    border-radius: 7px;
    background: rgba(10, 18, 38, 0.92);
    color: #e8f1ff;
    font-size: 0.86rem;
    text-align: left;
    padding: 7px 10px;
    cursor: pointer;
}

.library-controller-select-option + .library-controller-select-option {
    margin-top: 6px;
}

.library-controller-select-option.library-controller-selected {
    color: #9cffb5;
    border-color: rgba(126, 255, 159, 0.95);
    outline: 2px solid rgba(112, 255, 150, 0.8);
    outline-offset: 1px;
    background: rgba(14, 48, 28, 0.86);
    box-shadow: 0 0 16px rgba(75, 255, 124, 0.32);
}

.library-card-item.library-controller-selected,
.library-item-entry.library-controller-selected {
    background: rgba(14, 48, 28, 0.42);
}

.library-card-item.library-controller-selected .library-card-node,
.library-item-entry.library-controller-selected .library-item-entry-name,
.library-view-btn.library-controller-selected,
.library-back-btn.library-controller-selected,
.library-filter-btn.library-controller-selected,
.library-debug-btn.library-controller-selected,
.library-zoom-btn.library-controller-selected,
.library-sort-select.library-controller-selected,
.library-search-input.library-controller-selected,
.library-lore-panel .library-controller-selected {
    color: #9cffb5 !important;
}

.library-card-node {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translate3d(-50%, 0, 0) scale3d(var(--library-card-node-scale), var(--library-card-node-scale), 1);
    transform-origin: top center;
    pointer-events: none;
    backface-visibility: hidden;
}

.library-detail-pane {
    min-height: 0;
    border: 1px solid rgba(219, 184, 106, 0.28);
    border-radius: 12px;
    background: rgba(7, 13, 30, 0.78);
    padding: 10px 10px 8px;
    display: grid;
    grid-template-rows: auto auto auto auto auto auto auto auto auto 1fr;
    gap: 6px;
}

.library-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.library-detail-title {
    font-family: 'Cinzel', serif;
    color: #f0cf82;
    font-size: 2rem;
    letter-spacing: 0.02em;
    line-height: 1;
}

.library-detail-more-btn {
    min-width: 86px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(223, 190, 109, 0.5);
    background: linear-gradient(180deg, rgba(44, 58, 96, 0.92), rgba(16, 24, 44, 0.92));
    color: #f6deb0;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.library-detail-more-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(244, 210, 128, 0.82);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
}

.library-detail-more-btn:disabled {
    opacity: 0.42;
    cursor: default;
}

.library-detail-card-wrap {
    width: 100%;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    padding: 6px;
    min-height: 290px;
}

.library-detail-card {
    width: 100%;
    min-height: 278px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(16, 22, 36, 0.9);
}

.library-detail-card.library-detail-card-hidden,
.library-lore-image.library-lore-image-hidden {
    background:
        linear-gradient(180deg, rgba(26, 22, 16, 0.98), rgba(10, 10, 10, 0.99)),
        url('material/CardFrame2.png') center / cover no-repeat;
    background-color: rgba(8, 10, 14, 0.96);
    position: relative;
    overflow: hidden;
}

.library-detail-card.zoomable {
    cursor: zoom-in;
}

.library-detail-art-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.library-detail-art-controls.hidden {
    display: none;
}

.library-detail-art-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(223, 190, 109, 0.42);
    background: linear-gradient(180deg, rgba(28, 40, 72, 0.92), rgba(12, 18, 36, 0.94));
    color: #f5ddaf;
    font-size: 0.92rem;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.library-detail-art-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(244, 210, 128, 0.82);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
}

.library-detail-art-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.library-detail-art-page {
    min-width: 90px;
    text-align: center;
    color: #e8d2a0;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

.library-image-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 3300;
}

.library-image-zoom-modal.hidden {
    display: none;
}

.library-image-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.library-image-zoom-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(512px, calc(100vw - 24px));
    height: min(512px, calc(100vh - 24px));
    border: 1px solid rgba(223, 190, 109, 0.6);
    border-radius: 12px;
    background: rgba(10, 16, 32, 0.92);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.library-image-zoom-image {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.library-image-zoom-close {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 1;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(8, 12, 24, 0.8);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.library-lore-modal {
    position: fixed;
    inset: 0;
    z-index: 2090;
}

.library-lore-modal.hidden {
    display: none;
}

.library-lore-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.76);
}

.library-lore-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1040px, calc(100vw - 36px));
    max-height: min(88vh, 860px);
    border: 1px solid rgba(223, 190, 109, 0.56);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(58, 74, 118, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(12, 20, 40, 0.98), rgba(6, 10, 22, 0.98));
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}

.library-lore-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.library-lore-title {
    font-family: 'Cinzel', serif;
    color: #f0cf82;
    letter-spacing: 0.06em;
    font-size: 1.15rem;
}

.library-lore-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(8, 12, 24, 0.8);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.library-lore-body {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
}

.library-lore-visual {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    align-content: start;
}

.library-lore-image {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    border: 1px solid rgba(223, 190, 109, 0.35);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        rgba(16, 22, 36, 0.92);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: zoom-in;
}

.library-lore-name {
    color: #f8f0dd;
    font-size: clamp(1.3rem, 1.45vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
}

.library-lore-meta,
.library-lore-stats {
    border: 1px solid rgba(223, 190, 109, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #d6e1f3;
    padding: 10px 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.library-lore-main {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    display: grid;
    align-content: start;
    gap: 14px;
}

.library-lore-section {
    border: 1px solid rgba(223, 190, 109, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    padding: 12px;
    display: grid;
    gap: 10px;
}

.library-lore-section-title {
    font-family: 'Cinzel', serif;
    color: #f0cf82;
    letter-spacing: 0.04em;
    font-size: 1rem;
}

.library-lore-flavor-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.library-lore-flavor-edit-btn {
    min-width: 62px;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(211, 171, 77, 0.78);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(56, 44, 19, 0.95), rgba(24, 18, 10, 0.95));
    color: #ffe7a8;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.library-lore-flavor-edit-btn:hover:not(:disabled) {
    border-color: #ffe08a;
    filter: brightness(1.12);
}

.library-lore-flavor-edit-btn.hidden {
    display: none;
}

.library-lore-info-list {
    display: grid;
    gap: 8px;
}

.library-lore-info-list.hidden,
.library-lore-profile-editor.hidden {
    display: none;
}

.library-lore-info-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.library-lore-info-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.library-lore-info-label {
    color: #e6c978;
    font-size: 0.92rem;
    line-height: 1.5;
}

.library-lore-info-value {
    color: #e9edf5;
    line-height: 1.56;
    white-space: pre-wrap;
    word-break: break-word;
}

.library-lore-flavor {
    max-height: min(26vh, 280px);
    overflow-y: auto;
    padding-right: 4px;
    color: #e9dfc6;
    line-height: 1.62;
    white-space: pre-wrap;
}

.library-lore-flavor.hidden,
.library-lore-flavor-editor.hidden {
    display: none;
}

.library-lore-profile-editor,
.library-lore-flavor-editor {
    display: grid;
    gap: 10px;
}

.library-lore-profile-editor-fields {
    display: grid;
    gap: 8px;
}

.library-lore-profile-editor-row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.library-lore-profile-editor-label {
    color: #e6c978;
    font-size: 0.92rem;
    line-height: 1.4;
}

.library-lore-profile-editor input,
.library-lore-flavor-editor textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(193, 143, 76, 0.72);
    border-radius: 6px;
    background: rgba(2, 7, 14, 0.92);
    color: #f4e6c8;
    font: inherit;
    line-height: 1.45;
    outline: none;
}

.library-lore-flavor-editor textarea {
    min-height: 118px;
    resize: vertical;
}

.library-lore-profile-editor input:focus,
.library-lore-flavor-editor textarea:focus {
    border-color: #ffe08a;
    box-shadow: 0 0 14px rgba(255, 205, 94, 0.22);
}

.library-lore-flavor-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.library-lore-flavor-editor-actions button {
    min-width: 92px;
    min-height: 34px;
    border: 1px solid rgba(211, 171, 77, 0.72);
    border-radius: 6px;
    background: rgba(9, 15, 25, 0.9);
    color: #ffe7a8;
    font-weight: 800;
    cursor: pointer;
}

.library-lore-flavor-editor-actions button:hover {
    border-color: #ffe08a;
    filter: brightness(1.12);
}

.library-filter-modal {
    position: fixed;
    inset: 0;
    z-index: 2080;
}

.library-filter-modal.hidden {
    display: none;
}

.library-filter-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.68);
}

.library-filter-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, calc(100vw - 24px));
    max-height: min(88vh, 760px);
    border: 1px solid rgba(223, 190, 109, 0.55);
    border-radius: 12px;
    background: rgba(8, 14, 30, 0.96);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.6);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    padding: 12px;
}

.library-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    padding-bottom: 8px;
}

.library-filter-title {
    color: #f0cf82;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    font-size: 1.05rem;
}

.library-filter-close {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: rgba(8, 12, 24, 0.8);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.library-filter-grid {
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 12px;
    padding-right: 2px;
}

.library-filter-field {
    display: grid;
    gap: 6px;
}

.library-filter-field-full {
    grid-column: 1 / -1;
}

.library-filter-field span {
    color: #d9e6ff;
    font-size: 0.88rem;
}

.library-filter-input {
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(6, 12, 28, 0.8);
    color: #f2f4f8;
    padding: 0 10px;
    outline: none;
}

.library-filter-input:focus {
    border-color: rgba(241, 209, 128, 0.8);
}

.library-filter-field .library-sort-select {
    width: 100%;
}

.library-skill-query-tabs {
    display: flex;
    gap: 8px;
}

.library-skill-query-tab {
    min-width: 86px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(186, 201, 229, 0.3);
    background: rgba(18, 28, 52, 0.85);
    color: #d7e6ff;
    font-size: 0.82rem;
    cursor: pointer;
}

.library-skill-query-tab.active {
    border-color: rgba(238, 203, 122, 0.78);
    background: rgba(68, 42, 7, 0.9);
    color: #f7ddb0;
}

.library-skill-query-hint {
    min-height: 1.3em;
    color: #e6d5ad;
    font-size: 0.82rem;
    line-height: 1.3;
}

.library-skill-chip-list {
    max-height: 220px;
    overflow: auto;
    border: 1px solid rgba(223, 190, 109, 0.32);
    border-radius: 10px;
    background: rgba(5, 10, 22, 0.65);
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.library-level-chip-list {
    min-height: 44px;
    max-height: 96px;
}

.library-skill-chip {
    border: 1px solid rgba(186, 201, 229, 0.3);
    border-radius: 999px;
    background: rgba(18, 28, 52, 0.85);
    color: #d7e6ff;
    font-size: 0.84rem;
    line-height: 1.2;
    padding: 6px 10px;
    cursor: pointer;
}

.library-skill-chip.active {
    border-color: rgba(238, 203, 122, 0.78);
    background: rgba(68, 42, 7, 0.9);
    color: #f7ddb0;
}

.library-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 10px;
}

.library-filter-action-btn {
    min-width: 116px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(8, 16, 36, 0.88);
    color: #dce8ff;
    font-family: 'Cinzel', serif;
    cursor: pointer;
}

.library-filter-action-btn.primary {
    color: #f2d89a;
    border-color: rgba(238, 203, 122, 0.62);
    background: rgba(52, 34, 8, 0.75);
}

.library-detail-name {
    color: #ffffff;
    font-size: clamp(1.4rem, 1.5vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.22;
}

.library-detail-attribute,
.library-detail-tag-race {
    color: #dce5f8;
    font-size: clamp(1rem, 1.1vw, 1.4rem);
    line-height: 1.3;
}

.library-detail-meta {
    color: #f2e2b8;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.1rem, 1.2vw, 1.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 4px;
}

.library-detail-effects {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 5px 0;
}

.library-detail-effect-line {
    color: #ffffff;
    font-size: clamp(1rem, 1.05vw, 1.35rem);
    line-height: 1.25;
}

.detail-effect-prefix {
    opacity: 0.95;
}

.detail-effect-ref-trigger {
    color: #ffe29a;
    text-decoration: underline;
    text-decoration-color: rgba(255, 222, 146, 0.85);
    text-underline-offset: 2px;
    cursor: help;
    font-weight: 700;
}

.detail-effect-ref-trigger:hover {
    color: #fff0c8;
    text-decoration-color: rgba(255, 245, 204, 0.92);
}

.drift-memory-ref-skill-trigger {
    color: #ffe29a;
    text-decoration: underline;
    text-decoration-color: rgba(255, 222, 146, 0.82);
    text-underline-offset: 2px;
    cursor: help;
}

.drift-memory-ref-skill-trigger:hover {
    color: #fff0c8;
    text-decoration-color: rgba(255, 245, 204, 0.94);
}

.library-detail-stats {
    font-size: clamp(1.2rem, 1.25vw, 1.6rem);
    color: #f0f4ff;
    line-height: 1.18;
}

.library-detail-skill {
    font-size: clamp(0.95rem, 1vw, 1.25rem);
    color: #e9edf5;
    line-height: 1.45;
    min-height: 54px;
    white-space: pre-line;
}

.library-detail-skill {
    overflow: auto;
}

.library-detail-flavor-box {
    border: 1px solid rgba(214, 182, 104, 0.34);
    border-radius: 10px;
    background: rgba(8, 16, 34, 0.5);
    padding: 8px;
}

.library-detail-flavor-title {
    font-family: 'Cinzel', serif;
    color: #e9c875;
    font-size: clamp(1rem, 1.05vw, 1.3rem);
}

.library-detail-flavor {
    font-size: clamp(0.9rem, 0.95vw, 1.2rem);
    line-height: 1.5;
    color: #e9dfc6;
    margin-top: 4px;
    white-space: pre-wrap;
    max-height: min(24vh, 220px);
    overflow-y: auto;
    padding-right: 4px;
}

.library-card-grid::-webkit-scrollbar,
.library-detail-skill::-webkit-scrollbar,
.library-detail-flavor::-webkit-scrollbar,
.library-lore-main::-webkit-scrollbar,
.library-lore-flavor::-webkit-scrollbar,
.library-detail-pane::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.library-card-grid::-webkit-scrollbar-track,
.library-detail-skill::-webkit-scrollbar-track,
.library-detail-flavor::-webkit-scrollbar-track,
.library-lore-main::-webkit-scrollbar-track,
.library-lore-flavor::-webkit-scrollbar-track,
.library-detail-pane::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(26, 22, 12, 0.7), rgba(8, 10, 16, 0.7));
    border: 1px solid rgba(195, 162, 88, 0.28);
    border-radius: 999px;
}

.library-card-grid::-webkit-scrollbar-thumb,
.library-detail-skill::-webkit-scrollbar-thumb,
.library-detail-flavor::-webkit-scrollbar-thumb,
.library-lore-main::-webkit-scrollbar-thumb,
.library-lore-flavor::-webkit-scrollbar-thumb,
.library-detail-pane::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(210, 176, 98, 0.88), rgba(124, 84, 34, 0.88));
    border: 1px solid rgba(242, 214, 142, 0.45);
    border-radius: 999px;
}

.library-card-grid,
.library-detail-skill,
.library-detail-flavor,
.library-lore-main,
.library-lore-flavor,
.library-detail-pane {
    scrollbar-color: rgba(176, 136, 64, 0.95) rgba(23, 18, 12, 0.7);
}

.end-screen {
    position: fixed;
    inset: 0;
    z-index: 1960;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 40%, rgba(16, 28, 44, 0.32), rgba(3, 6, 16, 0.88)),
        url('material/Title.png');
    background-size: cover;
    background-position: center;
}

.end-screen.hidden {
    display: none;
}

.revock-house-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    overflow: hidden;
}

.revock-house-modal.hidden {
    display: none;
}

.revock-house-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 70% 48%, rgba(255, 177, 75, 0.08), transparent 32%),
        linear-gradient(90deg, rgba(2, 1, 0, 0.28), rgba(2, 1, 0, 0.04) 42%, rgba(2, 1, 0, 0.22)),
        linear-gradient(180deg, rgba(5, 3, 1, 0.1), rgba(5, 3, 1, 0.22)),
        url('images/shop/Shop.png');
    background-size: cover;
    background-position: center;
}

.revock-house-panel {
    position: absolute;
    inset: 0;
    color: #f1dcbb;
    padding: clamp(18px, 2.4vw, 38px) clamp(34px, 3.8vw, 66px) clamp(14px, 1.8vw, 26px);
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: clamp(8px, 1.1vw, 16px);
}

.revock-house-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.revock-house-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.085em;
    font-size: clamp(2.6rem, 4.2vw, 5.2rem);
    line-height: 0.9;
    color: #f8d89a;
    text-transform: capitalize;
    text-shadow:
        0 0 18px rgba(255, 212, 120, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.8);
}

.revock-house-close-btn,
.revock-house-action-btn {
    border: 0;
    color: #f3dfba;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.revock-house-close-btn {
    min-width: 220px;
    min-height: 58px;
    padding: 0 34px;
    border-radius: 0;
    background: transparent url('images/shop/button.png') center / 100% 100% no-repeat;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.86);
}

.revock-house-main {
    display: block;
}

.revock-house-actions {
    width: min(58vw, 980px);
    margin-left: clamp(18px, 2.2vw, 42px);
    margin-top: clamp(14px, 2.6vh, 30px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(176px, 19vh, 218px);
    gap: clamp(22px, 2vw, 34px);
}

.revock-house-action-btn {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: clamp(56px, 5.6vw, 82px) 34px 30px;
    background-color: transparent;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: clamp(1.78rem, 2.22vw, 2.62rem);
    line-height: 1.1;
    color: #ffe9b0;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.92),
        0 0 12px rgba(255, 218, 122, 0.35);
    box-shadow: none;
    overflow: visible;
}

#revockHouseCardGachaBtn { background-image: url('images/shop/card.png'); }
#revockHouseUnownedCardGachaBtn { background-image: url('images/shop/rare.png'); }
#revockHouseItemGachaBtn { background-image: url('images/shop/item.png'); }
#revockHouseRecycleItemBtn { background-image: url('images/shop/change.png'); }

.revock-house-gacha-count {
    margin-top: clamp(8px, 1vh, 12px);
    margin-left: clamp(22px, 2.4vw, 46px);
    display: inline-flex;
    gap: 14px;
    align-items: center;
}

.revock-house-gacha-count::before,
.revock-house-gacha-count::after {
    display: none;
    min-width: 42px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(244, 209, 126, 0.72);
    border-radius: 4px;
    background: rgba(10, 7, 4, 0.72);
    color: #ffe9ad;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.86);
    box-shadow: 0 0 12px rgba(220, 154, 52, 0.24);
}

.revock-house-gacha-count::before {
    content: "L1";
}

.revock-house-gacha-count::after {
    content: "R1";
}

body.controller-input-active .revock-house-gacha-count::before,
body.controller-input-active .revock-house-gacha-count::after {
    display: grid;
}

.revock-house-gacha-count-btn {
    min-width: 126px;
    min-height: 48px;
    border: 0;
    background: transparent url('images/shop/button.png') center / 100% 100% no-repeat;
    color: #f4dfb3;
    border-radius: 0;
    padding: 0 14px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.16s ease;
}

.revock-house-gacha-count-btn.active {
    color: #fff36a;
    filter: brightness(1.16);
}

.revock-house-close-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-close-btn:hover,
.revock-house-action-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-action-btn:hover,
.revock-house-gacha-count-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-gacha-count-btn:hover,
.revock-house-card-popup-reveal-all-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-card-popup-reveal-all-btn:hover,
.revock-house-card-popup-ok-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-card-popup-ok-btn:hover,
.travel-result-btn.revock-controller-selected,
body:not(.controller-input-active) .travel-result-btn:hover,
.meta-item-recycle-row.revock-controller-selected,
body:not(.controller-input-active) .meta-item-recycle-row:hover {
    outline: none;
    color: #98ff8f;
    filter: brightness(1.18);
    box-shadow:
        0 0 0 2px rgba(255, 229, 152, 0.46),
        0 0 24px rgba(238, 171, 58, 0.42),
        inset 0 0 18px rgba(255, 215, 117, 0.12);
    animation: revockControllerSelectedTextPulse 1800ms ease-in-out infinite;
}

.revock-house-action-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-action-btn:hover {
    transform: translateY(-2px) scale(1.015);
}

.revock-house-action-btn.revock-controller-selected .revock-house-action-main,
.revock-house-action-btn.revock-controller-selected .revock-house-action-cost,
body:not(.controller-input-active) .revock-house-action-btn:hover .revock-house-action-main,
body:not(.controller-input-active) .revock-house-action-btn:hover .revock-house-action-cost,
.meta-item-recycle-row.revock-controller-selected,
.meta-item-recycle-row.revock-controller-selected *,
body:not(.controller-input-active) .meta-item-recycle-row:hover,
body:not(.controller-input-active) .meta-item-recycle-row:hover * {
    color: inherit;
}

.revock-house-gacha-count-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-gacha-count-btn:hover,
.revock-house-close-btn.revock-controller-selected,
body:not(.controller-input-active) .revock-house-close-btn:hover,
.travel-result-btn.revock-controller-selected {
    color: #98ff8f;
}

.meta-item-recycle-check.revock-controller-selected {
    outline: 2px solid rgba(255, 229, 152, 0.78);
    outline-offset: 3px;
}

@keyframes revockControllerSelectedTextPulse {
    0%, 100% {
        color: #b8ff9a;
        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.92),
            0 0 10px rgba(93, 255, 108, 0.2);
    }
    50% {
        color: #3cff67;
        text-shadow:
            0 2px 8px rgba(0, 0, 0, 0.92),
            0 0 18px rgba(93, 255, 108, 0.56);
    }
}

.revock-house-debug-btn {
    position: absolute;
    right: 38px;
    bottom: 38px;
    z-index: 5;
    border: 1px solid rgba(196, 160, 86, 0.62);
    color: #dfc48e;
    background: rgba(4, 4, 8, 0.58);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.revock-house-action-main {
    white-space: nowrap;
}

#revockHouseUnownedCardGachaBtn .revock-house-action-main {
    font-size: clamp(1.58rem, 1.96vw, 2.32rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
}

body[data-language="en"] #revockHouseUnownedCardGachaBtn .revock-house-action-main {
    max-width: 100%;
    font-size: 1.65rem;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: normal;
    text-align: center;
}

.revock-house-action-cost {
    font-size: clamp(0.92rem, 1.18vw, 1.18rem);
    color: rgba(255, 241, 169, 0.96);
    text-shadow: none;
    letter-spacing: 0.08em;
}

.revock-house-currency {
    position: relative;
    display: block;
    font-size: clamp(0.86rem, 1.14vw, 1.05rem);
    font-weight: 700;
    width: min(64vw, 1120px);
    height: min(5.45vw, 95px);
    min-height: 74px;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    padding: 0;
    background: transparent url('images/shop/window1.png') center / 100% 100% no-repeat;
    box-shadow: none;
    line-height: 1.45;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.46);
}

.revock-house-currency-part {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 48%;
    padding: 0 6px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    overflow: hidden;
    text-overflow: clip;
}

.revock-house-currency-elasi {
    left: 15.5%;
    width: 13.5%;
}

.revock-house-currency-carry {
    left: 38.8%;
    width: 16%;
    font-size: 0.9em;
}

.revock-house-currency-cards {
    left: 61.8%;
    width: 15%;
    font-size: 0.9em;
}

.revock-house-currency-items {
    left: 87%;
    width: 17%;
    font-size: 0.9em;
}

.revock-house-result {
    position: relative;
    width: min(61vw, 1060px);
    height: min(11.75vw, 204px);
    min-height: 166px;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    padding: clamp(38px, 3.25vw, 54px) 56px clamp(24px, 2.2vw, 36px) 92px;
    background: transparent url('images/shop/window2.png') center / 100% 100% no-repeat;
    box-shadow: none;
    line-height: 1.6;
    font-size: clamp(1.05rem, 1.55vw, 1.42rem);
    font-weight: 600;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.revock-house-result::before {
    content: none;
}

.revock-house-result.card-reveal-mode {
    display: grid;
    gap: 8px;
}

.revock-house-result-text {
    color: #f5e8cb;
}

.revock-house-result-card-reveal {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 1px solid rgba(238, 203, 118, 0.42);
    background: linear-gradient(165deg, rgba(12, 20, 41, 0.9), rgba(8, 11, 26, 0.92));
    padding: 8px 9px;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}

.revock-house-result-card-reveal.show {
    animation: revockCardRevealShow 380ms cubic-bezier(.2,.8,.2,1) forwards;
}

.revock-house-result-card-art {
    width: 120px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 1px solid rgba(225, 193, 122, 0.38);
    background: rgba(10, 16, 34, 0.78);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    display: grid;
    place-items: center;
    color: #d5deef;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.revock-house-result-card-info {
    min-width: 0;
}

.revock-house-result-card-name {
    color: #ffe6b1;
    font-size: clamp(1.05rem, 1.55vw, 1.38rem);
    font-weight: 700;
    line-height: 1.35;
}

.revock-house-result-card-meta {
    margin-top: 6px;
    color: #d5e5ff;
    font-size: clamp(0.76rem, 1.08vw, 0.92rem);
    line-height: 1.45;
}

.revock-house-card-popup {
    position: absolute;
    inset: 0;
    z-index: 25;
}

.revock-house-card-popup.hidden {
    display: none;
}

.revock-house-card-popup-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(203, 160, 84, 0.14), transparent 26%),
        rgba(2, 2, 6, 0.88);
    backdrop-filter: blur(5px);
}

.revock-house-card-popup-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(60vw, 580px);
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 24px);
    border-radius: 14px;
    border: 1px solid rgba(236, 203, 122, 0.5);
    background: linear-gradient(165deg, rgba(17, 25, 56, 0.94), rgba(8, 11, 27, 0.95));
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.56), 0 0 24px rgba(125, 172, 255, 0.22);
    padding: 14px 18px 14px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    overflow: hidden;
}

.revock-house-card-popup-panel.cards-5 {
    width: min(99vw, 1380px);
    overflow: hidden;
}

.revock-house-card-popup-panel.cards-10 {
    width: min(99vw, 1380px);
    overflow: auto;
}

.revock-house-card-popup-message {
    color: #f7e4b8;
    font-size: clamp(0.95rem, 1.35vw, 1.15rem);
    line-height: 1.5;
}

.revock-house-card-popup-reveal {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 360px;
    padding: 14px 10px 28px;
}

.revock-house-card-popup-panel.cards-5 .revock-house-card-popup-reveal,
.revock-house-card-popup-panel.cards-10 .revock-house-card-popup-reveal {
    align-items: flex-start;
}

.revock-house-card-popup-card-host {
    --revock-reveal-scale: 1;
    --revock-shell-width: calc(236px * var(--revock-reveal-scale));
    --revock-shell-height: calc(344px * var(--revock-reveal-scale));
    --revock-slot-width: calc(var(--revock-shell-width) + 28px);
    --revock-slot-height: calc(var(--revock-shell-height) + 36px);
    --revock-convert-offset-x: 0px;
    min-width: var(--revock-slot-width);
    min-height: var(--revock-slot-height);
    display: grid;
    grid-template-columns: minmax(0, var(--revock-slot-width));
    gap: 18px;
    place-items: center;
    justify-content: center;
}

.revock-house-card-popup-card-host.cards-5 {
    --revock-reveal-scale: 0.9;
    --revock-slot-width: calc(var(--revock-shell-width) + 20px);
    --revock-slot-height: calc(var(--revock-shell-height) + 28px);
    --revock-convert-offset-x: 18px;
    gap: 16px;
    grid-template-columns: repeat(5, minmax(0, var(--revock-slot-width)));
}

.revock-house-card-popup-card-host.cards-10 {
    --revock-reveal-scale: 0.88;
    --revock-slot-width: calc(var(--revock-shell-width) + 18px);
    --revock-slot-height: calc(var(--revock-shell-height) + 26px);
    --revock-convert-offset-x: 18px;
    gap: 14px;
    grid-template-columns: repeat(5, minmax(0, var(--revock-slot-width)));
}

.revock-house-card-popup-card-slot {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--revock-slot-width);
    height: var(--revock-slot-height);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    perspective: 1600px;
    --revock-drop-delay: 0ms;
    --revock-glow: rgba(255, 220, 160, 0.34);
    --revock-glow-strong: rgba(255, 234, 188, 0.54);
    --revock-burst: rgba(255, 244, 212, 0.74);
}

.revock-house-card-popup-card-slot.revock-controller-selected,
body:not(.controller-input-active) .revock-house-card-popup-card-slot:hover {
    outline: none;
}

.revock-house-card-popup-card-slot.revock-controller-selected .revock-house-reveal-stage,
body:not(.controller-input-active) .revock-house-card-popup-card-slot:hover .revock-house-reveal-stage {
    filter:
        drop-shadow(0 0 10px rgba(86, 255, 111, 0.62))
        drop-shadow(0 0 22px rgba(86, 255, 111, 0.38));
}

.revock-house-card-popup-card-slot:not(.revealed).revock-controller-selected .revock-house-reveal-shell::before,
body:not(.controller-input-active) .revock-house-card-popup-card-slot:not(.revealed):hover .revock-house-reveal-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid rgba(116, 255, 128, 0.86);
    border-radius: 14px;
    box-shadow:
        0 0 16px rgba(86, 255, 111, 0.56),
        inset 0 0 16px rgba(86, 255, 111, 0.18);
    pointer-events: none;
    z-index: 5;
    animation: revockCardControllerPulse 1800ms ease-in-out infinite;
}

.revock-house-card-popup-card-slot.revealed.revock-controller-selected .revock-house-reveal-front .card,
body:not(.controller-input-active) .revock-house-card-popup-card-slot.revealed:hover .revock-house-reveal-front .card {
    box-shadow:
        0 0 0 3px rgba(116, 255, 128, 0.9),
        0 0 16px rgba(86, 255, 111, 0.6),
        0 0 34px rgba(86, 255, 111, 0.36),
        0 12px 20px rgba(0, 0, 0, 0.58);
    filter:
        drop-shadow(0 0 10px rgba(86, 255, 111, 0.46))
        brightness(1.04);
}

@keyframes revockCardControllerPulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.985);
    }
    50% {
        opacity: 1;
        transform: scale(1.015);
    }
}

.revock-house-card-popup-card-slot[data-quality="gold"] {
    --revock-glow: rgba(255, 208, 92, 0.42);
    --revock-glow-strong: rgba(255, 226, 150, 0.64);
    --revock-burst: rgba(255, 234, 176, 0.78);
}

.revock-house-card-popup-card-slot[data-quality="aurora"] {
    --revock-glow: rgba(145, 219, 255, 0.44);
    --revock-glow-strong: rgba(183, 246, 255, 0.68);
    --revock-burst: rgba(235, 255, 255, 0.8);
}

.revock-house-card-popup-card-slot[data-quality="prismatic"] {
    --revock-glow: rgba(202, 165, 255, 0.5);
    --revock-glow-strong: rgba(255, 229, 172, 0.76);
    --revock-burst: rgba(255, 246, 228, 0.86);
}

.revock-house-reveal-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.revock-house-reveal-aura,
.revock-house-reveal-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.revock-house-reveal-aura {
    width: 68%;
    height: 54%;
    background: radial-gradient(circle, var(--revock-glow-strong) 0%, var(--revock-glow) 35%, transparent 74%);
    filter: blur(12px);
    opacity: 0.78;
    animation: revockRevealAura 2200ms ease-in-out infinite;
}

.revock-house-reveal-burst {
    width: 132%;
    height: 132%;
    background:
        radial-gradient(circle, transparent 0 50%, color-mix(in srgb, var(--revock-burst) 58%, transparent 42%) 58%, transparent 74%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--revock-burst) 32%, transparent 68%) 0%, transparent 56%);
    opacity: 0;
}

.revock-house-reveal-shell {
    position: relative;
    width: var(--revock-shell-width);
    height: var(--revock-shell-height);
    transform: translateY(-180px) scale(0.72) rotateX(16deg);
    opacity: 0;
    animation: revockRevealDropIn 760ms cubic-bezier(.18,.82,.24,1) forwards;
    animation-delay: var(--revock-drop-delay);
    transition: transform 620ms cubic-bezier(.2,.82,.22,1), filter 360ms ease;
}

.revock-house-reveal-flipper {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform 620ms cubic-bezier(.2,.82,.22,1);
}
.revock-house-reveal-back,
.revock-house-reveal-front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
}

.revock-house-reveal-back {
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 244, 214, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(255, 232, 166, 0.08), rgba(12, 10, 15, 0.24)),
        url('material/CardFrame2.png') center / cover no-repeat;
    box-shadow:
        0 0 0 1px rgba(255, 228, 164, 0.18),
        0 18px 34px rgba(0, 0, 0, 0.42),
        0 0 30px var(--revock-glow);
}

.revock-house-reveal-back::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, 0.18) 32%, transparent 42%);
    transform: translateX(-120%);
    animation: revockRevealBackSweep 2200ms ease-in-out infinite;
}

.revock-house-reveal-front {
    display: grid;
    place-items: center;
    transform: rotateY(180deg);
    overflow: visible;
    position: relative;
}

.revock-house-reveal-front .card {
    cursor: default !important;
    transform: scale(var(--revock-reveal-scale));
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 340ms ease, transform 420ms cubic-bezier(.2,.82,.22,1), filter 340ms ease;
}

.revock-house-reveal-front .card:hover {
    transform: scale(var(--revock-reveal-scale));
}

.revock-house-reveal-convert-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--revock-shell-width);
    height: var(--revock-shell-height);
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.82,.22,1);
    pointer-events: none;
    margin-left: calc(var(--revock-shell-width) / -2);
    margin-top: calc(var(--revock-shell-height) / -2);
}

.revock-house-reveal-convert-coin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--revock-shell-width) * 0.38);
    aspect-ratio: 1;
    background: url('material/エクシ.png') center / contain no-repeat;
    transform: translate(calc(-50% + var(--revock-convert-offset-x)), -50%);
}

.revock-house-reveal-convert-label {
    position: absolute;
    left: 50%;
    top: calc(50% + 56px);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #f8e2a7;
    transform: translateX(calc(-50% + var(--revock-convert-offset-x)));
    white-space: nowrap;
    text-align: center;
}

.revock-house-card-popup-card-slot.revealed .revock-house-reveal-shell {
    transform: translateY(0) scale(1) rotateX(0deg);
}

.revock-house-card-popup-card-slot.revealed .revock-house-reveal-flipper {
    transform: rotateY(180deg);
}

.revock-house-card-popup-card-slot.revealed .revock-house-reveal-burst {
    animation: revockRevealBurst 820ms cubic-bezier(.16,.84,.2,1) forwards;
}

.revock-house-card-popup-card-slot.converted .revock-house-reveal-front .card {
    opacity: 0;
    transform: scale(calc(var(--revock-reveal-scale) * 0.78));
    filter: blur(4px);
}

.revock-house-card-popup-card-slot.converted .revock-house-reveal-shell {
    opacity: 0;
}

.revock-house-card-popup-card-slot.converted .revock-house-reveal-aura,
.revock-house-card-popup-card-slot.converted .revock-house-reveal-burst {
    display: none;
}

.revock-house-card-popup-card-slot.converted .revock-house-reveal-convert-overlay {
    opacity: 1;
    transform: scale(1);
}

.revock-house-card-popup-card-slot[data-spectacle="4"] .revock-house-reveal-shell,
.revock-house-card-popup-card-slot[data-spectacle="5"] .revock-house-reveal-shell {
    filter: drop-shadow(0 0 18px var(--revock-glow));
}

.revock-house-card-popup-card-slot[data-spectacle="5"] .revock-house-reveal-aura {
    animation-duration: 1650ms;
}

.revock-house-card-popup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.revock-house-card-popup-reveal-all-btn {
    border: 1px solid rgba(232, 205, 122, 0.78);
    color: #f8e7af;
    background: linear-gradient(180deg, rgba(66, 48, 20, 0.72), rgba(18, 12, 6, 0.78));
    border-radius: 10px;
    min-width: 124px;
    padding: 8px 16px;
    font-size: 0.96rem;
}

body.controller-input-active .revock-house-card-popup-reveal-all-btn:not(.hidden)::before {
    content: "□";
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    margin-right: 8px;
    border: 1px solid rgba(116, 255, 128, 0.72);
    border-radius: 4px;
    color: #98ff8f;
    background: rgba(6, 12, 8, 0.72);
    box-shadow: 0 0 10px rgba(86, 255, 111, 0.24);
    font-weight: 800;
    line-height: 1;
}

.revock-house-card-popup-reveal-all-btn.hidden {
    display: none;
}

.revock-house-card-popup-reveal-all-btn:disabled {
    opacity: 0.46;
    cursor: default;
}

.revock-house-card-popup-ok-btn {
    border: 1px solid rgba(241, 226, 131, 0.84);
    color: #ffe931;
    background: linear-gradient(180deg, rgba(34, 26, 16, 0.52), rgba(12, 8, 4, 0.66));
    border-radius: 10px;
    min-width: 84px;
    padding: 8px 14px;
    font-size: 1rem;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.revock-house-card-popup-ok-btn:disabled {
    opacity: 0.5;
    cursor: default;
    filter: grayscale(0.2);
}

.revock-house-card-popup-ok-btn.hidden {
    display: none;
}

@keyframes revockCardRevealShow {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes revockRevealDropIn {
    0% {
        opacity: 0;
        transform: translateY(-220px) scale(0.68) rotateX(22deg);
    }
    62% {
        opacity: 1;
        transform: translateY(12px) scale(1.02) rotateX(-4deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
    }
}

@keyframes revockRevealAura {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.46;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.86;
    }
}

@keyframes revockRevealBackSweep {
    0%, 24% {
        transform: translateX(-120%);
    }
    56%, 100% {
        transform: translateX(130%);
    }
}

@keyframes revockRevealHintIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes revockRevealBurst {
    0% {
        opacity: 0.08;
        transform: translate(-50%, -50%) scale(0.38);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.18);
    }
}

.revock-house-collection {
    font-size: clamp(0.95rem, 1.3vw, 1.2rem);
    opacity: 0.95;
    max-width: min(84vw, 980px);
    border: 1px solid rgba(234, 201, 128, 0.24);
    border-radius: 10px;
    background: rgba(8, 5, 2, 0.45);
    padding: 10px 12px;
    line-height: 1.5;
}

.revock-house-close-btn:hover,
.revock-house-close-btn:focus-visible,
.revock-house-action-btn:hover,
.revock-house-action-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: none;
    filter: brightness(1.08);
}

.revock-house-debug-btn:hover,
.revock-house-debug-btn:focus-visible {
    background: rgba(14, 12, 16, 0.72);
    color: #f0d8a8;
}

@media (max-width: 1100px) {
    .revock-house-actions {
        width: min(94vw, 900px);
        margin-left: 0;
        margin-top: clamp(22px, 4.8vh, 46px);
    }
}

@media (max-width: 760px) {
    .revock-house-panel {
        grid-template-rows: auto auto auto auto;
    }

    .revock-house-actions {
        grid-template-columns: 1fr;
        margin-top: clamp(30px, 6.2vh, 56px);
    }

    .revock-house-action-btn {
        min-height: 168px;
        border-radius: 30px;
        font-size: clamp(1.68rem, 7vw, 2.2rem);
    }

    .revock-house-currency {
        font-size: clamp(0.92rem, 4.2vw, 1.08rem);
        height: auto;
        min-height: 132px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(34px, 1fr));
        column-gap: 10px;
        row-gap: 6px;
        padding: 18px 26px;
    }

    .revock-house-currency-part {
        position: static;
        width: auto;
        height: auto;
        transform: none;
        justify-content: flex-start;
        padding: 0 4px;
        font-size: 0.9em;
    }

    .revock-house-result {
        height: auto;
        min-height: 150px;
        font-size: clamp(0.98rem, 4.6vw, 1.14rem);
        padding: 22px 24px 18px 34px;
    }

    .revock-house-result::before {
        content: none;
    }

    .revock-house-result-card-reveal {
        grid-template-columns: 1fr;
    }

    .revock-house-result-card-art {
        width: min(190px, 56vw);
        margin: 0 auto;
    }

    .revock-house-collection {
        font-size: clamp(0.88rem, 3.9vw, 1.02rem);
        padding: 9px 10px;
    }

}

.end-panel {
    width: min(92vw, 520px);
    border: 1px solid rgba(236, 196, 114, 0.42);
    border-radius: 12px;
    background: rgba(8, 14, 34, 0.9);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.6);
    padding: 18px;
    display: grid;
    gap: 10px;
}

.end-title {
    font-family: 'Cinzel', serif;
    color: #edcd84;
    font-size: 1.6rem;
}

.end-text {
    color: #f2f4f8;
}

.end-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.end-action-btn {
    width: 100%;
}

.end-hint-text {
    color: #ccd7ed;
    min-height: 1.2em;
    font-size: 0.9rem;
}

@media (max-width: 1780px) {
    .library-card-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1600px) {
    .library-card-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .library-controls {
        grid-template-columns: 1fr;
    }
    .library-search-input {
        grid-column: 1 / -1;
    }
    .library-count-text {
        text-align: left;
    }
    .library-content {
        grid-template-columns: 1fr;
    }
    .library-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .library-detail-pane {
        max-height: 38vh;
    }
    .library-filter-grid {
        grid-template-columns: 1fr;
    }
    .library-lore-body {
        grid-template-columns: 1fr;
    }
    .library-lore-image {
        max-width: 320px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 720px) {
    .library-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .library-detail-more-btn {
        width: 100%;
    }
    .library-lore-panel {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }
    .library-lore-head {
        padding: 12px 12px 8px;
    }
    .library-lore-body {
        padding: 12px;
        gap: 12px;
    }
    .library-lore-info-row,
    .library-lore-profile-editor-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.character-select-screen {
    position: fixed;
    inset: 0;
    z-index: 1950;
    background:
        linear-gradient(rgba(6, 10, 24, 0.34), rgba(6, 10, 24, 0.7)),
        url('material/PlayerField.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.character-select-screen.hidden {
    display: none;
}

.character-select-back-btn {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 5;
    min-width: 120px;
    padding: 8px 12px;
    border: 1px solid rgba(222, 186, 104, 0.6);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(71, 50, 18, 0.84), rgba(32, 20, 10, 0.92));
    color: #f2ddb1;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.stage-select-screen {
    position: fixed;
    inset: 0;
    z-index: 1940;
    background-color: #04070f;
    overflow: hidden;
    opacity: 1;
    transition: opacity 1500ms ease;
}

.stage-select-debug-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 12;
    min-width: 92px;
    padding: 8px 12px;
    border: 1px solid rgba(210, 186, 108, 0.62);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(52, 34, 14, 0.92), rgba(20, 14, 8, 0.94));
    color: #f5ddb2;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.stage-select-debug-btn:hover {
    filter: brightness(1.08);
}

.stage-select-map-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.stage-select-map-layer {
    position: absolute;
    inset: 0;
    background: url('material/StageSelect.png');
    background-size: 78% auto;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: 50% 50%;
    will-change: transform;
}

.stage-select-map-layer.focused {
    transition: transform 420ms cubic-bezier(0.2, 0.85, 0.2, 1);
}

.stage-select-map-layer::before,
.stage-select-map-layer::after {
    content: '';
    position: absolute;
    inset: -12%;
    pointer-events: none;
    z-index: 0;
}

.stage-select-map-layer::before {
    background:
        radial-gradient(62% 46% at 14% 80%, rgba(44, 78, 96, 0.52), rgba(18, 26, 34, 0) 66%),
        radial-gradient(56% 40% at 82% 22%, rgba(30, 72, 92, 0.46), rgba(18, 26, 34, 0) 70%),
        radial-gradient(68% 52% at 50% 56%, rgba(18, 36, 48, 0.58), rgba(8, 12, 18, 0) 74%);
    filter: blur(10px);
    opacity: 0.9;
    animation: stageMiasmaDrift 13s ease-in-out infinite;
}

.stage-select-map-layer::after {
    background:
        linear-gradient(180deg, rgba(8, 16, 26, 0.24), rgba(6, 10, 18, 0.58)),
        radial-gradient(44% 30% at 30% 18%, rgba(32, 66, 84, 0.3), rgba(10, 16, 24, 0) 72%),
        radial-gradient(48% 36% at 70% 76%, rgba(22, 52, 68, 0.34), rgba(8, 14, 22, 0) 74%);
    filter: blur(5px);
    opacity: 0.78;
    animation: stageMiasmaWave 9.5s ease-in-out infinite;
}

.stage-select-screen.hidden {
    display: none;
}

.stage-select-screen.fading {
    opacity: 0;
}

.map-screen {
    position: fixed;
    inset: 0;
    z-index: 1930;
    background:
        radial-gradient(circle at 52% 48%, rgba(236, 180, 95, 0.1), transparent 38%),
        radial-gradient(circle at 86% 50%, rgba(166, 38, 22, 0.2), transparent 18%),
        linear-gradient(rgba(5, 4, 5, 0.16), rgba(5, 5, 7, 0.64)),
        url('images/map/MapField.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1900ms ease;
}

.map-screen::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(216, 169, 82, 0.62);
    background: transparent;
    box-shadow:
        inset 0 0 0 1px rgba(255, 224, 140, 0.12),
        inset 0 0 28px rgba(0, 0, 0, 0.58),
        0 0 14px rgba(0, 0, 0, 0.72);
    opacity: 1;
}

.map-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.62));
    mix-blend-mode: multiply;
}

.map-screen.hidden {
    display: none;
}

.map-screen.entered {
    opacity: 1;
}

/* ADVENTURE map visual effects: remove this block and the map-ambient-layer element to revert. */
.map-ambient-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 91% 50%, rgba(126, 8, 12, 0.34), transparent 25%),
        radial-gradient(ellipse at 78% 42%, rgba(32, 0, 0, 0.38), transparent 30%),
        radial-gradient(ellipse at 13% 52%, rgba(70, 132, 58, 0.13), transparent 22%),
        linear-gradient(90deg, transparent 0%, transparent 48%, rgba(90, 9, 10, 0.08) 72%, rgba(15, 0, 0, 0.26) 100%);
    opacity: 0.88;
    mix-blend-mode: multiply;
}

.map-ambient-layer::before,
.map-ambient-layer::after {
    content: "";
    position: absolute;
    inset: -14% -10%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 74% 42%, rgba(170, 28, 22, 0.22), transparent 18%),
        radial-gradient(ellipse at 88% 65%, rgba(54, 0, 0, 0.34), transparent 24%),
        radial-gradient(ellipse at 58% 34%, rgba(0, 0, 0, 0.18), transparent 22%),
        repeating-linear-gradient(118deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 18px);
    filter: blur(18px);
    opacity: 0.36;
    transform: translate3d(0, 0, 0);
    animation: mapAmbientDrift 18s ease-in-out infinite alternate;
}

.map-ambient-layer::after {
    inset: -18% -16%;
    background:
        radial-gradient(ellipse at 89% 48%, rgba(132, 5, 11, 0.32), transparent 18%),
        radial-gradient(ellipse at 66% 72%, rgba(0, 0, 0, 0.22), transparent 24%),
        radial-gradient(ellipse at 20% 54%, rgba(72, 130, 54, 0.12), transparent 18%);
    filter: blur(26px);
    opacity: 0.28;
    animation-duration: 24s;
    animation-direction: alternate-reverse;
}
/* /ADVENTURE map visual effects */

.map-header {
    position: absolute;
    left: 5%;
    top: 4%;
    z-index: 6;
    color: #f4e2bf;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.map-stage-title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.map-stage-name {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    letter-spacing: 0.05em;
}

.map-route-phase-label {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(233, 196, 117, 0.42);
    background: rgba(9, 14, 28, 0.72);
    color: #f4dfb2;
    font-size: 0.88rem;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.map-stage-sub {
    margin-top: 4px;
    font-size: 0.95rem;
    color: rgba(240, 228, 203, 0.92);
}

.map-player-hud {
    position: absolute;
    left: 28px;
    bottom: 28px;
    z-index: 8;
    width: 545px;
    min-height: 162px;
    border: 0;
    border-radius: 0;
    background: transparent url('ui/set_button.png') center / 100% 100% no-repeat;
    box-shadow: none;
    padding: 45px 108px 31px 118px;
    display: grid;
    grid-template-columns: 76px max-content;
    grid-template-areas:
        "portrait name"
        "portrait stats";
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
    pointer-events: none;
}

.map-player-hud-title {
    display: none;
}

.map-player-hud-portrait {
    grid-area: portrait;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    border: 1px solid rgba(221, 189, 112, 0.55);
    background-color: rgba(6, 10, 20, 0.82);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-self: start;
    margin-top: -3px;
    margin-left: 4px;
}

.map-player-hud-name {
    grid-area: name;
    align-self: start;
    color: #f2f5ff;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    margin-left: 10px;
}

.map-player-hud-stats {
    grid-area: stats;
    display: grid;
    gap: 5px;
    min-width: 0;
    width: 178px;
    margin-left: 10px;
}

.map-player-hud-stat {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 34px;
    min-width: 0;
}

.map-player-hud-label {
    color: #c6d0e5;
    font-size: 0.84rem;
    white-space: nowrap;
    min-width: 58px;
}

.map-player-hud-value {
    color: #f4dfb2;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
}

.map-route-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: visible;
}

.map-route-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-route-segment {
    position: absolute;
    height: 18px;
    transform-origin: left center;
    background-image: url('images/map/Route.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    pointer-events: none;
    opacity: 0.38;
    mix-blend-mode: screen;
    filter: sepia(0.48) saturate(0.9) brightness(0.72);
    z-index: 1;
    overflow: hidden;
    border-radius: 999px;
}

.map-screen:not(.entered) .map-route-segment {
    opacity: 0;
}

.map-screen.entered .map-route-segment {
    animation: mapRouteFadeIn 520ms ease both;
    animation-delay: var(--map-route-enter-delay, 0ms);
}

.map-route-path-upper {
    filter: sepia(0.48) saturate(0.9) brightness(0.72);
}

.map-route-path-lower {
    filter: sepia(0.48) saturate(0.9) brightness(0.72);
}

.map-route-path-middle {
    filter: sepia(0.48) saturate(0.9) brightness(0.72);
}

.map-route-segment.active {
    opacity: 0.88;
    filter:
        sepia(0.25) saturate(1.12) brightness(1.45)
        drop-shadow(0 0 8px rgba(255, 220, 142, 0.9))
        drop-shadow(0 0 18px rgba(255, 182, 68, 0.58));
    animation: mapRouteSelectablePulse 1.12s ease-in-out infinite;
}

.map-route-segment.active::before {
    content: "";
    position: absolute;
    inset: -6px 0;
    width: 46%;
    background: linear-gradient(90deg, transparent, rgba(255, 247, 198, 0.98) 48%, transparent);
    filter:
        blur(1px)
        drop-shadow(0 0 7px rgba(255, 236, 168, 0.96))
        drop-shadow(0 0 18px rgba(255, 184, 72, 0.62));
    opacity: 0.88;
    transform: translateX(-140%);
    animation: mapRouteFlowLight 1.45s linear infinite;
}

.map-route-segment.selected {
    opacity: 0.92;
    filter:
        sepia(0.18) saturate(1.24) brightness(1.62)
        drop-shadow(0 0 8px rgba(255, 224, 146, 0.96))
        drop-shadow(0 0 22px rgba(255, 186, 72, 0.66));
}

.map-route-segment.inactive,
.map-route-segment.locked {
    opacity: 0.24;
    filter: sepia(0.6) saturate(0.65) brightness(0.48);
}

body.fixed-canvas-mode .map-node {
    width: 112px;
}

.map-node {
    position: absolute;
    width: clamp(82px, 5.6vw, 112px);
    aspect-ratio: 1 / 1;
    border-radius: 0;
    border: none;
    background: transparent;
    color: transparent;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: none;
    opacity: 1;
    overflow: visible;
    z-index: 3;
    transform-origin: center;
    transition:
        transform 180ms ease,
        filter 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.map-screen:not(.entered) .map-node {
    opacity: 0;
}

.map-screen.entered .map-node {
    animation: mapNodeFadeIn 560ms ease both;
    animation-delay: var(--map-node-enter-delay, 0ms);
}

.map-node-band-upper {
    box-shadow: none;
}

.map-node-band-lower {
    box-shadow: none;
}

.map-node:hover {
    filter: brightness(1.14) saturate(1.08);
    transform: translateY(-3px) scale(1.06);
}

.map-node:hover::before {
    filter:
        drop-shadow(0 6px 9px rgba(0, 0, 0, 0.46))
        drop-shadow(0 0 16px rgba(255, 230, 154, 0.5))
        drop-shadow(0 0 30px rgba(255, 190, 78, 0.26));
}

.map-node::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: center / contain no-repeat var(--map-node-art, none);
    filter:
        drop-shadow(0 6px 9px rgba(0, 0, 0, 0.48))
        drop-shadow(0 0 12px rgba(214, 159, 72, 0.2));
}

.map-node::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: calc(100% - 2px);
    transform: translateX(-50%);
    color: rgba(244, 236, 218, 0.98);
    font-family: 'Cinzel', serif;
    font-size: clamp(0.68rem, 0.86vw, 0.86rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid rgba(233, 196, 117, 0.28);
    background: linear-gradient(180deg, rgba(18, 15, 9, 0.94), rgba(4, 5, 7, 0.94));
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(255, 226, 150, 0.08);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.72);
}

.map-enemy-hover-info {
    position: absolute;
    z-index: 8;
    transform: translate(-50%, -100%);
    pointer-events: none;
    color: rgba(245, 236, 214, 0.98);
    font-family: 'Cinzel', serif;
    font-size: clamp(0.84rem, 1.08vw, 1.02rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid rgba(233, 196, 117, 0.34);
    background: rgba(10, 12, 20, 0.82);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

.map-enemy-hover-info.hidden {
    display: none;
}

.map-node-start {
    left: 7%;
    top: 54%;
    width: clamp(116px, 7.6vw, 152px);
}

body.fixed-canvas-mode .map-node-start {
    width: 152px;
}

.map-node-start:not(.current)::after {
    display: none;
}

.map-node-b1 {
    left: 19%;
    top: 38%;
}

.map-node-e1 {
    left: 21%;
    top: 67%;
}

.map-node-b2 {
    left: 34%;
    top: 32%;
}

.map-node-e2 {
    left: 41%;
    top: 58%;
}

.map-node-b3 {
    left: 56%;
    top: 38%;
}

.map-node-e3 {
    left: 63%;
    top: 67%;
}

.map-node-s1 {
    left: 70%;
    top: 54%;
}

.map-node-b4 {
    left: 72%;
    top: 49%;
}

.map-node-e4 {
    left: 78%;
    top: 33%;
}

.map-node-s2 {
    left: 82%;
    top: 60%;
}

.map-node-b5 {
    left: 86%;
    top: 46%;
}

.map-node-b6 {
    left: 92%;
    top: 55%;
}

.map-node-boss {
    left: 96%;
    top: 34%;
    --map-node-art: url('images/map/enemy_castle.png');
    width: clamp(164px, 11.2vw, 224px);
}

body.fixed-canvas-mode .map-node-boss {
    width: 224px;
}

.map-node-battle {
    --map-node-art: url('images/map/enemy.png');
}

.map-node-event {
    --map-node-art: url('images/map/event.png');
}

.map-node-shop {
    --map-node-art: url('images/map/shop.png');
}

.map-node-rest {
    --map-node-art: url('images/map/inn.png');
}

.map-node-midboss {
    width: clamp(123px, 8.4vw, 168px);
    --map-node-art: url('images/map/enemy_castle.png');
}

body.fixed-canvas-mode .map-node-midboss {
    width: 168px;
}

.map-node.elite {
    width: clamp(108px, 6.8vw, 136px);
    z-index: 3;
    --map-node-art: url('images/map/strong_enemy.png');
}

body.fixed-canvas-mode .map-node.elite {
    width: 136px;
}

body.fixed-canvas-mode .character-book {
    padding: 42px;
}

body.fixed-canvas-mode .character-portrait-list {
    --character-slot-width: 420px;
    padding-left: 150px;
}

.map-node.elite::before {
    inset: 0;
    animation: mapEliteAura 2.05s ease-in-out infinite;
    filter:
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 34px rgba(198, 36, 22, 0.72))
        drop-shadow(0 0 62px rgba(128, 10, 12, 0.42));
}

.map-node-boss::before,
.map-node-midboss::before {
    animation: mapBossAura 2.3s ease-in-out infinite;
    filter:
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.46))
        drop-shadow(0 0 42px rgba(218, 34, 18, 0.86))
        drop-shadow(0 0 78px rgba(124, 4, 10, 0.68))
        drop-shadow(0 0 122px rgba(22, 0, 0, 0.52));
}

.map-node.force-event-debug {
    border-color: rgba(209, 173, 255, 0.98);
    box-shadow:
        0 0 0 2px rgba(183, 130, 255, 0.58),
        0 0 16px rgba(176, 118, 255, 0.7),
        0 8px 16px rgba(0, 0, 0, 0.45);
}

.map-node.active {
    z-index: 2;
}

.map-node.force-event-debug.active {
    z-index: 3;
}

.map-node.active::before {
    animation: mapSelectablePulse 1.28s ease-in-out infinite;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22))
        drop-shadow(0 0 18px rgba(130, 255, 140, 0.64))
        drop-shadow(0 0 34px rgba(58, 208, 86, 0.48))
        drop-shadow(0 0 58px rgba(16, 112, 34, 0.34));
}

.map-node.active::after {
    box-shadow:
        0 0 0 1px rgba(166, 255, 176, 0.28),
        0 0 16px rgba(120, 255, 138, 0.38),
        0 0 30px rgba(48, 176, 72, 0.22),
        0 6px 14px rgba(0, 0, 0, 0.22);
}

.map-node.active:hover {
    filter: brightness(1.16) saturate(1.12);
}

.map-node.controller-selected {
    filter: brightness(1.16) saturate(1.12);
    transform: translateY(-3px) scale(1.06);
}

.map-node.controller-selected::before {
    filter:
        drop-shadow(0 6px 9px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 12px rgba(89, 255, 154, 0.52))
        drop-shadow(0 0 24px rgba(89, 255, 154, 0.28));
}

.map-node.controller-selected::after {
    color: rgba(148, 255, 176, 0.98);
    border-color: rgba(100, 255, 166, 0.46);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.34),
        0 0 12px rgba(89, 255, 154, 0.2),
        inset 0 0 0 1px rgba(100, 255, 166, 0.12);
    text-shadow:
        0 0 8px rgba(89, 255, 154, 0.64),
        0 1px 0 rgba(0, 0, 0, 0.72);
}

.map-node.force-event-debug.active::before {
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22))
        drop-shadow(0 0 16px rgba(188, 132, 255, 0.44))
        drop-shadow(0 0 28px rgba(130, 82, 214, 0.18));
}

.map-node.locked {
    opacity: 0.5;
    filter: grayscale(0.34) brightness(0.72);
}

.map-node.cleared {
    opacity: 0.72;
    filter:
        grayscale(0.12)
        drop-shadow(0 0 12px rgba(255, 202, 104, 0.28));
}

.map-node.current {
    z-index: 2;
}

.map-node.current::after {
    content: attr(data-current-label);
    position: absolute;
    left: 50%;
    top: calc(100% - 2px);
    transform: translateX(-50%);
    padding: 3px 9px;
    border-radius: 4px;
    border: 1px solid rgba(255, 229, 143, 0.96);
    background: linear-gradient(180deg, rgba(64, 42, 11, 0.96), rgba(13, 11, 6, 0.96));
    color: #ffe8b5;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.68rem, 0.86vw, 0.86rem);
    letter-spacing: 0.08em;
    white-space: nowrap;
    box-shadow:
        0 0 0 1px rgba(255, 219, 132, 0.2),
        0 0 18px rgba(255, 196, 86, 0.34),
        0 6px 14px rgba(0, 0, 0, 0.34);
}

@keyframes mapNodeFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes mapRouteFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes mapRouteSelectablePulse {
    0%, 100% {
        opacity: 0.64;
        filter:
            sepia(0.32) saturate(1.02) brightness(1.18)
            drop-shadow(0 0 6px rgba(255, 216, 136, 0.68))
            drop-shadow(0 0 13px rgba(255, 180, 70, 0.34));
    }
    50% {
        opacity: 1;
        filter:
            sepia(0.18) saturate(1.26) brightness(1.74)
            drop-shadow(0 0 10px rgba(255, 232, 164, 1))
            drop-shadow(0 0 25px rgba(255, 186, 72, 0.72));
    }
}

@keyframes mapAmbientDrift {
    0% {
        transform: translate3d(-1.2%, -0.6%, 0) scale(1);
    }
    100% {
        transform: translate3d(1.4%, 0.8%, 0) scale(1.03);
    }
}

@keyframes mapRouteFlowLight {
    0% {
        transform: translateX(-140%);
    }
    100% {
        transform: translateX(260%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .map-ambient-layer::before,
    .map-ambient-layer::after,
    .map-route-segment.active,
    .map-route-segment.active::before,
    .map-node.active::before,
    .map-node-boss::before,
    .map-node-midboss::before,
    .map-node.elite::before {
        animation: none;
    }

    .map-node:hover {
        transform: none;
    }
}

@keyframes mapElitePulse {
    0%, 100% {
        transform: scale(1);
        filter: saturate(1);
    }
    50% {
        transform: scale(1);
        filter: saturate(1);
    }
}

@keyframes mapEliteAura {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter:
            drop-shadow(0 6px 12px rgba(0, 0, 0, 0.34))
            drop-shadow(0 0 28px rgba(176, 24, 18, 0.62))
            drop-shadow(0 0 50px rgba(110, 8, 12, 0.34));
    }
    50% {
        opacity: 1;
        transform: scale(1);
        filter:
            drop-shadow(0 7px 14px rgba(0, 0, 0, 0.42))
            drop-shadow(0 0 42px rgba(212, 36, 22, 0.84))
            drop-shadow(0 0 72px rgba(142, 8, 12, 0.48));
    }
}

@keyframes mapBossAura {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter:
            drop-shadow(0 8px 16px rgba(0, 0, 0, 0.44))
            drop-shadow(0 0 38px rgba(204, 28, 18, 0.8))
            drop-shadow(0 0 72px rgba(118, 4, 10, 0.62))
            drop-shadow(0 0 118px rgba(20, 0, 0, 0.46));
    }
    50% {
        opacity: 1;
        transform: scale(1);
        filter:
            drop-shadow(0 10px 20px rgba(0, 0, 0, 0.56))
            drop-shadow(0 0 54px rgba(236, 24, 16, 0.98))
            drop-shadow(0 0 98px rgba(146, 0, 10, 0.84))
            drop-shadow(0 0 156px rgba(18, 0, 0, 0.68));
    }
}

.map-menu-open-btn {
    position: absolute;
    right: 54px;
    top: 42px;
    z-index: 6;
    width: 238px;
    height: 64px;
    padding: 0 34px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url('ui/set_button2.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #f8e5b9;
    font-family: 'Cinzel', serif;
    font-size: 1.34rem;
    letter-spacing: 0.08em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
}

.map-force-event-btn {
    position: absolute;
    right: 214px;
    top: 16px;
    z-index: 6;
    min-width: 182px;
    padding: 11px 18px;
    border: 2px solid rgba(195, 165, 248, 0.86);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(60, 36, 92, 0.95), rgba(33, 22, 56, 0.96));
    color: #f3e8ff;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.4);
}

.map-force-event-select {
    position: absolute;
    right: 404px;
    top: 16px;
    z-index: 6;
    width: min(300px, 34vw);
    min-width: 170px;
    height: 49px;
    padding: 0 10px;
    border: 2px solid rgba(195, 165, 248, 0.72);
    border-radius: 10px;
    background: rgba(24, 18, 46, 0.94);
    color: #f3e8ff;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

.map-force-event-btn:hover {
    filter: brightness(1.08);
}

.map-force-event-btn.armed {
    border-color: rgba(255, 238, 170, 0.95);
    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(255, 231, 143, 0.62);
}

.map-force-event-btn:disabled {
    opacity: 0.52;
    cursor: default;
    filter: none;
}

.map-menu-open-btn:hover {
    filter: brightness(1.1);
}

.map-menu-open-btn.fusion-ready {
    border-color: rgba(255, 236, 166, 1);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.42),
        0 0 22px rgba(255, 220, 126, 0.92),
        0 0 44px rgba(255, 200, 90, 0.7);
    animation: mapMenuFusionReadyPulse 860ms ease-in-out infinite;
}

body.map-controller-active .map-menu-open-btn::before,
body.map-controller-active .map-screen-gear-btn::before,
body.map-controller-active .map-menu-fuse-btn::before,
body.map-controller-active .map-menu-section-toggle::before {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 24px;
    margin-right: 0;
    padding: 0 7px;
    border-radius: 5px;
    border: 1px solid rgba(116, 255, 176, 0.48);
    background: rgba(6, 18, 14, 0.72);
    color: rgba(158, 255, 188, 0.98);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    text-indent: 0;
    text-shadow: 0 0 8px rgba(89, 255, 154, 0.5);
    box-shadow: 0 0 12px rgba(89, 255, 154, 0.16);
    pointer-events: none;
    z-index: 8;
}

body.map-controller-active .map-menu-fuse-btn::before {
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    margin: 0;
}

body.map-controller-active .map-menu-open-btn::before {
    content: "□";
}

body.map-controller-active .map-screen-gear-btn::before {
    content: "START";
    left: -92px;
    min-width: 68px;
}

body.map-controller-active #mapMenuFuseSelectBtn::before {
    content: "□";
}

body.map-controller-active #mapMenuFuseExecBtn::before {
    content: "△";
}

body.map-controller-active #mapMenuPowerToggle::before {
    content: "L1";
    left: auto;
    right: 38px;
}

body.map-controller-active #mapMenuItemToggle::before {
    content: "R1 △";
    left: auto;
    right: 38px;
    min-width: 50px;
}

@keyframes mapMenuFusionReadyPulse {
    0%, 100% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.34);
        transform: scale(1.06);
    }
}

.map-screen-gear-btn {
    position: absolute;
    right: 54px;
    bottom: 42px;
    z-index: 6;
}

.map-screen-gear-btn.map-menu-gear-btn {
    overflow: visible;
}

@media (max-width: 1080px) {
    .map-force-event-select {
        width: 152px;
        min-width: 152px;
        height: 42px;
        top: 10px;
        right: 314px;
        font-size: 0.72rem;
        padding: 0 7px;
    }

    .map-force-event-btn {
        min-width: 138px;
        padding: 9px 10px;
        font-size: 0.82rem;
        top: 10px;
        right: 172px;
    }

    .map-player-hud {
        width: min(515px, 78vw);
        left: 8px;
        bottom: 8px;
        min-height: 156px;
        padding: 43px 100px 30px 100px;
        grid-template-columns: 66px max-content;
        column-gap: 10px;
    }

    .map-player-hud-title {
        display: none;
    }

    .map-player-hud-portrait {
        width: 66px;
        height: 66px;
        margin-top: -2px;
        margin-left: 3px;
    }

    .map-player-hud-name {
        font-size: 0.92rem;
    }

    .map-player-hud-value {
        font-size: 0.94rem;
    }
}

.map-node-detail-panel {
    position: absolute;
    right: 54px;
    top: 132px;
    z-index: 7;
    width: min(520px, 38vw);
    border: 1px solid rgba(216, 169, 82, 0.52);
    border-radius: 0;
    background: linear-gradient(160deg, rgba(8, 12, 23, 0.96), rgba(4, 7, 14, 0.96));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
    padding: 16px 16px 14px;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.map-node-detail-panel.hidden {
    display: none;
}

.map-node-detail-title {
    color: #ffe1a2;
    font-family: 'Cinzel', serif;
    font-size: 1.22rem;
    letter-spacing: 0.04em;
}

.map-node-detail-enemy-name {
    color: #e9f3ff;
    font-size: 1.02rem;
}

.map-node-detail-ace-card {
    width: min(100%, 234px);
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid rgba(231, 196, 116, 0.38);
    background: rgba(9, 14, 29, 0.82);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #a8bdd5;
    font-size: 0.74rem;
    display: grid;
    place-items: center;
}

.map-node-detail-reward {
    color: #d8e9ff;
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-line;
    border-top: 1px solid rgba(223, 193, 123, 0.22);
    padding-top: 7px;
    width: 100%;
}

.map-node-detail-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    justify-items: center;
}

.map-node-detail-actions .map-event-btn {
    width: min(260px, 100%);
}

@media (max-width: 1080px) {
    .map-node-detail-panel {
        width: min(95vw, 520px);
        top: 110px;
    }
}

.map-menu-modal {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: grid;
    place-items: center;
}

.map-menu-modal.hidden {
    display: none;
}

.map-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 9, 0.65);
}

.map-menu-panel {
    position: relative;
    width: min(96vw, 1840px);
    height: min(92vh, 1080px);
    border-radius: 14px;
    border: 1px solid rgba(236, 200, 122, 0.56);
    background: linear-gradient(160deg, rgba(18, 24, 48, 0.96), rgba(7, 10, 24, 0.97));
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.62);
    padding: 18px 20px 16px;
    overflow: hidden;
}

body.fixed-canvas-mode .map-menu-panel {
    width: 1800px;
    height: 980px;
    max-width: 1800px;
    max-height: 980px;
}

.map-menu-close-btn {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid rgba(236, 199, 118, 0.72);
    background: linear-gradient(180deg, rgba(40, 50, 88, 0.92), rgba(20, 24, 44, 0.96));
    color: #f8deb6;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.map-menu-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 330px;
    gap: 12px;
    height: 100%;
    min-height: 0;
}

body.fixed-canvas-mode .map-menu-grid {
    grid-template-columns: 280px minmax(0, 1fr) 330px;
    gap: 12px;
}

.map-menu-left,
.map-menu-center,
.map-menu-right {
    border-radius: 10px;
    border: 1px solid rgba(221, 187, 109, 0.28);
    background: linear-gradient(165deg, rgba(8, 15, 36, 0.82), rgba(7, 11, 24, 0.88));
    min-height: 0;
}

.map-menu-left {
    padding: 10px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
}

.map-menu-left.map-menu-assets-power-open {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.map-menu-left.map-menu-assets-item-open {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.map-menu-left:not(.map-menu-assets-power-open):not(.map-menu-assets-item-open) {
    grid-template-rows: auto auto auto;
}

.map-menu-left.fusion-mode {
    grid-template-rows: minmax(0, 1fr);
}

.map-menu-left.fusion-mode .map-menu-player-panel,
.map-menu-left.fusion-mode .map-menu-power-panel,
.map-menu-left.fusion-mode .map-menu-item-panel {
    display: none;
}

.map-menu-fusion-preview {
    display: none;
    min-height: 0;
}

.map-menu-left.fusion-mode .map-menu-fusion-preview {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
}

.map-menu-fusion-preview-panel {
    border-radius: 12px;
    border: 1px solid rgba(223, 190, 116, 0.28);
    background:
        linear-gradient(165deg, rgba(9, 17, 36, 0.9), rgba(7, 12, 28, 0.95)),
        radial-gradient(circle at 20% 0%, rgba(92, 160, 255, 0.12), rgba(92, 160, 255, 0) 40%);
    box-shadow: inset 0 0 0 1px rgba(255, 232, 181, 0.08), 0 10px 24px rgba(0, 0, 0, 0.24);
    padding: 9px;
}

.map-menu-fusion-preview-panel.result {
    background:
        linear-gradient(165deg, rgba(13, 21, 44, 0.94), rgba(8, 13, 31, 0.97)),
        radial-gradient(circle at 50% 0%, rgba(145, 216, 255, 0.16), rgba(145, 216, 255, 0) 42%),
        radial-gradient(circle at 50% 100%, rgba(238, 192, 114, 0.12), rgba(238, 192, 114, 0) 44%);
}

.map-menu-fusion-result-card {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 176px;
    margin-top: 6px;
    border-radius: 14px;
    border: 1px solid rgba(231, 196, 117, 0.48);
    background:
        linear-gradient(180deg, rgba(7, 11, 25, 0.72), rgba(7, 11, 25, 0.94)),
        url('material/CardFrame2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1px rgba(255, 236, 192, 0.12), 0 10px 26px rgba(0, 0, 0, 0.28);
    text-align: center;
}

.map-menu-fusion-result-card::before {
    content: '';
    position: absolute;
    inset: -16%;
    background:
        radial-gradient(circle at 50% 22%, rgba(167, 231, 255, 0.18), rgba(167, 231, 255, 0) 40%),
        radial-gradient(circle at 50% 78%, rgba(255, 221, 156, 0.12), rgba(255, 221, 156, 0) 44%);
    pointer-events: none;
}

.map-menu-fusion-result-card.ready {
    border-color: rgba(122, 255, 209, 0.82);
    box-shadow:
        inset 0 0 0 1px rgba(196, 255, 236, 0.16),
        0 0 0 1px rgba(122, 255, 209, 0.28),
        0 0 18px rgba(122, 255, 209, 0.26),
        0 14px 28px rgba(0, 0, 0, 0.32);
}

.map-menu-fusion-result-card.invalid {
    border-color: rgba(255, 131, 131, 0.78);
    box-shadow:
        inset 0 0 0 1px rgba(255, 212, 212, 0.1),
        0 0 0 1px rgba(255, 131, 131, 0.22),
        0 0 18px rgba(255, 86, 86, 0.22),
        0 14px 28px rgba(0, 0, 0, 0.32);
}

.map-menu-fusion-result-badge {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    color: #f2db9f;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
}

.map-menu-fusion-result-level {
    position: relative;
    z-index: 1;
    color: #f8fbff;
    font-family: 'Cinzel', serif;
    font-size: 2.06rem;
    letter-spacing: 0.06em;
    text-shadow: 0 0 16px rgba(186, 236, 255, 0.2);
}

.map-menu-fusion-result-race {
    position: relative;
    z-index: 1;
    color: #f4dfae;
    font-size: 1rem;
    line-height: 1.3;
}

.map-menu-fusion-result-count {
    position: relative;
    z-index: 1;
    color: rgba(224, 236, 255, 0.92);
    font-size: 0.84rem;
    margin-bottom: 8px;
}

.map-menu-fusion-result-name {
    margin-top: 6px;
    color: #f7fbff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.map-menu-fusion-result-meta,
.map-menu-fusion-result-note {
    color: #d5e2f6;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-line;
}

.map-menu-fusion-result-note {
    margin-top: 4px;
    color: rgba(215, 229, 247, 0.82);
}

.map-menu-fusion-material-grid {
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.map-menu-fusion-material-title {
    color: #f2db9f;
    font-family: 'Cinzel', serif;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
}

.map-menu-fusion-material-host {
    min-height: 0;
    display: grid;
    place-items: center;
    margin-top: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.map-menu-fusion-material-host.empty {
    min-height: 184px;
    color: rgba(215, 229, 247, 0.72);
    font-size: 0.88rem;
}

.map-menu-fusion-material-host .card {
    transform: scale(0.62);
    transform-origin: center top;
    margin: 0 auto -122px;
    width: 236px;
    height: 344px;
    pointer-events: none;
}

.map-menu-fusion-material-name {
    margin-top: 0;
    color: #f6fbff;
    font-size: 0.88rem;
    line-height: 1.35;
    min-height: 2.45em;
}

.map-menu-center {
    padding: 10px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    min-width: 0;
}

.map-menu-title {
    color: #f2db9f;
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
}

.map-menu-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid rgba(223, 193, 123, 0.2);
    padding-bottom: 6px;
}

.map-menu-label {
    color: rgba(230, 215, 183, 0.86);
    font-size: 0.88rem;
}

.map-menu-value {
    color: #f4dfae;
    font-family: 'Cinzel', serif;
    font-size: 1.04rem;
}

.map-menu-player-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid rgba(221, 187, 109, 0.3);
    background: rgba(9, 14, 29, 0.82);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.map-menu-deck-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.map-menu-deck-head-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.map-menu-count {
    color: rgba(228, 210, 175, 0.92);
    font-size: 0.95rem;
}

.map-menu-sort-label {
    color: rgba(229, 214, 181, 0.88);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.map-menu-sort-select {
    min-width: 128px;
    border-radius: 8px;
    border: 1px solid rgba(236, 199, 118, 0.62);
    background: linear-gradient(180deg, rgba(26, 36, 68, 0.9), rgba(14, 20, 39, 0.94));
    color: #f8e6be;
    font-family: 'Cinzel', serif;
    font-size: 0.84rem;
    padding: 6px 8px;
}

.map-menu-sort-select option {
    background: #131b33;
    color: #f8e6be;
}

.map-menu-sort-select:focus,
.map-menu-sort-select:active {
    background: linear-gradient(180deg, rgba(26, 36, 68, 0.94), rgba(14, 20, 39, 0.98));
    color: #f8e6be;
}

.map-menu-deck-list {
    min-height: 0;
    border-radius: 10px;
    border: 1px solid rgba(219, 188, 117, 0.28);
    background: rgba(5, 10, 24, 0.58);
    padding: 8px 8px 4px;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 6px 2px;
    align-content: start;
    justify-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}

body.fixed-canvas-mode .map-menu-deck-list {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
}

.map-menu-deck-list::-webkit-scrollbar {
    width: 10px;
}

.map-menu-deck-list::-webkit-scrollbar-track {
    background: rgba(13, 20, 42, 0.84);
    border-radius: 12px;
}

.map-menu-deck-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(212, 173, 98, 0.9), rgba(146, 104, 42, 0.82));
    border-radius: 12px;
    border: 2px solid rgba(12, 16, 34, 0.88);
}

.map-menu-deck-list .card {
    transform: scale(0.82);
    transform-origin: center top;
    margin: 0 auto 2px;
    width: 236px;
    height: 344px;
    cursor: pointer;
}

.map-menu-deck-list .card:hover {
    transform: scale(0.82) !important;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.58) !important;
}

body.map-controller-active .map-menu-deck-list .card:hover {
    transform: scale(0.82) !important;
    box-shadow: none !important;
    filter: none !important;
}

.map-menu-deck-slot {
    position: relative;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0;
    min-height: 286px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.map-menu-equip-indicators {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 8;
    display: flex;
    gap: 4px;
    pointer-events: none;
}

.map-menu-equip-indicator {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
}

.map-menu-equip-indicator.item {
    background-image: url('material/Item.png');
}

.map-menu-equip-indicator.curse {
    background-image: url('material/Enemy_Item.png');
}

.map-menu-deck-slot.selected {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

.map-menu-deck-slot.focused {
    border-color: transparent;
    box-shadow: none;
}

.map-menu-deck-slot.selected .card {
    outline: 0;
    box-shadow: none !important;
}

.map-menu-deck-slot.focused .card {
    position: relative;
    z-index: 1;
    outline: 0;
    box-shadow: none !important;
}

.map-menu-deck-slot.focused::before,
.map-menu-deck-slot.focused::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    width: 202px;
    height: 289px;
    border-radius: 10px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 12;
}

.map-menu-deck-slot.focused::before {
    border: 4px solid rgba(120, 255, 178, 1);
    box-shadow:
        0 0 0 1px rgba(231, 255, 239, 0.82),
        inset 0 0 0 2px rgba(6, 50, 28, 0.82),
        0 0 18px rgba(75, 255, 142, 0.86),
        0 0 34px rgba(75, 255, 142, 0.42);
}

.map-menu-deck-slot.focused::after {
    border: 1px solid rgba(222, 255, 234, 0.95);
    box-shadow:
        inset 0 0 18px rgba(74, 255, 143, 0.34),
        0 0 8px rgba(224, 255, 236, 0.68);
}

.map-menu-item-entry.controller-selected {
    border-color: rgba(116, 255, 176, 0.68);
    box-shadow:
        0 0 0 1px rgba(116, 255, 176, 0.18),
        0 0 18px rgba(89, 255, 154, 0.22);
}

.map-menu-deck-slot.locked {
    opacity: 1;
    border-color: transparent;
    box-shadow: none;
    background: transparent;
}

.map-menu-fusion-hint {
    color: #dce6ff;
    font-size: 0.88rem;
    line-height: 1.45;
    min-height: 2.7em;
    white-space: pre-line;
}

.map-menu-power-panel {
    border-radius: 10px;
    border: 1px solid rgba(224, 189, 117, 0.28);
    background: rgba(7, 11, 24, 0.54);
    padding: 8px 10px;
    margin-top: 6px;
    min-height: 0;
    overflow: hidden;
}

.map-menu-power-panel:not(.collapsed) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
}

.map-menu-power-panel.collapsed .map-menu-power-list,
.map-menu-item-panel.collapsed .map-menu-equip-list,
.map-menu-item-panel.collapsed .map-menu-inventory-list {
    display: none;
}

.map-menu-power-list {
    margin-top: 5px;
    color: #e6edff;
    font-size: 0.9rem;
    line-height: 1.45;
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.map-menu-item-panel {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 6px;
    border-radius: 10px;
    border: 1px solid rgba(224, 189, 117, 0.28);
    background: rgba(7, 11, 24, 0.54);
    padding: 8px 10px;
    overflow: hidden;
}

.map-menu-item-title {
    color: #f2db9f;
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    letter-spacing: 0.04em;
}

.map-menu-section-toggle {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f2db9f;
    text-align: left;
    cursor: pointer;
}

.map-menu-section-toggle::after {
    content: '+';
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(224, 189, 117, 0.38);
    color: #f8deb6;
    background: rgba(22, 29, 52, 0.74);
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    line-height: 1;
}

.map-menu-section-toggle[aria-expanded="true"]::after {
    content: '-';
}

.map-menu-section-toggle:hover::after {
    border-color: rgba(244, 214, 148, 0.72);
    background: rgba(47, 40, 20, 0.82);
}

.map-menu-equip-list,
.map-menu-inventory-list,
.map-menu-power-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.map-menu-equip-list {
    max-height: min(22vh, 180px);
}

.map-menu-inventory-list::-webkit-scrollbar,
.map-menu-equip-list::-webkit-scrollbar,
.map-menu-power-list::-webkit-scrollbar {
    width: 9px;
}

.map-menu-inventory-list::-webkit-scrollbar-track,
.map-menu-equip-list::-webkit-scrollbar-track,
.map-menu-power-list::-webkit-scrollbar-track {
    background: rgba(13, 20, 42, 0.72);
    border-radius: 12px;
}

.map-menu-inventory-list::-webkit-scrollbar-thumb,
.map-menu-equip-list::-webkit-scrollbar-thumb,
.map-menu-power-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(212, 173, 98, 0.88), rgba(146, 104, 42, 0.8));
    border-radius: 12px;
    border: 2px solid rgba(12, 16, 34, 0.88);
}

.power-entry {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 8px;
    align-items: center;
    border-radius: 12px;
    border: 1px solid rgba(236, 199, 120, 0.44);
    background:
        linear-gradient(170deg, rgba(14, 25, 44, 0.9), rgba(10, 16, 30, 0.92)),
        radial-gradient(circle at 12% 10%, rgba(244, 214, 146, 0.2), rgba(244, 214, 146, 0));
    padding: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 231, 172, 0.12), 0 8px 16px rgba(0, 0, 0, 0.24);
}

.power-entry.power-activated {
    animation: power-entry-activated 860ms cubic-bezier(.16, .8, .2, 1);
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 190, 0.32),
        0 0 0 1px rgba(159, 236, 255, 0.58),
        0 0 26px rgba(143, 216, 255, 0.62),
        0 8px 16px rgba(0, 0, 0, 0.24);
}

.power-entry.power-activated::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    border: 2px solid rgba(163, 242, 255, 0.88);
    box-shadow: 0 0 28px rgba(138, 230, 255, 0.74);
    opacity: 0;
    animation: power-entry-activated-border 860ms cubic-bezier(.16, .8, .2, 1);
    pointer-events: none;
    z-index: 3;
}

.power-entry-thumb {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: 2px solid rgba(241, 205, 128, 0.78);
    background:
        linear-gradient(145deg, rgba(35, 39, 52, 0.92), rgba(15, 19, 30, 0.95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(255, 237, 189, 0.4),
        inset 0 0 16px rgba(255, 223, 150, 0.12),
        0 0 0 1px rgba(58, 35, 10, 0.75),
        0 4px 10px rgba(0, 0, 0, 0.35);
}

.power-entry-thumb.has-preview,
.map-menu-item-entry-thumb.has-preview {
    cursor: zoom-in;
}

.power-entry-thumb.has-preview:hover,
.map-menu-item-entry-thumb.has-preview:hover {
    filter: brightness(1.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 237, 189, 0.54),
        inset 0 0 18px rgba(255, 223, 150, 0.16),
        0 0 0 1px rgba(81, 54, 21, 0.85),
        0 0 18px rgba(255, 223, 150, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.35);
}

.power-entry.power-activated .power-entry-thumb {
    animation: power-entry-thumb-activated 860ms cubic-bezier(.16, .8, .2, 1);
}

.power-entry-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.power-entry-name {
    color: #f8e9c1;
    font-size: 0.88rem;
    line-height: 1.28;
}

.power-entry-desc {
    color: #c7d9f2;
    font-size: 0.75rem;
    line-height: 1.28;
}

.power-activation-burst {
    position: fixed;
    width: 210px;
    height: 210px;
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1880;
    background:
        radial-gradient(circle, rgba(225, 247, 255, 0.98) 0%, rgba(168, 222, 255, 0.88) 24%, rgba(120, 193, 255, 0.46) 44%, rgba(120, 193, 255, 0) 70%),
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 58%);
    box-shadow:
        0 0 40px var(--power-activation-color, #8fd8ff),
        0 0 80px rgba(114, 182, 245, 0.52);
    mix-blend-mode: screen;
}

.power-activation-banner {
    position: fixed;
    z-index: 1881;
    width: 340px;
    aspect-ratio: 2121 / 508;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: grid;
    place-items: center;
    color: #fff6e6;
    text-align: center;
    filter:
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.72))
        drop-shadow(0 0 18px var(--power-activation-color, #8fd8ff));
}

.power-activation-banner-frame {
    position: absolute;
    inset: 0;
    background: url("ui/skill_name.png") center / 100% 100% no-repeat;
    opacity: 0.96;
}

.power-activation-banner-frame::before,
.power-activation-banner-frame::after {
    content: none;
}

.power-activation-banner-frame::before {
    left: 18px;
}

.power-activation-banner-frame::after {
    right: 18px;
    transform: translateY(-50%) scaleX(-1);
}

.power-activation-banner-label,
.power-activation-banner-name {
    position: relative;
    z-index: 1;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.96),
        0 0 12px var(--power-activation-color, #8fd8ff);
}

.power-activation-banner-label {
    align-self: end;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #9fdfff;
}

.power-activation-banner-name {
    align-self: start;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff6e6;
}

@keyframes power-entry-activated {
    0% { transform: scale(1); }
    18% { transform: scale(1.04); }
    42% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

@keyframes power-entry-activated-border {
    0% { opacity: 0; transform: scale(0.84); }
    28% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.08); }
}

@keyframes power-entry-thumb-activated {
    0% { filter: brightness(1) saturate(1); transform: scale(1); }
    28% { filter: brightness(2.1) saturate(1.5); transform: scale(1.06); }
    100% { filter: brightness(1) saturate(1); transform: scale(1); }
}

.map-menu-item-entry {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 8px;
    align-items: start;
    border-radius: 10px;
    border: 1px solid rgba(223, 193, 123, 0.28);
    background: rgba(8, 14, 30, 0.62);
    padding: 6px 8px 8px;
    margin-bottom: 6px;
}

.map-menu-item-entry > button {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
    padding: 4px 10px;
    font-size: 0.78rem;
    border-radius: 6px;
    border: 1px solid rgba(212, 173, 98, 0.55);
    background: linear-gradient(160deg, rgba(28, 40, 68, 0.92), rgba(18, 26, 48, 0.96));
    color: #f8e2ae;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.map-menu-item-entry > button:hover:not(:disabled) {
    background: linear-gradient(160deg, rgba(50, 68, 108, 0.95), rgba(32, 46, 80, 0.98));
    border-color: rgba(241, 205, 128, 0.75);
}

.map-menu-item-entry > button:disabled {
    opacity: 0.5;
    cursor: default;
}

.map-menu-item-entry-thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(241, 205, 128, 0.58);
    background: linear-gradient(145deg, rgba(35, 39, 52, 0.92), rgba(15, 19, 30, 0.95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1px;
}

.map-menu-item-entry-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.map-menu-item-entry-name {
    color: #f8e9c1;
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-menu-item-entry-desc {
    color: rgba(220, 232, 255, 0.86);
    font-size: 0.74rem;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.map-menu-item-entry-skill {
    color: rgba(246, 216, 151, 0.96);
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

.map-menu-item-entry-note {
    color: rgba(246, 216, 151, 0.9);
    font-size: 0.7rem;
    line-height: 1.25;
    letter-spacing: 0.03em;
}

.map-menu-item-entry-desc.map-menu-item-skill-hover,
.map-menu-item-entry-skill.map-menu-item-skill-hover {
    cursor: help;
    text-decoration: underline dotted rgba(193, 226, 255, 0.8);
    text-underline-offset: 2px;
}

.map-menu-item-skill-tooltip {
    position: fixed;
    z-index: 9800;
    width: min(380px, calc(100vw - 24px));
    max-height: min(72vh, 680px);
    overflow: hidden auto;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(237, 206, 125, 0.7);
    background: linear-gradient(180deg, rgba(10, 16, 36, 0.98), rgba(7, 12, 28, 0.97));
    color: #edf4ff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
    pointer-events: none;
}

.map-menu-item-skill-tooltip.hidden {
    display: none;
}

.map-menu-item-skill-tooltip-title {
    color: #ffe29a;
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.map-menu-item-skill-tooltip-body {
    color: #d8e9ff;
    font-size: 0.78rem;
    line-height: 1.45;
}

.map-menu-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.map-menu-gear-btn {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 0;
    background: transparent url('ui/icon_settings.png') center / contain no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    text-indent: -9999px;
    overflow: hidden;
}

.map-menu-gear-btn:hover {
    filter: brightness(1.12);
}

.map-menu-fuse-btn {
    position: relative;
    min-width: 224px;
    border-radius: 12px;
    border: 2px solid rgba(238, 199, 118, 0.82);
    background: linear-gradient(180deg, rgba(62, 29, 24, 0.94), rgba(36, 17, 14, 0.96));
    color: #f8deb6;
    font-family: 'Cinzel', serif;
    font-size: 1.16rem;
    letter-spacing: 0.04em;
    padding: 14px 20px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.map-menu-fuse-btn:hover {
    filter: brightness(1.12);
}

.map-menu-fuse-btn[disabled] {
    opacity: 0.5;
    filter: grayscale(0.2);
    cursor: default;
}

.map-menu-fuse-btn.active {
    border-color: rgba(120, 255, 206, 0.84);
    box-shadow: 0 0 0 1px rgba(120, 255, 206, 0.45), 0 0 12px rgba(100, 214, 176, 0.35);
}

.map-menu-right {
    padding: 10px;
    display: grid;
    grid-template-rows: auto 220px auto auto auto auto auto minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    overflow: hidden;
}

.map-menu-detail-card-wrap {
    border-radius: 10px;
    border: 1px solid rgba(223, 190, 116, 0.3);
    background: rgba(5, 10, 24, 0.52);
    display: grid;
    place-items: start center;
    overflow: hidden;
    padding-top: 6px;
}

.map-menu-detail-card-wrap.has-preview {
    cursor: zoom-in;
}

.map-menu-detail-card {
    width: min(100%, 230px);
    min-height: 205px;
    border-radius: 10px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border: 1px solid rgba(235, 200, 126, 0.28);
    cursor: inherit;
}

.map-menu-detail-name {
    color: #f7fbff;
    font-size: 1.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.map-menu-detail-attribute {
    color: #dfe8ff;
    font-size: 0.94rem;
}

.map-menu-detail-meta,
.map-menu-detail-tag-race,
.map-menu-detail-effects,
.map-menu-detail-stats,
.map-menu-detail-skill-info,
.map-menu-detail-flavor {
    border-top: 1px solid rgba(223, 194, 125, 0.2);
    padding-top: 5px;
    color: #e6edff;
    line-height: 1.45;
}

.map-menu-detail-meta {
    color: #f2db9f;
    font-size: 0.93rem;
}

.map-menu-detail-effects {
    display: grid;
    gap: 2px;
    white-space: pre-line;
    font-size: 0.98rem;
}

.map-menu-detail-effect-line {
    font-size: 0.98rem;
    line-height: 1.28;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.map-menu-detail-stats {
    font-size: 1.18rem;
    letter-spacing: 0.01em;
}

.map-menu-detail-skill-info {
    white-space: pre-line;
    font-size: 0.92rem;
}

.map-menu-detail-flavor {
    white-space: pre-line;
    font-size: 0.88rem;
    color: #d7e3f5;
    border-radius: 8px;
    background: rgba(7, 14, 32, 0.46);
    padding: 7px 8px;
}

.map-menu-art-preview {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: grid;
    place-items: center;
}

.map-menu-art-preview.hidden {
    display: none;
}

.map-menu-art-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 6, 16, 0.72);
    backdrop-filter: blur(6px);
}

.map-menu-art-preview-panel {
    position: relative;
    z-index: 1;
    width: min(620px, calc(100vw - 80px));
    padding: 22px 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(236, 199, 120, 0.46);
    background:
        radial-gradient(circle at top, rgba(44, 64, 103, 0.32), rgba(44, 64, 103, 0)),
        linear-gradient(180deg, rgba(9, 14, 30, 0.98), rgba(6, 10, 24, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 232, 178, 0.12),
        0 28px 60px rgba(0, 0, 0, 0.5);
    display: grid;
    justify-items: center;
    gap: 14px;
    animation: mapMenuArtPreviewOpen 220ms ease-out both;
}

.map-menu-art-preview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(235, 202, 124, 0.55);
    background: rgba(17, 24, 42, 0.88);
    color: #f6ebcf;
    font-size: 1.2rem;
    cursor: pointer;
}

.map-menu-art-preview-title {
    color: #f7e5b8;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

.map-menu-art-preview-frame {
    width: min(512px, calc(100vw - 140px), calc(100vh - 220px));
    height: min(512px, calc(100vw - 140px), calc(100vh - 220px));
    border-radius: 22px;
    border: 1px solid rgba(236, 199, 120, 0.38);
    background: linear-gradient(180deg, rgba(12, 18, 34, 0.96), rgba(7, 11, 23, 0.98));
    box-shadow:
        inset 0 0 0 1px rgba(255, 232, 178, 0.08),
        0 18px 42px rgba(0, 0, 0, 0.44);
    display: grid;
    place-items: center;
    padding: 14px;
}

.map-menu-art-preview-image {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
}

@keyframes mapMenuArtPreviewOpen {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 1320px) {
    .map-menu-grid {
        grid-template-columns: 250px minmax(0, 1fr) 300px;
        gap: 10px;
    }
}

.map-fusion-reveal {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: grid;
    place-items: center;
}

.map-fusion-reveal.hidden {
    display: none;
}

.map-fusion-reveal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 9, 0.68);
}

.map-fusion-reveal-panel {
    --fusion-accent: rgba(145, 220, 255, 0.9);
    --fusion-accent-soft: rgba(145, 220, 255, 0.36);
    --fusion-rarity-accent: rgba(242, 208, 124, 0.9);
    --fusion-rarity-accent-soft: rgba(242, 208, 124, 0.22);
    --fusion-level-shake: 10px;
    --fusion-flip-duration: 1900ms;
    position: relative;
    width: min(520px, 90vw);
    border-radius: 14px;
    border: 1px solid rgba(236, 199, 116, 0.58);
    background: linear-gradient(160deg, rgba(11, 18, 42, 0.96), rgba(8, 12, 28, 0.97));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62);
    padding: 16px 18px 14px;
    text-align: center;
    overflow: hidden;
}

.map-fusion-reveal-panel::before {
    content: '';
    position: absolute;
    inset: -28% -20%;
    background:
        radial-gradient(circle at 50% 48%, rgba(140, 230, 255, 0.22), rgba(140, 230, 255, 0) 52%),
        radial-gradient(circle at 52% 60%, rgba(208, 173, 255, 0.16), rgba(208, 173, 255, 0) 58%);
    filter: blur(8px);
    opacity: 0;
    pointer-events: none;
}

.map-fusion-reveal:not(.hidden) .map-fusion-reveal-panel::before {
    animation: fusionRevealAura var(--fusion-flip-duration) ease-out forwards;
}

.map-fusion-reveal-title {
    color: #f5dc9d;
    font-family: 'Cinzel', serif;
    font-size: 1.45rem;
    letter-spacing: 0.05em;
}

.map-fusion-reveal-card {
    margin: 14px auto 8px;
    width: 236px;
    height: 344px;
    position: relative;
    perspective: 1600px;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.58));
}

.map-fusion-reveal-card-inner {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    transform: rotateY(0deg);
    transition:
        transform 320ms cubic-bezier(.2,.82,.22,1),
        filter 360ms ease;
}

.map-fusion-reveal-face {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(227, 193, 118, 0.4);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

.map-fusion-reveal-face.back {
    background-image:
        linear-gradient(180deg, rgba(6, 10, 26, 0.18), rgba(6, 10, 26, 0.42)),
        url('material/CardFrame2.png');
}

.map-fusion-reveal-face.front {
    display: grid;
    place-items: center;
    background: none;
    overflow: visible;
}

.map-fusion-reveal-face.front .card {
    cursor: default !important;
    pointer-events: none !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.map-fusion-reveal-shockwave,
.map-fusion-reveal-particles {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    opacity: 0;
}

.map-fusion-reveal-shockwave {
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, var(--fusion-accent) 18%, rgba(255, 255, 255, 0) 46%),
        radial-gradient(circle, rgba(255, 245, 220, 0.72) 0%, rgba(255, 245, 220, 0) 62%);
    mix-blend-mode: screen;
}

.map-fusion-reveal-particles {
    background:
        radial-gradient(circle at 50% 20%, var(--fusion-accent-soft) 0%, rgba(255,255,255,0) 34%),
        radial-gradient(circle at 20% 70%, var(--fusion-rarity-accent-soft) 0%, rgba(255,255,255,0) 28%),
        radial-gradient(circle at 78% 74%, var(--fusion-rarity-accent-soft) 0%, rgba(255,255,255,0) 24%);
    filter: blur(3px);
}

.map-fusion-reveal.play .map-fusion-reveal-card {
    animation: fusionRevealCardEnter 560ms cubic-bezier(.16,.86,.24,1) both;
}

.map-fusion-reveal.play .map-fusion-reveal-shockwave {
    animation: fusionRevealShockwave var(--fusion-flip-duration) cubic-bezier(.16,.86,.24,1) both;
}

.map-fusion-reveal.play .map-fusion-reveal-particles {
    animation: fusionRevealParticles var(--fusion-flip-duration) ease-out both;
}

@keyframes fusionRevealCardEnter {
    0% { opacity: 0; transform: translateY(34px) scale(0.66); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fusionRevealCharge {
    0% { filter: brightness(1) saturate(1); }
    30% { filter: brightness(1.85) saturate(1.2); }
    55% { filter: brightness(1.15) saturate(1.06); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes fusionRevealShockwave {
    0% { opacity: 0; transform: scale(0.36); }
    36% { opacity: 0.18; transform: scale(0.54); }
    60% { opacity: 0.92; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.38); }
}

@keyframes fusionRevealParticles {
    0% { opacity: 0; transform: scale(0.9); }
    34% { opacity: 0.24; transform: scale(1.04); }
    64% { opacity: 1; transform: scale(1.16); }
    100% { opacity: 0.18; transform: scale(1.28); }
}

@keyframes fusionRevealBackFace {
    0% { opacity: 1; }
    54% { opacity: 1; }
    56% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fusionRevealFrontFace {
    0% { opacity: 0; }
    54% { opacity: 0; }
    56% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes fusionRevealAura {
    0% { opacity: 0; transform: scale(0.88); }
    45% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 0.78; transform: scale(1); }
}

.map-fusion-reveal-name {
    color: #f5f8ff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
}

.map-fusion-reveal-meta {
    margin-top: 4px;
    color: #f2db9f;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

.map-fusion-reveal-ok {
    margin-top: 10px;
    min-width: 140px;
    border-radius: 10px;
    border: 1px solid rgba(238, 199, 118, 0.72);
    background: linear-gradient(180deg, rgba(37, 45, 80, 0.92), rgba(22, 26, 46, 0.96));
    color: #f8deb6;
    font-family: 'Cinzel', serif;
    font-size: 0.98rem;
    padding: 8px 12px;
    cursor: pointer;
}

.map-event-modal {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
}

.map-event-modal.hidden {
    display: none;
}

.event-dice-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.event-dice-overlay.show {
    opacity: 1;
}

.event-dice-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(126, 82, 188, 0.36), rgba(9, 6, 18, 0.86) 62%),
        linear-gradient(180deg, rgba(8, 8, 16, 0.72), rgba(5, 5, 12, 0.82));
    backdrop-filter: blur(2px);
}

.event-dice-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, 88vw);
    border-radius: 16px;
    border: 1px solid rgba(214, 179, 255, 0.58);
    background: linear-gradient(160deg, rgba(31, 18, 56, 0.96), rgba(15, 9, 32, 0.98));
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.58),
        inset 0 0 26px rgba(154, 109, 239, 0.14);
    padding: 18px 22px 20px;
    text-align: center;
}

.event-dice-title {
    color: #f2ddff;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.02rem, 2.4vw, 1.3rem);
    letter-spacing: 0.08em;
}

.event-dice-sub {
    margin-top: 5px;
    color: #d6b6ff;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.74rem, 1.8vw, 0.92rem);
    letter-spacing: 0.07em;
}

.event-dice-stage {
    position: relative;
    margin: 20px auto 14px;
    width: 180px;
    height: 180px;
    display: grid;
    place-items: center;
}

.event-dice-glow {
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(209, 142, 255, 0.5), rgba(209, 142, 255, 0) 72%);
    filter: blur(2.4px);
    animation: eventDiceGlowPulse 1.2s ease-in-out infinite;
}

.event-dice-cube {
    width: 112px;
    height: 112px;
    border-radius: 18px;
    border: 2px solid rgba(238, 214, 255, 0.86);
    background:
        linear-gradient(150deg, rgba(143, 95, 220, 0.95), rgba(55, 32, 95, 0.96)),
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    box-shadow:
        0 0 26px rgba(188, 122, 255, 0.52),
        0 12px 24px rgba(0, 0, 0, 0.44);
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    transition: transform 110ms linear;
}

.event-dice-cube.result {
    animation: eventDiceResultPop 460ms cubic-bezier(.2,.8,.2,1) both;
}

.event-dice-face {
    color: #fff8ff;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 2.35rem;
    text-shadow: 0 0 14px rgba(246, 233, 255, 0.76);
}

.event-dice-caption {
    color: #ead7ff;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.82rem, 2vw, 1rem);
    letter-spacing: 0.03em;
}

@keyframes eventDiceGlowPulse {
    0%, 100% {
        transform: scale(0.94);
        opacity: 0.72;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes eventDiceResultPop {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    45% {
        transform: scale(1.16);
        filter: brightness(1.25);
    }
    100% {
        transform: scale(1);
        filter: brightness(1.04);
    }
}

.map-event-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 9, 0.58);
}

.map-event-panel {
    position: relative;
    width: min(620px, 88vw);
    border-radius: 14px;
    border: 1px solid rgba(236, 200, 122, 0.55);
    background:
        linear-gradient(160deg, rgba(18, 24, 48, 0.95), rgba(7, 10, 24, 0.96));
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.58);
    padding: 20px 22px 18px;
}

body.fixed-canvas-mode .map-event-panel {
    width: 620px;
}

.map-event-panel.with-image {
    overflow: hidden;
    border-color: rgba(244, 220, 151, 0.72);
}

.map-event-panel.with-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 11, 24, 0.28), rgba(8, 11, 24, 0.72));
    pointer-events: none;
}

.map-event-panel.with-image > * {
    position: relative;
    z-index: 1;
}

.map-event-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.2rem, 2.6vw, 1.9rem);
    color: #ffe0a0;
    letter-spacing: 0.03em;
}

.map-event-body {
    margin-top: 10px;
    color: #f0f4ff;
    line-height: 1.6;
    font-size: 1rem;
    white-space: pre-line;
}

.map-event-panel.with-image .map-event-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.map-event-panel.with-image .map-event-body {
    background: rgba(6, 10, 21, 0.44);
    border: 1px solid rgba(185, 205, 242, 0.28);
    border-radius: 10px;
    padding: 10px 11px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.68);
}

.map-event-actions {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.map-event-btn {
    border: 1px solid rgba(226, 193, 122, 0.58);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(37, 45, 80, 0.92), rgba(22, 26, 46, 0.96));
    color: #f8e6be;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    padding: 10px 12px;
    cursor: pointer;
}

.map-event-btn:hover {
    filter: brightness(1.1);
}

body.map-controller-active .map-event-btn.map-event-controller-selected,
body.map-controller-active .event-deck-select-btn.map-event-controller-selected,
body.map-controller-active .event-duel-reveal-actions button.map-event-controller-selected,
body.map-controller-active .stone-tablet-btn.map-event-controller-selected,
body.map-controller-active .travel-result-confirm-actions button.map-event-controller-selected,
body.map-controller-active .map-shop-offer-btn.map-event-controller-selected,
body.map-controller-active .map-shop-card-option.map-event-controller-selected,
body.map-controller-active .map-shop-confirm-btn.map-event-controller-selected,
body.map-controller-active .map-shop-sell-card-btn.map-event-controller-selected {
    border-color: rgba(111, 255, 178, 0.98);
    color: #dfffdf;
    text-shadow: 0 0 8px rgba(111, 255, 178, 0.72);
    box-shadow:
        0 0 0 1px rgba(226, 255, 236, 0.72),
        0 0 16px rgba(73, 255, 147, 0.72),
        inset 0 0 16px rgba(73, 255, 147, 0.18);
}

.map-event-btn:disabled {
    border-color: rgba(16, 16, 16, 0.92);
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.98), rgba(8, 8, 8, 0.98));
    color: rgba(158, 158, 158, 0.92);
    cursor: not-allowed;
    opacity: 1;
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.62);
}

.map-event-btn:disabled:hover {
    filter: none;
}

.map-story-event-panel {
    width: min(920px, 92vw);
    max-height: min(92vh, 960px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px 16px 14px;
}

body.fixed-canvas-mode .map-story-event-panel {
    width: 920px;
    max-height: 960px;
}

.map-event-visual-wrap {
    height: clamp(220px, 44vh, 460px);
    border-radius: 12px;
    border: 1px solid rgba(232, 201, 136, 0.56);
    background: rgba(3, 5, 12, 0.86);
    overflow: hidden;
}

body.fixed-canvas-mode .map-event-visual-wrap {
    height: 460px;
}

.map-event-visual-wrap.hidden {
    display: none;
}

.map-event-visual-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.map-event-speech-wrap {
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(231, 209, 154, 0.58);
    background:
        linear-gradient(180deg, rgba(13, 18, 36, 0.92), rgba(8, 12, 26, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 241, 205, 0.08);
    padding: 10px 12px;
}

.map-event-speech {
    color: #f6e6be;
    line-height: 1.65;
    font-size: 0.98rem;
    white-space: pre-line;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.map-story-event-panel .map-event-title {
    margin: 0;
}

.map-story-event-panel .map-event-body {
    margin: 0;
    max-height: 24vh;
    overflow-y: auto;
    background: rgba(6, 10, 21, 0.62);
    border: 1px solid rgba(185, 205, 242, 0.28);
    border-radius: 10px;
    padding: 10px 11px;
}

body.fixed-canvas-mode .map-story-event-panel .map-event-body {
    max-height: 260px;
}

.map-event-card-compare-modal {
    position: fixed;
    inset: 0;
    z-index: 3600;
    display: grid;
    place-items: center;
}

.map-event-card-compare-modal.hidden {
    display: none;
}

.map-event-card-compare-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 5, 13, 0.78);
}

.map-event-card-compare-panel {
    position: relative;
    width: min(940px, 94vw);
    max-height: min(86vh, 860px);
    border-radius: 12px;
    border: 1px solid rgba(214, 185, 116, 0.56);
    background: rgba(10, 14, 31, 0.96);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.66);
    padding: 12px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

body.fixed-canvas-mode .map-event-card-compare-panel {
    width: 940px;
    max-height: 860px;
}

.map-event-card-compare-panel.single-reward-mode {
    width: min(980px, 78vw);
}

body.fixed-canvas-mode .map-event-card-compare-panel.single-reward-mode {
    width: 980px;
}

.map-event-card-compare-title {
    font-family: 'Cinzel', serif;
    color: #f1d79e;
    letter-spacing: 0.04em;
    text-align: center;
    font-size: 1.02rem;
}

.map-event-card-compare-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    max-height: 56vh;
    overflow-y: auto;
    padding: 2px 2px 4px;
}

body.fixed-canvas-mode .map-event-card-compare-list {
    max-height: 560px;
}

.map-event-card-compare-list.single-reward-mode {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
}

.map-event-card-compare-actions {
    display: flex;
    justify-content: center;
}

.map-event-outcome-card-item {
    border: 1px solid rgba(193, 171, 126, 0.46);
    border-radius: 10px;
    background: rgba(8, 12, 26, 0.72);
    padding: 8px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    justify-items: center;
}

.map-event-outcome-card-item.map-event-outcome-card-item-hero {
    padding: 14px;
}

.map-event-outcome-card-label {
    color: #efd59c;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
}

.map-event-outcome-card-wrap {
    width: 100%;
    display: grid;
    place-items: center;
}

.map-event-outcome-card-item-hero .map-event-outcome-card-wrap {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    justify-items: stretch;
}

.map-event-outcome-card {
    pointer-events: none;
}

.map-event-outcome-card-fallback {
    min-height: 120px;
    border-radius: 8px;
    border: 1px solid rgba(194, 209, 242, 0.24);
    background: rgba(12, 18, 36, 0.78);
    color: #d8e1f3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 8px;
}

.map-event-outcome-entry-icon {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    border: 1px solid rgba(219, 228, 247, 0.36);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.map-event-outcome-entry-text {
    line-height: 1.4;
}

.map-event-outcome-reward-hero-icon {
    width: 220px;
    height: 220px;
    border-radius: 18px;
    border: 1px solid rgba(243, 208, 132, 0.62);
    background: linear-gradient(150deg, rgba(40, 46, 65, 0.9), rgba(16, 22, 35, 0.95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.38),
        0 0 26px rgba(255, 221, 158, 0.18);
}

.map-event-outcome-reward-hero-text {
    min-width: 0;
}

.map-event-outcome-reward-hero-name {
    color: #f8e5b2;
    font-size: 1.42rem;
    font-weight: 700;
    line-height: 1.35;
}

.map-event-outcome-reward-hero-desc {
    margin-top: 8px;
    color: #dbe8ff;
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.map-event-outcome-reward-hero-note {
    margin-top: 10px;
    color: #c8e1ff;
    font-size: 1rem;
}

.map-story-event-panel .map-event-actions {
    margin-top: 0;
}

@media (max-width: 768px) {
    .map-story-event-panel {
        width: min(96vw, 760px);
        max-height: min(94vh, 900px);
        gap: 10px;
        padding: 12px;
    }

    .map-event-visual-wrap {
        height: min(40vh, 300px);
    }

    .map-story-event-panel .map-event-body {
        max-height: 30vh;
        font-size: 0.95rem;
    }

    .map-event-card-compare-panel {
        width: min(96vw, 760px);
        max-height: min(90vh, 860px);
        padding: 10px;
    }

    .map-event-card-compare-panel.single-reward-mode {
        width: min(96vw, 760px);
    }

    .map-event-card-compare-list {
        grid-template-columns: 1fr;
        max-height: 58vh;
    }

    .map-event-outcome-card-item-hero .map-event-outcome-card-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .map-event-outcome-reward-hero-icon {
        width: min(220px, 60vw);
        height: min(220px, 60vw);
    }

    .map-event-outcome-reward-hero-text {
        text-align: center;
    }

    .map-story-event-panel .map-event-actions {
        grid-template-columns: 1fr;
    }
}

.map-shop-panel {
    width: min(1580px, 98vw);
    height: min(94vh, 1180px);
    max-height: min(94vh, 1180px);
    background:
        linear-gradient(160deg, rgba(10, 14, 30, 0.78), rgba(7, 10, 22, 0.84)),
        url('material/revock_shop.png');
    background-size: cover;
    background-position: center;
    padding: 24px 26px 20px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.map-shop-haock {
    color: #d9f6ff;
    font-size: 1.6rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.02em;
    text-align: right;
}

.map-shop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.map-shop-body {
    margin-top: 10px;
    display: block;
    min-height: 0;
    height: 100%;
}

.map-shop-offer-list {
    min-height: 0;
    height: 100%;
    border-radius: 12px;
    border: 1px solid rgba(221, 187, 109, 0.28);
    background: linear-gradient(165deg, rgba(8, 15, 36, 0.84), rgba(7, 11, 24, 0.9));
    padding: 12px;
    overflow: hidden;
}

.map-shop-section {
    display: grid;
    gap: 8px;
}

.map-shop-section-title {
    color: #f2db9f;
    font-family: 'Cinzel', serif;
    font-size: 0.94rem;
    letter-spacing: 0.06em;
}

.map-shop-power-list {
    display: grid;
    gap: 8px;
}

.map-shop-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-content: start;
    min-height: 0;
}

.map-shop-offer-btn {
    border: 1px solid rgba(124, 212, 252, 0.58);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(29, 63, 84, 0.92), rgba(17, 34, 46, 0.96));
    color: #dff5ff;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 10px;
    align-items: center;
}

.map-shop-offer-btn-power {
    grid-template-columns: 76px 1fr;
}

.map-shop-power-item.selected {
    border-color: rgba(255, 230, 148, 0.96);
    box-shadow: 0 0 0 1px rgba(255, 230, 148, 0.38), 0 0 14px rgba(255, 210, 112, 0.48);
}

body.map-controller-active #mapShopModal .map-shop-power-item.selected:not(.map-event-controller-selected) {
    border-color: rgba(124, 212, 252, 0.24);
    box-shadow: none;
}

body.map-controller-active #mapShopModal .map-shop-power-item.map-event-controller-selected {
    border-color: rgba(111, 255, 178, 0.98);
    box-shadow:
        0 0 0 1px rgba(226, 255, 236, 0.72),
        0 0 16px rgba(73, 255, 147, 0.72),
        inset 0 0 16px rgba(73, 255, 147, 0.18);
}

.map-shop-power-item.purchased {
    opacity: 0.62;
}

.map-shop-power-thumb {
    width: 76px;
    height: 76px;
    border-radius: 16px;
    border: 2px solid rgba(241, 205, 128, 0.78);
    background:
        linear-gradient(145deg, rgba(35, 39, 52, 0.92), rgba(15, 19, 30, 0.95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 0 0 1px rgba(255, 237, 189, 0.38),
        inset 0 0 16px rgba(255, 223, 150, 0.12),
        0 0 0 1px rgba(58, 35, 10, 0.75),
        0 6px 14px rgba(0, 0, 0, 0.35);
}

.map-shop-card-thumb {
    width: 108px;
    height: 152px;
    border-radius: 8px;
    border: 1px solid rgba(230, 197, 116, 0.38);
    background: rgba(8, 15, 28, 0.65);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    color: #9bb9d1;
    font-size: 0.66rem;
    display: grid;
    place-items: center;
}

.map-shop-offer-content {
    min-width: 0;
}

.map-shop-offer-title {
    color: #e9f7ff;
    font-size: 0.9rem;
    line-height: 1.35;
}

.map-shop-offer-meta {
    color: #c9dbef;
    font-size: 0.79rem;
    line-height: 1.3;
}

.map-shop-offer-state {
    margin-top: 4px;
    color: #ffd995;
    font-size: 0.8rem;
}

.map-shop-offer-btn:hover {
    filter: brightness(1.1);
}

.map-shop-offer-btn:disabled {
    opacity: 0.6;
    cursor: default;
    filter: none;
}

.map-shop-card-option {
    border: 1px solid rgba(124, 212, 252, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(19, 31, 56, 0.56), rgba(12, 20, 36, 0.58));
    color: #e5f2ff;
    min-height: 316px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: 10px 10px 12px;
    cursor: pointer;
}

.map-shop-card-frame {
    width: 100%;
    height: 284px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    overflow: visible;
    display: grid;
    place-items: start center;
}

.map-shop-card-option:hover {
    filter: brightness(1.08);
}

.map-shop-card-option.selected {
    border-color: rgba(255, 230, 148, 0.98);
    box-shadow: 0 0 0 1px rgba(255, 230, 148, 0.38), 0 0 14px rgba(255, 210, 112, 0.46);
}

body.map-controller-active #mapShopModal .map-shop-card-option.selected:not(.map-event-controller-selected) {
    border-color: rgba(124, 212, 252, 0.24);
    box-shadow: none;
}

body.map-controller-active #mapShopModal .map-shop-card-option.map-event-controller-selected {
    border-color: rgba(111, 255, 178, 0.98);
    box-shadow:
        0 0 0 1px rgba(226, 255, 236, 0.72),
        0 0 16px rgba(73, 255, 147, 0.72),
        inset 0 0 16px rgba(73, 255, 147, 0.18);
}

.map-shop-card-option.purchased {
    opacity: 0.62;
    cursor: default;
    filter: grayscale(0.22);
}

.map-shop-card-view {
    width: 236px !important;
    height: 344px !important;
    transform: scale(0.82) !important;
    transform-origin: center top;
    margin-top: 0;
    margin-bottom: -60px;
    pointer-events: none;
}

.map-shop-card-view:hover {
    transform: none !important;
    box-shadow: none !important;
}

.map-shop-card-option-meta {
    color: #d7e8fb;
    font-size: 0.88rem;
    line-height: 1.1;
    text-align: center;
}

.map-shop-detail-panel {
    border-radius: 10px;
    border: 1px solid rgba(223, 190, 116, 0.28);
    background: rgba(6, 10, 23, 0.62);
    padding: 8px;
    display: grid;
    gap: 6px;
}

.map-shop-detail-card-wrap {
    border-radius: 10px;
    border: 1px solid rgba(223, 190, 116, 0.24);
    background: rgba(5, 10, 24, 0.56);
    display: grid;
    place-items: center;
    padding: 6px;
}

.map-shop-detail-card {
    width: min(100%, 238px);
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid rgba(235, 200, 126, 0.28);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: grid;
    place-items: center;
    color: rgba(235, 219, 188, 0.9);
    font-family: 'Cinzel', serif;
}

.map-shop-detail-card.map-shop-detail-card-power {
    border-radius: 18px;
    border: 2px solid rgba(242, 204, 126, 0.82);
    background-size: cover;
    box-shadow:
        inset 0 0 0 1px rgba(255, 241, 198, 0.45),
        inset 0 0 24px rgba(255, 229, 160, 0.16),
        0 10px 22px rgba(0, 0, 0, 0.32);
}

.map-shop-detail-name {
    color: #f7fbff;
    font-size: 1.12rem;
    font-weight: 700;
}

.map-shop-detail-line {
    color: #d9e8ff;
    font-size: 0.88rem;
    line-height: 1.35;
}

.map-shop-detail-effects {
    color: #e7eefb;
    font-size: 0.84rem;
    white-space: pre-line;
    line-height: 1.42;
}

.map-shop-detail-reference {
    color: #9ee7ff;
    font-weight: 800;
}

.map-shop-detail-stats {
    color: #a8e8ff;
    font-size: 0.9rem;
    font-family: 'Cinzel', serif;
}

.map-shop-detail-skill {
    color: #dfeaff;
    font-size: 0.8rem;
    line-height: 1.42;
    white-space: pre-line;
    border-top: 1px solid rgba(220, 189, 118, 0.2);
    padding-top: 4px;
}

@media (max-width: 900px) {
    .map-shop-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1280px) {
    .map-shop-card-grid {
        grid-template-columns: 1fr;
    }
}

.map-shop-message {
    position: static;
    width: 100%;
    min-height: 0;
    color: #f0f4ff;
    font-size: 0.94rem;
    border-top: 1px solid rgba(221, 187, 109, 0.22);
    background: rgba(6, 10, 23, 0.36);
    padding: 8px 10px 10px;
    border-radius: 8px;
    margin-top: 8px;
}

.map-shop-message-line {
    margin-bottom: 6px;
}

.map-shop-confirm-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.map-shop-confirm-btn {
    width: 100%;
    min-width: 0;
    font-size: 1.02rem;
    padding: 10px 12px;
}

.map-shop-actions {
    grid-template-columns: 1fr;
    margin-top: 12px;
}

.map-shop-layout {
    position: relative;
    width: min(1940px, 99vw);
    display: grid;
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    z-index: 1;
}

body.fixed-canvas-mode .map-shop-layout {
    width: 1780px;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
}

body.fixed-canvas-mode .map-shop-panel {
    width: 1460px;
    height: 920px;
    max-height: 920px;
}

.map-shop-layout .map-shop-panel {
    width: 100%;
}

.map-shop-detail-dock {
    min-height: min(94vh, 1180px);
    max-height: min(94vh, 1180px);
    display: grid;
}

body.fixed-canvas-mode .map-shop-detail-dock {
    min-height: 920px;
    max-height: 920px;
}

.map-shop-detail-host {
    min-height: 0;
    height: 100%;
    border-radius: 12px;
    border: 1px solid rgba(221, 187, 109, 0.28);
    background: linear-gradient(165deg, rgba(8, 15, 36, 0.9), rgba(7, 11, 24, 0.92));
    padding: 10px;
    overflow: hidden auto;
}

.map-shop-offer-list {
    overflow: hidden auto;
    padding: 12px;
    display: block;
}

.map-shop-offer-layout {
    display: grid;
    grid-template-columns: minmax(272px, 304px) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    min-height: min(66vh, 780px);
}

body.fixed-canvas-mode .map-shop-offer-layout {
    grid-template-columns: 288px minmax(860px, 1fr);
    min-height: 720px;
}

body.fixed-canvas-mode .map-shop-offer-main {
    min-width: 860px;
}

body.fixed-canvas-mode .map-shop-card-grid {
    grid-template-columns: repeat(3, minmax(230px, 1fr));
    gap: 14px;
}

.map-shop-offer-rail {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-shop-offer-main {
    min-height: 0;
    display: grid;
}

.map-shop-card-section {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.map-shop-card-section .map-shop-card-grid {
    min-height: 0;
}

.map-shop-message-inline {
    margin-top: 6px;
}

.map-shop-sell-section {
    border: 1px solid rgba(91, 188, 255, 0.3);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(10, 28, 55, 0.56), rgba(8, 17, 35, 0.72));
    padding: 8px 10px 10px;
    display: grid;
    gap: 8px;
}

.map-shop-sell-open-btn {
    width: 100%;
    min-width: 0;
}

.map-shop-sell-hint {
    color: #cbe7ff;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-line;
}

.map-shop-sell-modal {
    position: absolute;
    inset: 0;
    z-index: 8;
}

.map-shop-sell-modal.hidden {
    display: none;
}

.map-shop-sell-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 16, 0.7);
    backdrop-filter: blur(2px);
}

.map-shop-sell-panel {
    position: absolute;
    inset: 36px 42px;
    border-radius: 14px;
    border: 1px solid rgba(223, 190, 116, 0.34);
    background: linear-gradient(180deg, rgba(7, 13, 29, 0.96), rgba(6, 10, 24, 0.96));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    padding: 16px 18px 18px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
}

.map-shop-sell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.map-shop-sell-title {
    color: #f4d58d;
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    letter-spacing: 0.04em;
}

.map-shop-sell-note {
    color: #d8e8ff;
    font-size: 0.92rem;
    line-height: 1.45;
}

.map-shop-sell-grid {
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    align-content: start;
    padding-right: 4px;
}

.map-shop-sell-card {
    border: 1px solid rgba(124, 212, 252, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 28, 52, 0.92), rgba(9, 18, 35, 0.96));
    padding: 10px 10px 12px;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.map-shop-sell-card-preview {
    width: 100%;
    min-height: 238px;
    display: grid;
    place-items: start center;
    overflow: hidden;
}

.map-shop-sell-card-view {
    width: 236px !important;
    height: 344px !important;
    transform: scale(0.72) !important;
    transform-origin: center top;
    margin-bottom: -92px;
    pointer-events: none;
}

.map-shop-sell-card-name {
    color: #f0f7ff;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: center;
}

.map-shop-sell-card-meta {
    color: #c7dcf7;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: center;
}

.map-shop-sell-card-btn {
    width: 100%;
    min-width: 0;
}

body.map-controller-active #mapShopModal .map-shop-sell-card-btn.map-event-controller-selected {
    border-color: rgba(226, 193, 122, 0.58);
    color: #9dffbd;
    text-shadow:
        0 0 8px rgba(111, 255, 178, 0.86),
        0 0 14px rgba(73, 255, 147, 0.62);
    box-shadow: none;
}

.map-shop-sell-empty {
    border: 1px dashed rgba(124, 212, 252, 0.24);
    border-radius: 12px;
    color: #d8e8ff;
    padding: 18px;
    text-align: center;
}

.map-shop-sell-confirm {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.map-shop-sell-confirm.hidden {
    display: none;
}

.map-shop-sell-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 16, 0.62);
}

.map-shop-sell-confirm-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    border-radius: 14px;
    border: 1px solid rgba(223, 190, 116, 0.38);
    background: linear-gradient(180deg, rgba(10, 18, 36, 0.98), rgba(7, 13, 28, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    padding: 18px 18px 16px;
    display: grid;
    gap: 12px;
}

.map-shop-sell-confirm-title {
    color: #f4d58d;
    font-family: 'Cinzel', serif;
    font-size: 1.26rem;
    text-align: center;
}

.map-shop-sell-confirm-text {
    color: #e6f1ff;
    font-size: 0.96rem;
    line-height: 1.55;
    text-align: center;
    white-space: pre-line;
}

.map-shop-sell-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1560px) {
    .map-shop-layout {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 12px;
    }
}

@media (max-width: 1280px) {
    .map-shop-layout {
        grid-template-columns: 1fr;
        width: min(1560px, 98vw);
    }
    .map-shop-panel {
        height: auto;
        max-height: min(94vh, 1180px);
    }
    .map-shop-detail-dock {
        order: 2;
        min-height: auto;
        max-height: min(36vh, 420px);
    }
    .map-shop-offer-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .map-shop-message {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 10px;
    }
}

.map-battle-vs-overlay {
    position: fixed;
    inset: 0;
    z-index: 2700;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 24px;
    padding: 5vw;
    pointer-events: none;
    background: rgba(0, 0, 0, 0);
    opacity: 1;
    transition: background 260ms ease;
}

.map-battle-vs-overlay.hidden {
    display: none;
}

.map-battle-vs-overlay.phase-in {
    background: rgba(0, 0, 0, 0.84);
}

.map-battle-vs-overlay.phase-vs .map-battle-vs-panel,
.map-battle-vs-overlay.phase-vs .map-battle-vs-text {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.map-battle-vs-overlay.phase-out {
    background: rgba(0, 0, 0, 0.96);
}

.map-battle-vs-overlay.phase-battle-in {
    background: rgba(0, 0, 0, 0);
    transition: background 620ms ease;
}

.map-battle-vs-panel {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
    transition: transform 300ms cubic-bezier(.18,.85,.24,1), opacity 220ms ease;
    display: grid;
    justify-items: center;
    gap: 12px;
}

.map-battle-vs-left .map-battle-vs-face {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), -2px 0 20px rgba(84, 180, 255, 0.2);
}

.map-battle-vs-right .map-battle-vs-face {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55), 2px 0 20px rgba(255, 102, 96, 0.22);
}

.map-battle-vs-face {
    width: clamp(180px, 21vw, 290px);
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    border: 1px solid rgba(236, 198, 118, 0.55);
    background:
        linear-gradient(155deg, rgba(35, 47, 78, 0.68), rgba(11, 17, 34, 0.86));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(239, 227, 198, 0.84);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    display: grid;
    place-items: center;
}

.map-battle-vs-name {
    color: #f5e4bd;
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 1.8vw, 1.5rem);
    letter-spacing: 0.08em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.map-battle-vs-text {
    opacity: 0;
    transform: translateY(22px) scale(0.72);
    transition: transform 280ms cubic-bezier(.22,.86,.26,1), opacity 220ms ease;
    color: #ffe9b7;
    font-family: 'Cinzel', serif;
    font-size: clamp(2.4rem, 8vw, 7rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.82),
        0 0 20px rgba(255, 167, 90, 0.26);
}

.map-intro-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    opacity: 0;
}

.map-intro-overlay.hidden {
    display: none;
}

.map-intro-overlay.show {
    opacity: 1;
    transition: opacity 700ms ease;
}

.map-intro-overlay.fade-out {
    opacity: 0;
    transition: opacity 620ms ease;
}

.map-intro-overlay.route-shift {
    background: rgba(0, 0, 0, 0.9);
}

.map-intro-overlay.route-shift .map-intro-title {
    color: rgba(236, 244, 255, 0.96);
    letter-spacing: 0.16em;
}

.map-intro-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.2rem, 7.2vw, 6rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(251, 236, 196, 0.96);
    text-shadow: 0 6px 22px rgba(0, 0, 0, 0.62);
    transform: translateY(18px) scale(0.97);
    opacity: 0;
}

.map-intro-overlay.show .map-intro-title {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 900ms ease, transform 900ms ease;
}

.map-intro-overlay.fade-out .map-intro-title {
    opacity: 0;
    transform: translateY(-6px) scale(1.01);
    transition: opacity 620ms ease, transform 620ms ease;
}

.stage-hotspot {
    position: absolute;
    width: clamp(58px, 4.4vw, 88px);
    height: clamp(86px, 6.9vw, 132px);
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    background: url('material/Monument1.png') center/contain no-repeat;
    isolation: isolate;
    overflow: visible;
    z-index: 2;
}

.stage-hotspot-red {
    filter:
        drop-shadow(0 0 4px rgba(176, 28, 24, 0.62))
        drop-shadow(0 0 10px rgba(128, 8, 10, 0.56))
        drop-shadow(0 0 18px rgba(72, 0, 2, 0.42));
}

.stage-hotspot-pos-01 { left: 48.49%; top: 65.83%; }
.stage-hotspot-pos-02 { left: 57.6%; top: 50.26%; }
.stage-hotspot-pos-03 { left: 42.08%; top: 35.74%; }
.stage-hotspot-pos-04 { left: 30.05%; top: 14.73%; }
.stage-hotspot-pos-05 { left: 58.65%; top: 18.81%; }

.stage-special-node {
    position: absolute;
    border: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    isolation: isolate;
    overflow: visible;
    z-index: 3;
}

.stage-special-node.hidden {
    display: none;
}

.stage-special-node:focus-visible {
    outline: 2px solid rgba(255, 220, 150, 0.95);
    outline-offset: 4px;
}

.stage-revock-house {
    width: clamp(74px, 6.2vw, 116px);
    height: clamp(74px, 6.2vw, 116px);
    background-image: url('material/レボックの家.png');
    filter:
        drop-shadow(0 5px 10px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 14px rgba(255, 92, 32, 0.24));
    transition: transform 220ms ease, filter 220ms ease;
}

.stage-revock-house-pos { left: 29.2%; top: 57.8%; }

.stage-revock-house:hover {
    transform: scale(1.06);
    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.68))
        drop-shadow(0 0 20px rgba(255, 120, 38, 0.32));
}

.stage-revock-house-glow {
    position: absolute;
    inset: 8% 12% 4% 12%;
    pointer-events: none;
}

.stage-revock-house-glow::before,
.stage-revock-house-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 154, 72, 0.42) 0%, rgba(220, 56, 22, 0.14) 40%, transparent 72%);
    mix-blend-mode: screen;
}

.stage-revock-house-glow::before {
    opacity: 0.72;
    transform: scale(0.88);
    animation: revockHousePulse 2.8s ease-in-out infinite;
}

.stage-revock-house-glow::after {
    opacity: 0.42;
    transform: scale(1.08);
    animation: revockHousePulse 3.6s ease-in-out 0.9s infinite;
}

.stage-hotspot-red::before,
.stage-hotspot-red::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -3;
}

.stage-hotspot.cleared {
    background-image: url('material/Monument2.png');
}

.stage-hotspot-effect {
    position: absolute;
    inset: -24% -18% -10% -18%;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

.stage-hotspot.cleared .stage-hotspot-effect {
    opacity: 0;
}

.stage-hotspot-red.cleared {
    filter:
        drop-shadow(0 0 5px rgba(58, 166, 224, 0.68))
        drop-shadow(0 0 14px rgba(29, 116, 194, 0.62))
        drop-shadow(0 0 25px rgba(18, 78, 148, 0.56));
}

.stage-hotspot-red.cleared::before {
    background:
        radial-gradient(ellipse at center, rgba(68, 170, 228, 0.32) 0%, rgba(34, 84, 168, 0.25) 36%, rgba(20, 40, 88, 0) 72%);
}

.stage-hotspot-red.cleared::after {
    background:
        radial-gradient(ellipse at 50% 56%, rgba(16, 38, 88, 0.52) 0%, rgba(20, 54, 124, 0.24) 42%, rgba(0, 0, 0, 0) 78%);
}


.stage-hotspot:hover {
    transform: translateY(-1px);
}

.stage-hotspot.debug-draggable {
    cursor: move;
    outline: 1px dashed rgba(255, 236, 168, 0.7);
    outline-offset: 2px;
}

.stage-hotspot-disabled {
    opacity: 0.46;
    filter: grayscale(0.72) brightness(0.78) !important;
    cursor: default;
}

.stage-hotspot-disabled .stage-hotspot-effect {
    display: none;
}

.stage-hotspot-tutorial-focus {
    opacity: 1 !important;
    filter:
        brightness(1.18)
        drop-shadow(0 0 8px rgba(255, 238, 162, 0.9))
        drop-shadow(0 0 18px rgba(255, 212, 118, 0.78))
        drop-shadow(0 0 30px rgba(255, 176, 84, 0.66)) !important;
    animation: stageHotspotPulse 1.2s ease-in-out infinite;
}

.stage-hotspot-tutorial-focus::after {
    content: 'TUTORIAL';
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    background: rgba(20, 12, 6, 0.88);
    color: #ffe3a8;
    border: 1px solid rgba(255, 216, 132, 0.82);
    border-radius: 6px;
    padding: 1px 8px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    z-index: 5;
}

.stage-hotspot-red:hover {
    filter:
        brightness(1.08)
        drop-shadow(0 0 5px rgba(194, 36, 30, 0.72))
        drop-shadow(0 0 13px rgba(138, 12, 12, 0.62))
        drop-shadow(0 0 24px rgba(84, 2, 6, 0.5));
}

.stage-hotspot-red.cleared:hover {
    filter:
        brightness(1.1)
        drop-shadow(0 0 7px rgba(76, 186, 242, 0.78))
        drop-shadow(0 0 18px rgba(36, 134, 218, 0.68))
        drop-shadow(0 0 28px rgba(18, 88, 172, 0.58));
}

.stage-hotspot.stage-controller-selected {
    opacity: 1 !important;
    filter:
        brightness(1.08)
        drop-shadow(0 0 5px rgba(126, 255, 156, 0.62))
        drop-shadow(0 0 12px rgba(82, 221, 100, 0.42))
        drop-shadow(0 0 22px rgba(54, 190, 82, 0.28)) !important;
    animation: stageControllerSelectedPulse 1.4s ease-in-out infinite;
}

.stage-hotspot.stage-controller-selected::before {
    background:
        radial-gradient(ellipse at center, rgba(126, 255, 156, 0.18) 0%, rgba(54, 190, 82, 0.12) 38%, rgba(20, 80, 34, 0) 74%) !important;
}

.stage-hotspot.stage-controller-selected::after {
    background:
        radial-gradient(ellipse at 50% 56%, rgba(22, 92, 38, 0.22) 0%, rgba(36, 160, 64, 0.1) 44%, rgba(0, 0, 0, 0) 78%) !important;
}

.stage-select-screen.stage-controller-active .stage-hotspot.stage-controller-selected .stage-hotspot-effect::after,
.stage-select-screen.stage-controller-active .stage-special-node.stage-controller-selected::after {
    content: '←  →';
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    padding: 2px 9px;
    border: 1px solid rgba(126, 255, 156, 0.38);
    border-radius: 999px;
    background: rgba(4, 12, 14, 0.68);
    color: rgba(214, 255, 220, 0.92);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-shadow: 0 0 8px rgba(82, 221, 100, 0.34);
    white-space: nowrap;
    pointer-events: none;
    z-index: 8;
}

.stage-select-screen.stage-controller-active .stage-hotspot.stage-controller-selected .stage-hotspot-effect {
    inset: 0;
    opacity: 1;
    display: block;
    z-index: 8;
}

.stage-select-screen.stage-controller-active .stage-hotspot.stage-controller-selected .stage-hotspot-effect::before,
.stage-select-screen.stage-controller-active .stage-special-node.stage-controller-selected::before {
    content: attr(data-controller-label);
    position: absolute;
    left: 50%;
    top: -36px;
    transform: translateX(-50%);
    min-width: max-content;
    padding: 5px 14px;
    border: 1px solid rgba(126, 255, 156, 0.34);
    border-radius: 999px;
    background: rgba(4, 12, 14, 0.72);
    color: rgba(214, 255, 220, 0.94);
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 1.15vw, 1.28rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-shadow: 0 0 8px rgba(82, 221, 100, 0.34);
    white-space: nowrap;
    pointer-events: none;
    z-index: 8;
}

.stage-special-node.stage-controller-selected {
    filter:
        brightness(1.08)
        drop-shadow(0 0 5px rgba(126, 255, 156, 0.56))
        drop-shadow(0 0 14px rgba(82, 221, 100, 0.34)) !important;
    transform: scale(1.04);
}

.stage-hotspot-red::before {
    inset: -32% -46%;
    background:
        radial-gradient(ellipse at center, rgba(170, 34, 28, 0.36) 0%, rgba(82, 8, 8, 0.28) 34%, rgba(20, 6, 8, 0) 72%);
    filter: blur(8px);
    transform: translateY(9%) scale(1.03);
    animation: monumentAuraPulse 2.8s ease-in-out infinite;
}

.stage-hotspot-red::after {
    inset: -40% -34%;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(24, 0, 0, 0.52) 0%, rgba(40, 2, 8, 0.28) 42%, rgba(0, 0, 0, 0) 78%);
    filter: blur(7px);
    transform: translateY(14%) scale(1.02);
    animation: monumentAuraDrift 3.6s ease-in-out infinite;
}

@keyframes monumentAuraPulse {
    0%, 100% { opacity: 0.52; transform: scale(0.94); }
    50% { opacity: 0.9; transform: scale(1.05); }
}

@keyframes monumentAuraDrift {
    0%, 100% { opacity: 0.48; transform: translateY(0) scale(0.98); }
    50% { opacity: 0.78; transform: translateY(-2px) scale(1.06); }
}

@keyframes revockHousePulse {
    0%, 100% { opacity: 0.36; transform: scale(0.9); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes stageControllerSelectedPulse {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-1px) scale(1.025); }
}

@media (max-width: 900px) {
    .revock-home-actor {
        display: none;
    }

    .tutorial-dialog-panel.revock-home-panel {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 20px);
        bottom: 12px;
        padding: 12px 14px 22px;
    }

    .tutorial-dialog-panel.revock-home-panel.revock-home-panel-choices {
        left: 12px;
        transform: none;
        width: min(380px, calc(100% - 24px));
        bottom: 12px;
        padding: 12px 14px 22px;
    }

    .tutorial-dialog-panel.ending-sequence-panel {
        width: calc(100vw - 20px);
        bottom: 12px;
        padding: 12px 14px 22px;
    }
}

@keyframes stageMiasmaDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.72;
    }
    50% {
        transform: translate3d(2.3%, -2.7%, 0) scale(1.08);
        opacity: 0.98;
    }
}

@keyframes stageMiasmaWave {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.54;
    }
    50% {
        transform: translate3d(-2.1%, 2.2%, 0);
        opacity: 0.86;
    }
}

.stage-select-back-btn {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 3;
    min-width: 120px;
    padding: 8px 12px;
    border: 1px solid rgba(222, 186, 104, 0.6);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(71, 50, 18, 0.84), rgba(32, 20, 10, 0.92));
    color: #f2ddb1;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

.stage-info-modal {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: block;
    pointer-events: none;
}

.stage-info-modal.hidden {
    display: none;
}

.stage-info-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 8, 16, 0.5);
    pointer-events: auto;
}

.stage-info-panel {
    position: relative;
    z-index: 1;
    width: min(620px, 86vw);
    border: 1px solid rgba(232, 174, 110, 0.52);
    border-radius: 14px;
    padding: 18px 20px 16px;
    background:
        linear-gradient(180deg, rgba(41, 17, 13, 0.92), rgba(18, 10, 12, 0.92));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
    color: #f3e2c9;
    pointer-events: auto;
    text-align: center;
}

.stage-info-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.2rem, 2.1vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f6cf90;
}

.stage-info-subtitle {
    margin-top: 4px;
    color: rgba(248, 224, 189, 0.9);
    font-size: 0.95rem;
}

.stage-info-body {
    margin-top: 14px;
    line-height: 1.7;
    font-size: 0.98rem;
    color: rgba(242, 233, 221, 0.94);
}

.stage-info-actions {
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.stage-info-btn {
    min-width: 142px;
    border: 1px solid rgba(234, 176, 104, 0.68);
    border-radius: 10px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(88, 49, 22, 0.88), rgba(44, 24, 12, 0.94));
    color: #f3e0b7;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.stage-info-btn:hover {
    filter: brightness(1.1);
}

.stage-info-btn.stage-info-controller-selected {
    color: #8cff9d;
    border-color: rgba(126, 255, 156, 0.86);
    box-shadow:
        0 0 0 1px rgba(126, 255, 156, 0.28),
        0 0 22px rgba(82, 221, 100, 0.32),
        inset 0 1px 0 rgba(224, 255, 210, 0.14);
    text-shadow: 0 0 10px rgba(82, 255, 118, 0.62);
    filter: brightness(1.1);
}

#stageInfoStartBtn {
    min-width: 220px;
    font-size: 1.18rem;
    padding: 12px 20px;
}

.stage-info-modal.side-open .stage-info-backdrop {
    display: none;
}

.stage-info-modal.side-open .stage-info-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(760px, 56vw);
    border-radius: 0;
    border-left: 1px solid rgba(232, 174, 110, 0.52);
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    animation: stageInfoSlideIn 260ms ease-out forwards;
}

.stage-info-modal.side-open .stage-info-actions {
    margin-top: auto;
    padding-top: 18px;
}

@keyframes stageInfoSlideIn {
    0% { transform: translateX(105%); }
    100% { transform: translateX(0); }
}

.stage-label-panel {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.stage-debug-modal {
    position: fixed;
    inset: 0;
    z-index: 2005;
}

.stage-debug-modal.hidden {
    display: none;
}

.stage-debug-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.stage-debug-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1080px, 94vw);
    max-height: min(88vh, 900px);
    overflow: auto;
    border: 1px solid rgba(236, 203, 124, 0.48);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(24, 16, 9, 0.96), rgba(14, 11, 8, 0.96));
    color: #f3dfb4;
    padding: 14px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
}

.stage-debug-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.stage-debug-title {
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    letter-spacing: 0.06em;
}

.stage-debug-close-btn,
.stage-debug-action-btn {
    border: 1px solid rgba(220, 190, 112, 0.5);
    border-radius: 8px;
    padding: 7px 12px;
    background: linear-gradient(180deg, rgba(64, 44, 20, 0.9), rgba(24, 18, 10, 0.92));
    color: #f6dfb2;
    cursor: pointer;
}

.stage-debug-action-btn.primary {
    border-color: rgba(110, 196, 156, 0.68);
}

.stage-debug-action-btn.danger {
    border-color: rgba(216, 126, 118, 0.68);
}

.stage-debug-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.stage-debug-row.stage-debug-row-xy {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stage-debug-inline-actions {
    display: flex;
    align-items: end;
    gap: 8px;
}

.stage-debug-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.82rem;
}

.stage-debug-field input,
.stage-debug-field select {
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(220, 192, 124, 0.4);
    background: rgba(14, 10, 8, 0.88);
    color: #f1ddba;
    padding: 4px 8px;
}

.stage-debug-field textarea {
    min-height: 120px;
    border-radius: 8px;
    border: 1px solid rgba(220, 192, 124, 0.4);
    background: rgba(14, 10, 8, 0.88);
    color: #f1ddba;
    padding: 6px 8px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.76rem;
    line-height: 1.35;
}

.stage-debug-exp-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stage-debug-exp-input input {
    flex: 1 1 auto;
}

.stage-debug-exp-input span {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: #f1ddba;
    letter-spacing: 0.04em;
}

.stage-debug-field.stage-debug-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

/* Hide legacy first-reward text field (e.g. "金貨 x...") in stage debug modal */
.stage-debug-field:has(#stageDebugStageRewardFirst) {
    display: none;
}

.stage-debug-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 217, 130, 0), rgba(255, 217, 130, 0.52), rgba(255, 217, 130, 0));
    margin: 10px 0;
}

.stage-debug-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.stage-debug-modal.placement-active .stage-debug-backdrop {
    pointer-events: none;
    background: rgba(0, 0, 0, 0.2);
}

.stage-debug-modal.placement-active {
    pointer-events: none;
}

.stage-debug-modal.placement-active .stage-debug-panel {
    pointer-events: none;
    opacity: 0.16;
    filter: saturate(0.7);
}

.stage-debug-modal.placement-active .stage-debug-placement-confirm {
    pointer-events: auto;
}

.stage-select-map-viewport.debug-placement-active {
    cursor: crosshair;
}

.stage-debug-placement-confirm {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    width: min(320px, 86vw);
    border: 1px solid rgba(255, 221, 146, 0.52);
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(20, 15, 10, 0.96), rgba(14, 10, 8, 0.96));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.stage-debug-placement-confirm.hidden {
    display: none;
}

.stage-debug-placement-confirm-text {
    font-size: 0.86rem;
    margin-bottom: 8px;
}

.stage-debug-placement-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.stage-label-focus {
    position: absolute;
    left: 24%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
    pointer-events: none;
}

.stage-label-focus.hidden {
    display: none;
}

.stage-label-item.stage-label-item-focus {
    animation: none !important;
    opacity: 1;
    transition: transform 1200ms cubic-bezier(0.2, 0.72, 0.22, 1), opacity 1000ms ease;
    will-change: transform, opacity;
}

.stage-label-item.stage-label-item-focus.focus-moving {
    transition: transform 1850ms cubic-bezier(0.16, 0.86, 0.2, 1), opacity 1200ms ease;
}

.stage-label-item.stage-label-item-focus.focus-dropping {
    animation: stageLabelFocusDropIn 760ms cubic-bezier(0.18, 0.88, 0.28, 1) forwards !important;
}

.stage-label-item.stage-label-item-focus.focus-exit-up {
    animation: stageLabelFocusExitUp 520ms cubic-bezier(0.22, 0.72, 0.28, 1) forwards !important;
}

.stage-label-panel.detail-open .stage-label-list {
    width: min(1400px, 94vw);
    left: 50%;
    transform: translateX(-50%);
}

.stage-label-panel.detail-open .stage-label-list.has-final-stage {
    width: min(1700px, 98vw);
}

.stage-label-panel.detail-open .stage-label-item {
    pointer-events: none;
    transition: opacity 1200ms ease, filter 1200ms ease;
}

.stage-label-item.faded {
    opacity: 0 !important;
    filter: grayscale(0.75) brightness(0.5);
    transition: opacity 680ms ease, filter 680ms ease;
}

.stage-label-item.selected-hidden {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 520ms ease;
}

.stage-label-item.selected-exit-up {
    pointer-events: none;
    animation: stageLabelExitUp 560ms cubic-bezier(0.22, 0.72, 0.28, 1) forwards;
}

.stage-label-panel.detail-closing .stage-label-item {
    pointer-events: auto;
}

.stage-label-panel.detail-closing .stage-label-list {
    width: min(1400px, 94vw);
    left: 50%;
    transform: translateX(-50%);
    transition: none;
}

.stage-label-panel.detail-closing .stage-label-list.has-final-stage {
    width: min(1700px, 98vw);
}

.stage-label-panel.detail-closing .stage-label-item.faded {
    opacity: 0 !important;
    filter: grayscale(0.75) brightness(0.5);
}

.stage-label-panel.detail-closing .stage-label-item.restoring {
    transition: opacity 1200ms ease, filter 1200ms ease;
    opacity: 1 !important;
    filter: none !important;
}

.stage-label-panel.detail-closing .stage-label-item.returning {
    opacity: 1 !important;
    filter: none !important;
    animation: stageLabelReturnFromTop 760ms cubic-bezier(0.18, 0.88, 0.28, 1) forwards;
}

.stage-label-back-btn {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    min-width: 138px;
    border: 1px solid rgba(226, 185, 112, 0.64);
    border-radius: 10px;
    padding: 7px 12px;
    background: linear-gradient(180deg, rgba(88, 58, 22, 0.88), rgba(42, 24, 12, 0.9));
    color: #f4e0ba;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    cursor: pointer;
    pointer-events: auto;
}

.stage-label-back-btn:hover {
    filter: brightness(1.08);
}

.stage-label-list {
    position: absolute;
    left: 50%;
    top: 220px !important;
    transform: translateX(-50%);
    width: min(1400px, 94vw);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
    align-items: start;
    column-gap: clamp(40px, 4.5vw, 96px);
    row-gap: clamp(48px, 6.2vh, 108px);
    pointer-events: auto;
}

.stage-label-list.has-final-stage {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(1700px, 98vw);
    column-gap: clamp(12px, 2.2vw, 44px);
}

.stage-label-list.has-final-stage .stage-label-item {
    width: clamp(232px, 17.8vw, 336px);
}

.stage-label-item {
    border: 0;
    width: clamp(280px, 23.5vw, 408px);
    aspect-ratio: 480 / 856;
    min-height: 0;
    padding: 0 18px;
    background:
        linear-gradient(rgba(10, 8, 7, 0.04), rgba(10, 8, 7, 0.04)),
        var(--stage-boss-image, none) center calc(27% + 1px) / 34% auto no-repeat,
        url('material/Tapestry.png') center top / 100% 102% no-repeat;
    color: #f6e5c2;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.25rem, 1.65vw, 1.82rem);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.86);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
    position: relative;
    opacity: 0;
    transform: translateY(-260px);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.46));
}

.stage-label-item:focus,
.stage-label-item:focus-visible {
    outline: none;
}

.stage-label-name {
    display: inline-flex;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translateX(-50%);
    width: 72%;
    max-width: 72%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.42));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    color: #fff1cb;
    -webkit-text-stroke: 0;
    text-shadow: none;
    line-height: 1.16;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.stage-label-name.is-long {
    font-size: clamp(1.04rem, 1.28vw, 1.42rem);
    line-height: 1.12;
    padding-inline: 9px;
}

.stage-label-name.is-very-long {
    font-size: clamp(0.9rem, 1.08vw, 1.16rem);
    line-height: 1.08;
    padding-inline: 8px;
}

.stage-label-item.stage-controller-selected {
    filter:
        brightness(1.12)
        drop-shadow(0 0 10px rgba(126, 255, 156, 0.6))
        drop-shadow(0 0 24px rgba(82, 221, 100, 0.38));
}

.stage-label-item.stage-controller-selected .stage-label-name {
    color: #8cff9d;
    text-shadow:
        0 0 8px rgba(82, 255, 118, 0.82),
        0 0 18px rgba(82, 221, 100, 0.54),
        0 2px 5px rgba(0, 0, 0, 0.86);
}

.stage-label-clear-badge {
    position: absolute;
    left: 50%;
    bottom: 14%;
    width: clamp(108px, 36%, 168px);
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    background: url('material/Clear.png') center center / contain no-repeat;
    filter:
        drop-shadow(0 6px 10px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 8px rgba(161, 18, 18, 0.28));
    pointer-events: none;
    z-index: 2;
}

.stage-label-item.stage-label-item-final .stage-label-clear-badge {
    width: clamp(118px, 34%, 176px);
    bottom: 13%;
}

.stage-label-panel.show:not(.drop-played) .stage-label-item {
    animation: stageLabelDrop 680ms cubic-bezier(0.18, 0.88, 0.28, 1) forwards;
    animation-delay: calc(var(--drop-index, 0) * 120ms);
}

.stage-label-panel.labels-ready .stage-label-item {
    opacity: 1;
    transform: translateY(0);
}

.stage-label-item.stage-label-item-final {
    grid-column: 2 / span 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    z-index: 3;
    width: clamp(306px, 25.5vw, 462px);
    aspect-ratio: 480 / 856;
    min-height: 0;
    opacity: 0;
    transform: translateY(-340px);
}

.stage-label-list.has-final-stage .stage-label-item.stage-label-item-final {
    grid-column: auto;
    grid-row: auto;
    width: clamp(246px, 18.8vw, 352px);
}

.stage-label-panel.show:not(.drop-played) .stage-label-item.stage-label-item-final {
    animation: stageLabelFinalDrop 760ms cubic-bezier(0.18, 0.88, 0.28, 1) forwards;
    animation-delay: 620ms;
}

.stage-label-item:hover {
    filter: brightness(1.08) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.52));
    transform: translateY(-2px);
}

.stage-select-screen.stage-controller-active,
.stage-select-screen.stage-controller-active * {
    cursor: none !important;
}

.stage-select-screen.stage-controller-active .stage-hotspot,
.stage-select-screen.stage-controller-active .stage-special-node,
.stage-select-screen.stage-controller-active .stage-label-item,
.stage-select-screen.stage-controller-active .stage-info-btn,
.stage-select-screen.stage-controller-active .stage-select-back-btn,
.stage-select-screen.stage-controller-active .stage-label-back-btn,
.stage-select-screen.stage-controller-active .stage-select-debug-btn {
    pointer-events: none;
}

.stage-controller-help {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 12;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(126, 255, 156, 0.34);
    border-radius: 8px;
    background: rgba(4, 12, 14, 0.72);
    color: rgba(214, 255, 220, 0.88);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(82, 221, 100, 0.28);
    pointer-events: none;
}

.stage-select-screen.stage-controller-active .stage-controller-help {
    display: flex;
}

.stage-info-section {
    margin-top: 14px;
    text-align: center;
}

.stage-info-section-title {
    margin-bottom: 8px;
    color: #f0c784;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-align: center;
}

.stage-info-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    line-height: 1.45;
}

.stage-info-row .k {
    flex: 0 0 auto;
    color: rgba(240, 216, 176, 0.82);
}

.stage-info-row .v {
    color: #f5e7cf;
}

.stage-info-claimed-value {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 214, 138, 0.8);
    opacity: 0.72;
}

.stage-info-claimed-note {
    display: inline-block;
    margin-left: 6px;
    color: rgba(240, 216, 176, 0.76);
    font-size: 0.92em;
}

.stage-info-row-encounter {
    margin-bottom: 8px;
}

.stage-info-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    justify-content: center;
    gap: 6px 28px;
    width: 100%;
    margin: 0 auto;
}

.stage-info-metrics-grid .stage-info-row {
    margin-bottom: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 2px;
    text-align: left;
    min-width: 0;
}

.stage-info-metrics-grid .stage-info-row .k {
    white-space: nowrap;
}

.stage-info-metrics-grid .stage-info-row .v {
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
}

.stage-boss-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(236, 190, 117, 0.36);
    border-radius: 10px;
    padding: 12px;
    background: rgba(25, 17, 14, 0.45);
}

.stage-boss-card-thumb {
    width: clamp(320px, 30vw, 460px);
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: center/contain no-repeat;
    background-color: rgba(8, 8, 12, 0.42);
    border: 1px solid rgba(237, 191, 118, 0.45);
}

.stage-boss-card-name {
    color: #f5e8cf;
    font-weight: 700;
    font-size: 1.12rem;
    text-align: center;
}

.stage-boss-card-empty {
    color: rgba(242, 222, 183, 0.74);
    font-size: 0.9rem;
}

.stage-clear-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.stage-clear-portrait {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 1px solid rgba(236, 190, 117, 0.5);
    background-color: rgba(17, 10, 7, 0.72);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.36);
}

.stage-clear-portrait-empty {
    min-width: 64px;
    min-height: 64px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(236, 190, 117, 0.35);
    background: rgba(47, 29, 18, 0.56);
    color: rgba(245, 231, 207, 0.9);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.stage-clear-chip {
    padding: 4px 10px;
    border: 1px solid rgba(236, 190, 117, 0.44);
    border-radius: 999px;
    background: rgba(47, 29, 18, 0.56);
    color: #f5e7cf;
    font-size: 0.86rem;
}

.stage-clear-empty {
    color: rgba(242, 222, 183, 0.72);
    font-size: 0.9rem;
}

@keyframes stageLabelDrop {
    0% {
        opacity: 0;
        transform: translateY(-260px);
    }
    72% {
        opacity: 1;
        transform: translateY(16px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stageLabelFinalDrop {
    0% {
        opacity: 0;
        transform: translateY(-340px);
    }
    72% {
        opacity: 1;
        transform: translateY(22px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px) {
    .stage-label-list {
        top: 160px !important;
        transform: translateX(-50%);
        width: min(720px, 95vw);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 8px;
        row-gap: 12px;
    }
    .stage-label-item {
        width: clamp(160px, 26vw, 240px);
        min-height: 250px;
        font-size: clamp(1.05rem, 2.2vw, 1.38rem);
    }
    .stage-label-item.stage-label-item-final {
        width: clamp(178px, 30vw, 264px);
        min-height: 278px;
    }
    .stage-label-list.has-final-stage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: min(940px, 98vw);
        column-gap: 8px;
    }
    .stage-label-list.has-final-stage .stage-label-item {
        width: clamp(154px, 28vw, 236px);
    }
    .stage-label-list.has-final-stage .stage-label-item.stage-label-item-final {
        grid-column: 2;
        width: clamp(170px, 31vw, 250px);
    }
    .stage-info-modal.side-open .stage-info-panel {
        right: 0;
        top: 0;
        bottom: 0;
        width: min(520px, 74vw);
        padding: 18px 14px 14px;
    }
    .stage-info-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
    }
    .stage-label-focus {
        left: 16%;
    }
}

@keyframes stageGlowPulse {
    0%, 100% { transform: scale(0.88); opacity: 0.78; }
    50% { transform: scale(1.05); opacity: 1; }
}

@keyframes stageGlowWave {
    0% { transform: scale(0.8); opacity: 0.82; }
    70% { transform: scale(1.45); opacity: 0.16; }
    100% { transform: scale(1.52); opacity: 0; }
}

@keyframes stageLabelExitUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-220px);
    }
}

@keyframes stageLabelReturnFromTop {
    0% {
        opacity: 0;
        transform: translateY(-220px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stageLabelFocusDropIn {
    0% {
        opacity: 0;
        transform: translateY(-220px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stageLabelFocusExitUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-220px);
    }
}

.character-book {
    position: absolute;
    inset: 0;
    padding: clamp(24px, 3.2vw, 42px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.character-book-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.15rem, 1.8vw, 1.62rem);
    color: #e2c87a;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

.character-portrait-list {
    --character-slot-width: clamp(290px, 22.8vw, 420px);
    --char-slot-1-offset-x: 0px;
    --char-slot-2-offset-x: -56px;
    --char-slot-3-offset-x: 0px;
    --char-slot-4-offset-x: -56px;
    display: grid;
    grid-template-columns: repeat(4, var(--character-slot-width));
    align-items: flex-start;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    padding-left: clamp(64px, 5.4vw, 150px);
    margin-top: -238px;
}

.character-portrait-list.page-turning-out {
    pointer-events: none;
    animation: characterPageTurnOut 220ms ease-in forwards;
}

.character-portrait-list.page-turning-in {
    pointer-events: none;
    animation: characterPageTurnIn 280ms cubic-bezier(.18, .82, .24, 1) forwards;
}

.character-portrait-list.page-turning-out .character-portrait-btn,
.character-portrait-list.page-turning-in .character-portrait-btn {
    will-change: transform, opacity, filter;
}

.character-portrait-list.page-turning-out .character-portrait-btn {
    animation: characterBookmarkLift 220ms ease-in forwards;
}

.character-portrait-list.page-turning-in .character-portrait-btn {
    animation: characterBookmarkDrop 280ms cubic-bezier(.18, .82, .24, 1) forwards;
}

.character-portrait-list.page-turning-out .character-portrait-btn:nth-child(1),
.character-portrait-list.page-turning-in .character-portrait-btn:nth-child(1) {
    animation-delay: 0ms;
}

.character-portrait-list.page-turning-out .character-portrait-btn:nth-child(2),
.character-portrait-list.page-turning-in .character-portrait-btn:nth-child(2) {
    animation-delay: 24ms;
}

.character-portrait-list.page-turning-out .character-portrait-btn:nth-child(3),
.character-portrait-list.page-turning-in .character-portrait-btn:nth-child(3) {
    animation-delay: 48ms;
}

.character-portrait-list.page-turning-out .character-portrait-btn:nth-child(4),
.character-portrait-list.page-turning-in .character-portrait-btn:nth-child(4) {
    animation-delay: 72ms;
}

.character-portrait-btn:nth-child(1) {
    --char-offset-x: var(--char-slot-1-offset-x);
}

.character-portrait-btn:nth-child(2) {
    --char-offset-x: var(--char-slot-2-offset-x);
}

.character-portrait-btn:nth-child(3) {
    --char-offset-x: var(--char-slot-3-offset-x);
}

.character-portrait-btn:nth-child(4) {
    --char-offset-x: var(--char-slot-4-offset-x);
}

.character-portrait-btn {
    position: relative;
    width: var(--character-slot-width);
    border: none;
    border-radius: 10px;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transform: translateX(var(--char-offset-x, 0px));
    transition: transform 0.24s ease, filter 0.24s ease;
}

.character-portrait-btn:hover,
.character-portrait-btn.active,
.character-portrait-btn.character-controller-selected {
    transform: translateX(var(--char-offset-x, 0px)) translateY(-2px);
    filter: brightness(1.08);
}

.character-book-pagination {
    position: absolute;
    right: clamp(42px, 4.4vw, 96px);
    bottom: clamp(34px, 4vh, 68px);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

.character-book-page-indicator {
    min-width: 114px;
    padding: 8px 14px;
    border: 1px solid rgba(226, 200, 122, 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(46, 28, 15, 0.86), rgba(20, 11, 6, 0.72));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
    color: #f0dcad;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-align: center;
}

.character-book-page-flip-btn {
    position: relative;
    min-width: 168px;
    padding: 11px 18px;
    border: 1px solid rgba(226, 200, 122, 0.55);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(109, 73, 39, 0.92), rgba(67, 41, 20, 0.94)),
        linear-gradient(90deg, rgba(255, 239, 196, 0.12), rgba(255, 239, 196, 0));
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 186, 0.22),
        0 12px 22px rgba(0, 0, 0, 0.28);
    color: #fff0c3;
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.character-book-page-flip-btn.has-new-page {
    position: relative;
}

.character-book-page-flip-btn.has-new-page::before {
    content: 'NEW';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 30px);
    transform: translateX(-50%);
    padding: 3px 12px 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 228, 160, 0.72);
    background: linear-gradient(180deg, rgba(168, 34, 34, 0.96), rgba(118, 18, 18, 0.96));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    color: #fff1bf;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    pointer-events: none;
}

body.controller-input-active .character-select-screen.character-controller-active:not(.deck-preview-open):not(.deck-scene-open) #characterPagePrevBtn::after,
body.controller-input-active .character-select-screen.character-controller-active:not(.deck-preview-open):not(.deck-scene-open) #characterPageFlipBtn::after {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    min-width: 54px;
    padding: 5px 12px 6px;
    border: 1px solid rgba(40, 27, 11, 0.72);
    border-radius: 999px;
    background: rgba(232, 206, 148, 0.82);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 245, 216, 0.45);
    color: rgba(7, 5, 2, 0.96);
    font-family: 'Cinzel', serif;
    font-size: 1.22rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-shadow:
        0 1px 0 rgba(255, 240, 196, 0.38),
        0 0 5px rgba(255, 235, 170, 0.24);
    pointer-events: none;
}

body.controller-input-active .character-select-screen.character-controller-active:not(.deck-preview-open):not(.deck-scene-open) #characterPagePrevBtn::after {
    content: 'L1';
}

body.controller-input-active .character-select-screen.character-controller-active:not(.deck-preview-open):not(.deck-scene-open) #characterPageFlipBtn::after {
    content: 'R1';
}

body.controller-input-active .character-select-screen.character-controller-active.character-controller-delete-available:not(.deck-preview-open) .character-controller-delete-hint {
    position: absolute;
    left: clamp(28px, 3vw, 58px);
    bottom: clamp(28px, 3.2vh, 48px);
    display: block;
    z-index: 8;
    max-width: min(520px, 44vw);
    padding: 0;
    color: rgba(236, 255, 231, 0.92);
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    font-weight: 700;
    font-size: clamp(0.94rem, 1.08vw, 1.12rem);
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-shadow:
        0 0 7px rgba(118, 255, 145, 0.72),
        0 0 16px rgba(72, 218, 96, 0.48),
        0 2px 8px rgba(0, 0, 0, 0.86);
    pointer-events: none;
    animation: characterControllerHintPulse 2.4s ease-in-out infinite;
}

.character-controller-delete-hint {
    display: none;
}

@keyframes characterControllerHintPulse {
    0%,
    100% {
        opacity: 0.58;
        color: rgba(202, 255, 196, 0.72);
        filter: brightness(0.92);
    }
    50% {
        opacity: 1;
        color: rgba(255, 255, 246, 0.96);
        filter: brightness(1.16);
    }
}

.character-book-page-flip-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.character-book-page-flip-btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.character-book-page-flip-btn.is-hidden {
    display: none;
}

.character-label {
    width: 100%;
    aspect-ratio: 480 / 1250;
    position: relative;
    background: url('material/Label.png') center/contain no-repeat;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
}

.character-label-new-badge {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -100%);
    padding: 3px 12px 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 229, 167, 0.78);
    background: linear-gradient(180deg, rgba(182, 38, 38, 0.98), rgba(128, 20, 20, 0.96));
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.26),
        0 0 16px rgba(255, 118, 84, 0.22);
    color: #fff2c9;
    font-family: 'Cinzel', serif;
    font-size: clamp(0.82rem, 1.04vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.character-original-delete-btn {
    position: absolute;
    right: 22%;
    bottom: 11.4%;
    z-index: 4;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(130, 34, 28, 0.88);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #6f1b18, #250806);
    color: #ffe0c0;
    font-size: 20px;
    line-height: 24px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

.character-original-delete-btn:hover {
    filter: brightness(1.18);
}

.character-original-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.68);
}

.character-original-delete-panel {
    width: min(440px, 92vw);
    padding: 24px;
    border: 1px solid rgba(193, 143, 76, 0.72);
    background: linear-gradient(180deg, rgba(12, 17, 24, 0.98), rgba(3, 6, 10, 0.98));
    color: #ead8af;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 224, 160, 0.1);
}

.character-original-delete-title {
    color: #f1ca84;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 12px;
}

.character-original-delete-body {
    white-space: pre-line;
    line-height: 1.7;
}

.character-original-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.character-original-delete-actions button {
    min-width: 112px;
    min-height: 38px;
    border: 1px solid rgba(193, 143, 76, 0.65);
    background: rgba(8, 14, 24, 0.9);
    color: #f2dfb8;
    font-weight: 800;
    cursor: pointer;
}

.character-label-image {
    position: absolute;
    left: 33%;
    top: 32.5%;
    width: 34%;
    aspect-ratio: 1 / 1;
    border-radius: 3px;
    background-size: cover;
    background-position: center;
    background-color: rgba(14, 18, 26, 0.68);
}

.character-label-name {
    position: absolute;
    left: 11.6%;
    right: 10.2%;
    top: 48.9%;
    min-height: 10.6%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    text-align: center;
    color: #f2f4f8;
    font-size: clamp(1.16rem, 1.72vw, 1.64rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.character-portrait-btn.character-controller-selected .character-label-name {
    z-index: 5;
    color: #ecffe7;
    text-shadow:
        0 0 7px rgba(112, 255, 145, 0.88),
        0 0 16px rgba(74, 238, 102, 0.62),
        0 2px 6px rgba(0, 0, 0, 0.58);
    animation: characterNameControllerGlow 1.6s ease-in-out infinite;
}

.character-portrait-btn.character-controller-selected .character-label-name::before {
    content: '';
    position: absolute;
    inset: 14% 3% 10%;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(82, 221, 100, 0.24), rgba(82, 221, 100, 0) 72%);
    filter: blur(2px);
    pointer-events: none;
}

.character-portrait-btn.character-confirm-holding .character-label::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 64%;
    z-index: 7;
    width: clamp(54px, 4.4vw, 76px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(18, 12, 5, 0.96) 0 45%, transparent 47%),
        conic-gradient(
            rgba(6, 4, 2, 0.98) var(--character-confirm-hold-progress, 0%),
            rgba(6, 4, 2, 0.18) 0
        );
    box-shadow:
        0 0 0 2px rgba(255, 230, 174, 0.18),
        0 10px 20px rgba(0, 0, 0, 0.36);
    pointer-events: none;
}

@keyframes characterNameControllerGlow {
    0%,
    100% {
        filter: brightness(0.96);
    }
    50% {
        filter: brightness(1.18);
    }
}

.character-label-name.is-shifted-left {
    transform: translateX(-4px);
}

.character-label-name.is-long {
    font-size: clamp(0.98rem, 1.44vw, 1.32rem);
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.character-label-name.is-very-long {
    font-size: clamp(0.76rem, 1.04vw, 0.96rem);
    letter-spacing: 0.01em;
    line-height: 1.03;
}

.character-label-sub {
    position: absolute;
    left: calc(19.8% + 10px);
    right: calc(20% + 10px);
    top: 55.9%;
    bottom: 21.6%;
    display: grid;
    align-content: start;
    gap: clamp(5px, 0.65vw, 8px);
    padding:
        clamp(12px, 1.1vw, 16px)
        clamp(10px, 0.95vw, 14px)
        clamp(8px, 0.8vw, 10px);
    border: 1px solid rgba(88, 63, 34, 0.48);
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(28, 18, 11, 0.26), rgba(10, 7, 5, 0.1)),
        linear-gradient(90deg, rgba(255, 242, 212, 0.04), rgba(255, 242, 212, 0));
    box-shadow:
        inset 0 0 0 1px rgba(245, 222, 175, 0.05),
        inset 0 12px 18px rgba(255, 244, 224, 0.025),
        0 3px 10px rgba(0, 0, 0, 0.08);
    text-align: left;
    overflow: hidden;
}

.character-label-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: clamp(3px, 0.42vw, 6px);
}

.character-label-stat-row:not(:last-child) {
    border-bottom: 1px solid rgba(78, 56, 30, 0.26);
}

.character-label-stat-key {
    color: rgba(242, 220, 177, 0.72);
    font-size: clamp(0.66rem, 0.78vw, 0.82rem);
    letter-spacing: 0.13em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);
    white-space: nowrap;
}

.character-label-stat-value {
    color: #fbf0d2;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.02rem, 1.26vw, 1.34rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
    white-space: nowrap;
}

.character-label-stat-value-requirement {
    max-width: 66%;
    font-size: clamp(0.72rem, 0.88vw, 0.92rem);
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-align: right;
    white-space: normal;
}

body[data-language="en"] .character-label-name.is-very-long ~ .character-label-sub {
    left: calc(18.6% + 8px);
    right: calc(22.6% + 12px);
    gap: clamp(4px, 0.52vw, 7px);
    padding-left: clamp(8px, 0.72vw, 11px);
    padding-right: clamp(8px, 0.72vw, 11px);
}

body[data-language="en"] .character-label-name.is-very-long ~ .character-label-sub .character-label-stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(42px, max-content);
    gap: 6px;
}

body[data-language="en"] .character-label-name.is-very-long ~ .character-label-sub .character-label-stat-key {
    min-width: 0;
    font-size: clamp(0.58rem, 0.68vw, 0.72rem);
    letter-spacing: 0.08em;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-language="en"] .character-label-name.is-very-long ~ .character-label-sub .character-label-stat-value {
    min-width: 0;
    max-width: 100%;
    justify-self: end;
    font-size: clamp(0.9rem, 1.02vw, 1.12rem);
    letter-spacing: 0.01em;
    text-align: right;
}

body[data-language="en"] .character-label-name.is-very-long ~ .character-label-sub .character-label-stat-value-requirement {
    max-width: 100%;
    font-size: clamp(0.62rem, 0.72vw, 0.78rem);
    line-height: 1.02;
    white-space: normal;
}

.character-level-power-shell {
    position: relative;
    display: grid;
    align-content: start;
    gap: 4px;
    margin-top: 0;
    text-align: left;
}

.character-clear-badge {
    position: absolute;
    left: 35%;
    bottom: 10%;
    width: 30%;
    aspect-ratio: 1 / 1;
    background: url('material/Clear.png') center/contain no-repeat;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.34));
    opacity: 0.97;
    pointer-events: none;
    transform: rotate(-12deg);
}

@keyframes characterPageTurnOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-42px);
    }
}

@keyframes characterPageTurnIn {
    0% {
        opacity: 0;
        transform: translateY(-36px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes characterBookmarkLift {
    0% {
        opacity: 1;
        transform: translateX(var(--char-offset-x, 0px)) translateY(0) scale(1);
        filter: brightness(1);
    }
    100% {
        opacity: 0;
        transform: translateX(var(--char-offset-x, 0px)) translateY(-160px) scale(0.98);
        filter: brightness(0.88);
    }
}

@keyframes characterBookmarkDrop {
    0% {
        opacity: 0;
        transform: translateX(var(--char-offset-x, 0px)) translateY(-190px) scale(0.985);
        filter: brightness(0.9);
    }
    72% {
        opacity: 1;
        transform: translateX(var(--char-offset-x, 0px)) translateY(10px) scale(1.01);
        filter: brightness(1.03);
    }
    100% {
        opacity: 1;
        transform: translateX(var(--char-offset-x, 0px)) translateY(0) scale(1);
        filter: brightness(1);
    }
}

.character-level-power-difficulty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.character-level-power-difficulty-key,
.character-level-power-panel-key {
    color: rgba(242, 220, 177, 0.72);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}

.character-level-power-difficulty-value,
.character-level-power-panel-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(240, 217, 166, 0.28);
    background: rgba(20, 12, 8, 0.42);
    color: #fbf0d2;
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

@keyframes mapSelectablePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.92;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.character-level-power-difficulty-value.difficulty-easy,
.character-level-power-panel-value.difficulty-easy {
    color: #d9ffcf;
    border-color: rgba(168, 232, 153, 0.34);
}

.character-level-power-difficulty-value.difficulty-normal,
.character-level-power-panel-value.difficulty-normal {
    color: #ffe8bc;
    border-color: rgba(240, 211, 150, 0.32);
}

.character-level-power-difficulty-value.difficulty-hard,
.character-level-power-panel-value.difficulty-hard {
    color: #ffc5b0;
    border-color: rgba(231, 143, 118, 0.34);
}

.character-level-power-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid rgba(204, 167, 96, 0.38);
    border-radius: 999px;
    padding: 7px 11px;
    background:
        linear-gradient(180deg, rgba(76, 44, 18, 0.42), rgba(34, 19, 8, 0.34)),
        rgba(0, 0, 0, 0.18);
    color: #f7ebcf;
    font-family: 'Cinzel', serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

.character-level-power-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    border-color: rgba(232, 197, 130, 0.48);
}

.character-level-power-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
}

.character-level-power-modal.hidden {
    display: none;
}

.character-level-power-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 5, 3, 0.56);
    backdrop-filter: blur(4px);
}

.character-level-power-modal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(780px, 92vw);
    max-height: min(82vh, 920px);
    padding: 22px 22px 18px;
    border: 1px solid rgba(202, 164, 101, 0.4);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(56, 33, 18, 0.97), rgba(24, 14, 9, 0.95)),
        rgba(17, 10, 6, 0.96);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 240, 206, 0.05);
    overflow: hidden;
}

.character-level-power-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.character-level-power-modal-title {
    color: #fdf0cf;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.character-level-power-modal-subtitle {
    margin-top: 4px;
    color: rgba(245, 226, 191, 0.78);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.character-level-power-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(234, 210, 164, 0.26);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: #f5e3bd;
    font-size: 1.08rem;
    cursor: pointer;
}

.character-level-power-modal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.character-level-power-modal-key {
    color: rgba(242, 220, 177, 0.72);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
}

.character-level-power-modal-list {
    display: grid;
    gap: 10px;
    max-height: min(58vh, 640px);
    overflow: auto;
    padding-right: 4px;
}

.character-level-power-modal-row {
    padding: 12px 14px;
    border: 1px solid rgba(200, 166, 104, 0.16);
    border-radius: 14px;
    background: rgba(255, 247, 229, 0.03);
}

.character-level-power-modal-row.unlocked {
    border-color: rgba(225, 194, 133, 0.28);
    background: rgba(255, 247, 229, 0.06);
}

.character-level-power-modal-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.character-level-power-modal-row-level,
.character-level-power-modal-row-state {
    color: rgba(246, 226, 187, 0.82);
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.character-level-power-modal-row-body {
    display: grid;
    gap: 8px;
}

.character-level-power-modal-reward {
    padding: 10px 11px;
    border-radius: 10px;
    background: rgba(255, 248, 232, 0.04);
}

.character-level-power-modal-reward.empty {
    color: rgba(245, 226, 191, 0.56);
    font-style: italic;
}

.character-level-power-modal-reward-title {
    color: #fff0cf;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.character-level-power-modal-reward-desc {
    margin-top: 4px;
    color: rgba(250, 236, 208, 0.82);
    font-size: 0.82rem;
    line-height: 1.5;
}

.character-level-power-panel {
    position: absolute;
    left: calc(100% + 18px);
    top: -8px;
    z-index: 30;
    width: min(340px, 28vw);
    max-height: min(420px, 62vh);
    overflow: auto;
    border: 1px solid rgba(196, 160, 95, 0.38);
    border-radius: 16px;
    padding: 14px 14px 12px;
    background:
        linear-gradient(180deg, rgba(54, 31, 16, 0.96), rgba(25, 14, 8, 0.94)),
        rgba(15, 9, 5, 0.94);
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 239, 206, 0.05);
}

.character-level-power-panel.hidden {
    display: none;
}

.character-level-power-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.character-level-power-panel-title {
    color: #fbf0d2;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.character-level-power-close {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(230, 208, 164, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: #f5e3bd;
    font-size: 1rem;
    cursor: pointer;
}

.character-level-power-panel-difficulty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.character-level-power-list {
    display: grid;
    gap: 10px;
}

.character-level-power-entry {
    padding: 10px 11px;
    border: 1px solid rgba(200, 166, 104, 0.16);
    border-radius: 12px;
    background: rgba(255, 247, 229, 0.03);
}

.character-level-power-entry.unlocked {
    border-color: rgba(225, 194, 133, 0.28);
    background: rgba(255, 247, 229, 0.06);
}

.character-level-power-entry-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.character-level-power-entry-level,
.character-level-power-entry-state {
    color: rgba(246, 226, 187, 0.78);
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.character-level-power-entry-title {
    color: #fff0cf;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.character-level-power-entry-desc {
    margin-top: 4px;
    color: rgba(250, 236, 208, 0.82);
    font-size: 0.8rem;
    line-height: 1.45;
}

.character-level-power-empty {
    color: rgba(248, 232, 202, 0.74);
    font-size: 0.84rem;
    line-height: 1.5;
}

@media (max-width: 1200px) {
    .character-level-power-panel {
        left: 50%;
        top: calc(100% + 12px);
        width: min(340px, 78vw);
        transform: translateX(-50%);
    }
}

.character-empty {
    color: #f2f2f2;
    opacity: 0.82;
    padding: 10px 4px;
}

.character-deck-panel {
    position: relative;
    z-index: 1;
    width: min(1280px, 92vw);
    height: min(760px, 86vh);
    max-height: 86vh;
    border: 1px solid rgba(209, 178, 98, 0.34);
    border-radius: 12px;
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(8, 14, 34, 0.9), rgba(7, 12, 28, 0.9)),
        url('material/StageSelect.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.56);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.character-deck-panel.is-custom-mode {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
}

.character-deck-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.character-deck-topbar-main {
    min-width: 0;
    flex: 1 1 auto;
}

.character-deck-title {
    font-size: 1.34rem;
    color: #f6e0a0;
    font-weight: 700;
    margin-bottom: 8px;
}

.character-deck-info {
    min-height: 22px;
    margin-bottom: 8px;
    color: #f3dfb3;
    font-size: 1.12rem;
    font-weight: 700;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    row-gap: 10px;
    line-height: 1.35;
    letter-spacing: 0.04em;
    white-space: normal;
    text-align: center;
}

.character-deck-info-core {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 52px;
}

.character-deck-info-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.character-deck-info-message {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    max-width: min(80vw, 760px);
    margin-left: 0;
    margin-top: 0;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
}

.character-deck-controller-help {
    grid-column: 1;
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    max-width: min(96vw, 1120px);
    color: rgba(214, 255, 211, 0.9);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px rgba(82, 221, 100, 0.24);
}

.character-deck-controller-help span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 10px;
    border: 1px solid rgba(126, 255, 156, 0.26);
    border-radius: 999px;
    background: rgba(8, 18, 14, 0.56);
    box-shadow: inset 0 0 10px rgba(126, 255, 156, 0.06);
}

html.controller-input-active .character-deck-panel.is-custom-mode .character-deck-controller-help,
body.controller-input-active .character-deck-panel.is-custom-mode .character-deck-controller-help {
    display: inline-flex;
}

.character-deck-info.warning {
    color: #ff6767;
    text-shadow: 0 0 8px rgba(255, 52, 52, 0.45);
    animation: characterDeckWarnBlink 1.1s ease-in-out infinite;
}

.character-deck-loadout-summary {
    flex: 0 0 clamp(320px, 24vw, 360px);
    min-height: 72px;
    padding: 8px 10px;
    border: 1px solid rgba(114, 164, 230, 0.44);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(7, 14, 36, 0.76), rgba(6, 10, 24, 0.9));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.character-deck-loadout-quick {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.character-deck-loadout-quick-body {
    min-width: 0;
    flex: 1 1 auto;
}

.character-deck-loadout-quick-label {
    color: #98bce8;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.character-deck-loadout-quick-name {
    color: #f6e0a0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-deck-loadout-quick-meta {
    color: rgba(237, 230, 213, 0.76);
    font-size: 0.83rem;
    margin-top: 2px;
}

.character-deck-loadout-quick-cards {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.character-deck-loadout-btn {
    min-width: 110px;
    border: 1px solid rgba(118, 173, 236, 0.6);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(39, 66, 108, 0.88), rgba(18, 33, 61, 0.94));
    color: #dfeeff;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 9px 12px;
    cursor: pointer;
}

.character-deck-loadout-btn:hover {
    filter: brightness(1.08);
}

.character-deck-loadout-btn:disabled {
    opacity: 0.54;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.character-deck-loadout-keycard {
    width: 68px;
    height: 98px;
    border: 1px solid rgba(220, 189, 110, 0.32);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(17, 21, 38, 0.92), rgba(6, 9, 18, 0.98));
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}

.character-deck-loadout-keycard .card {
    position: absolute;
    left: 50%;
    top: 0;
    transform-origin: top center;
    transform: translate3d(-50%, 0, 0) scale3d(0.285, 0.285, 1);
    pointer-events: none;
}

.character-deck-loadout-keycard-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(233, 223, 199, 0.42);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.character-deck-loadout-window {
    position: absolute;
    top: 52px;
    left: 12px;
    right: 12px;
    z-index: 35;
    width: auto;
    min-height: calc(100% - 140px);
    max-height: calc(100% - 140px);
    border: 1px solid rgba(114, 164, 230, 0.56);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(8, 15, 38, 0.96), rgba(4, 8, 22, 0.98));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.48);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.character-deck-loadout-window.hidden {
    display: none;
}

.character-deck-loadout-window-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.character-deck-loadout-window-title {
    color: #dce8ff;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.character-deck-loadout-close-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(172, 184, 215, 0.5);
    border-radius: 999px;
    background: rgba(24, 30, 46, 0.88);
    color: #f2f4f8;
    font-size: 1.18rem;
    cursor: pointer;
}

.character-deck-loadout-window-body {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
    gap: 18px;
}

.character-deck-loadout-list {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.character-deck-loadout-row {
    width: 100%;
    border: 1px solid rgba(214, 186, 110, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(14, 20, 38, 0.9), rgba(8, 12, 24, 0.98));
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.character-deck-loadout-row.active {
    border-color: rgba(120, 178, 244, 0.74);
    box-shadow: 0 0 0 1px rgba(92, 150, 228, 0.34), 0 0 18px rgba(70, 128, 222, 0.22);
}

.character-deck-loadout-row.character-deck-controller-selected {
    border-color: rgba(126, 255, 156, 0.84);
    box-shadow:
        0 0 0 1px rgba(126, 255, 156, 0.28),
        0 0 22px rgba(82, 221, 100, 0.3),
        inset 0 1px 0 rgba(224, 255, 210, 0.14);
    filter: brightness(1.08);
}

.character-deck-loadout-row.character-deck-controller-selected .character-deck-loadout-row-name,
.character-deck-loadout-row.character-deck-controller-selected .character-deck-loadout-row-meta {
    color: #8cff9d;
    text-shadow: 0 0 10px rgba(82, 255, 118, 0.58);
}

.character-deck-loadout-row.is-current {
    background: linear-gradient(180deg, rgba(21, 36, 68, 0.92), rgba(10, 18, 38, 0.98));
}

.character-deck-loadout-row-body {
    min-width: 0;
    flex: 1 1 auto;
}

.character-deck-loadout-row-name {
    color: #f5dfac;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.character-deck-loadout-row-meta {
    color: rgba(231, 225, 214, 0.74);
    font-size: 0.84rem;
    margin-top: 3px;
}

.character-deck-loadout-row-cards {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.character-deck-loadout-row .character-deck-loadout-keycard {
    width: 56px;
    height: 82px;
}

.character-deck-loadout-row .character-deck-loadout-keycard .card {
    transform: translate3d(-50%, 0, 0) scale3d(0.235, 0.235, 1);
}

.character-deck-loadout-badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid rgba(112, 168, 236, 0.46);
    color: #dfeeff;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.character-deck-loadout-editor {
    border: 1px solid rgba(214, 186, 110, 0.2);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.68);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.character-deck-loadout-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #e8d7aa;
    font-size: 0.9rem;
}

.character-deck-loadout-input,
.character-deck-loadout-select {
    width: 100%;
    border: 1px solid rgba(214, 184, 109, 0.4);
    border-radius: 8px;
    background: rgba(7, 12, 22, 0.92);
    color: #f3e2be;
    padding: 8px 10px;
    font-size: 0.95rem;
}

.character-deck-loadout-key-selection {
    display: grid;
    gap: 6px;
}

.character-deck-loadout-key-selection-row {
    min-height: 36px;
    border: 1px solid rgba(214, 184, 109, 0.22);
    border-radius: 8px;
    background: rgba(7, 12, 22, 0.86);
    color: #f3e2be;
    padding: 7px 10px;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
}

.character-deck-loadout-key-selection-row.empty {
    color: rgba(243, 226, 190, 0.48);
}

.character-deck-card.is-keycard-selectable {
    cursor: pointer;
    position: relative;
    opacity: 0.76;
    filter: saturate(0.88);
    transition:
        transform 140ms ease,
        opacity 140ms ease,
        filter 140ms ease,
        box-shadow 140ms ease;
}

.character-deck-grid-card.is-keycard-selectable {
    cursor: pointer;
    position: relative;
    opacity: 0.76;
    filter: saturate(0.88);
    transition:
        transform 140ms ease,
        opacity 140ms ease,
        filter 140ms ease,
        box-shadow 140ms ease;
}

.character-deck-card.is-keycard-selectable:hover,
.character-deck-grid-card.is-keycard-selectable:hover {
    opacity: 0.92;
    filter: saturate(1);
    transform: translateY(-2px);
}

.character-deck-card.is-keycard-selectable::after,
.character-deck-grid-card.is-keycard-selectable::after {
    content: 'KEY';
    position: absolute;
    right: 6px;
    top: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(7, 12, 22, 0.82);
    border: 1px solid rgba(214, 184, 109, 0.3);
    color: rgba(245, 229, 187, 0.78);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    z-index: 3;
    pointer-events: none;
}

.character-deck-card.is-keycard-active,
.character-deck-grid-card.is-keycard-active {
    opacity: 1;
    filter: saturate(1.08);
    transform: translateY(-4px) scale(1.015);
    box-shadow:
        0 0 0 3px rgba(102, 176, 255, 0.88),
        0 0 24px rgba(86, 160, 255, 0.46);
}

.character-deck-card.is-keycard-active::after,
.character-deck-grid-card.is-keycard-active::after {
    content: 'KEY';
    background: rgba(22, 58, 112, 0.94);
    border-color: rgba(124, 186, 255, 0.88);
    color: #eef6ff;
    top: auto;
    right: 8px;
    bottom: 8px;
}

.character-deck-card.is-keycard-active::before,
.character-deck-grid-card.is-keycard-active::before {
    content: none;
}

.character-deck-keycard-order-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 248, 212, 0.95), rgba(214, 184, 109, 0.9) 42%, rgba(96, 61, 18, 0.98) 100%);
    border: 1px solid rgba(255, 233, 168, 0.92);
    color: #241205;
    font-size: 0.84rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    z-index: 14;
    pointer-events: none;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(245, 214, 126, 0.26);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    transition: opacity 120ms ease, transform 120ms ease;
    font-family: 'Cinzel', serif;
    text-shadow: 0 1px 1px rgba(255, 248, 224, 0.4);
}

.character-deck-keycard-order-badge.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.character-deck-loadout-editor-hint {
    min-height: 40px;
    color: rgba(231, 225, 214, 0.74);
    font-size: 0.83rem;
    line-height: 1.5;
}

.character-deck-loadout-editor-actions {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@keyframes characterDeckWarnBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.48; }
}

.character-deck-list {
    max-height: none;
    flex: 1;
    overflow: auto;
    border-top: 1px solid rgba(216, 186, 104, 0.24);
    border-bottom: 1px solid rgba(216, 186, 104, 0.24);
    padding: 12px 10px;
    display: grid;
    grid-template-columns: repeat(7, minmax(126px, 1fr));
    gap: 10px;
    align-content: start;
    min-height: 0;
}

.character-deck-editor-host {
    max-height: none;
    flex: 1;
    overflow: hidden;
    border-top: 1px solid rgba(216, 186, 104, 0.24);
    border-bottom: 1px solid rgba(216, 186, 104, 0.24);
    padding: 10px;
    min-height: 0;
}

.character-deck-editor-host.hidden {
    display: none;
}

.character-deck-builder {
    --character-deck-card-node-scale: 0.58;
    --character-owned-card-node-scale: 0.5;
    --character-deck-card-slot-height: calc(344px * 0.58 + 4px);
    --character-owned-card-slot-height: calc(344px * var(--character-owned-card-node-scale) + 6px);
    --character-deck-card-slot-width: calc(236px * 0.58 + 2px);
    --character-owned-card-slot-width: calc(236px * var(--character-owned-card-node-scale) + 6px);
    display: grid;
    grid-template-columns: minmax(330px, 0.92fr) minmax(820px, 1.62fr) minmax(480px, 1.18fr);
    gap: 10px;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.character-deck-pane {
    border: 1px solid rgba(218, 184, 102, 0.28);
    border-radius: 10px;
    padding: 10px;
    background: linear-gradient(180deg, rgba(8, 12, 22, 0.68), rgba(4, 7, 14, 0.82));
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.character-deck-pane-title {
    font-size: 1.16rem;
    color: #efd8a1;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 2px;
}

.character-deck-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.character-deck-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.98rem;
    color: #d0d8ea;
}

.character-deck-sort-select {
    min-width: 94px;
    border: 1px solid rgba(214, 184, 109, 0.45);
    border-radius: 7px;
    background: rgba(8, 12, 22, 0.86);
    color: #f2e0ba;
    padding: 6px 9px;
    font-size: 0.98rem;
}

.character-deck-pane-detail {
    min-width: 0;
    overflow: auto;
    position: relative;
    z-index: 1;
}

.character-deck-detail-card-wrap {
    display: grid;
    place-items: center;
    min-height: 346px;
}

.character-deck-detail-card-host {
    width: min(236px, 100%);
    min-height: 344px;
    position: relative;
}

.character-deck-detail-name {
    color: #f9eecf;
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.25;
}

.character-deck-detail-meta {
    color: #d2c093;
    font-size: 1rem;
}

.character-deck-detail-line {
    color: #c9d2e6;
    font-size: 0.98rem;
    line-height: 1.35;
}

.character-deck-detail-stats {
    font-size: 1.02rem;
    color: #f3deb0;
    font-weight: 700;
}

.character-deck-detail-effects {
    border: 1px solid rgba(230, 199, 127, 0.22);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    min-height: 92px;
    max-height: 156px;
    overflow: auto;
    padding: 8px;
    line-height: 1.45;
    font-size: 0.97rem;
    color: #eef0f5;
}

.character-deck-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.character-deck-detail-art-controls {
    display: grid;
    gap: 4px;
    min-width: 132px;
}

.character-deck-detail-art-head {
    color: #b8c5dd;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.character-deck-detail-art-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
    align-items: center;
}

.character-deck-detail-art-label {
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(215, 183, 109, 0.18);
    background: rgba(8, 14, 28, 0.62);
    color: #e7edf9;
    display: grid;
    place-items: center;
    padding: 0 10px;
    font-size: 0.74rem;
    text-align: center;
    white-space: nowrap;
}

.character-deck-detail-favorite-btn {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.88rem;
}

.character-deck-detail-item-quick {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(230, 199, 127, 0.18);
    border-radius: 8px;
    background: rgba(3, 8, 20, 0.42);
    padding: 9px;
    max-height: 172px;
    overflow: auto;
    position: relative;
    z-index: 4;
    pointer-events: auto;
}

.character-deck-detail-item-head {
    display: grid;
    gap: 2px;
}

.character-deck-detail-item-title {
    color: #f4e5bd;
    font-size: 0.9rem;
    font-weight: 700;
}

.character-deck-detail-item-target {
    color: #c2d0e6;
    font-size: 0.78rem;
    line-height: 1.35;
}

.character-deck-detail-item-targets {
    display: grid;
    gap: 5px;
}

.character-deck-detail-item-targets span {
    color: #b8c5dd;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}

.character-deck-detail-item-target-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.character-deck-detail-copy-btn {
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(215, 183, 109, 0.26);
    background: rgba(8, 14, 28, 0.78);
    color: #dfe8f6;
    padding: 4px 10px;
    font-size: 0.75rem;
    cursor: pointer;
}

.character-deck-detail-copy-btn.active {
    border-color: rgba(117, 228, 193, 0.8);
    background: rgba(18, 58, 54, 0.76);
    color: #f0fff8;
}

.character-deck-detail-item-list {
    display: grid;
    gap: 7px;
}

.character-deck-detail-item-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid rgba(214, 183, 109, 0.16);
    background: rgba(8, 13, 27, 0.68);
    padding: 6px 7px;
    position: relative;
    z-index: 5;
}

.character-deck-detail-item-row.equipped {
    border-color: rgba(117, 228, 193, 0.46);
    box-shadow: inset 0 0 0 1px rgba(117, 228, 193, 0.14);
    background: rgba(14, 38, 39, 0.7);
}

.character-deck-detail-item-row.disabled {
    opacity: 0.55;
    filter: grayscale(0.3);
}

.character-deck-detail-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(241, 205, 128, 0.42);
    background:
        linear-gradient(145deg, rgba(35, 39, 52, 0.92), rgba(15, 19, 30, 0.95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.character-deck-detail-item-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.character-deck-detail-item-name {
    color: #f8e9c1;
    font-size: 0.82rem;
    line-height: 1.25;
}

.character-deck-detail-item-desc {
    color: #d4deed;
    font-size: 0.72rem;
    line-height: 1.35;
}

.character-deck-detail-item-skill {
    color: #f0d7a0;
    font-size: 0.72rem;
    line-height: 1.35;
}

.character-deck-detail-item-state {
    color: #b8c5dd;
    font-size: 0.72rem;
    line-height: 1.3;
}

.character-deck-detail-item-btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.77rem;
    white-space: nowrap;
    position: relative;
    z-index: 6;
    pointer-events: auto;
}

.character-deck-detail-item-btn.active {
    border-color: rgba(117, 228, 193, 0.78);
    color: #f2fff8;
    background: linear-gradient(180deg, rgba(24, 85, 76, 0.94), rgba(14, 50, 46, 0.96));
}

.character-deck-detail-item-empty {
    color: #b9c6dc;
    font-size: 0.82rem;
    line-height: 1.45;
}

.character-deck-detail-effect-line + .character-deck-detail-effect-line {
    margin-top: 4px;
}

.character-deck-detail-skill-info {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(230, 199, 127, 0.14);
}

.character-deck-pane-main {
    min-width: 0;
    z-index: 1;
    overflow: hidden;
}

.character-deck-current-grid {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, var(--character-deck-card-slot-width));
    column-gap: clamp(12px, 1.5vw, 24px);
    row-gap: 7px;
    grid-auto-rows: var(--character-deck-card-slot-height);
    align-content: start;
    justify-content: center;
    padding: 0 2px 0 0;
}

.character-deck-grid-card {
    position: relative;
    border: 1px solid rgba(215, 183, 109, 0.04);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.12);
    height: var(--character-deck-card-slot-height);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    width: min(var(--character-deck-card-slot-width), 100%);
    justify-self: center;
}

.character-deck-grid-card.active {
    border-color: rgba(126, 255, 156, 0.22);
    box-shadow: none;
}

.character-deck-grid-card.is-ace {
    border-color: rgba(237, 162, 162, 0.64);
}

.character-deck-grid-card.limit-reached {
    opacity: 1;
}

.character-deck-grid-card-owned.limit-reached {
    opacity: 0.38;
    filter: grayscale(0.72) brightness(0.58);
}

.character-deck-grid-card-owned.cannot-add {
    opacity: 0.48;
    filter: grayscale(0.58) brightness(0.62);
}

.character-deck-grid-card-owned.limit-over {
    border-color: rgba(238, 142, 132, 0.82);
    box-shadow: inset 0 0 0 1px rgba(255, 143, 122, 0.46), 0 0 10px rgba(255, 106, 106, 0.26);
}

.character-deck-grid-card-owned.addable-now {
    border-color: rgba(196, 241, 128, 0.76);
    box-shadow: inset 0 0 0 1px rgba(193, 237, 120, 0.42), 0 0 8px rgba(171, 232, 94, 0.22);
    opacity: 1;
    filter: none;
}

.character-deck-grid-badge {
    position: absolute;
    left: 6px;
    top: 6px;
    font-size: 0.66rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.72);
    color: #ffd977;
    border: 1px solid rgba(255, 214, 123, 0.46);
    z-index: 2;
    pointer-events: none;
}

.character-deck-grid-badge.hidden {
    display: none;
}

.character-deck-grid-badge.count {
    left: auto;
    right: 4px;
    top: 28%;
    color: #d9eeff;
    border-color: rgba(145, 206, 255, 0.42);
}

.character-deck-grid-badge.deck-cost {
    left: auto;
    right: 4px;
    top: 38%;
    color: #ffe7a8;
    border-color: rgba(255, 211, 120, 0.55);
    background: rgba(0, 0, 0, 0.74);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.character-deck-grid-remove {
    display: none;
}

.character-deck-grid-add {
    display: none;
}

.character-deck-pane-right {
    min-width: 0;
    min-height: 0;
    position: relative;
    z-index: 12;
    overflow: hidden;
}

.character-deck-tab-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    position: relative;
    z-index: 6;
    pointer-events: auto;
}

.character-deck-tab-btn {
    border: 1px solid rgba(214, 184, 109, 0.48);
    border-radius: 8px;
    background: rgba(10, 14, 24, 0.86);
    color: #d6dccb;
    font-size: 0.96rem;
    padding: 8px 10px;
    cursor: pointer;
    position: relative;
    z-index: 7;
    pointer-events: auto;
}

.character-deck-tab-btn.active {
    background: rgba(73, 94, 26, 0.92);
    border-color: rgba(208, 243, 96, 0.76);
    color: #f4ffd8;
}

.character-deck-right-body {
    flex: 1;
    overflow: auto;
    overscroll-behavior: contain;
    position: relative;
    z-index: 1;
}

.character-deck-list-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.character-deck-filter-panel {
    border: 1px solid rgba(218, 184, 102, 0.36);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(7, 15, 30, 0.96), rgba(5, 10, 22, 0.98));
    padding: 10px;
    margin-bottom: 8px;
    display: grid;
    gap: 8px;
}

.character-deck-filter-panel.hidden {
    display: none;
}

.character-deck-filter-title {
    font-size: 1rem;
    color: #e8d9b4;
    font-weight: 700;
}

.character-deck-filter-note {
    font-size: 0.83rem;
    color: #bcd0ef;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(215, 183, 109, 0.22);
    border-radius: 8px;
    padding: 5px 8px;
}

.character-deck-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.character-deck-filter-grid label {
    display: grid;
    gap: 4px;
    font-size: 0.88rem;
    color: #cfd8ea;
}

.character-deck-filter-grid select,
.character-deck-filter-grid input {
    border: 1px solid rgba(214, 184, 109, 0.38);
    border-radius: 7px;
    background: rgba(8, 12, 22, 0.86);
    color: #f2e0ba;
    padding: 5px 8px;
}

.character-deck-filter-level-checklist {
    max-height: none;
    overflow: visible;
}

.character-deck-filter-skill-search {
    width: min(100px, 100%);
    justify-self: start;
}

.character-deck-filter-checklist {
    max-height: 120px;
    overflow-y: auto;
    border: 1px solid rgba(214, 184, 109, 0.3);
    border-radius: 7px;
    background: rgba(8, 12, 22, 0.68);
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
}

.character-deck-filter-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    line-height: 1.2;
    color: #d7e6ff;
}

.character-deck-filter-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.character-deck-filter-check span {
    border: 1px solid rgba(186, 201, 229, 0.3);
    border-radius: 999px;
    background: rgba(18, 28, 52, 0.85);
    color: #d7e6ff;
    padding: 5px 10px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.character-deck-filter-check span:hover {
    border-color: rgba(212, 223, 245, 0.48);
    background: rgba(25, 38, 70, 0.9);
}

.character-deck-filter-check input:checked + span {
    border-color: rgba(238, 203, 122, 0.78);
    background: rgba(68, 42, 7, 0.9);
    color: #f7ddb0;
}

.character-deck-filter-mode-toggle {
    display: inline-flex;
    width: fit-content;
    border: 1px solid rgba(214, 184, 109, 0.34);
    border-radius: 999px;
    background: rgba(8, 12, 22, 0.68);
    padding: 3px;
    gap: 4px;
}

.character-deck-filter-mode-btn {
    min-width: 58px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #cddaf0;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.character-deck-filter-mode-btn.active {
    background: rgba(68, 42, 7, 0.9);
    color: #f7ddb0;
    box-shadow: inset 0 0 0 1px rgba(238, 203, 122, 0.68);
}

.character-deck-filter-check-empty {
    border: 1px dashed rgba(214, 184, 109, 0.3);
    border-radius: 7px;
    background: rgba(8, 12, 22, 0.5);
    color: #9fb0cc;
    font-size: 0.8rem;
    padding: 8px;
}

.character-deck-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.character-deck-owned-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    grid-auto-rows: var(--character-owned-card-slot-height);
    align-content: start;
}

.character-deck-grid-card-owned {
    --character-deck-card-node-scale: var(--character-owned-card-node-scale);
    min-width: 0;
    height: var(--character-owned-card-slot-height);
    width: min(var(--character-owned-card-slot-width), 100%);
    justify-self: center;
}

.character-deck-item-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.character-deck-item-summary {
    border: 1px solid rgba(215, 183, 109, 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    padding: 8px;
    display: grid;
    gap: 4px;
}

.character-deck-item-summary-line {
    font-size: 0.92rem;
    color: #d8e4f8;
}

.character-deck-item-summary-note {
    font-size: 0.82rem;
    color: #b8c5dd;
}

.character-deck-item-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.character-deck-item-controls {
    border: 1px solid rgba(215, 183, 109, 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    padding: 8px;
    display: grid;
    gap: 8px;
}

.character-deck-item-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.character-deck-item-sort-wrap {
    min-width: 0;
}

.character-deck-item-sort-select {
    min-width: 132px;
}

.character-deck-item-filter-clear {
    min-width: 78px;
    min-height: 34px;
    padding: 6px 12px;
}

.character-deck-item-filter-block {
    display: grid;
    gap: 6px;
}

.character-deck-item-filter-title {
    font-size: 0.78rem;
    color: #b8c5dd;
    letter-spacing: 0.04em;
}

.character-deck-item-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.character-deck-item-filter-chip {
    min-height: 30px;
    border: 1px solid rgba(215, 183, 109, 0.3);
    border-radius: 999px;
    background: rgba(8, 12, 22, 0.78);
    color: #dbe6f6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 0.82rem;
    cursor: pointer;
}

.character-deck-item-filter-chip.active {
    border-color: rgba(190, 236, 130, 0.62);
    background: rgba(58, 82, 18, 0.74);
    color: #f0f7d0;
}

.character-deck-item-filter-chip input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #83a824;
}

.character-deck-item-filter-empty {
    font-size: 0.82rem;
    color: #a4b2c8;
}

.character-deck-item-slot {
    border: 1px solid rgba(215, 183, 109, 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    min-height: 74px;
    padding: 6px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
}

.character-deck-item-slot.filled {
    border-color: rgba(190, 236, 130, 0.55);
    background: rgba(34, 52, 16, 0.28);
}

.character-deck-item-slot-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid rgba(236, 200, 122, 0.42);
    background: rgba(10, 16, 28, 0.86);
    background-size: cover;
    background-position: center;
}

.character-deck-item-slot-name {
    font-size: 0.78rem;
    color: #f3e3be;
    text-align: center;
    line-height: 1.2;
}

.character-deck-item-slot-empty {
    font-size: 0.8rem;
    color: #a4b2c8;
    letter-spacing: 0.06em;
}

.character-deck-item-row {
    border: 1px solid rgba(215, 183, 109, 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    padding: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.character-deck-item-row.equipped {
    border-color: rgba(190, 236, 130, 0.55);
    background: rgba(34, 52, 16, 0.44);
}

.character-deck-item-main {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.character-deck-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    border: 1px solid rgba(236, 200, 122, 0.45);
    background-color: rgba(10, 16, 28, 0.9);
    background-size: cover;
    background-position: center;
}

.character-deck-item-text {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.character-deck-item-name {
    font-size: 1.08rem;
    color: #f4e5bd;
    font-weight: 700;
}

.character-deck-item-desc {
    font-size: 0.96rem;
    color: #d4deed;
    line-height: 1.45;
}

.character-deck-item-skill {
    font-size: 0.82rem;
    color: #f0d7a0;
    line-height: 1.4;
}

.character-deck-item-rank {
    font-size: 0.82rem;
    color: #f0d7a0;
    line-height: 1.35;
}

.character-deck-item-assign {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.character-deck-item-assign span {
    font-size: 0.76rem;
    color: #b8c5dd;
    letter-spacing: 0.04em;
}

.character-deck-item-assign-select {
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(215, 183, 109, 0.28);
    background: rgba(7, 11, 22, 0.84);
    color: #f2e7cb;
    padding: 6px 10px;
    font-size: 0.88rem;
}

.character-deck-item-meta {
    font-size: 0.82rem;
    color: #b8c5dd;
}

.character-deck-detail-card {
    width: 100%;
    min-width: 0;
}

.character-deck-card-node {
    position: absolute;
    left: 50%;
    top: 2px;
    width: 236px !important;
    height: 344px !important;
    transform: translate3d(-50%, 0, 0) scale3d(var(--character-deck-card-node-scale), var(--character-deck-card-node-scale), 1);
    transform-origin: top center;
    pointer-events: none;
    box-shadow: none;
    backface-visibility: hidden;
}

.character-deck-favorite-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 221, 129, 0.54);
    background: rgba(0, 0, 0, 0.66);
    color: rgba(242, 226, 180, 0.78);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    z-index: 4;
    padding: 0;
}

.character-deck-favorite-btn.active {
    color: #ffe37b;
    border-color: rgba(255, 230, 130, 0.88);
    box-shadow: 0 0 8px rgba(255, 222, 117, 0.38);
}

.character-deck-grid-card,
.character-deck-grid-card-owned {
    user-select: none;
}

.character-deck-grid-card[draggable="true"],
.character-deck-grid-card-owned[draggable="true"] {
    cursor: grab;
}

.character-deck-grid-card[draggable="true"]:active,
.character-deck-grid-card-owned[draggable="true"]:active {
    cursor: grabbing;
}

.character-deck-dropzone.drag-over {
    border-color: rgba(255, 232, 149, 0.66);
    box-shadow: inset 0 0 0 1px rgba(255, 232, 149, 0.45);
}

.character-deck-drag-hint {
    margin-top: auto;
    font-size: 0.96rem;
    color: #b8c5dd;
    line-height: 1.35;
    border: 1px solid rgba(230, 199, 127, 0.22);
    border-radius: 8px;
    padding: 7px 8px;
    background: rgba(0, 0, 0, 0.2);
}

.character-deck-detail-card-host .card {
    width: 236px !important;
    height: 344px !important;
    max-width: 100%;
    transform: none !important;
}

.character-deck-card-fallback {
    min-height: 140px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 0.86rem;
    color: #dfe5f0;
    background: rgba(8, 12, 22, 0.68);
}

.character-deck-search {
    width: 100%;
    margin-bottom: 7px;
    border: 1px solid rgba(220, 189, 109, 0.45);
    border-radius: 8px;
    background: rgba(6, 10, 18, 0.82);
    color: #f1debd;
    padding: 7px 9px;
    font-size: 0.98rem;
}

.character-deck-editor-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(46vh, 520px);
    overflow: auto;
}

.character-deck-editor-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
    border: 1px solid rgba(220, 190, 114, 0.22);
    border-radius: 8px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
}

.character-deck-editor-meta {
    font-size: 0.74rem;
    opacity: 0.9;
}

.character-deck-editor-btn {
    border: 1px solid rgba(218, 186, 110, 0.52);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(66, 48, 20, 0.9), rgba(22, 16, 10, 0.94));
    color: #f3dfba;
    padding: 6px 10px;
    font-size: 0.94rem;
    cursor: pointer;
}

.character-deck-editor-btn.danger {
    border-color: rgba(206, 116, 116, 0.62);
}

.character-deck-action-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding-top: 10px;
}

.character-deck-action-btn {
    min-width: 120px;
    border: 1px solid rgba(218, 186, 110, 0.52);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(66, 48, 20, 0.92), rgba(22, 16, 10, 0.96));
    color: #f3dfba;
    padding: 10px 18px;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 1420px) {
    .character-deck-builder {
        --character-deck-card-node-scale: 0.54;
        --character-owned-card-node-scale: 0.46;
        --character-deck-card-slot-height: calc(344px * 0.54 + 4px);
        --character-owned-card-slot-height: calc(344px * var(--character-owned-card-node-scale) + 6px);
        --character-deck-card-slot-width: calc(236px * 0.54 + 2px);
        --character-owned-card-slot-width: calc(236px * var(--character-owned-card-node-scale) + 6px);
        grid-template-columns: minmax(280px, 0.84fr) minmax(670px, 1.54fr) minmax(340px, 1fr);
    }

    .character-deck-current-grid {
        grid-template-columns: repeat(5, var(--character-deck-card-slot-width));
        column-gap: clamp(10px, 1.2vw, 18px);
    }

    .character-deck-owned-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .character-deck-panel {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        padding: 10px;
    }

    .character-deck-builder {
        --character-deck-card-node-scale: 0.38;
        --character-owned-card-node-scale: 0.38;
        --character-deck-card-slot-height: calc(344px * 0.38 + 4px);
        --character-owned-card-slot-height: calc(344px * var(--character-owned-card-node-scale) + 6px);
        --character-deck-card-slot-width: calc(236px * 0.38 + 2px);
        --character-owned-card-slot-width: calc(236px * var(--character-owned-card-node-scale) + 6px);
        grid-template-columns: 1fr;
    }

    .character-deck-pane {
        min-height: 360px;
    }

    .character-deck-current-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .character-deck-owned-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .character-deck-filter-grid {
        grid-template-columns: 1fr;
    }
}

.character-deck-list::-webkit-scrollbar {
    width: 8px;
}

.character-deck-list::-webkit-scrollbar-thumb {
    background: rgba(198, 169, 88, 0.55);
    border-radius: 999px;
}

.character-deck-card {
    width: 100%;
    height: auto;
    min-width: 0;
    transform: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.48);
}

.character-deck-panel.is-preview-mode .character-deck-list {
    --character-deck-card-node-scale: 0.78;
    --character-deck-card-slot-height: calc(344px * 0.78 + 4px);
    --character-deck-card-slot-width: calc(236px * 0.78 + 2px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: var(--character-deck-card-slot-height);
    gap: 12px;
    padding: 14px 16px;
}

.character-deck-panel.is-preview-mode {
    width: min(1120px, 92vw);
}

.character-deck-panel.is-preview-mode .character-deck-preview-card {
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}

.character-deck-preview-card {
    cursor: default;
}

.character-deck-card:hover {
    transform: none !important;
}

@media (max-width: 1400px) {
    .character-deck-list {
        grid-template-columns: repeat(6, minmax(118px, 1fr));
    }
}

@media (max-width: 1080px) {
    .character-deck-list {
        grid-template-columns: repeat(5, minmax(104px, 1fr));
    }

    .character-deck-panel.is-preview-mode .character-deck-list {
        --character-deck-card-node-scale: 0.68;
        --character-deck-card-slot-height: calc(344px * 0.68 + 4px);
        --character-deck-card-slot-width: calc(236px * 0.68 + 2px);
        grid-template-columns: repeat(4, var(--character-deck-card-slot-width));
    }
}

.character-deck-ok-btn {
    margin-top: 0;
    min-width: 140px;
    border: 1px solid rgba(216, 187, 104, 0.68);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(69, 56, 20, 0.82), rgba(38, 29, 10, 0.92));
    color: #f2e0af;
    font-family: 'Cinzel', serif;
    font-size: 1.04rem;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
}

.character-deck-ok-btn:hover {
    filter: brightness(1.08);
}

.character-deck-ok-btn:disabled {
    opacity: 0.54;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.character-deck-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

.character-deck-cancel-btn {
    min-width: 140px;
    border: 1px solid rgba(176, 178, 194, 0.62);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(48, 50, 62, 0.84), rgba(24, 26, 34, 0.94));
    color: #f0f2f6;
    font-family: 'Cinzel', serif;
    font-size: 1.04rem;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
}

.character-deck-cancel-btn:hover {
    filter: brightness(1.08);
}

.character-deck-loadout-btn.character-deck-controller-selected,
.character-deck-ok-btn.character-deck-controller-selected,
.character-deck-cancel-btn.character-deck-controller-selected {
    color: #8cff9d;
    border-color: rgba(126, 255, 156, 0.8);
    box-shadow:
        0 0 0 1px rgba(126, 255, 156, 0.26),
        0 0 18px rgba(82, 221, 100, 0.28),
        inset 0 1px 0 rgba(224, 255, 210, 0.14);
    filter: brightness(1.08);
    text-shadow: 0 0 10px rgba(82, 255, 118, 0.58);
}

.character-deck-custom-controller-selected {
    filter: brightness(1.06);
}

.character-deck-grid-card.active,
.character-deck-grid-card-owned.active,
.character-deck-grid-card.character-deck-custom-controller-selected,
.character-deck-grid-card-owned.character-deck-custom-controller-selected {
    position: relative;
    filter: brightness(1.06);
}

.character-deck-grid-card.active::before,
.character-deck-grid-card-owned.active::before,
.character-deck-grid-card.character-deck-custom-controller-selected::before,
.character-deck-grid-card-owned.character-deck-custom-controller-selected::before {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: 8;
    border: 2px solid rgba(126, 255, 156, 0.9);
    border-radius: 7px;
    box-shadow:
        0 0 13px rgba(82, 221, 100, 0.34),
        inset 0 0 13px rgba(126, 255, 156, 0.18);
    pointer-events: none;
}

body.controller-input-active .character-deck-grid-card.active:not(.character-deck-custom-controller-selected)::before,
body.controller-input-active .character-deck-grid-card-owned.active:not(.character-deck-custom-controller-selected)::before {
    content: none;
}

.character-deck-current-grid:has(.character-deck-custom-controller-selected) .character-deck-grid-card.active:not(.character-deck-custom-controller-selected)::before,
.character-deck-owned-grid:has(.character-deck-custom-controller-selected) .character-deck-grid-card-owned.active:not(.character-deck-custom-controller-selected)::before {
    content: none;
}

.character-deck-ok-btn.character-deck-custom-controller-selected,
.character-deck-cancel-btn.character-deck-custom-controller-selected,
.character-deck-editor-btn.character-deck-custom-controller-selected,
.character-deck-sort-select.character-deck-custom-controller-selected,
.character-deck-item-assign-select.character-deck-custom-controller-selected,
.character-deck-item-filter-chip.character-deck-custom-controller-selected,
.character-deck-filter-panel select.character-deck-custom-controller-selected,
.character-deck-filter-check.character-deck-custom-controller-selected span,
.character-deck-filter-group.character-deck-custom-controller-selected > span,
.character-deck-filter-mode-btn.character-deck-custom-controller-selected,
.character-deck-filter-panel input.character-deck-custom-controller-selected,
.character-deck-loadout-btn.character-deck-custom-controller-selected,
.character-deck-detail-favorite-btn.character-deck-custom-controller-selected,
.character-deck-detail-art-row button.character-deck-custom-controller-selected,
.character-deck-detail-item-btn.character-deck-custom-controller-selected,
.character-deck-detail-copy-btn.character-deck-custom-controller-selected {
    border-color: rgba(126, 255, 156, 0.78);
    box-shadow:
        0 0 0 1px rgba(126, 255, 156, 0.22),
        0 0 18px rgba(82, 221, 100, 0.28),
        inset 0 1px 0 rgba(224, 255, 210, 0.12) !important;
}

.character-deck-filter-panel select.character-deck-custom-controller-selected,
.character-deck-filter-panel input.character-deck-custom-controller-selected,
.character-deck-item-assign-select.character-deck-custom-controller-selected {
    background-color: rgba(10, 32, 26, 0.92);
    color: #f5ffe8;
}

.character-deck-filter-panel select.character-deck-custom-controller-editing,
.character-deck-filter-panel input.character-deck-custom-controller-editing,
.character-deck-item-assign-select.character-deck-custom-controller-editing,
.character-deck-filter-mode-btn.character-deck-custom-controller-editing {
    border-color: rgba(250, 218, 124, 0.94) !important;
    background-color: rgba(64, 45, 8, 0.94);
    color: #fff3c9;
    box-shadow:
        0 0 0 2px rgba(126, 255, 156, 0.22),
        0 0 20px rgba(250, 218, 124, 0.42),
        inset 0 0 0 1px rgba(255, 244, 190, 0.22) !important;
}

.character-deck-filter-check.character-deck-custom-controller-editing span {
    border-color: rgba(250, 218, 124, 0.94) !important;
    box-shadow:
        0 0 0 2px rgba(126, 255, 156, 0.2),
        0 0 18px rgba(250, 218, 124, 0.36) !important;
}

.character-deck-item-filter-chip.character-deck-custom-controller-selected {
    color: #f5ffe8;
    background: rgba(10, 32, 26, 0.92);
}

.character-deck-controller-action-menu {
    position: absolute;
    z-index: 80;
    min-width: 220px;
    padding: 8px;
    border: 1px solid rgba(126, 255, 156, 0.36);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(8, 16, 15, 0.96), rgba(5, 9, 8, 0.98));
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.48),
        inset 0 0 0 1px rgba(255, 238, 184, 0.08);
    display: grid;
    gap: 6px;
}

.character-deck-controller-action-menu button {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(202, 178, 108, 0.34);
    border-radius: 6px;
    background: rgba(18, 24, 28, 0.88);
    color: #f2e2b8;
    font-weight: 800;
    text-align: left;
}

.character-deck-controller-action-menu button.active {
    border-color: rgba(126, 255, 156, 0.76);
    color: #ecffe7;
    background: rgba(20, 58, 30, 0.92);
    box-shadow: 0 0 14px rgba(82, 221, 100, 0.24);
}

.character-deck-cancel-btn:disabled {
    opacity: 0.54;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.character-deck-cancel-btn.keycard-mode-active {
    border-color: rgba(118, 173, 236, 0.88);
    background: linear-gradient(180deg, rgba(34, 63, 106, 0.9), rgba(14, 28, 58, 0.96));
    color: #e8f3ff;
    box-shadow: 0 0 0 1px rgba(94, 154, 236, 0.24), 0 0 18px rgba(72, 134, 226, 0.2);
}

.character-deck-modal {
    position: fixed;
    inset: 0;
    z-index: 1980;
    display: grid;
    place-items: center;
    padding: 10px;
}

.character-deck-modal.hidden {
    display: none;
}

.character-deck-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
}

.character-select-screen.deck-preview-open .character-deck-modal-backdrop {
    background: rgba(0, 0, 0, 0.16);
}

.character-select-screen.deck-scene-open .character-deck-modal-backdrop {
    background: rgba(0, 0, 0, 0.28);
}

.character-select-screen.deck-scene-open .character-book {
    display: none;
}

.character-select-screen.deck-scene-open .character-select-back-btn {
    display: none;
}

.title-glow {
    display: none;
}

.title-showcase {
    position: absolute;
    left: 32%;
    top: 60%;
    transform: translate(-50%, -50%);
    width: 236px;
    height: 344px;
    pointer-events: none;
    perspective: 1200px;
    z-index: 2;
}

.title-screen.boot-fade-enter .title-showcase,
.title-screen.boot-fade-enter .title-menu,
.title-screen.boot-fade-enter .title-glow {
    opacity: 0;
    transform: translateY(22px);
}

.title-screen.boot-fade-enter .title-showcase {
    transform: translate(-50%, calc(-50% + 22px));
}

.title-screen.boot-fade-enter .title-menu {
    transform: translateY(calc(-50% + 22px));
}

.title-screen.boot-fade-enter.boot-fade-visible .title-showcase,
.title-screen.boot-fade-enter.boot-fade-visible .title-menu,
.title-screen.boot-fade-enter.boot-fade-visible .title-glow {
    opacity: 1;
}

.title-screen.boot-fade-enter.boot-fade-visible .title-showcase {
    transform: translate(-50%, -50%);
    transition: opacity 1400ms ease 520ms, transform 1400ms ease 520ms;
}

.title-screen.boot-fade-enter.boot-fade-visible .title-menu {
    transform: translateY(-50%);
}

.title-screen.boot-fade-enter.boot-fade-visible .title-glow {
    transform: translateY(0);
    transition: opacity 1400ms ease 700ms, transform 1400ms ease 700ms;
}

.title-card-showcase {
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(18px) scale(0.975);
    transition: opacity 12s ease, transform 12s ease;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.56));
}

.title-card-showcase.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.title-card-flipper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-86deg);
    transition: transform 12s cubic-bezier(.22, .72, .2, 1);
}

.title-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}

.title-card-face.back {
    transform: rotateY(180deg);
    border-radius: 14px;
    background: url('material/CardFrame2.png') center/100% 100% no-repeat;
}

.title-card-showcase.show.phase-fade-in,
.title-card-showcase.show.phase-hold {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.title-card-showcase.show.phase-fade-out {
    opacity: 0;
    transform: translateY(-8px) scale(1.01);
}

.title-card-showcase.phase-fade-in .title-card-flipper,
.title-card-showcase.phase-hold .title-card-flipper {
    transform: rotateY(0deg);
}

.title-card-showcase.phase-fade-out .title-card-flipper {
    transform: rotateY(180deg);
}

.title-fallback-card {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background-size: cover, cover, 100% 100%;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
}

.title-fallback-composite {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.title-fallback-frame {
    position: absolute;
    inset: 0;
    background: url('material/CardFrame1.png') center/100% 100% no-repeat;
    z-index: 2;
}

.title-fallback-image {
    position: absolute;
    top: 48px;
    left: 9px;
    right: 9px;
    height: 186px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #202028;
    z-index: 1;
}

.title-menu {
    position: absolute;
    right: clamp(54px, 7vw, 130px);
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 14px;
}

.title-menu-item {
    position: relative;
    background: transparent;
    border: none;
    color: #f7f7f7;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.2rem, 2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: right;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.82);
    padding: 0;
    border-radius: 0;
}

.title-screen:has(.title-controller-selected) .title-menu-item:not(.title-controller-selected) {
    opacity: 0.52;
    filter: brightness(0.72) saturate(0.82);
}

.title-screen:has(.title-controller-selected) .title-menu-item:not(.title-controller-selected) {
    color: rgba(247, 247, 247, 0.62);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.92);
}

.title-menu-item.title-controller-selected {
    color: #fffdf3;
    opacity: 1;
    filter: none;
    text-shadow:
        0 0 10px rgba(164, 238, 121, 0.78),
        0 0 22px rgba(94, 178, 85, 0.42),
        0 2px 8px rgba(0, 0, 0, 0.86);
    transform: translateX(-5px);
}

.title-menu-item.title-controller-selected::before {
    content: "";
    position: absolute;
    inset: -9px -20px -9px -46px;
    background:
        linear-gradient(96deg, rgba(87, 168, 81, 0), rgba(129, 222, 103, 0.16) 42%, rgba(87, 168, 81, 0) 78%),
        radial-gradient(ellipse at 72% 50%, rgba(141, 236, 110, 0.18), rgba(141, 236, 110, 0) 68%);
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
    pointer-events: none;
    animation: titleControllerVeil 2200ms ease-in-out infinite;
}

.title-menu-item.title-controller-selected::after {
    content: none;
}

.title-screen.boot-fade-enter .title-menu-item {
    opacity: 0;
    transform: translateX(26px);
}

.title-screen.boot-fade-enter.boot-fade-visible .title-menu-item {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 900ms ease var(--title-menu-fade-delay, 1200ms),
        transform 900ms ease var(--title-menu-fade-delay, 1200ms);
}

.title-menu-item.hidden {
    display: none;
}

.title-menu-item:hover,
.title-menu-item:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 14px rgba(177, 255, 132, 0.78), 0 0 22px rgba(177, 255, 132, 0.46);
    transform: translateX(-4px);
    outline: none;
}

.title-social-links {
    position: absolute;
    left: clamp(28px, 4vw, 72px);
    bottom: clamp(24px, 4vw, 60px);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: clamp(22px, 1.8vw, 34px);
}

.title-version {
    position: absolute;
    right: clamp(22px, 2.8vw, 48px);
    bottom: clamp(18px, 2.6vw, 42px);
    z-index: 3;
    color: rgba(242, 222, 172, 0.78);
    font-family: 'Cinzel', serif;
    font-size: clamp(0.92rem, 1.16vw, 1.14rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.86);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
    transition: color 160ms ease, text-shadow 160ms ease, transform 160ms ease;
}

.title-version.title-controller-selected {
    color: #fff0bd;
    opacity: 1;
    filter: none;
    text-shadow:
        0 0 10px rgba(164, 238, 121, 0.72),
        0 0 20px rgba(94, 178, 85, 0.36),
        0 2px 8px rgba(0, 0, 0, 0.9);
    transform: translateY(-3px);
}

.title-version.title-controller-selected::before {
    content: "";
    position: absolute;
    inset: -10px -18px;
    background:
        linear-gradient(96deg, rgba(87, 168, 81, 0), rgba(129, 222, 103, 0.14) 45%, rgba(87, 168, 81, 0) 82%),
        radial-gradient(ellipse at 50% 50%, rgba(141, 236, 110, 0.14), rgba(141, 236, 110, 0) 70%);
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
    pointer-events: none;
    animation: titleControllerVeil 2200ms ease-in-out infinite;
}

.title-version:hover,
.title-version:focus-visible {
    color: #fff0bd;
    text-shadow: 0 0 12px rgba(229, 185, 91, 0.72), 0 2px 8px rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
    outline: none;
}

.version-details-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.version-details-modal.hidden {
    display: none;
}

.version-details-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 2, 4, 0.82);
    backdrop-filter: blur(5px);
}

.version-details-panel {
    position: relative;
    width: min(680px, calc(100vw - 48px));
    max-height: min(76vh, 720px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(214, 174, 91, 0.7);
    background: linear-gradient(145deg, rgba(28, 20, 20, 0.98), rgba(8, 7, 10, 0.98));
    color: #eadfca;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), inset 0 0 35px rgba(169, 113, 43, 0.08);
}

.version-details-heading {
    margin: 0 44px 8px 0;
    color: #f1d99e;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: 0.08em;
}

.version-details-date {
    margin-bottom: 26px;
    color: rgba(234, 223, 202, 0.62);
    font-size: 0.86rem;
}

.version-details-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.version-details-release {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(214, 174, 91, 0.28);
}

.version-details-release:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.version-details-title {
    margin: 0 0 14px;
    color: #d9b96f;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

.version-details-section-title {
    margin: 18px 0 8px;
    color: #d9b96f;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
}

.version-details-list {
    margin: 0;
    padding-left: 1.35em;
    line-height: 1.9;
}

.version-details-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(214, 174, 91, 0.45);
    background: rgba(0, 0, 0, 0.28);
    color: #e7cf94;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.version-details-close:hover,
.version-details-close:focus-visible {
    border-color: #e4c275;
    background: rgba(184, 130, 48, 0.18);
    outline: none;
}

.title-social-btn {
    position: relative;
    --title-social-btn-height: clamp(26px, 2.05vw, 36px);
    width: calc(var(--title-social-btn-height) * 2.27);
    height: var(--title-social-btn-height);
    border: 0;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    filter:
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 12px rgba(216, 174, 92, 0.18));
    transition:
        transform 150ms ease,
        filter 150ms ease;
}

.title-social-btn[data-social-label="note"] {
    width: calc(var(--title-social-btn-height) * 2.82);
}

.title-social-btn[data-social-label="Novel"] {
    width: calc(var(--title-social-btn-height) * 3.33);
}

.title-social-btn.title-controller-selected {
    opacity: 1;
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.58))
        drop-shadow(0 0 16px rgba(132, 235, 96, 0.42));
    transform: translateY(-2px);
}

.title-social-btn.title-controller-selected::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 7px;
    background:
        linear-gradient(120deg, rgba(87, 168, 81, 0), rgba(129, 222, 103, 0.16) 48%, rgba(87, 168, 81, 0)),
        radial-gradient(ellipse at 50% 50%, rgba(141, 236, 110, 0.12), rgba(141, 236, 110, 0) 72%);
    box-shadow:
        0 0 0 1px rgba(167, 245, 121, 0.22),
        0 0 10px rgba(132, 235, 96, 0.28),
        inset 0 0 12px rgba(132, 235, 96, 0.1);
    pointer-events: none;
    animation: titleControllerSocialVeil 2200ms ease-in-out infinite;
}

.title-social-btn.title-controller-selected img {
    filter:
        drop-shadow(0 0 7px rgba(152, 240, 104, 0.42))
        drop-shadow(0 0 12px rgba(97, 188, 77, 0.22));
}

.title-social-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.title-social-btn img[src$="note_button.png"] {
    width: 100%;
    margin-left: 0;
}

.title-social-btn img[src$="novel_button.png"] {
    width: 100%;
    margin-left: 0;
}

.title-social-btn:hover,
.title-social-btn:focus-visible {
    transform: translateY(-2px);
    filter:
        drop-shadow(0 10px 16px rgba(0, 0, 0, 0.54))
        drop-shadow(0 0 16px rgba(237, 206, 128, 0.44));
    outline: none;
}

.title-external-link-confirm {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.46);
}

.title-external-link-confirm.hidden {
    display: none;
}

.title-external-link-panel {
    width: min(420px, calc(100vw - 48px));
    border: 1px solid rgba(224, 188, 112, 0.58);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(18, 21, 30, 0.96), rgba(7, 9, 14, 0.96));
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.52),
        inset 0 0 0 1px rgba(255, 232, 164, 0.08);
    padding: 24px 26px 22px;
    color: #f6e8c9;
    text-align: center;
}

.title-external-link-text {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.title-external-link-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.title-external-link-btn {
    min-width: 110px;
    border: 1px solid rgba(224, 188, 112, 0.46);
    border-radius: 5px;
    background: rgba(16, 19, 28, 0.88);
    color: #f4e5c5;
    font-weight: 700;
    padding: 8px 18px;
    cursor: pointer;
}

.title-external-link-btn.primary {
    background: linear-gradient(180deg, rgba(176, 132, 50, 0.92), rgba(84, 54, 20, 0.95));
    color: #fff5d8;
}

.title-external-link-btn:hover,
.title-external-link-btn:focus-visible {
    border-color: rgba(255, 229, 154, 0.88);
    filter: brightness(1.08);
    outline: none;
}

@keyframes titleGlowBreath {
    0% {
        opacity: 0.78;
        transform: translateX(-50%) scale(0.98);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.03);
    }
    100% {
        opacity: 0.78;
        transform: translateX(-50%) scale(0.98);
    }
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background:
        linear-gradient(rgba(5, 7, 16, 0.34), rgba(5, 7, 16, 0.46)),
        url('material/field.png');
    background-size: cover;
    background-position: center;
    color: #e8e8e8;
    min-height: 100vh;
    overflow: hidden;
    user-select: none;
}

.game-container {
    width: 100%;
    height: 100vh;
    padding: 22px 14px 8px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
    background:
        linear-gradient(rgba(5, 7, 16, 0.3), rgba(5, 7, 16, 0.42)),
        url('material/field.png');
    background-size: cover;
    background-position: center;
}

.game-main {
    min-height: 0;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr) 300px;
    gap: 14px;
    margin-top: 10px;
}

.left-space {
    border-radius: 14px;
    background: rgba(4, 8, 24, 0.56);
    border: 1px solid rgba(212, 175, 90, 0.28);
    padding: 8px;
    display: grid;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 0;
    align-self: start;
    height: fit-content;
    min-height: 610px;
    overflow: visible;
}

.detail-enemy-panel {
    margin-bottom: 2px;
}

.detail-title {
    font-family: 'Cinzel', serif;
    color: #f2d98d;
    font-size: 1.1rem;
    letter-spacing: 0.6px;
    margin-bottom: -4px;
}

.detail-card-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 34px;
    margin-bottom: 42px;
}

.detail-card {
    position: relative;
    width: 262px;
    height: 280px;
    border-radius: 8px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
        url('material/CardFrame2.png');
    background-size: 120%;
    background-position: center 40%;
    background-repeat: no-repeat;
    background-color: rgba(12, 16, 34, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: visible;
}

.detail-card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -30px;
    width: 350px;
    height: 350px;
    transform: translateX(-50%);
    background: url("material/alpha_frame.png") center / 100% 100% no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.55));
}

.detail-name {
    color: #f7f7f7;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.25;
    margin-top: 2px;
}

.detail-meta {
    color: #e3c775;
    font-size: 1.34rem;
    margin-top: 2px;
}

.detail-tag-race {
    color: #d8dded;
    font-size: 1.06rem;
    margin-top: 2px;
}

.detail-attribute {
    color: #c9d7ff;
    font-size: 1.02rem;
    margin-top: 2px;
}

.detail-meta-label {
    color: #e3c775;
}

.detail-meta-cost,
.detail-meta-bp-wrap,
.detail-meta-level,
.detail-meta-value,
.detail-meta-sep,
.detail-stat-ap,
.detail-stat-mp,
.detail-stat-fp {
    display: inline-block;
}

.detail-meta-bp {
    font-weight: 700;
}

.detail-bp-red { color: #ff6f6f; }
.detail-bp-blue { color: #79d7ff; }
.detail-bp-green { color: #7be97f; }

.detail-effects {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 0;
    margin-top: 4px;
    overflow: hidden;
}

.detail-effect-line {
    font-size: 1.08rem;
    color: #ececec;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-effect-ref-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 12000;
    width: min(420px, 44vw);
    max-height: min(70vh, 560px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 1px solid rgba(245, 221, 153, 0.72);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18, 24, 44, 0.96), rgba(10, 15, 30, 0.98));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.58), 0 0 18px rgba(255, 212, 119, 0.2);
    pointer-events: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(222, 184, 89, 0.9) rgba(0, 0, 0, 0.25);
}

.detail-effect-ref-tooltip.hidden {
    display: none;
}

.battle-item-hover-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 12010;
    width: min(460px, 52vw);
    max-height: min(72vh, 620px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px;
    border: 1px solid rgba(245, 221, 153, 0.72);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18, 24, 44, 0.98), rgba(10, 15, 30, 0.99));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.58), 0 0 18px rgba(255, 212, 119, 0.2);
    pointer-events: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(222, 184, 89, 0.9) rgba(0, 0, 0, 0.25);
}

.battle-item-hover-tooltip.hidden {
    display: none;
}

.battle-item-hover-title {
    font-family: 'Cinzel', serif;
    font-size: 0.98rem;
    letter-spacing: 0.06em;
    color: #ffe8b4;
    margin-bottom: 8px;
}

.battle-item-hover-summary {
    margin-bottom: 10px;
    padding: 6px 8px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #d9dfef;
    font-size: 0.94rem;
    line-height: 1.55;
    white-space: pre-line;
}

.battle-item-hover-row {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 6px;
}

.battle-item-hover-name {
    color: #f2f5ff;
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.battle-item-hover-desc {
    color: #d7dff2;
    font-size: 0.82rem;
    line-height: 1.35;
}

.battle-item-hover-count-note {
    color: #a8d0f8;
    font-size: 0.82rem;
    margin-top: 4px;
}

.battle-item-hover-subtitle {
    color: #f3d99a;
    font-size: 0.84rem;
    margin: 8px 0 6px;
    letter-spacing: 0.05em;
}

.battle-item-hover-targets {
    color: #d7dff2;
    font-size: 0.8rem;
    line-height: 1.35;
    display: grid;
    gap: 3px;
    margin-bottom: 6px;
}

.battle-item-hover-target-group {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.battle-item-hover-target-label {
    color: #e7ecff;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.battle-item-hover-target-missing {
    color: rgba(215, 223, 242, 0.72);
    font-size: 0.76rem;
}

.detail-effect-ref-skills {
    margin-top: 5px;
    display: grid;
    gap: 2px;
}

.detail-effect-ref-skill {
    color: #e7ecff;
    font-size: 0.76rem;
    line-height: 1.32;
}

.detail-effect-ref-title {
    font-family: 'Cinzel', serif;
    font-size: 0.96rem;
    letter-spacing: 0.06em;
    color: #ffe8b4;
    margin-bottom: 8px;
}

.detail-effect-ref-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-effect-ref-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.detail-effect-ref-thumb {
    width: 72px;
    height: 96px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(240, 246, 255, 0.8);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
}

.detail-effect-ref-info {
    min-width: 0;
    flex: 1;
}

.detail-effect-ref-name {
    color: #f2f5ff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.detail-effect-ref-meta {
    color: #cfd8eb;
    font-size: 0.8rem;
    line-height: 1.3;
}

.detail-stats {
    font-family: 'Cinzel', serif;
    font-size: 1.34rem;
    margin-top: 4px;
    line-height: 1.26;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-stat-ap { color: #ff6f6f; }
.detail-stat-mp { color: #79d7ff; }
.detail-stat-fp { color: #7be97f; }

.detail-skill-info {
    margin-top: 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 6px;
    min-height: 44px;
    font-size: 0.98rem;
    line-height: 1.3;
    color: #d8dded;
    white-space: pre-line;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-skill-info-line + .detail-skill-info-line {
    margin-top: 3px;
}

.detail-skill-info-item-effect {
    color: #ececec;
}

.detail-name,
.detail-attribute,
.detail-tag-race,
.detail-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.detail-meta {
    line-height: 1.26;
}

.power-panel {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    min-height: 145px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(212, 175, 90, 0.2);
    padding-left: 8px;
    padding-right: 8px;
}

.power-title {
    font-family: 'Cinzel', serif;
    color: #f2d98d;
    font-size: 1.35rem;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    text-align: center;
}

.power-list {
    min-height: 88px;
    font-size: 0.98rem;
    line-height: 1.35;
    color: #d8dded;
    display: grid;
    gap: 8px;
    justify-items: stretch;
    text-align: center;
}

.power-panel-floating {
    position: absolute;
    right: 5px;
    top: 415px;
    bottom: auto;
    width: 270px;
    height: 365px;
    min-height: 0;
    z-index: 34;
    margin-top: 0;
    padding: 10px 12px 12px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(7, 10, 18, 0.9), rgba(4, 6, 12, 0.94));
    box-shadow: inset 0 0 0 1px rgba(240, 204, 128, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.board-main > .power-panel-floating {
    z-index: 34;
}

.power-panel-floating .power-list {
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 173, 98, 0.86) rgba(12, 16, 34, 0.7);
}

.power-panel-floating .power-list::-webkit-scrollbar {
    width: 8px;
}

.power-panel-floating .power-list::-webkit-scrollbar-track {
    background: rgba(12, 16, 34, 0.72);
    border-radius: 12px;
}

.power-panel-floating .power-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(212, 173, 98, 0.88), rgba(146, 104, 42, 0.8));
    border-radius: 12px;
    border: 2px solid rgba(12, 16, 34, 0.88);
}

.board-area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.board-status-row {
    position: absolute;
    left: 4px;
    top: 24px;
    z-index: 30;
}

.board-assist-row {
    position: absolute;
    right: 52px;
    top: 24px;
    z-index: 30;
}

.board-assist-preview-row {
    position: absolute;
    right: 10px;
    top: 176px;
    z-index: 29;
}

.board-enemy-panel {
    width: 172px;
    max-width: 100%;
    min-height: 242px;
    padding: 12px 10px;
    align-content: start;
    position: relative;
}

body.battle-controller-active .board-enemy-panel::after {
    content: "L2/R2  ENEMY";
    position: absolute;
    left: 50%;
    top: -34px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 116px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(118, 255, 174, 0.68);
    border-radius: 6px;
    background: rgba(5, 34, 22, 0.82);
    color: #b7ffd2;
    font-family: 'Cinzel', 'Noto Sans JP', serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(81, 255, 146, 0.7);
    box-shadow: 0 0 10px rgba(80, 255, 152, 0.24);
    pointer-events: none;
    z-index: 8;
}

.board-main {
    min-width: 0;
    height: 785px;
    display: block;
    position: relative;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.board-main::before,
.board-main::after {
    content: none;
}

.board-main > * {
    z-index: auto;
}

.enemy-threat-panel {
    position: absolute;
    left: 8px;
    top: 416px;
    width: 172px;
    height: 218px;
    min-height: 218px;
    padding: 12px 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(220, 188, 112, 0.2);
    background:
        linear-gradient(180deg, rgba(14, 18, 30, 0.92), rgba(7, 10, 18, 0.96));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
    z-index: 46;
    display: grid;
    align-content: start;
    gap: 6px;
    overflow: hidden;
}

.enemy-threat-title {
    color: #ecd597;
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.enemy-threat-row {
    display: grid;
    gap: 2px;
    padding: 5px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: default;
}

.enemy-threat-row[aria-hidden="true"] {
    display: none;
}

.enemy-threat-label {
    color: #aeb7d2;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.enemy-threat-value {
    color: #f4ddb2;
    font-size: 0.88rem;
    line-height: 1.18;
}

.enemy-threat-row.active .enemy-threat-value {
    color: #ffd97d;
    text-shadow: 0 0 10px rgba(255, 203, 89, 0.3);
}

.battle-pending-assist-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 28;
    width: min(72%, 620px);
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(236, 214, 157, 0.18);
    background: rgba(8, 14, 28, 0.22);
    color: rgba(246, 234, 202, 0.88);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92);
    box-shadow:
        0 0 24px rgba(255, 220, 142, 0.08),
        inset 0 0 0 1px rgba(255, 244, 217, 0.04);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

.battle-pending-assist-hint.active {
    opacity: 1;
    visibility: visible;
    animation: battlePendingAssistHintPulse 2.4s ease-in-out infinite;
}

@keyframes battlePendingAssistHintPulse {
    0%, 100% {
        opacity: 0.38;
        filter: drop-shadow(0 0 8px rgba(255, 220, 142, 0.14));
    }
    50% {
        opacity: 0.84;
        filter: drop-shadow(0 0 18px rgba(255, 227, 166, 0.28));
    }
}

.enemy-assist-area {
    min-height: 108px;
    min-width: 148px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 7px 9px;
    width: 100%;
    max-width: 182px;
    position: relative;
}

body.battle-controller-active .enemy-assist-area.battle-controller-selected {
    border-color: rgba(112, 255, 172, 0.95);
    box-shadow:
        0 0 0 1px rgba(185, 255, 213, 0.48) inset,
        0 0 20px rgba(87, 255, 154, 0.42);
}

.enemy-assist-preview {
    width: 232px;
    min-height: 112px;
    border-radius: 12px;
    border: 1px solid rgba(218, 177, 96, 0.24);
    background:
        linear-gradient(180deg, rgba(9, 12, 28, 0.92), rgba(7, 10, 22, 0.95));
    padding: 10px 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
    display: grid;
    gap: 8px;
}

.enemy-assist-preview-title {
    font-family: 'Cinzel', serif;
    color: #f0d28a;
    font-size: 1rem;
    letter-spacing: 0.08em;
}

.enemy-assist-preview-body {
    color: #d8dded;
    font-size: 0.92rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.enemy-assist-header {
    font-family: 'Cinzel', serif;
    color: #e6d28b;
    font-size: 1.05rem;
    line-height: 1;
}

.enemy-assist-list {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

.enemy-mini-panel {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 10px 10px;
    display: grid;
    gap: 6px;
    align-content: center;
}

.enemy-mini-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.enemy-mini-label {
    color: #9ea7c3;
    font-size: 0.9rem;
}

.board-enemy-panel .enemy-mini-item:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    align-items: start;
}

.board-enemy-panel .enemy-mini-item:first-child .enemy-mini-label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.board-enemy-panel .enemy-mini-item:first-child .enemy-mini-value {
    width: 100%;
    text-align: right;
    min-width: 0;
    max-width: 100%;
    font-size: clamp(0.82rem, 0.92vw, 1.04rem);
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.enemy-mini-value {
    color: #f0d77b;
    font-family: 'Cinzel', serif;
    font-size: 1.28rem;
    text-align: right;
}

.enemy-mini-value.hp {
    color: #ff8787;
}

.board-enemy-panel .enemy-mini-item-hp {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6px;
    align-items: start;
}

.enemy-mini-hp-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

.enemy-boss-power-banner {
    margin-top: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(220, 188, 112, 0.22);
    background:
        linear-gradient(180deg, rgba(20, 17, 12, 0.96), rgba(10, 9, 7, 0.98));
    color: #f3d688;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-align: center;
    cursor: help;
    pointer-events: auto;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.enemy-boss-power-banner[aria-hidden="true"] {
    display: none;
}

.enemy-boss-power-banner.has-power {
    color: #ffe08b;
    text-shadow: 0 0 12px rgba(255, 214, 104, 0.28);
    animation: boss-power-pulse 2.8s ease-in-out infinite;
}

@keyframes boss-power-pulse {
    0% {
        opacity: 0.72;
        filter: brightness(0.95);
        text-shadow: 0 0 6px rgba(255, 214, 104, 0.12);
    }
    50% {
        opacity: 1;
        filter: brightness(1.16);
        text-shadow: 0 0 16px rgba(255, 214, 104, 0.42), 0 0 28px rgba(255, 214, 104, 0.2);
    }
    100% {
        opacity: 0.72;
        filter: brightness(0.95);
        text-shadow: 0 0 6px rgba(255, 214, 104, 0.12);
    }
}

.enemy-ace-thumb {
    justify-self: center;
    width: 118px;
    aspect-ratio: 58 / 86;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(24, 34, 52, 0.92), rgba(8, 12, 20, 0.94));
    background-size: cover;
    background-position: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    position: relative;
}

.enemy-ace-thumb::after {
    content: 'ACE';
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: rgba(236, 212, 160, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.enemy-ace-thumb.has-image::after {
    color: rgba(255, 244, 220, 0.96);
}

.enemy-ace-thumb.is-disappearing {
    opacity: 0;
    visibility: hidden;
}

.enemy-ace-disappearance-fx {
    position: fixed;
    z-index: 2605;
    border-radius: 14px;
    border: 1px solid rgba(245, 220, 164, 0.44);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.58);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.field {
    min-width: 0;
    position: absolute;
    left: 0;
    right: 0;
    height: 374px;
    z-index: 2;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid rgba(176, 136, 72, 0.34);
    background: #040711;
    box-shadow:
        inset 0 0 0 1px rgba(240, 204, 128, 0.08),
        inset 0 0 28px rgba(0, 0, 0, 0.58);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding-left: 188px;
}

#enemyField {
    top: 0;
    transform: translateY(-18px);
}

#playerField {
    top: 411px;
    margin-top: 0;
}

.slot {
    width: 246px;
    height: 356px;
    border: none;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 46%, rgba(118, 18, 14, 0.28), rgba(6, 6, 10, 0.7) 62%, rgba(0, 0, 0, 0.86)),
        linear-gradient(180deg, rgba(42, 29, 22, 0.54), rgba(6, 7, 12, 0.72));
    box-shadow:
        inset 0 0 0 1px rgba(226, 180, 98, 0.16),
        inset 0 0 28px rgba(0, 0, 0, 0.72),
        0 10px 24px rgba(0, 0, 0, 0.42);
}

body.battle-animating .field {
    overflow: visible;
}

body.battle-animating .slot {
    overflow: visible;
    z-index: 12;
}

.slot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('material/CardSetFrame.png') center/100% 100% no-repeat;
    opacity: 1;
    filter:
        drop-shadow(0 0 4px rgba(233, 190, 112, 0.28))
        drop-shadow(0 9px 10px rgba(0, 0, 0, 0.58));
    pointer-events: none;
}

.slot.active {
    outline: 2px solid rgba(220, 200, 135, 0.45);
    outline-offset: -2px;
    border-radius: 14px;
}

.slot.lane-drop-target {
    outline: 3px solid rgba(255, 228, 116, 0.94);
    outline-offset: -3px;
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(255, 236, 162, 0.55) inset,
        0 0 24px rgba(255, 212, 84, 0.5);
}

.slot.lane-drop-target::before {
    opacity: 1;
    filter:
        drop-shadow(0 0 8px rgba(255, 230, 140, 0.9))
        drop-shadow(0 0 16px rgba(255, 188, 62, 0.7));
    animation: laneDropTargetPulse 0.9s ease-in-out infinite;
}

@keyframes laneDropTargetPulse {
    0% {
        filter:
            drop-shadow(0 0 6px rgba(255, 230, 140, 0.72))
            drop-shadow(0 0 12px rgba(255, 188, 62, 0.48));
    }
    50% {
        filter:
            drop-shadow(0 0 11px rgba(255, 237, 162, 1))
            drop-shadow(0 0 24px rgba(255, 194, 74, 0.86));
    }
    100% {
        filter:
            drop-shadow(0 0 6px rgba(255, 230, 140, 0.72))
        drop-shadow(0 0 12px rgba(255, 188, 62, 0.48));
    }
}

.slot.lane-inspect-selected {
    cursor: pointer;
    outline: 2px solid rgba(120, 194, 255, 0.54);
    outline-offset: -2px;
    box-shadow:
        0 0 0 1px rgba(160, 220, 255, 0.24) inset,
        0 0 18px rgba(86, 166, 255, 0.18);
}

.slot.lane-inspect-selected::before {
    opacity: 1;
    filter:
        drop-shadow(0 0 7px rgba(150, 210, 255, 0.72))
        drop-shadow(0 0 18px rgba(88, 156, 255, 0.56));
    animation: laneInspectSelectedPulse 1.25s ease-in-out infinite;
}

.slot.lane-inspect-selected::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(88, 162, 255, 0.1), rgba(42, 112, 214, 0.04));
    box-shadow:
        inset 0 0 0 1px rgba(166, 224, 255, 0.18),
        inset 0 0 18px rgba(102, 176, 255, 0.12);
    pointer-events: none;
    animation: laneInspectBodyPulse 1.25s ease-in-out infinite;
}

body.battle-controller-active .slot.battle-controller-selected {
    outline: 5px solid rgba(123, 255, 184, 1);
    outline-offset: -6px;
    box-shadow:
        0 0 0 2px rgba(226, 255, 237, 0.78) inset,
        0 0 28px rgba(87, 255, 154, 0.64),
        0 0 46px rgba(42, 232, 112, 0.34),
        inset 0 0 42px rgba(84, 255, 148, 0.24);
}

body.battle-controller-active .slot.battle-controller-selected::before {
    filter:
        drop-shadow(0 0 10px rgba(140, 255, 194, 0.95))
        drop-shadow(0 0 22px rgba(53, 232, 120, 0.72));
}

body.battle-controller-active .slot.battle-controller-selected::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 3px solid rgba(183, 255, 211, 0.62);
    border-radius: 10px;
    background: radial-gradient(ellipse at 50% 52%, rgba(84, 255, 148, 0.12), transparent 62%);
    box-shadow:
        inset 0 0 18px rgba(118, 255, 174, 0.22),
        0 0 16px rgba(70, 255, 140, 0.34);
    pointer-events: none;
}

@keyframes laneInspectSelectedPulse {
    0% {
        filter:
            drop-shadow(0 0 5px rgba(150, 210, 255, 0.54))
            drop-shadow(0 0 12px rgba(88, 156, 255, 0.34));
    }
    50% {
        filter:
            drop-shadow(0 0 11px rgba(188, 232, 255, 0.98))
            drop-shadow(0 0 28px rgba(90, 166, 255, 0.72));
    }
    100% {
        filter:
            drop-shadow(0 0 5px rgba(150, 210, 255, 0.54))
            drop-shadow(0 0 12px rgba(88, 156, 255, 0.34));
    }
}

.lane-inspect-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(150, 214, 255, 0.34);
    background: rgba(10, 26, 44, 0.76);
    color: #d8f1ff;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.92);
    pointer-events: none;
    box-shadow:
        0 0 12px rgba(84, 158, 255, 0.16),
        inset 0 0 0 1px rgba(201, 238, 255, 0.06);
}

@keyframes laneInspectBodyPulse {
    0%, 100% {
        opacity: 0.42;
    }
    50% {
        opacity: 0.82;
    }
}

.card {
    width: 236px;
    height: 344px;
    position: relative;
    z-index: 2;
    cursor: grab;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.58);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    backface-visibility: hidden;
}

.card[class*="card-rarity-tier-"] {
    --rarity-glow: rgba(226, 212, 170, 0.26);
    --rarity-glow-strong: rgba(244, 229, 188, 0.36);
    box-shadow:
        0 12px 20px rgba(0, 0, 0, 0.58),
        0 0 16px var(--rarity-glow),
        0 0 26px var(--rarity-glow-strong);
}

.card.card-rarity-tier-1 {
    --rarity-glow: rgba(228, 217, 188, 0.2);
    --rarity-glow-strong: rgba(235, 225, 200, 0.28);
}

.card.card-rarity-tier-2 {
    --rarity-glow: rgba(131, 216, 150, 0.26);
    --rarity-glow-strong: rgba(165, 237, 186, 0.34);
}

.card.card-rarity-tier-3 {
    --rarity-glow: rgba(94, 176, 243, 0.3);
    --rarity-glow-strong: rgba(134, 202, 252, 0.4);
}

.card.card-rarity-tier-4 {
    --rarity-glow: rgba(170, 126, 250, 0.32);
    --rarity-glow-strong: rgba(199, 166, 255, 0.44);
    animation: cardRarityPulse 1.8s ease-in-out infinite;
}

.card.card-rarity-tier-5 {
    --rarity-glow: rgba(245, 173, 88, 0.34);
    --rarity-glow-strong: rgba(255, 205, 138, 0.46);
    animation: cardRarityPulse 1.5s ease-in-out infinite;
}

.card.card-rarity-tier-6 {
    --rarity-glow: rgba(255, 101, 93, 0.38);
    --rarity-glow-strong: rgba(255, 157, 150, 0.54);
    animation: cardRarityPulseStrong 1.35s ease-in-out infinite;
}

.card.card-rarity-tier-7 {
    --rarity-glow: rgba(255, 234, 119, 0.42);
    --rarity-glow-strong: rgba(255, 243, 166, 0.62);
    animation: cardRarityPulseStrong 1.05s ease-in-out infinite;
}

@keyframes cardRarityPulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.05);
    }
}

@keyframes cardRarityPulseStrong {
    0%, 100% {
        filter: brightness(1.01);
    }
    50% {
        filter: brightness(1.09);
    }
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.64);
}

.card-frame {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 9;
    pointer-events: none;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.card-cost {
    position: absolute;
    top: 4px;
    left: 7px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.72rem;
    font-family: 'Cinzel', serif;
    font-variant-numeric: tabular-nums;
    color: #eef3df;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
    z-index: 12;
}

.card-cost-number {
    width: 70%;
    height: 70%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.card-cost-text {
    display: block;
    transform: translateY(-1px);
}

.card-name {
    position: absolute;
    top: 6.5px;
    left: 57.2px;
    right: 60px;
    font-size: 1.22rem;
    text-align: center;
    color: #f8f8f8;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 12;
}

.card-name.card-name-curse-blink {
    animation: cardNameCurseBlinkPurple 0.9s ease-in-out infinite;
}

@keyframes cardNameCurseBlinkPurple {
    0%, 100% {
        color: #f0d7ff;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.95),
            0 0 6px rgba(190, 112, 255, 0.55);
        filter: saturate(1.05);
    }
    50% {
        color: #ffffff;
        text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.95),
            0 0 14px rgba(182, 76, 255, 0.98),
            0 0 24px rgba(142, 56, 255, 0.75);
        filter: saturate(1.22);
    }
}

.card-bp-icon {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 36px;
    height: 36px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 12;
}

.card-bp-letter {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
    line-height: 1;
}

.card-image {
    position: absolute;
    top: 46px;
    left: 9px;
    right: 9px;
    height: 186px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: #1f1f1f;
    z-index: 4;
    image-rendering: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
    transform-origin: center;
}

.library-card-node .card-image,
.character-deck-card-node .card-image,
.title-showcase .card-image,
.title-fallback-image {
    filter: none;
    transform: translateZ(0);
}

.card-lowq-image .card-image {
    image-rendering: auto;
    filter: none;
    transform: none;
}

.card-attr-orbs {
    position: absolute;
    top: 48px;
    right: 20px;
    z-index: 12;
    display: flex;
    gap: 4px;
    max-width: 64px;
    justify-content: flex-end;
    pointer-events: none;
}

.card-attr-orb {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
}

.card-attr-orb::after {
    content: attr(data-attr-code);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f8f5ea;
    font-family: 'Cinzel', serif;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.96),
        0 0 4px rgba(0, 0, 0, 0.72);
    pointer-events: none;
}

.card-item-badges {
    position: absolute;
    top: 66px;
    left: 20px;
    z-index: 12;
    display: flex;
    gap: 4px;
    pointer-events: none;
}

.card-item-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
}

.card-item-badge-item {
    animation: cardItemBadgeBlinkRed 1s ease-in-out infinite;
}

.card-item-badge-curse {
    animation: cardItemBadgeBlinkPurple 1s ease-in-out infinite;
}

.card-village-resident-badge {
    position: absolute;
    left: 50%;
    bottom: 112px;
    z-index: 13;
    width: 48px;
    height: 48px;
    transform: translateX(-50%);
    border: 1px solid rgba(193, 143, 76, 0.72);
    border-radius: 50%;
    background: rgba(5, 10, 20, 0.68) url('drift_memory/ui/parts/INHABITANT.png') center / contain no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.86);
    pointer-events: none;
}

@keyframes cardItemBadgeBlinkRed {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 3px rgba(255, 70, 70, 0.45));
        opacity: 0.84;
    }
    50% {
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 9px rgba(255, 70, 70, 0.95));
        opacity: 1;
    }
}

@keyframes cardItemBadgeBlinkPurple {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 3px rgba(178, 88, 255, 0.5));
        opacity: 0.84;
    }
    50% {
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 9px rgba(178, 88, 255, 0.98));
        opacity: 1;
    }
}

.card-image-meta {
    position: absolute;
    z-index: 12;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #f4f4f4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
    font-size: 0.88rem;
    pointer-events: none;
}

.card-image-lv {
    top: 51px;
    left: 20px;
}

.card-image-tag {
    top: 212px;
    left: 16px;
}

.card-image-race {
    top: 212px;
    right: 16px;
}

.card-effect-panel {
    position: absolute;
    top: 235px;
    left: 15px;
    right: 15px;
    height: 58px;
    padding: 8px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    color: #f7f7f7;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.card-effect-line {
    font-size: 0.88rem;
    line-height: 1.18;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-effect-line.effect-active {
    color: #ffe26d;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.92),
        0 0 8px rgba(255, 215, 82, 0.72),
        0 0 14px rgba(255, 176, 48, 0.38);
    animation: activeEffectPulse 1.8s ease-in-out infinite;
}

.detail-skill-info-line.effect-active {
    color: #ffe26d;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.92),
        0 0 8px rgba(255, 215, 82, 0.72),
        0 0 14px rgba(255, 176, 48, 0.38);
    animation: activeEffectPulse 1.8s ease-in-out infinite;
}

.card-effect-line.effect-suppressed,
.detail-skill-info-line.effect-suppressed {
    color: #161616;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
    animation: suppressedEffectPulse 1.6s ease-in-out infinite;
}

@keyframes suppressedEffectPulse {
    0%, 100% {
        color: #101010;
        opacity: 0.92;
    }
    50% {
        color: #8f8f8f;
        opacity: 0.72;
    }
}

.card-name.card-name-curse-blink {
    animation: cardNameCurseBlinkPurple 0.9s ease-in-out infinite !important;
}

.card.lane-predict-win {
    animation: lanePredictWinPulse 1.6s ease-in-out infinite;
}

.card.lane-predict-lose {
    animation: lanePredictLosePulse 1.6s ease-in-out infinite;
}

.records-modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.records-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(6, 8, 16, 0.58), rgba(6, 8, 16, 0.76)),
        url("material/Record_Field.png") center / cover no-repeat;
    backdrop-filter: blur(3px);
}

.records-modal-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: calc(100vw - 8px);
    height: calc(100vh - 8px);
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    z-index: 1;
    box-sizing: border-box;
    border: 1px solid rgba(226, 193, 107, 0.45);
    border-radius: 10px;
    background:
        radial-gradient(circle at top, rgba(214, 174, 76, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(20, 18, 30, 0.72), rgba(10, 10, 16, 0.84)),
        url("material/Record_Field.png") center / cover no-repeat;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    color: #f5e7b6;
}

body.fixed-canvas-mode .records-modal-panel {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}

.records-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 14px 8px;
}

.records-modal-title {
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: #f1cc68;
}

.records-close-btn,
.records-tab-btn {
    border: 1px solid rgba(226, 193, 107, 0.38);
    background: rgba(18, 15, 25, 0.92);
    color: #f5e7b6;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.records-close-btn:hover,
.records-tab-btn:hover,
.records-tab-btn.active {
    background: rgba(68, 56, 24, 0.95);
    border-color: rgba(241, 204, 104, 0.74);
}

.records-close-btn {
    min-width: 110px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.95rem;
    margin-left: auto;
}

.records-tab-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 12px 12px;
}

.records-tab-btn {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.92rem;
}

.records-modal-content {
    flex: 1;
    overflow: auto;
    padding: 0 12px 12px;
    min-height: 0;
}

.records-section {
    border: 1px solid rgba(226, 193, 107, 0.18);
    border-radius: 10px;
    background: rgba(12, 11, 18, 0.75);
    padding: 10px;
    min-width: 0;
    overflow: hidden;
}

.records-section-title {
    margin-bottom: 16px;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    color: #f1cc68;
}

.records-achievements-section {
    margin-top: 12px;
}

.records-achievements-section .records-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.records-achievement-count {
    font-size: 0.92rem;
    color: rgba(245, 231, 182, 0.78);
    letter-spacing: 0;
}

.records-achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.records-achievement-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 92px;
    padding: 10px;
    border: 1px solid rgba(226, 193, 107, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
}

.records-achievement-card.is-locked {
    opacity: 0.62;
}

.records-achievement-icon {
    width: 68px;
    height: 68px;
    border: 1px solid rgba(226, 193, 107, 0.18);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.28);
}

.records-achievement-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.records-achievement-body {
    min-width: 0;
}

.records-achievement-title {
    color: #fff0c7;
    font-size: 0.98rem;
    line-height: 1.25;
}

.records-achievement-desc {
    margin-top: 4px;
    color: rgba(245, 231, 182, 0.7);
    font-size: 0.78rem;
    line-height: 1.35;
}

.records-achievement-state {
    margin-top: 6px;
    color: rgba(241, 204, 104, 0.9);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.records-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.records-metric-row,
.records-character-row,
.records-history-card {
    border: 1px solid rgba(226, 193, 107, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.records-metric-row {
    padding: 12px 14px;
}

.records-metric-row.has-img {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.records-metric-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
}

.records-metric-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.3s ease;
}

.records-metric-row.has-img:hover .records-metric-img img {
    transform: scale(1.04);
}

.records-metric-img::after {
    content: '🔍';
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.records-metric-img {
    position: relative;
}

.records-metric-row.has-img:hover .records-metric-img::after {
    opacity: 0.8;
}

.records-metric-text {
    padding: 10px 14px 12px;
}

.records-metric-label {
    font-size: 0.84rem;
    color: rgba(245, 231, 182, 0.72);
}

.records-metric-value {
    margin-top: 6px;
    font-size: 1.1rem;
    color: #fff0c7;
}

.records-metric-row:not(.has-img) .records-metric-label,
.records-metric-row:not(.has-img) .records-metric-value {
    /* 画像なしの場合は元のpaddingをそのまま使用 */
}

.records-character-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: auto;
}

.records-character-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.55fr) repeat(4, minmax(88px, 0.7fr));
    gap: 12px;
    padding: 12px 14px;
    align-items: center;
    min-width: 700px;
}

.records-character-head {
    background: rgba(226, 193, 107, 0.08);
}

.records-character-name {
    color: #fff0c7;
}

.records-character-value {
    text-align: right;
    color: #f5e7b6;
}

.records-history-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}

.records-history-summary-shell {
    overflow-x: auto;
    padding-bottom: 4px;
}

.records-history-summary-head,
.records-history-summary-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.45fr) minmax(160px, 1.05fr) minmax(92px, 0.62fr) minmax(108px, 0.8fr) minmax(86px, 0.58fr) 98px;
    gap: 12px;
    align-items: center;
    min-width: 800px;
}

.records-history-summary-head {
    padding: 0 14px 10px;
    color: rgba(245, 231, 182, 0.72);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.records-history-summary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.records-history-summary-row {
    padding: 12px 14px;
    border: 1px solid rgba(226, 193, 107, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.records-history-summary-row.active {
    border-color: rgba(241, 204, 104, 0.42);
    background: rgba(68, 56, 24, 0.18);
}

.records-controller-selected {
    border-color: rgba(77, 255, 132, 0.96) !important;
    box-shadow:
        0 0 0 2px rgba(77, 255, 132, 0.52),
        0 0 22px rgba(77, 255, 132, 0.38) !important;
    outline: none;
}

.records-controller-selected .records-metric-label,
.records-controller-selected .records-character-name,
.records-controller-selected .records-history-summary-stage,
.records-controller-selected .records-achievement-title,
.records-controller-selected.records-history-back-btn {
    color: #76ff94 !important;
    text-shadow: 0 0 10px rgba(77, 255, 132, 0.72);
}

body.controller-input-active .records-modal .records-metric-row.has-img:hover .records-metric-img img {
    transform: none;
}

body.controller-input-active .records-modal .records-metric-row.has-img:hover .records-metric-img::after {
    opacity: 0;
}

.records-history-summary-stage,
.records-history-summary-datetime,
.records-history-summary-clear,
.records-history-summary-character,
.records-history-summary-result {
    min-width: 0;
    color: #f5e7b6;
}

.records-history-summary-stage {
    color: #fff0c7;
}

.records-history-summary-result.is-win {
    color: #8ee28e;
}

.records-history-summary-result.is-loss {
    color: #ff9e9e;
}

.records-history-detail-btn {
    border: 1px solid rgba(226, 193, 107, 0.34);
    background: rgba(18, 15, 25, 0.92);
    color: #f5e7b6;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    min-width: 98px;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    justify-self: end;
    box-sizing: border-box;
}

.records-history-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.records-history-back-btn {
    border: 1px solid rgba(226, 193, 107, 0.34);
    background: rgba(18, 15, 25, 0.92);
    color: #f5e7b6;
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    flex: 0 0 auto;
}

.records-history-card {
    padding: 12px;
}

.records-history-body {
    display: grid;
    grid-template-columns: clamp(260px, 22vw, 320px) minmax(0, 1fr);
    gap: 16px;
    margin-top: 12px;
    align-items: start;
}

.records-history-leader-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.records-history-leader-title {
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    color: rgba(245, 231, 182, 0.72);
}

.records-history-leader-card-slot {
    min-height: 400px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.records-history-leader-name {
    font-size: 1.16rem;
    color: #fff4d4;
}

.records-history-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.records-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.records-history-stage {
    color: #fff0c7;
}

.records-history-result {
    font-size: 0.84rem;
    letter-spacing: 0.08em;
}

.records-history-result.is-win {
    color: #8ee28e;
}

.records-history-result.is-loss {
    color: #ff9e9e;
}

.records-history-line {
    margin-top: 4px;
    font-size: 0.88rem;
    color: rgba(245, 231, 182, 0.8);
}

.records-history-deck-block {
    min-width: 0;
}

.records-history-deck-title {
    margin-bottom: 8px;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    color: rgba(245, 231, 182, 0.72);
}

.records-history-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 174px);
    justify-content: start;
    gap: 12px;
}

.records-history-deck-slot {
    width: 174px;
    height: 254px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.records-history-card-preview {
    transform-origin: top center !important;
    pointer-events: none;
}

.records-history-card-preview.card {
    width: 236px;
    height: 344px;
    border-radius: 14px;
}

.records-history-card-preview .card-cost {
    top: 4px;
    left: 7px;
}

.records-history-card-preview .card-name {
    top: 6.5px;
    left: 57.2px;
    right: 60px;
    font-size: 1.22rem;
}

.records-history-card-preview .card-bp-icon {
    top: 7px;
    right: 8px;
    width: 36px;
    height: 36px;
}

.records-history-card-preview .card-bp-letter {
    font-size: 14px;
}

.records-history-card-preview .card-image {
    top: 48px;
    left: 9px;
    right: 9px;
    height: 186px;
}

.records-history-card-preview .card-attr-orbs {
    top: 48px;
    right: 20px;
    gap: 4px;
    max-width: 64px;
}

.records-history-card-preview .card-attr-orb {
    width: 18px;
    height: 18px;
}

.records-history-card-preview .card-item-badges {
    top: 66px;
    left: 20px;
    gap: 4px;
}

.records-history-card-preview .card-item-badge {
    width: 34px;
    height: 34px;
}

.records-history-card-preview .card-effect-panel {
    top: 233px;
    left: 15px;
    right: 15px;
    height: 58px;
    padding: 8px;
}

.records-history-card-preview .card-effect-line {
    font-size: 0.88rem;
}

.records-history-card-preview .card-stats {
    left: 14px;
    right: 14px;
    bottom: 5px;
    gap: 6px;
}

.records-history-card-preview .card-stats span {
    font-size: 1.34rem;
    padding: 7px 0 6px;
}

.records-history-leader-card-slot .records-history-card-preview {
    transform: scale(0.92);
    transform-origin: top center !important;
    margin-top: 8px;
}

.records-history-deck-slot .records-history-card-preview {
    transform: scale(0.68);
    transform-origin: top center !important;
    margin-top: 0;
}

.records-empty {
    padding: 20px 12px;
    color: rgba(245, 231, 182, 0.7);
}

@media (max-width: 720px) {
    .records-modal {
        padding: 10px;
    }

    .records-modal-panel {
        width: 100%;
        height: 100%;
    }

    .records-modal-head,
    .records-tab-row,
    .records-modal-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .records-character-row {
        grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(64px, 0.8fr));
        gap: 8px;
        font-size: 0.82rem;
        min-width: 560px;
    }

    .records-history-body {
        grid-template-columns: 1fr;
    }

    .records-history-summary-head {
        display: none;
    }

    .records-history-summary-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .records-history-leader-card-slot {
        min-height: 400px;
    }

    .records-history-deck-grid {
        grid-template-columns: repeat(auto-fill, 174px);
        gap: 12px;
    }

    .records-history-deck-slot {
        width: 174px;
        height: 254px;
    }

    .records-history-leader-card-slot .records-history-card-preview {
        transform: scale(0.92);
        margin-top: 8px;
    }

    .records-history-deck-slot .records-history-card-preview {
        transform: scale(0.68);
    }
}

.card.lane-predict-draw {
    animation: lanePredictDrawPulse 1.6s ease-in-out infinite;
}

@keyframes lanePredictWinPulse {
    0% {
        box-shadow: 0 0 0 rgba(90, 170, 255, 0);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 22px rgba(90, 170, 255, 0.78), 0 0 42px rgba(60, 130, 240, 0.42);
        filter: brightness(1.07);
    }
    100% {
        box-shadow: 0 0 0 rgba(90, 170, 255, 0);
        filter: brightness(1);
    }
}

@keyframes lanePredictLosePulse {
    0% {
        box-shadow: 0 0 0 rgba(255, 90, 90, 0);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 22px rgba(255, 90, 90, 0.78), 0 0 42px rgba(220, 60, 60, 0.42);
        filter: brightness(0.93);
    }
    100% {
        box-shadow: 0 0 0 rgba(255, 90, 90, 0);
        filter: brightness(1);
    }
}

@keyframes lanePredictDrawPulse {
    0% {
        box-shadow: 0 0 0 rgba(110, 255, 130, 0);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 22px rgba(110, 255, 130, 0.78), 0 0 42px rgba(50, 200, 90, 0.42);
        filter: brightness(1.04);
    }
    100% {
        box-shadow: 0 0 0 rgba(110, 255, 130, 0);
        filter: brightness(1);
    }
}
body.assist-mode #hand .card-effect-panel {
    animation: assistPanelPulse 1.5s ease-in-out infinite;
}

body.assist-mode #hand .card-effect-line {
    animation: assistTextPulse 1.5s ease-in-out infinite;
}

@keyframes assistPanelPulse {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.22) saturate(1.15); }
    100% { filter: brightness(1); }
}

@keyframes assistTextPulse {
    0% { color: #fff7d4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
    50% { color: #ffffff; text-shadow: 0 1px 5px rgba(255, 238, 120, 0.75); }
    100% { color: #fff7d4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
}

@keyframes activeEffectPulse {
    0% {
        color: #ffe26d;
        opacity: 1;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.92),
            0 0 8px rgba(255, 215, 82, 0.72),
            0 0 14px rgba(255, 176, 48, 0.38);
    }
    50% {
        color: #fff3a6;
        opacity: 0.82;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.92),
            0 0 12px rgba(255, 232, 112, 0.92),
            0 0 22px rgba(255, 190, 58, 0.58);
    }
    100% {
        color: #ffe26d;
        opacity: 1;
        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.92),
            0 0 8px rgba(255, 215, 82, 0.72),
            0 0 14px rgba(255, 176, 48, 0.38);
    }
}

.card-stats {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    z-index: 12;
}

.card-stats span {
    text-align: center;
    padding: 7px 0 6px;
    border-radius: 6px;
    font-size: 1.34rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    background: transparent;
    border: none;
    position: relative;
}

.detail-stats span {
    position: relative;
    display: inline-block;
}

.card-stats span.stat-up,
.detail-stats span.stat-up {
    animation: statUpPulse 1.7s ease-in-out infinite;
}

.card-stats span.stat-down,
.detail-stats span.stat-down {
    animation: statDownPulse 1.7s ease-in-out infinite;
}

@keyframes statUpPulse {
    0% { color: inherit; text-shadow: 0 0 0 rgba(255, 217, 64, 0); }
    50% { color: #ffd940; text-shadow: 0 0 10px rgba(255, 217, 64, 0.85); }
    100% { color: inherit; text-shadow: 0 0 0 rgba(255, 217, 64, 0); }
}

@keyframes statDownPulse {
    0% { color: inherit; text-shadow: 0 0 0 rgba(177,109,255,0); }
    50% { color: #b16dff; text-shadow: 0 0 12px rgba(177,109,255,0.78); }
    100% { color: inherit; text-shadow: 0 0 0 rgba(177,109,255,0); }
}

.battle-stat-flash {
    animation: battleStatFlash 0.28s linear 3;
}

@keyframes battleStatFlash {
    0% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.2; filter: brightness(2); }
    100% { opacity: 1; filter: brightness(1); }
}

.battle-defeated {
    animation: battleDefeated 0.26s ease forwards;
}

@keyframes battleDefeated {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.94); }
}

.battle-clear-fade {
    animation: battleClearFade 0.5s ease forwards;
}

@keyframes battleClearFade {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    100% { opacity: 0; transform: scale(0.92); filter: brightness(0.7); }
}

.enemy-drop-in {
    animation: enemyDropIn 0.52s cubic-bezier(.16,.8,.28,1) both;
}

@keyframes enemyDropIn {
    0% { opacity: 0; transform: translateY(-220px) scale(0.95); }
    72% { opacity: 1; transform: translateY(12px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.assist-announcement {
    position: fixed;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) scale(0.95);
    min-width: 360px;
    max-width: 72vw;
    padding: 16px 22px;
    border-radius: 12px;
    border: 1px solid rgba(238, 200, 84, 0.75);
    background: linear-gradient(180deg, rgba(12, 16, 34, 0.95), rgba(8, 11, 24, 0.93));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.48);
    opacity: 0;
    pointer-events: none;
    z-index: 9000;
    transition: opacity 180ms ease, transform 180ms ease;
}

.assist-announcement.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.assist-announcement.enemy-assist-anchor {
    transform: translate(-50%, 0) scale(0.95);
}

.assist-announcement.enemy-assist-anchor.show {
    transform: translate(-50%, 0) scale(1);
}

.assist-announcement-title {
    color: #ffe588;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.assist-announcement-detail {
    margin-top: 10px;
    color: #f0f4ff;
    font-size: 21px;
    font-weight: 600;
    text-align: center;
    line-height: 1.45;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.enemy-assist-beam-fx {
    position: fixed;
    z-index: 8900;
    height: 5px;
    border-radius: 999px;
    pointer-events: none;
    transform-origin: left center;
    background:
        linear-gradient(90deg,
            rgba(148, 22, 46, 0.1) 0%,
            rgba(176, 42, 74, 0.7) 28%,
            rgba(236, 188, 116, 0.95) 55%,
            rgba(176, 42, 74, 0.7) 78%,
            rgba(148, 22, 46, 0.1) 100%);
    box-shadow:
        0 0 8px rgba(255, 134, 98, 0.56),
        0 0 22px rgba(130, 16, 48, 0.48);
}

.enemy-assist-hit-fx {
    position: fixed;
    z-index: 8910;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(255, 242, 198, 0.98) 0%, rgba(247, 177, 98, 0.86) 34%, rgba(105, 18, 44, 0.42) 62%, rgba(0, 0, 0, 0) 100%);
    box-shadow:
        0 0 10px rgba(255, 187, 120, 0.66),
        0 0 28px rgba(122, 20, 58, 0.55);
}

.skill-wave-fx {
    position: fixed;
    z-index: 8930;
    width: 218px;
    height: 218px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(144, 238, 255, 0.96);
    box-shadow:
        0 0 18px rgba(132, 232, 255, 0.82),
        0 0 48px rgba(74, 186, 255, 0.72),
        0 0 86px rgba(46, 126, 218, 0.52),
        inset 0 0 16px rgba(218, 250, 255, 0.58);
    background:
        radial-gradient(circle,
            rgba(194, 250, 255, 0.46) 0%,
            rgba(122, 220, 255, 0.22) 34%,
            rgba(72, 166, 248, 0.1) 58%,
            rgba(0, 0, 0, 0) 78%);
}

.skill-wave-fx.all-target {
    width: 304px;
    height: 304px;
    border-color: rgba(184, 244, 255, 0.98);
}

.skill-wave-fx.ring-b {
    filter: hue-rotate(-14deg) saturate(1.18);
}

.skill-wave-fx.ring-c {
    filter: hue-rotate(8deg) saturate(1.24);
}

.skill-destroy-fx {
    position: fixed;
    z-index: 8940;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle,
            rgba(255, 248, 212, 0.98) 0%,
            rgba(255, 172, 94, 0.9) 30%,
            rgba(228, 72, 48, 0.76) 54%,
            rgba(62, 8, 12, 0.22) 78%,
            rgba(0, 0, 0, 0) 100%);
    box-shadow:
        0 0 14px rgba(255, 188, 120, 0.74),
        0 0 34px rgba(214, 76, 58, 0.62);
}

.skill-name-fx {
    --skill-fx-core: #ffdd92;
    --skill-fx-glow: rgba(255, 180, 95, 0.62);
    --skill-fx-width: 360px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 8960;
    width: var(--skill-fx-width);
    height: 200px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.skill-name-fx-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--skill-fx-core) 84%, #ffffff 16%);
    box-shadow:
        0 0 22px var(--skill-fx-glow),
        inset 0 0 14px color-mix(in srgb, var(--skill-fx-core) 46%, transparent 54%);
    background: radial-gradient(circle,
        color-mix(in srgb, var(--skill-fx-core) 28%, transparent 72%) 0%,
        transparent 66%);
}

.skill-name-fx-ring.ring-main {
    width: 200px;
    height: 200px;
}

.skill-name-fx-ring.ring-sub {
    width: 268px;
    height: 120px;
    opacity: 0.78;
}

.skill-name-fx-ring.ring-sub2 {
    width: 120px;
    height: 132px;
    opacity: 0.86;
}

.skill-name-fx-banner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(calc(var(--skill-fx-width) + 68px), 820px);
    aspect-ratio: 2121 / 508;
    transform: translate(-50%, -50%);
    background: url("ui/skill_name.png") center / 100% 100% no-repeat;
    filter:
        drop-shadow(0 7px 16px rgba(0, 0, 0, 0.72))
        drop-shadow(0 0 20px color-mix(in srgb, var(--skill-fx-core) 34%, transparent 66%));
    opacity: 0.96;
}

.skill-name-fx-banner::before,
.skill-name-fx-banner::after {
    content: none;
}

.skill-name-fx-banner::before {
    left: 12px;
}

.skill-name-fx-banner::after {
    right: 12px;
    transform: translateY(-50%) scaleX(-1);
}

.skill-name-fx-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 190px;
    max-width: min(calc(var(--skill-fx-width) - 44px), 660px);
    padding: 9px 26px 10px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--skill-fx-core) 72%, #fff0bd 28%);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--skill-fx-core) 30%, rgba(255, 246, 220, 0.04) 70%) 0%,
        rgba(23, 9, 8, 0.78) 48%,
        rgba(5, 4, 8, 0.82) 100%);
    color: #fff6e6;
    font-family: 'Cinzel', serif;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.96),
        0 0 14px color-mix(in srgb, var(--skill-fx-core) 52%, transparent 48%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 240, 187, 0.18),
        0 0 13px color-mix(in srgb, var(--skill-fx-core) 44%, transparent 56%),
        0 0 40px color-mix(in srgb, var(--skill-fx-core) 20%, transparent 80%);
}

.skill-name-fx.multi {
    height: 220px;
}

.skill-name-fx.multi .ring-main {
    width: min(calc(var(--skill-fx-width) - 120px), 420px);
    height: 160px;
}

.skill-name-fx.multi .ring-sub {
    width: min(calc(var(--skill-fx-width) - 20px), 720px);
    height: 116px;
    opacity: 0.72;
}

.skill-name-fx.multi .ring-sub2 {
    width: min(calc(var(--skill-fx-width) - 180px), 260px);
    height: 120px;
    opacity: 0.82;
}

.skill-name-fx-stack {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(calc(var(--skill-fx-width) - 18px), 96vw);
}

.skill-name-fx-chip {
    --skill-fx-core: #ffdd92;
    --skill-fx-glow: rgba(255, 180, 95, 0.62);
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 15px 9px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--skill-fx-core) 72%, #fff0bd 28%);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--skill-fx-core) 26%, rgba(255, 246, 220, 0.04) 74%) 0%,
        rgba(8, 4, 0, 0.78) 100%);
    color: #fff6e6;
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.92),
        0 0 14px color-mix(in srgb, var(--skill-fx-core) 46%, transparent 54%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 240, 187, 0.15),
        0 0 12px color-mix(in srgb, var(--skill-fx-core) 40%, transparent 60%),
        0 0 30px color-mix(in srgb, var(--skill-fx-core) 18%, transparent 82%);
}

.damage-fly-text {
    position: fixed;
    z-index: 2500;
    pointer-events: none;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 2.8rem;
    letter-spacing: 0.02em;
    color: #ff4040;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 12px rgba(0, 0, 0, 0.8);
}

.damage-fly-text.enemy {
    color: #ff4545;
}

.damage-fly-text.player {
    color: #ff6f6f;
}

.damage-fly-text.rebuild {
    font-size: 2.05rem;
    color: #ffb25c;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 14px rgba(255, 166, 80, 0.5);
}

#playerHP.rebuild-hit {
    animation: rebuildHpPulse 1.1s ease-out;
}

@keyframes rebuildHpPulse {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.16); filter: brightness(1.55); }
    100% { transform: scale(1); filter: brightness(1); }
}

.battle-shake {
    animation: battleShake 0.22s linear 1;
}

@keyframes battleShake {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-5px, 2px); }
    40% { transform: translate(5px, -2px); }
    60% { transform: translate(-3px, 1px); }
    80% { transform: translate(3px, -1px); }
    100% { transform: translate(0, 0); }
}

.enemy-impact-sprite {
    position: fixed;
    z-index: 2600;
    width: 192px;
    height: 192px;
    margin-left: -96px;
    margin-top: -96px;
    pointer-events: none;
    background-image: url('images/animation/Impact.png');
    background-repeat: no-repeat;
    background-size: 960px 576px;
    background-position: 0 0;
    image-rendering: auto;
    opacity: 1;
    transform: scale(0.86);
}

.battle-finish-freeze {
    filter: brightness(1.08) contrast(1.08);
}

.battle-finish-shake {
    animation: battleFinishShake 240ms linear 1;
}

@keyframes battleFinishShake {
    0% { transform: translate(0, 0); filter: brightness(1); }
    18% { transform: translate(-7px, 3px); filter: brightness(1.06); }
    36% { transform: translate(7px, -3px); filter: brightness(1.02); }
    54% { transform: translate(-4px, 2px); filter: brightness(1.06); }
    72% { transform: translate(4px, -2px); filter: brightness(1.03); }
    100% { transform: translate(0, 0); filter: brightness(1); }
}

.battle-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1200;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.battle-fog-overlay {
    position: fixed;
    inset: -6%;
    pointer-events: none;
    z-index: 930;
    opacity: 0;
    transition: opacity 280ms ease;
    background-image:
        radial-gradient(ellipse at 28% 32%, rgba(205, 216, 228, 0.13) 0%, rgba(205, 216, 228, 0.03) 45%, rgba(0, 0, 0, 0) 70%),
        radial-gradient(ellipse at 72% 66%, rgba(171, 184, 200, 0.12) 0%, rgba(171, 184, 200, 0.03) 48%, rgba(0, 0, 0, 0) 72%),
        url('images/animation/fog.png'),
        url('images/animation/fog.png');
    background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
    background-size: auto, auto, 640px auto, 760px auto;
    background-position: 28% 32%, 72% 66%, 0 0, 0 100%;
    filter: saturate(0.9) brightness(0.9);
    mix-blend-mode: screen;
    will-change: transform, background-position;
}

.battle-fog-overlay.active {
    opacity: 0.5;
    animation: battleFogDrift 24s linear infinite;
}

.battle-ash-overlay {
    position: fixed;
    inset: 0;
    z-index: 932;
    pointer-events: none;
    overflow: hidden;
    opacity: 1;
    mix-blend-mode: screen;
}

.battle-ash-particle {
    position: absolute;
    left: -8vw;
    top: var(--ash-y, 50%);
    width: var(--ash-size, 4px);
    height: var(--ash-size, 4px);
    border-radius: 999px;
    opacity: 0;
    background: radial-gradient(circle, rgba(238, 228, 210, 0.9), rgba(174, 154, 132, 0.42) 54%, transparent 78%);
    filter: blur(var(--ash-blur, 0.2px));
    animation: battleAshDrift var(--ash-duration, 8s) linear forwards;
    will-change: transform, opacity;
}

.battle-ash-particle.ember {
    background: radial-gradient(circle, rgba(255, 224, 124, 1), rgba(255, 119, 39, 0.82) 42%, rgba(185, 45, 24, 0.26) 72%, transparent 84%);
    box-shadow:
        0 0 8px rgba(255, 147, 62, 0.62),
        0 0 18px rgba(229, 59, 25, 0.28);
}

@keyframes battleAshDrift {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.62);
    }
    10% {
        opacity: var(--ash-opacity, 0.55);
    }
    86% {
        opacity: var(--ash-opacity, 0.55);
    }
    100% {
        opacity: 0;
        transform: translate3d(116vw, var(--ash-dy, -30px), 0) scale(var(--ash-scale, 1.1));
    }
}

@keyframes battleFogDrift {
    0% {
        transform: translate3d(0, -2%, 0) scale(1.08);
        background-position: 28% 32%, 72% 66%, 0 0, 0 100%;
    }
    50% {
        transform: translate3d(0, 2%, 0) scale(1.1);
        background-position: 28% 32%, 72% 66%, 320px 8%, 380px 92%;
    }
    100% {
        transform: translate3d(0, -2%, 0) scale(1.08);
        background-position: 28% 32%, 72% 66%, 640px 0, 760px 100%;
    }
}

.battle-overlay.active {
    opacity: 1;
}

.battle-overlay.interactive {
    pointer-events: auto;
    background: rgba(4, 8, 20, 0.7);
}

.battle-overlay.interactive.peek-field-active {
    background: transparent;
}

.battle-overlay.result-title-transition {
    pointer-events: none;
    background: #000;
    transition: opacity 560ms ease;
}

body.tutorial-result-input-locked .board-area,
body.tutorial-result-input-locked .sidebar,
body.tutorial-result-input-locked .bottom-panel {
    pointer-events: none;
}

.battle-speed-hold-indicator {
    position: fixed;
    right: 14px;
    bottom: 16px;
    z-index: 1210;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(236, 200, 120, 0.62);
    background: rgba(7, 11, 25, 0.86);
    color: #ffe6a8;
    font-family: 'Cinzel', serif;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.48);
    pointer-events: none;
}

.battle-speed-hold-indicator.hidden {
    display: none;
}

.battle-speed-hold-icon {
    font-size: 1rem;
    line-height: 1;
}

.battle-speed-hold-text {
    font-size: 0.84rem;
    letter-spacing: 0.05em;
}

.hidden {
    display: none !important;
}

.option-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: none;
}

.option-modal.open {
    display: block;
}

.option-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.68);
}

body.initial-option-setup-active .option-modal-backdrop {
    background: rgba(0, 0, 0, 0.94);
}

.option-modal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(84vw, 520px);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.36);
    background: rgba(8, 14, 35, 0.95);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 14px 16px;
    display: grid;
    gap: 12px;
}

.option-modal-title {
    font-family: 'Cinzel', serif;
    color: #e4c772;
    font-size: 1.45rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.demo-save-import-modal {
    position: fixed;
    inset: 0;
    z-index: 17000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.demo-save-import-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}

.demo-save-import-panel {
    position: relative;
    width: min(560px, calc(100vw - 40px));
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    background: rgba(8, 14, 35, 0.97);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.68);
    color: #e8dec0;
    padding: 18px;
    display: grid;
    gap: 14px;
}

.demo-save-import-title {
    font-family: 'Cinzel', serif;
    color: #e4c772;
    font-size: 1.28rem;
    letter-spacing: 0.04em;
    line-height: 1.25;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.demo-save-import-body {
    color: #f0ead8;
    font-size: 1rem;
    line-height: 1.65;
}

.demo-save-import-note {
    border: 1px solid rgba(130, 170, 210, 0.28);
    border-radius: 8px;
    background: rgba(13, 24, 45, 0.78);
    color: #c8d8ea;
    font-size: 0.9rem;
    line-height: 1.55;
    padding: 10px 12px;
}

.demo-save-import-note.warning {
    border-color: rgba(212, 175, 55, 0.34);
    background: rgba(42, 31, 12, 0.78);
    color: #f1ddb0;
}

.demo-save-import-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.demo-save-import-btn {
    min-width: 128px;
    border: 1px solid rgba(224, 210, 164, 0.32);
    border-radius: 8px;
    padding: 10px 16px;
    font-family: 'Cinzel', serif;
    font-size: 0.94rem;
    font-weight: 700;
    color: #efe7cf;
    background: linear-gradient(180deg, rgba(32, 38, 52, 0.96), rgba(18, 22, 34, 0.98));
    cursor: pointer;
}

.demo-save-import-btn.primary {
    border-color: rgba(212, 175, 55, 0.6);
    background: linear-gradient(180deg, rgba(91, 72, 22, 0.96), rgba(48, 38, 12, 0.98));
}

.demo-save-import-btn:hover,
.demo-save-import-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.2);
}

.option-view {
    display: grid;
    gap: 8px;
}

.option-initial-copy {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    background: linear-gradient(180deg, rgba(30, 25, 10, 0.58), rgba(12, 14, 26, 0.74));
    color: #e8dec0;
    line-height: 1.7;
    font-size: 0.96rem;
}

.option-menu-btn {
    width: 100%;
}

.option-controller-selected {
    outline: none !important;
}

.option-menu-btn.option-controller-selected,
.option-select.option-controller-selected,
.option-range.option-controller-selected,
.option-check.option-controller-selected,
.option-color-input.option-controller-selected,
.option-advanced-tab.option-controller-selected {
    border-color: rgba(156, 238, 116, 0.74);
    box-shadow:
        0 0 0 1px rgba(156, 238, 116, 0.22),
        0 0 18px rgba(103, 202, 86, 0.28),
        inset 0 0 16px rgba(103, 202, 86, 0.08);
    filter: brightness(1.08);
}

.option-check.option-controller-selected {
    outline: 3px solid rgba(126, 255, 159, 0.95) !important;
    outline-offset: 5px;
    box-shadow:
        0 0 0 2px rgba(109, 255, 143, 0.32),
        0 0 20px rgba(75, 255, 124, 0.42);
    transform: scale(1.16);
}

.option-setting-row:has(.option-check.option-controller-selected) .option-setting-label,
.option-setting-row:has(.option-check.option-controller-selected) .option-setting-value {
    color: #9cffb5;
    text-shadow:
        0 0 8px rgba(126, 255, 159, 0.72),
        0 0 16px rgba(75, 255, 124, 0.36);
}

.option-advanced-tab.option-controller-selected {
    color: #9cffb5;
    border-color: rgba(126, 255, 159, 0.95);
    box-shadow: 0 0 0 2px rgba(109, 255, 143, 0.22), 0 0 18px rgba(75, 255, 124, 0.28);
}

.option-menu-btn.option-controller-selected {
    position: relative;
    transform: translateX(3px);
}

.option-menu-btn.option-controller-selected::before {
    content: "";
    position: absolute;
    inset: -3px;
    background:
        linear-gradient(96deg, rgba(87, 168, 81, 0), rgba(129, 222, 103, 0.14) 42%, rgba(87, 168, 81, 0) 78%),
        radial-gradient(ellipse at 62% 50%, rgba(141, 236, 110, 0.16), rgba(141, 236, 110, 0) 72%);
    pointer-events: none;
    animation: titleControllerVeil 2200ms ease-in-out infinite;
}

.option-controller-editing {
    border-color: rgba(255, 224, 138, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(255, 224, 138, 0.24), 0 0 18px rgba(255, 205, 94, 0.32);
}

.option-color-row:has(.option-color-input.option-controller-editing) .option-setting-label,
.option-color-row:has(.option-color-input.option-controller-editing) .option-setting-value {
    color: #9cffb5;
    text-shadow: 0 0 8px rgba(126, 255, 159, 0.72);
}

.option-color-row:has(.option-color-input[data-option-color-channel="R"]) .option-setting-label::after {
    content: "  [R]";
    color: #ff9b9b;
}

.option-color-row:has(.option-color-input[data-option-color-channel="G"]) .option-setting-label::after {
    content: "  [G]";
    color: #9cffb5;
}

.option-color-row:has(.option-color-input[data-option-color-channel="B"]) .option-setting-label::after {
    content: "  [B]";
    color: #9bc7ff;
}

.option-controller-color-pad {
    position: fixed;
    z-index: 2310;
    width: 270px;
    padding: 10px;
    border: 1px solid rgba(223, 190, 109, 0.72);
    border-radius: 10px;
    background: rgba(248, 250, 255, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62), 0 0 20px rgba(75, 255, 124, 0.12);
}

.option-controller-color-sv {
    position: relative;
    height: 150px;
    border-radius: 4px;
    overflow: visible;
    background: #ff0000;
}

.option-controller-color-sv-white,
.option-controller-color-sv-black {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.option-controller-color-sv-white {
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}

.option-controller-color-sv-black {
    background: linear-gradient(0deg, #000, rgba(0, 0, 0, 0));
}

.option-controller-color-sv-knob {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #111;
    border-radius: 999px;
    background: transparent;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
    pointer-events: none;
}

.option-controller-color-row {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
}

.option-controller-color-preview {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.option-controller-color-hue {
    position: relative;
    height: 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.option-controller-color-hue-knob {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: transparent;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px #111;
    pointer-events: none;
}

.option-controller-color-value {
    margin-top: 8px;
    color: #101828;
    font-size: 0.78rem;
    font-weight: 700;
}

.option-controller-select-menu {
    position: fixed;
    z-index: 2300;
    max-height: min(300px, calc(100vh - 32px));
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(223, 190, 109, 0.72);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.98);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.62), 0 0 20px rgba(75, 255, 124, 0.12);
}

.option-controller-select-option {
    width: 100%;
    min-height: 34px;
    display: block;
    border: 1px solid rgba(186, 201, 229, 0.2);
    border-radius: 7px;
    background: rgba(10, 18, 38, 0.92);
    color: #e8f1ff;
    font-size: 0.86rem;
    text-align: left;
    padding: 7px 10px;
    cursor: pointer;
}

.option-controller-select-option + .option-controller-select-option {
    margin-top: 6px;
}

.option-controller-select-option.option-controller-selected {
    color: #9cffb5;
    border-color: rgba(126, 255, 159, 0.95);
    outline: 2px solid rgba(112, 255, 150, 0.8);
    outline-offset: 1px;
    background: rgba(14, 48, 28, 0.86);
    box-shadow: 0 0 16px rgba(75, 255, 124, 0.32);
}

body.initial-option-setup-active #optionResumeBtn,
body.initial-option-setup-active #optionSaveTitleBtn,
body.initial-option-setup-active #optionSaveExitBtn,
body.initial-option-setup-active #optionBattleEnemyZeroBtn,
body.initial-option-setup-active #optionMapDeepRestBtn {
    display: none;
}

.option-danger-btn {
    border-color: rgba(205, 92, 92, 0.48);
    background: linear-gradient(180deg, rgba(70, 20, 20, 0.94), rgba(34, 9, 9, 0.96));
    color: #ffd7d7;
}

.option-danger-btn:hover {
    box-shadow: 0 0 16px rgba(210, 72, 72, 0.18);
}

.option-menu-btn.disabled {
    opacity: 0.68;
    cursor: default;
}

.option-menu-btn.disabled:hover {
    transform: none;
}

.option-setting-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    color: #d8dded;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.option-clear-save-confirm {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(205, 92, 92, 0.34);
    background: linear-gradient(180deg, rgba(46, 13, 13, 0.9), rgba(20, 8, 8, 0.92));
}

.option-clear-save-confirm-text {
    color: #ffd9d4;
    line-height: 1.6;
    font-size: 0.97rem;
}

.option-clear-save-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.option-clear-save-actions.reversed {
    direction: rtl;
}

.option-clear-save-actions.reversed > * {
    direction: ltr;
}

.option-setting-label {
    font-size: 1.04rem;
}

.option-range {
    width: 100%;
}

.option-setting-value {
    font-family: 'Cinzel', serif;
    color: #f2d98d;
    min-width: 52px;
    text-align: right;
}

.option-select {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.4);
    background: rgba(7, 13, 30, 0.82);
    color: #e7edf8;
    padding: 0 8px;
}

.option-input {
    width: 100%;
    min-width: 0;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.4);
    background: rgba(7, 13, 30, 0.82);
    color: #e7edf8;
    padding: 0 8px;
}

.option-setting-row-path {
    grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1.5fr) minmax(120px, 0.7fr);
}

.option-inline-btn {
    width: auto;
    min-width: 96px;
    height: 34px;
    padding: 0 14px;
}

.option-check {
    justify-self: center;
    width: 18px;
    height: 18px;
    accent-color: #d7b64f;
}

.option-advanced-panel {
    width: min(84vw, 560px);
}

.option-advanced-modal {
    z-index: 2510;
}

.option-advanced-copy {
    color: #d7deef;
    line-height: 1.6;
    font-size: 0.98rem;
    padding-bottom: 4px;
}

.option-advanced-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.option-advanced-tab {
    min-height: 42px;
    border: 1px solid rgba(226, 196, 122, 0.32);
    border-radius: 10px;
    background: rgba(11, 18, 40, 0.88);
    color: #dbe3f4;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.option-advanced-tab.active {
    border-color: rgba(241, 210, 132, 0.88);
    background: linear-gradient(180deg, rgba(70, 53, 18, 0.96), rgba(33, 24, 8, 0.96));
    color: #ffe4a0;
    box-shadow: 0 0 14px rgba(242, 197, 86, 0.16);
}

body.controller-input-active .option-advanced-tab.option-controller-selected {
    color: #9cffb5;
    text-shadow:
        0 0 8px rgba(126, 255, 159, 0.82),
        0 0 16px rgba(75, 255, 124, 0.42);
    border-color: rgba(126, 255, 159, 0.98);
    box-shadow:
        0 0 0 2px rgba(109, 255, 143, 0.28),
        0 0 20px rgba(75, 255, 124, 0.34);
}

.option-color-row {
    grid-template-columns: auto auto auto;
}

.option-color-input {
    width: 100%;
    max-width: 84px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(226, 196, 122, 0.4);
    border-radius: 10px;
    background: rgba(7, 13, 30, 0.82);
    cursor: pointer;
}

.option-color-input::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.option-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 7px;
}

.option-color-input::-moz-color-swatch {
    border: none;
    border-radius: 7px;
}

.option-advanced-actions {
    display: grid;
    gap: 8px;
}

.debug-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: none;
}

.debug-editor-modal.open {
    display: block;
}

.debug-editor-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.72);
}

.debug-editor-modal-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: 12px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.36);
    background: rgba(8, 14, 35, 0.96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 14px 16px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 12px;
    overflow: hidden;
}

.debug-editor-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.debug-editor-modal-title {
    font-family: 'Cinzel', serif;
    color: #e4c772;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
}

.debug-editor-close-btn {
    min-width: 120px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(9, 16, 38, 0.92);
    color: #f1d68f;
    font-size: 0.95rem;
    padding: 0 10px;
    cursor: pointer;
}

.debug-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-editor-summary {
    color: #d8dded;
    line-height: 1.45;
    white-space: pre-line;
}

.debug-editor-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 12px;
    min-height: 0;
}

.debug-editor-actions {
    display: grid;
    gap: 8px;
    align-content: start;
}

.debug-editor-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px;
    min-height: 0;
}

.debug-editor-message {
    min-height: 22px;
    font-size: 0.95rem;
    color: #cfe3ff;
}

.debug-editor-message.error {
    color: #ff8f8f;
}

.debug-editor-workspace {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    gap: 8px;
    max-height: none;
    min-height: 0;
    overflow: auto;
}

.debug-editor-field {
    display: grid;
    gap: 4px;
}

.debug-editor-field label {
    color: #d8dded;
    font-size: 0.92rem;
}

.debug-editor-field input:not([type="checkbox"]):not([type="radio"]),
.debug-editor-field select,
.debug-editor-field textarea {
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.4);
    background: rgba(7, 13, 30, 0.82);
    color: #e7edf8;
    padding: 6px 8px;
    font-size: 0.95rem;
}

.debug-editor-field input:not([type="checkbox"]):not([type="radio"]),
.debug-editor-field select {
    width: min(100%, 12ch);
}

#dbgCardName,
#dbgCharName,
#dbgEnemyName {
    width: min(100%, 24ch);
}

#dbgCardNameSearch,
#dbgCardImageKey,
#dbgEnemyId,
#dbgEnemyAce {
    width: min(100%, 20ch);
}

#dbgCardId,
#dbgCharAce,
#dbgFlavorId {
    width: min(100%, 16ch);
}

#dbgCharRequirementKind,
#dbgCharRequirementValue,
#dbgCharRequirementCount {
    width: 100% !important;
}

.debug-editor-field textarea {
    width: 100%;
}

.debug-editor-field textarea {
    min-height: 88px;
    resize: vertical;
}

.debug-editor-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.debug-editor-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.debug-editor-row-5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.debug-editor-row-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.debug-editor-stat-field input[type="number"] {
    width: 100%;
    max-width: 120px;
}

.debug-editor-inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.debug-editor-inline-pair {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.debug-editor-inline-triple {
    display: grid;
    grid-template-columns: minmax(0, 116px) minmax(0, 1fr) minmax(0, 88px);
    gap: 8px;
    align-items: center;
}

.debug-editor-effect-value-note {
    border: 1px dashed rgba(226, 196, 122, 0.38);
    border-radius: 8px;
    padding: 8px;
    color: #cfd9ef;
    font-size: 0.9rem;
    line-height: 1.35;
    background: rgba(7, 13, 30, 0.6);
}

.debug-editor-effect-builder-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.debug-editor-effect-builder-destroy {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.debug-editor-attr-flags {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 8px;
}

.debug-editor-attr-flag-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
}

.debug-editor-attr-flag-row label {
    color: #d8dded;
    font-size: 0.9rem;
}

.debug-editor-attr-flag-select {
    min-width: 70px;
}

.debug-card-form-fields #dbgCardAttributeFlags {
    grid-template-columns: repeat(7, minmax(78px, max-content));
    gap: 6px 10px;
    align-items: center;
}

.debug-card-form-fields #dbgCardAttributeFlags .debug-editor-attr-flag-row {
    grid-template-columns: auto auto;
    gap: 6px;
    justify-content: start;
}

.debug-editor-form-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 10px;
    align-items: start;
}

.debug-card-editor-layout {
    grid-template-columns: minmax(360px, 470px) minmax(0, 1fr) 220px;
    grid-template-rows: auto auto;
}

.debug-character-editor-layout {
    grid-template-columns: minmax(0, 1fr) 220px;
}

.debug-character-editor-layout .debug-editor-field:has(#dbgCharLevelRewardsHost) {
    grid-column: 1 / span 3;
}

.debug-editor-form-fields {
    display: grid;
    gap: 8px;
}

.debug-card-form-fields {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.debug-card-visual-tools {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.debug-card-visual-nav {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    gap: 8px;
    align-items: center;
}

.debug-card-visual-nav input {
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.45);
    background: rgba(7, 13, 30, 0.82);
    color: #f1f5ff;
}

.debug-side-stat {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.debug-side-stat label {
    color: #dce5f7;
    font-size: 0.82rem;
}

.debug-side-stat input {
    width: 100%;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.45);
    background: rgba(7, 13, 30, 0.82);
    color: #f1f5ff;
}

.debug-card-visual-nav .option-menu-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.debug-card-form-fields.compact-mode > :not(.debug-card-visual-wrap) {
    display: none !important;
}

.debug-card-form-fields > .debug-editor-row {
    display: contents;
}

.debug-card-form-fields > .debug-editor-field {
    grid-column: span 2;
    padding: 8px;
    border: 1px solid rgba(226, 196, 122, 0.18);
    border-radius: 10px;
    background: rgba(8, 13, 33, 0.52);
}

.debug-card-form-fields > .debug-editor-row-3,
.debug-card-form-fields > .debug-editor-row-5,
.debug-card-form-fields > .debug-editor-row-single,
.debug-card-form-fields > .debug-card-field-wide {
    grid-column: 1 / -1;
}

.debug-card-form-fields > .debug-editor-field:has(#dbgCardId),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardCost),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardBp),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardLevel),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardRace),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardTag) {
    grid-column: span 2;
}

.debug-card-form-fields > .debug-editor-field:has(#dbgCardName),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardNameSearch),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardImageKey) {
    grid-column: span 3;
}

.debug-card-form-fields > .debug-editor-field:has(#dbgCardNameCandidates) {
    grid-column: span 2;
}

.debug-card-form-fields > .debug-editor-field:has(#dbgCardHidden),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardImageSelected),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardImagePreview) {
    grid-column: span 4;
}

.debug-card-form-fields > .debug-editor-field:has(#dbgCardEffectAType),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardEffectAValueHost),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardEffectBType),
.debug-card-form-fields > .debug-editor-field:has(#dbgCardEffectBValueHost) {
    grid-column: span 3;
}

.debug-card-form-fields #dbgCardNameCandidates {
    min-height: 104px;
}

.debug-card-form-fields #dbgCardEffectAValueHost,
.debug-card-form-fields #dbgCardEffectBValueHost {
    min-height: 44px;
}

.debug-editor-form-side-actions {
    display: grid;
    gap: 8px;
    position: sticky;
    top: 0;
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
}

.debug-card-lore-editor {
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(226, 196, 122, 0.18);
    border-radius: 12px;
    background: rgba(8, 13, 33, 0.42);
}

.debug-card-stats-panel {
    grid-column: 1 / span 2;
    grid-row: 2;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 196, 122, 0.18);
    border-radius: 12px;
    background:
        radial-gradient(circle at top left, rgba(76, 98, 156, 0.12), transparent 36%),
        rgba(8, 13, 33, 0.42);
}

.debug-card-stats-panel-head {
    display: grid;
    gap: 4px;
}

.debug-card-stats-panel-title {
    color: #f2d98d;
    font-family: 'Cinzel', serif;
    font-size: 1.04rem;
    letter-spacing: 0.04em;
}

.debug-card-stats-panel-copy {
    color: #cfd9ef;
    font-size: 0.88rem;
    line-height: 1.5;
}

.debug-card-stats-summary {
    margin: 0;
    min-height: 220px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 196, 122, 0.22);
    border-radius: 10px;
    background: rgba(6, 11, 28, 0.76);
    color: #e4ebf9;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.9rem;
    line-height: 1.72;
    white-space: pre-wrap;
    overflow: auto;
}

.debug-card-lore-editor-head {
    display: grid;
    gap: 4px;
}

.debug-card-lore-editor-title {
    color: #f2d98d;
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
}

.debug-card-lore-editor-copy {
    color: #cfd9ef;
    font-size: 0.9rem;
    line-height: 1.5;
}

.debug-card-lore-editor-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.debug-card-altart-editor {
    display: grid;
    gap: 10px;
}

.debug-card-altart-copy {
    color: #cfd9ef;
    font-size: 0.88rem;
    line-height: 1.45;
}

.debug-card-altart-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.debug-card-altart-tab {
    min-width: 84px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(186, 201, 229, 0.3);
    background: rgba(18, 28, 52, 0.85);
    color: #d7e6ff;
    font-size: 0.84rem;
    cursor: pointer;
}

.debug-card-altart-tab.active {
    border-color: rgba(238, 203, 122, 0.78);
    background: rgba(68, 42, 7, 0.9);
    color: #f7ddb0;
}

.debug-card-altart-tile {
    min-height: 124px;
}

.debug-card-lore-tile {
    min-height: 154px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    text-align: left;
    padding: 14px;
    border: 1px solid rgba(226, 196, 122, 0.28);
    border-radius: 14px;
    background:
        radial-gradient(circle at top left, rgba(66, 84, 126, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(13, 21, 42, 0.96), rgba(7, 13, 28, 0.96));
    color: #eef3ff;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.debug-card-lore-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(241, 210, 132, 0.72);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
}

.debug-card-lore-tile.empty {
    border-style: dashed;
}

.debug-card-lore-tile-label {
    color: #f2d98d;
    font-family: 'Cinzel', serif;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
}

.debug-card-lore-tile-value {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.65;
    color: #dce5f7;
    overflow-y: auto;
    max-height: 180px;
    padding-right: 2px;
}

.debug-editor-race-guide {
    margin-top: 6px;
    border: 1px solid rgba(226, 196, 122, 0.35);
    border-radius: 8px;
    background: rgba(7, 13, 30, 0.72);
    color: #d8dded;
    padding: 8px;
    white-space: pre-line;
    line-height: 1.45;
    font-size: 0.9rem;
}

.debug-editor-image-preview {
    height: 136px;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.4);
    background-color: rgba(7, 13, 30, 0.82);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    place-items: center;
    color: #d8dded;
    font-size: 0.9rem;
}

.debug-editor-image-preview.empty {
    background-image: none !important;
}

.debug-card-quickedit-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;
}

.debug-card-quickedit-modal.hidden {
    display: none;
}

.debug-card-quickedit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.7);
}

.debug-card-quickedit-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 24px));
    border: 1px solid rgba(226, 196, 122, 0.52);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(15, 21, 43, 0.98), rgba(8, 12, 28, 0.98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    padding: 12px;
}

.debug-card-quickedit-title {
    color: #f5dca5;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    font-size: 1rem;
    margin-bottom: 10px;
}

.debug-card-quickedit-body {
    display: grid;
    gap: 8px;
}

.debug-card-quickedit-row {
    display: grid;
    gap: 4px;
}

.debug-card-quickedit-row label {
    color: #dce5f7;
    font-size: 0.86rem;
}

.debug-card-quickedit-row input,
.debug-card-quickedit-row select,
.debug-card-quickedit-row textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.45);
    background: rgba(7, 13, 30, 0.88);
    color: #f1f5ff;
}

.debug-card-quickedit-note {
    color: #cfd8ed;
    font-size: 0.82rem;
    line-height: 1.35;
}

.debug-card-quickedit-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
}

.debug-card-quickedit-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.debug-card-visual-editor {
    position: relative;
    width: min(100%, 460px);
    aspect-ratio: 360 / 420;
    border-radius: 12px;
    border: 1px solid rgba(226, 196, 122, 0.45);
    background:
        linear-gradient(180deg, rgba(14, 22, 47, 0.94), rgba(8, 13, 31, 0.96)),
        url('material/CardFrame1.png') center/cover no-repeat;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

.debug-card-visual-cost,
.debug-card-visual-name,
.debug-card-visual-level,
.debug-card-visual-rarity,
.debug-card-visual-bt,
.debug-card-visual-tag,
.debug-card-visual-attrs,
.debug-card-visual-race,
.debug-card-visual-image,
.debug-card-visual-effect,
.debug-card-visual-stats {
    position: absolute;
    border: 1px dashed rgba(240, 210, 130, 0.35);
    border-radius: 8px;
    background: rgba(8, 12, 30, 0.62);
    color: #e9effa;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.debug-card-visual-cost:hover,
.debug-card-visual-name:hover,
.debug-card-visual-level:hover,
.debug-card-visual-rarity:hover,
.debug-card-visual-bt:hover,
.debug-card-visual-tag:hover,
.debug-card-visual-attrs:hover,
.debug-card-visual-race:hover,
.debug-card-visual-image:hover,
.debug-card-visual-effect:hover,
.debug-card-visual-stats:hover {
    border-color: rgba(245, 216, 141, 0.9);
    background: rgba(17, 25, 53, 0.85);
}

.debug-card-visual-cost {
    top: 10px;
    left: 10px;
    min-width: 44px;
    text-align: center;
    font-weight: 700;
    padding: 4px 8px;
}

.debug-card-visual-name {
    top: 10px;
    left: 64px;
    right: 96px;
    padding: 4px 8px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-card-visual-level {
    top: 42px;
    left: 10px;
    min-width: 60px;
    text-align: center;
    padding: 3px 8px;
}

.debug-card-visual-rarity {
    top: 42px;
    left: 78px;
    right: 196px;
    text-align: center;
    padding: 3px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-card-visual-bt {
    top: 10px;
    right: 10px;
    min-width: 76px;
    text-align: center;
    padding: 3px 8px;
}

.debug-card-visual-image {
    top: 74px;
    left: 50%;
    transform: translateX(-50%);
    width: min(92%, 280px);
    height: min(92%, 280px);
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.debug-card-visual-image.empty {
    background-image: none !important;
}

.debug-card-visual-tag,
.debug-card-visual-attrs {
    top: 326px;
    min-height: 30px;
    max-width: calc(50% - 14px);
    padding: 5px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-card-visual-tag {
    left: 10px;
}

.debug-card-visual-attrs {
    top: 42px;
    right: 10px;
    min-width: 120px;
    max-width: 180px;
    text-align: center;
}

.debug-card-visual-race {
    top: 326px;
    right: 10px;
    min-height: 30px;
    max-width: calc(50% - 14px);
    padding: 5px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.debug-card-visual-effect {
    left: 10px;
    right: 10px;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dbgCardVisualEffectA {
    top: 360px;
}

#dbgCardVisualEffectB {
    top: 394px;
}

.debug-card-visual-stats {
    left: 10px;
    right: 10px;
    top: 428px;
    min-height: 34px;
    padding: 7px 8px;
    font-weight: 700;
    text-align: center;
}

.debug-card-visual-flavor {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 468px;
    bottom: 10px;
    border: 1px dashed rgba(240, 210, 130, 0.35);
    border-radius: 8px;
    background: rgba(8, 12, 30, 0.62);
    color: #dce5f7;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    padding: 8px 10px;
    font-size: 0.82rem;
    line-height: 1.35;
    overflow: auto;
    white-space: pre-wrap;
}

.debug-card-visual-flavor:hover {
    border-color: rgba(245, 216, 141, 0.9);
    background: rgba(17, 25, 53, 0.85);
}

.debug-enemy-editor-layout .debug-editor-form-fields {
    min-height: 0;
}

.debug-enemy-core-row {
    grid-template-columns: 112px minmax(220px, 1fr) 112px;
    gap: 6px;
    align-items: end;
}

.debug-enemy-core-field label {
    font-size: 0.84rem;
}

.debug-enemy-core-field input,
.debug-enemy-core-field select {
    padding: 4px 6px;
    font-size: 0.86rem;
}

.debug-enemy-assist-rate-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;
}

.debug-enemy-assist-rate-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #e7edf8;
    min-height: 30px;
    border: 1px solid rgba(226, 196, 122, 0.28);
    border-radius: 8px;
    background: rgba(7, 13, 30, 0.7);
    padding: 3px 5px;
    white-space: nowrap;
}

.debug-enemy-assist-rate-item input[type="number"] {
    width: 100%;
    min-width: 0;
    padding: 3px 4px;
    font-size: 0.82rem;
}

.debug-enemy-boss-check {
    min-height: 0;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.4);
    background: rgba(7, 13, 30, 0.82);
    color: #e7edf8;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.86rem;
    line-height: 1;
    white-space: nowrap;
}

.debug-enemy-ace-preview {
    min-height: 126px;
    border-radius: 10px;
    border: 1px solid rgba(224, 186, 110, 0.38);
    background-color: rgba(11, 16, 30, 0.8);
    background-size: cover;
    background-position: center;
    color: #f1dfba;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 8px;
}

.debug-enemy-ace-preview.empty {
    background-image: none !important;
}

.debug-enemy-deck-preview {
    min-height: 108px;
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid rgba(220, 184, 111, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.66);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 8px;
    align-content: start;
    margin-bottom: 8px;
}

.debug-enemy-deck-empty {
    color: rgba(216, 221, 234, 0.75);
    font-size: 0.9rem;
    display: grid;
    place-items: center;
}

.debug-enemy-set-board {
    min-height: 108px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(220, 184, 111, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.66);
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 8px;
    align-content: start;
}

.debug-enemy-set-row {
    border: 1px solid rgba(224, 186, 110, 0.26);
    border-radius: 8px;
    background: rgba(10, 16, 34, 0.76);
    padding: 2px;
    display: grid;
    gap: 2px;
    min-width: 0;
}

.debug-enemy-set-row-head {
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    color: #f1d7a6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.debug-enemy-rate-summary {
    margin-top: 4px;
    border: 1px solid rgba(220, 184, 111, 0.24);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 0.74rem;
    color: #d9c9aa;
    background: rgba(9, 14, 30, 0.72);
}

.debug-enemy-rate-summary.ok {
    border-color: rgba(103, 227, 165, 0.54);
    color: #baf0d4;
}

.debug-enemy-rate-summary.ng {
    border-color: rgba(255, 112, 112, 0.54);
    color: #ffd0d0;
}

.debug-enemy-set-row-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.debug-enemy-set-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    color: #ecd7ac;
    white-space: nowrap;
}

.debug-enemy-set-mini-select,
.debug-enemy-set-mini-input {
    border-radius: 6px;
    border: 1px solid rgba(226, 196, 122, 0.35);
    background: rgba(7, 13, 30, 0.82);
    color: #e7edf8;
    height: 24px;
    font-size: 0.66rem;
    padding: 2px 6px;
}

.debug-enemy-set-mini-select {
    width: 64px;
}

.debug-enemy-set-mini-input {
    width: 58px;
}

.debug-enemy-set-weight-label {
    font-size: 0.6rem;
    color: rgba(236, 215, 172, 0.82);
    white-space: nowrap;
}

.debug-enemy-set-ratio {
    font-size: 0.62rem;
    color: #cfe2ff;
    min-width: 48px;
    text-align: right;
}

.debug-enemy-set-remove-btn {
    border: 1px solid rgba(236, 201, 123, 0.34);
    border-radius: 6px;
    background: rgba(26, 18, 10, 0.6);
    color: #ecd7ac;
    font-size: 0.58rem;
    line-height: 1;
    padding: 3px 6px;
    cursor: pointer;
}

.debug-enemy-set-remove-btn:hover {
    border-color: rgba(247, 218, 145, 0.78);
    background: rgba(25, 20, 10, 0.56);
}

.debug-enemy-set-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
}

.debug-enemy-lane-slot {
    width: 88%;
    min-height: 288px;
    border-radius: 8px;
    border: 1px solid rgba(237, 204, 130, 0.4);
    background-color: rgba(12, 18, 32, 0.88);
    color: #e7d2a8;
    font-size: 0.68rem;
    line-height: 1.2;
    padding: 1px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    position: relative;
    justify-self: center;
}

.debug-enemy-lane-slot.active {
    border-color: rgba(122, 255, 206, 0.9);
    box-shadow: 0 0 0 1px rgba(122, 255, 206, 0.35) inset;
}

.debug-enemy-lane-slot .card {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(0.82);
    transform-origin: top center;
    margin-top: -2px;
    width: 236px;
    height: 344px;
}

.debug-enemy-lane-slot.empty {
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 0.46rem;
    color: rgba(226, 206, 160, 0.86);
}

.debug-enemy-set-label {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: #f1d7a6;
    border-top: 1px solid rgba(220, 184, 111, 0.2);
    padding-top: 4px;
}

.debug-enemy-set-averages {
    border: 1px solid rgba(220, 184, 111, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.66);
    padding: 6px 8px;
    display: grid;
    gap: 4px;
    margin-bottom: 8px;
}

.debug-enemy-set-average-row {
    color: #dbc18f;
    font-size: 0.74rem;
    line-height: 1.25;
}

.debug-enemy-set-average-row.total {
    color: #f1deb8;
    font-weight: 700;
    border-bottom: 1px solid rgba(220, 184, 111, 0.24);
    padding-bottom: 4px;
}

.debug-enemy-deck-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    border: 1px solid rgba(237, 204, 130, 0.4);
    background-color: rgba(12, 18, 32, 0.88);
    background-size: cover;
    background-position: center;
    color: #e7d2a8;
    font-size: 0.7rem;
    line-height: 1.3;
    padding: 6px;
    cursor: pointer;
}

.debug-enemy-deck-card.empty {
    display: grid;
    place-items: center;
    text-align: center;
}

.debug-enemy-card-picker {
    border: 1px solid rgba(220, 184, 111, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.66);
    min-height: 220px;
    max-height: 420px;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.debug-enemy-picker-item {
    border: 1px solid rgba(236, 201, 123, 0.24);
    border-radius: 10px;
    background: rgba(6, 12, 26, 0.72);
    color: #e6d7b7;
    padding: 6px;
    cursor: pointer;
    display: grid;
    gap: 5px;
}

.debug-enemy-picker-item.active,
.debug-enemy-picker-item:hover {
    border-color: rgba(247, 218, 145, 0.78);
    background: rgba(25, 20, 10, 0.56);
}

.debug-enemy-picker-art {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: rgba(15, 20, 32, 0.9);
    color: rgba(229, 236, 249, 0.85);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    text-align: center;
    padding: 4px;
}

.debug-enemy-picker-caption {
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
}

.debug-enemy-assist-picker {
    border: 1px solid rgba(220, 184, 111, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.66);
    min-height: 120px;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    gap: 8px;
}

.debug-enemy-assist-item {
    border: 1px solid rgba(236, 201, 123, 0.24);
    border-radius: 8px;
    background: rgba(6, 12, 26, 0.72);
    color: #e6d7b7;
    padding: 7px 8px;
    cursor: pointer;
    text-align: left;
}

.debug-enemy-assist-item.active,
.debug-enemy-assist-item:hover {
    border-color: rgba(247, 218, 145, 0.78);
    background: rgba(25, 20, 10, 0.56);
}

.debug-enemy-assist-name {
    font-size: 0.8rem;
    font-weight: 700;
}

.debug-enemy-assist-desc {
    margin-top: 4px;
    font-size: 0.72rem;
    color: rgba(226, 231, 244, 0.9);
}

.debug-enemy-assist-chip {
    border: 1px solid rgba(236, 201, 123, 0.34);
    border-radius: 8px;
    background: rgba(26, 18, 10, 0.6);
    color: #ecd7ac;
    min-height: 34px;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 5px 6px;
    cursor: pointer;
    text-align: left;
}

.debug-enemy-npc-list {
    border: 1px solid rgba(220, 184, 111, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.66);
    min-height: 90px;
    max-height: 210px;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 58px;
    align-content: start;
}

.debug-enemy-npc-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px 130px;
    gap: 6px;
    margin-bottom: 6px;
}

.debug-enemy-npc-tools input,
.debug-enemy-npc-tools select {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.35);
    background: rgba(7, 13, 30, 0.82);
    color: #e7edf8;
    padding: 4px 6px;
    font-size: 0.82rem;
}

.debug-enemy-npc-item {
    border: 1px solid rgba(236, 201, 123, 0.24);
    border-radius: 8px;
    background: rgba(6, 12, 26, 0.72);
    color: #e6d7b7;
    padding: 5px 6px;
    cursor: pointer;
    text-align: left;
    font-size: 0.76rem;
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 2px;
    height: 58px;
    min-height: 58px;
    grid-template-rows: 1fr auto;
}

.debug-enemy-npc-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 12, 26, 0.9) 0%, rgba(6, 12, 26, 0.78) 52%, rgba(6, 12, 26, 0.22) 100%);
    pointer-events: none;
    z-index: 1;
}

.debug-enemy-npc-item.with-ace::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    width: 44%;
    height: 100%;
    background-image: var(--npc-ace-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    opacity: 0.82;
    filter: brightness(1.18) saturate(1.08);
    pointer-events: none;
    z-index: 0;
}

.debug-enemy-npc-main,
.debug-enemy-npc-sub {
    position: relative;
    z-index: 2;
}

.debug-enemy-npc-main {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-enemy-npc-sub {
    font-size: 0.66rem;
    color: rgba(230, 215, 183, 0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-enemy-npc-item:hover {
    border-color: rgba(247, 218, 145, 0.78);
    background: rgba(25, 20, 10, 0.56);
}

.debug-character-list .debug-enemy-npc-item.active {
    border-color: rgba(194, 242, 120, 0.82);
    box-shadow: inset 0 0 0 1px rgba(194, 242, 120, 0.34), 0 0 12px rgba(118, 194, 78, 0.16);
}

.debug-character-preview-grid {
    --character-deck-card-node-scale: 0.46;
    --character-deck-card-slot-height: calc(344px * 0.46 + 4px);
    --character-deck-card-slot-width: calc(236px * 0.46 + 2px);
    border: 1px solid rgba(220, 184, 111, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.66);
    min-height: 180px;
    max-height: 360px;
    overflow: auto;
    padding: 8px;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(var(--character-deck-card-slot-width), 1fr));
    grid-auto-rows: var(--character-deck-card-slot-height);
    align-content: start;
}

.debug-character-preview-empty {
    border: 1px dashed rgba(220, 184, 111, 0.28);
    border-radius: 10px;
    background: rgba(7, 13, 30, 0.54);
    color: #d7dfed;
    font-size: 0.9rem;
    min-height: 120px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 12px;
}

.debug-character-missing-card {
    border: 1px dashed rgba(255, 151, 151, 0.46);
    background: linear-gradient(180deg, rgba(40, 10, 10, 0.78), rgba(18, 8, 8, 0.9));
    color: #ffd4d4;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    padding: 10px 8px;
}

.debug-character-missing-card-label {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-all;
}

.debug-character-missing-card-note {
    font-size: 0.68rem;
    color: rgba(255, 221, 221, 0.86);
    line-height: 1.35;
}

.debug-char-level-reward-grid {
    display: grid;
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(220, 184, 111, 0.2);
    border-radius: 10px;
    background: rgba(8, 14, 30, 0.5);
    width: min(100%, 980px);
}

.debug-char-level-reward-row {
    display: grid;
    grid-template-columns: 58px minmax(180px, 220px) minmax(140px, 0.9fr) minmax(180px, 1fr) minmax(220px, 1.2fr);
    gap: 6px;
    align-items: center;
}

.debug-char-level-reward-row select,
.debug-char-level-reward-row input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    max-width: none;
}

.debug-char-level-reward-level {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(240, 228, 199, 0.92);
    letter-spacing: 0.04em;
}

.debug-char-level-reward-row .hidden {
    display: none;
}

.debug-enemy-deck-modal {
    position: fixed;
    inset: 0;
    z-index: 3600;
    display: grid;
    place-items: center;
}

.debug-enemy-deck-modal.hidden {
    display: none;
}

.debug-enemy-deck-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.72);
}

.debug-enemy-deck-modal-panel {
    position: relative;
    z-index: 1;
    width: min(96vw, 1680px);
    height: min(92vh, 1040px);
    border-radius: 12px;
    border: 1px solid rgba(219, 184, 106, 0.42);
    background: rgba(7, 13, 30, 0.96);
    padding: 12px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
}

.debug-enemy-deck-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 8px;
}

.option-setting-row.option-setting-row-compact {
    grid-template-columns: auto 1fr;
}

.debug-enemy-deck-modal-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: 1.12rem;
    letter-spacing: 0.04em;
}

.debug-enemy-deck-modal-count {
    color: #d4dfef;
    font-family: 'Cinzel', serif;
    margin-left: auto;
    margin-right: 8px;
}

.debug-enemy-deck-modal-count.warning {
    color: #ff9f9f;
}

.debug-enemy-deck-modal-body {
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(219, 184, 106, 0.26);
    border-radius: 10px;
    background: rgba(6, 12, 28, 0.64);
    padding: 10px;
    display: block;
}

.debug-enemy-deck-editor-wrap {
    min-height: 100%;
}

.debug-enemy-deck-builder {
    height: 100%;
    min-height: 0;
}

.debug-enemy-modal-ace {
    border: 1px solid rgba(224, 186, 110, 0.28);
    border-radius: 10px;
    background: rgba(10, 16, 34, 0.72);
    padding: 8px;
    display: grid;
    justify-items: start;
    gap: 6px;
    grid-column: 1 / -1;
}

.debug-enemy-modal-section-title,
.debug-enemy-modal-set-head {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: #f1d7a6;
}

.debug-enemy-modal-set-row {
    border: 1px solid rgba(224, 186, 110, 0.28);
    border-radius: 10px;
    background: rgba(10, 16, 34, 0.72);
    padding: 8px;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.debug-enemy-modal-set-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.debug-enemy-modal-lane {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.debug-enemy-modal-lane-label {
    font-size: 0.58rem;
    color: rgba(228, 210, 175, 0.92);
    letter-spacing: 0.02em;
}

.debug-enemy-deck-modal-slot {
    border: 1px solid rgba(227, 196, 120, 0.2);
    border-radius: 8px;
    min-height: 206px;
    background: rgba(4, 9, 20, 0.4);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    padding: 0;
    min-width: 0;
}

.debug-enemy-deck-modal-slot.ace::before {
    content: 'ACE';
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 2;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: #ffe2ab;
    border: 1px solid rgba(245, 206, 128, 0.6);
    border-radius: 999px;
    padding: 2px 6px;
    background: rgba(66, 34, 14, 0.82);
}

.debug-enemy-deck-modal-slot.empty {
    color: #e0d0ad;
    font-size: 0.75rem;
    text-align: center;
    padding: 10px;
    border: 1px solid rgba(227, 196, 120, 0.2);
    border-radius: 8px;
    background: rgba(4, 9, 20, 0.4);
}

.debug-enemy-deck-modal-slot .card {
    transform: scale(0.82);
    transform-origin: center top;
    margin: -2px auto 0;
    flex: 0 0 auto;
}

@media (max-width: 980px) {
    .debug-editor-layout {
        grid-template-columns: 1fr;
    }
    .debug-editor-form-layout {
        grid-template-columns: 1fr;
    }
    .debug-card-editor-layout {
        grid-template-columns: 1fr;
    }
    .debug-card-form-fields {
        grid-template-columns: 1fr;
    }
    .debug-card-form-fields > .debug-editor-field {
        grid-column: 1 / -1 !important;
    }
    .debug-card-form-fields #dbgCardAttributeFlags {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .debug-editor-form-side-actions {
        position: static;
    }
    .debug-card-lore-editor-grid {
        grid-template-columns: 1fr;
    }
    .debug-editor-row {
        grid-template-columns: 1fr;
    }
    .debug-editor-row-5 {
        grid-template-columns: 1fr;
    }
    .debug-editor-inline-triple {
        grid-template-columns: 1fr;
    }
    .debug-enemy-card-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .debug-enemy-modal-set-lanes {
        grid-template-columns: 1fr;
    }
    .debug-enemy-set-board {
        grid-template-columns: 1fr;
    }
    .debug-enemy-deck-modal-panel {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

@media (max-width: 1400px) and (min-width: 981px) {
    .debug-editor-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .debug-card-editor-layout {
        grid-template-columns: minmax(320px, 440px) minmax(320px, 1fr) 220px;
    }
    .debug-card-form-fields {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .debug-card-form-fields #dbgCardAttributeFlags {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .debug-card-lore-editor-grid {
        grid-template-columns: 1fr;
    }
}

.battle-result-image {
    width: min(82vw, 1080px);
    max-height: 52vh;
    object-fit: contain;
    opacity: 0;
    transform: translateY(22px) scale(0.88);
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.7));
}

.travel-result-panel {
    width: min(92vw, 1500px);
    max-height: 88vh;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.38);
    background: rgba(8, 14, 35, 0.96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.travel-result-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.travel-result-panel.reward-mode .travel-result-title {
    text-align: center;
}

.travel-result-panel.item-reward-mode {
    width: min(78vw, 980px);
}

.travel-item-reward-box {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    border-radius: 12px;
    border: 1px solid rgba(228, 194, 104, 0.4);
    background: rgba(14, 24, 52, 0.78);
    padding: 18px 20px;
}

.travel-item-reward-box.has-target-preview {
    cursor: help;
}

.travel-item-reward-icon {
    width: 220px;
    height: 220px;
    border-radius: 18px;
    border: 1px solid rgba(243, 208, 132, 0.62);
    background: linear-gradient(150deg, rgba(40, 46, 65, 0.9), rgba(16, 22, 35, 0.95));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
        0 18px 32px rgba(0, 0, 0, 0.38),
        0 0 26px rgba(255, 221, 158, 0.18);
}

.travel-item-reward-name {
    color: #f8e5b2;
    font-size: 1.42rem;
    font-weight: 700;
    line-height: 1.35;
}

.travel-item-reward-desc {
    margin-top: 8px;
    color: #dbe8ff;
    font-size: 1rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.travel-item-reward-stat {
    margin-top: 10px;
    color: #c8e1ff;
    font-size: 1rem;
}

.travel-result-panel.item-recycle-mode {
    width: min(920px, 92vw);
}

.meta-item-recycle-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.meta-item-recycle-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.meta-item-recycle-bulk-btn {
    min-width: 148px;
}

.meta-item-recycle-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(235, 214, 151, 0.32);
    border-radius: 12px;
    background: rgba(14, 22, 52, 0.76);
}

.meta-item-recycle-check-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.meta-item-recycle-check {
    width: 18px;
    height: 18px;
    accent-color: #d3ae57;
    cursor: pointer;
}

.meta-item-recycle-info {
    min-width: 0;
}

.meta-item-recycle-name {
    color: #fff3c5;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}

.meta-item-recycle-desc,
.meta-item-recycle-note {
    margin-top: 4px;
    color: rgba(233, 239, 255, 0.82);
    font-size: 0.84rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.meta-item-recycle-note {
    color: #ffd88f;
}

.meta-item-recycle-btn {
    min-width: 122px;
    justify-self: end;
}

.travel-result-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.travel-result-content::-webkit-scrollbar,
.travel-clear-deck-wrap::-webkit-scrollbar,
.travel-clear-special-reward-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.travel-result-content::-webkit-scrollbar-track,
.travel-clear-deck-wrap::-webkit-scrollbar-track,
.travel-clear-special-reward-body::-webkit-scrollbar-track {
    background: rgba(8, 14, 35, 0.9);
    border-radius: 10px;
}

.travel-result-content::-webkit-scrollbar-thumb,
.travel-clear-deck-wrap::-webkit-scrollbar-thumb,
.travel-clear-special-reward-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(212, 175, 85, 0.9), rgba(146, 112, 39, 0.9));
    border-radius: 10px;
    border: 1px solid rgba(28, 22, 8, 0.8);
}

.travel-result-panel.clear-mode .travel-result-content {
    overflow: hidden;
    padding-right: 0;
}

.travel-result-line {
    color: #e7edf8;
    font-size: 1rem;
    line-height: 1.35;
}

.travel-result-panel.reward-mode .travel-result-line {
    text-align: center;
}

.travel-result-section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.travel-result-section-title {
    color: #d7b64f;
    font-family: 'Cinzel', serif;
    font-size: 1.06rem;
    letter-spacing: 0.03em;
}

.travel-result-deck-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
}

.travel-result-card {
    transform: scale(0.86);
    transform-origin: top left;
    pointer-events: none;
}

.travel-result-reward-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
    width: 100%;
}

.travel-result-reward-slot {
    background: transparent;
    border: 1px solid rgba(186, 160, 92, 0.35);
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.travel-result-reward-slot.selected {
    border-color: rgba(239, 211, 140, 0.95);
    box-shadow: 0 0 0 1px rgba(239, 211, 140, 0.35), 0 8px 18px rgba(0, 0, 0, 0.4);
}

body.controller-input-active .travel-result-reward-slot.battle-overlay-controller-selected,
body.controller-input-active .travel-result-btn.battle-overlay-controller-selected,
body.controller-input-active .battle-overlay-peek-toggle.battle-overlay-controller-selected,
body.controller-input-active .discard-select-card.battle-overlay-controller-selected,
body.controller-input-active .discard-modal-action-btn.battle-overlay-controller-selected,
body.controller-input-active .identify-select-card.battle-overlay-controller-selected,
body.controller-input-active .identify-select-btn.battle-overlay-controller-selected,
body.battle-controller-active .travel-result-reward-slot.battle-overlay-controller-selected,
body.battle-controller-active .travel-result-btn.battle-overlay-controller-selected,
body.battle-controller-active .battle-overlay-peek-toggle.battle-overlay-controller-selected,
body.battle-controller-active .discard-select-card.battle-overlay-controller-selected,
body.battle-controller-active .discard-modal-action-btn.battle-overlay-controller-selected,
body.battle-controller-active .identify-select-card.battle-overlay-controller-selected,
body.battle-controller-active .identify-select-btn.battle-overlay-controller-selected {
    border-color: rgba(112, 255, 172, 0.98);
    outline: 3px solid rgba(112, 255, 172, 0.92);
    outline-offset: 2px;
    box-shadow:
        0 0 0 1px rgba(224, 255, 236, 0.44) inset,
        0 0 18px rgba(72, 255, 142, 0.52),
        0 0 30px rgba(72, 255, 142, 0.24);
}

.travel-result-reward-slot.stolen-highlight {
    border-color: rgba(255, 232, 148, 1);
    box-shadow:
        0 0 0 2px rgba(255, 232, 148, 0.42),
        0 0 18px rgba(255, 214, 104, 0.72),
        0 10px 22px rgba(0, 0, 0, 0.44);
    animation: stolenRewardPulse 980ms ease-in-out infinite;
}

@keyframes stolenRewardPulse {
    0%, 100% {
        filter: brightness(1);
        transform: translateY(0);
    }
    50% {
        filter: brightness(1.2);
        transform: translateY(-2px);
    }
}

.travel-result-reward-slot .travel-result-card {
    transform: none;
    transform-origin: center top;
}

.travel-reward-layout {
    display: grid;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    align-items: stretch;
}

.travel-reward-detail-panel {
    border: 1px solid rgba(213, 181, 116, 0.42);
    border-radius: 12px;
    background: linear-gradient(165deg, rgba(11, 18, 38, 0.9), rgba(8, 12, 25, 0.92));
    padding: 10px;
    display: grid;
    grid-template-rows:
        auto
        auto
        auto
        auto
        auto
        auto
        auto
        minmax(0, 1fr);
    gap: 8px;
    min-height: 640px;
    height: 640px;
    overflow: hidden;
    box-sizing: border-box;
}

.travel-reward-detail-card {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid rgba(220, 191, 124, 0.38);
    background: rgba(10, 14, 24, 0.74);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    color: rgba(230, 215, 181, 0.75);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    display: grid;
    place-items: center;
}

.travel-reward-detail-name {
    color: #f2deb2;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.travel-reward-detail-line {
    color: #d7e3f4;
    font-size: 0.96rem;
    line-height: 1.35;
}

.travel-reward-detail-effects {
    color: #e6edf7;
    font-size: 0.94rem;
    line-height: 1.45;
    white-space: pre-line;
}

.travel-reward-detail-stats {
    color: #a4e9ff;
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
}

.travel-reward-detail-skill {
    color: #dfeaff;
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-line;
    border-top: 1px solid rgba(220, 189, 118, 0.24);
    padding-top: 6px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.travel-reward-detail-skill::-webkit-scrollbar {
    width: 8px;
}

.travel-reward-detail-skill::-webkit-scrollbar-track {
    background: rgba(7, 12, 26, 0.82);
    border-radius: 999px;
}

.travel-reward-detail-skill::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(214, 180, 98, 0.94), rgba(132, 98, 34, 0.94));
    border-radius: 999px;
    border: 1px solid rgba(32, 23, 10, 0.78);
}

.travel-reward-detail-flavor {
    color: #d5e2f7;
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-line;
    border-top: 1px solid rgba(220, 189, 118, 0.24);
    padding-top: 6px;
    background: rgba(8, 16, 34, 0.44);
    border-radius: 8px;
    padding: 7px 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.travel-reward-detail-flavor::-webkit-scrollbar {
    width: 8px;
}

.travel-reward-detail-flavor::-webkit-scrollbar-track {
    background: rgba(7, 12, 26, 0.82);
    border-radius: 999px;
}

.travel-reward-detail-flavor::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(214, 180, 98, 0.94), rgba(132, 98, 34, 0.94));
    border-radius: 999px;
    border: 1px solid rgba(32, 23, 10, 0.78);
}

.travel-reward-pick-wrap {
    min-width: 0;
}

.travel-reward-stolen-notice {
    margin-top: 10px;
    color: #ffe7ad;
    font-size: 1rem;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.56);
}

.travel-reward-claim-fx {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%) scale(0.86);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    transition: transform 220ms ease, opacity 180ms ease;
}

.travel-reward-claim-fx.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.travel-reward-claim-fx.hide {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0;
}

.travel-reward-claim-aura {
    position: absolute;
    inset: -22px;
    border-radius: 14px;
    border: 2px solid rgba(255, 232, 148, 0.95);
    box-shadow:
        0 0 22px rgba(255, 221, 126, 0.9),
        0 0 48px rgba(255, 188, 92, 0.6);
    animation: rewardClaimGlow 760ms ease-in-out forwards;
}

.travel-reward-claim-card {
    position: relative;
    border-radius: 12px;
}

.travel-reward-claim-card .travel-result-card {
    transform: none;
}

@keyframes rewardClaimGlow {
    0% {
        opacity: 0.2;
        filter: brightness(1);
    }
    45% {
        opacity: 1;
        filter: brightness(1.45);
    }
    100% {
        opacity: 0.66;
        filter: brightness(1.12);
    }
}

.travel-clear-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 14px;
    min-height: 0;
    flex: 1;
}

.travel-clear-left,
.travel-clear-right {
    min-height: 0;
}

.travel-clear-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.travel-clear-right {
    display: flex;
    flex-direction: column;
}

.travel-clear-player-portrait {
    width: 220px;
    height: 220px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.36);
    background-color: rgba(8, 12, 26, 0.82);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.travel-clear-left .travel-result-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.travel-clear-special-reward-section {
    min-height: 0;
}

.travel-clear-special-reward-body {
    width: 100%;
    max-height: clamp(92px, 18vh, 170px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.travel-clear-exp-section {
    margin-top: 2px;
}

.travel-clear-exp-host {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.travel-clear-exp-box {
    width: min(320px, 95%);
    border-radius: 10px;
    border: 1px solid rgba(227, 191, 108, 0.42);
    background: linear-gradient(160deg, rgba(13, 20, 44, 0.9), rgba(8, 13, 30, 0.94));
    padding: 8px 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.36);
}

.travel-clear-exp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.travel-clear-exp-name {
    color: #f3dfad;
    font-size: 0.9rem;
    font-weight: 700;
}

.travel-clear-exp-level {
    color: #c7defd;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
}

.travel-clear-exp-bar {
    margin-top: 7px;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    border: 1px solid rgba(237, 209, 142, 0.48);
    background: rgba(6, 10, 23, 0.9);
    overflow: hidden;
}

.travel-clear-exp-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5fd7ff 0%, #9ce9ff 42%, #fff2a9 100%);
    box-shadow: 0 0 16px rgba(155, 231, 255, 0.65);
}

.travel-clear-exp-info {
    margin-top: 6px;
    color: #d7e7ff;
    font-size: 0.78rem;
}

.travel-clear-level-up {
    margin-top: 6px;
    color: #ffe89e;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
}

.travel-clear-level-up.show {
    animation: clearLevelUpShow 760ms ease-out forwards;
}

@keyframes clearLevelUpShow {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.92);
        text-shadow: 0 0 0 rgba(255, 231, 151, 0);
    }
    35% {
        opacity: 1;
        transform: translateY(0) scale(1.08);
        text-shadow: 0 0 16px rgba(255, 231, 151, 0.86);
    }
    100% {
        opacity: 0.88;
        transform: translateY(0) scale(1);
        text-shadow: 0 0 12px rgba(255, 231, 151, 0.42);
    }
}

.travel-clear-deck-section {
    height: 100%;
    min-height: 0;
}

.travel-clear-deck-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.travel-clear-deck-grid {
    gap: 10px;
}

.travel-clear-celebration {
    position: fixed;
    inset: 0;
    z-index: 9600;
    pointer-events: none;
    overflow: hidden;
}

.travel-clear-burst {
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(56vw, 760px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) scale(0.7);
    background: radial-gradient(circle, rgba(255, 244, 183, 0.95) 0%, rgba(255, 214, 104, 0.56) 28%, rgba(255, 176, 84, 0.18) 54%, rgba(255, 176, 84, 0) 72%);
    filter: blur(1px);
    animation: clearBurstIn 0.54s cubic-bezier(.2,.8,.2,1) forwards;
}

.travel-clear-title {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    font-size: clamp(46px, 8.2vw, 118px);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff8d1;
    text-shadow: 0 0 22px rgba(255, 208, 96, 0.9), 0 0 48px rgba(255, 164, 53, 0.58);
    opacity: 0;
    animation: clearTitleIn 0.52s ease-out 0.12s forwards;
}

.travel-clear-confetti {
    position: absolute;
    top: -8%;
    width: 10px;
    height: 24px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(0) rotate(0deg);
    background: linear-gradient(180deg, #ffe8a8 0%, #ffad5d 100%);
    box-shadow: 0 0 10px rgba(255, 186, 87, 0.66);
    animation: clearConfettiFall linear forwards;
}

.travel-clear-celebration.hide {
    animation: clearCelebrationOut 0.36s ease forwards;
}

@keyframes clearBurstIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    45% { opacity: 1; }
    100% { opacity: 0.28; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes clearTitleIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes clearConfettiFall {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    8% { opacity: 1; }
    100% { opacity: 0; transform: translateY(110vh) rotate(740deg); }
}

@keyframes clearCelebrationOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.travel-result-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 10px;
}

.travel-result-panel.reward-mode .travel-result-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}

.travel-result-panel.reward-mode .travel-result-actions .travel-result-btn:first-child {
    grid-column: 2;
    justify-self: center;
}

.travel-result-panel.reward-mode .travel-result-actions .travel-result-btn-dark {
    grid-column: 3;
    justify-self: end;
}

.travel-result-btn {
    min-width: 180px;
}

.travel-result-btn-dark {
    border-color: rgba(120, 130, 156, 0.48);
    background: linear-gradient(180deg, rgba(26, 32, 48, 0.95), rgba(14, 18, 30, 0.95));
    color: #ccd4e8;
    margin-left: 0;
}

.travel-result-confirm {
    position: fixed;
    inset: 0;
    z-index: 3400;
    display: grid;
    place-items: center;
}

.travel-result-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 12, 0.56);
}

.travel-result-confirm-panel {
    position: relative;
    width: min(88vw, 520px);
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.38);
    background: rgba(8, 14, 35, 0.97);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 14px 12px;
    display: grid;
    gap: 12px;
}

.travel-result-choice-panel {
    width: min(92vw, 760px);
    max-height: min(88vh, 860px);
}

.travel-result-choice-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 54vh;
    overflow-y: auto;
    padding-right: 2px;
}

.travel-result-choice-btn {
    width: 100%;
    min-width: 0;
    text-align: left;
    display: grid;
    gap: 4px;
}

.travel-result-choice-btn:disabled {
    opacity: 0.42;
    filter: grayscale(0.2);
    cursor: not-allowed;
    box-shadow: none;
}

.travel-result-choice-btn:disabled:hover {
    transform: none;
}

.travel-result-choice-main {
    display: block;
    font-size: 0.98rem;
}

.travel-result-choice-sub {
    display: block;
    font-size: 0.84rem;
    color: #c9d6f1;
    opacity: 0.92;
}

.travel-result-confirm-text {
    color: #e7edf8;
    font-size: 1.04rem;
    line-height: 1.4;
    text-align: center;
}

.travel-result-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.travel-result-confirm .travel-result-btn.option-controller-selected,
.travel-result-confirm .option-menu-btn.option-controller-selected,
.option-clear-save-confirm .option-menu-btn.option-controller-selected {
    color: #9cffb5 !important;
    border-color: rgba(126, 255, 159, 0.95) !important;
    box-shadow:
        0 0 0 2px rgba(109, 255, 143, 0.28),
        0 0 18px rgba(75, 255, 124, 0.38),
        inset 0 0 16px rgba(75, 255, 124, 0.12) !important;
    text-shadow:
        0 0 8px rgba(126, 255, 159, 0.9),
        0 0 18px rgba(75, 255, 124, 0.5);
}

.discard-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
}

.discard-modal.open {
    display: block;
}

.discard-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.68);
}

.discard-modal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(86vw, 1380px);
    height: min(80vh, 900px);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(8, 14, 35, 0.95);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.discard-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.discard-modal-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
}

.discard-modal-count {
    color: #b9c5e8;
    font-size: 1rem;
}

.discard-modal-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    padding: 4px 2px 8px;
}

.discard-modal-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 8px;
    display: grid;
    gap: 8px;
}

.discard-modal-actions.hidden {
    display: none;
}

.discard-modal-hint {
    color: #d9e6ff;
    font-size: 0.94rem;
}

.discard-modal-action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.discard-modal-action-btn {
    min-width: 180px;
}

.discard-select-card {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
}

.discard-select-card.selected {
    border-color: rgba(255, 223, 132, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 223, 132, 0.42), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.identify-select-modal {
    position: absolute;
    inset: 0;
    z-index: 1450;
    display: grid;
    place-items: center;
}

.identify-select-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.74);
}

.battle-overlay-peek-toggle {
    position: relative;
    z-index: 1600;
    min-width: 168px;
    margin-left: 28px;
}

.battle-overlay-peek-toggle-floating {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 1601;
    margin-left: 0;
}

body.battle-controller-active .battle-overlay-peek-toggle::before,
body.controller-input-active .battle-overlay-peek-toggle::before {
    content: "△";
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 24px;
    margin-right: 8px;
    border: 1px solid rgba(112, 255, 172, 0.72);
    border-radius: 7px;
    color: #bfffd6;
    background: rgba(12, 54, 34, 0.78);
    box-shadow: 0 0 12px rgba(72, 255, 142, 0.25);
}

.peek-field-active .identify-select-backdrop {
    background: transparent;
}

.peek-field-active .discard-modal-backdrop {
    background: transparent;
    pointer-events: none;
}

.peek-field-active .identify-select-panel {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    pointer-events: none;
}

.peek-field-active .discard-modal-panel {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px)) scale(0.985);
    pointer-events: none;
}

.identify-select-panel {
    position: relative;
    width: min(92vw, 1420px);
    height: min(84vh, 900px);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(8, 14, 35, 0.96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 16px 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.identify-select-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.identify-select-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
}

.identify-select-sub {
    color: #b9c5e8;
    font-size: 0.94rem;
}

.identify-select-list {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    padding: 4px 2px 8px;
}

.identify-select-card {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.identify-select-card.selected {
    border-color: rgba(255, 223, 132, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 223, 132, 0.42), 0 8px 18px rgba(0, 0, 0, 0.4);
}

.identify-select-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.identify-select-btn {
    min-width: 220px;
}

.identify-select-btn-cancel {
    border-color: rgba(120, 130, 156, 0.48);
    background: linear-gradient(180deg, rgba(26, 32, 48, 0.95), rgba(14, 18, 30, 0.95));
    color: #ccd4e8;
}

.event-deck-select-modal {
    position: fixed;
    inset: 0;
    z-index: 3500;
    display: grid;
    place-items: center;
}

.event-deck-select-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.74);
}

.event-deck-select-panel {
    position: relative;
    width: min(92vw, 1420px);
    height: min(84vh, 900px);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(8, 14, 35, 0.96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 16px 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
}

.event-deck-select-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.event-deck-select-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
}

.event-deck-select-sub {
    color: #b9c5e8;
    font-size: 0.94rem;
}

.event-deck-select-list {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px;
    padding: 4px 2px 8px;
}

.event-deck-select-card {
    position: relative;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.event-deck-select-card.is-ace::before {
    content: 'ACE';
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 228, 150, 0.72);
    background: linear-gradient(180deg, rgba(94, 69, 20, 0.94), rgba(44, 30, 8, 0.96));
    color: #ffe7a9;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    pointer-events: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
}

.event-deck-select-card.selected {
    border-color: rgba(255, 223, 132, 0.95);
    box-shadow: 0 0 0 1px rgba(255, 223, 132, 0.42), 0 8px 18px rgba(0, 0, 0, 0.4);
}

body.map-controller-active .event-deck-select-card.map-event-controller-selected {
    border-color: rgba(111, 255, 178, 0.98);
    box-shadow:
        0 0 0 2px rgba(226, 255, 236, 0.9),
        0 0 18px rgba(73, 255, 147, 0.78),
        0 0 34px rgba(73, 255, 147, 0.42);
    z-index: 3;
}

body.map-controller-active .event-deck-select-card.map-event-controller-selected::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 3px solid rgba(111, 255, 178, 0.98);
    border-radius: 12px;
    pointer-events: none;
    box-shadow:
        inset 0 0 14px rgba(73, 255, 147, 0.2),
        0 0 12px rgba(226, 255, 236, 0.72),
        0 0 26px rgba(73, 255, 147, 0.48);
}

.event-deck-select-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.event-deck-select-btn {
    min-width: 220px;
}

.event-deck-select-btn-random {
    border-color: rgba(120, 130, 156, 0.48);
    background: linear-gradient(180deg, rgba(26, 32, 48, 0.95), rgba(14, 18, 30, 0.95));
    color: #ccd4e8;
}

.event-duel-reveal-modal {
    position: fixed;
    inset: 0;
    z-index: 3525;
    display: grid;
    place-items: center;
}

.event-duel-reveal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.78);
}

.event-duel-reveal-panel {
    position: relative;
    width: min(96vw, 1080px);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.38);
    background: rgba(8, 14, 35, 0.96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 16px 16px;
    display: grid;
    gap: 10px;
}

.event-duel-reveal-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.12rem, 1.72vw, 1.34rem);
    letter-spacing: 0.04em;
    text-align: center;
}

.event-duel-reveal-subtitle {
    color: #c6d3ef;
    font-size: 0.96rem;
    text-align: center;
}

.event-duel-reveal-stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 24px);
    min-height: 0;
}

.event-duel-reveal-lane {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
}

.event-duel-reveal-lane-label {
    color: #f4e6c2;
    font-size: 1rem;
    font-weight: 700;
}

.event-duel-reveal-flip {
    width: min(236px, 38vw);
    aspect-ratio: 236 / 344;
    perspective: 1200px;
}

.event-duel-reveal-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.08s cubic-bezier(0.2, 0.72, 0.2, 1);
}

.event-duel-reveal-flip.revealed .event-duel-reveal-flip-inner {
    transform: rotateY(180deg);
}

.event-duel-reveal-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    overflow: hidden;
    backface-visibility: hidden;
}

.event-duel-reveal-face-back {
    border: 1px solid rgba(214, 225, 246, 0.34);
    background:
        linear-gradient(160deg, rgba(12, 16, 34, 0.68), rgba(8, 12, 24, 0.82)),
        url('material/CardFrame2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.event-duel-reveal-face-front {
    transform: rotateY(180deg);
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.2);
}

.event-duel-reveal-face-front .card {
    pointer-events: none;
}

.event-duel-reveal-status {
    color: #e6eefb;
    line-height: 1.5;
    text-align: center;
    white-space: pre-line;
    min-height: 2.4em;
}

.event-duel-reveal-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.event-duel-reveal-actions.hidden {
    display: none;
}

.stone-tablet-modal {
    position: fixed;
    inset: 0;
    z-index: 3520;
    display: grid;
    place-items: center;
}

.stone-tablet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.78);
}

.stone-tablet-panel {
    position: relative;
    width: min(95vw, 920px);
    max-height: min(92vh, 980px);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.42);
    background: rgba(8, 14, 35, 0.96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 16px 16px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
}

.stone-tablet-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.stone-tablet-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
}

.stone-tablet-sub {
    color: #b9c5e8;
    font-size: 0.94rem;
}

.stone-tablet-status {
    color: #e6eefb;
    line-height: 1.5;
    white-space: pre-line;
    min-height: 2.4em;
}

.stone-tablet-grid {
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 150px));
    justify-content: center;
    gap: 10px;
    padding: 4px 2px 8px;
}

.stone-tablet-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border: 1px solid rgba(188, 199, 224, 0.22);
    border-radius: 10px;
    background: rgba(10, 16, 34, 0.78);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 4px;
}

.stone-tablet-tile.revealed {
    border-color: rgba(235, 211, 152, 0.68);
}

.stone-tablet-tile.matched {
    border-color: rgba(136, 222, 171, 0.78);
    box-shadow: inset 0 0 0 1px rgba(136, 222, 171, 0.34);
}

body.map-controller-active .stone-tablet-tile.map-event-controller-selected {
    border-color: rgba(111, 255, 178, 0.98);
    box-shadow:
        0 0 0 2px rgba(226, 255, 236, 0.82),
        0 0 16px rgba(73, 255, 147, 0.74),
        inset 0 0 16px rgba(73, 255, 147, 0.16);
    z-index: 2;
}

body.map-controller-active .stone-tablet-tile.map-event-controller-selected::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 3px solid rgba(111, 255, 178, 0.98);
    border-radius: 13px;
    pointer-events: none;
    box-shadow: 0 0 18px rgba(73, 255, 147, 0.54);
}

.stone-tablet-tile-back,
.stone-tablet-tile-fallback {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
}

.stone-tablet-tile-back {
    background: linear-gradient(160deg, rgba(51, 60, 88, 0.9), rgba(20, 25, 44, 0.92));
    color: #dbe6ff;
    font-size: 1.35rem;
}

.stone-tablet-tile-fallback {
    background: rgba(24, 30, 52, 0.9);
    border: 1px solid rgba(213, 224, 248, 0.34);
    color: #dbe6ff;
    text-align: center;
    padding: 8px;
    font-size: 0.9rem;
}

.stone-tablet-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.stone-tablet-btn {
    min-width: 220px;
}

.stone-tablet-tile-image {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid rgba(214, 225, 246, 0.34);
    background-color: rgba(17, 24, 44, 0.92);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.stone-tablet-tile-image-curse {
    border-color: rgba(246, 140, 152, 0.52);
}

@media (max-width: 900px) {
    .event-duel-reveal-flip {
        width: min(44vw, 206px);
    }
    .stone-tablet-grid {
        grid-template-columns: repeat(4, minmax(72px, 104px));
        justify-content: center;
        gap: 8px;
    }
    .stone-tablet-tile {
        min-height: 0;
        padding: 4px;
    }
}

.battle-result-image.show {
    animation: battleResultReveal 1.45s ease forwards;
}

@keyframes battleResultReveal {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(0.84);
    }
    18% {
        opacity: 1;
        transform: translateY(0) scale(1.03);
    }
    72% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

.stat-ap { color: #ff7575; }
.stat-mp { color: #7ed8ff; }
.stat-fp { color: #89f08d; }

.sidebar {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 0;
    position: relative;
    padding: 10px;
    border: 1px solid rgba(176, 136, 72, 0.34);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 7, 13, 0.74), rgba(7, 9, 16, 0.9)),
        url('material/field.png');
    background-size: cover;
    background-position: center;
    box-shadow:
        inset 0 0 0 1px rgba(241, 204, 129, 0.08),
        inset 0 0 32px rgba(0, 0, 0, 0.68),
        0 14px 34px rgba(0, 0, 0, 0.34);
    align-self: stretch;
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    overflow: visible;
}

.sidebar::after {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 5;
    border: 18px solid transparent;
    border-image: url("material/alpha_frame.png") 320 / 18px / 0 stretch;
    pointer-events: none;
    opacity: 0.5;
}

.sidebar > * {
    position: relative;
    z-index: 6;
}

.option-gear-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.58);
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.22)),
        linear-gradient(to bottom, #d7b64f, #7a5a12);
    color: #101628;
    font-size: 25px;
    line-height: 1;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.5);
    z-index: 120;
    padding: 0;
}

.option-gear-btn::before {
    content: "\2699";
}

body.battle-controller-active .option-gear-btn::after {
    content: "START";
    right: 54px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 54px;
}

.option-gear-btn:hover {
    transform: translateY(-1px) scale(1.03);
}

.option-gear-btn.disabled,
.option-gear-btn:disabled {
    opacity: 0.42;
    cursor: default;
    transform: none;
    filter: grayscale(0.28);
}

@media (max-width: 1120px) {
    .option-gear-btn {
        right: 12px;
        bottom: 12px;
    }
}

.enemy-top-panel {
    display: grid;
    grid-template-rows: auto;
    gap: 8px;
}

.log-area {
    flex: 0 0 206px;
    min-height: 206px;
    max-height: 206px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px;
    font-size: 0.92rem;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
}

.log-area {
    scrollbar-width: none !important;
}

.log-area::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.log-area::-webkit-scrollbar-corner {
    display: none !important;
}

.log-entry {
    margin-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 4px;
}

.log-entry.clickable {
    cursor: pointer;
    transition: background 120ms ease, transform 120ms ease;
    border-radius: 6px;
    padding: 4px 6px 6px;
    margin-inline: -6px;
}

.log-entry.clickable:hover,
.log-entry.clickable:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    transform: translateX(2px);
}

body.battle-log-controller-active .log-entry.battle-log-controller-selected {
    border-radius: 6px;
    background: rgba(28, 96, 58, 0.36);
    outline: 2px solid rgba(116, 255, 174, 0.96);
    outline-offset: 1px;
    box-shadow:
        0 0 0 1px rgba(218, 255, 231, 0.38) inset,
        0 0 12px rgba(70, 255, 140, 0.44);
}

.log-entry.assist { color: #77cdfd; }
.log-entry.battle { color: #ff8d8d; }
.log-entry.info { color: #ffe285; }

.battle-log-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 3650;
    display: grid;
    place-items: center;
}

.battle-log-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.78);
}

.battle-log-detail-panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 960px);
    max-height: min(86vh, 920px);
    overflow: auto;
    border-radius: 14px;
    border: 1px solid rgba(219, 184, 106, 0.4);
    background: linear-gradient(180deg, rgba(14, 22, 44, 0.98), rgba(7, 12, 28, 0.98));
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.44);
    padding: 16px 18px 18px;
    display: grid;
    gap: 12px;
}

.battle-log-detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.battle-log-detail-title {
    font-family: 'Cinzel', serif;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    color: #f1ddae;
}

.battle-log-detail-close {
    margin-left: auto;
    min-width: 42px;
    padding: 8px 10px;
    font-size: 1rem;
}

.battle-log-detail-body,
.battle-log-detail-meta {
    white-space: pre-wrap;
    line-height: 1.65;
    color: rgba(235, 241, 250, 0.92);
}

.battle-log-detail-meta {
    font-size: 0.92rem;
    color: rgba(157, 210, 255, 0.9);
}

.battle-log-detail-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.battle-log-detail-card-wrap {
    display: grid;
    gap: 8px;
    justify-items: center;
}

.battle-log-detail-card-label {
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    color: rgba(255, 228, 157, 0.88);
}

.battle-log-detail-card-fallback {
    min-width: 140px;
    min-height: 96px;
    display: grid;
    place-items: center;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(219, 184, 106, 0.26);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 240, 240, 0.88);
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.left-space,
.log-area,
.resource-panel,
.enemy-mini-panel,
.enemy-assist-preview,
#driftMemoryScreen .drift-memory-header,
#driftMemoryScreen .drift-memory-panel:not(.drift-memory-side-panel),
#driftMemoryScreen .drift-memory-side-box {
    position: relative;
}

.left-space::after,
.log-area::after,
.resource-panel::after,
.enemy-mini-panel::after,
.enemy-assist-preview::after,
.enemy-threat-panel::after,
#driftMemoryScreen .drift-memory-header::after,
#driftMemoryScreen .drift-memory-panel:not(.drift-memory-side-panel)::after,
#driftMemoryScreen .drift-memory-side-box::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 5;
    border: 16px solid transparent;
    border-image: url("material/alpha_frame.png") 320 / 16px / 0 stretch;
    pointer-events: none;
    opacity: 0.68;
}

.log-area::after,
.resource-panel::after,
.enemy-mini-panel::after,
.enemy-assist-preview::after,
.enemy-threat-panel::after {
    border-width: 12px;
    border-image-width: 12px;
    opacity: 0.58;
}

#driftMemoryScreen .drift-memory-header::after {
    border-width: 12px;
    border-image-width: 12px;
    opacity: 0.5;
}

#driftMemoryScreen .drift-memory-side-box::after {
    border-width: 12px;
    border-image-width: 12px;
    opacity: 0.54;
}

.controls #battleBtn,
.controls #modeBtn {
    width: 100%;
    min-height: 74px;
    padding: 0 28px 0 88px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #f6e7b5;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    line-height: 1.12;
    text-align: center;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(255, 226, 150, 0.34);
    overflow: hidden;
    box-shadow: none;
    position: relative;
}

.controls #battleBtn {
    background-image: url("material/battle_start.png");
    aspect-ratio: 1957 / 540;
}

.controls #modeBtn {
    min-height: 58px;
    padding-left: 78px;
    font-size: 0.98rem;
    background-image: url("material/mode_unit.png");
    aspect-ratio: 1868 / 422;
}

body.assist-mode .controls #modeBtn {
    background-image: url("material/mode_assist.png");
}

body.battle-controller-active .controls #battleBtn::before,
body.battle-controller-active .controls #modeBtn::before,
body.battle-controller-active .battle-spirit-action-btn::before,
body.battle-controller-active .discard-panel .deck-stack::after,
body.battle-controller-active .option-gear-btn::after {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(118, 255, 174, 0.72);
    border-radius: 6px;
    background: rgba(5, 34, 22, 0.84);
    color: #b7ffd2;
    font-family: 'Cinzel', 'Noto Sans JP', serif;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(81, 255, 146, 0.72);
    box-shadow: 0 0 10px rgba(80, 255, 152, 0.26);
    pointer-events: none;
    z-index: 4;
}

body.battle-controller-active .controls #battleBtn::before {
    content: "△";
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
}

body.battle-controller-active .controls #modeBtn::before {
    content: "□";
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
}

.controls #battleBtn:hover,
.controls #modeBtn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.controls #battleBtn:disabled,
.controls #modeBtn:disabled {
    filter: grayscale(0.5) brightness(0.68);
    cursor: default;
}

button {
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(to bottom, #d7b64f, #a9831f);
    color: #151a2a;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.08rem;
    cursor: pointer;
}

button:hover {
    transform: translateY(-1px);
}

button.map-menu-open-btn {
    padding: 0 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent url('ui/set_button2.png') center / contain no-repeat !important;
    box-shadow: none !important;
    outline: 0 !important;
    color: #f8e5b9 !important;
    appearance: none;
    -webkit-appearance: none;
}

button.map-menu-open-btn:hover {
    transform: none;
    filter: brightness(1.1);
}

.title-menu .title-menu-item {
    background: transparent !important;
    border: none !important;
    color: #f7f7f7 !important;
    text-align: right;
    padding: 0;
}

.title-menu .title-menu-item:hover,
.title-menu .title-menu-item:focus-visible {
    color: #ffffff !important;
}

.bottom-panel {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    gap: 14px;
    align-items: end;
    min-height: 260px;
    min-width: 0;
}

.hand-zone {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    grid-column: 2;
    position: relative;
    z-index: 40;
    min-width: 0;
}

.hand-zone::before {
    content: none;
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 4px;
    height: 168px;
    z-index: 39;
    pointer-events: none;
    border-radius: 50% 50% 12px 12px / 70% 70% 18px 18px;
    border: 1px solid rgba(198, 151, 82, 0.34);
    background:
        radial-gradient(ellipse at 50% 72%, rgba(122, 25, 17, 0.34), transparent 48%),
        linear-gradient(180deg, rgba(17, 18, 23, 0.18), rgba(4, 5, 9, 0.72));
    box-shadow:
        inset 0 0 0 1px rgba(246, 211, 139, 0.08),
        inset 0 18px 34px rgba(255, 220, 142, 0.04),
        0 -10px 22px rgba(0, 0, 0, 0.22);
}

#hand {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 356px;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    overflow: visible;
    transform: translateY(calc(180px + ((var(--game-canvas-inv-scale, 1) - 1) * 200px)));
    transition: transform 0.25s ease;
    position: relative;
    z-index: 41;
}

.hand-zone:hover #hand {
    transform: translateY(calc(18px + ((var(--game-canvas-inv-scale, 1) - 1) * 240px)));
}

@media (max-width: 1200px) {
    .records-modal {
        padding: 4px;
    }

    .records-modal-panel {
        width: 100%;
        height: 100%;
    }

    .records-modal-head {
        padding: 14px 14px 8px;
    }

    .records-tab-row,
    .records-modal-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .records-metric-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

@media (max-height: 950px) {
    #hand {
        min-height: 300px;
        transform: translateY(calc(100px + ((var(--game-canvas-inv-scale, 1) - 1) * 90px)));
    }

    .hand-zone:hover #hand {
        transform: translateY(calc(-20px + ((var(--game-canvas-inv-scale, 1) - 1) * 90px)));
    }

    #hand .hand-card:hover {
        transform: translateX(var(--fan-x)) translateY(calc(var(--fan-y) - 2px)) rotate(var(--fan-rot));
    }
}

@media (max-height: 820px) {
    #hand {
        min-height: 340px;
        transform: translateY(calc(132px + ((var(--game-canvas-inv-scale, 1) - 1) * 124px)));
    }

    .hand-zone:hover #hand {
        transform: translateY(calc(18px + ((var(--game-canvas-inv-scale, 1) - 1) * 112px)));
    }

    #hand .hand-card:hover {
        transform: translateX(var(--fan-x)) translateY(calc(var(--fan-y) - 2px)) rotate(var(--fan-rot));
    }
}

@media (max-height: 760px) {
    .game-container {
        padding: 16px 10px 6px;
        gap: 8px;
    }

    .game-main {
        grid-template-columns: 292px minmax(0, 1fr) 246px;
        gap: 10px;
        margin-top: 4px;
    }

    .left-space {
        min-height: 0;
        padding: 7px;
    }

    .detail-title {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .detail-card-wrap {
        margin-bottom: 4px;
    }

    .detail-card {
        width: 206px;
        height: 186px;
        background-size: cover;
        background-position: center;
    }

    .detail-name {
        font-size: 1.02rem;
        line-height: 1.18;
    }

    .detail-attribute,
    .detail-tag-race {
        font-size: 0.88rem;
    }

    .detail-meta {
        font-size: 0.98rem;
        line-height: 1.18;
    }

    .detail-effect-line {
        font-size: 0.88rem;
        line-height: 1.2;
    }

    .detail-stats {
        font-size: 1.02rem;
        line-height: 1.18;
    }

    .detail-skill-info {
        min-height: 0;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .power-panel {
        min-height: 112px;
        padding-top: 6px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .power-title {
        font-size: 1.02rem;
        margin-bottom: 4px;
    }

    .power-list {
        min-height: 68px;
        font-size: 0.82rem;
        line-height: 1.2;
        gap: 5px;
    }

    .board-enemy-panel {
        width: 168px;
        min-height: 186px;
        padding: 10px 9px;
    }

    .enemy-threat-panel {
        width: 178px;
        height: 182px;
        min-height: 182px;
        padding: 10px 10px 11px;
        gap: 6px;
    }

    .enemy-threat-title {
        font-size: 0.9rem;
        padding-bottom: 6px;
    }

    .enemy-threat-label {
        font-size: 0.72rem;
    }

    .enemy-threat-value {
        font-size: 0.82rem;
        line-height: 1.16;
    }

    .enemy-mini-value {
        font-size: 1.1rem;
    }

    .enemy-mini-hp-row {
        gap: 6px;
    }

    .enemy-ace-thumb {
        width: 102px;
    }

    .board-assist-row {
        right: 10px;
        top: 16px;
    }

    .board-assist-preview-row {
        right: 10px;
        top: 138px;
    }

    .board-main {
        height: 749px;
    }

    .field {
        padding-left: 258px;
    }

    #playerField {
        top: 376px;
    }

    .enemy-assist-area {
        min-width: 122px;
        min-height: 88px;
    }

    .enemy-assist-preview {
        width: 172px;
        min-height: 92px;
    }

    .enemy-assist-preview-title {
        font-size: 0.9rem;
    }

    .enemy-assist-preview-body {
        font-size: 0.78rem;
        line-height: 1.28;
    }

    .sidebar {
        width: 100%;
        min-width: 0;
        padding: 8px;
    }

    .log-area {
        min-height: 182px;
        max-height: 182px;
        font-size: 0.78rem;
    }

    .controls {
        gap: 8px;
    }

    .controls button {
        font-size: 0.9rem;
        min-height: 40px;
    }

    .resource-panel {
        padding: 0;
    }

    .resource-label {
        font-size: 0.82rem;
    }

    .resource-value {
        font-size: 1.2rem;
    }

    .resource-value.hp {
        font-size: 1.58rem;
    }

    .resource-value.mana {
        font-size: 1.72rem;
    }

    .resource-subvalue {
        font-size: 0.68rem;
    }

    .deck-stack {
        width: 90px;
        height: 128px;
    }

    .battle-spirit-panel-floating {
        right: auto;
        bottom: auto;
        width: 100%;
    }

    .battle-spirit-title {
        font-size: 0.7rem;
    }

    .battle-spirit-status {
        grid-template-columns: 98px 122px;
        grid-template-rows: auto;
        justify-content: center;
        gap: 4px;
    }

    .battle-spirit-core-value {
        width: 98px;
        min-height: 86px;
        padding: 62px 0 0 0;
        font-size: 1.22rem;
        text-align: center;
    }

    .battle-spirit-pips {
        width: 122px;
    }

    .battle-spirit-pip {
        height: 11px;
    }

    .battle-spirit-action-btn {
        font-size: 0.74rem;
        padding: 0 8px 2px 20px;
        min-height: 0;
        height: 78px;
    }

    #battleSpiritDrawBtn {
        margin-top: -50px;
    }
}

.hand-card {
    --fan-x: 0px;
    --fan-y: 0px;
    --fan-rot: 0deg;
    flex: 0 0 auto;
    margin-left: var(--fan-overlap, -18px);
    transform-origin: bottom center;
    transform: translateX(var(--fan-x)) translateY(var(--fan-y)) rotate(var(--fan-rot));
    transition: transform 0.18s ease;
    z-index: 42;
    position: relative;
}

.hand-card:first-child {
    margin-left: 0;
}

.hand-card.custom-hand-drag-source {
    opacity: 0;
}

.hand-card:hover {
    z-index: 120;
}

#hand .hand-card:hover {
    transform: translateX(var(--fan-x)) translateY(calc(var(--fan-y) - 12px)) rotate(var(--fan-rot));
}

body.battle-controller-active #hand .hand-card.battle-controller-selected {
    z-index: 125;
    filter: drop-shadow(0 0 12px rgba(89, 255, 154, 0.46));
}

body.battle-controller-active #hand .hand-card.battle-controller-selected::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 3px solid rgba(112, 255, 172, 0.98);
    border-radius: 10px;
    box-shadow:
        0 0 0 1px rgba(210, 255, 228, 0.5) inset,
        0 0 12px rgba(73, 255, 145, 0.66),
        0 0 22px rgba(73, 255, 145, 0.34);
    pointer-events: none;
    z-index: 20;
}

#hand .hand-card.hand-lane-matchup-win .card-name,
#hand .hand-card.hand-lane-matchup-win .card-image-lv,
#hand .hand-card.hand-lane-matchup-win .card-image-race,
#hand .hand-card.hand-lane-matchup-win .card-bp-letter,
#hand .hand-card.hand-lane-matchup-win .card-effect-panel,
#hand .hand-card.hand-lane-matchup-win .card-stats span {
    color: #5aaaff;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(90, 170, 255, 0.78);
}

#hand .hand-card.hand-lane-matchup-lose .card-name,
#hand .hand-card.hand-lane-matchup-lose .card-image-lv,
#hand .hand-card.hand-lane-matchup-lose .card-image-race,
#hand .hand-card.hand-lane-matchup-lose .card-bp-letter,
#hand .hand-card.hand-lane-matchup-lose .card-effect-panel,
#hand .hand-card.hand-lane-matchup-lose .card-stats span {
    color: #ff5a5a;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(255, 90, 90, 0.78);
}

#hand .hand-card.hand-lane-matchup-draw .card-name,
#hand .hand-card.hand-lane-matchup-draw .card-image-lv,
#hand .hand-card.hand-lane-matchup-draw .card-image-race,
#hand .hand-card.hand-lane-matchup-draw .card-bp-letter,
#hand .hand-card.hand-lane-matchup-draw .card-effect-panel,
#hand .hand-card.hand-lane-matchup-draw .card-stats span {
    color: #6eff82;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(110, 255, 130, 0.78);
}

.resource-panel {
    border-radius: 0;
    border: none;
    background: none;
    padding: 0;
    display: block;
    margin-top: 4px;
    min-height: 136px;
    box-shadow: none;
    position: relative;
}

.card-stats span:first-child {
    transform: translateX(-4px);
}

.card-stats span:last-child {
    transform: translateX(4px);
}

.resource-panel::after {
    display: none;
}

.resource-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1366 / 625;
    background: url("material/hud_deck_hp_mana.png") top center / contain no-repeat;
    pointer-events: none;
}

.battle-spirit-panel {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    display: grid;
    gap: 6px;
    position: relative;
    z-index: 60;
}

.battle-spirit-title {
    display: none;
}

.battle-spirit-panel-floating {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    z-index: 60;
    margin: 0;
    justify-items: center;
}

.battle-spirit-status {
    position: relative;
    display: grid;
    grid-template-columns: 110px 138px;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -18px;
}

.peek-field-active .travel-result-panel {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    pointer-events: none;
}

.battle-spirit-core-value {
    width: 110px;
    min-height: 96px;
    position: relative;
    border-radius: 0;
    border: none;
    background: none;
    grid-column: 1;
    grid-row: 1;
    display: block;
    padding: 70px 0 0 0;
    box-sizing: border-box;
    font-family: 'Cinzel', serif;
    font-size: 1.58rem;
    font-weight: 800;
    color: #fff3e4;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(225, 96, 58, 0.65);
    box-shadow: none;
    text-align: center;
}

.battle-spirit-core-value::before {
    content: "";
    width: 84px;
    aspect-ratio: 910 / 654;
    background: url("material/battle_spirit_emblem.png") center / contain no-repeat;
    position: absolute;
    left: 10px;
    top: -3px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

.battle-spirit-core-value::after {
    content: "";
    position: absolute;
    left: 52px;
    top: 26px;
    width: 34px;
    height: 28px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.36) 48%, transparent 72%);
    opacity: 0;
    pointer-events: none;
    filter: blur(1px);
    mix-blend-mode: multiply;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.battle-spirit-panel:not(.battle-spirit-spend-ready) .battle-spirit-core-value::after {
    opacity: 0.82;
}

.battle-spirit-spend-ready .battle-spirit-core-value::after {
    animation: battleSpiritEmblemReadyPulse 0.95s ease-in-out infinite;
    background: radial-gradient(circle, rgba(255, 95, 68, 0.92), rgba(255, 25, 18, 0.42) 44%, transparent 72%);
    mix-blend-mode: screen;
}

@keyframes battleSpiritEmblemReadyPulse {
    0%, 100% {
        opacity: 0.16;
        transform: translate(-50%, -50%) scale(0.92);
    }
    50% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.18);
    }
}

.battle-spirit-pips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 4px;
    align-content: center;
    grid-column: 2;
    grid-row: 1;
    width: 138px;
    justify-self: center;
    aspect-ratio: 1;
    padding: 18px;
    box-sizing: border-box;
    background: url("material/block_gauge.png") center / contain no-repeat;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.46));
}

.battle-spirit-pip {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
}

.battle-spirit-pip.active {
    background: url("material/block_energy.png") center / contain no-repeat;
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(246, 168, 71, 0.45));
}

.battle-spirit-panel:not(.battle-spirit-spend-ready) .battle-spirit-pip.active {
    filter: drop-shadow(0 0 5px rgba(246, 168, 71, 0.45));
    opacity: 1;
}

.battle-spirit-actions {
    display: grid;
    gap: 0;
    width: 226px;
    justify-self: center;
    margin: -35px auto 0;
    position: relative;
    z-index: 62;
}

.battle-spirit-action-btn {
    border: none;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #f6e4b3;
    font-family: 'Cinzel', 'Noto Sans JP', serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0 12px 2px 28px;
    min-height: 0;
    height: 127px;
    line-height: 1.05;
    cursor: pointer;
    position: relative;
    z-index: 63;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.96),
        0 0 8px rgba(255, 214, 126, 0.34);
    transition: transform 0.16s ease, filter 0.16s ease;
}

body.battle-controller-active .battle-spirit-action-btn::before {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

body.battle-controller-active #battleSpiritManaBtn::before {
    content: "L1";
}

body.battle-controller-active #battleSpiritDrawBtn::before {
    content: "R1";
}

#battleSpiritManaBtn {
    background-image: url("material/senki_button_1.png");
}

#battleSpiritDrawBtn {
    background-image: url("material/senki_button_2.png");
    margin-top: -70px;
}

.battle-spirit-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.battle-spirit-action-btn:disabled {
    opacity: 0.42;
    cursor: default;
    filter: grayscale(0.18);
}

.deck-stack {
    width: 110px;
    height: 156px;
    margin: 14px auto 8px auto;
    border-radius: 8px;
    background: url('material/CardFrame2.png') center/100% 100% no-repeat;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.58));
}

.discard-panel .deck-stack {
    position: absolute;
    left: 50%;
    top: -58px;
    transform: translateX(-50%);
    margin: 0;
    justify-self: auto;
    z-index: 1;
}

.discard-panel .deck-stack::before {
    content: "";
    position: absolute;
    inset: -22px -24px -16px;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 56%, rgba(246, 184, 92, 0.16), rgba(156, 74, 32, 0.08) 42%, transparent 72%);
    box-shadow: 0 0 24px rgba(239, 161, 82, 0.08);
}

body.battle-controller-active .discard-panel .deck-stack::after {
    content: "SELECT";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 58px;
    z-index: 2;
}

.draw-fly-card {
    position: fixed;
    z-index: 2400;
    width: 104px;
    height: 146px;
    pointer-events: none;
    border-radius: 8px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
        url('material/CardFrame2.png') center/100% 100% no-repeat;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.62);
}

#hand::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#hand {
    scrollbar-width: none;
}

.resource-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: none;
    padding-bottom: 0;
    min-height: 0;
}

.resource-panel .resource-item {
    position: absolute;
    left: 82px;
    right: 26px;
    height: 34px;
    align-items: center;
}

.resource-item-deck {
    top: 15px;
}

.resource-panel > .resource-item:not(.resource-item-deck):not(.resource-item-mana):not(:has(#graveCount)) {
    top: 47px;
}

.resource-item-mana {
    top: 85px;
}

.discard-panel {
    position: relative;
    min-height: 178px;
    flex: 0 0 auto;
    margin-top: auto;
}

.discard-panel .resource-item {
    position: absolute;
    left: 0;
    right: 0;
    top: 104px;
    height: 24px;
    justify-content: center;
}

.discard-panel .resource-label {
    display: block !important;
    color: #d5c18a;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}

.discard-panel #graveCount {
    display: none;
}

.resource-mana-stack {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "next value";
    column-gap: 14px;
    align-items: flex-end;
    line-height: 1;
    margin-left: auto;
    min-width: 120px;
    position: relative;
}

.resource-deck-stack {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "next value";
    column-gap: 14px;
    align-items: flex-end;
    line-height: 1;
    margin-left: auto;
    min-width: 120px;
    position: relative;
}

.resource-label {
    display: none;
}

.resource-value {
    font-family: 'Cinzel', serif;
    font-size: 1.22rem;
    color: #ead98d;
    margin-left: auto;
    align-self: center;
    grid-area: value;
    white-space: nowrap;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(224, 183, 98, 0.3);
}

.resource-item-deck .resource-value {
    font-size: 1.7rem;
}

.resource-item-deck .resource-subvalue {
    position: static;
    grid-area: next;
    align-self: center;
    margin-top: 0;
}

.resource-value.hp {
    color: #ff7b7b;
    font-size: 1.38rem;
}

.resource-value.mana {
    color: #94dbff;
    font-size: 1.72rem;
}

.resource-subvalue {
    font-size: 0.86rem;
    letter-spacing: 0.03em;
}

.resource-subvalue.mana-recovery {
    color: #78d8ff;
    opacity: 0.9;
    position: static;
    grid-area: next;
    align-self: center;
}

.resource-subvalue.draw-preview {
    color: #c8e58a;
    opacity: 0.9;
}

@keyframes penalty-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.1; }
}

.rebuild-penalty-warning {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
}

.rebuild-penalty-warning.hidden {
    display: none;
}

.rebuild-penalty-warning.mode-penalty,
.rebuild-penalty-warning.mode-avoid {
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.rebuild-penalty-warning.mode-penalty {
    color: #ff3a3a;
    animation: penalty-blink 0.65s ease-in-out infinite;
}

.rebuild-penalty-warning.mode-avoid {
    color: #7dffaa;
    animation: none;
}

.rebuild-penalty-dmg {
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.1;
    color: #ff3a3a;
}

.rebuild-penalty-label {
    font-size: 0.65rem;
    line-height: 1.1;
}

.enemy-assist-overlay {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: repeating-linear-gradient(45deg, #1a1a2e, #1a1a2e 10px, #2a2a2a 10px, #2a2a2a 20px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.enemy-assist-card {
    width: 54px;
        height: 92px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background:
        linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)),
        url('material/CardFrame2.png') center/100% 100% no-repeat;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.enemy-assist-mark {
    font-family: 'Cinzel', serif;
    font-size: 1.42rem;
    font-weight: 700;
    color: #f3f6ff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
    line-height: 1;
}

.enemy-assist-card.revealed .enemy-assist-mark { color: #84d7ff; }
.enemy-assist-card.sealed .enemy-assist-mark { color: #ff9b9b; }

body.battle-controller-active .enemy-assist-card.battle-controller-selected {
    border-color: rgba(112, 255, 172, 0.95);
    box-shadow:
        0 0 0 2px rgba(185, 255, 213, 0.54),
        0 0 18px rgba(87, 255, 154, 0.42),
        0 4px 12px rgba(0, 0, 0, 0.55);
}

@media (max-width: 1320px) {
    .game-main {
        grid-template-columns: 260px 1fr 270px;
    }

    .power-panel-floating {
        right: 8px;
        width: 210px;
    }

    .bottom-panel {
        grid-template-columns: 210px 1fr 270px;
    }
}

@media (max-width: 1120px) {
    .game-container {
        grid-template-rows: auto auto 1fr;
    }

    .game-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .left-space {
        display: none;
    }

    .enemy-top-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .sidebar {
        width: 100%;
        max-height: 230px;
    }

    .bottom-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .board-status-row {
        position: static;
        margin-bottom: 6px;
    }

    .field {
        justify-content: center;
        padding-left: 8px;
    }

    .hand-zone {
        grid-column: 1;
    }

    .resource-panel {
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .battle-spirit-panel {
        grid-column: 1 / -1;
    }

    .battle-spirit-panel-floating {
        position: static;
        width: 100%;
        box-shadow: none;
    }

    .board-assist-preview-row {
        position: static;
    }

    .enemy-assist-preview {
        width: 100%;
        min-height: 84px;
    }

    .battle-spirit-status {
        grid-template-columns: 90px 112px;
        grid-template-rows: auto;
        justify-content: center;
    }

    .battle-spirit-core-value {
        width: 90px;
        min-height: 80px;
        padding: 58px 0 0 0;
        font-size: 1.08rem;
        text-align: center;
    }

    .battle-spirit-pips {
        width: 112px;
    }

    .deck-stack {
        grid-column: 1 / -1;
    }

    .slot {
        width: 178px;
        height: 262px;
    }

    .card {
        width: 170px;
        height: 248px;
    }

    .card-cost {
        top: 4px;
        left: 4px;
        width: 29px;
        height: 30px;
        padding-right: 0;
        font-size: 1.2rem;
        transform: none;
    }

    .card-name {
        top: 5px;
        left: 38px;
        right: 40px;
        font-size: 0.82rem;
    }

    .card-bp-icon {
        top: 4px;
        right: 6px;
        width: 24px;
        height: 24px;
    }

    .card-bp-letter {
        font-size: 11px;
    }

    .card-image {
        top: 42px;
        left: 10px;
        right: 10px;
        height: 120px;
    }

    .card-attr-orbs {
        top: 35px;
        right: 21px;
        gap: 3px;
        max-width: 52px;
    }

    .card-attr-orb {
        width: 14px;
        height: 14px;
    }

    .card-item-badges {
        top: 49px;
        left: 20px;
        gap: 3px;
    }

    .card-item-badge {
        width: 28px;
        height: 28px;
    }

    .card-effect-panel {
        top: 174px;
        left: 10px;
        right: 10px;
        height: 42px;
        padding: 5px;
    }

    .card-effect-line {
        font-size: 0.5rem;
    }

    .card-stats {
        left: 8px;
        right: 8px;
        bottom: 3px;
        gap: 4px;
    }

    .card-stats span {
        font-size: 0.92rem;
        padding: 5px 0 4px;
    }

    .card-stats span:first-child {
        transform: translateX(-2px);
    }

    .card-stats span:last-child {
        transform: translateX(2px);
    }

    #hand {
        min-height: 268px;
        transform: translateY(148px);
    }

    .hand-card {
        margin-left: var(--fan-overlap, -14px);
    }
}

body.fixed-canvas-mode .game-main {
    grid-template-columns: 330px minmax(0, 1fr) 300px;
    grid-template-rows: auto;
    gap: 14px;
    margin-top: 10px;
    align-items: start;
}

body.fixed-canvas-mode .game-container {
    padding: 22px 14px 8px;
    grid-template-rows: 1fr auto;
    gap: 10px;
}

body.fixed-canvas-mode .left-space {
    display: grid;
    min-height: 610px;
    padding: 8px;
}

body.fixed-canvas-mode .board-main {
    height: 785px;
}

body.fixed-canvas-mode .field {
    justify-content: flex-start;
    padding-left: 188px;
    height: 374px;
}

body.fixed-canvas-mode #enemyField {
    top: 0;
    transform: translateY(-18px);
}

body.fixed-canvas-mode #playerField {
    top: 411px;
    margin-top: 0;
}

body.fixed-canvas-mode .board-enemy-panel {
    width: 172px;
    min-height: 242px;
    padding: 12px 10px;
}

body.fixed-canvas-mode .enemy-ace-thumb {
    width: 118px;
}

body.fixed-canvas-mode .enemy-threat-panel {
    width: 172px;
    height: 218px;
    min-height: 218px;
    padding: 12px 12px 14px;
    gap: 6px;
}

body.fixed-canvas-mode .enemy-threat-title {
    font-size: 1.02rem;
    padding-bottom: 8px;
}

body.fixed-canvas-mode .enemy-threat-label {
    font-size: 0.76rem;
}

body.fixed-canvas-mode .enemy-threat-value {
    font-size: 0.88rem;
    line-height: 1.18;
}

body.fixed-canvas-mode .board-assist-row {
    right: 52px;
    top: 24px;
}

body.fixed-canvas-mode .board-assist-preview-row {
    position: absolute;
    right: 10px;
    top: 176px;
}

body.fixed-canvas-mode .enemy-assist-area {
    min-width: 148px;
    min-height: 108px;
}

body.fixed-canvas-mode .enemy-assist-preview {
    width: 232px;
    min-height: 112px;
}

body.fixed-canvas-mode .enemy-assist-preview-title {
    font-size: 1rem;
}

body.fixed-canvas-mode .enemy-assist-preview-body {
    font-size: 0.92rem;
    line-height: 1.5;
}

body.fixed-canvas-mode .power-panel-floating {
    right: 5px;
    top: 415px;
    width: 270px;
    height: 365px;
    padding: 10px 12px 12px;
}

body.fixed-canvas-mode .power-title {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

body.fixed-canvas-mode .power-list {
    min-height: 88px;
    font-size: 0.98rem;
    line-height: 1.35;
    gap: 8px;
}

body.fixed-canvas-mode .sidebar {
    width: 300px;
    min-width: 0;
    padding: 10px;
    height: 1038px;
    max-height: none;
    align-self: start;
}

body.fixed-canvas-mode .log-area {
    flex: 0 0 214px;
    min-height: 214px;
    max-height: 214px;
    font-size: 0.92rem;
}

body.fixed-canvas-mode .controls {
    gap: 8px;
}

body.fixed-canvas-mode .controls #battleBtn {
    min-height: 74px;
    padding: 0 28px 0 88px;
    font-size: 1.08rem;
}

body.fixed-canvas-mode .controls #modeBtn {
    min-height: 58px;
    padding-left: 78px;
    font-size: 0.98rem;
}

body.fixed-canvas-mode .bottom-panel {
    grid-template-columns: 250px 1fr 300px;
    min-height: 260px;
}

body.fixed-canvas-mode .hand-zone {
    grid-column: 2;
}

body.fixed-canvas-mode #hand {
    min-height: 356px;
    transform: translateY(calc(180px + ((var(--game-canvas-inv-scale, 1) - 1) * 200px)));
}

body.fixed-canvas-mode .hand-zone:hover #hand {
    transform: translateY(calc(18px + ((var(--game-canvas-inv-scale, 1) - 1) * 240px)));
}

body.fixed-canvas-mode #hand .hand-card:hover {
    transform: translateX(var(--fan-x)) translateY(calc(var(--fan-y) - 12px)) rotate(var(--fan-rot));
}

body.battle-controller-active.battle-hand-raised #hand,
body.fixed-canvas-mode.battle-controller-active.battle-hand-raised #hand {
    transform: translateY(calc(18px + ((var(--game-canvas-inv-scale, 1) - 1) * 240px)));
}

body.battle-controller-active.battle-hand-lowered #hand,
body.fixed-canvas-mode.battle-controller-active.battle-hand-lowered #hand {
    transform: translateY(calc(180px + ((var(--game-canvas-inv-scale, 1) - 1) * 200px)));
}

@media (max-width: 1599px), (max-height: 899px) {
    body.fixed-canvas-mode .hand-zone:hover #hand {
        transform: translateY(calc(-80px + ((var(--game-canvas-inv-scale, 1) - 1) * 140px)));
    }

    body.battle-controller-active.battle-hand-raised #hand,
    body.fixed-canvas-mode.battle-controller-active.battle-hand-raised #hand {
        transform: translateY(calc(-80px + ((var(--game-canvas-inv-scale, 1) - 1) * 140px)));
    }

    body.fixed-canvas-mode #hand .hand-card:hover {
        transform: translateX(var(--fan-x)) translateY(calc(var(--fan-y) - 18px)) rotate(var(--fan-rot));
    }
}

@media (min-width: 1600px) and (max-width: 1700px) and (max-height: 950px) {
    body.fixed-canvas-mode .hand-zone:hover #hand {
        transform: translateY(calc(-40px + ((var(--game-canvas-inv-scale, 1) - 1) * 190px)));
    }

    body.battle-controller-active.battle-hand-raised #hand,
    body.fixed-canvas-mode.battle-controller-active.battle-hand-raised #hand {
        transform: translateY(calc(-40px + ((var(--game-canvas-inv-scale, 1) - 1) * 190px)));
    }
}

body.fixed-canvas-mode .hand-card {
    margin-left: var(--fan-overlap, -18px);
}

body.fixed-canvas-mode .deck-stack {
    grid-column: auto;
    width: 110px;
    height: 156px;
}

body.fixed-canvas-mode .battle-spirit-panel {
    grid-column: auto;
}

body.fixed-canvas-mode .battle-spirit-panel-floating {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
}

body.fixed-canvas-mode .battle-spirit-status {
    grid-template-columns: 110px 138px;
    grid-template-rows: auto;
    justify-content: center;
    gap: 8px;
    margin-top: -18px;
}

body.fixed-canvas-mode .battle-spirit-core-value {
    width: 110px;
    min-height: 96px;
    padding: 70px 0 0 0;
    font-size: 1.58rem;
    text-align: center;
}

body.fixed-canvas-mode .battle-spirit-pips {
    width: 138px;
}

body.fixed-canvas-mode .battle-spirit-pip {
    height: 100%;
}

body.fixed-canvas-mode .battle-spirit-action-btn {
    font-size: 0.82rem;
    padding: 0 12px 2px 28px;
    height: 127px;
}

body.fixed-canvas-mode #battleSpiritDrawBtn {
    margin-top: -70px;
}

body.fixed-canvas-mode .detail-title {
    font-size: 1.1rem;
    margin-bottom: -4px;
}

body.fixed-canvas-mode .detail-card-wrap {
    margin-top: 34px;
    margin-bottom: 42px;
}

body.fixed-canvas-mode .detail-card {
    width: 262px;
    height: 280px;
    background-size: 120%;
    background-position: center 40%;
}

body.fixed-canvas-mode .detail-name {
    font-size: 1.3rem;
    line-height: 1.25;
}

body.fixed-canvas-mode .detail-attribute {
    font-size: 1.02rem;
}

body.fixed-canvas-mode .detail-tag-race {
    font-size: 1.06rem;
}

body.fixed-canvas-mode .detail-meta {
    font-size: 1.34rem;
    line-height: normal;
}

body.fixed-canvas-mode .detail-effect-line {
    font-size: 1.08rem;
    line-height: 1.3;
}

body.fixed-canvas-mode .detail-stats {
    font-size: 1.3rem;
    line-height: 1.2;
}

body.fixed-canvas-mode .detail-skill-info {
    min-height: 50px;
    font-size: 0.9rem;
    line-height: 1.32;
}

.test-battle-modal {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: none;
}

.test-battle-modal.open {
    display: block;
}

.test-battle-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.74);
}

.test-battle-modal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 1460px);
    height: min(86vh, 940px);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(8, 14, 35, 0.96);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.62);
    padding: 14px 16px 16px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
}

.test-battle-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 6px;
}

.test-battle-modal-title {
    color: #e4c772;
    font-family: 'Cinzel', serif;
    font-size: 1.24rem;
    letter-spacing: 0.04em;
}

.test-battle-close-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 1.25rem;
}

.test-battle-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px auto;
    gap: 10px;
    align-items: center;
}

.test-battle-search-input {
    height: 38px;
    border-radius: 9px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(6, 12, 28, 0.75);
    color: #f2f4f8;
    padding: 0 12px;
    outline: none;
}

.test-battle-search-input:focus {
    border-color: rgba(241, 209, 128, 0.8);
}

.test-battle-count {
    color: #d4dfef;
    font-family: 'Cinzel', serif;
    min-width: 92px;
    text-align: right;
}

.test-battle-content {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 12px;
}

.test-battle-card-list {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid rgba(219, 184, 106, 0.28);
    border-radius: 12px;
    background: rgba(7, 13, 30, 0.62);
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}

.test-battle-card-item {
    position: relative;
    border: 1px solid rgba(227, 196, 120, 0.2);
    border-radius: 10px;
    background: rgba(4, 9, 20, 0.34);
    min-height: 254px;
    overflow: hidden;
    padding: 0;
}

.test-battle-card-item:hover,
.test-battle-card-item.active {
    border-color: rgba(253, 221, 142, 0.72);
    background: rgba(26, 22, 10, 0.38);
}

.test-battle-card-node {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%) scale(0.68);
    transform-origin: top center;
    pointer-events: none;
}

.test-battle-side {
    border: 1px solid rgba(219, 184, 106, 0.28);
    border-radius: 12px;
    background: rgba(7, 13, 30, 0.78);
    padding: 10px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 8px;
}

.test-battle-detail-card {
    width: 100%;
    min-height: 278px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(16, 22, 36, 0.9);
    color: #b8c5df;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 10px;
}

.test-battle-detail-name {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    min-height: 1.8em;
}

.test-battle-action-grid {
    display: grid;
    gap: 8px;
    align-content: start;
}

.test-battle-action-btn {
    width: 100%;
}

@media (max-width: 1080px) {
    .test-battle-modal-panel {
        width: min(96vw, 1460px);
        height: min(92vh, 940px);
    }

    .test-battle-content {
        grid-template-columns: 1fr;
    }

    .test-battle-card-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.test-stat-adjust {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.test-stat-adjust-btn {
    width: 24px;
    height: 20px;
    min-width: 24px;
    padding: 0;
    border-radius: 6px;
    font-size: 0.72rem;
    line-height: 1;
}

.enemy-mini-item .test-stat-adjust {
    margin-left: 10px;
}


.test-battle-skill-select {
    height: 38px;
    border-radius: 9px;
    border: 1px solid rgba(223, 190, 109, 0.45);
    background: rgba(6, 12, 28, 0.8);
    color: #f2f4f8;
    padding: 0 10px;
}

.test-battle-skill-select:focus {
    border-color: rgba(241, 209, 128, 0.8);
    outline: none;
}

@media (max-width: 1080px) {
    .test-battle-controls {
        grid-template-columns: 1fr;
    }
}

.slot-clear-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(245, 201, 132, 0.86);
    background: rgba(30, 8, 8, 0.84);
    color: #ffd8d8;
    font-size: 1rem;
    line-height: 1;
    z-index: 4;
}

.slot-clear-btn:hover {
    background: rgba(62, 8, 8, 0.92);
}

.slot-clear-btn {
    pointer-events: auto;
    z-index: 30;
}

.player-slot-clear-btn {
    bottom: 52px;
}

/* Player side clear button: move to upper-right so hand hover does not block click */
.player-slot-clear-btn {
    top: 10px;
    right: -8px;
    bottom: auto;
}

.tutorial-intro-screen {
    position: fixed;
    inset: 0;
    z-index: 2170;
    overflow: hidden;
    opacity: 0;
    transition: opacity 480ms ease;
}

.tutorial-intro-screen.hidden {
    display: none;
}

.tutorial-intro-screen.is-visible {
    opacity: 1;
}

.tutorial-intro-screen.blackout-hold {
    opacity: 1;
}

.tutorial-intro-backdrop {
    position: absolute;
    inset: 0;
    transition: background 1400ms ease;
    background: #020406;
}

.tutorial-intro-screen.blackout-hold .tutorial-intro-backdrop {
    background: #000;
}

.tutorial-intro-actor {
    position: absolute;
    bottom: 168px;
    width: min(28vw, 360px);
    height: min(60vh, 620px);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    pointer-events: none;
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.44));
    transition:
        left 1800ms ease,
        right 1800ms ease,
        opacity 2400ms ease,
        transform 2400ms ease;
}

.tutorial-intro-actor.hidden {
    display: none;
}

.tutorial-intro-soul {
    left: 50%;
    transform: translateX(-50%) scale(0.94);
    opacity: 0;
    background-image: url('material/Soul.png');
}

.tutorial-intro-soul.visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.tutorial-intro-soul.shift-left {
    left: 33%;
    transform: translateX(-50%) scale(0.98);
}

.tutorial-intro-revock {
    right: 17%;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    background-image: url('material/レボック.png');
}

.tutorial-intro-revock.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tutorial-intro-dialog {
    bottom: 28px;
}

.tutorial-intro-dialog.hidden {
    display: none;
}

.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: block;
}

.tutorial-overlay.hidden {
    display: none;
}

.tutorial-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.tutorial-overlay-bg {
    display: none;
}

.tutorial-actor {
    position: absolute;
    bottom: 120px;
    width: min(28vw, 360px);
    height: min(56vh, 560px);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.tutorial-ghost {
    left: 3vw;
    background-image: url('material/Soul.png');
    animation: tutorialFloatLeft 3.4s ease-in-out infinite;
}

.tutorial-revock {
    right: 3vw;
    background-image: url('material/レボック.png');
    animation: tutorialFloatRight 3.1s ease-in-out infinite;
}

.tutorial-overlay.tutorial-overlay-battle .tutorial-revock {
    left: 0.8vw;
    right: auto;
    bottom: 12px;
    width: min(22vw, 280px);
    height: min(38vh, 360px);
    animation: tutorialFloatLeftMirror 3.1s ease-in-out infinite;
}

.tutorial-actor.hidden {
    display: none;
}

.tutorial-dialog-panel {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(920px, calc(100vw - 28px));
    min-height: 170px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    background: rgba(10, 16, 25, 0.88);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    padding: 14px 18px 34px;
}

.tutorial-speaker {
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    color: #9fd6ff;
    margin-bottom: 8px;
}

.tutorial-message {
    font-size: 1.06rem;
    line-height: 1.75;
    color: #f2f6ff;
    white-space: pre-wrap;
}

.tutorial-key-resource {
    color: #f6e8a5;
    font-weight: 700;
}

.tutorial-key-hp {
    color: #ff8f8f;
    font-weight: 700;
}

.tutorial-key-mana {
    color: #86b8ff;
    font-weight: 700;
}

.tutorial-key-action {
    color: #8ef6ca;
    font-weight: 700;
}

.tutorial-key-stat {
    color: #e2b3ff;
    font-weight: 700;
}

.tutorial-key-ap {
    color: #ff7b7b;
    font-weight: 700;
}

.tutorial-key-mp {
    color: #7ed8ff;
    font-weight: 700;
}

.tutorial-key-fp {
    color: #89f08d;
    font-weight: 700;
}

.tutorial-choices {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.tutorial-choice-btn {
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.08);
    color: #f4f8ff;
    border-radius: 9px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.92rem;
}

.tutorial-choice-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.tutorial-lang-select {
    height: 34px;
    min-width: 160px;
    border-radius: 8px;
    border: 1px solid rgba(226, 196, 122, 0.4);
    background: rgba(7, 13, 30, 0.82);
    color: #e7edf8;
    padding: 0 8px;
    font-size: 0.92rem;
    cursor: pointer;
}

.tutorial-hint {
    position: absolute;
    left: 16px;
    bottom: 10px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.56);
}

.tutorial-battle-focus {
    z-index: 8;
    box-shadow: 0 0 0 2px rgba(255, 247, 166, 0.95), 0 0 18px rgba(255, 224, 132, 0.62) !important;
    animation: tutorialFocusPulse 1s ease-in-out infinite;
}

.tutorial-battle-focus:not(.option-gear-btn):not(.resource-item) {
    position: relative;
}

.resource-panel .resource-item.tutorial-battle-focus,
.discard-panel .resource-item.tutorial-battle-focus {
    position: absolute;
}

#hand.tutorial-hand-lift {
    transform: translateY(-16px);
    transition: transform 0.24s ease;
}

.tutorial-battle-dim .game-container::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    pointer-events: none;
    z-index: 1200;
}

.hand-card.tutorial-card-spotlight {
    position: relative;
    z-index: 1210;
    transform: translateY(-20px) scale(1.05);
    transition: transform 0.2s ease;
}

.tutorial-part-focus {
    z-index: 1212;
    box-shadow: 0 0 0 2px rgba(255, 248, 176, 0.98), 0 0 20px rgba(255, 224, 132, 0.78) !important;
    border-radius: 8px;
    animation: tutorialFocusPulse 1s ease-in-out infinite;
}

.tutorial-card-preview {
    position: fixed !important;
    left: 50vw !important;
    top: 44vh !important;
    z-index: 2305 !important;
    transform: translate(-50%, -50%) scale(1.08) !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.tutorial-card-preview .tutorial-part-focus.card-cost,
.tutorial-card-preview .tutorial-part-focus.card-bp-icon,
.tutorial-card-preview .tutorial-part-focus.card-image-lv,
.tutorial-card-preview .tutorial-part-focus.card-image-tag,
.tutorial-card-preview .tutorial-part-focus.card-image-race,
.tutorial-card-preview .tutorial-part-focus.card-effect-panel,
.tutorial-card-preview .tutorial-part-focus.card-stats,
.tutorial-card-preview .tutorial-part-focus.card-name {
    border-radius: 10px;
}

.tutorial-card-preview .tutorial-part-focus.card-attr-orbs,
.tutorial-card-preview .tutorial-part-focus.card-attr-orb,
.tutorial-card-preview .tutorial-part-focus.stat-ap,
.tutorial-card-preview .tutorial-part-focus.stat-mp,
.tutorial-card-preview .tutorial-part-focus.stat-fp {
    border-radius: 999px;
}

@keyframes tutorialFocusPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 247, 166, 0.95), 0 0 14px rgba(255, 224, 132, 0.52); }
    50% { box-shadow: 0 0 0 2px rgba(255, 247, 166, 0.98), 0 0 24px rgba(255, 224, 132, 0.82); }
}

@keyframes tutorialFloatLeft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes tutorialFloatRight {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes tutorialFloatLeftMirror {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50% { transform: scaleX(-1) translateY(-12px); }
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 16000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #000;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: opacity 1800ms ease, visibility 0s linear 1800ms;
}

.app-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loading-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 268px;
    padding: 18px 24px;
    border-radius: 16px;
    background: rgba(7, 12, 24, 0.42);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.app-loading-orbs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
}

.app-loading-orb {
    width: 32px;
    height: 32px;
    object-fit: contain;
    animation: appLoadingOrbWave 880ms ease-in-out infinite;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.38));
}

.app-loading-orb:nth-child(2) { animation-delay: 80ms; }
.app-loading-orb:nth-child(3) { animation-delay: 160ms; }
.app-loading-orb:nth-child(4) { animation-delay: 240ms; }
.app-loading-orb:nth-child(5) { animation-delay: 320ms; }
.app-loading-orb:nth-child(6) { animation-delay: 400ms; }
.app-loading-orb:nth-child(7) { animation-delay: 480ms; }

.app-loading-text {
    color: #f4e3ad;
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

@keyframes appLoadingOrbWave {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-7px);
        opacity: 1;
    }
}

.records-modal .records-history-deck-grid {
    grid-template-columns: repeat(auto-fill, 180px) !important;
    gap: 14px !important;
}

.records-modal .records-history-deck-slot {
    width: 180px !important;
    height: 263px !important;
    overflow: visible !important;
}

.records-modal .records-history-card-preview.card {
    width: 236px !important;
    height: 344px !important;
    min-width: 236px !important;
    max-width: 236px !important;
    min-height: 344px !important;
    max-height: 344px !important;
    border-radius: 14px !important;
}

.records-modal .records-history-deck-slot > .records-history-card-preview.card {
    transform: scale(0.76) !important;
    transform-origin: top center !important;
}

.records-modal .records-history-leader-card-slot > .records-history-card-preview.card {
    transform: scale(0.92) !important;
    transform-origin: top center !important;
}

.records-modal .records-history-card-preview .card-cost {
    top: 4px !important;
    left: 7px !important;
}

.records-modal .records-history-card-preview .card-name {
    top: 6.5px !important;
    left: 57.2px !important;
    right: 60px !important;
    font-size: 1.22rem !important;
}

.records-modal .records-history-card-preview .card-bp-icon {
    top: 7px !important;
    right: 8px !important;
    width: 36px !important;
    height: 36px !important;
}

.records-modal .records-history-card-preview .card-bp-letter {
    font-size: 14px !important;
}

.records-modal .records-history-card-preview .card-image {
    top: 48px !important;
    left: 9px !important;
    right: 9px !important;
    height: 186px !important;
}

.records-modal .records-history-card-preview .card-image-lv {
    top: 45px !important;
    left: 20px !important;
}

.records-modal .records-history-card-preview .card-image-tag {
    top: 212px !important;
    left: 16px !important;
}

.records-modal .records-history-card-preview .card-image-race {
    top: 212px !important;
    right: 16px !important;
}

.records-modal .records-history-card-preview .card-attr-orbs {
    top: 48px !important;
    right: 20px !important;
    gap: 4px !important;
    max-width: 64px !important;
}

.records-modal .records-history-card-preview .card-attr-orb {
    width: 18px !important;
    height: 18px !important;
}

.records-modal .records-history-card-preview .card-item-badges {
    top: 66px !important;
    left: 20px !important;
    gap: 4px !important;
}

.records-modal .records-history-card-preview .card-item-badge {
    width: 34px !important;
    height: 34px !important;
}

.records-modal .records-history-card-preview .card-effect-panel {
    top: 233px !important;
    left: 15px !important;
    right: 15px !important;
    height: 58px !important;
    padding: 8px !important;
}

.records-modal .records-history-card-preview .card-effect-line {
    font-size: 0.88rem !important;
}

.records-modal .records-history-card-preview .card-stats {
    left: 14px !important;
    right: 14px !important;
    bottom: 5px !important;
    gap: 6px !important;
}

.records-modal .records-history-card-preview .card-stats span {
    font-size: 1.34rem !important;
    padding: 7px 0 6px !important;
}


.eula-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.eula-modal.hidden {
    display: none;
}
.eula-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 20, 0.78);
}
.eula-modal-panel {
    position: relative;
    width: min(90vw, 680px);
    max-height: 80vh;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.36);
    background: rgba(8, 14, 35, 0.97);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.7);
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.eula-modal-title {
    font-family: 'Cinzel', serif;
    color: #e4c772;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: 8px;
    flex-shrink: 0;
}
.eula-modal-body {
    flex: 1;
    overflow-y: auto;
    color: #d8d4cc;
    font-size: clamp(0.82rem, 0.9vw, 1rem);
    line-height: 1.75;
    white-space: pre-wrap;
    padding-right: 6px;
}
.eula-modal-body::-webkit-scrollbar {
    width: 8px;
}
.eula-modal-body::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
}
.eula-modal-body::-webkit-scrollbar-thumb {
    background: rgba(212,175,55,0.4);
    border-radius: 4px;
}

.library-card-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.library-card-zoom-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
}
.library-card-zoom-panel {
    position: relative;
    z-index: 1;
    pointer-events: none;
    /* Reserve visual space for the scaled card (236 * 1.6 = 377, 344 * 1.6 = 550) */
    width: 377px;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.library-card-zoom-card {
    pointer-events: none;
    transform: scale(1.6) !important;
    transform-origin: center center !important;
    cursor: default;
}
/* Drift Memory mode */
.drift-memory-screen {
    position: fixed;
    inset: 0;
    overflow: hidden;
    color: #f4e2bd;
    background: #080b0d;
    font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
    z-index: 20;
    --drift-font-scale: 1.25;
    --drift-ui-frame: url("drift_memory/ui/parts/ui_frame.png");
    --drift-ui-frame-square: url("drift_memory/ui/parts/ui_frame_square.png");
    --drift-ui-frame-header: url("drift_memory/ui/parts/ui_frame_header_wide.png");
    --drift-ui-frame-log: url("drift_memory/ui/parts/ui_frame_log.png");
    --drift-ui-frame-panel-left: url("drift_memory/ui/parts/ui_frame_panel_left.png");
    --drift-ui-frame-panel-right: url("drift_memory/ui/parts/ui_frame_panel_right.png");
    --drift-ui-frame-box: url("drift_memory/ui/parts/ui_frame_box.png");
    --drift-ui-frame-facility: url("drift_memory/ui/parts/ui_frame_facility.png");
    --drift-gauge-frame: url("drift_memory/ui/parts/gauge_frame.png");
    --drift-gauge-fill-red: url("drift_memory/ui/parts/gauge_fill_red.png");
    --drift-gauge-fill-blue: url("drift_memory/ui/parts/gauge_fill_blue.png");
    --drift-gauge-fill-green: url("drift_memory/ui/parts/gauge_fill_green.png");
    --drift-button-normal: url("drift_memory/ui/parts/button_normal.png");
    --drift-button-hover: url("drift_memory/ui/parts/button_hover.png");
    --drift-button-normal-long: url("drift_memory/ui/parts/button_normal_long.png");
    --drift-button-hover-long: url("drift_memory/ui/parts/button_hover_long.png");
    --drift-banner-skill: url("drift_memory/ui/parts/ui_banner_skill.png");
    --drift-banner-companions: url("drift_memory/ui/parts/ui_banner_companions.png");
    --drift-banner-deck: url("drift_memory/ui/parts/ui_banner_deck.png");
    --drift-banner-institution: url("drift_memory/ui/parts/ui_banner_Institution.png");
    --drift-banner-counterattack: url("drift_memory/ui/parts/ui_banner_CounterAttack.png");
    --drift-banner-hero-lvup: url("drift_memory/ui/parts/hero_lvup_banner.png");
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
}

.drift-memory-screen.drift-memory-text-normal,
.drift-memory-screen.drift-memory-text-large,
.drift-memory-screen.drift-memory-text-xlarge { --drift-font-scale: 1.25; }

.drift-memory-backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 10, 13, 0.08), rgba(7, 10, 13, 0.54)),
        var(--drift-memory-bg, url("drift_memory/facilities/market_day.png")) center / cover no-repeat;
    filter: none;
    transform: none;
}

.drift-memory-screen.drift-memory-time-night .drift-memory-backdrop {
    filter: none;
}

.drift-memory-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(242, 168, 70, 0.08), transparent 34%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.5)),
        radial-gradient(circle, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

.drift-memory-shell {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-rows: 82px 1fr;
    gap: 18px;
    padding: 12px;
    box-sizing: border-box;
}

.drift-memory-header,
.drift-memory-panel,
.drift-memory-facility,
.drift-memory-modal-panel {
    position: relative;
    border: 1px solid rgba(193, 143, 76, 0.62);
    background: linear-gradient(180deg, rgba(10, 15, 19, 0.84), rgba(7, 10, 13, 0.82));
    box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.1), 0 16px 34px rgba(0, 0, 0, 0.36);
}

.drift-memory-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px;
    align-items: stretch;
    gap: 8px;
    padding: 6px 8px;
    overflow: hidden;
    border: 1px solid rgba(193, 143, 76, 0.44);
    background:
        linear-gradient(180deg, rgba(7, 12, 17, 0.74), rgba(3, 7, 11, 0.7)),
        radial-gradient(circle at 50% 0%, rgba(241, 202, 132, 0.08), transparent 58%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 228, 160, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.34);
}

.drift-memory-title-block {
    display: none;
}

.drift-memory-title {
    font-size: calc(26px * var(--drift-font-scale));
    font-weight: 800;
    letter-spacing: 0;
    color: #f1ca84;
}

.drift-memory-subtitle {
    display: none;
}

.drift-memory-top-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.drift-memory-top-stats div {
    position: relative;
    min-width: 0;
    min-height: 52px;
    padding: 7px 8px 6px 56px;
    border: 1px solid rgba(193, 143, 76, 0.5);
    background:
        linear-gradient(180deg, rgba(9, 15, 21, 0.78), rgba(4, 8, 12, 0.76));
    box-shadow:
        inset 0 0 0 1px rgba(255, 228, 160, 0.06),
        inset 0 -10px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.drift-memory-top-stats div::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 5px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241, 202, 132, 0.42), transparent);
    pointer-events: none;
}

.drift-memory-top-stats img {
    position: absolute;
    left: 13px;
    top: 50%;
    width: 28px;
    height: 28px;
    object-fit: contain;
    transform: translateY(-50%);
}

.drift-memory-top-stats span,
.drift-memory-profile-meta span,
.drift-memory-village-row span {
    display: block;
    font-size: clamp(9px, 0.72vw, calc(12px * var(--drift-font-scale)));
    color: #e7d5ac;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drift-memory-top-stats strong {
    display: block;
    margin-top: 2px;
    font-size: clamp(12px, 0.92vw, calc(17px * var(--drift-font-scale)));
    color: #fff3d3;
    text-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drift-memory-defense-complete-btn {
    padding: 6px 14px;
    border: 1px solid rgba(193, 143, 76, 0.8);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(40, 30, 10, 0.95), rgba(20, 14, 4, 0.95));
    color: #f1ca84;
    font-family: 'Shippori Mincho', serif;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 12px rgba(255, 200, 80, 0.4), inset 0 0 8px rgba(0,0,0,0.5);
    animation: defense-btn-pulse 2s ease-in-out infinite;
    transition: filter 0.15s;
}

.drift-memory-defense-complete-btn:hover {
    filter: brightness(1.2);
}

.drift-memory-profile-defense-complete-btn {
    width: 100%;
    min-height: 42px;
    margin-bottom: 2px;
    font-size: calc(15px * var(--drift-font-scale));
}

#driftMemoryProfileDefenseCompleteBtn {
    --drift-button-image: var(--drift-banner-counterattack);
}

@keyframes defense-btn-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 200, 80, 0.4), inset 0 0 8px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 22px rgba(255, 220, 100, 0.8), inset 0 0 8px rgba(0,0,0,0.5); }
}

.drift-memory-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.drift-memory-text-size-control {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(193, 143, 76, 0.38);
    background: rgba(8, 10, 12, 0.72);
    color: #e7d5ac;
    font-size: calc(12px * var(--drift-font-scale));
}

.drift-memory-text-size-control select {
    min-height: 26px;
    border: 1px solid rgba(193, 143, 76, 0.42);
    background: rgba(0, 0, 0, 0.52);
    color: #fff3d3;
    font: inherit;
}

.drift-memory-icon-btn,
.drift-memory-modal-secondary {
    min-height: 34px;
    padding: 0 14px;
    border: none;
    color: #ead2a0;
    background: transparent var(--drift-button-normal) center / 100% 100% no-repeat;
    cursor: pointer;
    font-size: calc(14px * var(--drift-font-scale));
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

.drift-memory-header .drift-memory-icon-btn {
    width: 74px;
    min-height: 52px;
    padding: 0 8px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background: linear-gradient(180deg, rgba(12, 19, 27, 0.88), rgba(5, 9, 14, 0.86));
    box-shadow:
        inset 0 0 0 1px rgba(255, 228, 160, 0.08),
        inset 0 -10px 20px rgba(0, 0, 0, 0.26);
    font-size: calc(13px * var(--drift-font-scale));
}

.drift-memory-header .drift-memory-icon-btn:hover {
    background: linear-gradient(180deg, rgba(35, 49, 65, 0.94), rgba(12, 18, 28, 0.92));
}

#driftMemorySettingsBtn {
    background: transparent url("drift_memory/ui/parts/icon_settings.png") center / 62% auto no-repeat;
    border: none;
    box-shadow: none;
}

#driftMemorySettingsBtn:hover {
    background-image: url("drift_memory/ui/parts/icon_settings.png");
    border: none;
    box-shadow: none;
    filter: brightness(1.2);
}

.drift-memory-icon-btn:hover,
.drift-memory-modal-secondary:hover {
    background-image: var(--drift-button-hover);
    filter: brightness(1.1);
}

.drift-memory-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: 310px minmax(560px, 1fr) 340px;
    gap: 16px;
    align-items: stretch;
    padding-top: 8px;
    overflow: hidden;
}

.drift-memory-panel {
    min-height: 0;
    padding: 12px;
    box-sizing: border-box;
}

#driftMemoryScreen .drift-memory-panel:not(.drift-memory-side-panel),
#driftMemoryScreen .drift-memory-side-box {
    border: 1px solid rgba(193, 143, 76, 0.72);
    background: linear-gradient(180deg, rgba(6, 10, 13, 0.86), rgba(3, 6, 9, 0.84));
    box-shadow:
        inset 0 0 0 1px rgba(255, 228, 160, 0.08),
        inset 0 0 28px rgba(0, 0, 0, 0.45),
        0 16px 32px rgba(0, 0, 0, 0.38);
}

#driftMemoryScreen .drift-memory-panel:not(.drift-memory-side-panel)::before,
#driftMemoryScreen .drift-memory-side-box::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 0;
    border: 1px solid rgba(193, 143, 76, 0.28);
    background: transparent;
    pointer-events: none;
    opacity: 1;
}

#driftMemoryScreen .drift-memory-log-panel::before {
    inset: 0;
    border: none;
    background: var(--drift-ui-frame-log) center / 100% 100% no-repeat;
    opacity: 0.86;
}

#driftMemoryScreen .drift-memory-next-power-panel::before {
    inset: 0;
    border: none;
    background: var(--drift-ui-frame-log) center / 100% 100% no-repeat;
    opacity: 0.82;
}

#driftMemoryScreen .drift-memory-panel:not(.drift-memory-side-panel) > *,
#driftMemoryScreen .drift-memory-side-box > * {
    position: relative;
    z-index: 1;
}

.drift-memory-panel-title {
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
    padding: 0 0 7px 0;
    border-bottom: 1px solid rgba(193, 143, 76, 0.32);
    color: #f1ca84;
    font-size: calc(17px * var(--drift-font-scale));
    font-weight: 700;
    text-shadow: none;
}

.drift-memory-profile-panel,
.drift-memory-side-panel,
.drift-memory-center {
    min-height: 0;
}

.drift-memory-profile-panel {
    align-self: start;
    min-height: min(78vh, 790px);
    max-height: calc(100vh - 154px);
    overflow: hidden;
    padding: 12px 16px 12px;
}

@keyframes titleControllerVeil {
    0%,
    100% {
        opacity: 0.55;
        transform: translateX(-4px) scaleX(0.96);
    }
    50% {
        opacity: 0.92;
        transform: translateX(4px) scaleX(1.04);
    }
}

@keyframes titleControllerSocialVeil {
    0%,
    100% {
        opacity: 0.52;
    }
    50% {
        opacity: 0.88;
    }
}

.drift-memory-facility-preview-dock {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    width: 310px;
    min-height: 76px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 12px;
    box-sizing: border-box;
    pointer-events: auto;
}

.drift-memory-facility-preview-dock.hidden {
    display: none;
}

.drift-memory-facility-preview-btn {
    width: 64px;
    height: 64px;
    padding: 7px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background:
        linear-gradient(180deg, rgba(12, 19, 27, 0.82), rgba(5, 9, 14, 0.84));
    cursor: pointer;
    box-shadow:
        inset 0 0 0 1px rgba(255, 228, 160, 0.08),
        inset 0 -10px 20px rgba(0, 0, 0, 0.26),
        0 8px 18px rgba(0, 0, 0, 0.42);
}

.drift-memory-facility-preview-btn:hover {
    border-color: rgba(241, 202, 132, 0.86);
    filter: brightness(1.16);
}

.drift-memory-facility-preview-btn span {
    display: block;
    width: 100%;
    height: 100%;
    background: center / contain no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.72));
}

.drift-memory-profile-panel > .drift-memory-panel-title {
    display: none;
}

.drift-memory-side-box > .drift-memory-panel-title {
    text-align: center;
    padding-right: 0;
}

.drift-memory-side-panel {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 10px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding-top: 8px;
    max-height: calc(100vh - 116px);
    overflow: hidden;
}

.drift-memory-side-box {
    position: relative;
    min-height: 0;
    padding: 12px 14px;
}

.drift-memory-sub-action-btn {
    --drift-button-image: var(--drift-button-normal);
    margin-top: 2px;
    min-height: 44px;
    padding: 5px 18px 7px 58px;
    border: none;
    color: #ffe5a8;
    background: transparent var(--drift-button-image) center / 100% 100% no-repeat;
    font-size: calc(14px * var(--drift-font-scale));
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.86);
    cursor: pointer;
    width: 100%;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42));
}
.drift-memory-sub-action-btn:hover {
    filter: brightness(1.14) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.48));
}

#driftMemoryHeroLvupBtn {
    --drift-button-image: var(--drift-banner-hero-lvup);
}

#driftMemoryHeroLvupBtn.has-lvup,
#driftMemorySubLeaderBtn.has-lvup {
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 210, 80, 0.7));
    animation: drift-lvup-pulse 1.6s ease-in-out infinite;
}

@keyframes drift-lvup-pulse {
    0%, 100% { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255, 210, 80, 0.7)); }
    50% { filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 220, 100, 1)); }
}

#driftMemoryInstitutionInfoBtn {
    --drift-button-image: var(--drift-banner-institution);
}

.drift-memory-companion-growth-panel {
    width: min(380px, 92vw);
    text-align: center;
}

.drift-memory-companion-growth-portrait {
    width: 120px;
    height: 120px;
    margin: 12px auto 8px;
    border-radius: 8px;
    background-size: cover;
    background-position: center top;
    border: 1px solid rgba(193, 143, 76, 0.5);
    box-shadow: 0 3px 12px rgba(0,0,0,0.7);
}

.drift-memory-companion-growth-name {
    font-size: 20px;
    font-weight: 800;
    color: #f1ca84;
    margin-bottom: 10px;
}

.drift-memory-companion-growth-gains {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 8px 0;
}

.drift-memory-companion-growth-stat {
    font-size: 16px;
    font-weight: 700;
    color: #e8dcc8;
}

.drift-memory-companion-growth-stat span {
    color: #7ddc8a;
    font-size: 18px;
    font-weight: 900;
}

#driftMemorySkillMenuBtn {
    --drift-button-image: var(--drift-banner-skill);
}

#driftMemorySubLeaderBtn {
    --drift-button-image: var(--drift-banner-companions);
}

#driftMemoryDeckCustomizeBtn {
    --drift-button-image: var(--drift-banner-deck);
}

.drift-memory-deck-title-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}

.drift-memory-subleader-title-btn {
    color: #ffe5a8 !important;
}

.drift-memory-inheritance-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    height: 100%;
    font-family: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

.drift-memory-inheritance-panel * {
    font-family: inherit;
}

.drift-memory-inheritance-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drift-memory-inheritance-field label,
.drift-memory-inheritance-status,
.drift-memory-inheritance-foot,
.drift-memory-inheritance-note {
    color: #cdbb93;
    font-size: 12px;
}

.drift-memory-inheritance-field select {
    width: 100%;
    min-width: 0;
    padding: 6px 7px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    border-radius: 3px;
    background: rgba(5, 11, 18, 0.92);
    color: #f7e7bf;
    font-size: 12px;
}

.drift-memory-inheritance-primary,
.drift-memory-inheritance-secondary {
    width: 100%;
    min-height: 56px;
    padding: 7px 10px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: calc(14px * var(--drift-font-scale));
    font-family: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-weight: 700;
    background: transparent var(--drift-button-normal) center / 100% 100% no-repeat;
    color: #f1ca84;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.drift-memory-inheritance-actions {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 8px;
    flex-shrink: 0;
}

#driftMemoryInheritanceHelpBtn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent url("drift_memory/ui/parts/icon_memory.png") center / contain no-repeat;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s, filter 0.15s;
}

#driftMemoryInheritanceHelpBtn:hover {
    opacity: 1;
    filter: brightness(1.3);
}

.drift-memory-shop-help-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent url("drift_memory/ui/parts/icon_memory.png") center / contain no-repeat;
    cursor: pointer;
    opacity: 0.82;
    transition: opacity 0.15s, filter 0.15s;
}

.drift-memory-shop-help-btn:hover {
    opacity: 1;
    filter: brightness(1.3);
}

#driftMemoryCompanionHelpBtn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent url("drift_memory/ui/parts/icon_memory.png") center / contain no-repeat;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s, filter 0.15s;
}

#driftMemoryCompanionHelpBtn:hover {
    opacity: 1;
    filter: brightness(1.3);
}

.drift-memory-hero-training-command {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    color: #f1ca84;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.drift-memory-hero-training-command select {
    min-width: 126px;
    height: 36px;
    padding: 3px 32px 3px 12px;
    border: 1px solid rgba(211, 170, 76, 0.78);
    border-radius: 4px;
    background: rgba(5, 10, 18, 0.92);
    color: #f9e7b6;
    font: inherit;
    cursor: pointer;
}

.character-original-delete-actions button.character-delete-controller-selected {
    border-color: rgba(126, 255, 156, 0.74);
    color: #ecffe7;
    background:
        linear-gradient(180deg, rgba(18, 58, 28, 0.96), rgba(7, 24, 13, 0.96)),
        rgba(8, 14, 24, 0.9);
    box-shadow:
        0 0 0 1px rgba(126, 255, 156, 0.22),
        0 0 18px rgba(82, 221, 100, 0.26),
        inset 0 1px 0 rgba(224, 255, 210, 0.12);
}

.drift-memory-modal-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.65);
}

.drift-memory-modal-overlay.hidden {
    display: none;
}

.drift-memory-inheritance-primary {
    background-image: var(--drift-button-normal);
    color: #fff0c8;
}

.drift-memory-inheritance-secondary {
    color: #f1ca84;
}

.drift-memory-inheritance-primary:hover,
.drift-memory-inheritance-secondary:hover {
    background-image: var(--drift-button-hover);
    filter: brightness(1.08);
}

.drift-memory-inheritance-primary:disabled {
    opacity: 0.5;
    cursor: default;
}

.drift-memory-inheritance-secondary:disabled {
    opacity: 0.5;
    cursor: default;
}

.drift-memory-inheritance-board {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 186px auto auto;
    gap: 12px;
    align-items: start;
    padding: 7px;
    border: 1px solid rgba(193, 143, 76, 0.42);
    background: rgba(3, 7, 12, 0.42);
    flex-shrink: 0;
}

.drift-memory-inheritance-board.is-active {
    border-color: rgba(241, 202, 132, 0.78);
}

.drift-memory-inheritance-matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 2px;
    align-items: center;
    min-height: 186px;
    overflow: hidden;
}

.drift-memory-inheritance-unit {
    min-width: 0;
    display: grid;
    grid-template-rows: 44px 120px 22px;
    justify-items: center;
    align-items: center;
    gap: 2px;
    height: 186px;
}

.drift-memory-inheritance-skill {
    display: grid;
    grid-template-rows: 42px;
    gap: 1px;
    justify-items: center;
    min-width: 0;
    width: 100%;
    height: 44px;
    overflow: hidden;
}

.drift-memory-inheritance-skill span,
.drift-memory-inheritance-gauge-label,
.drift-memory-inheritance-rate-summary,
.drift-memory-inheritance-foot,
.drift-memory-inheritance-note {
    color: #ead8ae;
    font-size: calc(15px * var(--drift-font-scale));
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.86);
}

.drift-memory-inheritance-skill-list {
    color: #fff0c8;
    font-size: calc(14px * var(--drift-font-scale));
    font-weight: 700;
    line-height: 1.16;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    overflow-wrap: anywhere;
    overflow: hidden;
    text-align: center;
}

.drift-memory-inheritance-skill-list div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drift-memory-inheritance-skill-list div:nth-child(n + 3) {
    display: none;
}

.drift-memory-inheritance-name {
    color: #f6e6c1;
    font-size: calc(14px * var(--drift-font-scale));
    font-style: normal;
    font-weight: 600;
    line-height: 1.12;
    min-height: 18px;
    padding-bottom: 2px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.88);
}

.drift-memory-inheritance-portraits {
    display: contents;
}

.drift-memory-inheritance-portrait {
    position: relative;
    width: 118px;
    aspect-ratio: 1 / 1;
    padding: 13px;
    box-sizing: border-box;
    border: none;
    background:
        linear-gradient(180deg, rgba(8, 13, 16, 0.9), rgba(2, 5, 8, 0.92)) center / calc(100% - 26px) calc(100% - 26px) no-repeat,
        url("material/alpha_frame.png") center / 100% 100% no-repeat;
    overflow: visible;
    display: grid;
    place-items: center;
    color: #f1ca84;
    font-weight: 700;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
}

.drift-memory-inheritance-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.drift-memory-inheritance-arrow {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f1ca84;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.86);
    width: 34px;
    min-width: 0;
}

.drift-memory-inheritance-arrow .drift-memory-inheritance-skill-list {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    width: min(312px, calc(100vw - 54px));
    max-width: min(312px, calc(100vw - 54px));
    height: auto;
    overflow: hidden;
    text-align: center;
}

.drift-memory-inheritance-gauge-head,
.drift-memory-inheritance-gauge-row {
    grid-column: 1 / -1;
}

.drift-memory-inheritance-gauge-head {
    display: grid;
    grid-template-columns: minmax(84px, 1fr) minmax(0, 1.3fr) auto;
    align-items: baseline;
    gap: 8px;
}

.drift-memory-inheritance-gauge-label {
    color: #f1ca84;
    font-weight: 700;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(10px, 3.2cqw, calc(15px * var(--drift-font-scale)));
}

.drift-memory-inheritance-meter {
    width: 100%;
    height: 8px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background: rgba(0, 0, 0, 0.48);
    overflow: hidden;
}

.drift-memory-inheritance-gauge-row {
    display: block;
}

.drift-memory-inheritance-foot {
    min-width: 54px;
    text-align: right;
    white-space: nowrap;
}

.drift-memory-top-stats span,
.drift-memory-top-stats strong {
    text-align: center;
}

#driftMemoryCharisma {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 0;
    padding-right: 2px;
    text-align: left;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.drift-memory-top-stats #driftMemoryCharisma .drift-memory-charisma-level-value,
.drift-memory-top-stats #driftMemoryCharisma .drift-memory-charisma-progress-value {
    display: inline-block;
    margin: 0;
    color: inherit;
    font-weight: 900;
    line-height: 1;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.drift-memory-top-stats #driftMemoryCharisma .drift-memory-charisma-level-value {
    font-size: clamp(18px, 1.45vw, calc(25px * var(--drift-font-scale)));
}

.drift-memory-top-stats #driftMemoryCharisma .drift-memory-charisma-progress-value {
    margin-left: auto;
    color: #ffe5a8;
    font-size: clamp(13px, 0.95vw, calc(18px * var(--drift-font-scale)));
    text-align: right;
}

#driftMemoryNextRenewalCost.is-affordable {
    color: #8ef4d0;
    text-shadow: 0 0 8px rgba(82, 224, 194, 0.42), 0 0 14px rgba(65, 154, 255, 0.24);
}

#driftMemoryNextRenewalCost.is-short {
    color: #ff8c82;
    text-shadow: 0 0 8px rgba(255, 48, 48, 0.55), 0 0 16px rgba(255, 48, 48, 0.25);
    animation: driftMemoryRenewalCostShortPulse 1.05s ease-in-out infinite;
}

@keyframes driftMemoryRenewalCostShortPulse {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.62;
        filter: brightness(1.28);
    }
}

.drift-memory-inheritance-rate-summary {
    min-width: 0;
    color: #9bffb0;
    font-size: clamp(8px, 2.7cqw, calc(10px * var(--drift-font-scale)));
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drift-memory-inheritance-meter span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8b1f24, #f1ca84);
}

.drift-memory-inheritance-slot-tabs {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 12px 0 0;
    margin-top: auto;
    flex-shrink: 0;
    transform: translateY(6px);
}

.drift-memory-inheritance-slot-btn {
    position: relative;
    width: 78px;
    height: 78px;
    border: none;
    padding: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
    filter: brightness(0.52) saturate(0.86);
    opacity: 0.88;
    box-shadow: none;
    isolation: isolate;
}

.drift-memory-inheritance-slot-btn::before {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 222, 132, 0.7) 0%, rgba(255, 176, 64, 0.34) 42%, rgba(255, 176, 64, 0) 74%);
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
}

.drift-memory-inheritance-slot-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--slot-icon) center / contain no-repeat;
    pointer-events: none;
}

.drift-memory-inheritance-slot-btn.empty {
    filter: brightness(0.50) saturate(0.82);
    opacity: 0.84;
}

.drift-memory-inheritance-slot-btn.used {
    filter: brightness(1.08) saturate(1.05);
    opacity: 1;
}

.drift-memory-inheritance-slot-btn.active {
    outline: none;
    filter: brightness(1.02) saturate(1.02);
    opacity: 1;
    box-shadow: none;
}

.drift-memory-inheritance-slot-btn.active::before {
    opacity: 1;
}

.drift-memory-inheritance-slot-btn.used.active {
    filter: brightness(1.18) saturate(1.12);
    opacity: 1;
}

.drift-memory-inheritance-picker {
    position: fixed;
    inset: 0;
    z-index: 30000;
    pointer-events: auto;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(20, 35, 60, 0.98), rgba(4, 8, 16, 0.99) 70%),
        #04080e;
    display: flex;
    flex-direction: column;
    padding: 18px;
    overflow: hidden;
    --inheritance-filter-button: url("drift_memory/ui/parts/skill_inheritance/skill_filter_button.png");
    --inheritance-set-button: url("drift_memory/ui/parts/skill_inheritance/skill_inheritance_button.png");
    --inheritance-parameter-panel: url("drift_memory/ui/parts/skill_inheritance/skill_inheritance_parameter.png");
}

.drift-memory-inheritance-picker.hidden {
    display: none;
}

.drift-memory-inheritance-picker-head,
.drift-memory-inheritance-picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-shrink: 0;
}

.drift-memory-inheritance-picker-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    flex: 1 1 0;
    min-height: 0;
    margin-top: 14px;
    overflow: hidden;
}

.drift-memory-inheritance-picker-pane {
    min-height: 0;
    overflow: auto;
    border: 1px solid rgba(193, 143, 76, 0.42);
    background: rgba(3, 7, 12, 0.34);
    padding: 10px;
}

.drift-memory-inheritance-pane-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 38px;
    margin-bottom: 8px;
}

.drift-memory-inheritance-filter-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.drift-memory-inheritance-filter-select,
.drift-memory-inheritance-filter-sort {
    min-width: 128px;
    height: 34px;
    border: none;
    border-radius: 0;
    padding: 0 28px 0 14px;
    background: transparent var(--inheritance-filter-button) center / 100% 100% no-repeat;
    color: #f4d9a0;
    font: 700 12px/1 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
    cursor: pointer;
    outline: none;
}

.drift-memory-inheritance-filter-select {
    appearance: none;
}

.drift-memory-inheritance-filter-select option {
    color: #f4d9a0;
    background: #07101a;
}

.drift-memory-inheritance-filter-sort {
    width: 42px;
    min-width: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 17px;
}

.drift-memory-inheritance-filter-select:hover,
.drift-memory-inheritance-filter-sort:hover {
    filter: brightness(1.14);
}

.drift-memory-inheritance-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 4px 4px 8px 4px;
    justify-items: center;
}

/* 下部：プレビュー（左）＋ タグ・ボタン（右） */
.dp-bottom-section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    flex-shrink: 0;
    margin-top: 10px;
    align-items: start;
}

.dp-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.drift-memory-inheritance-pick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 180px;
    padding: 6px;
    border: 1px solid rgba(193, 143, 76, 0.38);
    background: rgba(7, 12, 18, 0.86);
    color: #f7e7bf;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
}

.drift-memory-inheritance-pick-card.selected {
    border-color: #ff4545;
    box-shadow: 0 0 16px rgba(255, 58, 58, 0.55);
}

.drift-memory-inheritance-pick-card.reserved,
.drift-memory-inheritance-pick-card:disabled {
    opacity: 0.46;
    cursor: default;
    filter: grayscale(0.45);
}

.drift-memory-inheritance-pick-card.reserved small {
    color: #e0a46a;
    font-weight: 700;
}

.drift-memory-inheritance-pick-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid rgba(255, 224, 160, 0.22);
}

.drift-memory-inheritance-pick-card span {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drift-memory-inheritance-pick-card small {
    min-height: 2.8em;
    color: #cdbb93;
    font-size: 11px;
    line-height: 1.35;
}

/* ピッカーカード要素 */
.dp-pick-card-wrap {
    width: 158px;
    height: 232px;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0;
    pointer-events: none;
}

.dp-pick-card-wrap .card {
    transform: scale(0.67);
    transform-origin: top left;
    pointer-events: none;
}

.dp-skill-info {
    font-size: 11px;
    color: #e8d8aa;
    line-height: 1.4;
    white-space: pre-line;
    word-break: break-all;
    text-align: center;
    width: 100%;
}

.dp-skill-info > div,
.drift-memory-inheritance-skill-list > div {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-skill-disabled {
    color: #c09060;
    font-style: italic;
}

.dp-rank-S { color: #ff7777; font-weight: 900; }
.dp-rank-A { color: #ffaa44; font-weight: 800; }
.dp-rank-B { color: #88ddff; font-weight: 700; }
.dp-rank-C { color: #aaddaa; font-weight: 700; }

/* 選択プレビューエリア */
.dp-preview-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid rgba(193, 143, 76, 0.5);
    border-radius: 8px;
    background: rgba(3, 7, 12, 0.55);
    overflow: hidden;
    min-height: 260px;
}

.dp-preview-half {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
}

.dp-preview-half-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(193, 143, 76, 0.7);
    letter-spacing: 0.06em;
}

.dp-preview-divider {
    width: 1px;
    background: rgba(193, 143, 76, 0.25);
    flex-shrink: 0;
}

.dp-preview-card-wrap {
    width: 170px;
    height: 249px;
    overflow: hidden;
    border-radius: 8px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.9));
}

.dp-preview-card-wrap .card {
    transform: scale(0.72);
    transform-origin: top left;
    pointer-events: none;
}

.dp-preview-card-empty {
    width: 170px;
    height: 249px;
    border: 1px dashed rgba(193, 143, 76, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(193, 143, 76, 0.4);
    font-size: 12px;
}

.dp-preview-info {
    width: clamp(430px, 31vw, 520px);
    min-height: 250px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 8px;
    padding: 24px 36px 26px;
    box-sizing: border-box;
    border: none;
    background: transparent var(--inheritance-parameter-panel) center / 100% 100% no-repeat;
    justify-content: flex-start;
}

.dp-info-title {
    min-height: 20px;
    font-size: calc(14px * var(--drift-font-scale));
    line-height: 1.1;
    font-weight: 800;
    color: #f1ca84;
    margin: 0 0 13px;
    padding: 0;
    border-bottom: none;
    text-align: center;
}

.dp-info-placeholder {
    color: rgba(193, 143, 76, 0.4);
    font-size: calc(13px * var(--drift-font-scale));
    line-height: 1.45;
    text-align: center;
    white-space: pre-line;
}

.dp-info-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto minmax(92px, auto);
    align-items: baseline;
    gap: 6px;
    min-height: 24px;
    padding: 0;
    border-bottom: none;
    font-size: calc(11px * var(--drift-font-scale));
    line-height: 1.15;
}

.dp-info-label {
    color: #f1ca84;
    font-weight: 800;
    white-space: nowrap;
}

.dp-info-skill {
    color: #e8d8aa;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.dp-info-rank {
    font-weight: 900;
    font-size: calc(11px * var(--drift-font-scale));
    white-space: nowrap;
}

.dp-info-rate {
    color: #7dff9a;
    font-weight: 900;
    font-size: calc(15px * var(--drift-font-scale));
    min-width: 46px;
    text-align: right;
}

.dp-info-rate-formula {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px;
    min-width: 92px;
    color: #c8f6d1;
    font-size: calc(11px * var(--drift-font-scale));
    white-space: nowrap;
}

.dp-info-rate-formula strong {
    color: #7dff9a;
    font-size: calc(15px * var(--drift-font-scale));
}

.dp-info-rate-muted {
    color: rgba(125, 255, 154, 0.46);
}

.dp-info-row-note {
    grid-template-columns: minmax(0, 1fr);
    color: #cdbb93;
    text-align: center;
}

.dp-info-row-note .dp-info-skill {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.drift-memory-inheritance-picker-actions {
    justify-content: flex-end;
    margin-top: 12px;
}

.drift-memory-inheritance-tag-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(219, 173, 88, 0.45);
    color: #f7e3b2;
    background: rgba(4, 9, 14, 0.72);
    font-weight: 700;
    white-space: nowrap;
}

.drift-memory-inheritance-tag-option input {
    appearance: none;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid rgba(241, 202, 132, 0.78);
    background: linear-gradient(180deg, rgba(5, 12, 20, 0.96), rgba(2, 5, 10, 0.96));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 8px rgba(193, 143, 76, 0.18);
    cursor: pointer;
    position: relative;
}

.drift-memory-inheritance-tag-option input:checked {
    background: linear-gradient(180deg, rgba(155, 42, 34, 0.96), rgba(78, 19, 17, 0.98));
    border-color: #ffd37a;
}

.drift-memory-inheritance-tag-option input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #ffe7ad;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.drift-memory-inheritance-tag-option input:disabled {
    opacity: 0.55;
    cursor: default;
}

.drift-memory-inheritance-set-btn {
    width: 280px;
    min-height: 82px;
    border: none;
    padding: 14px 34px;
    background: transparent var(--inheritance-set-button) center / 100% 100% no-repeat !important;
    color: #ffe7ad;
    font-size: calc(19px * var(--drift-font-scale));
    letter-spacing: 0;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.94);
    box-shadow: none;
}

.drift-memory-inheritance-set-btn:hover {
    filter: brightness(1.12);
}

.drift-memory-inheritance-set-btn:disabled {
    opacity: 0.46;
    filter: grayscale(0.35) brightness(0.72);
    cursor: default;
}

.drift-memory-partner-skill-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.drift-memory-modal-panel.drift-memory-partner-skill-panel {
    width: min(1080px, calc(100vw - 72px));
    max-width: none;
    aspect-ratio: 1416 / 876;
    box-sizing: border-box;
    padding: 72px 86px 66px;
    border: none;
    background: transparent url("drift_memory/ui/parts/shop_window.png") center / 100% 100% no-repeat;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.drift-memory-partner-skill-panel .drift-memory-modal-title {
    margin: 0;
    text-align: center;
    font-size: calc(32px * var(--drift-font-scale));
    color: #ffe6a6;
}

.drift-memory-partner-skill-panel .drift-memory-modal-body {
    margin: 0;
    text-align: center;
    font-size: calc(17px * var(--drift-font-scale));
    line-height: 1.45;
    color: #f0dfbd;
}

.drift-memory-partner-skill-wide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    margin: 4px 0 8px;
    min-height: 304px;
}

.drift-memory-partner-skill-unit {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(219, 173, 88, 0.42);
    background: rgba(4, 9, 14, 0.58);
}

.drift-memory-partner-skill-card-host {
    display: grid;
    place-items: start;
    width: 162px;
    height: 236px;
    overflow: hidden;
    justify-self: center;
    filter: drop-shadow(0 0 14px rgba(135, 231, 206, 0.18));
    pointer-events: none;
}

.drift-memory-partner-skill-card-host .card {
    width: 236px !important;
    height: 344px !important;
    transform: scale(0.686) !important;
    transform-origin: top left !important;
    margin: 0 !important;
    pointer-events: none;
}

.drift-memory-partner-skill-section {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 0;
}

.drift-memory-partner-skill-section .drift-memory-panel-title {
    margin: 0 0 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(219, 173, 88, 0.42);
    font-size: calc(22px * var(--drift-font-scale));
    line-height: 1.15;
    color: #ffe1a0;
}

.drift-memory-partner-skill-section .drift-memory-modal-note {
    margin: 0;
    font-size: calc(14px * var(--drift-font-scale));
    line-height: 1.42;
    color: #f3dfb6;
    overflow-wrap: normal;
    word-break: keep-all;
}

.drift-memory-partner-skill-section select {
    width: 100%;
    min-height: 42px;
    margin-top: auto;
    padding: 0 10px;
    color: #f7e3b2;
    background: rgba(2, 5, 9, 0.95);
    border: 1px solid rgba(219, 173, 88, 0.7);
    font: inherit;
    font-size: calc(14px * var(--drift-font-scale));
}

.drift-memory-partner-skill-panel .drift-memory-modal-actions {
    justify-content: center;
    margin: 0;
}

.drift-memory-partner-skill-panel #driftMemoryPartnerSkillApplyBtn {
    min-width: 280px;
    margin: 0 auto;
}

@media (max-width: 980px) {
    .drift-memory-partner-skill-wide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-height: 232px;
    }

    .drift-memory-modal-panel.drift-memory-partner-skill-panel {
        width: min(760px, calc(100vw - 32px));
        aspect-ratio: 1416 / 876;
        padding: 58px 54px 52px;
    }

    .drift-memory-partner-skill-unit {
        grid-template-columns: 126px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .drift-memory-partner-skill-card-host {
        width: 116px;
        height: 169px;
    }

    .drift-memory-partner-skill-card-host .card {
        transform: scale(0.492) !important;
    }
}

/* ===== サブリーダー設定 フルスクリーン ===== */
.drift-memory-sl-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(20, 35, 60, 0.98), rgba(4, 8, 16, 0.99) 70%),
        #04080e;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.drift-memory-companion-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 12px 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.drift-memory-companion-cell {
    display: flex;
    flex-direction: column;
    background: rgba(8, 14, 22, 0.78);
    border: 1px solid rgba(193, 143, 76, 0.22);
    overflow: hidden;
}

.drift-memory-companion-cell-card {
    display: flex;
    justify-content: center;
    padding: 6px 6px 0;
}

.drift-memory-companion-cell-footer {
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.drift-memory-companion-cell-name {
    font-size: calc(13px * var(--drift-font-scale));
    font-weight: 700;
    color: #f1ca84;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drift-memory-companion-cell-stats {
    font-size: calc(11px * var(--drift-font-scale));
    color: #a89060;
}

.drift-memory-companion-cell-loc {
    font-size: calc(11px * var(--drift-font-scale));
    color: #a0b8d0;
}

.drift-memory-companion-cell-training {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.drift-memory-companion-cell-training-label {
    font-size: calc(10px * var(--drift-font-scale));
    color: #c8b080;
    white-space: nowrap;
    flex-shrink: 0;
}

.drift-memory-companion-focus-select {
    flex: 1;
    min-width: 0;
    padding: 2px 4px;
    background: rgba(8, 14, 22, 0.88);
    border: 1px solid rgba(193, 143, 76, 0.42);
    color: #d0b878;
    font-size: calc(10px * var(--drift-font-scale));
    cursor: pointer;
}

.drift-memory-companion-cell-training-pending {
    font-size: calc(9px * var(--drift-font-scale));
    color: #8fd0ff;
    line-height: 1.2;
}

/* 仲間バー スライドショー */
.drift-memory-companion-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: 100%;
    overflow: hidden;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.drift-memory-companion-slide-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.drift-memory-companion-slide-card {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.drift-memory-companion-slide-info {
    text-align: center;
    line-height: 1.3;
}

.drift-memory-companion-slide-info span {
    display: block;
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 700;
    color: #f1ca84;
}

.drift-memory-companion-slide-info small {
    font-size: calc(10px * var(--drift-font-scale));
    color: #a0b0c8;
}

.drift-memory-companion-slide-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
    padding: 0 4px;
    font-size: calc(11px * var(--drift-font-scale));
    color: #a89060;
}

.drift-memory-companion-slide-nav span {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.drift-memory-companion-nav-btn {
    padding: 2px 6px;
    background: rgba(8, 14, 22, 0.72);
    border: 1px solid rgba(193, 143, 76, 0.38);
    color: #c8b080;
    cursor: pointer;
    font-size: calc(11px * var(--drift-font-scale));
    transition: background 0.12s ease;
}

.drift-memory-companion-nav-btn:hover {
    background: rgba(180, 120, 40, 0.28);
}

/* リボルバー回転アニメーション */
.companion-slide-from-left {
    animation: companionRevolvFromLeft 0.38s cubic-bezier(0.22, 0.8, 0.44, 1) both;
}

.companion-slide-from-right {
    animation: companionRevolvFromRight 0.38s cubic-bezier(0.22, 0.8, 0.44, 1) both;
}

@keyframes companionRevolvFromLeft {
    from { opacity: 0; transform: translateX(-80%) rotate(-20deg) scale(0.75); }
    to   { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

@keyframes companionRevolvFromRight {
    from { opacity: 0; transform: translateX(80%) rotate(20deg) scale(0.75); }
    to   { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

/* 仲間モーダル フッター */
.drift-memory-companion-cell-footer {
    padding: 4px 6px 6px;
}

.drift-memory-companion-cell-training-row {
    display: grid;
    grid-template-columns: minmax(96px, 1fr) 120px minmax(112px, 126px);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 4px;
    width: 100%;
    overflow: visible;
}

.drift-memory-companion-cell-training-left {
    flex: 1;
    min-width: 0;
}

.drift-memory-companion-cell-training-cmd {
    font-size: calc(11px * var(--drift-font-scale));
    font-weight: 700;
    color: #f1ca84;
    margin-bottom: 2px;
}

.drift-memory-companion-cell-xp {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.drift-memory-companion-cell-xp span {
    font-size: calc(8.5px * var(--drift-font-scale));
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 2px;
    line-height: 1.08;
}

.xp-ap { background: rgba(180, 40, 40, 0.38); color: #f08080; }
.xp-mp { background: rgba(40, 80, 180, 0.38); color: #80b0f0; }
.xp-fp { background: rgba(40, 140, 60, 0.38); color: #80e090; }

.drift-memory-companion-focus-select {
    width: 100%;
    padding: 6px 6px;
    text-align: center;
    font-size: 16px;
    margin-top: 6px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.companion-bond-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    justify-content: start;
    width: 120px;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
}

.companion-bond-display .drift-memory-companion-cell-training-pending {
    width: 124px;
    min-height: 2.35em;
    margin-top: 3px;
    font-size: calc(9px * var(--drift-font-scale));
}

.companion-bond-display .drift-memory-companion-cell-training-pending.hidden {
    display: block !important;
    visibility: hidden;
}

.companion-bond-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 112px;
    min-height: 38px;
    align-self: center;
    transform: translate(-9px, 3px);
    cursor: help;
    pointer-events: auto;
}

.drift-memory-bond-tooltip {
    position: fixed;
    z-index: 30000;
    max-width: 300px;
    padding: 10px 12px;
    border: 1px solid rgba(241, 202, 132, 0.78);
    background:
        linear-gradient(180deg, rgba(22, 24, 32, 0.98), rgba(8, 12, 20, 0.98));
    color: #f5e2b0;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-line;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.drift-memory-bond-tooltip.hidden {
    display: none;
}

.companion-bond-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.companion-bond-lv {
    font-size: 28px;
    font-weight: 700;
    color: #f1ca84;
    white-space: nowrap;
    line-height: 1;
}

.drift-memory-companion-cell-training-right {
    display: flex;
    grid-column: 3;
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top: 18px;
    margin-left: 0;
    padding-right: 0;
}

.drift-memory-companion-cell-training-cmd {
    font-size: 16px;
    font-weight: 700;
    color: #f1ca84;
    white-space: nowrap;
    width: 100%;
    text-align: center;
    overflow: hidden;
    line-height: 1.2;
}

.drift-memory-companion-cell-facility {
    color: #cdbb98;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drift-memory-companion-cell-training-pending {
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    max-height: 2.35em;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: center;
    line-height: 1.12;
}

/* 経験値（左側・内容幅） */
.companion-trait-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    overflow: hidden;
}

.companion-trait-bar-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.companion-trait-label {
    font-size: 14px;
    font-weight: 700;
    width: auto;
}

.companion-trait-label.ap { color: #f08080; }
.companion-trait-label.mp { color: #80b0f0; }
.companion-trait-label.fp { color: #80e090; }

.companion-trait-bar-bg {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

/* 仲間の状況モーダル内カードへのホバー反応を無効化 */
.drift-memory-sl-fullscreen .card {
    pointer-events: none;
    cursor: default;
}

.drift-memory-sl-fullscreen .card:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.companion-trait-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.companion-trait-bar-fill.ap { background: linear-gradient(90deg, #c04040, #f08080); }
.companion-trait-bar-fill.mp { background: linear-gradient(90deg, #4060c0, #80b0f0); }
.companion-trait-bar-fill.fp { background: linear-gradient(90deg, #30904a, #80e090); }

.companion-trait-val {
    font-size: 20px;
    color: #e8e8e8;
    white-space: nowrap;
    font-weight: 600;
    text-align: left;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}

.companion-trait-val-compact {
    font-size: 17px;
    letter-spacing: 0;
}

.companion-trait-delay-note {
    grid-column: 1 / 3;
    grid-row: 2;
    color: #e7b56d;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
}

/* 限界突破ボタン */
.companion-breakthrough-btn {
    margin-top: 15px;
    width: 124px;
    min-height: 22px;
    padding: 1px 4px 2px;
    background: linear-gradient(135deg, rgba(180, 100, 20, 0.6), rgba(220, 140, 40, 0.4));
    border: 1px solid rgba(255, 180, 60, 0.72);
    color: #ffe080;
    font-size: calc(9px * var(--drift-font-scale));
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0;
    animation: breakthroughPulse 1.8s ease-in-out infinite;
    line-height: 1.1;
    white-space: nowrap;
}

.companion-breakthrough-btn:disabled,
.companion-breakthrough-btn.disabled {
    background: linear-gradient(135deg, rgba(66, 58, 45, 0.48), rgba(34, 34, 34, 0.62));
    border-color: rgba(144, 126, 96, 0.36);
    color: rgba(210, 190, 150, 0.48);
    cursor: not-allowed;
    filter: grayscale(0.75) brightness(0.66);
    animation: none;
    box-shadow: none;
}

@keyframes breakthroughPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 180, 40, 0.4); }
    50%       { box-shadow: 0 0 14px rgba(255, 200, 60, 0.8); }
}

/* 仲間バー: カードへのhover反応を無効化 */
.drift-memory-subleader-side-box .card {
    pointer-events: none;
    cursor: default;
}

.drift-memory-subleader-side-box .card:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.drift-memory-companion-entry {
    display: flex;
    gap: 10px;
    background: rgba(8, 14, 22, 0.78);
    border: 1px solid rgba(193, 143, 76, 0.22);
    padding: 10px;
    box-sizing: border-box;
}

.drift-memory-companion-entry-card {
    flex-shrink: 0;
    width: 72px;
}

.drift-memory-companion-entry-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drift-memory-companion-name {
    font-size: calc(14px * var(--drift-font-scale));
    font-weight: 700;
    color: #f1ca84;
}

.drift-memory-companion-lv {
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 400;
    color: #a89060;
}

.drift-memory-companion-stats {
    font-size: calc(12px * var(--drift-font-scale));
    color: #c8b888;
}

.drift-memory-companion-total {
    color: #8a7a58;
}

.drift-memory-companion-facility {
    font-size: calc(12px * var(--drift-font-scale));
    color: #a0b8d0;
}

.drift-memory-companion-focus-label {
    font-size: calc(11px * var(--drift-font-scale));
    color: #a89060;
    margin-top: 2px;
}

.drift-memory-companion-focus-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.drift-memory-companion-focus-btn {
    padding: 3px 8px;
    border: 1px solid rgba(193, 143, 76, 0.38);
    background: rgba(8, 14, 22, 0.72);
    color: #c8b080;
    cursor: pointer;
    font-size: calc(11px * var(--drift-font-scale));
    font-weight: 600;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.drift-memory-companion-focus-btn.active {
    background: rgba(180, 120, 40, 0.38);
    border-color: #f2b864;
    color: #f8d890;
}

.drift-memory-companion-facility-tag {
    font-size: calc(10px * var(--drift-font-scale));
    text-align: center;
    color: #a0c0d8;
    margin-top: 2px;
}

.drift-memory-companion-card-wrap {
    position: relative;
}

.drift-memory-sl-fullscreen.hidden {
    display: none;
}

.drift-memory-sl-fullscreen.tutorial-companion-training .drift-memory-companion-focus-select {
    pointer-events: none;
    opacity: 0.58;
    outline: 3px solid rgba(255, 70, 70, 0.98);
    outline-offset: 3px;
    box-shadow: 0 0 18px rgba(255, 48, 48, 0.78);
}

.drift-memory-sl-fullscreen.tutorial-companion-training #driftMemorySubLeaderCloseBtn {
    pointer-events: none;
    opacity: 0.58;
    outline: 2px solid rgba(255, 70, 70, 0.82);
    outline-offset: 4px;
}

.drift-memory-sl-fullscreen.tutorial-companion-training.tutorial-controls-ready .drift-memory-companion-focus-select,
.drift-memory-sl-fullscreen.tutorial-companion-training.tutorial-controls-ready #driftMemorySubLeaderCloseBtn {
    pointer-events: auto;
    opacity: 1;
}

.drift-memory-companion-tutorial-panel {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: 28px;
    z-index: 2;
    width: min(760px, 94vw);
    min-height: 210px;
    transform: translateX(-50%);
    padding: 20px 24px 18px;
    border: 1px solid rgba(193, 143, 76, 0.62);
    background: linear-gradient(135deg, rgba(10, 20, 36, 0.97), rgba(6, 12, 24, 0.98));
    box-shadow: 0 0 36px rgba(0, 0, 0, 0.72), 0 0 22px rgba(220, 160, 40, 0.18);
    box-sizing: border-box;
    cursor: pointer;
}

.drift-memory-companion-tutorial-panel.is-minimized {
    width: min(460px, 72vw);
    left: 50%;
    right: auto;
    top: 42px;
    bottom: auto;
    transform: translateX(-50%);
    min-height: 0;
    padding: 8px 14px;
}

.drift-memory-companion-tutorial-panel.is-minimized .drift-memory-companion-tutorial-speaker,
.drift-memory-companion-tutorial-panel.is-minimized .drift-memory-companion-tutorial-text,
.drift-memory-companion-tutorial-panel.is-minimized .drift-memory-companion-tutorial-key-help,
.drift-memory-companion-tutorial-panel.is-minimized #driftMemoryCompanionTutorialNext {
    display: none;
}

.drift-memory-companion-tutorial-panel.is-minimized::after {
    content: attr(data-minimized-text);
    color: rgba(248, 232, 192, 0.88);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.drift-memory-companion-tutorial-speaker {
    color: #f1ca84;
    font-size: 1.14rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
    text-shadow: 0 0 10px rgba(240, 180, 80, 0.45);
}

.drift-memory-companion-tutorial-text {
    color: #e8dcc8;
    font-size: 1.14rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    padding-right: 150px;
    min-height: 2.9em;
}

.drift-memory-companion-tutorial-panel .drift-memory-tutorial-next-btn {
    position: absolute;
    right: 18px;
    bottom: 14px;
    margin: 0;
}

.drift-memory-sl-header {
    flex-shrink: 0;
    padding: 18px 28px 10px;
    border-bottom: 1px solid rgba(124, 212, 252, 0.15);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.drift-memory-sl-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.drift-memory-sl-talent-summary {
    display: flex;
    align-items: center;
    min-height: 36px;
    max-width: 360px;
    padding: 3px 7px;
    border: 1px solid rgba(193, 143, 76, 0.38);
    background: rgba(5, 10, 18, 0.78);
    box-sizing: border-box;
}

.drift-memory-sl-talent-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.drift-memory-sl-talent-chip {
    min-width: 0;
    max-width: 148px;
    padding: 4px 9px;
    border: 1px solid rgba(255, 216, 139, 0.58);
    background: linear-gradient(180deg, rgba(80, 50, 18, 0.86), rgba(23, 18, 12, 0.9));
    color: #fff1c8;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drift-memory-sl-talent-chip:focus-visible {
    outline: 2px solid rgba(255, 230, 148, 0.9);
    outline-offset: 2px;
}

.drift-memory-sl-talent-chip.is-empty {
    border-color: rgba(193, 143, 76, 0.28);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(216, 202, 168, 0.74);
}

.drift-memory-sl-title {
    font-size: 22px;
    font-weight: 800;
    color: #f1ca84;
    margin-bottom: 4px;
}

.drift-memory-sl-desc {
    font-size: 13px;
    color: rgba(200, 220, 240, 0.7);
    line-height: 1.5;
}

/* ボディ：左右2ペイン */
.drift-memory-sl-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左：カードグリッド（5列固定、スクロール） */
.drift-memory-sl-card-grid {
    flex: 0 0 62%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    overflow-y: auto;
    padding: 8px 14px 12px;
    align-content: start;
    border-right: 1px solid rgba(124, 212, 252, 0.12);
}

.drift-memory-sl-card-btn {
    position: relative;
    display: block;
    height: 252px;
    background: rgba(6, 12, 22, 0.5);
    border: 2px solid rgba(124, 212, 252, 0.15);
    border-radius: 12px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.drift-memory-sl-card-btn .card {
    pointer-events: none;
    transform: scale(0.72);
    transform-origin: top center;
    display: block;
}

.drift-memory-sl-card-btn.selected,
.drift-memory-sl-card-btn.sl-card-selected {
    border-color: rgba(109, 220, 138, 0.85);
    box-shadow: 0 0 14px rgba(109, 220, 138, 0.28);
}

.drift-memory-sl-card-btn:disabled:not(.sl-card-leader) {
    opacity: 0.28;
    cursor: not-allowed;
}

.drift-memory-sl-card-btn:not(:disabled):not(.sl-card-selected):hover {
    border-color: rgba(124, 212, 252, 0.5);
}

.drift-memory-sl-card-btn.sl-card-leader {
    border-color: rgba(235, 185, 80, 0.5);
    cursor: not-allowed;
    opacity: 0.75;
    position: relative;
}

.sl-leader-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(120, 80, 10, 0.88);
    color: #f5d070;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 4px 0 5px;
    letter-spacing: 0.1em;
    z-index: 5;
}

/* 右：★スロットエリア */
.drift-memory-sl-star-area {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 0;
    overflow: hidden;
}

.drift-memory-sl-star-title {
    font-size: 13px;
    color: rgba(200, 220, 240, 0.55);
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.drift-memory-sl-grid-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: 10px;
    padding: 6px 12px 12px;
    overflow-y: auto;
    flex: 1;
    align-content: start;
}

.drift-memory-sl-grid-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    border: 2px dashed rgba(124, 212, 252, 0.28);
    background: rgba(8, 14, 26, 0.55);
    overflow: hidden;
    transition: border-color 0.15s;
    min-height: 80px;
}

.drift-memory-sl-grid-slot.filled {
    border: 2px solid rgba(109, 220, 138, 0.7);
    background: rgba(8, 24, 14, 0.85);
    cursor: pointer;
}

.drift-memory-sl-grid-slot.filled:hover {
    border-color: rgba(240, 90, 90, 0.75);
}

.drift-memory-sl-grid-slot .card {
    pointer-events: none;
    transform: scale(0.62);
    transform-origin: top center;
    margin-bottom: -114px;
}

.sl-star-num {
    position: absolute;
    top: 4px;
    left: 6px;
    z-index: 10;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 248, 212, 0.95), rgba(214, 184, 109, 0.9) 42%, rgba(96, 61, 18, 0.98));
    border: 1px solid rgba(255, 233, 168, 0.92);
    color: #241205;
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-family: 'Cinzel', serif;
}

.sl-star-empty {
    font-size: 11px;
    color: rgba(150, 175, 200, 0.4);
    padding: 22px 0 18px;
    letter-spacing: 0.04em;
}

.sl-selected-badge {
    position: relative;
    z-index: 2;
    background: rgba(20, 80, 40, 0.95);
    color: #6ddc8a;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px 5px;
    width: 100%;
    text-align: center;
}

.drift-memory-sl-footer {
    display: none;
}

#driftMemorySubLeaderCloseBtn {
    flex: 0 0 auto;
    width: 100px;
    min-height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    background-image: var(--drift-button-normal);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#driftMemorySubLeaderCloseBtn:hover {
    background-image: var(--drift-button-hover);
}

.drift-memory-subleader-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.drift-memory-subleader-chip {
    display: flex;
    flex-direction: column;
    padding: 4px 8px;
    background: rgba(20, 40, 60, 0.8);
    border: 1px solid rgba(109, 220, 138, 0.4);
    border-radius: 4px;
    font-size: 12px;
}
.drift-memory-subleader-chip .subleader-name { color: #ffe5a8; font-weight: 700; }
.drift-memory-subleader-chip .subleader-stats { color: #88b8d8; }

.drift-memory-action-result-lines {
    display: grid;
    gap: 6px;
    margin: 12px 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(193, 143, 76, 0.34);
    background: rgba(0, 0, 0, 0.28);
    color: #d8ecff;
    font-weight: 700;
    line-height: 1.45;
}

.drift-memory-bond-reward-panel {
    width: min(520px, 92vw);
    text-align: center;
}

.drift-memory-bond-reward-lines {
    display: grid;
    gap: 8px;
    margin: 14px 0 4px;
    padding: 12px;
    border: 1px solid rgba(193, 143, 76, 0.42);
    background: rgba(8, 18, 28, 0.78);
    color: #ffe5a8;
    font-size: calc(18px * var(--drift-font-scale));
    font-weight: 800;
    line-height: 1.45;
}

.drift-memory-charisma-level-panel {
    width: min(460px, 92vw);
    text-align: center;
}

.drift-memory-charisma-level-line {
    margin: 16px auto 6px;
    padding: 12px 18px;
    border: 1px solid rgba(193, 143, 76, 0.48);
    background: rgba(8, 18, 28, 0.82);
    color: #ffe5a8;
    font-size: calc(26px * var(--drift-font-scale));
    font-weight: 900;
    line-height: 1.3;
}

.drift-memory-skill-list,
.drift-memory-skill-equipped {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.drift-memory-skill-row,
.drift-memory-skill-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(10, 18, 32, 0.72);
    border: 1px solid rgba(124, 212, 252, 0.2);
    border-radius: 6px;
}
.drift-memory-skill-row.equipped {
    border-color: rgba(109, 220, 138, 0.6);
    background: rgba(20, 50, 30, 0.6);
}
.drift-memory-skill-slot .skill-info,
.drift-memory-skill-row .skill-info { flex: 1; }
.drift-memory-skill-slot .skill-label,
.drift-memory-skill-row .skill-label {
    display: block;
    font-weight: 700;
    color: #ffe5a8;
}
.drift-memory-skill-slot .skill-source,
.drift-memory-skill-row .skill-source {
    font-size: 11px;
    color: #88a8c0;
}
.drift-memory-skill-slot .skill-desc,
.drift-memory-skill-row .skill-desc {
    display: block;
    margin-top: 5px;
    color: #d6c59e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}
.drift-memory-skill-equip,
.drift-memory-skill-unequip {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(124, 212, 252, 0.3);
    cursor: pointer;
    font-size: 12px;
    background: rgba(30, 50, 80, 0.8);
    color: #b8d8f8;
}
.drift-memory-skill-unequip { border-color: rgba(240, 96, 96, 0.5); color: #f0a0a0; }

.drift-memory-skill-panel .drift-memory-modal-actions {
    grid-template-columns: 1fr;
}

#driftMemorySkillCloseBtn {
    justify-self: center;
    width: min(260px, 100%);
    min-height: 0;
    aspect-ratio: 2172 / 724;
    display: grid;
    place-items: center;
    background-image: var(--drift-button-normal-long);
}

#driftMemorySkillCloseBtn:hover {
    background-image: var(--drift-button-hover-long);
}

.drift-memory-card-preview {
    display: flex;
    justify-content: center;
    min-height: 310px;
    padding-top: 4px;
}

.drift-memory-card-preview .card {
    transform: scale(0.9);
    transform-origin: top center;
}

.drift-memory-hero-card-overlay {
    position: fixed;
    inset: 0;
    z-index: 30100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
}

.drift-memory-hero-card-overlay.hidden {
    display: none;
}

.drift-memory-hero-card-overlay-inner .card {
    transform: scale(1.8);
    transform-origin: center center;
    cursor: default;
    pointer-events: none;
}

.drift-memory-profile-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-top: -2px;
}

.drift-memory-profile-meta div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(193, 143, 76, 0.18);
}

.drift-memory-profile-meta strong {
    color: #fff1c7;
}

.drift-memory-growth-bars {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.drift-memory-growth-head,
.drift-memory-growth-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: calc(13px * var(--drift-font-scale));
    color: #ead8af;
}

.drift-memory-growth-head strong {
    color: #fff1c7;
}

.drift-memory-meter {
    height: 10px;
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(193, 143, 76, 0.36);
    background: rgba(0, 0, 0, 0.45);
}

.drift-memory-meter span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #a75c49, #f0a06c);
}

.drift-memory-growth-row.mp .drift-memory-meter span {
    background: linear-gradient(90deg, #3d78ad, #8fc8f0);
}

.drift-memory-growth-row.fp .drift-memory-meter span {
    background: linear-gradient(90deg, #489163, #93df96);
}

.drift-memory-growth-row .drift-memory-meter {
    position: relative;
    height: 30px;
    margin: 2px 0 0;
    border: none;
    background: var(--drift-gauge-frame) center / 100% 100% no-repeat;
    overflow: visible;
}

.drift-memory-growth-row .drift-memory-meter span {
    position: absolute;
    left: 9px;
    top: 50%;
    width: var(--meter-fill-width, auto);
    max-width: calc(100% - 18px);
    height: 11px;
    transform: translateY(-50%);
    background: var(--drift-gauge-fill-red) left center / 100% 100% no-repeat;
}

.drift-memory-growth-row.mp .drift-memory-meter span {
    background: var(--drift-gauge-fill-blue) left center / 100% 100% no-repeat;
}

.drift-memory-growth-row.fp .drift-memory-meter span {
    background: var(--drift-gauge-fill-green) left center / 100% 100% no-repeat;
}

.drift-memory-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: 220px 1fr;
    gap: 12px;
    min-height: 0;
    max-height: calc(100vh - 126px);
    overflow: hidden;
}

.drift-memory-intro {
    display: none;
}

.drift-memory-intro-title {
    color: #f1ca84;
    font-size: calc(20px * var(--drift-font-scale));
    font-weight: 800;
}

.drift-memory-intro-body {
    margin-top: 5px;
    color: #d8caa8;
    font-size: calc(13px * var(--drift-font-scale));
    line-height: 1.55;
}

.drift-memory-facilities {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-y: auto;
    overflow-x: hidden;
}

.drift-memory-facilities .drift-memory-facility {
    width: 100%;
}

.drift-memory-action-col .drift-memory-action-card {
    height: 274px;
}

.drift-memory-facility {
    position: relative;
    min-width: 0;
    padding: 14px 14px 18px;
    color: inherit;
    cursor: pointer;
    overflow: visible;
    text-align: left;
    height: 316px;
    min-height: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.drift-memory-facility::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--drift-ui-frame-facility) center / 100% 100% no-repeat;
    pointer-events: none;
    opacity: 0.82;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

.drift-memory-facility::after {
    content: "";
    position: absolute;
    inset: 22px 22px 26px;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(237, 181, 83, 0.12), transparent 40%),
        linear-gradient(180deg, rgba(11, 18, 22, 0.74), rgba(4, 8, 11, 0.82));
    pointer-events: none;
}

.drift-memory-facility:hover {
    filter: brightness(1.22) saturate(1.1);
    box-shadow: 0 0 22px rgba(240, 170, 60, 0.22);
}

.drift-memory-action-card {
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.drift-memory-action-card:hover {
    filter: brightness(1.18) saturate(1.08);
    box-shadow: inset 0 0 0 1px rgba(255, 210, 120, 0.32), 0 0 12px rgba(240, 160, 60, 0.2);
}

.drift-memory-facility-emblem {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 58px;
    height: 58px;
    object-fit: contain;
    transform: translateX(-50%);
    z-index: 3;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.72));
}

.drift-memory-facility.active {
    box-shadow: 0 0 28px rgba(240, 160, 64, 0.36);
}

.drift-memory-facility.active::before {
    filter:
        drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 12px rgba(247, 196, 96, 0.36));
}

.drift-memory-facility-image {
    position: relative;
    z-index: 1;
    display: block;
    height: 56%;
    min-height: 0;
    background-position: center;
    background-size: cover;
    filter: saturate(1) brightness(0.9);
}

.drift-memory-facility-icon-art {
    height: 58%;
    margin: 4px 4px 0;
    background-size: contain;
    background-repeat: no-repeat;
    filter: saturate(1.04) brightness(1);
}

.drift-memory-action-card .drift-memory-facility-icon-art {
    height: 60%;
}

.drift-memory-training-combo-badge {
    position: absolute;
    top: 58px;
    left: calc(50% + 48px);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 86px;
    height: 54px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: auto;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.72));
}

.drift-memory-training-combo-badge::after {
    content: attr(data-combo-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    border: 1px solid rgba(248, 207, 118, 0.72);
    border-radius: 4px;
    background: rgba(6, 11, 18, 0.96);
    color: #ffe9ad;
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 800;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}

.drift-memory-training-combo-badge:hover::after,
.drift-memory-training-combo-badge:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.drift-memory-training-combo-count {
    position: absolute;
    right: 13px;
    bottom: 7px;
    min-width: 22px;
    color: #fff2bc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: calc(22px * var(--drift-font-scale));
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 2px 0 #2a1300,
        1px 0 0 #2a1300,
        -1px 0 0 #2a1300,
        0 0 8px rgba(255, 189, 64, 0.88);
}

.drift-memory-facility-body {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 4px;
    padding: 2px 14px 4px;
}

.drift-memory-facility-title {
    color: #f6d698;
    font-size: calc(18px * var(--drift-font-scale));
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.86);
}

.drift-memory-facility-desc,
.drift-memory-facility-preview,
.drift-memory-plan-card span,
.drift-memory-night-card span {
    color: #d8caa8;
    font-size: calc(11px * var(--drift-font-scale));
    line-height: 1.32;
    text-align: center;
}

.drift-memory-facility-desc {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 34px;
    z-index: 6;
    padding: 6px 8px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background: rgba(3, 7, 12, 0.94);
    color: #f7e7bf;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
}

.drift-memory-facility:hover .drift-memory-facility-desc,
.drift-memory-facility:focus-visible .drift-memory-facility-desc {
    opacity: 1;
    transform: translateY(0);
}

.drift-memory-facility-preview {
    padding: 5px 8px;
    border: 1px solid rgba(193, 143, 76, 0.26);
    background: rgba(0, 0, 0, 0.28);
    color: #9fe48f;
}

.drift-memory-gather-location-control {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(126px, 1fr);
    align-items: center;
    gap: 8px;
    width: calc(100% - 30px);
    min-height: 38px;
    margin: 4px auto 0;
    padding: 5px 8px;
    border: 1px solid rgba(193, 143, 76, 0.48);
    background: rgba(5, 11, 18, 0.94);
    color: #f1ca84;
    font-size: calc(11px * var(--drift-font-scale));
    font-weight: 800;
    box-sizing: border-box;
    pointer-events: auto;
    text-align: center;
}

.drift-memory-gather-location-control span {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
}

.drift-memory-gather-location-control select {
    min-width: 0;
    height: 28px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background: rgba(8, 14, 24, 0.94);
    color: #ffe5a8;
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 800;
    text-align: center;
    text-align-last: center;
}

.drift-memory-facility-subleader-row {
    display: flex;
    gap: 4px;
    padding: 6px 6px 4px;
    border-top: 1px solid rgba(109, 220, 138, 0.25);
    background: rgba(0, 0, 0, 0.35);
    overflow-x: auto;
    flex-wrap: nowrap;
}

.drift-memory-facility-sl-card {
    flex: 0 0 54px;
    height: 80px;
    overflow: hidden;
    border-radius: 4px;
}

.drift-memory-facility-sl-card .card {
    transform: scale(0.225);
    transform-origin: top left;
    pointer-events: none;
}

.drift-memory-facility-confirm {
    position: fixed;
    inset: 0;
    z-index: 2850;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.56);
    pointer-events: auto;
}

.drift-memory-facility-confirm-panel {
    width: min(660px, calc(100vw - 48px));
    border: 1px solid rgba(242, 184, 100, 0.78);
    background: linear-gradient(180deg, rgba(12, 16, 22, 0.96), rgba(7, 10, 14, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(255, 224, 160, 0.16),
        0 22px 48px rgba(0, 0, 0, 0.62),
        0 0 24px rgba(242, 184, 100, 0.16);
    padding: 16px 18px 18px;
    display: grid;
    gap: 12px;
}

.drift-memory-facility-confirm-text {
    color: #f6d698;
    font-size: calc(16px * var(--drift-font-scale));
    font-weight: 800;
    text-align: center;
}

.drift-memory-facility-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.drift-memory-confirm-btn {
    width: min(100%, 180px);
    min-height: 0;
    aspect-ratio: 1110 / 404;
    justify-self: center;
    border: none;
    color: #ead2a0;
    background: transparent var(--drift-button-normal) center / 100% 100% no-repeat;
    cursor: pointer;
    font-size: calc(14px * var(--drift-font-scale));
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.84);
}

.drift-memory-confirm-btn.primary {
    color: #fff0c0;
    background-image: var(--drift-button-normal);
}

.drift-memory-confirm-btn:hover {
    background-image: var(--drift-button-hover);
    filter: brightness(1.12);
}

.drift-memory-facility-col {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.drift-memory-facility-sl-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 8px 4px;
    min-height: 0;
}

.drift-memory-facility-sl-mini {
    flex: 0 0 auto;
    position: relative;
    width: 116px;
    height: 170px;
    overflow: hidden;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.9));
    border-radius: 8px;
    cursor: pointer;
}

.drift-memory-facility-sl-mini .card {
    transform: scale(0.49);
    transform-origin: top left;
    pointer-events: none;
}

.drift-memory-facility-sl-mini--support {
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.9));
}

.drift-memory-facility-sl-mini--support::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(129, 220, 255, 0.42);
    border-radius: 8px;
    background: rgba(115, 210, 255, 0.05);
    box-shadow: inset 0 0 14px rgba(115, 210, 255, 0.12), 0 0 14px rgba(115, 210, 255, 0.18);
    opacity: 0.38;
    animation: driftSupportCompanionPulse 2.4s ease-in-out infinite;
    pointer-events: none;
    will-change: opacity;
}

@keyframes driftSupportCompanionPulse {
    0%, 100% {
        opacity: 0.22;
    }
    25%, 75% {
        opacity: 0.48;
    }
    50% {
        opacity: 0.76;
    }
}

.drift-memory-facility-action-badge {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 38px;
    height: 38px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(5, 10, 20, 0.82);
    border: 1px solid rgba(193, 143, 76, 0.7);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.drift-memory-facility-action-badge--support {
    border-color: rgba(129, 220, 255, 0.76);
    background-color: rgba(5, 13, 22, 0.82);
    box-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 10px rgba(104, 214, 255, 0.34);
}

.drift-memory-inhabitant-badge {
    background-color: rgba(5, 10, 20, 0.62);
}

.drift-memory-inhabitant-badge--mini {
    width: 26px;
    height: 26px;
    bottom: 24px;
}

.drift-memory-inhabitant-badge--detail {
    width: 52px;
    height: 52px;
    bottom: 74px;
}

.drift-memory-facility-sl-preview {
    display: none;
    position: fixed;
    z-index: 200;
    width: 283px;
    height: 415px;
    overflow: hidden;
    border-radius: 8px;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.98));
    pointer-events: none;
}

.drift-memory-facility-sl-preview.is-visible {
    display: block;
}

.drift-memory-facility-sl-preview .card {
    transform: scale(1.2);
    transform-origin: top left;
    pointer-events: none;
}

.drift-memory-facility-action-badge--preview {
    bottom: 126px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
}

.drift-memory-subleader-bar-panel {
    min-width: 0;
}


.drift-memory-log-panel {
    position: relative;
    min-height: 0;
    max-height: 220px;
    overflow: hidden;
    transition: none;
}

.drift-memory-next-power-panel {
    position: relative;
    min-height: 0;
    max-height: 220px;
    overflow: hidden;
    padding: 12px;
}

.drift-memory-next-power-panel .drift-memory-panel-title {
    margin-bottom: 6px;
    padding-bottom: 5px;
    font-size: calc(14px * var(--drift-font-scale));
}

.drift-memory-next-power-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.drift-memory-next-power-count {
    color: #f1ca84;
    font-size: calc(13px * var(--drift-font-scale));
    font-weight: 800;
    white-space: nowrap;
}

.drift-memory-next-power-list {
    display: grid;
    gap: 7px;
    max-height: 166px;
    overflow-y: auto;
    padding-right: 4px;
}

.drift-memory-next-power-entry {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 54px;
    padding: 6px;
    border: 1px solid rgba(193, 143, 76, 0.46);
    border-radius: 8px;
    background: rgba(8, 14, 24, 0.72);
}

.drift-memory-next-power-thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: 1px solid rgba(241, 205, 128, 0.7);
    background: rgba(22, 28, 42, 0.9) center / cover no-repeat;
}

.drift-memory-next-power-body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.drift-memory-next-power-body strong {
    color: #f8e9c1;
    font-size: calc(12px * var(--drift-font-scale));
    line-height: 1.25;
}

.drift-memory-next-power-body span,
.drift-memory-next-power-empty {
    color: #d8caa8;
    font-size: calc(11px * var(--drift-font-scale));
    line-height: 1.35;
}

.drift-memory-next-power-empty {
    padding: 10px 8px;
    border-left: 2px solid rgba(193, 143, 76, 0.42);
}

.drift-memory-log-panel .drift-memory-panel-title {
    margin-bottom: 6px;
    padding-bottom: 5px;
    font-size: calc(14px * var(--drift-font-scale));
}

.drift-memory-log-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.drift-memory-log-toggle {
    min-width: 58px;
    min-height: 28px;
    padding: 0 10px;
    border: none;
    background: transparent var(--drift-button-normal) center / 100% 100% no-repeat;
    color: #ead2a0;
    cursor: pointer;
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.84);
}

.drift-memory-log-toggle:hover {
    background-image: var(--drift-button-hover);
    filter: brightness(1.1);
}

#driftMemoryScreen .drift-memory-panel.drift-memory-log-panel.collapsed {
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    padding: 6px;
    background: transparent;
    border: 0;
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
}

#driftMemoryScreen .drift-memory-panel.drift-memory-log-panel.collapsed::before,
#driftMemoryScreen .drift-memory-panel.drift-memory-log-panel.collapsed::after {
    content: none;
    display: none;
}

.drift-memory-log-panel.collapsed .drift-memory-log {
    display: none;
}

.drift-memory-log-panel.collapsed .drift-memory-panel-title {
    position: static;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    pointer-events: none;
}

.drift-memory-log-panel.collapsed .drift-memory-panel-title span {
    display: none;
}

.drift-memory-log-panel.collapsed .drift-memory-log-toggle {
    pointer-events: auto;
}

.drift-memory-log {
    display: grid;
    gap: 6px;
    max-height: 166px;
    overflow: auto;
    color: #e7d5ac;
    font-size: calc(13px * var(--drift-font-scale));
    line-height: 1.45;
}

.drift-memory-log.is-overflowing {
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 92%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 92%);
}

.drift-memory-log div {
    padding-left: 12px;
    border-left: 2px solid rgba(193, 143, 76, 0.42);
}

.drift-memory-deck {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 6px;
}

.drift-memory-deck-card {
    position: relative;
    flex: 0 0 74px;
    height: 110px;
    overflow: hidden;
}

.drift-memory-deck-card .card {
    transform: scale(0.305);
    transform-origin: top left;
    pointer-events: none;
}

.drift-memory-deck-empty {
    flex: 0 0 72px;
    display: grid;
    place-items: center;
    min-height: 130px;
    border: 1px dashed rgba(193, 143, 76, 0.4);
    color: #bfae88;
    font-size: 34px;
}

.drift-memory-plan,
.drift-memory-village {
    display: grid;
    gap: 6px;
    margin-bottom: 0;
}

.drift-memory-time-slot-heading {
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 900;
    letter-spacing: 0.16em;
    color: #f8e4a8;
    text-shadow: 0 0 20px rgba(248, 200, 100, 0.7), 0 2px 10px rgba(0, 0, 0, 0.9);
    text-align: center;
    padding: 10px 0 12px;
    border-bottom: 1px solid rgba(193, 143, 76, 0.32);
    margin-bottom: 6px;
}

.drift-memory-plan-day {
    color: #f1ca84;
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 700;
}

.drift-memory-plan-card,
.drift-memory-night-card {
    position: relative;
    display: grid;
    gap: 2px;
    min-height: 44px;
    padding: 7px 8px 7px 48px;
    border: 1px solid rgba(193, 143, 76, 0.28);
    background: rgba(0, 0, 0, 0.24);
    font-size: calc(14px * var(--drift-font-scale));
    font-weight: 700;
}

.drift-memory-plan-card img,
.drift-memory-night-card img {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.drift-memory-action-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.drift-memory-action-choice {
    min-width: 0;
    padding: 7px 5px;
    border: 1px solid rgba(193, 143, 76, 0.34);
    color: #e7d5ac;
    background: rgba(0, 0, 0, 0.24);
    cursor: pointer;
    text-align: center;
}

.drift-memory-action-choice strong,
.drift-memory-action-choice span {
    display: block;
}

.drift-memory-action-choice strong {
    color: #f6d698;
    font-size: calc(13px * var(--drift-font-scale));
}

.drift-memory-action-choice span {
    margin-top: 2px;
    font-size: calc(10px * var(--drift-font-scale));
    line-height: 1.2;
}

.drift-memory-action-choice.active {
    border-color: #f2b864;
    color: #fff3d3;
    background: rgba(166, 103, 34, 0.36);
    box-shadow: inset 0 0 0 1px rgba(255, 221, 147, 0.2);
}

.drift-memory-plan-summary {
    border-top: 1px solid rgba(193, 143, 76, 0.26);
    padding-top: 8px;
    color: #f1ca84;
    font-size: calc(13px * var(--drift-font-scale));
    font-weight: 700;
}

.drift-memory-deck-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.drift-memory-deck-title-btn {
    min-height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    color: #ead2a0;
    background: rgba(16, 25, 40, 0.9);
    cursor: pointer;
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 800;
}

.drift-memory-deck-title-btn:hover {
    filter: brightness(1.12);
}

.drift-memory-inline-btn {
    min-height: 34px;
    border: 1px solid rgba(193, 143, 76, 0.44);
    color: #ead2a0;
    background: rgba(8, 10, 12, 0.66);
    cursor: pointer;
    font-size: calc(12px * var(--drift-font-scale));
    font-weight: 700;
}

.drift-memory-night-card {
    border-color: rgba(90, 135, 180, 0.42);
    background-position: center;
    background-size: cover;
}

.drift-memory-village-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 4px 10px;
    align-items: center;
}

.drift-memory-village-row img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.drift-memory-subleader-side-box {
    overflow: hidden;
}

#driftMemorySkillInheritancePanel.drift-memory-tutorial-highlight {
    outline-offset: -4px;
    box-shadow:
        inset 0 0 0 3px rgba(255, 64, 64, 0.98),
        inset 0 0 28px rgba(255, 48, 48, 0.48),
        0 0 28px rgba(255, 48, 48, 0.92),
        0 0 70px rgba(255, 32, 32, 0.44) !important;
}

.drift-memory-subleader-side-box .drift-memory-deck {
    display: grid;
    grid-template-columns: repeat(3, 74px);
    align-content: start;
    justify-content: center;
    gap: 8px;
    max-height: 100%;
    overflow: auto;
    padding-bottom: 0;
}

.drift-memory-subleader-side-box .drift-memory-deck-empty {
    min-height: 72px;
    font-size: calc(13px * var(--drift-font-scale));
}

.drift-memory-village-row .drift-memory-meter {
    grid-column: 2 / -1;
    margin: 0;
}

.drift-memory-meter.danger span {
    background: linear-gradient(90deg, #a45d30, #e8a449);
}

.drift-memory-meter.trust span {
    background: linear-gradient(90deg, #4f9a52, #9fe48f);
}

.drift-memory-meter.fatigue span {
    background: linear-gradient(90deg, #547da7, #92bfe6);
}

.drift-memory-meter.curse span {
    background: linear-gradient(90deg, #8a5cc8, #d7a7ff);
}

.drift-memory-advance-btn,
.drift-memory-side-action-btn,
.drift-memory-modal-primary {
    position: relative;
    width: 100%;
    min-height: 58px;
    border: none;
    color: #fff3d3;
    background: transparent var(--drift-button-normal) center / 100% 100% no-repeat;
    box-shadow: none;
    font-size: calc(20px * var(--drift-font-scale));
    font-weight: 800;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.84);
}

.drift-memory-side-action-btn {
    min-height: 46px;
    background-image: var(--drift-button-normal);
    font-size: calc(15px * var(--drift-font-scale));
}

.drift-memory-advance-btn:hover,
.drift-memory-side-action-btn:hover,
.drift-memory-modal-primary:hover {
    background-image: var(--drift-button-hover);
    filter: brightness(1.08);
}

.drift-memory-side-panel > .drift-memory-advance-btn {
    align-self: start;
}

.drift-memory-advance-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.drift-memory-event-modal,
.drift-memory-deck-modal {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.62);
}

.drift-memory-deck-modal {
    position: fixed;
}

.drift-memory-result-modal {
    position: fixed;
    inset: 0;
    z-index: 30050;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(170, 128, 56, 0.12), transparent 36%),
        rgba(0, 0, 0, 0.68);
    pointer-events: auto;
    --drift-ui-frame: url("drift_memory/ui/parts/ui_frame.png");
    --drift-ui-frame-square: url("drift_memory/ui/parts/ui_frame_square.png");
    --drift-ui-frame-header: url("drift_memory/ui/parts/ui_frame_header_wide.png");
    --drift-ui-frame-box: url("drift_memory/ui/parts/ui_frame_box.png");
    --drift-button-normal: url("drift_memory/ui/parts/button_normal.png");
    --drift-button-hover: url("drift_memory/ui/parts/button_hover.png");
    --drift-button-normal-long: url("drift_memory/ui/parts/button_normal_long.png");
    --drift-button-hover-long: url("drift_memory/ui/parts/button_hover_long.png");
    --drift-banner-skill: url("drift_memory/ui/parts/ui_banner_skill.png");
}

.drift-memory-result-modal.drift-memory-final-bond-modal {
    place-items: start center;
    overflow: auto;
    padding: 24px;
    box-sizing: border-box;
}

.drift-memory-result-modal.hidden {
    display: none;
}

.drift-memory-modal-panel.drift-memory-final-registration-panel {
    width: min(1480px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100vh - 24px);
    box-sizing: border-box;
    padding: 32px 44px 28px;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    gap: 10px;
    overflow: hidden;
}

.drift-memory-final-registration-panel .drift-memory-modal-title {
    margin: 0;
    font-size: calc(34px * var(--drift-font-scale));
}

.drift-memory-final-registration-panel .drift-memory-modal-body,
.drift-memory-final-registration-panel .drift-memory-modal-note {
    margin-top: 0;
    font-size: calc(16px * var(--drift-font-scale));
    line-height: 1.45;
}

.drift-memory-modal-panel.drift-memory-final-bond-panel {
    width: min(1600px, calc(100vw - 48px), calc((100vh - 48px) * 1342 / 904));
    max-width: none;
    aspect-ratio: 1342 / 904;
    box-sizing: border-box;
    padding: clamp(46px, 4.9vw, 76px) clamp(54px, 6.8vw, 108px) clamp(34px, 4vw, 58px);
    border: none;
    background: transparent url("drift_memory/ui/parts/skill_window.png") center / 100% 100% no-repeat;
    box-shadow: none;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: center;
    gap: clamp(6px, 0.9vw, 12px);
    overflow: hidden;
}

.drift-memory-final-bond-panel .drift-memory-modal-title {
    margin: 118px 0 0;
    font-size: calc(44px * var(--drift-font-scale, 1.25));
    line-height: 1.08;
    text-align: center;
    color: #ffe6a6;
}

.drift-memory-final-bond-panel .drift-memory-modal-body {
    font-size: calc(19px * var(--drift-font-scale, 1.25));
    text-align: center;
    line-height: 1.35;
    color: #f0dfbd;
    margin: 18px auto 0;
    max-width: min(1120px, 86%);
    white-space: nowrap;
}

.drift-memory-final-bond-grid {
    display: grid;
    grid-template-columns: repeat(var(--final-bond-columns, 5), minmax(0, 1fr));
    grid-template-rows: repeat(var(--final-bond-rows, 1), minmax(0, auto));
    gap: clamp(8px, 1vw, 14px);
    align-items: stretch;
    align-content: center;
    min-height: 0;
    width: 100%;
}

.drift-memory-final-bond-panel > .drift-memory-modal-actions {
    width: 100%;
    grid-template-columns: 1fr;
    justify-items: center;
}

.drift-memory-final-bond-choice {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    align-content: center;
    gap: 0;
    padding: 10px;
    border: 1px solid rgba(202, 168, 83, 0.62);
    background: rgba(5, 12, 22, 0.82);
    color: #ffe4a0;
    cursor: pointer;
}

.drift-memory-final-bond-choice:hover {
    border-color: #ffe194;
    box-shadow: 0 0 16px rgba(255, 210, 112, 0.36);
    filter: brightness(1.08);
}

.drift-memory-final-bond-card {
    width: clamp(91px, 8.9vw, 122px);
    height: clamp(132px, 12.8vw, 178px);
    display: grid;
    place-items: start;
    overflow: hidden;
    pointer-events: none;
}

.drift-memory-final-bond-card .card {
    width: 236px !important;
    height: 344px !important;
    transform: scale(0.5) !important;
    transform-origin: top left !important;
    pointer-events: none;
    margin: 0 !important;
}

.drift-memory-final-bond-panel .drift-memory-modal-actions {
    justify-content: center;
    margin-top: 6px;
}

.drift-memory-final-bond-panel #driftMemoryFinalBondSkipBtn {
    margin: 0 auto;
    width: min(360px, 100%);
    min-height: 0;
    aspect-ratio: 2172 / 724;
    padding: 0 34px;
    background: transparent var(--drift-button-normal-long) center / 100% 100% no-repeat;
    font-size: calc(13px * var(--drift-font-scale));
    line-height: 1.1;
    white-space: normal;
}

.drift-memory-final-bond-panel #driftMemoryFinalBondSkipBtn:hover {
    background-image: var(--drift-button-hover-long);
}

.drift-memory-final-bond-confirm {
    position: fixed;
    inset: 0;
    z-index: 30200;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.54);
}

.drift-memory-final-bond-confirm-panel {
    width: min(980px, calc(100vw - 48px));
    box-sizing: border-box;
    padding: 28px 34px 26px;
    border: 1px solid rgba(224, 178, 92, 0.72);
    background: rgba(4, 10, 17, 0.96);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 232, 170, 0.08);
    text-align: center;
    position: relative;
    z-index: 30201;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    align-items: center;
    gap: 30px;
}

.drift-memory-final-bond-confirm-card {
    width: 283px;
    height: 413px;
    display: grid;
    place-items: start;
    overflow: hidden;
    justify-self: center;
    pointer-events: none;
}

.drift-memory-final-bond-confirm-card .card {
    width: 236px !important;
    height: 344px !important;
    transform: scale(1.2) !important;
    transform-origin: top left !important;
    pointer-events: none;
    margin: 0 !important;
}

.drift-memory-final-bond-confirm-content {
    min-width: 0;
    display: grid;
    align-content: center;
}

.drift-memory-final-bond-confirm-panel .drift-memory-modal-title {
    margin: 0;
    font-size: calc(24px * var(--drift-font-scale));
}

.drift-memory-final-bond-confirm-panel .drift-memory-modal-actions {
    grid-template-columns: 1fr;
    justify-items: center;
}

.drift-memory-final-bond-confirm-panel .drift-memory-modal-primary,
.drift-memory-final-bond-confirm-panel .drift-memory-modal-secondary {
    width: min(360px, 100%);
    min-height: 0;
    aspect-ratio: 2172 / 724;
    padding: 0 34px;
    background: transparent var(--drift-button-normal-long) center / 100% 100% no-repeat;
}

.drift-memory-final-bond-confirm-panel .drift-memory-modal-primary:hover,
.drift-memory-final-bond-confirm-panel .drift-memory-modal-secondary:hover {
    background-image: var(--drift-button-hover-long);
}

@media (max-width: 700px) {
    .drift-memory-final-bond-confirm-panel {
        width: min(620px, calc(100vw - 32px));
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .drift-memory-final-bond-confirm-card {
        width: 189px;
        height: 275px;
    }

    .drift-memory-final-bond-confirm-card .card {
        transform: scale(0.8) !important;
    }
}

@media (max-width: 900px) {
    .drift-memory-modal-panel.drift-memory-final-bond-panel {
        width: min(calc(100vw - 24px), calc((100vh - 24px) * 1342 / 904));
        padding: 34px 40px 28px;
        gap: 6px;
    }

    .drift-memory-final-bond-panel .drift-memory-modal-title {
        margin-top: 92px;
        font-size: calc(38px * var(--drift-font-scale, 1.25));
        line-height: 1.1;
    }

    .drift-memory-final-bond-panel .drift-memory-modal-body {
        font-size: calc(17px * var(--drift-font-scale, 1.25));
        line-height: 1.3;
        max-width: min(980px, 88%);
        white-space: normal;
    }

    .drift-memory-final-bond-grid {
        gap: 8px;
    }

    .drift-memory-final-bond-choice {
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
        padding: 6px;
    }

    .drift-memory-final-bond-card {
        width: 81px;
        height: 118px;
    }

    .drift-memory-final-bond-card .card {
        transform: scale(0.34) !important;
    }

}

.drift-memory-final-power-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin: 6px 0 10px;
    padding: 2px 8px 2px 0;
}

.drift-memory-final-power-choice {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 136px;
    padding: 12px;
    border: 1px solid rgba(193, 143, 76, 0.38);
    background: rgba(4, 9, 14, 0.78);
    color: #ead8af;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}

.drift-memory-final-power-choice.selected {
    border-color: rgba(255, 218, 126, 0.95);
    box-shadow: 0 0 14px rgba(255, 196, 64, 0.38), inset 0 0 0 1px rgba(255, 232, 160, 0.18);
}

.drift-memory-final-power-thumb {
    width: 72px;
    height: 72px;
    border-radius: 6px;
    border: 1px solid rgba(220, 180, 90, 0.68);
    background: rgba(0, 0, 0, 0.35) center / cover no-repeat;
}

.drift-memory-final-power-text {
    display: grid;
    gap: 5px;
    min-width: 0;
    align-content: start;
    overflow: hidden;
}

.drift-memory-final-power-text strong {
    color: #f1ca84;
    font-size: calc(15px * var(--drift-font-scale));
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.drift-memory-final-power-text small {
    color: #d7c7aa;
    font-size: calc(12px * var(--drift-font-scale));
    line-height: 1.32;
    display: block;
    max-height: calc(12px * var(--drift-font-scale) * 1.32 * 3);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.drift-memory-final-power-tooltip {
    position: fixed;
    z-index: 30150;
    max-width: min(520px, calc(100vw - 48px));
    padding: 12px 14px;
    border: 1px solid rgba(255, 215, 126, 0.72);
    border-radius: 6px;
    background: rgba(3, 7, 12, 0.96);
    color: #f2dfb8;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    pointer-events: none;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.62), 0 0 18px rgba(255, 196, 72, 0.18);
}

.drift-memory-final-power-tooltip.hidden {
    display: none;
}

.drift-memory-final-flavor-editor {
    display: grid;
    gap: 7px;
    min-height: 0;
    color: #f1ca84;
    font-size: calc(15px * var(--drift-font-scale));
    font-weight: 800;
}

.drift-memory-final-flavor-editor textarea {
    width: 100%;
    min-height: 82px;
    max-height: 120px;
    resize: vertical;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background: rgba(2, 6, 10, 0.88);
    color: #f1e0bd;
    font: inherit;
    font-weight: 700;
    line-height: 1.45;
    outline: none;
}

.drift-memory-final-flavor-editor textarea:focus {
    border-color: rgba(255, 218, 126, 0.95);
    box-shadow: 0 0 12px rgba(255, 196, 64, 0.25);
}

.drift-memory-final-registration-panel .drift-memory-modal-actions {
    grid-template-columns: repeat(2, minmax(260px, 360px));
    justify-content: center;
    gap: 14px 18px;
    margin-top: 2px;
}

.drift-memory-final-registration-panel .drift-memory-modal-primary {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
}

.drift-memory-final-registration-panel .drift-memory-registration-playable-wrap {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.drift-memory-final-registration-panel .drift-memory-modal-actions.playable-only .drift-memory-registration-playable-wrap {
    grid-column: 1 / -1;
    width: min(360px, 100%);
    justify-self: center;
}

.drift-memory-registration-help {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    align-self: center;
    border: 1px solid rgba(234, 183, 86, 0.72);
    border-radius: 50%;
    color: #f6d18a;
    background: rgba(8, 14, 22, 0.88);
    font-family: Cinzel, serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
    cursor: help;
    box-shadow: 0 0 10px rgba(238, 172, 55, 0.18);
}

.drift-memory-registration-help::after {
    content: attr(data-help);
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 3;
    width: min(380px, calc(100vw - 48px));
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid rgba(232, 181, 80, 0.72);
    border-radius: 4px;
    color: #f1dfb9;
    background: rgba(4, 9, 15, 0.96);
    font-family: "Noto Sans JP", sans-serif;
    font-size: calc(13px * var(--drift-font-scale));
    font-weight: 700;
    line-height: 1.55;
    white-space: normal;
    text-align: left;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.drift-memory-registration-help:hover::after,
.drift-memory-registration-help:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.drift-memory-final-registration-panel .drift-memory-modal-secondary {
    grid-column: 1 / -1;
    width: min(280px, 100%);
    min-height: 46px;
    justify-self: center;
    font-size: calc(16px * var(--drift-font-scale));
}

.drift-memory-final-title-transition {
    position: fixed;
    inset: 0;
    z-index: 60000;
    pointer-events: auto;
    opacity: 0;
    background: #000;
    transition: opacity 5000ms ease-in-out;
}

.drift-memory-final-title-transition.hidden {
    display: none;
}

.drift-memory-event-modal,
.drift-memory-deck-modal {
    z-index: 9000;
    pointer-events: auto;
}

body.fixed-canvas-mode .drift-memory-profile-panel {
    min-height: 790px;
    max-height: 926px;
}

body.fixed-canvas-mode .drift-memory-side-panel {
    max-height: 964px;
}

body.fixed-canvas-mode .drift-memory-center {
    max-height: 954px;
}

@media (max-width: 1600px), (max-height: 900px) {
    .drift-memory-sl-fullscreen {
        overflow: auto;
    }

    .drift-memory-sl-header {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 8px 14px 6px;
        background: linear-gradient(180deg, rgba(5, 10, 18, 0.98), rgba(5, 10, 18, 0.9));
    }

    .drift-memory-sl-title {
        font-size: 18px;
    }

    .drift-memory-sl-desc {
        font-size: 12px;
        line-height: 1.35;
    }

    .drift-memory-sl-talent-summary {
        max-width: 320px;
        min-height: 34px;
        padding: 3px 6px;
    }

    .drift-memory-sl-talent-chip {
        font-size: 14px;
    }

    .drift-memory-sl-talent-chip {
        max-width: 128px;
    }

    .drift-memory-companion-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-content: start;
        gap: 6px;
        padding: 6px 8px 12px;
        overflow: visible;
    }

    .drift-memory-companion-cell {
        min-height: 0;
        overflow: hidden;
    }

    .drift-memory-companion-cell-card {
        height: 132px;
        max-height: 132px;
        padding: 3px 6px 0;
        overflow: visible;
    }

    .drift-memory-companion-cell-card .card {
        transform: scale(0.37) !important;
        transform-origin: top center !important;
        margin-bottom: calc((344px * 0.37) - 344px);
    }

    .drift-memory-companion-cell-footer {
        flex: 0 0 auto;
        padding: 2px 6px 5px;
        gap: 1px;
    }

    .drift-memory-companion-cell-training-row {
        grid-template-columns: minmax(84px, 1fr) minmax(82px, 104px);
        grid-template-rows: auto auto auto;
        row-gap: 2px;
    }

    .companion-trait-bars {
        gap: 2px;
        margin-top: 2px;
    }

    .companion-trait-bar-row {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 3px;
    }

    .companion-trait-label {
        font-size: 13px;
    }

    .companion-bond-display {
        width: auto;
    }

    .companion-bond-main {
        width: 92px;
        min-height: 28px;
        transform: none;
    }

    .companion-bond-icon {
        width: 30px;
        height: 30px;
    }

    .companion-bond-lv {
        font-size: 20px;
    }

    .companion-breakthrough-btn {
        width: 100%;
        min-height: 22px;
        margin-top: 4px;
        padding: 2px 6px;
        font-size: 11px;
    }

    .drift-memory-companion-cell-training-right {
        grid-column: 1 / -1;
        grid-row: 3;
        padding-top: 0;
    }

    .drift-memory-companion-focus-select {
        margin-top: 1px;
        padding: 3px 6px;
        font-size: 12px;
    }

    .drift-memory-companion-cell-training-cmd {
        font-size: 13px;
    }

    .drift-memory-companion-cell-facility {
        font-size: 11px;
    }

    .companion-trait-val {
        font-size: 15px;
    }

    .companion-trait-val-compact {
        font-size: 13px;
    }
}

.drift-memory-modal-panel {
    width: min(520px, 92vw);
    max-height: calc(100dvh - 24px);
    padding: 22px;
    box-sizing: border-box;
    overflow: auto;
}

.drift-memory-modal-title {
    color: #f1ca84;
    font-size: 26px;
    font-weight: 800;
}

.drift-memory-modal-body,
.drift-memory-modal-note {
    margin-top: 10px;
    color: #e1cfaa;
    line-height: 1.55;
}

.drift-memory-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 18px;
}

.drift-memory-modal-primary {
    grid-column: 1 / -1;
    width: min(100%, 360px);
    min-height: 0;
    aspect-ratio: 2172 / 724;
    justify-self: center;
    display: grid;
    place-items: center;
    background-image: var(--drift-button-normal-long);
}

.drift-memory-modal-primary:hover {
    background-image: var(--drift-button-hover-long);
}

.drift-memory-result-actions.has-final-bond .drift-memory-result-primary {
    grid-column: auto;
    width: min(100%, 230px);
    aspect-ratio: 1110 / 404;
    padding: 0 20px;
    font-size: calc(18px * var(--drift-font-scale));
    background-image: var(--drift-button-normal);
}

.drift-memory-result-actions.has-final-bond .drift-memory-result-primary:hover {
    background-image: var(--drift-button-hover);
}

.drift-memory-result-actions.has-final-bond #driftMemoryFinalBondOpenBtn {
    grid-column: 1;
    justify-self: end;
}

.drift-memory-result-actions.has-final-bond #driftMemoryCardizeBtn {
    grid-column: 2;
    justify-self: start;
}

.drift-memory-result-secondary {
    width: min(100%, 230px);
    min-height: 0;
    aspect-ratio: 1110 / 404;
    justify-self: center;
    display: grid;
    place-items: center;
    padding: 0 20px;
    font-size: calc(16px * var(--drift-font-scale));
    background-image: var(--drift-button-normal);
}

.drift-memory-result-secondary:hover {
    background-image: var(--drift-button-hover);
}

.drift-memory-result-confirm-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: auto;
}

.drift-memory-result-confirm-panel {
    width: min(520px, calc(100vw - 44px));
    padding: 14px 16px 16px;
    border: 1px solid rgba(241, 202, 132, 0.42);
    background: rgba(4, 9, 16, 0.78);
    box-shadow:
        inset 0 0 0 1px rgba(255, 230, 170, 0.06),
        0 18px 42px rgba(0, 0, 0, 0.62);
}

.drift-memory-result-confirm-panel.danger {
    border-color: rgba(220, 80, 72, 0.62);
    background: linear-gradient(180deg, rgba(46, 12, 12, 0.78), rgba(7, 9, 16, 0.84));
}

.drift-memory-result-confirm-text {
    color: #f0dfbd;
    font-size: calc(15px * var(--drift-font-scale));
    line-height: 1.6;
    text-align: center;
    font-weight: 700;
}

.drift-memory-result-confirm-panel.danger .drift-memory-result-confirm-text {
    color: #ffd2bd;
}

.drift-memory-result-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.drift-memory-result-confirm-actions .drift-memory-modal-primary,
.drift-memory-result-confirm-actions .drift-memory-modal-secondary {
    grid-column: auto;
    width: min(100%, 210px);
    aspect-ratio: 1110 / 404;
    justify-self: center;
    padding: 0 20px;
    background-image: var(--drift-button-normal);
}

.drift-memory-result-confirm-actions .drift-memory-modal-primary:hover,
.drift-memory-result-confirm-actions .drift-memory-modal-secondary:hover {
    background-image: var(--drift-button-hover);
}

.drift-memory-ending-panel {
    width: min(760px, 92vw);
    text-align: center;
}

.drift-memory-ending-image {
    display: block;
    width: 100%;
    max-height: 46vh;
    object-fit: cover;
    border: 1px solid rgba(193, 143, 76, 0.72);
    margin-bottom: 16px;
}

.drift-memory-event-panel {
    text-align: center;
}

.drift-memory-event-actions {
    grid-template-columns: 1fr;
}

.drift-memory-event-result {
    margin: 10px auto 0;
    padding: 8px 16px;
    border-top: 1px solid rgba(193, 143, 76, 0.35);
    border-radius: 0 0 4px 4px;
    color: #f1ca84;
    font-size: calc(14px * var(--drift-font-scale));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.drift-memory-inheritance-result-panel {
    width: min(860px, 94vw);
    text-align: center;
}

.drift-memory-inheritance-result-badge {
    display: block;
    width: min(1040px, calc(94vw - 32px));
    max-height: 230px;
    margin: -16px auto -22px;
    object-fit: contain;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}

.drift-memory-inheritance-result-cards {
    display: grid;
    grid-template-columns: minmax(0, 236px) 72px minmax(0, 236px);
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 6px;
}

.drift-memory-inheritance-result-name {
    min-height: 30px;
    color: #ffe5a8;
    font-size: calc(17px * var(--drift-font-scale));
    font-weight: 800;
    line-height: 1.25;
}

.drift-memory-inheritance-result-card-host {
    width: 236px;
    height: 344px;
    margin-top: 8px;
    overflow: hidden;
}

.drift-memory-inheritance-result-arrow {
    color: #f1ca84;
    font-size: calc(42px * var(--drift-font-scale));
    font-weight: 900;
}

.drift-memory-inheritance-result-lines {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    color: #e1cfaa;
    font-size: calc(17px * var(--drift-font-scale));
    line-height: 1.45;
}

.drift-memory-battle-recruit-panel {
    width: min(720px, 94vw);
    text-align: center;
}

.drift-memory-battle-recruit-card-host {
    width: 236px;
    height: 344px;
    margin: 16px auto 0;
    overflow: hidden;
}

.drift-memory-battle-recruit-note {
    margin-top: 12px;
    color: rgba(232, 220, 200, 0.76);
    font-size: calc(14px * var(--drift-font-scale));
    line-height: 1.45;
}

.drift-memory-deck-editor-panel {
    width: min(1180px, 94vw);
    max-height: min(760px, 86vh);
    padding: 18px;
    border: 1px solid rgba(193, 143, 76, 0.62);
    background: linear-gradient(180deg, rgba(10, 15, 19, 0.94), rgba(7, 10, 13, 0.92));
    box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.1), 0 20px 44px rgba(0, 0, 0, 0.48);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
}

.drift-memory-deck-editor-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
}

.drift-memory-deck-editor-info {
    margin-top: 6px;
    color: #d8caa8;
    font-size: calc(13px * var(--drift-font-scale));
}

.drift-memory-deck-editor-list {
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-right: 6px;
}

.drift-memory-deck-editor-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 112px;
    padding: 8px 10px;
    border: 1px solid rgba(83, 126, 158, 0.42);
    color: #e9eef5;
    background: rgba(8, 14, 22, 0.78);
    cursor: pointer;
    text-align: left;
}

.drift-memory-deck-editor-card.active {
    border-color: rgba(255, 222, 146, 0.78);
    box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.18), 0 0 18px rgba(224, 156, 74, 0.22);
}

.drift-memory-deck-editor-thumb {
    width: 64px;
    height: 94px;
    overflow: hidden;
}

.drift-memory-deck-editor-thumb .card {
    transform: scale(0.26);
    transform-origin: top left;
    pointer-events: none;
}

.drift-memory-screen.drift-memory-raid-alert::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, transparent 0 36%, rgba(130, 0, 0, 0.34) 72%, rgba(0, 0, 0, 0.76) 100%),
        linear-gradient(115deg, rgba(130, 0, 0, 0.22), transparent 46%, rgba(0, 0, 0, 0.24));
    mix-blend-mode: screen;
    animation: driftMemoryRaidAlertPulse 900ms ease-in-out infinite alternate;
}

.drift-memory-raid-announcement {
    position: fixed;
    inset: 0;
    z-index: 2750;
    display: grid;
    place-items: center;
    color: #ffd9d0;
    background:
        radial-gradient(circle at 50% 45%, rgba(150, 0, 0, 0.38), rgba(0, 0, 0, 0.92) 70%),
        linear-gradient(135deg, rgba(74, 0, 0, 0.68), rgba(0, 0, 0, 0.86));
    font-family: 'Cinzel', 'Noto Serif JP', serif;
    font-size: clamp(2.4rem, 8vw, 6rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-shadow:
        0 0 18px rgba(255, 38, 38, 0.76),
        0 4px 12px rgba(0, 0, 0, 0.92);
    pointer-events: auto;
    animation: driftMemoryRaidAnnouncement 1320ms ease both;
}

.drift-memory-raid-announcement.leaving {
    opacity: 0;
    transition: opacity 420ms ease;
}

.drift-memory-defeat-collapse {
    position: fixed;
    inset: 0;
    z-index: 2800;
    display: grid;
    place-items: center;
    padding: 8vw;
    color: #f9d7cd;
    background:
        radial-gradient(circle at 50% 40%, rgba(138, 0, 0, 0.48), rgba(18, 0, 0, 0.88) 58%, rgba(0, 0, 0, 0.98) 100%),
        linear-gradient(160deg, rgba(0, 0, 0, 0.92), rgba(116, 0, 0, 0.42), rgba(0, 0, 0, 0.96));
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(1.45rem, 4.2vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-shadow:
        0 0 18px rgba(255, 36, 36, 0.62),
        0 4px 14px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    animation: driftMemoryDefeatCollapse 2800ms ease both;
}

.drift-memory-defeat-collapse.fade-out {
    opacity: 0;
    transition: opacity 1600ms ease;
}

.drift-memory-battle-return-transition {
    position: fixed;
    inset: 0;
    z-index: 2790;
    pointer-events: none;
    background: #000;
    opacity: 0;
}

.drift-memory-battle-return-transition.hidden {
    display: none;
}

.drift-memory-battle-return-transition.is-covering {
    opacity: 1;
}

.drift-memory-battle-return-transition.is-fading-out {
    animation: driftMemoryBattleReturnFadeOut 1500ms ease-in forwards;
}

.drift-memory-battle-return-transition.is-fading-in {
    opacity: 1;
    animation: driftMemoryBattleReturnFadeIn 1000ms ease-out forwards;
}

@keyframes driftMemoryBattleReturnFadeOut {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes driftMemoryBattleReturnFadeIn {
    from { opacity: 1; }
    to { opacity: 0; }
}

.continue-return-transition {
    position: fixed;
    inset: 0;
    z-index: 4200;
    pointer-events: auto;
    overflow: hidden;
    background: #020604;
    opacity: 1;
    isolation: isolate;
}

.continue-return-transition.hidden {
    display: none;
}

.continue-return-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(87, 255, 87, 0.08), rgba(0, 0, 0, 0.72) 32%, rgba(0, 0, 0, 0.98) 72%),
        #010302;
}

.continue-return-galaxy {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 10px rgba(71, 255, 94, 0.52));
}

.continue-return-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    background: #efff9a;
    box-shadow:
        0 0 18px rgba(227, 255, 139, 0.98),
        0 0 62px rgba(84, 255, 91, 0.9),
        0 0 150px rgba(39, 210, 81, 0.52);
    mix-blend-mode: screen;
}

.continue-return-transition.is-gathering .continue-return-veil { animation: continueReturnVeilIn 760ms ease both; }
.continue-return-transition.is-converging .continue-return-veil { opacity: 1; }
.continue-return-transition.is-converging .continue-return-core { animation: continueReturnCoreFlash 620ms ease both; }
@property --continue-hole {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --continue-feather {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%;
}

.continue-return-transition.is-revealing {
    --continue-hole: 0%;
    --continue-feather: 3%;
    -webkit-mask-image:
        radial-gradient(circle at 50% 50%,
            transparent var(--continue-hole),
            rgba(0, 0, 0, 0.18) calc(var(--continue-hole) + var(--continue-feather) * 0.35),
            rgba(0, 0, 0, 0.72) calc(var(--continue-hole) + var(--continue-feather) * 0.72),
            #000 calc(var(--continue-hole) + var(--continue-feather)));
    mask-image:
        radial-gradient(circle at 50% 50%,
            transparent var(--continue-hole),
            rgba(0, 0, 0, 0.18) calc(var(--continue-hole) + var(--continue-feather) * 0.35),
            rgba(0, 0, 0, 0.72) calc(var(--continue-hole) + var(--continue-feather) * 0.72),
            #000 calc(var(--continue-hole) + var(--continue-feather)));
    animation: none;
}

.continue-return-transition.is-revealing::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(184, 255, 99, 0.46) 0%,
            rgba(78, 255, 92, 0.2) calc(var(--continue-hole) * 0.72),
            rgba(61, 255, 92, 0.08) calc(var(--continue-hole) + 9%),
            transparent calc(var(--continue-hole) + 24%));
    filter: blur(10px);
    opacity: 0.42;
    transform: scale(1.08);
}

@keyframes continueReturnVeilIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes continueReturnCoreFlash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    45% { opacity: 1; transform: translate(-50%, -50%) scale(2.4); }
    100% { opacity: 0.95; transform: translate(-50%, -50%) scale(7.2); }
}

@keyframes continueReturnReveal {
    0% { opacity: 1; --continue-hole: 0%; --continue-feather: 4%; }
    18% { opacity: 1; --continue-hole: 10%; --continue-feather: 9%; }
    48% { opacity: 0.96; --continue-hole: 42%; --continue-feather: 18%; }
    78% { opacity: 0.66; --continue-hole: 94%; --continue-feather: 28%; }
    100% { opacity: 0; --continue-hole: 150%; --continue-feather: 36%; }
}

@keyframes continueReturnRevealGlow {
    0% { opacity: 0.85; transform: scale(0.18); }
    44% { opacity: 0.72; transform: scale(0.72); }
    78% { opacity: 0.36; transform: scale(1.18); }
    100% { opacity: 0; transform: scale(1.55); }
}

@media (prefers-reduced-motion: reduce) {
    .continue-return-transition.is-gathering,
    .continue-return-transition.is-converging,
    .continue-return-transition.is-revealing {
        animation: continueReturnReduced 500ms ease both;
    }

    .continue-return-galaxy,
    .continue-return-core {
        display: none;
    }
}

@keyframes continueReturnReduced {
    from { opacity: 0; }
    50% { opacity: 1; }
    to { opacity: 0; }
}

/* ── 漂流者の記憶 チュートリアル ── */
.drift-memory-tutorial-overlay {
    --drift-tutorial-dialog-reserve: 232px;
    --drift-tutorial-face-size: min(840px, calc(100vw - 96px), calc(100vh - var(--drift-tutorial-dialog-reserve)));
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(4, 8, 16, 0.72);
    animation: driftTutorialFadeIn 0.4s ease forwards;
}

.drift-memory-tutorial-overlay.is-guide {
    z-index: 8800;
    pointer-events: none;
    background: transparent;
}

.drift-memory-tutorial-overlay.is-guide .drift-memory-tutorial-bg {
    display: none;
}

.drift-memory-tutorial-overlay.is-guide .drift-memory-tutorial-dialog,
.drift-memory-tutorial-overlay.is-guide .drift-memory-tutorial-choices,
.drift-memory-tutorial-overlay.is-guide .drift-memory-tutorial-btn {
    pointer-events: auto;
}

.drift-memory-tutorial-overlay.is-guide .drift-memory-tutorial-face {
    display: none !important;
}

@keyframes driftTutorialFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drift-memory-tutorial-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 80%, rgba(12, 24, 48, 0.55), transparent 70%);
    pointer-events: none;
}

.drift-memory-tutorial-face-wrap {
    flex: 0 0 var(--drift-tutorial-face-size);
    min-height: 0;
    height: var(--drift-tutorial-face-size);
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.drift-memory-tutorial-face {
    display: block;
    width: var(--drift-tutorial-face-size);
    height: var(--drift-tutorial-face-size);
    box-sizing: border-box;
    border: 2px solid rgba(226, 178, 76, 0.88);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(20, 15, 6, 0.28), rgba(4, 8, 14, 0.32));
    object-fit: cover;
    object-position: center;
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 168, 0.22),
        0 0 0 1px rgba(80, 48, 12, 0.78),
        0 8px 24px rgba(0, 0, 0, 0.72);
    filter: drop-shadow(0 0 10px rgba(220, 160, 48, 0.22));
}

.drift-memory-tutorial-dialog-wrap {
    flex: 0 0 var(--drift-tutorial-dialog-reserve);
    height: var(--drift-tutorial-dialog-reserve);
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    padding-bottom: 28px;
}

.drift-memory-tutorial-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 94vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 20px 24px 18px;
    background:
        linear-gradient(135deg, rgba(10, 20, 36, 0.97), rgba(6, 12, 24, 0.98));
    border: 1px solid rgba(193, 143, 76, 0.42);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 220, 140, 0.06);
    box-sizing: border-box;
    cursor: pointer;
}

.drift-memory-tutorial-dialog.is-narration {
    text-align: center;
    border-color: rgba(160, 180, 220, 0.32);
    background: linear-gradient(135deg, rgba(8, 16, 32, 0.96), rgba(4, 10, 22, 0.97));
}

.drift-memory-tutorial-speaker {
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    font-weight: 700;
    color: #f1ca84;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
    text-shadow: 0 0 10px rgba(240, 180, 80, 0.45);
}

.drift-memory-tutorial-text {
    font-size: clamp(0.92rem, 2.4vw, 1.1rem);
    color: #e8dcc8;
    line-height: 1.75;
    letter-spacing: 0.04em;
    flex: 1;
    min-height: 2.6em;
    overflow-y: auto;
    padding-bottom: 46px;
    box-sizing: border-box;
}

.drift-memory-tutorial-choices {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: default;
}

.drift-memory-tutorial-choice-label {
    font-size: clamp(0.82rem, 2vw, 0.96rem);
    color: #a0b0c8;
    text-align: center;
    letter-spacing: 0.04em;
}

.drift-memory-tutorial-choice-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.drift-memory-tutorial-btn {
    padding: 8px 28px;
    border: 1px solid rgba(193, 143, 76, 0.42);
    background: rgba(8, 14, 24, 0.84);
    color: #d0b878;
    font-size: clamp(0.86rem, 2.2vw, 1rem);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.06em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.drift-memory-tutorial-btn:hover {
    background: rgba(180, 120, 40, 0.28);
    border-color: #f2b864;
    color: #f8d890;
}

.drift-memory-tutorial-btn.primary {
    border-color: rgba(193, 143, 76, 0.72);
    background: rgba(120, 80, 20, 0.38);
    color: #f8e090;
}

.drift-memory-tutorial-next-btn {
    display: block;
    position: absolute;
    right: 24px;
    bottom: 18px;
    margin: 0;
}

.drift-memory-tutorial-wait-note {
    margin-top: 12px;
    color: rgba(232, 220, 200, 0.68);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: right;
    letter-spacing: 0.04em;
}

.drift-memory-tutorial-highlight {
    position: relative;
    z-index: 8900 !important;
    outline: 3px solid rgba(255, 64, 64, 0.98);
    outline-offset: 5px;
    box-shadow:
        0 0 0 2px rgba(255, 210, 210, 0.32),
        0 0 28px rgba(255, 48, 48, 0.92),
        0 0 70px rgba(255, 32, 32, 0.44) !important;
    animation: driftTutorialHighlightPulse 1.05s ease-in-out infinite;
}

@keyframes driftTutorialHighlightPulse {
    0%, 100% {
        outline-color: rgba(255, 64, 64, 0.84);
        filter: brightness(1);
    }
    50% {
        outline-color: rgba(255, 136, 136, 1);
        filter: brightness(1.16);
    }
}

.drift-memory-bond-overlay .drift-memory-tutorial-bg {
    background: radial-gradient(ellipse at 50% 80%, rgba(40, 28, 8, 0.65), transparent 70%);
}

.drift-memory-bond-overlay.is-final-ending {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.72)),
        var(--drift-final-ending-bg, url("drift_memory/intro/ending.png")) center / cover no-repeat;
}

.drift-memory-bond-overlay.is-final-ending.is-demon-ending {
    --drift-final-ending-bg: url("drift_memory/intro/demon/ending.png");
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.72)),
        var(--drift-final-ending-bg) center / cover no-repeat;
}

.drift-memory-bond-overlay.is-final-ending .drift-memory-tutorial-bg {
    background: radial-gradient(ellipse at 50% 82%, rgba(45, 32, 12, 0.42), transparent 68%);
}

.drift-memory-bond-overlay .drift-memory-tutorial-dialog-wrap {
    flex: 0 0 var(--drift-tutorial-dialog-reserve);
    height: var(--drift-tutorial-dialog-reserve);
    box-sizing: border-box;
    align-items: flex-start;
}

.drift-memory-bond-overlay .drift-memory-tutorial-dialog {
    width: min(760px, calc(100vw - 48px));
    height: 100%;
    padding-bottom: 18px;
}

.drift-memory-bond-overlay .drift-memory-tutorial-dialog.is-narration {
    border-color: rgba(240, 180, 60, 0.75);
    background: linear-gradient(135deg, rgba(10, 20, 36, 0.97), rgba(6, 12, 24, 0.98));
}

.drift-memory-tutorial-dialog.is-bond {
    border-color: rgba(240, 180, 60, 0.75);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.72), 0 0 24px rgba(220, 160, 40, 0.22), inset 0 0 0 1px rgba(255, 220, 140, 0.12);
    animation: driftBondDialogIn 0.4s ease forwards;
}

@keyframes driftBondDialogIn {
    from { opacity: 0; transform: translateY(8px); box-shadow: 0 0 60px rgba(220, 160, 40, 0.5); }
    to   { opacity: 1; transform: translateY(0);  box-shadow: 0 0 40px rgba(0,0,0,0.72), 0 0 24px rgba(220,160,40,0.22); }
}

.drift-memory-tutorial-dialog.is-bond .drift-memory-tutorial-text {
    color: #f8e8c0;
    text-align: center;
    font-size: clamp(1rem, 2.6vw, 1.18rem);
    letter-spacing: 0.06em;
}

.drift-memory-bond-key-help {
    position: absolute;
    left: 16px;
    bottom: 16px;
    color: rgba(232, 220, 200, 0.62);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    pointer-events: none;
}

.drift-memory-bond-overlay .drift-memory-tutorial-next-btn {
    flex: 0 0 auto;
    position: absolute;
    right: 24px;
    bottom: 18px;
    margin-top: 0;
}

.drift-memory-bond-skip-confirm {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.34);
}

.drift-memory-bond-skip-panel {
    width: min(360px, 86vw);
    padding: 24px 28px 22px;
    border: 1px solid rgba(240, 180, 60, 0.76);
    background: linear-gradient(135deg, rgba(10, 20, 36, 0.98), rgba(5, 10, 20, 0.99));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 220, 140, 0.1);
}

.drift-memory-bond-skip-title {
    color: #f8e8c0;
    font-size: 1.08rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}

.drift-memory-bond-skip-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.drift-memory-counterattack-confirm {
    z-index: 9999;
    background: rgba(0, 0, 0, 0.58);
}

.drift-memory-counterattack-confirm-panel {
    width: min(980px, calc(100vw - 80px));
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 70px 88px 66px;
    border: none;
    /* Previous generated-style frame: transparent url("drift_memory/ui/parts/shop_window.png") center / 100% 100% no-repeat; */
    background: transparent url("material/table.png") center / 100% 100% no-repeat;
    box-shadow: none;
}

.drift-memory-counterattack-confirm-panel .drift-memory-bond-skip-title {
    margin: 0;
    color: #ffe6a6;
    font-size: calc(42px * var(--drift-font-scale));
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.94);
}

.drift-memory-counterattack-confirm-body {
    max-width: 760px;
    margin: 0 auto;
    color: #f0dfbd;
    font-size: calc(25px * var(--drift-font-scale));
    line-height: 1.72;
    text-align: center;
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.92);
}

.drift-memory-counterattack-confirm-body span {
    color: #f1ca84;
}

.drift-memory-counterattack-confirm-panel .drift-memory-bond-skip-actions {
    gap: 28px;
}

.drift-memory-counterattack-confirm-panel .drift-memory-tutorial-btn {
    width: min(260px, 30vw);
    aspect-ratio: 1110 / 404;
    min-width: 0;
    min-height: 0;
    padding: 0 28px;
    border: none;
    background: transparent url("drift_memory/ui/parts/button_normal.png") center / 100% 100% no-repeat;
    color: #ffe7ad;
    font-size: calc(22px * var(--drift-font-scale));
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
    box-shadow: none;
}

.drift-memory-counterattack-confirm-panel .drift-memory-tutorial-btn.primary {
    border: none;
    background: transparent url("drift_memory/ui/parts/button_normal.png") center / 100% 100% no-repeat;
    color: #ffe7ad;
}

.drift-memory-counterattack-confirm-panel .drift-memory-tutorial-btn:hover,
.drift-memory-counterattack-confirm-panel .drift-memory-tutorial-btn.primary:hover {
    border: none;
    background: transparent url("drift_memory/ui/parts/button_hover.png") center / 100% 100% no-repeat;
    color: #fff1c8;
    filter: brightness(1.06);
}

@keyframes driftMemoryRaidAnnouncement {
    0% {
        opacity: 0;
        transform: scale(1.08);
        filter: brightness(1.8);
    }
    24% {
        opacity: 1;
        transform: scale(1);
    }
    52% {
        filter: brightness(0.75);
    }
    72% {
        filter: brightness(1.45);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes driftMemoryDefeatCollapse {
    0% {
        opacity: 0;
        filter: brightness(1.8);
    }
    18% {
        opacity: 1;
    }
    40% {
        filter: brightness(0.72);
    }
    64% {
        filter: brightness(1.34);
    }
    100% {
        opacity: 1;
        filter: brightness(0.88);
    }
}

.drift-memory-deck-editor-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.drift-memory-deck-editor-main strong {
    color: #f6d698;
    font-size: calc(15px * var(--drift-font-scale));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drift-memory-deck-editor-main span,
.drift-memory-deck-editor-state {
    color: #d8caa8;
    font-size: calc(12px * var(--drift-font-scale));
}

.drift-memory-deck-editor-state {
    min-width: 48px;
    text-align: center;
    color: #9fe48f;
}

.drift-memory-character-deck-panel {
    width: min(1900px, 99vw);
    height: min(1060px, 96vh);
    max-height: 96vh;
    display: flex;
}

.drift-memory-deck-editor-host {
    flex: 1;
    min-height: 0;
}

.drift-memory-deck-builder {
    --character-deck-card-node-scale: 0.52;
    --character-owned-card-node-scale: 0.47;
    --character-deck-card-slot-height: calc(344px * 0.52 + 6px);
    --character-deck-card-slot-width: calc(236px * 0.52 + 4px);
    --character-owned-card-slot-height: calc(344px * 0.47 + 6px);
    --character-owned-card-slot-width: calc(236px * 0.47 + 6px);
    grid-template-columns: minmax(330px, 0.92fr) minmax(760px, 1.58fr) minmax(480px, 1.16fr);
}

.drift-memory-deck-builder .character-deck-pane {
    min-height: 0;
}

.drift-memory-current-grid,
.drift-memory-owned-grid {
    align-content: start;
}

.drift-memory-current-grid {
    column-gap: clamp(10px, 1vw, 16px);
    row-gap: 8px;
    justify-content: center;
    padding: 0 10px 0 10px;
}

.drift-memory-character-deck-panel .character-deck-grid-card .card {
    pointer-events: none;
}

.drift-memory-character-deck-panel .character-deck-grid-card .drift-memory-inhabitant-badge {
    display: none;
}

.drift-memory-character-deck-panel .character-deck-detail-card-host .drift-memory-inhabitant-badge {
    display: none;
}

.drift-memory-character-deck-panel .card-village-resident-badge {
    bottom: 112px;
    width: 48px;
    height: 48px;
}

.drift-memory-character-deck-panel .character-deck-grid-card.selected {
    border-color: rgba(118, 173, 236, 0.92);
    box-shadow: 0 0 0 1px rgba(96, 153, 226, 0.55), 0 0 16px rgba(96, 153, 226, 0.24);
}

.drift-memory-character-deck-panel .character-deck-grid-card.is-leader {
    border-color: rgba(255, 224, 116, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 224, 116, 0.42), 0 0 14px rgba(255, 205, 83, 0.22);
}

.drift-memory-leader-badge {
    left: 4px;
    top: 4px;
    font-size: 0.58rem;
    padding: 3px 5px;
}

.drift-memory-current-grid.drag-over,
.drift-memory-owned-grid.drag-over,
.drift-memory-character-deck-panel .character-deck-pane-right.drag-over {
    outline: 2px solid rgba(118, 173, 236, 0.72);
    outline-offset: -4px;
    background: linear-gradient(180deg, rgba(18, 42, 78, 0.42), rgba(5, 10, 22, 0.82));
}

.drift-memory-deck-list-tools {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.drift-memory-deck-actions {
    flex: 0 0 auto;
    padding-top: 6px;
}

.drift-memory-item-list {
    min-height: 0;
    overflow: auto;
}

.drift-memory-fallback-card {
    width: 180px;
    border: 1px solid rgba(193, 143, 76, 0.62);
    background: #101418;
    padding: 10px;
}

.drift-memory-fallback-card-art {
    height: 210px;
    background: center / cover no-repeat;
}

.drift-memory-fallback-card-name {
    margin-bottom: 8px;
    color: #f1ca84;
    font-weight: 800;
}

.drift-memory-fallback-card-stats {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
}

.drift-memory-creator {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    background: #000;
}

.drift-memory-creator.hidden {
    display: none;
}

.drift-memory-creator-backdrop {
    position: absolute;
    inset: 0;
    background: #000;
}

.drift-memory-creator-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 360px minmax(440px, 560px);
    gap: 34px;
    align-items: center;
    padding: 30px 34px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background: linear-gradient(180deg, rgba(9, 12, 15, 0.96), rgba(3, 5, 7, 0.98));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(255, 224, 160, 0.08);
    box-sizing: border-box;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: geometricPrecision;
}

.drift-memory-creator.is-entering .drift-memory-creator-panel {
    animation: driftMemoryCreatorEnter 900ms ease 1500ms forwards;
}

.drift-memory-creator:not(.is-entering) .drift-memory-creator-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.drift-memory-creator.is-starting .drift-memory-creator-panel {
    animation: driftMemoryCreatorStartFade 900ms ease forwards;
}

.drift-memory-creator.is-revealing {
    pointer-events: none;
    animation: driftMemoryCreatorReveal 1000ms ease forwards;
}

.drift-memory-story {
    overflow: hidden;
    place-items: stretch;
}

.drift-memory-story-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.drift-memory-story-layer-next {
    z-index: 2;
}

.drift-memory-story-layer-next.is-wiping-in {
    animation: driftMemoryDiagonalWipeIn 1050ms cubic-bezier(0.72, 0, 0.22, 1) forwards;
}

.drift-memory-story-image,
.drift-memory-story-shade,
.drift-memory-story-panel {
    transition: transform 900ms ease;
}

.drift-memory-story-image {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    opacity: 1;
    transform: scale(1.02);
}

.drift-memory-story-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.74)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 28%, transparent 68%, rgba(0, 0, 0, 0.68));
}

.drift-memory-story-panel {
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 1;
    width: min(920px, calc(100vw - 64px));
    padding: 24px 28px 82px;
    border: 1px solid rgba(193, 143, 76, 0.58);
    background: linear-gradient(180deg, rgba(7, 10, 13, 0.9), rgba(2, 4, 6, 0.94));
    box-shadow: inset 0 0 0 1px rgba(255, 224, 160, 0.09), 0 18px 46px rgba(0, 0, 0, 0.58);
    transform: translateX(-50%);
    cursor: pointer;
}

.drift-memory-story.is-story-entering .drift-memory-story-image,
.drift-memory-story.is-story-entering .drift-memory-story-shade,
.drift-memory-story.is-story-entering .drift-memory-story-panel {
    animation: driftMemoryStoryEnter 900ms ease forwards;
}

.drift-memory-story-title {
    color: #f1ca84;
    font-size: calc(25px * var(--drift-font-scale));
    font-weight: 800;
}

.drift-memory-story-body {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    color: #ead8af;
    font-size: calc(16px * var(--drift-font-scale));
    line-height: 1.65;
}

.drift-memory-story-body p {
    margin: 0;
}

.drift-memory-story-next {
    position: absolute;
    right: 28px;
    bottom: 24px;
    display: block;
    min-width: 180px;
    min-height: 42px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgba(255, 222, 146, 0.72);
    color: #fff3d3;
    background: linear-gradient(180deg, #9e6428, #4e2a12);
    font-size: calc(15px * var(--drift-font-scale));
    font-weight: 800;
    cursor: pointer;
}

.drift-memory-story-next:disabled {
    opacity: 0.6;
    cursor: default;
}

.drift-memory-transition-wipe {
    position: absolute;
    inset: 0;
    z-index: 20;
    background:
        linear-gradient(115deg, rgba(255, 216, 139, 0.24), transparent 42%),
        #000;
    pointer-events: none;
}

.drift-memory-transition-wipe.is-covering {
    animation: driftMemoryDiagonalCover 1050ms cubic-bezier(0.72, 0, 0.22, 1) forwards;
}

.drift-memory-transition-wipe.is-uncovering {
    animation: driftMemoryDiagonalUncover 1050ms cubic-bezier(0.72, 0, 0.22, 1) forwards;
}

.drift-memory-time-transition {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background:
        linear-gradient(115deg, rgba(255, 216, 139, 0.22), transparent 42%),
        #000;
    color: #f7dfaa;
    pointer-events: auto;
}

.drift-memory-time-transition.is-covering {
    animation: driftMemoryDiagonalCover 1050ms cubic-bezier(0.72, 0, 0.22, 1) forwards;
}

.drift-memory-time-transition.is-uncovering {
    animation: driftMemoryDiagonalUncover 1050ms cubic-bezier(0.72, 0, 0.22, 1) forwards;
}

.drift-memory-time-transition-text {
    display: grid;
    gap: 8px;
    text-align: center;
    letter-spacing: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88);
}

.drift-memory-time-transition-text span {
    color: #d7c49a;
    font-size: calc(16px * var(--drift-font-scale));
}

.drift-memory-time-transition-text strong {
    color: #fff1c8;
    font-size: calc(34px * var(--drift-font-scale));
}

.drift-memory-entry-transition {
    position: fixed;
    inset: 0;
    z-index: 18000;
    display: grid;
    place-items: center;
    background:
        linear-gradient(115deg, rgba(255, 216, 139, 0.16), transparent 44%),
        #000;
    color: #f4e3ad;
    pointer-events: auto;
}

.drift-memory-entry-transition.hidden {
    display: none;
}

.drift-memory-entry-transition.is-revealing {
    animation: driftMemoryDiagonalUncover 1050ms cubic-bezier(0.72, 0, 0.22, 1) forwards;
}

.drift-memory-entry-loading {
    min-width: min(360px, calc(100vw - 48px));
    display: grid;
    justify-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.drift-memory-entry-transition.is-loading .drift-memory-entry-loading {
    opacity: 1;
    transform: translateY(0);
}

.drift-memory-entry-transition.is-revealing .drift-memory-entry-loading {
    opacity: 0;
}

.drift-memory-entry-mark {
    color: #ffe0a0;
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

.drift-memory-entry-bar {
    width: 100%;
    height: 6px;
    border: 1px solid rgba(226, 193, 122, 0.48);
    background: rgba(8, 10, 12, 0.86);
    overflow: hidden;
}

.drift-memory-entry-bar span {
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, rgba(132, 78, 28, 0.1), rgba(255, 218, 134, 0.92), rgba(132, 78, 28, 0.1));
    animation: driftMemoryEntryLoadSweep 1050ms ease-in-out infinite;
}

.drift-memory-entry-text {
    color: #e7d5ac;
    font-family: 'Cinzel', serif;
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

@keyframes driftMemoryEntryLoadSweep {
    from { transform: translateX(-120%); }
    to { transform: translateX(260%); }
}

@keyframes driftMemoryCreatorEnter {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes driftMemoryCreatorStartFade {
    to {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
}

@keyframes driftMemoryCreatorReveal {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes driftMemoryStoryEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes driftMemoryDiagonalWipeIn {
    from {
        clip-path: polygon(-42% 0, -16% 0, -58% 100%, -84% 100%);
    }
    to {
        clip-path: polygon(0 0, 142% 0, 100% 100%, -42% 100%);
    }
}

@keyframes driftMemoryDiagonalCover {
    from {
        clip-path: polygon(-42% 0, -16% 0, -58% 100%, -84% 100%);
    }
    to {
        clip-path: polygon(0 0, 142% 0, 100% 100%, -42% 100%);
    }
}

@keyframes driftMemoryDiagonalUncover {
    from {
        clip-path: polygon(0 0, 142% 0, 100% 100%, -42% 100%);
    }
    to {
        clip-path: polygon(116% 0, 142% 0, 100% 100%, 74% 100%);
    }
}

@keyframes driftMemoryRaidAlertPulse {
    from {
        opacity: 0.22;
        filter: brightness(0.9);
    }
    to {
        opacity: 0.78;
        filter: brightness(1.25);
    }
}

.drift-memory-stage-select {
    overflow: hidden;
    place-items: stretch;
}

.drift-memory-stage-backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.52)),
        url("drift_memory/ui/stage/stage_background.png") center / cover no-repeat;
}

.drift-memory-stage-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    align-items: center;
    padding: clamp(24px, 4vh, 54px) clamp(22px, 4vw, 72px);
    box-sizing: border-box;
}

.drift-memory-stage-carousel {
    --stage-card-width: clamp(300px, 25vw, 430px);
    --stage-carousel-step: clamp(360px, 30vw, 545px);
    width: min(1680px, 100%);
    max-width: calc(100vw - clamp(24px, 3vw, 64px));
    height: clamp(430px, 58vh, 640px);
    position: relative;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    overflow: hidden;
    perspective: 1400px;
}

.drift-memory-stage-grid {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.drift-memory-stage-card {
    --stage-carousel-offset: 0;
    --stage-carousel-scale: 1;
    --stage-carousel-opacity: 1;
    --stage-carousel-y: 0px;
    --stage-carousel-z: 40;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--stage-card-width);
    aspect-ratio: 0.74;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: #f5dfaf;
    cursor: pointer;
    opacity: var(--stage-carousel-opacity);
    z-index: var(--stage-carousel-z);
    transform:
        translate(-50%, -50%)
        translateX(calc(var(--stage-carousel-offset) * var(--stage-carousel-step)))
        translateY(var(--stage-carousel-y))
        scale(var(--stage-carousel-scale));
    transform-origin: center center;
    transition:
        transform 420ms cubic-bezier(0.22, 0.78, 0.24, 1),
        opacity 360ms ease,
        filter 220ms ease;
}

.drift-memory-stage-card:hover:not(:disabled),
.drift-memory-stage-card:focus-visible:not(:disabled) {
    transform:
        translate(-50%, -50%)
        translateX(calc(var(--stage-carousel-offset) * var(--stage-carousel-step)))
        translateY(var(--stage-carousel-y))
        scale(var(--stage-carousel-scale));
    filter: brightness(1.08);
}

.drift-memory-stage-card.is-selected {
    filter: brightness(1.14) saturate(1.08);
}

.drift-memory-stage-card.is-selected::before,
.drift-memory-stage-card.is-selected::after {
    content: "";
    position: absolute;
    inset: 3.4% 2.5%;
    z-index: 1;
    border-radius: 3px;
    pointer-events: none;
}

.drift-memory-stage-card.is-selected::before {
    border: 2px solid rgba(255, 226, 143, 0.92);
    box-shadow:
        0 0 18px rgba(255, 204, 88, 0.72),
        0 0 46px rgba(255, 145, 36, 0.44),
        inset 0 0 20px rgba(255, 210, 100, 0.24);
}

.drift-memory-stage-card.is-selected::after {
    inset: -1.5% -2%;
    background: linear-gradient(120deg, transparent 18%, rgba(255, 244, 180, 0.34) 34%, transparent 50%);
    mix-blend-mode: screen;
    animation: driftMemoryStageSelectedSweep 2.2s ease-in-out infinite;
}

.drift-memory-stage-card:disabled {
    cursor: default;
}

.drift-memory-stage-card.is-carousel-distant {
    pointer-events: auto;
    filter: brightness(0.8) saturate(0.82);
}

.drift-memory-stage-nav-btn {
    position: absolute;
    top: 50%;
    z-index: 80;
    width: clamp(64px, 6.5vw, 118px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent url("drift_memory/ui/stage/ui_button_1.png") center / contain no-repeat;
    cursor: pointer;
    opacity: 0.9;
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.82));
    transition: opacity 160ms ease, filter 160ms ease, transform 160ms ease;
}

.drift-memory-stage-nav-btn:hover,
.drift-memory-stage-nav-btn:focus-visible {
    background-image: url("drift_memory/ui/stage/ui_button_2.png");
    opacity: 1;
    filter: drop-shadow(0 0 22px rgba(255, 209, 103, 0.5));
}

.drift-memory-stage-nav-btn.prev {
    left: clamp(8px, 2.2vw, 42px);
    transform: translateY(-50%) scaleX(-1);
}

.drift-memory-stage-nav-btn.prev:hover,
.drift-memory-stage-nav-btn.prev:focus-visible {
    transform: translateY(-50%) scaleX(-1) scale(1.04);
}

.drift-memory-stage-nav-btn.next {
    right: clamp(8px, 2.2vw, 42px);
    transform: translateY(-50%);
}

.drift-memory-stage-nav-btn.next:hover,
.drift-memory-stage-nav-btn.next:focus-visible {
    transform: translateY(-50%) scale(1.04);
}

.drift-memory-stage-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.drift-memory-stage-label {
    position: absolute;
    top: 14%;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
    min-width: 42%;
    color: #fff0c6;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9), 0 0 10px rgba(128, 64, 20, 0.72);
    white-space: nowrap;
}

.drift-memory-stage-character-frame {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 2;
    width: 58%;
    height: 58%;
    transform: translate(-50%, -50%);
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.drift-memory-stage-character {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.62));
    animation: driftMemoryStageCharacterCycle 24s linear infinite;
    animation-delay: calc(var(--stage-card-index) * 2.4s);
}

.drift-memory-stage-card.is-locked .drift-memory-stage-character {
    animation: none;
    opacity: 0;
}

.drift-memory-stage-title {
    position: absolute;
    left: 50%;
    bottom: 12.5%;
    z-index: 3;
    transform: translateX(-50%);
    width: 68%;
    color: #edd09a;
    font-size: clamp(15px, 1.7vw, 21px);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.drift-memory-stage-card.is-locked .drift-memory-stage-label,
.drift-memory-stage-card.is-locked .drift-memory-stage-title {
    color: rgba(215, 204, 178, 0.52);
}

.drift-memory-stage-lock-copy {
    position: absolute;
    left: 50%;
    top: 52%;
    z-index: 4;
    width: 62%;
    transform: translate(-50%, -50%);
    display: grid;
    gap: 10px;
    color: #d8c7a6;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
    pointer-events: none;
}

.drift-memory-stage-lock-title {
    color: #f0d49d;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 900;
    line-height: 1.1;
}

.drift-memory-stage-lock-body {
    font-size: clamp(12px, 1.1vw, 15px);
    font-weight: 700;
    line-height: 1.45;
}

.drift-memory-stage-footer {
    width: min(1380px, 100%);
    display: grid;
    grid-template-columns: minmax(520px, 760px) minmax(440px, auto);
    align-items: end;
    justify-content: space-between;
    gap: clamp(26px, 5vw, 92px);
}

.drift-memory-stage-detail {
    position: relative;
    width: min(760px, 100%);
    aspect-ratio: 2120 / 691;
}

.drift-memory-stage-detail-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.drift-memory-stage-detail-copy {
    position: absolute;
    inset: 16% 7.8% 15% 8.2%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: center;
    gap: 6px;
    color: #eadab7;
    text-shadow: 0 2px 9px rgba(0, 0, 0, 0.92);
}

.drift-memory-stage-detail-kicker {
    color: #bd9362;
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 800;
}

.drift-memory-stage-detail-title {
    color: #fff0c2;
    font-size: clamp(18px, 1.9vw, 26px);
    font-weight: 900;
    line-height: 1.15;
}

.drift-memory-stage-detail-body {
    color: #e4d0a8;
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 700;
    line-height: 1.45;
    overflow: hidden;
}

.drift-memory-stage-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(12px, 1.8vw, 22px);
    padding: 0 0 10px 0;
    justify-self: end;
    transform: translateX(clamp(18px, 3vw, 58px));
}

.drift-memory-stage-action-btn {
    width: clamp(190px, 14vw, 260px);
    aspect-ratio: 1110 / 404;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent var(--drift-button-normal) center / 100% 100% no-repeat;
    color: #f8e8bd;
    font-size: clamp(18px, 1.8vw, 25px);
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.86);
    cursor: pointer;
}

.drift-memory-stage-action-btn:hover,
.drift-memory-stage-action-btn:focus-visible {
    background-image: var(--drift-button-hover);
}

@keyframes driftMemoryStageCharacterCycle {
    0% { opacity: 0; transform: translateY(6px) scale(0.985); }
    2.5% { opacity: 1; transform: translateY(0) scale(1); }
    8.5% { opacity: 1; transform: translateY(0) scale(1); }
    11% { opacity: 0; transform: translateY(-5px) scale(1.01); }
    100% { opacity: 0; transform: translateY(-5px) scale(1.01); }
}

@keyframes driftMemoryStageSelectedSweep {
    0% { opacity: 0; transform: translateX(-48%); }
    28% { opacity: 0.72; }
    60% { opacity: 0; transform: translateX(58%); }
    100% { opacity: 0; transform: translateX(58%); }
}

@media (max-width: 760px), (max-height: 620px) {
    .drift-memory-stage-panel {
        align-items: start;
        overflow-y: auto;
    }

    .drift-memory-stage-carousel {
        --stage-card-width: min(390px, 76vw);
        --stage-carousel-step: min(315px, 58vw);
        width: min(620px, 100%);
        max-width: 100%;
        height: clamp(360px, 56vh, 520px);
    }

    .drift-memory-stage-card {
        width: var(--stage-card-width);
    }

    .drift-memory-stage-footer {
        grid-template-columns: minmax(260px, 1fr);
        justify-items: center;
    }

    .drift-memory-stage-detail {
        width: min(560px, 92vw);
    }

    .drift-memory-stage-actions {
        width: min(560px, 92vw);
        justify-content: flex-end;
        padding-right: 0;
        margin-bottom: 14px;
        transform: none;
    }

    .drift-memory-stage-action-btn {
        width: min(210px, 42vw);
    }
}

.drift-memory-creator-card-wrap {
    display: grid;
    justify-items: center;
    gap: 10px;
    align-content: center;
}

.drift-memory-creator-card-button {
    width: 236px;
    height: 344px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.drift-memory-creator-card {
    width: 236px;
    height: 344px;
    transform: none;
    transform-origin: top left;
}

.drift-memory-creator-card .card {
    pointer-events: none;
}

.drift-memory-creator-art-note,
.drift-memory-creator-fixed {
    color: #d8caa8;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.drift-memory-creator-form {
    display: grid;
    gap: 13px;
    min-width: 0;
}

.drift-memory-creator-title {
    color: #f1ca84;
    font-size: 32px;
    font-weight: 700;
}

.drift-memory-field {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #e7d5ac;
    font-size: 18px;
    font-weight: 700;
}

.drift-memory-field input {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid rgba(193, 143, 76, 0.4);
    background: rgba(0, 0, 0, 0.42);
    color: #fff3d3;
    font: inherit;
}

.drift-memory-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.drift-memory-race-row {
    max-height: 84px;
    overflow: auto;
}

.drift-memory-choice {
    min-width: 58px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(193, 143, 76, 0.34);
    background: rgba(0, 0, 0, 0.38);
    color: #e7d5ac;
    font-size: 17px;
    font-weight: 700;
}

.drift-memory-choice.active {
    border-color: rgba(255, 216, 139, 0.86);
    color: #fff6d8;
    background: linear-gradient(180deg, rgba(126, 78, 28, 0.9), rgba(54, 32, 16, 0.92));
}

.drift-memory-sample-row {
    display: grid;
    grid-template-columns: repeat(6, 44px);
    gap: 8px;
    max-height: 148px;
    overflow-y: auto;
    padding: 2px;
}

.drift-memory-sample-entry {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
}

.drift-memory-sample-choice {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(193, 143, 76, 0.34);
    background: center 22% / cover no-repeat rgba(0, 0, 0, 0.38);
    cursor: pointer;
}

.drift-memory-sample-choice.active {
    border-color: rgba(255, 216, 139, 0.92);
    box-shadow: 0 0 0 2px rgba(188, 118, 42, 0.42);
}

.drift-memory-sample-choice span {
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 0 3px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff3d3;
    font-size: 10px;
    line-height: 1.2;
}

.drift-memory-sample-delete {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid rgba(255, 214, 150, 0.82);
    border-radius: 50%;
    background: rgba(58, 12, 10, 0.94);
    color: #ffe1c2;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.drift-memory-sample-delete:hover {
    border-color: rgba(255, 236, 190, 0.98);
    background: rgba(126, 28, 20, 0.96);
    color: #fff7dc;
}

.drift-memory-portrait-actions {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, 150px);
    gap: 8px;
    margin-top: 8px;
}

.drift-memory-portrait-actions .drift-memory-modal-secondary {
    width: 150px;
    min-height: 0;
    aspect-ratio: 2172 / 724;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 700;
    display: grid;
    place-items: center;
    background-size: 100% 100%;
}

.drift-memory-portrait-error {
    grid-column: 2;
    margin-top: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(220, 84, 70, 0.68);
    background: rgba(63, 12, 12, 0.48);
    color: #ffd3c7;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.drift-memory-portrait-delete-body {
    margin: 8px 0 2px;
    color: #f4dfb8;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
    text-align: center;
}

.drift-memory-stat-editor {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(193, 143, 76, 0.28);
    background: rgba(0, 0, 0, 0.24);
}

.drift-memory-stat-editor-head,
.drift-memory-stat-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
}

.drift-memory-stat-editor-head strong {
    color: #fff3d3;
}

.drift-memory-stat-row {
    grid-template-columns: 1fr 38px 70px 38px;
}

.drift-memory-stat-row button {
    min-height: 32px;
    border: 1px solid rgba(193, 143, 76, 0.42);
    background: rgba(12, 16, 18, 0.9);
    color: #f4e2bd;
    font-size: 22px;
    font-weight: 700;
}

.drift-memory-stat-row button:disabled,
.drift-memory-creator-actions button:disabled,
.drift-memory-creator-start:disabled {
    opacity: 0.45;
    cursor: default;
}

.drift-memory-stat-row strong {
    text-align: center;
    color: #fff3d3;
    font-size: 22px;
    font-weight: 700;
}

.drift-memory-creator-actions {
    display: grid;
    grid-template-columns: 190px 270px;
    gap: 10px;
    justify-content: space-between;
}

.drift-memory-creator-actions .drift-memory-modal-secondary,
.drift-memory-creator-start {
    font-size: 16px;
    font-weight: 700;
    min-height: 0;
    aspect-ratio: 2172 / 724;
    display: grid;
    place-items: center;
    background-size: 100% 100%;
}

.drift-memory-creator-actions .drift-memory-modal-secondary {
    background-image: var(--drift-button-normal-long);
}

.drift-memory-creator-actions .drift-memory-modal-secondary:hover,
.drift-memory-creator-start:hover {
    background-image: var(--drift-button-hover-long);
}

.drift-memory-creator-start {
    width: 300px;
    margin-top: 10px;
    background-image: var(--drift-button-normal-long);
}

.drift-memory-talent-panel {
    width: min(330px, 100%);
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding: 10px;
    border: 1px solid rgba(193, 143, 76, 0.34);
    background: rgba(5, 8, 11, 0.74);
    box-shadow: inset 0 0 18px rgba(28, 58, 88, 0.18);
    box-sizing: border-box;
}

.drift-memory-talent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: #f1ca84;
    font-size: 17px;
    font-weight: 800;
}

.drift-memory-talent-head strong {
    color: #d8caa8;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.drift-memory-talent-note,
.drift-memory-talent-desc,
.drift-memory-talent-locked {
    color: #d8caa8;
    font-size: 12px;
    line-height: 1.35;
}

.drift-memory-talent-slot {
    display: grid;
    gap: 6px;
}

.drift-memory-talent-slot-head {
    color: #ffe0a0;
    font-size: 12px;
    font-weight: 800;
}

.drift-memory-talent-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.drift-memory-talent-option {
    min-height: 30px;
    padding: 2px 5px;
    border: 1px solid rgba(193, 143, 76, 0.38);
    background: rgba(0, 0, 0, 0.42);
    color: #e7d5ac;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    cursor: pointer;
}

.drift-memory-talent-option.active {
    border-color: rgba(255, 216, 139, 0.9);
    color: #fff6d8;
    background: linear-gradient(180deg, rgba(126, 78, 28, 0.9), rgba(54, 32, 16, 0.92));
}

.drift-memory-talent-locked {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 2px;
    border-top: 1px solid rgba(193, 143, 76, 0.22);
}

.drift-memory-talent-locked > span:first-child {
    color: #f1ca84;
    font-weight: 800;
}

.drift-memory-talent-locked > span:not(:first-child) {
    opacity: 0.72;
}

@media (max-width: 1100px) {
    .drift-memory-shell {
        overflow: auto;
        grid-template-rows: auto 1fr;
    }

    .drift-memory-header,
    .drift-memory-layout {
        grid-template-columns: 1fr;
    }

    .drift-memory-top-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .drift-memory-facilities {
        grid-template-columns: 1fr;
    }

    .drift-memory-center {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }

    .drift-memory-facilities {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 1366px), (max-height: 820px) {
    .drift-memory-screen {
        overflow: auto;
    }

    .drift-memory-shell {
        height: auto;
        min-height: 100dvh;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px;
        padding: 8px;
        overflow: visible;
    }

    .drift-memory-header {
        grid-template-columns: minmax(0, 1fr) 58px;
        min-height: 0;
        padding: 5px 6px;
    }

    .drift-memory-header .drift-memory-icon-btn {
        width: 58px;
        min-height: 44px;
    }

    .drift-memory-top-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .drift-memory-top-stats div {
        min-height: 44px;
        padding: 5px 6px 5px 42px;
    }

    .drift-memory-top-stats img {
        left: 9px;
        width: 24px;
        height: 24px;
    }

    .drift-memory-layout {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(230px, 280px);
        gap: 10px;
        padding-top: 0;
        max-height: none;
        overflow: visible;
    }

    .drift-memory-profile-panel,
    .drift-memory-side-panel,
    .drift-memory-center {
        max-height: none;
    }

    .drift-memory-profile-panel {
        min-height: 0;
        overflow: visible;
        padding: 10px;
    }

    .drift-memory-side-panel {
        gap: 8px;
        padding-top: 0;
        overflow: visible;
    }

    .drift-memory-center {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
        grid-template-rows: minmax(150px, 190px) minmax(0, 1fr);
        gap: 8px;
        overflow: visible;
    }

    .drift-memory-log-panel,
    .drift-memory-next-power-panel {
        max-height: 190px;
        padding: 10px;
    }

    .drift-memory-log,
    .drift-memory-next-power-list {
        max-height: 136px;
    }

    .drift-memory-facilities {
        gap: 10px;
        overflow: visible;
    }

    .drift-memory-facility {
        height: clamp(230px, 31vh, 286px);
        padding: 10px 10px 12px;
    }
}

@media (max-width: 1100px), (max-height: 700px) {
    .drift-memory-layout {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .drift-memory-profile-panel,
    .drift-memory-center,
    .drift-memory-side-panel {
        width: 100%;
    }

    .drift-memory-center {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .drift-memory-facilities {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 760px) {
    .drift-memory-top-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .drift-memory-top-stats div {
        padding-left: 36px;
    }

    .drift-memory-top-stats img {
        width: 21px;
        height: 21px;
    }
}

@media (max-width: 1366px), (max-height: 820px) {
    .drift-memory-sl-fullscreen {
        overflow: auto;
    }

    .drift-memory-sl-header {
        position: sticky;
        top: 0;
        z-index: 4;
        padding: 10px 14px 8px;
        background: linear-gradient(180deg, rgba(5, 10, 18, 0.98), rgba(5, 10, 18, 0.9));
    }

    .drift-memory-sl-title {
        font-size: 18px;
    }

    .drift-memory-sl-desc {
        font-size: 12px;
        line-height: 1.35;
    }

    .drift-memory-sl-talent-summary {
        max-width: 300px;
        min-height: 34px;
        padding: 3px 6px;
    }

    .drift-memory-sl-talent-chip {
        font-size: 13px;
    }

    .drift-memory-sl-talent-chip {
        max-width: 120px;
    }

    .drift-memory-companion-grid {
        grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
        align-content: start;
        gap: 8px;
        padding: 8px 10px 14px;
        overflow: visible;
    }

    .drift-memory-companion-cell {
        min-height: 0;
        overflow: hidden;
    }

    .drift-memory-companion-cell-card {
        height: 153px;
        max-height: 153px;
        padding: 4px 6px 0;
        overflow: visible;
    }

    .drift-memory-companion-cell-card .card {
        transform: scale(0.43) !important;
        transform-origin: top center !important;
        margin-bottom: calc((344px * 0.43) - 344px);
    }

    .drift-memory-companion-cell-footer {
        flex: 0 0 auto;
        padding: 4px 6px 6px;
        gap: 2px;
    }

    .drift-memory-companion-cell-training-row {
        grid-template-columns: minmax(84px, 1fr) minmax(82px, 104px);
        grid-template-rows: auto auto auto;
        row-gap: 4px;
    }

    .companion-trait-bars {
        gap: 2px;
        margin-top: 2px;
    }

    .companion-trait-bar-row {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 3px;
    }

    .companion-trait-label {
        font-size: 13px;
    }

    .companion-bond-display {
        width: auto;
    }

    .companion-bond-main {
        width: 92px;
        min-height: 28px;
        transform: none;
    }

    .companion-bond-icon {
        width: 30px;
        height: 30px;
    }

    .companion-bond-lv {
        font-size: 20px;
    }

    .companion-breakthrough-btn {
        width: 100%;
        min-height: 22px;
        margin-top: 4px;
        padding: 2px 6px;
        font-size: 11px;
    }

    .drift-memory-companion-cell-training-right {
        grid-column: 1 / -1;
        grid-row: 3;
        padding-top: 0;
    }

    .drift-memory-companion-focus-select {
        margin-top: 2px;
        padding: 4px 6px;
        font-size: 13px;
    }

    .drift-memory-companion-cell-training-cmd {
        font-size: 13px;
    }

    .drift-memory-companion-cell-facility {
        font-size: 11px;
    }

    .companion-trait-val {
        font-size: 15px;
    }

    .companion-trait-val-compact {
        font-size: 13px;
    }

    .drift-memory-companion-tutorial-panel {
        width: min(620px, 94vw);
        min-height: 0;
        bottom: 12px;
        padding: 12px 14px;
    }

    .drift-memory-companion-tutorial-text {
        padding-right: 0;
        font-size: 0.96rem;
        line-height: 1.45;
    }

    .drift-memory-companion-tutorial-panel .drift-memory-tutorial-next-btn {
        position: static;
        margin-top: 10px;
    }
}

@media (max-height: 680px) {
    .drift-memory-companion-tutorial-panel {
        position: sticky;
        left: auto;
        bottom: auto;
        transform: none;
        width: calc(100% - 20px);
        margin: 0 auto 10px;
        order: 3;
    }
}

@media (max-width: 1366px), (max-height: 820px) {
    .drift-memory-stage-select {
        overflow: auto;
    }

    .drift-memory-stage-panel {
        height: auto;
        min-height: 100dvh;
        grid-template-rows: auto auto;
        align-content: center;
        gap: clamp(10px, 2vh, 18px);
        padding: clamp(14px, 2.2vh, 24px) clamp(18px, 3vw, 42px);
    }

    .drift-memory-stage-carousel {
        --stage-card-width: clamp(240px, 30vw, 300px);
        --stage-carousel-step: clamp(300px, 31vw, 420px);
        width: min(1280px, 100%);
        max-width: calc(100vw - clamp(18px, 3vw, 44px));
        height: clamp(340px, 54vh, 500px);
    }

    .drift-memory-stage-card {
        width: var(--stage-card-width);
    }

    .drift-memory-stage-label {
        font-size: clamp(22px, 2.4vw, 30px);
    }

    .drift-memory-stage-title {
        font-size: clamp(14px, 1.35vw, 18px);
    }

    .drift-memory-stage-footer {
        width: min(980px, 100%);
        grid-template-columns: minmax(360px, 560px) minmax(300px, auto);
        align-items: center;
        gap: clamp(14px, 3vw, 42px);
    }

    .drift-memory-stage-detail {
        width: min(560px, 48vw);
    }

    .drift-memory-stage-actions {
        transform: none;
        padding-bottom: 0;
    }

    .drift-memory-stage-action-btn {
        width: clamp(150px, 13vw, 190px);
        font-size: clamp(16px, 1.55vw, 21px);
    }
}

@media (max-width: 760px), (max-height: 620px) {
    .drift-memory-stage-panel {
        align-items: start;
        align-content: start;
        overflow-y: auto;
    }

    .drift-memory-stage-carousel {
        --stage-card-width: min(390px, 76vw);
        --stage-carousel-step: min(315px, 58vw);
        width: min(620px, 100%);
        max-width: 100%;
        height: clamp(360px, 56vh, 520px);
    }

    .drift-memory-stage-card {
        width: var(--stage-card-width);
    }

    .drift-memory-stage-footer {
        grid-template-columns: minmax(260px, 1fr);
        justify-items: center;
    }

    .drift-memory-stage-detail {
        width: min(560px, 92vw);
    }

    .drift-memory-stage-actions {
        width: min(560px, 92vw);
        justify-content: flex-end;
        padding-right: 0;
        margin-bottom: 14px;
        transform: none;
    }

    .drift-memory-stage-action-btn {
        width: min(210px, 42vw);
    }
}

@media (max-width: 1366px), (max-height: 820px) {
    body.fixed-canvas-mode .drift-memory-screen {
        position: absolute !important;
        inset: 0 !important;
        width: 1920px !important;
        height: 1080px !important;
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-shell {
        height: 100%;
        min-height: 0;
        grid-template-rows: 82px 1fr;
        gap: 18px;
        padding: 12px;
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-header {
        grid-template-columns: minmax(0, 1fr) max-content;
        padding: 6px 8px;
    }

    body.fixed-canvas-mode .drift-memory-header .drift-memory-icon-btn {
        width: 74px;
        min-height: 0;
    }

    body.fixed-canvas-mode .drift-memory-header-actions {
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 8;
        display: flex !important;
        pointer-events: auto;
        justify-self: end;
        min-width: max-content;
    }

    body.fixed-canvas-mode #driftMemorySettingsBtn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 74px;
        height: 52px;
        min-height: 52px;
        background-color: rgba(6, 10, 13, 0.54);
        background-size: 62% auto;
        pointer-events: auto;
    }

    body.fixed-canvas-mode .drift-memory-top-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
        padding-right: 86px;
    }

    body.fixed-canvas-mode .drift-memory-top-stats div {
        min-height: 0;
        padding: 5px 6px 5px 42px;
    }

    body.fixed-canvas-mode .drift-memory-top-stats img {
        left: 10px;
        width: 28px;
        height: 28px;
    }

    body.fixed-canvas-mode .drift-memory-layout {
        grid-template-columns: 310px minmax(560px, 1fr) 340px;
        gap: 16px;
        padding-top: 8px;
        max-height: none;
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-profile-panel {
        min-height: 790px;
        max-height: 926px;
        overflow: hidden;
        padding: 12px 16px 12px;
    }

    body.fixed-canvas-mode .drift-memory-side-panel {
        gap: 10px;
        padding: 0;
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-center {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: 220px 1fr;
        gap: 12px;
        max-height: 954px;
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-log-panel,
    body.fixed-canvas-mode .drift-memory-next-power-panel {
        max-height: none;
        padding: 12px;
    }

    body.fixed-canvas-mode .drift-memory-log,
    body.fixed-canvas-mode .drift-memory-next-power-list {
        max-height: none;
    }

    body.fixed-canvas-mode .drift-memory-facilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        overflow-y: auto;
    }

    body.fixed-canvas-mode .drift-memory-facility {
        height: 316px;
        padding: 14px 14px 18px;
    }

    body.fixed-canvas-mode .drift-memory-stage-select {
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-stage-panel {
        height: 100%;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr) auto;
        align-content: stretch;
        gap: 0;
        padding: clamp(24px, 4vh, 54px) clamp(22px, 4vw, 72px);
    }

    body.fixed-canvas-mode .drift-memory-stage-carousel {
        --stage-card-width: clamp(300px, 25vw, 430px);
        --stage-carousel-step: clamp(360px, 30vw, 545px);
        width: min(1680px, 100%);
        max-width: calc(100vw - clamp(24px, 3vw, 64px));
        height: clamp(430px, 58vh, 640px);
    }

    body.fixed-canvas-mode .drift-memory-stage-card {
        width: var(--stage-card-width);
    }

    body.fixed-canvas-mode .drift-memory-stage-footer {
        width: min(1380px, 100%);
        grid-template-columns: minmax(520px, 760px) minmax(440px, auto);
        align-items: end;
        gap: clamp(26px, 5vw, 92px);
    }

    body.fixed-canvas-mode .drift-memory-stage-detail {
        width: auto;
    }

    body.fixed-canvas-mode .drift-memory-stage-actions {
        width: auto;
        justify-content: flex-end;
        padding: 0 0 10px 0;
        margin-bottom: 0;
        transform: translateX(clamp(18px, 3vw, 58px));
    }

    body.fixed-canvas-mode .drift-memory-stage-action-btn {
        width: clamp(190px, 14vw, 260px);
    }

    body.fixed-canvas-mode .drift-memory-sl-fullscreen {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: auto;
    }

    body.fixed-canvas-mode .drift-memory-sl-header {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 10px 14px 8px;
        background: linear-gradient(180deg, rgba(5, 10, 18, 0.98), rgba(5, 10, 18, 0.9));
    }

    body.fixed-canvas-mode .drift-memory-sl-header-actions {
        position: sticky;
        right: 0;
    }

    body.fixed-canvas-mode .drift-memory-hero-training-command {
        gap: 8px;
        font-size: 15px;
    }

    body.fixed-canvas-mode .drift-memory-hero-training-command select {
        min-width: 116px;
        height: 34px;
        padding-left: 10px;
    }

    body.fixed-canvas-mode .drift-memory-sl-talent-summary {
        max-width: 300px;
        min-height: 34px;
        padding: 3px 6px;
    }

    body.fixed-canvas-mode .drift-memory-sl-talent-chip {
        font-size: 13px;
    }

    body.fixed-canvas-mode .drift-memory-sl-talent-chip {
        max-width: 120px;
    }

    body.fixed-canvas-mode .drift-memory-sl-title {
        font-size: 18px;
    }

    body.fixed-canvas-mode .drift-memory-sl-desc {
        font-size: 12px;
        line-height: 1.35;
    }

    body.fixed-canvas-mode .drift-memory-companion-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-content: start;
        gap: 6px;
        padding: 6px 8px 12px;
        overflow: visible;
    }

    body.fixed-canvas-mode .drift-memory-companion-cell {
        min-height: 0;
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-companion-cell-card {
        height: 132px;
        max-height: 132px;
        overflow: visible;
        padding: 3px 6px 0;
    }

    body.fixed-canvas-mode .drift-memory-companion-cell-card .card {
        transform: scale(0.37) !important;
        transform-origin: top center !important;
        margin-bottom: calc((344px * 0.37) - 344px);
    }

    body.fixed-canvas-mode .drift-memory-companion-cell-footer {
        flex: 0 0 auto;
        padding: 2px 6px 5px;
        gap: 1px;
    }

    body.fixed-canvas-mode .drift-memory-companion-cell-training-row {
        grid-template-columns: minmax(84px, 1fr) minmax(82px, 104px);
        grid-template-rows: auto auto auto;
        row-gap: 2px;
    }

    body.fixed-canvas-mode .companion-trait-bars {
        gap: 2px;
        margin-top: 2px;
    }

    body.fixed-canvas-mode .companion-trait-bar-row {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 3px;
    }

    body.fixed-canvas-mode .companion-trait-label {
        font-size: 13px;
    }

    body.fixed-canvas-mode .companion-bond-display {
        width: auto;
    }

    body.fixed-canvas-mode .companion-bond-main {
        width: 92px;
        min-height: 28px;
        transform: none;
    }

    body.fixed-canvas-mode .companion-bond-icon {
        width: 30px;
        height: 30px;
    }

    body.fixed-canvas-mode .companion-bond-lv {
        font-size: 20px;
    }

    body.fixed-canvas-mode .companion-breakthrough-btn {
        width: 100%;
        min-height: 22px;
        margin-top: 4px;
        padding: 2px 6px;
        font-size: 11px;
    }

    body.fixed-canvas-mode .drift-memory-companion-cell-training-right {
        grid-column: 1 / -1;
        grid-row: 3;
        padding-top: 0;
    }

    body.fixed-canvas-mode .drift-memory-companion-focus-select {
        margin-top: 1px;
        padding: 3px 6px;
        font-size: 12px;
    }

    body.fixed-canvas-mode .drift-memory-companion-cell-training-cmd {
        font-size: 13px;
    }

    body.fixed-canvas-mode .drift-memory-companion-cell-facility {
        font-size: 11px;
    }

    body.fixed-canvas-mode .companion-trait-val {
        font-size: 15px;
    }

    body.fixed-canvas-mode .companion-trait-val-compact {
        font-size: 13px;
    }

    body.fixed-canvas-mode .drift-memory-deck-modal {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        display: grid;
        place-items: center;
        padding: 8px;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel {
        width: 100% !important;
        height: 100% !important;
        max-height: none;
        border-radius: 8px;
        margin: 0 auto;
    }

    body.fixed-canvas-mode .drift-memory-deck-builder {
        --character-deck-card-node-scale: 0.42;
        --character-owned-card-node-scale: 0.38;
        --character-deck-card-slot-height: calc(344px * 0.42 + 6px);
        --character-deck-card-slot-width: calc(236px * 0.42 + 4px);
        --character-owned-card-slot-height: calc(344px * 0.38 + 6px);
        --character-owned-card-slot-width: calc(236px * 0.38 + 6px);
        grid-template-columns: minmax(220px, 0.72fr) minmax(520px, 1.46fr) minmax(300px, 0.9fr);
        gap: 8px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-topbar {
        gap: 10px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-title {
        font-size: 1.05rem;
        margin-bottom: 4px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-info {
        min-height: 18px;
        margin-bottom: 4px;
        font-size: 0.92rem;
        row-gap: 4px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-pane {
        padding: 8px;
        gap: 6px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-pane-title {
        font-size: 0.95rem;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-detail-card-wrap {
        min-height: 246px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-detail-card-host {
        min-height: 244px;
        transform: scale(0.7);
        transform-origin: top center;
        margin-bottom: -78px;
    }

    body.fixed-canvas-mode .drift-memory-current-grid {
        grid-template-columns: repeat(5, var(--character-deck-card-slot-width));
        column-gap: 8px;
        row-gap: 6px;
        padding: 0 6px;
    }

    body.fixed-canvas-mode .drift-memory-owned-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--character-owned-card-slot-width), 1fr));
        gap: 6px;
    }

    body.fixed-canvas-mode .drift-memory-deck-actions {
        padding-top: 4px;
        gap: 8px;
    }
}

@media (max-width: 1100px) {
    body.fixed-canvas-mode .drift-memory-deck-modal {
        overflow: auto;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel {
        min-height: calc(100vh - 16px);
        height: auto !important;
    }

    body.fixed-canvas-mode .drift-memory-deck-builder {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-pane {
        min-height: 320px;
    }

    body.fixed-canvas-mode .drift-memory-current-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--character-deck-card-slot-width), 1fr));
    }
}

@media ((max-width: 1700px) and (min-resolution: 1.2dppx)), ((max-height: 920px) and (min-resolution: 1.2dppx)) {
    body.fixed-canvas-mode .drift-memory-character-deck-panel {
        padding: 8px;
    }

    body.fixed-canvas-mode .drift-memory-deck-builder {
        --character-deck-card-node-scale: 0.4;
        --character-owned-card-node-scale: 0.34;
        --character-deck-card-slot-height: calc(344px * 0.4 + 5px);
        --character-deck-card-slot-width: calc(236px * 0.4 + 4px);
        --character-owned-card-slot-height: calc(344px * 0.34 + 5px);
        --character-owned-card-slot-width: calc(236px * 0.34 + 4px);
        grid-template-columns: minmax(250px, 0.78fr) minmax(510px, 1.38fr) minmax(300px, 0.82fr);
        gap: 8px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-pane {
        padding: 8px;
    }

    body.fixed-canvas-mode .drift-memory-current-grid {
        grid-template-columns: repeat(5, var(--character-deck-card-slot-width));
        column-gap: 7px;
        row-gap: 5px;
        padding: 0 5px;
    }

    body.fixed-canvas-mode .drift-memory-owned-grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--character-owned-card-slot-width), 1fr));
        gap: 5px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-tab-row {
        gap: 5px;
    }

    body.fixed-canvas-mode .drift-memory-character-deck-panel .character-deck-tab-btn {
        padding: 7px 5px;
        font-size: 0.82rem;
    }

    body.fixed-canvas-mode .drift-memory-deck-list-tools {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 5px;
    }

    body.fixed-canvas-mode .drift-memory-deck-list-tools select,
    body.fixed-canvas-mode .drift-memory-deck-list-tools button {
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── 漂流者の記憶 ショップ ── */
.drift-memory-shop-modal {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px 24px;
}
.drift-memory-shop-modal.hidden { display: none; }

.drift-market-shop-modal {
    --drift-market-shop-window: url("drift_memory/ui/parts/shop_window.png");
    --drift-market-skill-remove-button: url("drift_memory/ui/parts/skill_remove_button.png");
    --drift-market-status-down-button: url("drift_memory/ui/parts/status_down_button.png");
}

/* 市場ショップ: POWER/ITEM を4列グリッドで横並び */
.drift-market-shop-modal .map-shop-layout,
.drift-recruit-shop-modal .map-shop-layout,
body.fixed-canvas-mode .drift-market-shop-modal .map-shop-layout,
body.fixed-canvas-mode .drift-recruit-shop-modal .map-shop-layout {
    width: min(1440px, calc(100vw - 48px));
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 auto;
}

.drift-market-shop-modal .map-shop-layout,
body.fixed-canvas-mode .drift-market-shop-modal .map-shop-layout {
    width: auto;
    height: min(876px, calc(100vh - 36px));
    aspect-ratio: 1416 / 876;
    max-width: calc(100vw - 48px);
}

.drift-market-shop-modal .map-shop-detail-dock {
    display: none;
}

.drift-recruit-shop-modal .map-shop-layout,
body.fixed-canvas-mode .drift-recruit-shop-modal .map-shop-layout {
    width: min(1540px, calc(100vw - 48px));
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 16px;
}

.drift-recruit-shop-modal .map-shop-detail-dock,
body.fixed-canvas-mode .drift-recruit-shop-modal .map-shop-detail-dock {
    display: grid;
    min-height: min(92vh, 920px);
    max-height: min(92vh, 920px);
}

.drift-recruit-shop-modal .map-shop-detail-host {
    height: 100%;
}

.drift-recruit-shop-modal .map-shop-detail-card {
    width: 236px;
    height: 344px;
    aspect-ratio: auto;
    overflow: hidden;
    background: transparent;
    border: 0;
}

.drift-market-shop-modal .map-shop-panel,
.drift-recruit-shop-modal .map-shop-panel,
body.fixed-canvas-mode .drift-market-shop-modal .map-shop-panel,
body.fixed-canvas-mode .drift-recruit-shop-modal .map-shop-panel {
    width: 100%;
    height: min(92vh, 920px);
    max-height: min(92vh, 920px);
}

.drift-market-shop-modal .map-shop-panel,
body.fixed-canvas-mode .drift-market-shop-modal .map-shop-panel {
    height: 100%;
    max-height: none;
    aspect-ratio: 1416 / 876;
    padding: 46px 58px 42px;
    background: transparent var(--drift-market-shop-window) center / 100% 100% no-repeat;
    border: none;
    box-shadow: none;
}

.drift-market-shop-modal .map-shop-head {
    min-height: 42px;
    padding: 0 6px;
}

.drift-market-shop-modal .map-shop-body {
    margin-top: 12px;
}

.drift-market-shop-modal .map-shop-offer-list {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 10px 12px 4px;
}

.drift-market-list .map-shop-offer-layout {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
}

body.fixed-canvas-mode .drift-market-list .map-shop-offer-layout,
body.fixed-canvas-mode .drift-recruit-list .map-shop-offer-layout {
    grid-template-columns: 1fr;
    min-height: 0;
}

.drift-market-list .map-shop-offer-rail {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, auto));
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.drift-market-list .map-shop-offer-main {
    display: none;
}

.drift-market-list .map-shop-section {
    min-height: 0;
    grid-template-rows: auto auto;
    gap: 6px;
}

.drift-market-shop-modal .map-event-title {
    font-size: 1.82rem;
    line-height: 1.15;
}

.drift-market-list .map-shop-section-title {
    font-size: 1rem;
    line-height: 1.25;
}

.drift-market-list .map-shop-power-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    min-height: 0;
    align-items: start;
}

.drift-market-list .map-shop-offer-btn {
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    height: clamp(154px, 19vh, 178px);
    overflow: hidden;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: 10px 14px;
    text-align: center;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
}

.drift-market-list .map-shop-power-thumb {
    width: min(96px, 50%);
    height: auto;
    aspect-ratio: 1 / 1;
    align-self: start;
}

.drift-market-list .map-shop-offer-content {
    width: 100%;
    display: grid;
    gap: 4px;
    align-self: start;
}

.drift-market-list .map-shop-offer-title {
    overflow-wrap: anywhere;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
}

.drift-market-list .map-shop-offer-price {
    color: #ffd995;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
}

.drift-market-list .map-shop-offer-meta {
    display: -webkit-box;
    color: #c9dbef;
    font-size: 0.82rem;
    line-height: 1.32;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.drift-market-list .map-shop-offer-state {
    font-size: 0.86rem;
    font-weight: 800;
}

.drift-memory-shop-tooltip {
    position: fixed;
    z-index: 10020;
    max-width: min(440px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid rgba(124, 212, 252, 0.62);
    border-radius: 6px;
    background: rgba(6, 15, 24, 0.96);
    color: #e7f3ff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
    pointer-events: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.52);
}

.drift-memory-shop-tooltip.hidden {
    display: none;
}

.drift-market-list .map-shop-material-sell-section {
    display: grid;
    gap: 10px;
    min-height: 0;
}

.map-shop-material-sell-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.map-shop-material-sell-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 6px 8px;
    align-items: center;
    min-width: 0;
    padding: 8px;
    border: 1px solid rgba(124, 212, 252, 0.42);
    border-radius: 6px;
    background: rgba(12, 35, 48, 0.78);
}

.map-shop-material-sell-item img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.map-shop-material-sell-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.map-shop-material-sell-info strong {
    color: #ffe5a8;
    font-size: 0.92rem;
    line-height: 1.25;
}

.map-shop-material-sell-info span {
    color: #c9dbef;
    font-size: 0.78rem;
    line-height: 1.35;
}

.map-shop-material-sell-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.map-shop-material-sell-actions button {
    min-height: 30px;
    border: 1px solid rgba(193, 143, 76, 0.62);
    border-radius: 4px;
    background: rgba(8, 14, 24, 0.86);
    color: #f1ca84;
    font-weight: 800;
    cursor: pointer;
}

.map-shop-material-sell-actions button:disabled {
    opacity: 0.45;
    cursor: default;
}

.map-shop-skill-remove-section {
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.map-shop-service-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.map-shop-skill-remove-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(202, 168, 83, 0.5);
    background: rgba(4, 13, 24, 0.72);
    pointer-events: auto;
    cursor: default;
}

.map-shop-skill-remove-box.locked {
    border-color: rgba(150, 150, 150, 0.32);
    background: rgba(4, 13, 24, 0.42);
    cursor: default;
}

.map-shop-skill-remove-box.locked .map-shop-skill-remove-info {
    opacity: 0.68;
}

.map-shop-skill-remove-box button,
.drift-memory-skill-remove-target,
.drift-memory-skill-remove-row {
    border: 1px solid rgba(202, 168, 83, 0.65);
    background: rgba(8, 17, 30, 0.9);
    color: #ffe4a0;
    font-weight: 800;
    cursor: pointer;
}

.map-shop-skill-remove-box button {
    min-width: 130px;
    min-height: 42px;
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.drift-market-shop-modal .map-shop-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.drift-market-shop-modal .map-shop-skill-remove-box {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    justify-items: center;
    min-height: 132px;
    padding: 10px 12px 12px;
    border: 1px solid rgba(202, 168, 83, 0.42);
    background: rgba(4, 13, 24, 0.44);
}

.drift-market-shop-modal .map-shop-skill-remove-info {
    display: grid;
    gap: 3px;
    width: 100%;
    min-width: 0;
    text-align: center;
}

.drift-market-shop-modal .map-shop-skill-remove-info strong {
    color: #ffe7ad;
    font-size: 0.98rem;
    line-height: 1.2;
}

.drift-market-shop-modal .map-shop-skill-remove-info span {
    color: #d8c49b;
    font-size: 0.78rem;
    line-height: 1.35;
}

.drift-market-shop-modal .map-shop-skill-remove-box button {
    width: min(320px, 74%);
    aspect-ratio: 2027 / 449;
    min-height: 0;
    height: auto;
    padding: 0 24px;
    border: none;
    background: transparent var(--drift-market-skill-remove-button) center / contain no-repeat;
    color: #ffe8ae;
    font-size: calc(15px * var(--drift-font-scale));
    font-family: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
    font-weight: 800;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
}

.drift-market-shop-modal #driftMemoryOpenStatReductionBtn {
    aspect-ratio: 2043 / 438;
    background-image: var(--drift-market-status-down-button);
}

.drift-market-shop-modal .map-shop-skill-remove-box button:hover {
    filter: brightness(1.12);
}

.map-shop-skill-remove-box button:disabled {
    opacity: 0.45;
    cursor: default;
}

.drift-memory-skill-remove-row:disabled {
    opacity: 0.45;
    cursor: default;
}

.drift-memory-stat-reduction-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.drift-memory-skill-remove-panel {
    width: min(1180px, 96vw);
    max-width: 1180px;
    max-height: 92vh;
    overflow-y: auto;
}

#driftMemorySkillRemovalModal {
    position: fixed;
    z-index: 30000;
    pointer-events: auto;
}

.drift-memory-skill-remove-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.drift-memory-skill-remove-card-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px 12px;
    margin: 14px 0;
    align-items: start;
}

.drift-memory-skill-remove-card {
    min-width: 0;
    padding: 6px;
    border: 1px solid rgba(202, 168, 83, 0.62);
    border-radius: 6px;
    background: rgba(8, 17, 30, 0.9);
    color: #ffe4a0;
    cursor: pointer;
    display: grid;
    gap: 6px;
    justify-items: center;
    align-content: start;
}

.drift-memory-skill-remove-card.active {
    border-color: rgba(255, 230, 148, 0.98);
    background: rgba(120, 72, 20, 0.72);
    box-shadow: 0 0 0 1px rgba(255, 230, 148, 0.32), 0 0 12px rgba(255, 210, 112, 0.34);
}

.drift-memory-skill-remove-card-wrap {
    width: 132px;
    height: 192px;
    display: grid;
    place-items: start;
    overflow: hidden;
    pointer-events: none;
}

.drift-memory-skill-remove-card-wrap .card,
.drift-memory-skill-remove-card-node {
    width: 236px !important;
    height: 344px !important;
    transform: scale(0.56) !important;
    transform-origin: top left !important;
    pointer-events: none;
    margin: 0 !important;
}

.drift-memory-skill-remove-card-fallback {
    width: 128px;
    height: 186px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(202, 168, 83, 0.44);
    background: rgba(4, 10, 18, 0.88);
    color: #ffe4a0;
    font-weight: 800;
    text-align: center;
    line-height: 1.35;
}

.drift-memory-skill-remove-card-name {
    max-width: 100%;
    color: #ffe4a0;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-align: center;
}

.drift-memory-skill-remove-target {
    padding: 8px 12px;
}

.drift-memory-skill-remove-target.active {
    background: rgba(120, 72, 20, 0.92);
}

.drift-memory-skill-remove-list {
    display: grid;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.drift-memory-skill-remove-row {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    text-align: left;
}

.drift-memory-skill-remove-row span {
    color: #d9e6ff;
    white-space: pre-line;
    font-weight: 600;
}

#driftMemorySkillRemovalCloseBtn,
#driftMemoryStatReductionCloseBtn {
    width: 217px;
    min-height: 72px;
    aspect-ratio: 2172 / 724;
    justify-self: center;
    padding: 0 24px;
    background: transparent var(--drift-button-normal-long) center / contain no-repeat;
    font-size: 16px;
    line-height: 1;
}

#driftMemorySkillRemovalCloseBtn:hover,
#driftMemoryStatReductionCloseBtn:hover {
    background-image: var(--drift-button-hover-long);
}

.drift-memory-skill-remove-panel > .drift-memory-modal-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.drift-memory-hero-skill-replace-panel {
    width: min(1220px, 98vw, calc(96vh * 1342 / 904));
    max-width: 1220px;
    aspect-ratio: 1342 / 904;
    text-align: center;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 10px;
    padding: clamp(58px, 6.4vw, 82px) clamp(72px, 8vw, 112px) clamp(36px, 4.6vw, 56px);
    border: none;
    border-radius: 0;
    background: url("drift_memory/ui/parts/skill_window.png") center / 100% 100% no-repeat;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.64);
    overflow: hidden;
}

.drift-memory-hero-skill-replace-panel::before {
    display: none;
}

.drift-memory-hero-skill-replace-panel::after {
    display: none;
}

.drift-memory-hero-skill-replace-panel .drift-memory-modal-title {
    margin-top: 0;
    font-family: 'Shippori Mincho', serif;
    font-size: 38px;
    letter-spacing: 0;
    color: #ffe6a8;
    text-shadow: 0 0 18px rgba(230, 176, 80, 0.34), 0 2px 4px rgba(0, 0, 0, 0.9);
}

.drift-memory-hero-skill-replace-panel .drift-memory-modal-body,
.drift-memory-hero-skill-replace-panel .drift-memory-modal-note {
    width: min(620px, 100%);
    text-align: center;
}

.drift-memory-hero-skill-new {
    width: min(560px, 84%);
    aspect-ratio: 1257 / 428;
    position: relative;
    color: #ffe4a0;
    font-weight: 800;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: start;
    gap: 3px;
    padding: 0 68px 0 248px;
    border: none;
    background: url("drift_memory/ui/parts/skill_button_medium.png") center / 100% 100% no-repeat;
    box-shadow: none;
    font-family: 'Shippori Mincho', serif;
    text-align: left;
}

.drift-memory-hero-skill-mark {
    position: absolute;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(56, 164, 255, 0.42)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

.drift-memory-hero-skill-mark--new {
    width: clamp(76px, 8.2vw, 98px);
    left: clamp(76px, 8.8vw, 104px);
    top: 50%;
    transform: translateY(-50%);
}

.drift-memory-hero-skill-new strong {
    color: #ffe6a8;
    font-size: 15px;
    line-height: 1.15;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.88);
}

.drift-memory-hero-skill-new .drift-memory-hero-skill-slot-title {
    color: #d9e6ff;
    font-size: 24px;
    line-height: 1.18;
    white-space: normal;
    text-align: left;
    font-weight: 800;
}

.drift-memory-hero-skill-new small {
    color: #cfc6b5;
    font-size: 15px;
    line-height: 1.35;
    max-width: 100%;
}

.drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-list {
    width: min(720px, 100%);
    max-height: none;
    overflow: visible;
    gap: 8px;
}

.drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row {
    width: 100%;
    aspect-ratio: 2005 / 323;
    min-height: 0;
    padding: 0 48px 0 170px;
    position: relative;
    border: none;
    border-radius: 0;
    background: url("drift_memory/ui/parts/skill_button_long.png") center / 100% 100% no-repeat;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: start;
    align-content: center;
    gap: 3px;
    color: #ffe7ad;
    font-family: 'Shippori Mincho', serif;
    box-shadow: none;
}

.drift-memory-hero-skill-mark--slot {
    width: clamp(46px, 5.4vw, 62px);
    left: clamp(52px, 6.6vw, 72px);
    top: 50%;
    transform: translateY(-50%);
}

.drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row strong {
    color: #ffe6a8;
    font-size: 14px;
    line-height: 1.15;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.88);
}

.drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row .drift-memory-hero-skill-slot-title {
    color: #d9e6ff;
    font-size: 22px;
    line-height: 1.18;
    white-space: normal;
    text-align: left;
    font-weight: 800;
}

.drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row.pending-confirm {
    filter: brightness(1.15) drop-shadow(0 0 12px rgba(255, 210, 112, 0.46));
}

.drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row small {
    color: #cfc6b5;
    font-size: 14px;
    line-height: 1.35;
    max-width: 100%;
}

.drift-memory-hero-skill-confirm {
    width: min(720px, 100%);
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    display: grid;
    gap: 6px;
    justify-items: center;
    box-shadow: none;
}

#driftMemorySkillRemovalConfirm {
    width: min(720px, 100%);
    margin: 0 auto;
    justify-self: center;
    text-align: center;
}

#driftMemorySkillRemovalConfirm .drift-memory-hero-skill-confirm-title,
#driftMemorySkillRemovalConfirm .drift-memory-hero-skill-confirm-text {
    width: 100%;
    text-align: center;
}

#driftMemorySkillRemovalConfirm .drift-memory-hero-skill-confirm-actions {
    margin: 0 auto;
}

.drift-memory-hero-skill-confirm.hidden {
    display: none;
}

.drift-memory-hero-skill-confirm-title {
    color: #ffe4a0;
    font-size: 17px;
    font-weight: 800;
}

.drift-memory-hero-skill-confirm-text {
    color: #d9e6ff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.drift-memory-hero-skill-confirm-actions {
    display: grid;
    grid-template-columns: repeat(2, 170px);
    gap: 14px;
    width: max-content;
    max-width: 100%;
    justify-content: center;
}

.drift-memory-hero-skill-confirm-actions .drift-memory-modal-primary,
.drift-memory-hero-skill-confirm-actions .drift-memory-modal-secondary,
.drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillSkipBtn,
.drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillTargetDetailBtn {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1790 / 401;
    padding: 0 24px;
    border: none;
    border-radius: 0;
    display: grid;
    place-items: center;
    background: url("drift_memory/ui/parts/skill_button_small.png") center / 100% 100% no-repeat;
    color: #fff0c4;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.86);
    box-shadow: none;
}

.drift-memory-hero-skill-confirm-actions .drift-memory-modal-primary,
.drift-memory-hero-skill-confirm-actions .drift-memory-modal-secondary {
    grid-column: auto !important;
    width: 170px;
    padding: 0 16px;
}

.drift-memory-hero-skill-confirm-actions .drift-memory-modal-primary:hover,
.drift-memory-hero-skill-confirm-actions .drift-memory-modal-secondary:hover,
.drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillSkipBtn:hover,
.drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillTargetDetailBtn:hover {
    filter: brightness(1.12);
}

.drift-memory-hero-skill-replace-panel .drift-memory-modal-actions {
    grid-template-columns: repeat(2, minmax(160px, 260px));
    gap: 14px;
    justify-items: center;
    justify-content: center;
    width: 100%;
}

.drift-memory-hero-skill-replace-panel.is-confirming {
    gap: 7px;
}

.drift-memory-hero-skill-replace-panel.is-confirming .drift-memory-modal-actions {
    display: none;
}

.drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillSkipBtn,
.drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillTargetDetailBtn {
    min-width: 180px;
    width: min(260px, 100%);
}

.map-shop-card-option.free-recruit {
    border-color: rgba(124, 212, 252, 0.24);
    box-shadow: none;
}

.map-shop-card-option.free-recruit.selected {
    border-color: rgba(255, 230, 148, 0.98);
    box-shadow: 0 0 0 1px rgba(255, 230, 148, 0.38), 0 0 14px rgba(255, 210, 112, 0.46);
}

.map-shop-card-option.free-recruit .map-shop-card-price-label {
    color: #ffe8a8;
    text-shadow: 0 0 10px rgba(255, 221, 140, 0.7);
}

.map-shop-power-item.free-recruit {
    border-color: rgba(255, 230, 148, 0.86);
    box-shadow:
        inset 0 0 0 1px rgba(255, 238, 174, 0.28),
        0 0 18px rgba(255, 218, 124, 0.46);
}

.drift-memory-material-row strong {
    color: #ffe0a0;
    font-family: 'Cinzel', serif;
    font-size: calc(20px * var(--drift-font-scale));
}

.drift-memory-material-row span {
    font-size: calc(15px * var(--drift-font-scale));
}

.drift-memory-facility-upgrade-panel {
    width: min(900px, 96vw);
    max-height: 90vh;
    overflow-y: auto;
}

#driftMemoryShopCloseBtn {
    grid-column: 1 / -1;
    width: min(100%, 300px);
    margin: 0 auto;
    min-height: 0;
    aspect-ratio: 2172 / 724;
    padding: 0;
    background-image: var(--drift-button-normal-long);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#driftMemoryShopCloseBtn:hover {
    background-image: var(--drift-button-hover-long);
    filter: brightness(1.1);
}

#driftMemoryInstitutionInfoCloseBtn {
    grid-column: 1 / -1;
    width: min(100%, 300px);
    margin: 0 auto;
    min-height: 0;
    aspect-ratio: 2172 / 724;
    padding: 0;
    background-image: var(--drift-button-normal-long);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#driftMemoryInstitutionInfoCloseBtn:hover {
    background-image: var(--drift-button-hover-long);
    filter: brightness(1.1);
}

.drift-memory-inheritance-help-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 10px 0 18px;
    font-size: 13px;
    line-height: 1.7;
    color: #ddd0b8;
}

.drift-memory-help-section {
    border-left: 3px solid rgba(193, 143, 76, 0.55);
    padding-left: 12px;
}

.drift-memory-help-heading {
    font-size: 14px;
    font-weight: 800;
    color: #f1ca84;
    margin-bottom: 4px;
}

.drift-memory-inheritance-help-body p {
    margin: 0;
}

.drift-memory-help-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 12px;
}

.drift-memory-help-table th,
.drift-memory-help-table td {
    border: 1px solid rgba(193, 143, 76, 0.3);
    padding: 4px 8px;
    text-align: center;
}

.drift-memory-help-table th {
    background: rgba(193, 143, 76, 0.18);
    color: #f1ca84;
    font-weight: 700;
}

.drift-memory-shop-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.drift-memory-shop-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(124, 212, 252, 0.22);
    background: rgba(8, 14, 26, 0.72);
}

.drift-memory-shop-item .drift-memory-modal-primary {
    margin-top: auto;
}

.drift-memory-facility-upgrade-panel [data-upgrade-key] {
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.1;
}

.drift-memory-upgrade-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.drift-memory-upgrade-icons {
    display: flex;
    gap: 4px;
}

.drift-memory-upgrade-icon {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(235, 199, 128, 0.42);
    border-radius: 6px;
    background:
        linear-gradient(145deg, rgba(25, 36, 58, 0.64), rgba(5, 10, 18, 0.84));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 14px rgba(255, 222, 146, 0.08);
}

.drift-memory-shop-item-name {
    color: #ffe5a8;
    font-weight: 900;
    line-height: 1.35;
}

.upgrade-cost-ok {
    color: #6ddc8a;
    font-weight: 700;
}

.upgrade-cost-ng {
    color: #f06060;
    font-weight: 700;
}

.drift-memory-shop-item-desc {
    color: #c9dbef;
    font-size: calc(13px * var(--drift-font-scale));
    line-height: 1.45;
}

.drift-memory-upgrade-gate-reason {
    color: #d8caa8;
    font-weight: 700;
}

.drift-memory-upgrade-gate-reason.is-wave-locked {
    color: #ff6666;
    font-weight: 900;
    text-shadow: 0 0 7px rgba(150, 0, 0, 0.7);
}

.drift-memory-contract-panel {
    width: min(1120px, calc(100vw - 36px));
    max-height: min(90vh, 860px);
}

.drift-memory-contract-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 12px;
    color: #ffe5a8;
    font-size: calc(17px * var(--drift-font-scale));
    font-weight: 800;
}

.drift-memory-contract-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: #d9c28f;
    font-size: calc(13px * var(--drift-font-scale));
    font-weight: 800;
}

.drift-memory-contract-sort select {
    min-width: 150px;
    padding: 5px 8px;
    border: 1px solid rgba(193, 143, 76, 0.62);
    background: rgba(8, 16, 24, 0.92);
    color: #ffe5a8;
    font: inherit;
}

.drift-memory-contract-summary .is-short,
.drift-memory-contract-shortage {
    color: #f06060;
}

.drift-memory-contract-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    max-height: min(58vh, 560px);
    overflow: auto;
    padding-right: 4px;
}

.drift-memory-contract-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(193, 143, 76, 0.36);
    background: rgba(5, 11, 18, 0.72);
}

.drift-memory-contract-card-host {
    position: relative;
    width: 166px;
    height: 242px;
    justify-self: center;
    overflow: hidden;
}

.drift-memory-contract-card-host .card {
    transform: scale(0.7);
    transform-origin: top left;
}

.drift-memory-contract-detail {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.drift-memory-contract-name {
    color: #ffe5a8;
    font-size: calc(22px * var(--drift-font-scale));
    font-weight: 900;
    line-height: 1.3;
}

.drift-memory-contract-stats,
.drift-memory-contract-cost {
    color: #c9dbef;
    font-size: calc(16px * var(--drift-font-scale));
    line-height: 1.45;
}

.drift-memory-contract-cost-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.drift-memory-contract-inheritance {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 8px;
    border: 1px solid rgba(116, 185, 255, 0.46);
    background: rgba(18, 34, 54, 0.72);
    color: #d9ecff;
    font-size: calc(12px * var(--drift-font-scale));
    line-height: 1.35;
}

.drift-memory-contract-inheritance-badge {
    color: #ffe5a8;
    font-weight: 800;
}

.drift-memory-contract-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.drift-memory-contract-choice-btn {
    min-height: 42px;
    border: 1px solid rgba(193, 143, 76, 0.56);
    background: rgba(20, 26, 34, 0.92);
    color: #f1ca84;
    font-weight: 800;
}

.drift-memory-contract-choice-btn.active {
    border-color: rgba(241, 202, 132, 0.86);
    background: linear-gradient(180deg, rgba(165, 98, 29, 0.94), rgba(106, 60, 18, 0.96));
    color: #fff0c8;
}

.drift-memory-contract-choice-btn.active.danger {
    border-color: rgba(224, 96, 96, 0.78);
    background: linear-gradient(180deg, rgba(98, 38, 34, 0.95), rgba(48, 20, 20, 0.96));
}

.drift-memory-contract-footer {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 8px 18px;
    margin-top: 4px;
    padding-bottom: 14px;
    transform: translateY(-20px);
}

.drift-memory-contract-footer .drift-memory-modal-primary {
    grid-column: auto;
    width: 100%;
    justify-self: start;
}

.drift-memory-contract-footer .drift-memory-contract-shortage {
    justify-self: start;
    text-align: left;
}

@media (max-width: 1280px), (max-height: 780px) {
    .drift-memory-result-modal,
    .drift-memory-event-modal {
        padding: 8px;
        box-sizing: border-box;
        overflow: auto;
    }

    .drift-memory-hero-skill-replace-panel {
        width: min(1040px, calc(100vw - 24px), calc((100dvh - 28px) * 1342 / 904));
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 28px);
        gap: 6px;
        padding: clamp(38px, 5.1vw, 58px) clamp(50px, 6.2vw, 76px) clamp(24px, 3.4vw, 36px);
    }

    .drift-memory-hero-skill-replace-panel .drift-memory-modal-title {
        font-size: 30px;
        line-height: 1.15;
    }

    .drift-memory-hero-skill-replace-panel .drift-memory-modal-body,
    .drift-memory-hero-skill-replace-panel .drift-memory-modal-note {
        font-size: 13px;
        line-height: 1.35;
    }

    .drift-memory-hero-skill-new {
        width: min(500px, 76%);
        padding-left: 210px;
        padding-right: 52px;
        gap: 1px;
    }

    .drift-memory-hero-skill-mark--new {
        width: clamp(60px, 6.6vw, 78px);
        left: clamp(62px, 7.2vw, 82px);
    }

    .drift-memory-hero-skill-new strong,
    .drift-memory-hero-skill-new small,
    .drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row strong,
    .drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row small {
        font-size: 12px;
        line-height: 1.2;
    }

    .drift-memory-hero-skill-new .drift-memory-hero-skill-slot-title {
        font-size: 19px;
        line-height: 1.12;
    }

    .drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-list {
        width: min(640px, 92%);
        gap: 5px;
    }

    .drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row {
        padding-left: 138px;
        padding-right: 38px;
        gap: 1px;
    }

    .drift-memory-hero-skill-mark--slot {
        width: clamp(38px, 4.6vw, 50px);
        left: clamp(44px, 5.4vw, 58px);
    }

    .drift-memory-hero-skill-replace-panel .drift-memory-skill-remove-row .drift-memory-hero-skill-slot-title {
        font-size: 18px;
        line-height: 1.12;
    }

    .drift-memory-hero-skill-replace-panel .drift-memory-modal-actions {
        grid-template-columns: repeat(2, minmax(140px, 210px));
        gap: 10px;
    }

    .drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillSkipBtn,
    .drift-memory-hero-skill-replace-panel #driftMemoryHeroSkillTargetDetailBtn {
        font-size: 13px;
        padding: 0 18px;
    }

    .drift-memory-contract-panel {
        width: min(1080px, calc(100vw - 24px));
        max-height: calc(100dvh - 24px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 16px;
    }

    .drift-memory-contract-panel .drift-memory-modal-title {
        font-size: 22px;
    }

    .drift-memory-contract-panel .drift-memory-modal-body,
    .drift-memory-contract-panel .drift-memory-modal-note {
        font-size: 13px;
        line-height: 1.35;
    }

    .drift-memory-contract-summary {
        margin-top: 8px;
        gap: 8px 14px;
        font-size: 15px;
    }

    .drift-memory-contract-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        gap: 8px;
        margin-top: 10px;
    }

    .drift-memory-contract-row {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 10px;
        padding: 8px;
    }

    .drift-memory-contract-card-host {
        width: 124px;
        height: 182px;
    }

    .drift-memory-contract-card-host .card {
        transform: scale(0.525);
    }

    .drift-memory-contract-name {
        font-size: 18px;
    }

    .drift-memory-contract-stats,
    .drift-memory-contract-cost {
        font-size: 13px;
    }

    .drift-memory-contract-choice-btn {
        min-height: 34px;
        font-size: 13px;
    }

    .drift-memory-contract-footer {
        flex: 0 0 auto;
        transform: none;
        margin-top: 8px;
        padding-bottom: 0;
    }
}

/* ギルド人材ショップ: カードを5列 x 2段で表示 */
.drift-recruit-list .map-shop-offer-layout {
    grid-template-columns: 1fr;
    min-height: 0;
}

.drift-recruit-list .map-shop-offer-rail {
    display: none;
}

.drift-recruit-list .map-shop-offer-main {
    min-width: 0;
}

.drift-recruit-list .map-shop-card-grid,
body.fixed-canvas-mode .drift-recruit-list .map-shop-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.drift-recruit-list .map-shop-card-option {
    min-height: 320px;
    padding: 8px 8px 10px;
    overflow: hidden;
}

.drift-recruit-list .map-shop-card-frame {
    height: 258px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.drift-recruit-list .map-shop-card-view {
    transform: scale(0.72) !important;
    transform-origin: center top;
    flex: 0 0 auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: -98px;
}

.drift-shop-overlay {
    position: absolute; inset: 0;
    background: rgba(2, 4, 8, 0.97);
    display: flex; flex-direction: column;
    color: #c8b98c; font-family: inherit;
}
.drift-shop-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(200,185,140,0.2);
    gap: 16px;
}
.drift-shop-title { font-size: 1.3em; font-weight: 800; }
.drift-shop-money { font-size: 0.95em; color: #f0d080; }
.drift-shop-leave-btn {
    background: rgba(30,25,15,0.8); border: 1px solid rgba(200,185,140,0.4);
    color: #c8b98c; padding: 8px 18px; border-radius: 3px; cursor: pointer;
    font-size: 0.9em; margin-left: auto;
}
.drift-shop-leave-btn:hover { border-color: #c8b98c; }
.drift-shop-body {
    flex: 1; display: flex; gap: 20px; padding: 16px 24px; overflow: hidden;
}
.drift-shop-offers { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.drift-shop-section-label {
    font-size: 0.72em; letter-spacing: 0.12em; color: #7a6a44; margin-bottom: 6px; text-transform: uppercase;
}
.drift-shop-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.drift-shop-offer-btn {
    background: rgba(25,20,10,0.85); border: 1px solid rgba(200,185,140,0.2);
    color: #c8b98c; border-radius: 4px; padding: 8px 6px;
    cursor: pointer; display: flex; flex-direction: column; align-items: center;
    gap: 6px; text-align: center; transition: border-color 0.15s, background 0.15s;
}
.drift-shop-offer-btn:hover { border-color: rgba(200,185,140,0.5); background: rgba(45,35,15,0.85); }
.drift-shop-offer-btn.selected { border-color: #c8b98c; background: rgba(70,55,22,0.85); }
.drift-shop-offer-btn.purchased { opacity: 0.35; cursor: default; pointer-events: none; }
.drift-shop-offer-thumb {
    width: 56px; height: 56px; border-radius: 3px;
    background-size: cover; background-position: center;
    background-color: rgba(15,10,5,0.7);
}
.drift-shop-offer-name { font-size: 0.78em; font-weight: 700; line-height: 1.25; }
.drift-shop-offer-price { font-size: 0.72em; color: #f0d080; }

.drift-shop-detail {
    width: 260px; flex-shrink: 0;
    display: flex; flex-direction: column; gap: 10px;
    overflow-y: auto;
}
.drift-shop-detail-empty { color: #6a5a38; font-size: 0.9em; padding: 12px 0; }
.drift-shop-detail-name { font-size: 1.05em; font-weight: 800; }
.drift-shop-detail-meta { font-size: 0.82em; color: #8a7a52; }
.drift-shop-detail-desc { font-size: 0.85em; line-height: 1.55; color: #a89870; }
.drift-shop-detail-price { font-size: 1em; color: #f0d080; font-weight: 700; }
.drift-shop-detail-warn { font-size: 0.8em; color: #e06060; }
.drift-shop-buy-btn {
    background: linear-gradient(180deg,#7a6030 0%,#3a2808 100%);
    border: 1px solid #c8a040; color: #f0e0a0;
    padding: 10px 14px; border-radius: 4px; cursor: pointer; font-size: 0.9em;
    font-weight: 700; transition: opacity 0.15s;
}
.drift-shop-buy-btn:hover:not(:disabled) { opacity: 0.85; }
.drift-shop-buy-btn:disabled { opacity: 0.35; cursor: default; }

/* ── ギルド人材グリッド ── */
.drift-recruit-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; overflow-y: auto; align-content: start;
}
.drift-recruit-card-wrap {
    cursor: pointer; border: 2px solid transparent;
    border-radius: 4px; overflow: hidden; transition: border-color 0.15s;
}
.drift-recruit-card-wrap.selected { border-color: #c8b98c; }
.drift-recruit-cost-tag {
    font-size: 0.72em; color: #c8b98c; text-align: center;
    padding: 2px 0; background: rgba(0,0,0,0.5);
}

html.controller-input-active,
html.controller-input-active *,
html.controller-input-active::before,
html.controller-input-active::after,
html.controller-input-active body,
html.controller-input-active body *,
html.controller-input-active #gameViewportShell,
html.controller-input-active #gameViewportShell *,
html.controller-input-active #gameCanvasRoot,
html.controller-input-active #gameCanvasRoot *,
body.controller-input-active,
body.controller-input-active *,
body.controller-input-active::before,
body.controller-input-active::after,
body.controller-input-active #gameViewportShell,
body.controller-input-active #gameViewportShell *,
body.controller-input-active #gameCanvasRoot,
body.controller-input-active #gameCanvasRoot * {
    cursor: none !important;
}


/* =========================
   COUNTER CLASH STANDALONE TITLE / OPTION
   ========================= */

.cc-title-screen {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    z-index: 3000;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 38%, rgba(22, 86, 50, 0.38), rgba(0, 0, 0, 0) 42%),
        linear-gradient(180deg, rgba(3, 15, 11, 0.82), rgba(0, 0, 0, 0.94)),
        url('material/table.png') center/cover no-repeat;
}

.cc-title-screen.hidden { display: none; }

.cc-title-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.68) 100%),
        linear-gradient(180deg, rgba(255, 218, 138, 0.05), rgba(0, 0, 0, 0.38));
}

.cc-title-logo {
    position: absolute;
    left: 50%;
    top: 136px;
    width: 1040px;
    max-height: 340px;
    object-fit: contain;
    transform: translateX(-50%);
    filter:
        drop-shadow(0 0 18px rgba(250, 230, 170, 0.18))
        drop-shadow(0 18px 28px rgba(0, 0, 0, 0.72));
}

.cc-title-menu {
    position: absolute;
    left: 50%;
    top: 535px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 440px;
}

.cc-title-btn {
    position: relative;
    width: 100%;
    min-height: 74px;
    padding: 0 28px;
    border: 1px solid rgba(222, 190, 112, 0.62);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(22, 39, 34, 0.96), rgba(7, 13, 12, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 230, 150, 0.18), rgba(0, 0, 0, 0) 58%);
    color: #f3e7c2;
    font-family: 'Cinzel', 'Shippori Mincho', serif;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
    cursor: pointer;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.56),
        inset 0 1px 0 rgba(255, 244, 184, 0.22),
        inset 0 -16px 28px rgba(0, 0, 0, 0.36);
    transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.cc-title-btn::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(112, 195, 126, 0.18);
    border-radius: 10px;
    pointer-events: none;
}

.cc-title-btn::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 231, 160, 0.36), transparent);
    pointer-events: none;
}

.cc-title-btn:hover,
.cc-title-btn:focus-visible {
    transform: translateY(-2px);
    color: #fff6d6;
    border-color: rgba(255, 224, 132, 0.94);
    filter: brightness(1.08);
    box-shadow:
        0 0 0 2px rgba(255, 224, 132, 0.2),
        0 0 26px rgba(91, 255, 137, 0.26),
        0 12px 34px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 250, 205, 0.34),
        inset 0 -16px 28px rgba(0, 0, 0, 0.34);
}

.cc-title-btn:active { transform: translateY(1px); }

.cc-title-btn.primary {
    background:
        linear-gradient(180deg, rgba(59, 79, 38, 0.98), rgba(15, 33, 18, 0.98)),
        radial-gradient(circle at 50% 0%, rgba(255, 238, 145, 0.22), rgba(0, 0, 0, 0) 62%);
    border-color: rgba(235, 205, 116, 0.76);
}

.cc-title-subtext {
    position: absolute;
    left: 50%;
    top: 890px;
    transform: translateX(-50%);
    width: 900px;
    color: rgba(230, 220, 188, 0.74);
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
    font-size: 1rem;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: center;
}

.cc-language-select {
    position: absolute;
    right: 54px;
    bottom: 42px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(230, 220, 188, 0.82);
    font-family: 'Cinzel', 'Shippori Mincho', serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.cc-language-select select {
    min-width: 138px;
    min-height: 38px;
    border: 1px solid rgba(222, 190, 112, 0.54);
    border-radius: 8px;
    background: rgba(5, 12, 12, 0.92);
    color: #f3e7c2;
    font: inherit;
    padding: 0 10px;
}

.cc-option-modal {
    position: absolute;
    inset: 0;
    z-index: 3200;
    width: 1920px;
    height: 1080px;
}

.cc-option-modal.hidden { display: none; }

.cc-option-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(3px);
}

.cc-option-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 580px;
    padding: 22px 24px 24px;
    border: 1px solid rgba(222, 190, 112, 0.58);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(19, 32, 29, 0.98), rgba(7, 10, 11, 0.98));
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 244, 184, 0.18);
    color: #f4e7c3;
    font-family: 'Shippori Mincho', 'Noto Sans JP', serif;
}

.cc-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(222, 190, 112, 0.28);
}

.cc-option-title {
    font-family: 'Cinzel', serif;
    font-size: 1.7rem;
    letter-spacing: 0.18em;
}

.cc-option-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(220, 190, 120, 0.46);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: #f4e7c3;
    font-size: 1.4rem;
    cursor: pointer;
}

.cc-option-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cc-option-row {
    display: grid;
    grid-template-columns: 72px 1fr 54px;
    align-items: center;
    gap: 14px;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

.cc-option-row input[type="range"] { width: 100%; }
.cc-option-row strong { text-align: right; font-family: 'Cinzel', serif; }

.cc-option-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    letter-spacing: 0.12em;
}

.cc-option-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.cc-option-btn {
    min-width: 128px;
    min-height: 44px;
    border: 1px solid rgba(222, 190, 112, 0.54);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(35, 48, 55, 0.95), rgba(16, 23, 29, 0.96));
    color: #f4e7c3;
    font-family: 'Cinzel', 'Shippori Mincho', serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.cc-option-btn.primary {
    background: linear-gradient(180deg, rgba(67, 86, 42, 0.95), rgba(21, 38, 20, 0.96));
}

.cc-option-btn:hover,
.cc-option-close:hover {
    border-color: rgba(255, 224, 132, 0.88);
    box-shadow: 0 0 18px rgba(91, 255, 137, 0.18);
}