:root {
    --bg-color: #0d0d0d;
    --panel-bg: #141414;
    --border-color: #4a4a4a;
    --text-color: #e8e8e8;
    --accent-color: #00ffcc;
    --danger-color: #ff3366;
    --warning-color: #ffcc00;
    --success-color: #33ff66;
    --cap-color: #ff66ff;
    --font-display: 'Cinzel', Palatino, 'Palatino Linotype', serif;
    --font-ui: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', Consolas, monospace;
    --rarity-common: #c8c8c8;
    --rarity-magic: #4d9fff;
    --rarity-rare: #ffd700;
    --rarity-legendary: #ff8c00;
    --arena-sky: #12161c;
    --arena-fog: rgba(80, 120, 90, 0.18);
    --arena-floor: #1a2420;
    --arena-glow: rgba(0, 255, 204, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-ui); }

body {
    background:
        radial-gradient(1200px 600px at 50% -10%, #123 0%, transparent 55%),
        var(--bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    user-select: none;
}

#app-shell {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: calc(100vw - 12px);
    height: min(1080px, calc(100vh - 8px));
}

.paperdoll {
    --pd-gold: #e8c96a;
    position: relative;
    width: 248px;
    flex: 0 0 248px;
    align-self: flex-start;
    height: 52%;
    min-height: 320px;
    padding: 12px 10px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, #12141a 0%, #0a0b0e 100%) padding-box,
        linear-gradient(145deg, #e8c96a 0%, #4a4a4a 42%, #00ffcc 100%) border-box;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 255, 204, 0.08),
        inset 0 1px 0 rgba(232, 201, 106, 0.12);
}
.paperdoll.hidden { display: none !important; }
.pd-corner {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--pd-gold);
    border-style: solid;
    opacity: 0.7;
    pointer-events: none;
    z-index: 3;
}
.pd-tl { top: 7px; left: 7px; border-width: 2px 0 0 2px; }
.pd-tr { top: 7px; right: 7px; border-width: 2px 2px 0 0; }
.pd-bl { bottom: 7px; left: 7px; border-width: 0 0 2px 2px; }
.pd-br { bottom: 7px; right: 7px; border-width: 0 2px 2px 0; }
.paperdoll-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 8px 6px;
    flex: 0 0 auto;
}
.pd-header-title {
    color: var(--pd-gold);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 0.22em;
    text-shadow: 0 0 10px rgba(232, 201, 106, 0.35);
    white-space: nowrap;
}
.pd-header-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 201, 106, 0.55), transparent);
}
.paperdoll-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border-radius: 8px;
    background:
        radial-gradient(ellipse 80% 55% at 50% 38%, rgba(0, 255, 204, 0.07), transparent 70%),
        radial-gradient(ellipse 60% 30% at 50% 92%, rgba(232, 201, 106, 0.08), transparent 70%),
        linear-gradient(180deg, #0e1014 0%, #08090c 100%);
    box-shadow: inset 0 0 0 1px rgba(232, 201, 106, 0.12), inset 0 0 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.paperdoll-figure {
    position: absolute;
    left: 50%;
    top: 10px;
    width: 72%;
    height: 70%;
    transform: translateX(calc(-50% - 2px));
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.paperdoll-hero {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 26px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    transform: translateX(-50%);
    cursor: help;
    pointer-events: auto;
}
.paperdoll-hero-sprite {
    width: 72px;
    height: 72px;
    pointer-events: none;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent-color) 45%, transparent));
    transition: transform 0.15s ease, filter 0.15s ease;
}
.paperdoll-hero:hover .paperdoll-hero-sprite {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent-color) 65%, transparent));
}

.paperdoll .equipment-bar {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    bottom: 110px;
    z-index: 1;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    pointer-events: none;
}
.paperdoll .equip-slot {
    position: absolute;
    left: var(--slot-x, 50%);
    top: var(--slot-y, 50%);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(232, 201, 106, 0.5);
    background-color: #07080a;
    background-image: radial-gradient(circle at 50% 30%, #22242c, #07080a 68%);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.75),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 2px rgba(12, 12, 14, 0.9),
        0 0 0 3px rgba(232, 201, 106, 0.18);
    z-index: 2;
    overflow: visible;
    pointer-events: auto;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.paperdoll .equip-slot:hover {
    background-color: #101218;
    background-image: radial-gradient(circle at 50% 30%, #2c3038, #101218 68%);
    border-color: var(--accent-color);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 2px rgba(12, 12, 14, 0.9),
        0 0 0 3px rgba(0, 255, 204, 0.45),
        0 0 14px rgba(0, 255, 204, 0.25);
}
.paperdoll .equip-slot.equip-slot-preview {
    background-color: #0a0b0e;
    background-image: radial-gradient(
        circle at 50% 30%,
        color-mix(in srgb, var(--preview-color, var(--accent-color)) 32%, #2a2c34),
        #0a0b0e 72%
    );
    border-color: var(--preview-color, var(--accent-color));
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.55),
        0 0 0 2px rgba(12, 12, 14, 0.9),
        0 0 0 3px var(--preview-color, var(--accent-color)),
        0 0 16px color-mix(in srgb, var(--preview-color, var(--accent-color)) 55%, transparent);
}
.paperdoll .equip-filled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 2px rgba(12, 12, 14, 0.9),
        0 0 0 3px color-mix(in srgb, currentColor 70%, #e8c96a),
        0 0 14px color-mix(in srgb, currentColor 45%, transparent);
}
.paperdoll .equip-label,
.paperdoll .equip-gold { display: none; }
.paperdoll .equipment-bar-selling .equip-filled .equip-gold {
    display: block;
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    font-size: 0.46rem;
    line-height: 1;
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
    padding: 1px 4px;
    border-radius: 3px;
    background: #08090c;
    border: 1px solid rgba(232, 201, 106, 0.35);
    color: #e8c96a;
    text-shadow: none;
}
.paperdoll .equip-icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: auto;
    height: auto;
    line-height: 0;
}
.paperdoll .equip-slot .equip-icon {
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin: 0;
    transform: translateY(0.1em);
}
.paperdoll .equip-slot:hover .equip-icon {
    transform: translateY(0.1em) scale(1.08);
}
.paperdoll .equip-slot:not(.equip-filled) .equip-icon {
    opacity: 0.28;
    filter: grayscale(0.35) saturate(0.55);
}

.paperdoll .equip-slot[data-slot-id="helmet"]    { --slot-x: 49.3%; --slot-y: 14%; }
.paperdoll .equip-slot[data-slot-id="amulet"]    { --slot-x: 21.1%; --slot-y: 7%; }
.paperdoll .equip-slot[data-slot-id="cloak"]     { --slot-x: 77.5%; --slot-y: 7%; }
.paperdoll .equip-slot[data-slot-id="shoulders"] { --slot-x: 21.1%; --slot-y: 22%; }
.paperdoll .equip-slot[data-slot-id="gloves"]    { --slot-x: 77.5%; --slot-y: 22%; }
.paperdoll .equip-slot[data-slot-id="chest"]     { --slot-x: 49.3%; --slot-y: 30%; }
.paperdoll .equip-slot[data-slot-id="shield"]    { --slot-x: 77.5%; --slot-y: 42%; }
.paperdoll .equip-slot[data-slot-id="weapon"]    { --slot-x: 21.1%; --slot-y: 50%; }
.paperdoll .equip-slot[data-slot-id="pants"]     { --slot-x: 49.3%; --slot-y: 54%; }
.paperdoll .equip-slot[data-slot-id="ring"]      { --slot-x: 77.5%; --slot-y: 58%; }
.paperdoll .equip-slot[data-slot-id="boots"]     { --slot-x: 49.3%; --slot-y: 72%; }

.stats-panel {
    --pd-gold: #e8c96a;
    position: relative;
    width: 272px;
    flex: 0 0 272px;
    align-self: flex-start;
    height: 52%;
    min-height: 320px;
    padding: 12px 10px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid transparent;
    background:
        linear-gradient(180deg, #12141a 0%, #0a0b0e 100%) padding-box,
        linear-gradient(145deg, #e8c96a 0%, #4a4a4a 42%, #00ffcc 100%) border-box;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 12px 32px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 255, 204, 0.08),
        inset 0 1px 0 rgba(232, 201, 106, 0.12);
}
.stats-panel.hidden { display: none !important; }
.stats-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}
.stats-panel .stats-categories-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stats-panel .stat-category {
    background: rgba(8, 9, 12, 0.72);
    border-color: rgba(232, 201, 106, 0.18);
}
.stats-panel .stance-modifiers {
    margin: 0 0 6px;
}

.tooltip {
    position: fixed;
    z-index: 9999;
    max-width: min(320px, calc(100vw - 16px));
    padding: 8px 10px;
    background: #111;
    color: #fff;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.82rem;
    line-height: 1.35;
    white-space: pre-line;
    pointer-events: none;
    box-shadow: 0 0 10px rgba(0,255,204,0.35);
}
.tooltip[hidden] { display: none !important; }
.tooltip .tip-passive {
    color: var(--accent-color);
    font-style: italic;
}
.tooltip .tip-active {
    color: #c8a0ff;
}
.tooltip .tip-hero-name {
    font-weight: bold;
}

#game-container {
    width: min(1140px, calc(100vw - 12px));
    height: 100%;
    background-color: #000;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 8px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 255, 204, 0.08);
    flex: 1 1 auto;
    min-width: 0;
}
#app-shell:has(#paperdoll:not(.hidden)) #game-container,
#app-shell:has(#player-panel:not(.hidden)) #game-container {
    width: min(1140px, calc(100vw - 272px));
    height: 100%;
}
#app-shell:has(#paperdoll:not(.hidden)):has(#player-panel:not(.hidden)) #game-container {
    width: min(1140px, calc(100vw - 542px));
}

#main-game {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    min-height: 0;
    position: relative;
}

#main-game.hidden { display: none !important; }

.screen {
    position: absolute;
    inset: 0;
    background-color: #000;
    z-index: 100;
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
}
#hero-selection h1 { margin-bottom: 2px; }
#hero-selection .subtitle { margin: 2px 0 0; }
#hero-selection .hi-score-inline { margin-bottom: 8px; }
#hero-selection:not(.hidden) ~ #fullscreen-btn {
    display: none;
}
.hidden { display: none !important; }

h1, h2, h3 {
    text-align: center;
    color: var(--accent-color);
    text-shadow: 0 0 6px var(--accent-color);
    font-family: var(--font-display);
    font-weight: 700;
}
h1 { font-size: 1.55rem; letter-spacing: 0.08em; }
h2 { font-size: 1.15rem; margin: 0; }
.subtitle { text-align: center; color: #9aa; font-size: 0.92rem; margin: 6px 0 2px; }
.hi-score-inline { text-align: center; color: var(--warning-color); font-size: 0.92rem; margin-bottom: 10px; }

.btn {
    background-color: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    padding: 7px 14px;
    font-size: 0.95rem;
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.06em;
    transition: 0.15s ease;
}
.btn:hover:not(:disabled):not(.stance-btn) {
    background-color: var(--accent-color);
    color: #000;
    box-shadow: 0 0 10px var(--accent-color);
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.small-btn { padding: 4px 10px; font-size: 0.82rem; }

.icon-btn {
    position: absolute;
    top: 12px;
    z-index: 120;
    min-width: 58px;
    height: 26px;
    padding: 0 6px;
    font-size: 0.78rem;
}
.icon-btn-left { left: 12px; right: auto; }
.icon-btn-right { right: 12px; left: auto; }
.audio-btns {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 120;
    display: flex;
    gap: 6px;
}
.audio-btns .icon-btn {
    position: static;
    min-width: 84px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}
.audio-btns .icon-btn.is-audio-off {
    opacity: 0.55;
    color: #888;
    border-color: #555;
}
.icon-btn-continue {
    right: calc(12px + 58px + 8px);   /* 8px gap + RESET width */
    left: auto;
}
#continue-run-btn {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
#continue-run-btn:hover:not(:disabled) {
    background: rgba(0, 255, 204, 0.15);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.35);
}
.fullscreen-hint {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 125;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: #666;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    user-select: none;
}
.fullscreen-hint:hover,
.fullscreen-hint:focus-visible {
    color: var(--accent-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.25);
    outline: none;
}
#app-shell:fullscreen,
#app-shell:-webkit-full-screen {
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 10px;
    box-sizing: border-box;
}
#app-shell:fullscreen #game-container,
#app-shell:-webkit-full-screen #game-container {
    width: auto;
    height: 100%;
    max-width: none;
    border-radius: 8px;
}
#game-container:fullscreen,
#game-container:-webkit-full-screen {
    width: 100%;
    height: 100%;
    max-width: none;
    border-radius: 0;
    border: none;
}
.icon-btn-danger {
    border-color: #aa3344;
    color: #ff8899;
}
.icon-btn-danger:hover:not(:disabled) {
    background-color: rgba(255, 51, 102, 0.2);
    color: #ffd0d8;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.35);
}

.menu-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-shrink: 0;
}
.hero-select-footer.menu-actions {
    margin-top: 4px;
}
.menu-actions .start-btn-dimmed,
.menu-actions .start-btn-lit {
    margin-top: 0;
}
.menu-overlay {
    position: absolute;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.menu-overlay-box {
    width: min(640px, 100%);
    max-height: min(82vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.menu-overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.menu-overlay-header h2 {
    color: var(--warning-color);
    font-size: 1.1rem;
}
.menu-overlay-hint {
    font-size: 0.78rem;
    color: #999;
    margin-bottom: 8px;
}
.achievements-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    flex: 1;
    min-height: 0;
}
.achievement-row {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 8px 10px;
    background: #0d0d0d;
}
.achievement-row.achievement-done {
    border-color: rgba(51, 255, 102, 0.45);
    background: rgba(51, 255, 102, 0.06);
}
.achievement-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}
.achievement-name {
    font-weight: bold;
    color: #eee;
    font-size: 0.86rem;
}
.achievement-row.achievement-done .achievement-name { color: var(--success-color); }
.achievement-reward {
    font-size: 0.68rem;
    color: var(--warning-color);
    white-space: nowrap;
}
.achievement-desc {
    font-size: 0.72rem;
    color: #aaa;
    margin-bottom: 6px;
}
.achievement-bar-track {
    height: 6px;
    background: #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 3px;
}
.achievement-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #147a4a, var(--success-color));
    transition: width 0.2s ease;
}
.achievement-row.achievement-done .achievement-bar-fill {
    background: var(--success-color);
}
.achievement-progress {
    font-size: 0.65rem;
    color: #777;
    text-align: right;
}

.start-btn-dimmed, .start-btn-lit {
    margin-top: 10px;
    flex-shrink: 0;
    align-self: center;
    min-width: 200px;
}
.start-btn-dimmed { opacity: 0.3; border-color: #555; color: #777; cursor: not-allowed; }
.start-btn-lit { opacity: 1; box-shadow: 0 0 10px var(--accent-color); }

.ascii-art {
    white-space: pre;
    font-weight: bold;
    text-align: center;
    line-height: 1.15;
    font-size: 1.05rem;
    margin: 0;
}

.unit-sprite {
    width: 72px;
    height: 72px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.unit-sprite.portrait-empty,
.unit-sprite[hidden] {
    display: none;
}

.panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 8px 10px;
}

.arena-panel {
    flex: 0 0 auto;
    height: 560px;
    min-height: 560px;
    max-height: 560px;
    border-color: #555;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arena-workspace {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.arena-skill-lines {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    gap: 8px 12px;
    min-width: 0;
    padding: 5px 2px 2px;
    z-index: 6;
}
.arena-skill-lines .control-skill {
    justify-self: start;
    align-items: stretch;
    gap: 3px;
}
.arena-skill-lines .control-speed {
    justify-self: center;
    align-items: stretch;
    gap: 3px;
}
.arena-skill-lines .control-items {
    justify-self: end;
    align-items: stretch;
    gap: 3px;
}
.arena-skill-lines .control-items .potion-bar {
    flex: 0 0 auto;
    align-items: center;
    margin-top: 0;
}
.arena-skill-lines .control-label {
    font-size: 0.7rem;
    line-height: 1;
    text-align: center;
    width: 100%;
    min-height: 0.7rem;
}
.arena-skill-lines .control-skill .control-label,
.arena-skill-lines .control-speed .control-label,
.arena-skill-lines .control-items .control-label {
    text-align: center;
}
.arena-skill-lines .skill-btn-row {
    gap: 4px;
    align-items: flex-start;
    justify-content: center;
}
.arena-skill-lines .skill-btn-wrap {
    align-items: center;
}
.arena-skill-lines .skill-status {
    font-size: 0.62rem;
    justify-content: center;
    min-height: 1em;
    width: 100%;
}
.arena-skill-lines .speed-bar {
    justify-content: center;
    align-items: stretch;
    gap: 4px;
    min-height: 0;
}
.arena-skill-lines .speed-btn-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
}
.arena-skill-lines .skill-btn-row > .skill-btn-wrap > .skill-btn,
.arena-skill-lines .speed-btn,
.arena-skill-lines .pause-btn {
    box-sizing: border-box;
    min-height: 28px;
    height: 28px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.arena-skill-lines .speed-btn {
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
}
.arena-skill-lines .desperate-btn {
    min-width: 0;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
}
.arena-fight-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.arena-ability-footer {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 1.05em;
    margin-top: auto;
}

.arena-banner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: 0.88rem;
    color: var(--text-color);
}
.banner-side { min-height: 1em; }
.banner-right {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}
.banner-stat {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.banner-stat.gold-flash {
    animation: goldFlash 0.45s ease;
}
@keyframes goldFlash {
    0%, 100% { color: inherit; }
    30% { color: #ff8866; text-shadow: 0 0 10px rgba(255, 136, 102, 0.7); }
}
.arena-banner .phase-chip { justify-self: center; }
.phase-chip, .tier-chip {
    font-size: 0.72rem;
    border: 1px solid currentColor;
    padding: 2px 8px;
    border-radius: 99px;
    letter-spacing: 0.04em;
}
.phase-preview { color: var(--warning-color); }
.phase-fighting { color: var(--danger-color); }
.phase-cleared { color: var(--success-color); }
.phase-chip.is-empty {
    visibility: hidden;
    border-color: transparent;
}
.tier-chip { color: #caa; white-space: nowrap; }

.arena-stage {
    display: grid;
    grid-template-columns: 1fr 72px 1fr;
    align-items: stretch;
    gap: 4px 8px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--arena-sky);
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 10px 10px;
}

.fighter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    min-width: 0;
    background: transparent;
    border: none;
}

.fighter-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--accent-color);
    min-height: 1.25em;
}
.enemy-title { color: var(--danger-color); justify-content: flex-end; flex-wrap: wrap; }
.passive-desc, .traits-row, .skill-desc {
    font-size: 0.78rem;
    color: var(--warning-color);
    font-style: italic;
    min-height: 1.1em;
    line-height: 1.25;
}
.skill-desc {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.skill-desc-passive { color: var(--accent-color); font-style: italic; }
.skill-desc-active { color: #c8a0ff; }
.traits-row {
    text-align: right;
}
.traits-row:empty,
.traits-row[hidden] {
    display: none;
}

.sprite-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    position: relative;
}
.enemy-facing { transform: scaleX(-1); }
.player-fighter .unit-sprite,
.enemy-fighter .unit-sprite {
    width: 72px;
    height: 72px;
}
.player-fighter .unit-sprite {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-color) 45%, transparent));
}
.enemy-fighter .unit-sprite {
    filter: drop-shadow(0 0 8px rgba(255, 80, 110, 0.35));
}

.atb-row {
    display: flex;
    justify-content: center;
    width: 100%;
}
.atb-track {
    position: relative;
    width: 72px;
    height: 10px;
    background: #141414;
    border: 1px solid #3a3a3a;
    border-radius: 99px;
    overflow: hidden;
}
.atb-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.42rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    color: rgba(220, 230, 240, 0.22);
    pointer-events: none;
    z-index: 1;
}
.enemy-fighter .atb-label { color: rgba(255, 210, 220, 0.22); }
.atb-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    max-width: 100%;
    border-radius: inherit;
}
.player-atb {
    background: linear-gradient(90deg, #1a6a88, #33d6ff);
}
.enemy-atb {
    background: linear-gradient(90deg, #8a2038, #ff6688);
}
.atb-track.atb-frozen {
    border-color: #88ddff;
    box-shadow: 0 0 10px rgba(136, 221, 255, 0.55);
}
.atb-track.atb-frozen .atb-fill {
    background: linear-gradient(90deg, #4aa8d8, #88ddff);
}

.hp-block { display: flex; flex-direction: column; gap: 4px; }
.hp-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    font-weight: bold;
    color: var(--success-color);
}
.enemy-fighter.dissolving {
    animation: enemyDissolve 0.9s ease-out forwards;
    pointer-events: none;
}
.enemy-fighter.dissolved {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.player-fighter.defeated-dissolving {
    animation: playerDefeatDissolve 1.2s ease-out forwards;
    pointer-events: none;
}
.player-fighter.defeated-dissolved {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.defeat-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    background: radial-gradient(ellipse at center, rgba(40, 0, 10, 0.15) 0%, rgba(120, 0, 30, 0.72) 100%);
    opacity: 0;
    pointer-events: none;
}
.defeat-overlay.active {
    animation: defeatVignette 1.2s ease-out forwards;
}
#main-game.game-fade-out {
    animation: gameFadeOut 0.45s ease-out forwards;
}
.phase-defeated { color: var(--danger-color); text-shadow: 0 0 10px rgba(255, 51, 102, 0.45); }
@keyframes enemyDissolve {
    0% { opacity: 1; filter: none; transform: scale(1); }
    35% { opacity: 0.7; filter: blur(1px); }
    100% { opacity: 0; filter: blur(8px); transform: scale(0.9) translateY(10px); }
}
@keyframes playerDefeatDissolve {
    0% { opacity: 1; filter: none; transform: scale(1); }
    20% { filter: brightness(1.4) sepia(1) hue-rotate(-45deg) saturate(4); transform: scale(1.02); }
    55% { opacity: 0.55; filter: blur(2px) brightness(0.55); transform: scale(0.96) translateY(6px); }
    100% { opacity: 0; filter: blur(12px) brightness(0.15); transform: scale(0.82) translateY(24px); }
}
@keyframes defeatVignette {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0.92; }
}
@keyframes gameFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.replace-confirm {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    padding: 12px;
}
.replace-confirm.hidden { display: none !important; }
.replace-confirm-box {
    width: min(420px, 100%);
    text-align: center;
    border-color: var(--warning-color);
    padding: 14px 16px;
}
.replace-confirm-box h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--warning-color);
}
.replace-confirm-text {
    font-size: 0.84rem;
    line-height: 1.45;
    color: #ccc;
    margin-bottom: 14px;
}
.replace-old { color: #aaa; font-style: italic; }
.replace-new { font-weight: bold; }
.replace-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.potion-replace-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.potion-replace-slot {
    width: 100%;
    white-space: normal;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.enemy-fighter .hp-label-row { color: #ff8aa3; }
.hp-track {
    position: relative;
    width: 100%;
    height: 16px;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 3px;
    overflow: hidden;
}
.hp-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    max-width: 100%;
    transition: width 0.18s ease;
}
.hp-fill.hp-healing {
    transition: none;
    background: linear-gradient(90deg, #147a4a, #33ff66, #9dffc0, #33ff66);
    background-size: 220% 100%;
    animation: healShimmer 1.1s linear infinite;
}
.hp-track.hp-healing {
    border-color: #33ff66;
    box-shadow: 0 0 14px rgba(51, 255, 102, 0.4);
    animation: healTrackPulse 0.9s ease-in-out infinite;
}
.player-fighter.healing .sprite-wrap {
    filter: drop-shadow(0 0 10px rgba(51, 255, 102, 0.55));
    animation: healSpriteGlow 1.2s ease-in-out infinite;
}
.player-fill { background: linear-gradient(90deg, #147a4a, #33ff66); }
.enemy-fill { background: linear-gradient(90deg, #a01a38, #ff3366); }
.fighter-substats {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 0.78rem;
    color: #ccc;
}
.player-fighter .fighter-substats {
    align-items: flex-start;
}
.enemy-fighter .fighter-substats {
    align-items: flex-start;
}
.fighter-class-tag {
    font-weight: bold;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.enemy-identity {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
}
.enemy-name-tag {
    color: var(--danger-color);
    text-transform: none;
    letter-spacing: 0.02em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fighter-substats-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 10px;
    width: 100%;
}
.fighter-substats b { color: #fff; }

.arena-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.vs-mark {
    position: relative;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    z-index: 2;
}
.vs-seal {
    position: absolute;
    inset: 0;
    width: 72px;
    height: 72px;
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(232, 201, 106, 0.35));
}
.vs-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--warning-color);
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
}
#main-game.in-combat .vs-seal {
    animation: vsSealPulse 1.8s ease-in-out infinite;
}
#main-game.in-combat .vs-mark.is-hot .vs-seal {
    animation: vsSealHot 0.7s ease-in-out infinite;
}
#main-game.in-combat .vs-mark.is-hot .vs-label {
    color: #fff;
    text-shadow: 0 0 12px var(--accent-color);
}
.arena-fx {
    position: absolute;
    width: 92px;
    height: 14px;
    border-radius: 8px;
    opacity: 0;
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 0 6px #fff);
}
.arena-fx.slash-right {
    background: linear-gradient(90deg, transparent, #fff, var(--accent-color));
    animation: slashRight 0.28s ease-out;
}
.arena-fx.slash-left {
    background: linear-gradient(90deg, var(--danger-color), #fff, transparent);
    animation: slashLeft 0.28s ease-out;
}
.arena-fx.slash-crit-right,
.arena-fx.slash-crit-left {
    height: 18px;
    width: 110px;
    background: linear-gradient(90deg, transparent, #fff, var(--warning-color), #ff8c00);
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.8);
}
.arena-fx.slash-crit-right { animation: slashRight 0.34s ease-out; }
.arena-fx.slash-crit-left { animation: slashLeft 0.34s ease-out; }

.choice-dock {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 8px 10px;
}

/* Choice / loot: dock grows with card content and pushes the stats panel down */
#main-game:not(.in-combat) .arena-panel {
    height: auto;
    max-height: none;
    min-height: 560px;
}
#main-game:not(.in-combat) .arena-workspace {
    flex: 1 1 auto;
}
#main-game:not(.in-combat) .arena-fight-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#main-game:not(.in-combat) .arena-stage {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
    height: auto;
    min-height: 0;
}
#main-game:not(.in-combat) .choice-dock {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    height: auto;
    min-height: 320px;
    overflow: visible;
}
#main-game:not(.in-combat) #choice-phase {
    height: auto;
    overflow: visible;
    flex: 1 1 auto;
}
#main-game:not(.in-combat) .cards-grid {
    flex: 1 1 auto;
    height: auto;
    min-height: min-content;
    overflow: visible;
    align-content: center;
    align-items: center;
    justify-content: center;
}
#main-game:not(.in-combat) {
    height: auto;
    min-height: 100%;
    overflow: visible;
}
#app-shell:has(#main-game:not(.hidden):not(.in-combat)) {
    height: auto;
    max-height: calc(100vh - 8px);
    overflow-y: auto;
    align-items: flex-start;
}
#game-container:has(#main-game:not(.hidden):not(.in-combat)) {
    height: auto;
    min-height: min(1080px, calc(100vh - 8px));
    overflow: visible;
}
#main-game.in-combat .choice-dock {
    top: auto;
    height: 180px;
    padding: 6px 8px;
    background: rgba(8, 9, 12, 0.92);
    border-color: #3a3a3a;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#main-game.in-combat .center-dock-header {
    display: none;
}
#main-game.in-combat .arena-stage {
    padding-bottom: 192px;
    align-items: start;
    align-content: stretch;
    grid-template-rows: auto 1fr auto;
}
#main-game.in-combat .player-fighter {
    grid-column: 1;
    grid-row: 1;
}
#main-game.in-combat .arena-center {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: calc(1.15em + 4px);
    height: 72px;
    justify-content: center;
}
#main-game.in-combat .enemy-fighter {
    grid-column: 3;
    grid-row: 1;
}
#main-game.in-combat .arena-ability-footer {
    grid-row: 3;
    padding-top: 1.15em;
}
#main-game.in-combat .fighter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1.15em 72px auto auto;
    gap: 4px;
    justify-items: stretch;
    align-content: start;
}
#main-game.in-combat .player-fighter::before {
    content: '';
    grid-row: 1;
    display: block;
    height: 1.15em;
}
#main-game.in-combat .enemy-fighter .traits-row {
    grid-row: 1;
    align-self: center;
    margin: 0;
    min-height: 1.15em;
    max-height: 1.15em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#main-game.in-combat .enemy-fighter .traits-row[hidden],
#main-game.in-combat .enemy-fighter .traits-row:empty {
    display: block !important;
    visibility: hidden;
}
#main-game.in-combat .sprite-wrap {
    grid-row: 2;
    flex: none;
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    align-self: center;
    justify-self: center;
    width: 72px;
}
#main-game.in-combat .atb-row {
    grid-row: 3;
    align-self: center;
}
#main-game.in-combat .hp-block {
    grid-row: 4;
    gap: 4px;
}
#main-game.in-combat .fighter-substats {
    min-height: 2.5em;
}
#main-game.in-combat .fighter-class-tag,
#main-game.in-combat .enemy-identity {
    min-height: 1.15em;
    line-height: 1.15em;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
#main-game.in-combat .log-area {
    font-size: 0.72rem;
    padding: 4px 6px;
    gap: 1px;
}
#main-game.in-combat #combat-phase {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}
#center-area.merchant-active {
    border-color: #e8c96a;
    box-shadow: 0 0 22px rgba(232, 201, 106, 0.38), inset 0 0 18px rgba(232, 201, 106, 0.08);
}
#center-area.merchant-active #choice-title {
    color: #e8c96a;
    text-shadow: 0 0 8px rgba(232, 201, 106, 0.55);
}

.stats-categories-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stat-category { background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 4px; padding: 6px 8px; font-size: 0.8rem; }
.stat-category h4 { color: var(--accent-color); font-size: 0.84rem; margin-bottom: 4px; border-bottom: 1px dashed #333; padding-bottom: 2px; }
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
    cursor: help;
    gap: 8px;
    position: relative;
    overflow: visible;
    border-radius: 3px;
}
.stat-row.stat-row-neg {
    background: rgba(72, 32, 96, 0.38);
    box-shadow: inset 0 0 0 1px rgba(150, 90, 190, 0.4);
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
}
.stat-label {
    color: var(--text-color);
    font-weight: normal;
    min-width: 0;
    flex: 1 1 auto;
}
.stat-nums {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: bold;
}
.stat-nums [id^="p-"] { position: relative; }
.mod-equip { font-size: 0.78em; }
.mod-combat { font-size: 0.78em; }
.mod-pending {
    font-size: 0.78em;
    opacity: 0.85;
    border-bottom: 1px dotted currentColor;
}

.stat-row.stat-row-preview {
    border-radius: 3px;
    margin: 0 -4px 2px;
    padding: 0 4px;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.stat-row.stat-row-preview-pos {
    background: rgba(51, 255, 102, 0.14);
    box-shadow: inset 0 0 0 1px rgba(51, 255, 102, 0.4);
}
.stat-row.stat-row-preview-neg {
    background: rgba(255, 51, 102, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 51, 102, 0.4);
}
.stat-preview-delta {
    font-size: 0.78em;
    font-weight: bold;
    white-space: nowrap;
    animation: statPreviewPulse 0.9s ease-in-out infinite;
}
@keyframes statPreviewPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

.stat-delta {
    position: absolute;
    right: 100%;
    margin-right: 6px;
    top: 0;
    font-weight: bold;
    font-size: 0.82rem;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    text-shadow: 0 0 6px #000;
}
.stat-delta-up { color: var(--success-color); }
.stat-delta-down { color: var(--danger-color); }
.stat-delta.show { animation: statDeltaPop 0.9s ease-out forwards; }

@keyframes statDeltaPop {
    0% { opacity: 0; transform: translateY(6px) scale(0.85); }
    18% { opacity: 1; transform: translateY(0) scale(1.08); }
    70% { opacity: 1; transform: translateY(-10px) scale(1); }
    100% { opacity: 0; transform: translateY(-22px) scale(0.95); }
}

.stat-capped { color: var(--cap-color) !important; text-shadow: 0 0 5px var(--cap-color); }

.combat-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(200px, 1.05fr);
    align-items: start;
    gap: 6px 12px;
    flex-shrink: 0;
    padding: 2px 4px 0;
}
.control-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.control-skill { align-items: flex-start; }
.control-stance { align-items: center; }
.control-speed { align-items: flex-end; }
.control-label, .stance-label {
    font-size: 0.78rem;
    color: var(--warning-color);
    letter-spacing: 0.1em;
    font-weight: bold;
}
.skill-btn-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.skill-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: max-content;
}
.skill-btn {
    min-width: 118px;
    white-space: nowrap;
}
.skill-btn.skill-ready {
    border-color: #c8a0ff;
    color: #c8a0ff;
    box-shadow: 0 0 8px rgba(200, 160, 255, 0.25);
}
.desperate-btn {
    white-space: nowrap;
    max-width: none;
    flex-shrink: 0;
    width: auto;
    min-width: 0;
}
.desperate-btn.skill-ready {
    border-color: #ff6644;
    color: #ff8866;
    box-shadow: 0 0 8px rgba(255, 102, 68, 0.3);
}
.desperate-btn.skill-ready:hover:not(:disabled) {
    background: #ff6644;
    color: #000;
    box-shadow: 0 0 10px rgba(255, 102, 68, 0.45);
}
.flee-btn {
    white-space: nowrap;
    max-width: none;
    flex-shrink: 0;
    width: max-content;
    min-width: 0;
}
.flee-btn.skill-ready {
    border-color: var(--warning-color);
    color: #ffe066;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
}
.flee-btn.skill-ready:hover:not(:disabled) {
    background: var(--warning-color);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.45);
}
.skill-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.68rem;
    min-height: 1em;
    white-space: nowrap;
    letter-spacing: 0.04em;
}
.skill-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: transparent;
    box-shadow: none;
}
.skill-status.is-ready {
    color: #b8f0c8;
}
.skill-status.is-ready::before {
    background: #33ff66;
    box-shadow: 0 0 5px #33ff66, 0 0 10px rgba(51, 255, 102, 0.7);
}
.skill-status:not(.is-ready)::before {
    display: none;
}
.stat-row.stat-desperate-buff {
    background: rgba(18, 92, 42, 0.58);
    box-shadow: inset 0 0 0 1px rgba(51, 255, 102, 0.55);
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
}
.stat-row.stat-desperate-nerf {
    background: rgba(96, 14, 28, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 51, 102, 0.5);
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
}
.speed-bar > .btn {
    box-sizing: border-box;
    flex: 0 0 auto;
}
.pause-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1;
    overflow: hidden;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.pause-btn.active {
    background: var(--warning-color);
    border-color: var(--warning-color);
    color: #111;
}
.pause-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    line-height: 1;
    font-size: 12px;
}
.pause-icon-play {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid currentColor;
    position: relative;
    left: 1px;
    line-height: 0;
    font-size: 0;
}
.speed-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.speed-btn-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}
.speed-btn {
    min-width: 36px;
    letter-spacing: 0.02em;
}
.speed-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.35);
}
.speed-btn.is-turbo.active {
    background: var(--warning-color);
    border-color: var(--warning-color);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.45);
}

.potion-bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 0;
}
.potion-bar.potion-bar-preview {
    box-shadow: 0 0 14px color-mix(in srgb, var(--preview-color, #7ee0ff) 45%, transparent);
    border-radius: 8px;
    padding: 2px;
}
.potion-slot {
    appearance: none;
    -webkit-appearance: none;
    width: 34px;
    height: 38px;
    border: 1px solid #444;
    border-radius: 5px;
    background: #0a0a0a;
    color: #666;
    padding: 1px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: default;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.potion-slot .potion-gold {
    font-size: 0.48rem;
    line-height: 9px;
    color: #e8c96a;
    min-height: 9px;
}
.potion-slot:not(.potion-filled) .potion-gold { display: none; }
.potion-slot .potion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin-top: 0;
    font-size: 1rem;
    line-height: 1;
}
.potion-empty-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    gap: 1px;
}
.potion-slot-word {
    font-size: 0.48rem;
    letter-spacing: 0.06em;
    color: #666;
    font-weight: bold;
}
.potion-slot-num {
    font-size: 0.78rem;
    color: #888;
    font-weight: bold;
    line-height: 1;
}
.potion-slot.potion-filled { cursor: help; }
.potion-slot.potion-usable {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(126, 224, 255, 0.18);
}
.potion-slot.potion-usable:hover {
    background: #141c18;
    box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
}
.potion-slot.potion-sellable { cursor: pointer; }
.potion-slot.potion-sellable:hover {
    border-color: #e8c96a;
    box-shadow: 0 0 10px rgba(232, 201, 106, 0.4);
    background: #161208;
}
.potion-slot.potion-slot-preview {
    background: color-mix(in srgb, var(--preview-color, #7ee0ff) 22%, #0a0a0a);
    border-color: var(--preview-color, #7ee0ff);
}

.stance-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}
.stance-btn {
    cursor: help;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.stance-btn:not(.stance-btn-auto) {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.stance-btn:not(.stance-btn-auto):hover:not(:disabled):not(.active) {
    background-color: rgba(0, 255, 204, 0.18);
    color: #eafffa;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.25);
}
.stance-btn:not(.stance-btn-auto).active {
    background: var(--accent-color);
    color: #000;
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
}
.stance-btn:not(.stance-btn-auto).active:hover:not(:disabled) {
    background: #33ffd9;
    color: #000;
    box-shadow: 0 0 12px rgba(0, 255, 204, 0.5);
}
.stance-btn-auto {
    border-color: #b366ff;
    color: #d9b3ff;
}
.stance-btn-auto:hover:not(:disabled):not(.active) {
    background-color: rgba(179, 102, 255, 0.22);
    color: #f0ddff;
    box-shadow: 0 0 8px rgba(179, 102, 255, 0.3);
}
.stance-btn-auto.active {
    background: #b366ff;
    color: #120018;
    border-color: #b366ff;
    box-shadow: 0 0 12px rgba(179, 102, 255, 0.5);
}
.stance-btn-auto.active:hover:not(:disabled) {
    background: #c480ff;
    color: #120018;
    box-shadow: 0 0 14px rgba(179, 102, 255, 0.6);
}
.stance-btn.stance-auto-pick:not(.active) {
    border-color: #b366ff;
    color: #e0c0ff;
    background: rgba(179, 102, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(179, 102, 255, 0.35), 0 0 8px rgba(179, 102, 255, 0.2);
}
.stance-btn.stance-auto-pick:not(.active):hover:not(:disabled) {
    background: rgba(179, 102, 255, 0.22);
    color: #f0ddff;
    box-shadow: inset 0 0 0 1px rgba(179, 102, 255, 0.45), 0 0 10px rgba(179, 102, 255, 0.3);
}
.stance-modifiers {
    text-align: center;
    font-size: 0.76rem;
    margin-bottom: 4px;
    padding: 4px 6px;
    border: 1px dashed #333;
    border-radius: 4px;
    background: #0a0a0a;
    line-height: 1.5;
}
.stance-mod-title { color: var(--warning-color); margin-right: 6px; }
.stance-neutral { color: #b8c4c4; font-style: italic; }
.mod-pos { color: var(--success-color); font-weight: bold; }
.mod-neg { color: var(--danger-color); font-weight: bold; }

.draft-header { text-align: center; margin-bottom: 6px; flex-shrink: 0; }
.center-dock-header { margin-bottom: 6px; }
.draft-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 1.4em;
}
.draft-title-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.draft-title-center h2 {
    margin: 0;
    white-space: nowrap;
}
.draft-title-center h2.is-combat-hidden,
.draft-hint.is-combat-hidden {
    display: none;
}
.merchant-nav-btn {
    min-width: 2.4rem;
    padding: 4px 8px;
}
.draft-hint { color: #888; font-size: 0.75rem; margin-top: 2px; padding-bottom: 2px; }
#choice-phase {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
}
.choice-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.merchant-page-label {
    min-width: 2.6em;
    text-align: center;
    color: var(--warning-color);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    margin: 0;
    font-variant-numeric: tabular-nums;
}
#leave-merchant-btn {
    border-color: var(--danger-color);
    color: var(--danger-color);
}
#leave-merchant-btn:hover:not(:disabled) {
    background: var(--danger-color);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.45);
}
.merchant-empty {
    width: 100%;
    text-align: center;
    color: #888;
    padding: 24px 8px;
    font-style: italic;
}
.shop-card.shop-unaffordable {
    opacity: 0.55;
}
.shop-card .loot-card-overlay {
    background: #c9a227;
    color: #1a1408;
    text-shadow: none;
}
.shop-card.shop-unaffordable .loot-card-overlay {
    background: #a83232;
    color: #fff;
}
#merchant-prev-btn:disabled,
#merchant-next-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.enemy-card {
    position: relative;
    overflow: hidden;
}
.enemy-ban-overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 8px;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px 8px;
    border-radius: 0 0 8px 8px;
    background: #a01838;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 4;
    font-weight: bold;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
}
.enemy-card-name,
.enemy-card-stats,
.enemy-card-traits {
    position: relative;
    z-index: 3;
}
.enemy-card.enemy-ban-hover:not(.enemy-banned):not(.enemy-resolving) .enemy-ban-overlay {
    opacity: 1;
    transform: translateY(0);
}
.enemy-card.enemy-ban-hover:not(.enemy-banned):not(.enemy-resolving) {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--danger-color) 88%, #fff),
        0 0 20px color-mix(in srgb, var(--danger-color) 55%, transparent);
}
.enemy-banned-label {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    z-index: 3;
    font-weight: bold;
    font-size: 1.35rem;
    letter-spacing: 0.12em;
    color: var(--danger-color);
    text-shadow: 0 0 12px rgba(255, 51, 102, 0.8);
}
.enemy-card.enemy-banned .enemy-banned-label {
    display: flex;
}
.enemy-card.enemy-banned {
    opacity: 0.38;
    filter: grayscale(0.85);
    pointer-events: none;
}
.enemy-card.enemy-resolving {
    pointer-events: none;
}
.enemy-card.enemy-roulette-pick {
    border-color: var(--warning-color) !important;
    box-shadow: inset 0 0 16px rgba(255, 204, 0, 0.28) !important;
    transform: scale(1.025);
    z-index: 2;
}
.enemy-card.enemy-locked {
    border-color: var(--success-color) !important;
    box-shadow: inset 0 0 16px rgba(51, 255, 102, 0.28) !important;
    transform: scale(1.025);
    opacity: 1;
    filter: none;
    z-index: 2;
}
.enemy-locked-label {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 40, 20, 0.75);
    z-index: 4;
    font-weight: bold;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: var(--success-color);
    text-shadow: 0 0 12px rgba(51, 255, 102, 0.7);
}
.enemy-card.enemy-locked .enemy-locked-label {
    display: flex;
}
#reroll-btn:disabled,
#lock-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.loot-card {
    position: relative;
    overflow: visible;
    --card-color: #555;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--card-color) 45%, transparent),
        0 0 22px color-mix(in srgb, var(--card-color) 28%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.loot-card-overlay {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px 8px;
    border-radius: 8px 8px 0 0;
    background: #1a9a58;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 3;
    font-weight: bold;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
}
.loot-card:hover .loot-card-overlay,
.loot-card:focus-visible .loot-card-overlay {
    opacity: 1;
    transform: translateY(0);
}
.loot-card:hover,
.loot-card:focus-visible {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--card-color) 88%, #fff),
        0 0 14px color-mix(in srgb, var(--card-color) 70%, transparent),
        0 0 28px color-mix(in srgb, var(--card-color) 42%, transparent);
}
.gear-pack-card {
    gap: 0;
    min-height: 0;
}
.gear-pack-card .card-text {
    overflow: hidden;
    gap: 6px;
}
.gear-pack-item {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    justify-content: center;
    gap: 4px;
    padding: 8px 8px 9px;
    border: 1px dashed #2a2a2a;
    border-radius: 4px;
    min-width: 0;
    min-height: 0;
}
.gear-pack-affixes {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-left: 22px;
}
.gear-pack-affix {
    font-size: 0.74rem;
    line-height: 1.25;
    color: #9ad4a8;
}
.gear-pack-rarity {
    flex: 0 0 auto;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: #c8c8c8;
    font-weight: bold;
}
.gear-pack-item-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.gear-pack-item-icon {
    flex: 0 0 auto;
    font-size: 0.9rem;
    line-height: 1;
}
.gear-pack-item-slot {
    flex: 0 0 auto;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: #888;
    text-transform: uppercase;
}
.gear-pack-item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.84rem;
    font-weight: bold;
    color: #ddd;
    white-space: normal;
    overflow: visible;
    line-height: 1.2;
}
.loot-card.loot-picking-lock .loot-card-overlay {
    background: #2a6fd4;
}
.loot-card.loot-picking-lock .loot-unlock-overlay {
    background: #c4452e;
}
.loot-card.loot-is-locked {
    border-color: #66aaff !important;
    box-shadow: 0 0 18px rgba(102, 170, 255, 0.45) !important;
}
.loot-card.loot-is-locked:hover,
.loot-card.loot-is-locked:focus-visible {
    box-shadow:
        0 0 0 2px #9cc8ff,
        0 0 22px rgba(102, 170, 255, 0.75) !important;
}
.loot-locked-label {
    font-size: 0.58rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: #cce6ff;
    background: rgba(20, 60, 120, 0.9);
    border: 1px solid #66aaff;
    border-radius: 3px;
    padding: 2px 5px;
    flex-shrink: 0;
}
#lock-btn.lock-mode-on {
    background: #66aaff;
    color: #000;
    border-color: #66aaff;
    box-shadow: 0 0 10px rgba(102, 170, 255, 0.6);
}
#lock-btn.lock-mode-on:hover:not(:disabled) {
    background: #8cc0ff;
    color: #000;
}
.equipment-bar {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #333;
    align-items: stretch;
}
.equip-slot {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 2px 2px 4px;
    text-align: center;
    background: #0a0a0a;
    cursor: help;
    height: 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}
.equip-slot:hover { background: #141414; }
.equip-slot.equip-slot-preview {
    background: color-mix(in srgb, var(--preview-color, var(--accent-color)) 22%, #0a0a0a);
    border-color: var(--preview-color, var(--accent-color));
    box-shadow: 0 0 14px color-mix(in srgb, var(--preview-color, var(--accent-color)) 50%, transparent);
}
.equip-slot.equip-slot-preview .equip-label {
    color: var(--preview-color, var(--accent-color));
}
.equip-slot.equip-slot-preview .equip-icon {
    color: var(--preview-color, var(--accent-color));
}
.equip-slot.equip-slot-sellable {
    cursor: pointer;
}
.equip-slot.equip-slot-sellable:hover {
    border-color: #e8c96a;
    box-shadow: 0 0 10px rgba(232, 201, 106, 0.4);
    background: #161208;
}
.equip-gold {
    flex: 0 0 11px;
    font-size: 0.52rem;
    line-height: 1.1;
    color: #e8c96a;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 11px;
}
.equip-slot:not(.equip-filled) .equip-gold {
    visibility: hidden;
}
.equip-label {
    flex: 0 0 10px;
    font-size: 0.48rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.equip-filled .equip-label { color: #999; }
.equip-icon-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}
.equip-slot .equip-icon {
    font-size: 1.45rem;
    line-height: 1;
    margin: 0;
    color: #888;
    display: block;
    user-select: none;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}
.equip-slot:not(.equip-filled) .equip-icon {
    opacity: 0.38;
    filter: grayscale(0.25) saturate(0.7);
}
.equip-filled .equip-icon {
    color: inherit;
    filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent));
}
.equip-slot:hover .equip-icon {
    transform: scale(1.08);
}
.equip-slot.equip-filled:hover .equip-icon {
    filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 70%, transparent));
}
.loot-item-name {
    font-weight: bold;
    font-size: 0.72rem;
    text-align: left;
    margin: 0;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.loot-item-slot {
    font-size: 0.58rem;
    color: #888;
    text-align: left;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.loot-equipped {
    font-size: 0.56rem;
    color: #999;
    text-align: left;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #2a2a2a;
    font-style: italic;
    line-height: 1.15;
}
.loot-unique {
    font-size: 0.58rem;
    color: #ff8c00;
    text-align: left;
    margin-top: 2px;
    font-style: italic;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}
.loot-unique-line {
    border-radius: 3px;
    padding: 2px 4px;
    overflow-wrap: anywhere;
    white-space: normal;
}
.enemy-card { border-color: var(--card-color, #666); }
.enemy-card.enemy-elite { border-color: #ff8c00; box-shadow: 0 0 16px rgba(255, 140, 0, 0.35); }
.enemy-card-sprite {
    width: 64px;
    height: 64px;
    margin: 0;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(255, 80, 110, 0.25));
}
.enemy-card-name {
    font-weight: bold;
    color: var(--accent-color);
    text-align: left;
    font-size: 0.78rem;
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enemy-card-traits {
    font-size: 0.58rem;
    color: var(--warning-color);
    text-align: center;
    line-height: 1.2;
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.loot-ring-hint { color: var(--warning-color); }
.ring-pick-action { margin-top: 8px; font-size: 0.72rem; color: var(--accent-color); text-align: center; font-weight: bold; }
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: visible;
    padding: 8px 2px 2px;
}
.cards-grid-centered {
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 10px 8px 14px;
    gap: 12px;
}
.kill-drop-card {
    --card-w: 256px;
}

.draft-card {
    --card-w: 186px;
    width: var(--card-w);
    flex: 0 0 var(--card-w);
    max-width: 100%;
    aspect-ratio: 5 / 7;
    height: auto;
    border: 2px solid var(--card-color, #555);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), transparent 22%),
        #0a0b0e;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    text-align: left;
    overflow: visible;
    font-family: inherit;
    min-height: 0;
    box-sizing: border-box;
    transform-style: preserve-3d;
    position: relative;
}
.draft-card.enemy-card {
    --card-w: 198px;
    padding: 6px;
    align-self: flex-start;
    overflow: visible;
    transform-origin: center center;
}
.loot-card, .ring-pick-card, .shop-card, .gear-pack-card {
    align-self: flex-start;
    overflow: visible;
}
.draft-card.loot-card:not(.gear-pack-card),
.draft-card.shop-card,
.draft-card.kill-drop-card,
.draft-card.ring-pick-card {
    --card-w: 256px;
}
.draft-card.gear-pack-card {
    --card-w: min(318px, calc((100% - 28px) / 3));
}
.cards-grid-loot4 {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
}
.cards-grid-loot4 .loot-card:not(.gear-pack-card) {
    --card-w: min(256px, calc((100% - 30px) / 4));
}
.loot-card:not(.gear-pack-card) .card-nameplate {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 3.05rem;
    padding: 5px 7px 6px;
    box-sizing: border-box;
}
.loot-card:not(.gear-pack-card) .loot-item-name {
    min-height: calc(1.15em * 2);
}
.loot-card:not(.gear-pack-card) .card-nameplate-meta {
    align-items: center;
    margin-top: 4px;
}
.loot-card:not(.gear-pack-card) .card-art {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 2.7 / 1;
}
.loot-card:not(.gear-pack-card) .card-text {
    overflow: hidden;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 3px;
    min-height: 0;
}
.loot-card:not(.gear-pack-card) .card-effects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-items: stretch;
}
.loot-card:not(.gear-pack-card) .card-effects-grid .card-effect,
.loot-card:not(.gear-pack-card) .card-effects-grid .card-effect:first-child,
.loot-card:not(.gear-pack-card) .card-effects-grid .card-effect:last-child {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 4px;
    padding: 3px 5px;
    border: 1px dashed #2a2a2a;
    border-radius: 3px;
    min-width: 0;
}
.loot-card:not(.gear-pack-card) .card-effects-grid .card-effect .card-stat-value {
    text-align: left;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    width: auto;
    justify-self: start;
    line-height: 1.2;
    padding-top: 1px;
}
.loot-card:not(.gear-pack-card) .card-effects-grid .card-effect .card-stat-name {
    text-align: left;
    font-size: 0.52rem;
    line-height: 1.2;
    width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.loot-card:not(.gear-pack-card) .loot-unique,
.loot-card:not(.gear-pack-card) .loot-equipped,
.loot-card:not(.gear-pack-card) .potion-card-desc {
    text-align: left;
    margin-top: 0;
}
.loot-card:not(.gear-pack-card) .loot-unique {
    font-size: 0.55rem;
    line-height: 1.2;
}
.loot-card:not(.gear-pack-card) .loot-unique-line {
    padding: 0;
}
.loot-card:not(.gear-pack-card) .loot-equipped {
    font-size: 0.52rem;
    padding-top: 3px;
    margin-top: 1px;
}
.loot-card:not(.gear-pack-card) .card-item-icon {
    align-items: center;
    justify-content: center;
    margin: 0;
}
.loot-card:not(.gear-pack-card) .card-item-icon .px-icon,
.loot-card:not(.gear-pack-card) .potion-card-icon .px-icon {
    width: 40px;
    height: 40px;
}
.cards-grid-gear {
    gap: 14px;
    padding: 8px 6px 12px;
}
.card-face {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px 6px 6px;
    border: 1px solid color-mix(in srgb, var(--card-color, #555) 48%, #2a2e36);
    border-radius: 8px;
    background: #101216;
    overflow: hidden;
}
.card-pips {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex: 0 0 auto;
}
.card-pip {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    color: var(--card-color, #c8c8c8);
    width: 1.05em;
    text-align: center;
    flex: 0 0 auto;
}
.card-pips-bottom .card-pip {
    transform: rotate(180deg);
}
.card-pips-center {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--card-color, #888) 70%, #aaa);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-pips-center.is-locked {
    color: #cce6ff;
    letter-spacing: 0.08em;
}
.card-nameplate {
    flex: 0 0 auto;
    padding: 4px 6px 5px;
    border: 1px solid color-mix(in srgb, var(--card-color, #555) 70%, #333);
    border-radius: 4px;
    background: #16181e;
}
.card-nameplate-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}
.card-text {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
}
.enemy-card .card-art {
    flex: 1.55 1 0;
}
.enemy-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
    margin-top: 2px;
}
.enemy-stat-chip {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 4px 5px;
    border: 1px solid color-mix(in srgb, var(--card-color, #555) 40%, #333);
    background: #16181e;
    border-radius: 3px;
}
.enemy-stat-chip-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.enemy-stat-chip .px-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    image-rendering: pixelated;
}
.enemy-stat-chip-dmg .px-icon {
    filter: drop-shadow(0 0 4px rgba(216, 222, 232, 0.35));
}
.enemy-stat-chip-hp .px-icon {
    filter: drop-shadow(0 0 5px rgba(196, 58, 74, 0.55));
}
.enemy-stat-chip b {
    font-size: 0.82rem;
    line-height: 1.1;
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
}
.enemy-stat-chip-main + span {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    color: #888;
}
.potion-card-icon {
    display: flex;
    justify-content: center;
    overflow: visible;
}
.card-item-icon {
    font-size: 2.35rem;
    text-align: center;
    margin: 0;
    line-height: 1;
    display: flex;
    justify-content: center;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--card-color) 50%, transparent));
    user-select: none;
    overflow: visible;
    color: var(--card-color, #c8c8c8);
}
.card-item-icon.potion-card-icon {
    margin: 0;
}
.potion-flask {
    width: 1em;
    height: 1em;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--card-color) 50%, transparent));
}
.potion-flask-slot {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, currentColor 50%, transparent));
}
.potion-flask-inline {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    filter: none;
}
.potion-card-desc {
    font-size: 0.68rem;
    color: #b8c4c4;
    text-align: left;
    line-height: 1.35;
    margin: 0;
}
.draft-card:hover, .draft-card:focus-visible {
    transform: translateY(-3px);
    outline: none;
}
.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.card-kind {
    font-size: 0.66rem;
    color: #888;
    margin-bottom: 0;
    letter-spacing: 0.06em;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-gold {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: bold;
    color: #e8c96a;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(232, 201, 106, 0.35);
}
.draft-card.enemy-card .card-kind {
    text-align: center;
    margin-bottom: 0;
    flex: none;
    width: 100%;
}
.card-effects {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 1 auto;
    width: 100%;
}
.card-effects-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-content: start;
    width: 100%;
    box-sizing: border-box;
}
.card-effects-grid .card-effect {
    display: grid;
    grid-template-columns: 3.6em 1fr;
    align-items: center;
    justify-content: start;
    gap: 4px;
    padding: 2px 4px;
    border: 1px dashed #2a2a2a;
    border-radius: 3px;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: visible;
}
.card-effect-neg {
    background: rgba(72, 32, 96, 0.38);
    border-color: rgba(150, 90, 190, 0.4) !important;
}
.card-effects-grid .card-effect .card-stat-value {
    text-align: right;
    font-size: 0.7rem;
    white-space: nowrap;
    width: 100%;
}
.card-effects-grid .card-effect .card-stat-name {
    text-align: left;
    font-size: 0.52rem;
    line-height: 1.15;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}
.card-effect {
    display: grid;
    grid-template-columns: 3.2em 1fr;
    align-items: center;
    gap: 6px;
    padding: 7px 0;
    border-bottom: 1px dashed #2a2a2a;
    min-height: 0;
}
.card-effect:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.card-effects-grid .card-effect:last-child,
.card-effects-grid .card-effect:first-child {
    border: 1px dashed #2a2a2a;
    padding: 4px 6px;
}
.card-effect:first-child {
    padding-top: 0;
}
.card-stat-value {
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
}
.card-stat-name {
    font-size: 0.64rem;
    color: #9aa;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: left;
}
.stat-pos { color: var(--success-color); }
.stat-neg { color: var(--danger-color); }

#combat-phase { height: 100%; display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 1 1 auto; }
.log-area {
    flex: 1;
    overflow-y: auto;
    border: 1px dashed var(--border-color);
    padding: 6px 8px;
    font-size: 0.8rem;
    background-color: rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
}
.log-player { color: var(--accent-color); }
.log-enemy { color: var(--danger-color); }
.log-system { color: var(--warning-color); }

.hero-select-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    flex: 0 0 auto;
}
.hero-select-top {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(150px, 0.55fr);
    gap: 12px;
    align-items: start;
}
.hero-faces-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 5px;
    width: 100%;
    margin: 0;
    justify-self: stretch;
}
.hero-face {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 3px;
    border: 1px solid #444;
    border-radius: 6px;
    background: #0c0c0c;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.hero-face:hover {
    border-color: #888;
}
.hero-face.selected {
    border-color: var(--accent-color);
    background: rgba(0, 255, 204, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.28);
}
.hero-face.locked {
    border-style: dashed;
    border-color: #333;
}
.hero-face.locked:hover {
    border-color: #555;
}
.hero-face.locked.selected {
    border-color: #777;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}
.hero-face-sprite {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
    user-select: none;
}
.hero-face.locked .hero-face-sprite {
    filter: grayscale(1) brightness(0.55);
    opacity: 0.75;
}
.hero-preview-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
}
.hero-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 132px;
}
.hero-preview-sprite {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent-color) 40%, transparent));
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.hero-preview-sprite.is-locked {
    filter: blur(1.4px) grayscale(1) brightness(0.55);
    opacity: 0.7;
}
.hero-preview-name {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-align: center;
    min-height: 1.3em;
}
.hero-preview-lock {
    color: var(--warning-color);
    font-size: 0.72rem;
    font-style: italic;
    text-align: center;
    line-height: 1.25;
    max-width: 220px;
}
.hero-details-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    align-items: stretch;
}
.hero-details-row.is-locked-hero {
    grid-template-columns: 1fr;
}
.hero-details-row.is-locked-hero .hero-abilities,
.hero-details-row.is-locked-hero .hero-stats-panel {
    display: none !important;
}
.hero-abilities {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.hero-ability {
    border: 1px solid #333;
    background: #0c0c0c;
    border-radius: 6px;
    padding: 8px 10px;
    text-align: left;
    flex: 1;
}
.hero-ability-passive { border-color: color-mix(in srgb, var(--warning-color) 45%, #333); }
.hero-ability-active { border-color: color-mix(in srgb, #c8a0ff 45%, #333); }
.hero-ability-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin-bottom: 2px;
}
.hero-ability-name {
    font-size: 0.86rem;
    font-weight: bold;
    margin-bottom: 2px;
}
.hero-ability-passive .hero-ability-name { color: var(--warning-color); }
.hero-ability-active .hero-ability-name { color: #c8a0ff; }
.hero-ability-desc {
    font-size: 0.72rem;
    color: #b0b0b0;
    font-style: italic;
    line-height: 1.3;
}
.hero-stats-panel {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: #0a0a0a;
    padding: 8px 8px;
    min-height: 0;
    max-width: 420px;
}
.hero-stats-title {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    margin: 0 0 6px;
    color: var(--accent-color);
    text-shadow: none;
    text-align: left;
}
.hero-stats-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px 12px;
}
.hero-stat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 8px;
    font-size: 0.68rem;
    padding: 2px 0;
    border-bottom: 1px solid #1a1a1a;
    cursor: help;
}
.hero-stat-row.is-boosted .hero-stat-value {
    color: var(--accent-color);
    font-weight: bold;
}
.hero-stat-label {
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hero-stat-value {
    color: #ddd;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 2.6em;
}
.hero-select-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.classes-grid-3rows {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}
.class-card {
    border: 1px solid var(--border-color);
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    background-color: #0f0f0f;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    font-family: inherit;
    border-radius: 4px;
    transition: 0.15s ease;
    min-height: 0;
}
.class-card:hover { border-color: #888; }
.class-card.selected {
    border-color: var(--accent-color);
    background-color: rgba(0, 255, 204, 0.12);
    box-shadow: 0 0 8px rgba(0,255,204,0.25);
}
.class-card.locked {
    cursor: not-allowed;
    opacity: 0.55;
    border-style: dashed;
    border-color: #444;
    background: #0a0a0a;
}
.class-card.locked:hover {
    border-color: #555;
    box-shadow: none;
}
.class-card.locked .class-sprite {
    filter: blur(1.2px) grayscale(1);
    opacity: 0.45;
}
.class-lock-label {
    font-size: 0.62rem;
    color: var(--warning-color);
    margin-top: 4px;
    line-height: 1.2;
    font-style: italic;
}
.go-unlocks {
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--success-color);
    line-height: 1.35;
}
.class-sprite-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    flex-shrink: 0;
    width: 100%;
}
.class-card .class-sprite {
    width: 56px;
    height: 56px;
    margin: 0;
}
.class-name {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.82rem;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 2px 4px;
    line-height: 1.15;
}
.class-passive {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--warning-color);
    font-style: italic;
    line-height: 1.25;
    text-align: center;
    padding: 0 2px 4px;
}
.class-active-block {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    min-height: 3.4em;
}
.class-active-name {
    font-size: 0.78rem;
    font-weight: bold;
    color: #c8a0ff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
}
.class-active-desc {
    font-size: 0.66rem;
    color: #b8a8cc;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
}

.game-over-stats { text-align: center; margin: 12px 0; font-size: 1.05rem; }
.hi-score-panel { text-align: center; margin: 10px auto 16px; border: 1px solid #333; padding: 10px; width: min(280px, 90%); }

.floating-text {
    position: fixed;
    font-weight: bold;
    font-size: 1.15rem;
    pointer-events: none;
    animation: floatUp 0.9s ease-out forwards;
    z-index: 50;
    text-shadow: 0 0 6px #000;
}

.sprite-wrap.idle .unit-sprite { animation: idleBob 2.2s ease-in-out infinite; }
.player-fighter.lunge .sprite-wrap { animation: lungeRight 0.28s ease; }
.enemy-fighter.lunge .sprite-wrap { animation: lungeLeft 0.28s ease; }
.fighter.hurt { animation: hurtShake 0.28s ease; }
.hit-flash { animation: hitFlash 0.18s ease; }

@keyframes healShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@keyframes healTrackPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(51, 255, 102, 0.25); }
    50% { box-shadow: 0 0 18px rgba(51, 255, 102, 0.55); }
}
@keyframes healSpriteGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(51, 255, 102, 0.35)); }
    50% { filter: drop-shadow(0 0 14px rgba(51, 255, 102, 0.75)); }
}
@keyframes idleBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes lungeRight {
    0% { transform: translateX(0); }
    45% { transform: translateX(18px); }
    100% { transform: translateX(0); }
}
@keyframes lungeLeft {
    0% { transform: translateX(0) scaleX(-1); }
    45% { transform: translateX(-18px) scaleX(-1); }
    100% { transform: translateX(0) scaleX(-1); }
}
@keyframes hurtShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
@keyframes slashRight {
    0% { opacity: 0; transform: translateX(-16px) rotate(-18deg); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateX(16px) rotate(-18deg); }
}
@keyframes slashLeft {
    0% { opacity: 0; transform: translateX(16px) rotate(18deg); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-16px) rotate(18deg); }
}
@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-34px) scale(1.08); }
}
@keyframes hitFlash {
    0% { filter: brightness(2.4); }
    100% { filter: none; }
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }

@media (max-width: 820px) {
    #app-shell { flex-direction: column; height: auto; max-height: calc(100vh - 8px); }
    .paperdoll,
    .stats-panel {
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    .paperdoll {
        height: 300px;
        min-height: 280px;
        max-height: 320px;
    }
    .stats-panel {
        order: 3;
        max-height: min(420px, 45vh);
    }
    .stats-panel .stats-categories-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    #app-shell:has(#paperdoll:not(.hidden)) #game-container,
    #app-shell:has(#player-panel:not(.hidden)) #game-container,
    #app-shell:has(#paperdoll:not(.hidden)):has(#player-panel:not(.hidden)) #game-container {
        width: min(1140px, calc(100vw - 12px));
        height: min(720px, calc(100vh - 300px));
    }
    .stats-categories-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-select-top,
    .hero-details-row {
        grid-template-columns: 1fr;
    }
    .hero-faces-grid {
        max-width: 100%;
        gap: 4px;
    }
    .hero-preview-wrap { height: 112px; }
    .hero-preview-sprite {
        width: 100px;
        height: 100px;
    }
    .hero-stats-list {
        grid-template-columns: 1fr;
    }
    .arena-stage { grid-template-columns: 1fr; }
    .arena-center { min-height: 28px; }
    .arena-skill-lines {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .arena-skill-lines .control-skill,
    .arena-skill-lines .control-speed,
    .arena-skill-lines .control-items {
        justify-self: center;
    }
    .speed-bar { justify-content: center; }
    .cards-grid { justify-content: center; }
    .draft-card {
        --card-w: min(186px, calc(50% - 8px));
        flex: 0 1 var(--card-w);
        max-width: 220px;
    }
    .draft-card.enemy-card {
        --card-w: min(198px, calc(50% - 8px));
    }
    .loot-card, .ring-pick-card, .shop-card, .gear-pack-card {
        --card-w: min(200px, 100%);
        flex: 0 1 var(--card-w);
        max-width: 220px;
    }
    .cards-grid-gear {
        flex-wrap: wrap;
    }
    .draft-card.gear-pack-card {
        --card-w: min(318px, calc(50% - 10px));
        max-width: 340px;
        flex: 0 1 var(--card-w);
    }
    .draft-card.loot-card:not(.gear-pack-card),
    .draft-card.shop-card,
    .draft-card.kill-drop-card,
    .draft-card.ring-pick-card {
        --card-w: min(256px, calc(50% - 8px));
        max-width: 280px;
        flex: 0 1 var(--card-w);
    }
    .cards-grid-loot4 { flex-wrap: wrap; }
    .cards-grid-loot4 .loot-card:not(.gear-pack-card) {
        --card-w: min(256px, calc(50% - 8px));
        max-width: 280px;
    }
    .loot-card:not(.gear-pack-card) .card-effects-grid {
        grid-template-columns: 1fr;
    }
    .card-effects-grid { display: flex; flex-direction: column; }
    .equipment-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Visual upgrade: arena, FX, cards, type ── */
.stat-row, .stat-label, .stat-nums, .fighter-substats, .hp-label-row {
    font-family: var(--font-ui);
    font-weight: 600;
}
.stat-nums, .hp-label-row, .banner-stat, .card-stat-value {
    font-variant-numeric: tabular-nums;
}
.log-area, .log-entry {
    font-family: var(--font-mono);
    font-size: 0.72rem;
}
.phase-chip, .tier-chip, .control-label, .fighter-class-tag {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}
.subtitle { font-family: var(--font-ui); }

.arena-world,
.arena-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}
.arena-world { overflow: hidden; border-radius: inherit; }
.arena-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% 18%, var(--arena-glow), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--arena-sky) 70%, #000) 0%, var(--arena-sky) 42%, #050608 100%);
    transition: background 0.6s ease;
}
.arena-pillars {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.45) 100%),
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,0.03) 46px 48px);
    opacity: 0.55;
}
.arena-floor {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 6%;
    height: 28%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 40%, var(--arena-glow), transparent 62%),
        radial-gradient(ellipse at 50% 80%, var(--arena-floor), transparent 70%);
    box-shadow: 0 0 40px var(--arena-glow);
}
.arena-floor-ring {
    position: absolute;
    inset: 18% 10% 8%;
    border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    border-radius: 50%;
    opacity: 0.45;
}
.arena-floor-glow {
    position: absolute;
    inset: 30% 22% 12%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--arena-glow), transparent 70%);
    filter: blur(6px);
}
.arena-fog {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(180deg, transparent, var(--arena-fog));
    animation: arenaFogDrift 9s ease-in-out infinite;
}
.arena-embers {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image:
        radial-gradient(circle at 20% 70%, #ff8844 0 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, #ffcc66 0 1px, transparent 2px),
        radial-gradient(circle at 40% 80%, #ff6622 0 1px, transparent 2px);
    background-size: 140px 90px, 180px 110px, 120px 80px;
    animation: embersDrift 7s linear infinite;
}
.fighter, .arena-center, .arena-ability-footer { position: relative; z-index: 1; }

#arena-stage[data-tier="1"] {
    --arena-sky: #101812;
    --arena-fog: rgba(70, 120, 80, 0.22);
    --arena-floor: #1c2a20;
    --arena-glow: rgba(90, 180, 90, 0.16);
}
#arena-stage[data-tier="2"] {
    --arena-sky: #12161e;
    --arena-fog: rgba(70, 90, 120, 0.2);
    --arena-floor: #1a2230;
    --arena-glow: rgba(80, 140, 200, 0.16);
}
#arena-stage[data-tier="3"] {
    --arena-sky: #16121c;
    --arena-fog: rgba(140, 100, 40, 0.16);
    --arena-floor: #2a2218;
    --arena-glow: rgba(232, 201, 106, 0.2);
}
#arena-stage[data-tier="4"] {
    --arena-sky: #101820;
    --arena-fog: rgba(120, 200, 220, 0.18);
    --arena-floor: #1a2830;
    --arena-glow: rgba(80, 220, 255, 0.18);
}
#arena-stage[data-tier="5"] {
    --arena-sky: #140c16;
    --arena-fog: rgba(160, 40, 90, 0.18);
    --arena-floor: #241018;
    --arena-glow: rgba(255, 51, 102, 0.18);
}
#arena-stage.is-elite .arena-embers { opacity: 0.7; }
#arena-stage.is-elite {
    box-shadow: inset 0 0 40px rgba(255, 140, 0, 0.18), 0 0 0 1px rgba(255, 140, 0, 0.25);
}
#main-game[data-tier="1"] { background: radial-gradient(800px 400px at 50% 0%, rgba(70,120,80,0.12), transparent 60%); }
#main-game[data-tier="2"] { background: radial-gradient(800px 400px at 50% 0%, rgba(70,90,140,0.14), transparent 60%); }
#main-game[data-tier="3"] { background: radial-gradient(800px 400px at 50% 0%, rgba(180,140,40,0.12), transparent 60%); }
#main-game[data-tier="4"] { background: radial-gradient(800px 400px at 50% 0%, rgba(60,160,190,0.14), transparent 60%); }
#main-game[data-tier="5"] { background: radial-gradient(800px 400px at 50% 0%, rgba(140,30,70,0.16), transparent 60%); }

#hero-selection {
    background:
        radial-gradient(900px 480px at 50% -10%, rgba(0, 255, 204, 0.08), transparent 55%),
        radial-gradient(700px 400px at 80% 110%, rgba(232, 201, 106, 0.07), transparent 50%),
        #000;
}
#game-over {
    background:
        radial-gradient(900px 520px at 50% 30%, rgba(255, 51, 102, 0.16), transparent 60%),
        #000;
}

.px-icon {
    width: 1em;
    height: 1em;
    image-rendering: pixelated;
    display: block;
}
.equip-slot .px-icon,
.card-item-icon .px-icon,
.gear-pack-item-icon .px-icon {
    width: 22px;
    height: 22px;
}
.gear-pack-card .gear-pack-item-icon .px-icon {
    width: 26px;
    height: 26px;
}
.card-item-icon .px-icon {
    width: 48px;
    height: 48px;
}
.potion-flask-slot.px-icon { width: 20px; height: 20px; }
.potion-flask-inline.px-icon { width: 22px; height: 22px; }

.card-art {
    position: relative;
    display: grid;
    place-items: center;
    margin: 0;
    width: 100%;
    flex: 1.2 1 0;
    min-height: 64px;
    border-radius: 3px;
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--card-color, #555) 22%, #1a1c22), #090a0c 72%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--card-color, #555) 35%, transparent),
        0 0 16px color-mix(in srgb, var(--card-color, #555) 22%, transparent);
}
.card-rarity-gem {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--card-color, #888);
    box-shadow: 0 0 8px var(--card-color, #888);
    z-index: 2;
}
.draft-card.rarity-common {
    box-shadow:
        0 0 8px color-mix(in srgb, var(--card-color, #c8c8c8) 40%, transparent),
        0 0 18px color-mix(in srgb, var(--card-color, #c8c8c8) 22%, transparent);
}
.draft-card.rarity-magic {
    box-shadow:
        0 0 12px color-mix(in srgb, var(--card-color, #4d9fff) 80%, transparent),
        0 0 26px color-mix(in srgb, var(--card-color, #4d9fff) 48%, transparent);
}
.draft-card.rarity-rare {
    box-shadow:
        0 0 12px color-mix(in srgb, var(--card-color, #ffd700) 75%, transparent),
        0 0 26px color-mix(in srgb, var(--card-color, #ffd700) 42%, transparent);
}
.draft-card.rarity-legendary {
    box-shadow:
        0 0 14px color-mix(in srgb, var(--card-color, #ff8c00) 80%, transparent),
        0 0 30px color-mix(in srgb, var(--card-color, #ff8c00) 50%, transparent);
    animation: legendarySheen 2.4s ease-in-out infinite;
}
.loot-card.rarity-common,
.shop-card.rarity-common,
.gear-pack-card.rarity-common,
.kill-drop-card.rarity-common {
    box-shadow:
        0 0 8px color-mix(in srgb, var(--card-color, #c8c8c8) 42%, transparent),
        0 0 20px color-mix(in srgb, var(--card-color, #c8c8c8) 24%, transparent);
}
.loot-card.rarity-magic,
.shop-card.rarity-magic,
.kill-drop-card.rarity-magic {
    box-shadow:
        0 0 14px color-mix(in srgb, var(--card-color, #4d9fff) 85%, transparent),
        0 0 28px color-mix(in srgb, var(--card-color, #4d9fff) 50%, transparent);
}
.loot-card.rarity-rare,
.shop-card.rarity-rare,
.kill-drop-card.rarity-rare {
    box-shadow:
        0 0 14px color-mix(in srgb, var(--card-color, #ffd700) 80%, transparent),
        0 0 28px color-mix(in srgb, var(--card-color, #ffd700) 45%, transparent);
}
.loot-card.rarity-legendary,
.shop-card.rarity-legendary,
.kill-drop-card.rarity-legendary {
    box-shadow:
        0 0 16px color-mix(in srgb, var(--card-color, #ff8c00) 85%, transparent),
        0 0 32px color-mix(in srgb, var(--card-color, #ff8c00) 52%, transparent);
}
.loot-card:hover,
.loot-card:focus-visible,
.shop-card:hover,
.shop-card:focus-visible,
.kill-drop-card:hover,
.kill-drop-card:focus-visible {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--card-color) 88%, #fff),
        0 0 16px color-mix(in srgb, var(--card-color) 75%, transparent),
        0 0 30px color-mix(in srgb, var(--card-color) 45%, transparent);
}
.cards-grid { perspective: 900px; }
.draft-card.card-enter {
    animation: cardEnter 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.kill-drop-card.card-enter {
    animation: lootDropIn 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) both;
}

.fx-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--c, #fff);
    box-shadow: 0 0 8px var(--c, #fff);
    pointer-events: none;
    animation: sparkFly 0.55s ease-out forwards;
    left: var(--x, 50%);
    top: var(--y, 50%);
    z-index: 8;
}
.fx-spark.fx-dust {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    opacity: 0.85;
    animation: dustFall 0.9s ease-out forwards;
}
.sprite-wrap.afterimage .unit-sprite {
    animation: dodgeAfterimage 0.38s ease-out;
}
.player-fighter.skill-cast .sprite-wrap {
    filter: drop-shadow(0 0 16px #c8a0ff);
}
.player-fighter.skill-cast::after,
.player-fighter.rage-cast::after {
    content: '';
    position: absolute;
    inset: 8% 18% auto;
    height: 72px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
}
.player-fighter.skill-cast::after {
    box-shadow: 0 0 24px 8px rgba(200, 160, 255, 0.45);
    animation: castPulse 0.55s ease-out;
}
.player-fighter.rage-cast .sprite-wrap {
    filter: drop-shadow(0 0 16px #ff5522);
}
.player-fighter.rage-cast::after {
    box-shadow: 0 0 28px 10px rgba(255, 80, 40, 0.5);
    animation: castPulse 0.6s ease-out;
}
.arena-stage.shake-hit { animation: arenaShake 0.22s ease-out; }
.arena-stage.shake-crit { animation: arenaShakeHard 0.34s ease-out; }

@keyframes vsSealPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.06); opacity: 1; }
}
@keyframes vsSealHot {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(0,255,204,0.4)); }
    50% { transform: scale(1.12); filter: drop-shadow(0 0 16px rgba(0,255,204,0.8)); }
}
@keyframes arenaFogDrift {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(3%); opacity: 1; }
}
@keyframes embersDrift {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 0 -90px, 40px -110px, -20px -80px; }
}
@keyframes sparkFly {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx, 20px)), calc(-50% + var(--dy, -28px))) scale(0.2); opacity: 0; }
}
@keyframes dustFall {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
    100% { transform: translate(calc(-50% + var(--dx, 8px)), calc(-50% + 36px)) scale(0.4); opacity: 0; }
}
@keyframes dodgeAfterimage {
    0% { transform: translateX(0); filter: drop-shadow(-10px 0 0 rgba(0,255,204,0.55)); }
    100% { transform: translateX(8px); filter: drop-shadow(0 0 0 transparent); }
}
.enemy-facing .sprite-wrap.afterimage .unit-sprite,
.enemy-fighter .sprite-wrap.afterimage .unit-sprite {
    animation-name: dodgeAfterimageFlip;
}
@keyframes dodgeAfterimageFlip {
    0% { transform: translateX(0); filter: drop-shadow(10px 0 0 rgba(255,80,110,0.5)); }
    100% { transform: translateX(-8px); filter: drop-shadow(0 0 0 transparent); }
}
@keyframes castPulse {
    0% { opacity: 0.9; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.35); }
}
@keyframes arenaShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, 0); }
}
@keyframes arenaShakeHard {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(5px, -2px); }
    60% { transform: translate(-3px, 1px); }
    80% { transform: translate(2px, -1px); }
}
@keyframes cardEnter {
    0% { opacity: 0; transform: translateY(18px) rotateX(12deg) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
@keyframes lootDropIn {
    0% { opacity: 0; transform: translateY(-42px) scale(0.7); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes legendarySheen {
    0%, 100% {
        box-shadow:
            0 0 16px color-mix(in srgb, var(--card-color, #ff8c00) 50%, transparent),
            0 0 28px color-mix(in srgb, var(--card-color, #ff8c00) 32%, transparent);
    }
    50% {
        box-shadow:
            0 0 22px color-mix(in srgb, var(--card-color, #ff8c00) 80%, transparent),
            0 0 36px color-mix(in srgb, var(--card-color, #ff8c00) 55%, transparent);
    }
}

.card-art .enemy-card-sprite {
    width: 64px;
    height: 64px;
    margin: 0;
}
.gear-pack-item-icon {
    display: inline-flex;
    color: inherit;
}
.gear-pack-item-icon .px-icon {
    width: 16px;
    height: 16px;
}
.player-fighter,
.enemy-fighter {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .arena-fog, .arena-embers, .vs-seal, .draft-card.rarity-legendary { animation: none !important; }
    .draft-card.card-enter, .kill-drop-card.card-enter { animation: none !important; }
    .arena-stage.shake-hit, .arena-stage.shake-crit { animation: none !important; }
}