/* ===== Reset & Base ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

/* ===== SVG Icon System ===== */
svg.icon {
    display: inline-block;
    vertical-align: -0.15em;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

:root {
    --bg-dark: #080c14;
    --bg-mid: #0d1320;
    --bg-light: #141d2e;
    --surface: #1a2436;
    --border: #283548;
    --text: #e4e2ec;
    --text-dim: #7a8599;
    --accent: #c49a3c;
    --accent-glow: #e4be6a;
    --hp-red: #d44040;
    --hp-red-dark: #6e2020;
    --block-blue: #4a9dd9;
    --energy-yellow: #e4a82e;
    --gold: #e4c04a;
    --damage-red: #ef5350;
    --heal-green: #43b468;
    --poison-green: #36955a;
    --rare-purple: #a07cc8;
    --legendary-gold: #e4a82e;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-pill: 20px;
}

/* ===== QOL: Save toast ===== */
#save-toast {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 99998;
    background: rgba(20, 18, 35, 0.85);
    color: rgba(196, 154, 60, 0.8);
    border: 1px solid rgba(196, 154, 60, 0.2);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
#save-toast.show {
    animation: saveToastAnim 1.4s ease-out forwards;
}
@keyframes saveToastAnim {
    0% { opacity: 0; transform: translateY(8px); }
    15% { opacity: 1; transform: translateY(0); }
    70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-4px); }
}

/* ===== Board wall obstacles (boss fights) ===== */
.board-wall-indicator {
    position: absolute;
    background: linear-gradient(180deg, rgba(80, 50, 30, 0.5), rgba(50, 30, 15, 0.7));
    border: 1px solid rgba(120, 80, 40, 0.5);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(200, 150, 80, 0.15);
    pointer-events: none;
    z-index: 2;
}

/* ===== QOL: Speed badge ===== */
#speed-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #48dbfb;
    background: rgba(72, 219, 251, 0.1);
    border: 1px solid rgba(72, 219, 251, 0.3);
    border-radius: var(--radius-sm);
}
#speed-badge.hidden { display: none; }

/* ===== QOL: Map legend ===== */
.map-legend {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: rgba(15, 12, 30, 0.92);
    border: 1px solid rgba(196, 154, 60, 0.2);
    padding: 12px 20px;
    text-align: center;
    backdrop-filter: blur(4px);
}
.map-legend-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-glow);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.map-legend-items {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 10px;
}
.map-legend-items span { display: flex; align-items: center; gap: 4px; }
.map-legend-close {
    background: rgba(196, 154, 60, 0.15);
    border: 1px solid rgba(196, 154, 60, 0.25);
    color: var(--accent-glow);
    padding: 4px 16px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== QOL: Confirmation warning ===== */
.reward-confirm-warning {
    font-size: 11px;
    color: rgba(255, 160, 80, 0.6);
    font-style: italic;
    margin: 4px 0 8px;
    letter-spacing: 0.5px;
}

/* ===== QOL: Reward dice summary ===== */
.reward-dice-summary {
    margin: 12px 0 16px;
    border: 1px solid rgba(100, 90, 140, 0.12);
    background: rgba(0,0,0,0.15);
}
.reward-dice-toggle {
    cursor: pointer;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    list-style: none;
    user-select: none;
}
.reward-dice-toggle::-webkit-details-marker { display: none; }
.reward-dice-toggle::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 6px;
    font-size: 9px;
    transition: transform 0.2s;
}
details[open].reward-dice-summary > .reward-dice-toggle::before {
    transform: rotate(90deg);
}
.reward-dice-list {
    padding: 6px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
}
.rds-die {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.rds-name {
    min-width: 80px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
}
.rds-faces { display: flex; gap: 2px; }
.rds-face {
    font-size: 14px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: help;
}
.rds-face[data-face-type="damage"]  { background: rgba(255, 80, 60, 0.15); }
.rds-face[data-face-type="block"]   { background: rgba(80, 150, 255, 0.15); }
.rds-face[data-face-type="heal"]    { background: rgba(60, 200, 100, 0.15); }
.rds-face[data-face-type="poison"]  { background: rgba(60, 180, 80, 0.15); }
.rds-face[data-face-type="utility"] { background: rgba(180, 120, 230, 0.15); }
.rds-face[data-face-type="status"]  { background: rgba(220, 100, 200, 0.15); }
.rds-face[data-face-type="curse"]   { background: rgba(170, 80, 80, 0.15); }
.rds-face[data-face-type="blank"]   { background: rgba(80, 80, 80, 0.1); }

/* ===== QOL: Reshuffle flash on hand area ===== */
#hand-area.reshuffle-flash {
    animation: reshuffleFlash 0.6s ease-out;
}
@keyframes reshuffleFlash {
    0% { box-shadow: inset 0 0 30px rgba(196, 154, 60, 0.3); }
    100% { box-shadow: none; }
}

/* ===== QOL: Hotkey help ===== */
#hotkey-help {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.hotkey-help-panel {
    background: var(--bg-light, #1a1a2e);
    border: 1px solid rgba(196, 154, 60, 0.2);
    padding: 24px 32px;
    max-width: 340px;
    text-align: center;
}
.hotkey-help-panel h3 {
    color: var(--accent-glow);
    font-size: 18px;
    margin-bottom: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.hotkey-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    text-align: left;
    margin-bottom: 16px;
}
.hotkey-grid kbd {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 2px 8px;
    font-family: monospace;
    font-size: 12px;
    color: var(--accent-glow);
    text-align: center;
    min-width: 32px;
}
.hotkey-grid span {
    font-size: 13px;
    color: var(--text-dim);
}
.hotkey-hint {
    font-size: 11px;
    color: rgba(200,190,220,0.4);
    font-style: italic;
    margin-bottom: 14px;
}
.hotkey-close {
    background: rgba(196, 154, 60, 0.15);
    border: 1px solid rgba(196, 154, 60, 0.3);
    color: var(--accent-glow);
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.hotkey-close:hover {
    background: rgba(196, 154, 60, 0.25);
}

/* ===== QOL: No throws hint ===== */
#no-throws-hint {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    color: rgba(255, 180, 60, 0.8);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    pointer-events: none;
    animation: noThrowsPulse 2s ease-in-out infinite;
}
@keyframes noThrowsPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg-dark);
    color: var(--text);
}

/* ===== Game Container ===== */
#game {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ===== Top Bar ===== */
#top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: linear-gradient(180deg, rgba(15, 13, 28, 0.99) 0%, rgba(10, 8, 20, 0.96) 100%);
    border-bottom: 1px solid rgba(196, 154, 60, 0.08);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(196, 154, 60, 0.04);
    z-index: 10;
}

#player-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#player-hp-label {
    font-weight: 800;
    font-size: 13px;
    color: var(--hp-red);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 8px rgba(212, 64, 64, 0.2);
}

#player-hp-label::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 3px;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C12 21 4 15 4 9.5 4 6.5 6.5 4 9 4c1.5 0 2.5.8 3 1.5C12.5 4.8 13.5 4 15 4c2.5 0 5 2.5 5 5.5C20 15 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21C12 21 4 15 4 9.5 4 6.5 6.5 4 9 4c1.5 0 2.5.8 3 1.5C12.5 4.8 13.5 4 15 4c2.5 0 5 2.5 5 5.5C20 15 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}

#hp-bar {
    position: relative;
    width: 240px;
    height: 26px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.2) 100%),
        var(--hp-red-dark);
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* HP bar segment ticks at 25/50/75% */
#hp-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent calc(25% - 0.5px), rgba(255,255,255,0.12) 25%, transparent calc(25% + 0.5px)),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(90deg, transparent calc(75% - 0.5px), rgba(255,255,255,0.12) 75%, transparent calc(75% + 0.5px));
}

#hp-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #a82828, #d44040, var(--hp-red), #e06050);
    border-radius: var(--radius-pill);
    transition: width 0.4s ease;
    position: relative;
}

/* Glossy shine overlay on HP fill */
#hp-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 100%
    );
    pointer-events: none;
}

/* Shield/block segment on HP bar */
#hp-shield-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.7), rgba(52, 152, 219, 0.5));
    border-radius: var(--radius-pill);
    pointer-events: none;
    display: none;
    transition: width 0.3s ease, left 0.3s ease;
    z-index: 1;
}

#hp-shield-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 50%
    );
}

#hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,0.5);
    z-index: 2;
    letter-spacing: 0.5px;
}

#floor-info {
    font-size: 12px;
    color: rgba(196, 154, 60, 0.7);
    font-weight: 700;
    padding: 5px 14px;
    background: rgba(196, 154, 60, 0.05);
    border: 1px solid rgba(196, 154, 60, 0.12);
    border-radius: var(--radius-pill);
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

#gold-info {
    font-size: 16px;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.25);
    padding: 4px 12px;
    background: rgba(241, 196, 15, 0.04);
    border: 1px solid rgba(241, 196, 15, 0.08);
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
}

#gold-info::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -2px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 8v8M10 10h4M10 14h4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 8v8M10 10h4M10 14h4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ===== Volume Button ===== */
.volume-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
}

.volume-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(196, 154, 60, 0.1);
}

.volume-btn .volume-icon {
    display: block;
}

.volume-btn .volume-icon.hidden {
    display: none !important;
}

/* ===== Combat Area ===== */
#combat-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px 0;
    position: relative;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(196, 154, 60, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 30%, rgba(80, 60, 140, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 40%, rgba(140, 50, 50, 0.02) 0%, transparent 50%),
        var(--bg-dark);
    transition: background 0.6s ease;
}

/* ===== Animated Background Canvas ===== */
#bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Ensure main combat children sit above the background canvas */
#player-side,
#dice-board,
#enemy-side {
    position: relative;
    z-index: 1;
}

/* Edge vignette — darkens edges for depth focus */
#combat-area::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 55%, transparent 50%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Ground plane — gradient floor that grounds the sprites */
#combat-area::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(
        to top,
        rgba(50, 55, 80, 0.1) 0%,
        rgba(40, 45, 65, 0.05) 40%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Per-act ground plane tinting */
#combat-area[data-act="2"]::before {
    background: linear-gradient(
        to top,
        rgba(140, 50, 30, 0.12) 0%,
        rgba(100, 40, 20, 0.06) 40%,
        transparent 100%
    );
}

#combat-area[data-act="3"]::before {
    background: linear-gradient(
        to top,
        rgba(40, 100, 160, 0.12) 0%,
        rgba(30, 80, 140, 0.06) 40%,
        transparent 100%
    );
}

/* Act 1: Dungeon stone pattern */
#combat-area[data-act="1"] {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(196, 154, 60, 0.06) 0%, transparent 60%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 39px,
            rgba(50, 60, 80, 0.08) 39px,
            rgba(50, 60, 80, 0.08) 40px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 39px,
            rgba(50, 60, 80, 0.08) 39px,
            rgba(50, 60, 80, 0.08) 40px
        ),
        var(--bg-dark);
}

/* Act 2: Volcanic / red tint */
#combat-area[data-act="2"] {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(231, 76, 60, 0.08) 0%, transparent 60%),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 19px,
            rgba(180, 40, 30, 0.06) 19px,
            rgba(180, 40, 30, 0.06) 20px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 19px,
            rgba(180, 40, 30, 0.04) 19px,
            rgba(180, 40, 30, 0.04) 20px
        ),
        linear-gradient(180deg, #080c14 0%, #140c08 100%);
}

/* Act 3: Crystal / blue tint */
#combat-area[data-act="3"] {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(52, 152, 219, 0.1) 0%, transparent 60%),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 29px,
            rgba(52, 152, 219, 0.05) 29px,
            rgba(52, 152, 219, 0.05) 30px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 29px,
            rgba(100, 180, 255, 0.04) 29px,
            rgba(100, 180, 255, 0.04) 30px
        ),
        linear-gradient(180deg, #080c14 0%, #080c18 100%);
}

/* Player Side */
#player-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    padding: 20px 20px 14px;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(196, 154, 60, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 18, 35, 0.5) 0%, rgba(12, 10, 24, 0.3) 100%);
    border: 1px solid rgba(196, 154, 60, 0.12);
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Class-specific accent colors */
#player-side[data-player-class="tinkerer"] { border-color: rgba(196, 154, 60, 0.2); }
#player-side[data-player-class="tinkerer"] #player-name { border-bottom: 2px solid rgba(196, 154, 60, 0.35); }

#player-side[data-player-class="pyromancer"] { border-color: rgba(231, 76, 60, 0.2); }
#player-side[data-player-class="pyromancer"] #player-name { border-bottom: 2px solid rgba(231, 76, 60, 0.35); }

#player-side[data-player-class="cursedKnight"] { border-color: rgba(160, 50, 220, 0.2); }
#player-side[data-player-class="cursedKnight"] #player-name { border-bottom: 2px solid rgba(160, 50, 220, 0.35); }

/* Compact HP bar under player sprite */
#player-hp-compact {
    order: 3;
    margin-top: -4px;
    width: 80%;
    max-width: 170px;
    height: 18px;
    background: rgba(10, 8, 20, 0.7);
    border: 1px solid rgba(212, 64, 64, 0.2);
    border-radius: var(--radius-pill);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.03);
}
#player-hp-compact .player-hp-fill {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg,
        rgba(220, 80, 80, 0.9) 0%,
        var(--hp-red) 40%,
        rgba(160, 40, 40, 0.95) 100%);
    transition: width 0.4s ease;
}
#player-hp-compact .player-hp-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.5px;
}
/* Incoming damage preview overlay */
#player-hp-compact .player-hp-damage-preview {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 107, 107, 0.5);
    animation: damagePreviewPulse 1s ease-in-out infinite;
    pointer-events: none;
    display: none;
}
#player-hp-compact.hp-low {
    border-color: rgba(255, 60, 60, 0.4);
    animation: playerHpLowPulse 1.2s ease-in-out infinite;
}
#player-hp-compact.hp-low .player-hp-fill {
    background: linear-gradient(180deg,
        rgba(255, 80, 80, 1) 0%,
        rgba(220, 50, 50, 1) 40%,
        rgba(180, 30, 30, 1) 100%);
}
@keyframes playerHpLowPulse {
    0%, 100% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 4px rgba(255, 60, 60, 0.2); }
    50% { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 60, 60, 0.45); }
}

#player-sprite {
    width: 180px;
    height: 180px;
    background:
        radial-gradient(circle at 50% 40%, rgba(196, 154, 60, 0.04) 0%, transparent 70%),
        var(--surface);
    border: 2px solid rgba(80, 70, 120, 0.3);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    image-rendering: auto;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(196, 154, 60, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    order: 2;
    animation: playerIdleBreathe 3.5s ease-in-out infinite;
}

@keyframes playerIdleBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Ground shadow / pedestal beneath player sprite */
#player-side::after {
    content: '';
    display: block;
    width: 150px;
    height: 16px;
    margin-top: -8px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    order: 3;
}


#player-sprite.hit-shake {
    animation: playerHitShake 0.4s ease;
}

@keyframes playerHitShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    15% { transform: translateX(6px) rotate(2deg); }
    30% { transform: translateX(-6px) rotate(-2deg); }
    45% { transform: translateX(5px) rotate(1deg); }
    60% { transform: translateX(-5px) rotate(-1deg); }
    75% { transform: translateX(2px) rotate(0deg); }
}

#player-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    padding: 5px 18px;
    background: linear-gradient(180deg, rgba(25, 22, 40, 0.7), rgba(12, 10, 24, 0.8));
    border: 1px solid rgba(100, 90, 140, 0.15);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.3);
    order: 4;
}

/* Dice pile summary under player name */
.player-dice-summary {
    display: flex;
    gap: 10px;
    justify-content: center;
    order: 5;
    padding: 3px 0;
}
.pds-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(200, 190, 220, 0.6);
    letter-spacing: 0.3px;
}
.pds-item .icon { width: 12px; height: 12px; opacity: 0.6; }
.pds-bag { color: rgba(46, 204, 113, 0.7); }
.pds-hand { color: rgba(241, 196, 15, 0.7); }
.pds-discard { color: rgba(149, 165, 166, 0.5); }

#player-status-effects {
    order: 6;
}

/* Stat Bubbles (block) */
.stat-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background:
        radial-gradient(circle at 40% 25%, rgba(52, 152, 219, 0.22) 0%, transparent 65%),
        rgba(12, 20, 35, 0.85);
    border: 2px solid rgba(52, 152, 219, 0.4);
    border-radius: 10px;
    padding: 8px 18px 6px;
    font-size: 28px;
    font-weight: 900;
    color: var(--block-blue);
    text-shadow: 0 0 12px rgba(52, 152, 219, 0.4);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(52, 152, 219, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -2px 5px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.stat-bubble:not(.hidden) {
    animation: blockAppear 0.3s ease-out;
}
@keyframes blockAppear {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.status-bubble-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-label {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.65;
    line-height: 1;
}

/* Block bubble in player-side gets order 1 */
#player-block {
    order: 1;
}

.stat-bubble .stat-icon {
    font-size: 18px;
}

.hidden {
    display: none !important;
}

/* Roll Zone */
/* ===== Dice Board — Felt Table ===== */
#dice-board {
    flex: 2;
    align-self: stretch;
    position: relative;
    min-height: 300px;
    overflow: hidden;
    /* Fallback background — Three.js canvas renders the felt table */
    background: #112a15;
    border: none;
}

/* Felt noise texture — hidden since Three.js renders the surface */
#dice-board::before {
    display: none;
}

/* Rail/cushion edge effect — wood frame inner shadow */
/* Rail edge overlay removed — seamless felt surface */
#dice-board::after { display: none; }

/* Board hint */
#board-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.board-hint-icon {
    font-size: 38px;
    filter: grayscale(0.4);
    color: rgba(120, 160, 110, 0.5);
}

.board-hint-text {
    font-size: 10px;
    color: rgba(120, 160, 110, 0.4);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}

/* Hide hint when board has dice (3D dice set .has-dice class on board) */
#dice-board:has(.board-die-wrapper) #board-hint,
#dice-board.has-dice #board-hint {
    opacity: 0;
}

/* Drop target states */
#dice-board.drop-target {
    /* Subtle glow when dragging a die toward the board */
    box-shadow: inset 0 0 40px rgba(100, 180, 80, 0.06);
}

#dice-board.drop-hover {
    box-shadow: inset 0 0 60px rgba(100, 180, 80, 0.1);
}

/* Board die wrapper — positioned by physics */
.board-die-wrapper {
    position: absolute;
    z-index: 2;
    will-change: transform;
    pointer-events: none;
    transition: none; /* physics handles positioning */
    perspective: 600px;
}

/* Board dice: override the large roll-zone sizes to be compact */
.board-die-wrapper .die-container {
    position: static !important;
}
/* All board dice: shared base */
.board-die-wrapper .die {
    transform-style: preserve-3d;
}

/* --- Board D4: tetrahedron triangle --- */
.board-die-wrapper .die.die-d4 {
    width: 55px !important;
    height: 55px !important;
}
.board-die-wrapper .die.die-d4 .die-face {
    width: 55px !important;
    height: 55px !important;
    clip-path: polygon(50% 12%, 5% 90%, 95% 90%) !important;
    border-radius: 0 !important;
}
.board-die-wrapper .die.die-d4 .die-face:nth-child(1) { transform: none !important; }
.board-die-wrapper .die.die-d4 .die-face:nth-child(2) { transform: rotateY(90deg) !important; }
.board-die-wrapper .die.die-d4 .die-face:nth-child(3) { transform: rotateY(180deg) !important; }
.board-die-wrapper .die.die-d4 .die-face:nth-child(4) { transform: rotateY(270deg) !important; }
.board-die-wrapper .die.die-d4 .face-icon { font-size: 16px !important; }
.board-die-wrapper .die.die-d4 .face-value { font-size: 10px !important; }

/* --- Board D6: standard cube --- */
.board-die-wrapper .die.die-d6 {
    width: 58px !important;
    height: 58px !important;
}
.board-die-wrapper .die.die-d6 .die-face {
    width: 58px !important;
    height: 58px !important;
    border-radius: 4px !important;
}
.board-die-wrapper .die.die-d6 .die-face:nth-child(1) { transform: rotateY(0deg) translateZ(29px) !important; }
.board-die-wrapper .die.die-d6 .die-face:nth-child(2) { transform: rotateY(180deg) translateZ(29px) !important; }
.board-die-wrapper .die.die-d6 .die-face:nth-child(3) { transform: rotateY(-90deg) translateZ(29px) !important; }
.board-die-wrapper .die.die-d6 .die-face:nth-child(4) { transform: rotateY(90deg) translateZ(29px) !important; }
.board-die-wrapper .die.die-d6 .die-face:nth-child(5) { transform: rotateX(90deg) translateZ(29px) !important; }
.board-die-wrapper .die.die-d6 .die-face:nth-child(6) { transform: rotateX(-90deg) translateZ(29px) !important; }

/* --- Board D8: taller diamond shape --- */
.board-die-wrapper .die.die-d8 {
    width: 54px !important;
    height: 64px !important;
}
.board-die-wrapper .die.die-d8 .die-face {
    width: 54px !important;
    height: 64px !important;
    border-radius: 3px !important;
    clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%) !important;
}
.board-die-wrapper .die.die-d8 .die-face:nth-child(1) { transform: rotateY(0deg) translateZ(27px) !important; }
.board-die-wrapper .die.die-d8 .die-face:nth-child(2) { transform: rotateY(180deg) translateZ(27px) !important; }
.board-die-wrapper .die.die-d8 .die-face:nth-child(3) { transform: rotateY(-90deg) translateZ(27px) !important; }
.board-die-wrapper .die.die-d8 .die-face:nth-child(4) { transform: rotateY(90deg) translateZ(27px) !important; }
.board-die-wrapper .die.die-d8 .die-face:nth-child(5) { transform: rotateX(90deg) translateZ(32px) !important; }
.board-die-wrapper .die.die-d8 .die-face:nth-child(6) { transform: rotateX(-90deg) translateZ(32px) !important; }

/* --- Board D12: rounded pentagonal --- */
.board-die-wrapper .die.die-d12 {
    width: 64px !important;
    height: 64px !important;
}
.board-die-wrapper .die.die-d12 .die-face {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) !important;
}
.board-die-wrapper .die.die-d12 .die-face:nth-child(1) { transform: rotateY(0deg) translateZ(32px) !important; }
.board-die-wrapper .die.die-d12 .die-face:nth-child(2) { transform: rotateY(180deg) translateZ(32px) !important; }
.board-die-wrapper .die.die-d12 .die-face:nth-child(3) { transform: rotateY(-90deg) translateZ(32px) !important; }
.board-die-wrapper .die.die-d12 .die-face:nth-child(4) { transform: rotateY(90deg) translateZ(32px) !important; }
.board-die-wrapper .die.die-d12 .die-face:nth-child(5) { transform: rotateX(90deg) translateZ(32px) !important; }
.board-die-wrapper .die.die-d12 .die-face:nth-child(6) { transform: rotateX(-90deg) translateZ(32px) !important; }

/* --- Board D20: circular icosahedron --- */
.board-die-wrapper .die.die-d20 {
    width: 68px !important;
    height: 68px !important;
}
.board-die-wrapper .die.die-d20 .die-face {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
}
.board-die-wrapper .die.die-d20 .die-face:nth-child(1) { transform: rotateY(0deg) translateZ(34px) !important; }
.board-die-wrapper .die.die-d20 .die-face:nth-child(2) { transform: rotateY(180deg) translateZ(34px) !important; }
.board-die-wrapper .die.die-d20 .die-face:nth-child(3) { transform: rotateY(-90deg) translateZ(34px) !important; }
.board-die-wrapper .die.die-d20 .die-face:nth-child(4) { transform: rotateY(90deg) translateZ(34px) !important; }
.board-die-wrapper .die.die-d20 .die-face:nth-child(5) { transform: rotateX(90deg) translateZ(34px) !important; }
.board-die-wrapper .die.die-d20 .die-face:nth-child(6) { transform: rotateX(-90deg) translateZ(34px) !important; }

/* Fallback: dice without a specific size class */
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) {
    width: 58px !important;
    height: 58px !important;
}
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) .die-face {
    width: 58px !important;
    height: 58px !important;
}
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) .die-face:nth-child(1) { transform: rotateY(0deg) translateZ(29px) !important; }
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) .die-face:nth-child(2) { transform: rotateY(180deg) translateZ(29px) !important; }
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) .die-face:nth-child(3) { transform: rotateY(-90deg) translateZ(29px) !important; }
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) .die-face:nth-child(4) { transform: rotateY(90deg) translateZ(29px) !important; }
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) .die-face:nth-child(5) { transform: rotateX(90deg) translateZ(29px) !important; }
.board-die-wrapper .die:not(.die-d4):not(.die-d6):not(.die-d8):not(.die-d12):not(.die-d20) .die-face:nth-child(6) { transform: rotateX(-90deg) translateZ(29px) !important; }

/* Board die face content sizing */
.board-die-wrapper .face-icon { font-size: 20px; }
.board-die-wrapper .face-value { font-size: 12px; font-weight: 800; }
.board-die-wrapper .face-name { display: none; }
/* Slightly smaller content for d4/d8 */
.board-die-wrapper .die.die-d4 .face-name,
.board-die-wrapper .die.die-d8 .face-name { display: none; }
.board-die-wrapper .die.die-d8 .face-icon { font-size: 18px; }
.board-die-wrapper .die.die-d8 .face-value { font-size: 11px; }
/* Larger content for d12/d20 since they have more room */
.board-die-wrapper .die.die-d12 .face-icon { font-size: 22px; }
.board-die-wrapper .die.die-d20 .face-icon { font-size: 24px; }
.board-die-wrapper .die.die-d20 .face-value { font-size: 13px; }

/* Depth shading — side/rear faces slightly darker for solid 3D look */
.board-die-wrapper .die .die-face:nth-child(2) { filter: brightness(0.85); }
.board-die-wrapper .die .die-face:nth-child(3),
.board-die-wrapper .die .die-face:nth-child(4) { filter: brightness(0.75); }
.board-die-wrapper .die .die-face:nth-child(5),
.board-die-wrapper .die .die-face:nth-child(6) { filter: brightness(0.65); }
/* D8 diamond — sharper edge highlight on front face */
.board-die-wrapper .die.die-d8 .die-face:nth-child(1) {
    border: 1px solid rgba(255,255,255,0.2);
}
/* D20 sphere — subtle inner shadow for roundness */
.board-die-wrapper .die.die-d20 .die-face:nth-child(1) {
    box-shadow: inset 0 0 12px rgba(0,0,0,0.2);
}

/* Type-colored underglow on the felt — shows through the board-die-landed shadow */
.board-die-landed .die-container[data-dominant="damage"] ~ .board-underglow,
.board-die-landed[data-dominant="damage"]::after {
    background: radial-gradient(ellipse, rgba(220,60,60,0.2) 0%, transparent 70%) !important;
}
.board-die-landed[data-dominant="block"]::after {
    background: radial-gradient(ellipse, rgba(52,140,219,0.2) 0%, transparent 70%) !important;
}
.board-die-landed[data-dominant="heal"]::after {
    background: radial-gradient(ellipse, rgba(46,180,100,0.2) 0%, transparent 70%) !important;
}
.board-die-landed[data-dominant="poison"]::after {
    background: radial-gradient(ellipse, rgba(50,200,100,0.2) 0%, transparent 70%) !important;
}
.board-die-landed[data-dominant="utility"]::after,
.board-die-landed[data-dominant="status"]::after {
    background: radial-gradient(ellipse, rgba(155,89,200,0.2) 0%, transparent 70%) !important;
}

/* Rarity glow on board dice */
.board-die-wrapper[data-rarity="uncommon"] {
    filter: drop-shadow(0 0 6px rgba(46,204,113,0.3));
}
.board-die-wrapper[data-rarity="rare"] {
    filter: drop-shadow(0 0 8px rgba(155,89,182,0.35));
}
.board-die-wrapper[data-rarity="legendary"] {
    filter: drop-shadow(0 0 10px rgba(241,196,15,0.4));
    animation: boardLegendaryPulse 2s ease-in-out infinite;
}
@keyframes boardLegendaryPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(241,196,15,0.35)); }
    50% { filter: drop-shadow(0 0 14px rgba(241,196,15,0.55)); }
}

/* Board die settled shimmer — subtle single sweep after landing */
.board-die-landed .die-face:nth-child(1)::after {
    animation: boardDieShimmer 3s ease-in-out 0.5s 1 !important;
}
@keyframes boardDieShimmer {
    0%, 100% { left: -120%; opacity: 0; }
    20% { opacity: 0.8; }
    60% { left: 160%; opacity: 0.8; }
    80% { left: 160%; opacity: 0; }
}

/* During throw — tumble animation (speed set via --tumble-speed CSS var) */
/* Use #dice-board prefix to match specificity of roll-zone overrides in dice.css */
#dice-board .board-die-tumbling .die {
    animation: boardDieTumble var(--tumble-speed, 0.35s) linear infinite !important;
    transform-style: preserve-3d;
}
/* D4 tetrahedron tumble — different rotation axes */
#dice-board .board-die-tumbling .die.die-d4 {
    animation: boardDieTumbleD4 var(--tumble-speed, 0.3s) linear infinite !important;
}

@keyframes boardDieTumble {
    0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    25%  { transform: rotateX(100deg) rotateY(55deg) rotateZ(110deg); }
    50%  { transform: rotateX(180deg) rotateY(140deg) rotateZ(180deg); }
    75%  { transform: rotateX(280deg) rotateY(260deg) rotateZ(290deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes boardDieTumbleD4 {
    0%   { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(720deg); }
}

/* D8 tumble — tilted diamond rotation */
#dice-board .board-die-tumbling .die.die-d8 {
    animation: boardDieTumbleD8 var(--tumble-speed, 0.35s) linear infinite !important;
}
@keyframes boardDieTumbleD8 {
    0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg); }
    25%  { transform: rotateX(90deg) rotateY(80deg) rotateZ(45deg); }
    50%  { transform: rotateX(180deg) rotateY(190deg) rotateZ(45deg); }
    75%  { transform: rotateX(270deg) rotateY(280deg) rotateZ(45deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(45deg); }
}

/* D12 tumble — heavier, more axes */
#dice-board .board-die-tumbling .die.die-d12 {
    animation: boardDieTumbleD12 var(--tumble-speed, 0.4s) linear infinite !important;
}
@keyframes boardDieTumbleD12 {
    0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    20%  { transform: rotateX(80deg) rotateY(50deg) rotateZ(65deg); }
    40%  { transform: rotateX(155deg) rotateY(120deg) rotateZ(140deg); }
    60%  { transform: rotateX(230deg) rotateY(200deg) rotateZ(220deg); }
    80%  { transform: rotateX(300deg) rotateY(290deg) rotateZ(300deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* D20 tumble — slow majestic roll on many axes */
#dice-board .board-die-tumbling .die.die-d20 {
    animation: boardDieTumbleD20 var(--tumble-speed, 0.45s) linear infinite !important;
}
@keyframes boardDieTumbleD20 {
    0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    25%  { transform: rotateX(80deg) rotateY(100deg) rotateZ(70deg); }
    50%  { transform: rotateX(170deg) rotateY(190deg) rotateZ(160deg); }
    75%  { transform: rotateX(270deg) rotateY(280deg) rotateZ(270deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

/* Wall bounce flash */
.board-die-wall-hit {
    animation: wallHitFlash 0.15s ease-out;
}
@keyframes wallHitFlash {
    0%   { filter: brightness(1.6); }
    100% { filter: brightness(1); }
}

/* Arc preview — SVG parabolic throw trajectory */
.throw-arc-preview {
    pointer-events: none;
    z-index: 400;
}

/* Hand cursor states — grab feel for flick mechanic */
.die-container:active:not(.disabled) {
    cursor: grabbing;
}
body.hand-dragging,
body.hand-dragging * {
    cursor: grabbing !important;
}
body.hand-flicking,
body.hand-flicking * {
    cursor: grab !important;
}

/* Pool break — striker cue */
.striker-cue {
    position: absolute;
    transform: translateX(-50%);
    color: #ffd700;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 2px 4px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 10;
    animation: strikerPulse 1s ease-in-out infinite;
}
@keyframes strikerPulse {
    0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
    50% { opacity: 0.6; transform: translateX(-50%) translateY(-6px); }
}

/* Dragging die — enhanced visual */
.die-container.dragging {
    filter: brightness(1.2) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.die-container.dragging .die {
    transition: transform 0.08s ease-out;
    transform-style: preserve-3d;
}

/* Landed state — show the correct face, no float */
.board-die-landed .die {
    animation: none !important;
    /* Landing rotation set inline by createBoardDie */
}

/* Landed subtle shadow on the felt */
.board-die-landed::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 10%;
    width: 80%;
    height: 8px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Land impact — scale bounce on the wrapper (not the die, to avoid fighting with face rotation) */
.board-die-landed {
    animation: boardDieLandImpact 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes boardDieLandImpact {
    0%   { scale: 1.25; filter: brightness(1.4) drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)); }
    30%  { scale: 0.88; }
    55%  { scale: 1.08; }
    75%  { scale: 0.97; }
    100% { scale: 1; filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

/* Landing ripple on the board felt */
.board-die-landed::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    border: 1px solid rgba(200, 200, 200, 0.15);
    pointer-events: none;
    animation: boardRipple 0.5s ease-out forwards;
    z-index: -1;
}

@keyframes boardRipple {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Sweep animation — dice fly off board */
.board-die-sweeping {
    transition: transform 0.4s cubic-bezier(0.55, 0, 1, 0.45),
                opacity 0.35s ease-in !important;
    opacity: 0 !important;
    transform: translate(var(--sweep-x, 0), var(--sweep-y, 100px)) scale(0.3) rotate(720deg) !important;
}

/* ===== Board Zones ===== */
/* ===== Board Zones — magical circles burnt into the felt ===== */
.board-zone {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        var(--zone-color) 0%,
        transparent 70%
    );
    border: 2px solid var(--zone-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.board-zone-active {
    opacity: 1;
    transform: scale(1);
    animation: zoneFlashIn 0.4s ease-out, zonePulse 3s ease-in-out 0.4s infinite;
}

/* Bright flash on zone materialization */
@keyframes zoneFlashIn {
    0% {
        filter: brightness(4) saturate(2);
        box-shadow: 0 0 40px var(--zone-glow), 0 0 80px var(--zone-glow);
    }
    100% {
        filter: brightness(1) saturate(1);
        box-shadow: 0 0 6px var(--zone-glow);
    }
}

.board-zone-removing {
    opacity: 0 !important;
    transform: scale(0.3) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.board-zone-label {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    text-shadow:
        0 0 6px var(--zone-glow),
        0 0 12px var(--zone-glow),
        0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

/* Outer ring — etched into the felt */
.board-zone::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--zone-border);
    box-shadow:
        inset 0 0 15px var(--zone-glow),
        0 0 8px var(--zone-glow);
    pointer-events: none;
    opacity: 0.4;
}

/* Inner glow core */
.board-zone::after {
    content: '';
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        var(--zone-glow) 0%,
        transparent 70%
    );
    opacity: 0.15;
    pointer-events: none;
    animation: zoneCore 2s ease-in-out infinite alternate;
}

/* Zone pulse — breathing glow */
@keyframes zonePulse {
    0%, 100% {
        border-color: var(--zone-border);
        box-shadow: 0 0 6px var(--zone-glow), inset 0 0 10px rgba(0,0,0,0.2);
    }
    50% {
        border-color: var(--zone-border);
        box-shadow: 0 0 20px var(--zone-glow), 0 0 40px var(--zone-glow), inset 0 0 10px rgba(0,0,0,0.1);
    }
}

/* Inner core brightens/dims */
@keyframes zoneCore {
    0% { opacity: 0.1; transform: scale(0.9); }
    100% { opacity: 0.25; transform: scale(1.1); }
}

/* Die affected by a zone — colored glow ring */
.board-zone-affected {
    filter: drop-shadow(0 0 8px var(--zone-glow));
}

/* ===== Settled Die Glow — pulsing type-colored indicator under each die ===== */
.board-die-glow {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    opacity: 0;
    animation: dieGlowIn 0.4s ease-out 0.2s forwards, dieGlowPulse 2.5s ease-in-out 0.6s infinite;
}

@keyframes dieGlowIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
}

@keyframes dieGlowPulse {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.45; transform: translate(-50%, -50%) scale(1.15); }
}

/* ===== Landing Ripple — expanding ring on felt where dice settle ===== */
.board-landing-ripple {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    transform: translate(-50%, -50%);
    animation: landingRipple 0.6s ease-out forwards;
}

@keyframes landingRipple {
    0% {
        width: 10px;
        height: 10px;
        border: 2px solid rgba(200, 190, 160, 0.6);
        box-shadow: 0 0 8px rgba(200, 190, 160, 0.3);
        opacity: 1;
    }
    100% {
        width: 80px;
        height: 80px;
        border: 1px solid rgba(200, 190, 160, 0);
        box-shadow: 0 0 20px rgba(200, 190, 160, 0);
        opacity: 0;
    }
}

/* Adjacency match highlight */
.board-die-adjacency-match {
    filter: drop-shadow(0 0 10px rgba(243, 196, 15, 0.6));
}

.board-die-adjacency-match::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(243, 196, 15, 0.5);
    border-radius: var(--radius-md);
    animation: adjacencyPulse 0.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes adjacencyPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Roll selected button repositioned for the board */
#dice-board #roll-selected-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

#dice-board #roll-selection-info {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

#dice-board #roll-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

#roll-result-fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 1px;
    animation: resultPop 0.6s ease-out;
    pointer-events: none;
    z-index: 999;
    text-shadow:
        0 0 20px currentColor,
        0 0 40px currentColor,
        0 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.2);
}

#roll-result-fixed.damage {
    color: var(--damage-red);
}

#roll-result-fixed.block {
    color: var(--block-blue);
}

#roll-result-fixed.heal {
    color: var(--heal-green);
}

#roll-result-fixed.poison {
    color: var(--poison-green);
}

#roll-result-fixed.status {
    color: #ba55d3;
}

#roll-result-fixed.curse {
    color: #d4a84a;
}

/* Hide the original in-DOM roll-result (replaced by fixed version) */
#roll-result {
    display: none !important;
}

@keyframes resultPop {
    0% { transform: translate(-50%, -50%) scale(0.7); opacity: 0; filter: blur(3px); }
    30% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; filter: blur(0); }
    55% { transform: translate(-50%, -50%) scale(0.97); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes resultFade {
    0% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%) translateY(-20px); }
}

/* ===== Multi-Roll: Roll Button & Selection Info ===== */
#roll-selected-btn {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    padding: 10px 28px;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1a1a2e;
    background: linear-gradient(180deg, #f7dc6f 0%, #f1c40f 50%, #d4a800 100%);
    border: 2px solid rgba(241, 196, 15, 0.7);
    border-radius: 8px;
    cursor: pointer;
    box-shadow:
        0 0 20px rgba(241, 196, 15, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
    animation: rollBtnPulse 1.8s ease-in-out infinite;
    white-space: nowrap;
}

#roll-selected-btn:hover:not(:disabled) {
    transform: translateX(-50%) scale(1.06);
    box-shadow:
        0 0 30px rgba(241, 196, 15, 0.55),
        0 6px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.1);
}

#roll-selected-btn:active:not(:disabled) {
    transform: translateX(-50%) scale(0.97);
    box-shadow:
        0 0 12px rgba(241, 196, 15, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4);
}

#roll-selected-btn:disabled {
    background: linear-gradient(180deg, #666 0%, #444 100%);
    border-color: rgba(100, 100, 100, 0.5);
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
    animation: none;
    opacity: 0.7;
}

@keyframes rollBtnPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(241, 196, 15, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 32px rgba(241, 196, 15, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4);
    }
}

#roll-selection-info {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold, #f1c40f);
    background: rgba(20, 15, 30, 0.75);
    padding: 4px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(241, 196, 15, 0.25);
    white-space: nowrap;
    letter-spacing: 0.5px;
    pointer-events: none;
}

/* Hide hint when roll button is visible */
#dice-board:has(#roll-selected-btn:not(.hidden)) #board-hint {
    opacity: 0;
}

/* Enemy Side */
#enemy-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 300px;
    padding: 18px 18px 14px;
    background:
        radial-gradient(ellipse at 50% 20%, rgba(220, 50, 40, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(80, 20, 40, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, rgba(30, 12, 18, 0.5) 0%, rgba(18, 10, 20, 0.3) 100%);
    border: 1px solid rgba(200, 50, 50, 0.15);
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 80, 60, 0.04),
        inset 0 0 40px rgba(100, 20, 20, 0.06);
    position: relative;
}

/* Subtle menacing vignette on the enemy container */
#enemy-side::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(80, 10, 10, 0.12) 100%);
    pointer-events: none;
}

/* Multi-enemy container */
#enemies-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 18px;
    justify-content: center;
}

/* Individual enemy slot */
.enemy-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, opacity 0.3s ease;
}

/* Subtle idle breathing animation on the sprite canvas */
@keyframes enemyIdleBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.01); }
}

.enemy-slot:hover:not(.enemy-dead) {
    transform: translateY(-4px) scale(1.02);
    animation-play-state: paused;
}

/* Targeted enemy highlight — pulsing red/orange menacing aura */
.enemy-slot.enemy-targeted .enemy-sprite-canvas {
    border-color: rgba(231, 76, 60, 0.5);
    animation: enemyIdleBreathe 3s ease-in-out infinite, targetedPulse 1.8s ease-in-out infinite;
}

@keyframes targetedPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(231, 76, 60, 0.5), 0 0 24px rgba(231, 76, 60, 0.2), 0 0 4px rgba(255, 140, 50, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.7), 0 0 40px rgba(231, 76, 60, 0.3), 0 0 8px rgba(255, 140, 50, 0.5);
    }
}

/* Target arrow indicator */
.enemy-slot.enemy-targeted::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid var(--accent-glow);
    animation: targetBounce 1.2s ease-in-out infinite;
    z-index: 5;
}

/* TARGET label — only shown in multi-enemy fights */
.multi-enemy .enemy-slot.enemy-targeted::after {
    content: 'TARGET';
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--accent-glow);
    text-shadow: 0 0 8px rgba(228, 190, 106, 0.6);
    animation: targetBounce 1.2s ease-in-out infinite;
    z-index: 5;
    white-space: nowrap;
}

/* Crosshair cursor on non-targeted enemies in multi-fights */
.multi-enemy .enemy-slot:not(.enemy-targeted):not(.enemy-dead) {
    cursor: crosshair;
}

@keyframes targetBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

/* Target switch animation */
@keyframes targetFlash {
    0% { box-shadow: 0 0 0 0 rgba(228, 190, 106, 0.8); }
    50% { box-shadow: 0 0 20px 5px rgba(228, 190, 106, 0.6); }
    100% { box-shadow: 0 0 12px rgba(228, 190, 106, 0.5), 0 0 24px rgba(228, 190, 106, 0.2); }
}

.enemy-slot.target-switch .enemy-sprite-canvas {
    animation: targetFlash 0.3s ease-out;
}

/* Dead enemy styling — collapses in multi-enemy fights to close gap */
.enemy-slot.enemy-dead {
    pointer-events: none;
    filter: grayscale(0.8);
    opacity: 0.3;
    transition: max-width 0.6s ease 0.4s, max-height 0.6s ease 0.4s, opacity 0.4s ease, margin 0.6s ease 0.4s;
}
.multi-enemy .enemy-slot.enemy-dead {
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0 -9px;
}

.enemy-slot.enemy-dead .enemy-sprite-canvas {
    border-color: rgba(80, 80, 80, 0.5);
    animation: none;
}

/* Enemy intent (per-enemy) */
.enemy-intent {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 16px 5px;
    background: rgba(231, 76, 60, 0.12);
    border: 1px solid rgba(231, 76, 60, 0.3);
    border-radius: 8px;
    min-height: 34px;
    white-space: nowrap;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 3px 10px rgba(0, 0, 0, 0.3);
    flex-wrap: wrap;
    justify-content: center;
}

.enemy-intent .enemy-intent-icon {
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.enemy-intent .enemy-intent-icon svg {
    filter: drop-shadow(0 0 4px currentColor);
}

.enemy-intent .enemy-intent-value {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Intent color-coding by type */
.enemy-intent[data-intent-type="attack"] {
    background: linear-gradient(155deg, rgba(231, 76, 60, 0.22), rgba(180, 40, 30, 0.18));
    border-color: rgba(231, 76, 60, 0.4);
    color: #ff8a7a;
    animation: intentAttackPulse 2s ease-in-out infinite;
}
.enemy-intent[data-intent-type="block"] {
    background: linear-gradient(155deg, rgba(52, 152, 219, 0.22), rgba(30, 100, 180, 0.18));
    border-color: rgba(52, 152, 219, 0.4);
    color: #7ac0f0;
    animation: intentBlockShimmer 2.5s ease-in-out infinite;
}
.enemy-intent[data-intent-type="buff"] {
    background: linear-gradient(155deg, rgba(241, 196, 15, 0.22), rgba(200, 150, 10, 0.18));
    border-color: rgba(241, 196, 15, 0.4);
    color: #f0d060;
    animation: intentBuffGlow 2.5s ease-in-out infinite;
}
.enemy-intent[data-intent-type="heal"] {
    background: linear-gradient(155deg, rgba(46, 204, 113, 0.22), rgba(30, 160, 80, 0.18));
    border-color: rgba(46, 204, 113, 0.4);
    color: #60e0a0;
    animation: intentHealPulse 2.8s ease-in-out infinite;
}
.enemy-intent[data-intent-type="debuff"],
.enemy-intent[data-intent-type="steal"] {
    background: linear-gradient(155deg, rgba(155, 89, 182, 0.22), rgba(120, 60, 150, 0.18));
    border-color: rgba(155, 89, 182, 0.4);
    color: #c89ee8;
    animation: intentDebuffFlicker 2.2s ease-in-out infinite;
}
.enemy-intent[data-intent-type="leech"] {
    background: linear-gradient(155deg, rgba(180, 60, 60, 0.22), rgba(140, 40, 40, 0.18));
    border-color: rgba(180, 60, 60, 0.4);
    color: #e08080;
    animation: intentLeechDrain 2s ease-in-out infinite;
}
.enemy-intent[data-intent-type="mirrorBlock"] {
    background: linear-gradient(155deg, rgba(100, 160, 220, 0.22), rgba(60, 120, 190, 0.18));
    border-color: rgba(100, 160, 220, 0.4);
    color: #90c8f0;
    animation: intentBlockShimmer 2.5s ease-in-out infinite;
}
.enemy-intent[data-intent-type="mimic"] {
    background: linear-gradient(155deg, rgba(231, 76, 60, 0.2), rgba(180, 40, 30, 0.16));
    border-color: rgba(231, 76, 60, 0.35);
    color: #ff8a7a;
    animation: intentAttackPulse 2s ease-in-out infinite;
}
/* Zone creation — ominous purple */
.enemy-intent[data-intent-type="createZone"] {
    background: linear-gradient(155deg, rgba(120, 60, 180, 0.22), rgba(80, 30, 140, 0.18));
    border-color: rgba(140, 80, 200, 0.4);
    color: #c090e8;
    animation: intentDebuffFlicker 2.2s ease-in-out infinite;
}
/* Hex — dark purple with flicker */
.enemy-intent[data-intent-type="hex"] {
    background: linear-gradient(155deg, rgba(100, 40, 140, 0.25), rgba(60, 20, 100, 0.2));
    border-color: rgba(130, 60, 180, 0.45);
    color: #b870e0;
    animation: intentDebuffFlicker 2.2s ease-in-out infinite;
}
/* Phase shift — spectral blue */
.enemy-intent[data-intent-type="phaseShift"] {
    background: linear-gradient(155deg, rgba(100, 160, 240, 0.2), rgba(60, 100, 200, 0.16));
    border-color: rgba(120, 170, 255, 0.35);
    color: #a0c8ff;
    animation: intentBlockShimmer 2.5s ease-in-out infinite;
}

@keyframes intentAttackPulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(231, 76, 60, 0); transform: scale(1); }
    50% { box-shadow: 0 3px 10px rgba(0,0,0,0.3), 0 0 14px 3px rgba(231, 76, 60, 0.25); transform: scale(1.03); }
}

@keyframes intentBlockShimmer {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
    50% { box-shadow: 0 0 8px 2px rgba(52, 152, 219, 0.2); }
}

@keyframes intentBuffGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241, 196, 15, 0); }
    50% { box-shadow: 0 0 10px 3px rgba(241, 196, 15, 0.25); transform: scale(1.02); }
}

@keyframes intentHealPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
    40% { box-shadow: 0 0 10px 3px rgba(46, 204, 113, 0.25); }
    60% { box-shadow: 0 0 6px 1px rgba(46, 204, 113, 0.12); }
}

@keyframes intentDebuffFlicker {
    0%, 100% { box-shadow: 0 0 0 0 rgba(155, 89, 182, 0); opacity: 1; }
    30% { box-shadow: 0 0 8px 2px rgba(155, 89, 182, 0.3); opacity: 1; }
    35% { opacity: 0.85; }
    40% { opacity: 1; }
    70% { box-shadow: 0 0 4px 1px rgba(155, 89, 182, 0.1); }
}

@keyframes intentLeechDrain {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 60, 60, 0); transform: scale(1); }
    50% { box-shadow: 0 0 12px 4px rgba(180, 60, 60, 0.3); transform: scale(1.04); }
}

/* Intent entrance animation when intent changes between turns */
@keyframes intentReveal {
    0% { opacity: 0; transform: translateY(-6px) scale(0.92); }
    60% { opacity: 1; transform: translateY(1px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}
.enemy-intent.intent-reveal {
    animation: intentReveal 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Multi-enemy: slightly smaller intents */
.multi-enemy .enemy-intent {
    font-size: 13px;
    padding: 4px 10px;
    min-height: 28px;
}
.multi-enemy .enemy-intent .enemy-intent-icon {
    font-size: 16px;
}

/* Enemy sprite canvas (per-enemy) */
.enemy-sprite-canvas {
    width: 220px;
    height: 220px;
    background:
        radial-gradient(circle at 50% 40%, rgba(200, 50, 50, 0.04) 0%, transparent 70%),
        var(--surface);
    border: 2px solid rgba(80, 60, 90, 0.4);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    image-rendering: pixelated;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(200, 50, 50, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 14px rgba(0, 0, 0, 0.15);
    animation: enemyIdleBreathe 3s ease-in-out infinite;
}
/* Elite enemy — golden accent frame */
.enemy-slot.enemy-elite .enemy-sprite-canvas {
    border-color: rgba(255, 200, 87, 0.4);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.3),
        0 0 16px rgba(255, 200, 87, 0.1),
        inset 0 0 14px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* Boss enemy — red menacing frame */
.enemy-slot.enemy-boss .enemy-sprite-canvas {
    border-color: rgba(231, 76, 60, 0.5);
    border-width: 3px;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(231, 76, 60, 0.15),
        inset 0 0 14px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Ground shadow / pedestal beneath enemy sprite */
.enemy-ground-shadow {
    width: 170px;
    height: 16px;
    margin-top: -6px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
}
.multi-enemy .enemy-ground-shadow {
    width: 125px;
    height: 13px;
    margin-top: -4px;
}

/* Boss golden frame — pulsing golden glow */
.enemy-slot.enemy-boss .enemy-sprite-canvas {
    border: 2px solid rgba(241, 196, 15, 0.45);
    animation: enemyIdleBreathe 3s ease-in-out infinite, bossGoldenPulse 2.5s ease-in-out infinite;
}

@keyframes bossGoldenPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(241, 196, 15, 0.35), 0 0 24px rgba(241, 196, 15, 0.15);
    }
    50% {
        box-shadow: 0 0 18px rgba(241, 196, 15, 0.5), 0 0 36px rgba(241, 196, 15, 0.25), 0 0 6px rgba(255, 215, 0, 0.4);
    }
}

/* Boss crown indicator — positioned above target arrow */
.enemy-boss-crown {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    z-index: 10;
    line-height: 1;
}

/* Elite badge */
.enemy-type-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    line-height: 1.2;
}
.enemy-type-badge.badge-elite {
    background: rgba(155, 89, 182, 0.25);
    border: 1px solid rgba(155, 89, 182, 0.5);
    color: #c39bd3;
}
.enemy-type-badge.badge-boss {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #f1c40f;
    text-shadow: 0 0 6px rgba(241, 196, 15, 0.3);
}

/* Multi-enemy: smaller sprites */
.multi-enemy .enemy-sprite-canvas {
    width: 160px;
    height: 160px;
}

.enemy-sprite-canvas.hit-shake {
    animation: enemyHitShake 0.4s ease;
}

@keyframes enemyHitShake {
    0% { transform: translateX(0) rotate(0deg) scale(1); }
    10% { transform: translateX(8px) rotate(2deg) scale(0.95); }
    25% { transform: translateX(-7px) rotate(-2deg) scale(1.02); }
    40% { transform: translateX(5px) rotate(1.5deg) scale(0.98); }
    55% { transform: translateX(-4px) rotate(-1deg) scale(1.01); }
    70% { transform: translateX(2px) rotate(0.5deg) scale(1); }
    85% { transform: translateX(-1px) rotate(0deg) scale(1); }
    100% { transform: translateX(0) rotate(0deg) scale(1); }
}

/* Death animations for per-enemy canvases */
.enemy-sprite-canvas.death-shake {
    animation: enemyDeathShake 0.5s ease;
}

.enemy-sprite-canvas.death-dissolve {
    animation: enemyDissolve 0.8s ease-out forwards;
}

#turn-counter {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 13px;
    font-weight: 800;
    color: rgba(196, 154, 60, 0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
    padding: 6px 24px;
    background: rgba(10, 8, 20, 0.7);
    border: 1px solid rgba(196, 154, 60, 0.15);
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    transition: color 0.3s ease, border-color 0.3s ease;
}
#turn-counter.turn-tick {
    animation: turnCounterTick 0.7s ease-out;
}
@keyframes turnCounterTick {
    0% { color: #ffd700; border-color: rgba(196, 154, 60, 0.5); transform: translateX(-50%) scale(1.2); box-shadow: 0 0 16px rgba(196, 154, 60, 0.3); }
    40% { color: rgba(196, 154, 60, 0.9); }
    100% { color: rgba(196, 154, 60, 0.7); border-color: rgba(196, 154, 60, 0.15); transform: translateX(-50%) scale(1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); }
}

/* Enemy name (per-enemy) — RPG nameplate style */
.enemy-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    padding: 5px 18px;
    background: linear-gradient(180deg, rgba(25, 22, 40, 0.7), rgba(12, 10, 24, 0.8));
    border: 1px solid rgba(100, 90, 140, 0.15);
    border-bottom: 2px solid rgba(200, 60, 60, 0.15);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

.multi-enemy .enemy-name {
    font-size: 14px;
    padding: 2px 10px;
}

/* Elite/Boss nameplate accents */
.enemy-slot.enemy-elite .enemy-name {
    border-bottom-color: rgba(155, 89, 182, 0.5);
    box-shadow: 0 2px 6px rgba(155, 89, 182, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.enemy-slot.enemy-boss .enemy-name {
    border-bottom-color: rgba(241, 196, 15, 0.5);
    box-shadow: 0 2px 8px rgba(241, 196, 15, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 6px rgba(241, 196, 15, 0.15);
}
.enemy-name .icon {
    font-size: 0.75em;
    opacity: 0.7;
    vertical-align: baseline;
}

/* Enemy HP bar (per-enemy) */
.enemy-hp-bar {
    position: relative;
    width: 230px;
    height: 24px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.15) 100%),
        var(--hp-red-dark);
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Segment tick marks at 25%, 50%, 75% */
.enemy-hp-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent calc(25% - 0.5px), rgba(255,255,255,0.12) calc(25% - 0.5px), rgba(255,255,255,0.12) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% - 0.5px), rgba(255,255,255,0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(90deg, transparent calc(75% - 0.5px), rgba(255,255,255,0.12) calc(75% - 0.5px), rgba(255,255,255,0.12) calc(75% + 0.5px), transparent calc(75% + 0.5px));
}

/* Critical HP glow when enemy is below 25% */
.enemy-hp-bar.enemy-hp-critical {
    animation: enemyHpCriticalPulse 1.2s ease-in-out infinite;
}
.enemy-hp-bar.enemy-hp-critical .enemy-hp-fill {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.1) 100%),
                linear-gradient(90deg, #a82020, #e04040);
}

@keyframes enemyHpCriticalPulse {
    0%, 100% { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 6px rgba(255,60,60,0.3); }
    50% { box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 14px rgba(255,60,60,0.5); }
}

.multi-enemy .enemy-hp-bar {
    width: 170px;
    height: 20px;
}

.enemy-hp-fill {
    height: 100%;
    width: 100%;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.06) 35%, transparent 50%, rgba(0,0,0,0.15) 100%),
        linear-gradient(90deg, #b03025, var(--hp-red), #e06050);
    border-radius: var(--radius-pill);
    transition: width 0.4s ease;
}

.enemy-hp-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.multi-enemy .enemy-hp-text {
    font-size: 11px;
}

/* Enemy block (per-enemy) */
.enemy-block-bubble {
    display: flex;
    align-items: center;
    gap: 5px;
    background:
        radial-gradient(circle at 40% 25%, rgba(52, 152, 219, 0.15) 0%, transparent 65%),
        rgba(12, 20, 35, 0.75);
    border: 1px solid rgba(52, 152, 219, 0.25);
    border-radius: 6px;
    padding: 3px 12px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-weight: 700;
    color: var(--block-blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 4px rgba(0, 0, 0, 0.2);
}

.multi-enemy .enemy-block-bubble {
    font-size: 12px;
    padding: 2px 8px;
}

/* Enemy status effects (per-enemy) */
.enemy-status-effects {
    display: flex;
    gap: 4px;
    min-height: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

#player-status-effects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 28px;
}

/* Tick preview (per-enemy) */
.enemy-hp-tick-preview {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    pointer-events: none;
    display: none;
    transition: width 0.3s ease, left 0.3s ease;
    animation: tickPreviewPulse 1.2s ease-in-out infinite;
}

/* Slide-in animation for enemies — enhanced entrance */
@keyframes enemySlideIn {
    0% { transform: translateX(60px) scale(0.8); opacity: 0; }
    70% { transform: translateX(-4px) scale(1.02); opacity: 1; }
    100% { transform: translateX(0) scale(1); opacity: 1; }
}

.enemy-slot.slide-in {
    animation: enemySlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ===== Separator between combat and hand ===== */
#hand-area::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(196, 154, 60, 0.15) 20%, rgba(196, 154, 60, 0.3) 50%, rgba(196, 154, 60, 0.15) 80%, transparent 100%);
    pointer-events: none;
    box-shadow: 0 0 8px rgba(196, 154, 60, 0.15);
}

/* ===== Combat Stats Strip ===== */
#combat-stats-strip {
    position: absolute;
    bottom: 10px;
    left: 16px;
    z-index: 2;
    display: flex;
    gap: 16px;
    padding: 4px 16px;
    background: rgba(10, 8, 20, 0.5);
    border: 1px solid rgba(100, 90, 140, 0.08);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.combat-stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.combat-stat-icon {
    font-size: 14px;
    opacity: 0.6;
}

#cs-damage { color: var(--damage-red); }
#cs-block { color: var(--block-blue); }
#cs-rolls { color: var(--accent-glow); }

/* ===== Hand Area ===== */
#hand-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px 20px;
    background: linear-gradient(180deg, rgba(18, 15, 30, 0.98) 0%, rgba(12, 10, 22, 0.95) 100%);
    border-top: 2px solid rgba(196, 154, 60, 0.12);
    box-shadow: inset 0 4px 16px rgba(0, 0, 0, 0.3);
    min-height: 160px;
    position: relative;
}

/* Energy Orb */
#energy-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#energy-orb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff5c0, #ffeaa7 25%, var(--energy-yellow) 55%, #d4870a 85%, #a06008);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    color: #2d3436;
    box-shadow:
        0 0 20px rgba(243, 156, 18, 0.35),
        0 0 4px rgba(243, 156, 18, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 -4px 8px rgba(0,0,0,0.25),
        inset 0 2px 4px rgba(255,255,255,0.15);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    border: 2px solid rgba(255, 220, 100, 0.35);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

#energy-orb:hover {
    box-shadow:
        0 0 28px rgba(243, 156, 18, 0.45),
        0 0 6px rgba(243, 156, 18, 0.6),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 -4px 8px rgba(0,0,0,0.25),
        inset 0 2px 4px rgba(255,255,255,0.15);
    transform: scale(1.05);
}

/* Rotating specular highlight inside the orb */
#energy-orb::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 55%;
    height: 55%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: orbHighlightRotate 5s linear infinite;
    pointer-events: none;
}

@keyframes orbHighlightRotate {
    0% { transform: rotate(0deg) translateX(12px); }
    100% { transform: rotate(360deg) translateX(12px); }
}

#energy-label {
    font-size: 10px;
    color: rgba(196, 154, 60, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}

/* Dice Tray — container for the hand, spans wider to align with board */
#dice-tray {
    flex: 1;
    min-height: 110px;
    max-width: 900px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(196, 154, 60, 0.08);
    border-top: 2px solid rgba(196, 154, 60, 0.12);
    border-radius: var(--radius-md);
    padding: 12px 24px;
    position: relative;
    box-shadow:
        inset 0 4px 16px rgba(0, 0, 0, 0.35),
        inset 0 0 50px rgba(0, 0, 0, 0.1),
        0 -1px 0 rgba(196, 154, 60, 0.05);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(196, 154, 60, 0.04) 0%, transparent 60%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 5px,
            rgba(80, 60, 40, 0.015) 5px,
            rgba(80, 60, 40, 0.015) 6px
        );
    background-color: rgba(0, 0, 0, 0.25);
}

/* Transition for reactive tray border */
#dice-tray {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Golden glow when dice are selected */
#dice-tray.tray-has-selection {
    border-color: rgba(241, 196, 15, 0.35);
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(0, 0, 0, 0.15),
        0 0 12px rgba(241, 196, 15, 0.15),
        0 0 4px rgba(241, 196, 15, 0.1);
}

/* Dimmed state when no throws remain */
#dice-tray.tray-no-energy {
    border-color: rgba(80, 80, 80, 0.3);
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 0 40px rgba(0, 0, 0, 0.25);
}
#dice-tray.tray-no-energy::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 2;
}

/* Upward throw hint — subtle gradient pointing toward the board */
#dice-tray::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(196, 154, 60, 0.03) 0%, transparent 30%),
        radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Dice Hand — spread dice across the tray for clear board alignment */
#dice-hand {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    min-height: 100px;
    padding: 4px 8px 16px;
    position: relative;
    width: 100%;
    z-index: 1;
}

/* ===== Pile Buttons ===== */
.pile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(40, 38, 60, 0.9), var(--surface));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text);
    min-width: 64px;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-family: inherit;
}

.pile-btn:hover {
    background: linear-gradient(180deg, rgba(50, 48, 70, 0.8), rgba(196, 154, 60, 0.1));
    border-color: rgba(196, 154, 60, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 10px rgba(196, 154, 60, 0.06);
}

.pile-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.pile-icon {
    font-size: 26px;
    line-height: 1;
}

.pile-count {
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-glow);
    line-height: 1;
    transition: transform 0.2s ease;
}

.pile-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    font-weight: 600;
}

/* ===== Pile Viewer Modal ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    animation: modalFadeIn 0.2s ease;
}

.modal.hidden {
    display: none !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 24px;
    min-width: 400px;
    max-width: 700px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(0, 0, 0, 0.25);
    animation: modalSlideUp 0.25s ease;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#pile-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#pile-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-glow);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.modal-close:hover {
    background: var(--hp-red);
    border-color: var(--hp-red);
}

.modal-dice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 10px 0;
}

.modal-dice-grid .die-container {
    cursor: default;
}

.modal-dice-grid .die-container:hover {
    transform: none;
}

.modal-empty {
    color: var(--text-dim);
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
    font-style: italic;
}

/* End Turn Button */
#end-turn-btn {
    padding: 14px 36px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: #1a1a2e;
    background: linear-gradient(180deg, #daa520, #c49a3c, #a07828);
    border: 1px solid rgba(218, 165, 32, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 18px rgba(196, 154, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-family: inherit;
}

#end-turn-btn:hover {
    background: linear-gradient(180deg, #f0d48a, #daa520, #c49a3c);
    box-shadow: 0 5px 24px rgba(0, 0, 0, 0.4), 0 0 32px rgba(196, 154, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    border-color: rgba(240, 212, 138, 0.6);
}

#end-turn-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#end-turn-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--border);
    background: var(--surface);
    color: var(--text-dim);
    box-shadow: none;
    transform: none;
    filter: grayscale(0.5);
}

#end-turn-btn:not(:disabled) {
    animation: endTurnGlow 2.5s ease-in-out infinite;
}

@keyframes endTurnGlow {
    0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 12px rgba(196, 154, 60, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
    50% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 25px rgba(196, 154, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
}

.end-turn-icon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 2px;
    display: inline-flex;
    transition: transform 0.3s ease;
}
#end-turn-btn:hover:not(:disabled) .end-turn-icon {
    transform: rotate(90deg);
}

/* ===== Turn Phase Banner ===== */
.phase-banner {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 50;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 6px;
    padding: 18px 0;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transform: translateY(-50%) translateX(-100%);
    animation: bannerSlideIn 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
               bannerHold 0.5s 0.25s forwards,
               bannerSlideOut 0.25s 0.75s cubic-bezier(0.55, 0.05, 0.68, 0.53) forwards;
}

.phase-banner.enemy {
    color: #ff6b6b;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(231, 76, 60, 0.2) 15%,
        rgba(231, 76, 60, 0.35) 50%,
        rgba(231, 76, 60, 0.2) 85%,
        transparent 100%
    );
    text-shadow: 0 0 20px rgba(231, 76, 60, 0.6), 0 0 40px rgba(231, 76, 60, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(231, 76, 60, 0.3);
    border-bottom: 1px solid rgba(231, 76, 60, 0.3);
    box-shadow: 0 0 40px rgba(231, 76, 60, 0.1);
}

.phase-banner.player {
    color: #e8c84a;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(70, 130, 210, 0.15) 10%,
        rgba(70, 130, 210, 0.25) 30%,
        rgba(196, 170, 80, 0.3) 50%,
        rgba(70, 130, 210, 0.25) 70%,
        rgba(70, 130, 210, 0.15) 90%,
        transparent 100%
    );
    text-shadow: 0 0 20px rgba(70, 130, 210, 0.6), 0 0 40px rgba(232, 200, 74, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(70, 130, 210, 0.4);
    border-bottom: 1px solid rgba(70, 130, 210, 0.4);
}

/* System banners (board effects) */
.phase-banner.system {
    color: rgba(180, 170, 220, 0.8);
    font-size: 22px;
    letter-spacing: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(100, 90, 150, 0.15) 15%,
        rgba(100, 90, 150, 0.25) 50%,
        rgba(100, 90, 150, 0.15) 85%,
        transparent 100%
    );
    text-shadow: 0 0 12px rgba(100, 90, 150, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
    border-top: 1px solid rgba(100, 90, 150, 0.2);
    border-bottom: 1px solid rgba(100, 90, 150, 0.2);
}

/* Pool break banner — dramatic impact */
.phase-banner.break {
    color: #fff;
    font-size: 48px;
    letter-spacing: 12px;
    font-style: italic;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 170, 50, 0.15) 10%,
        rgba(255, 140, 20, 0.4) 50%,
        rgba(255, 170, 50, 0.15) 90%,
        transparent 100%
    );
    text-shadow:
        0 0 20px rgba(255, 170, 50, 0.9),
        0 0 50px rgba(255, 100, 0, 0.5),
        0 0 80px rgba(255, 60, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.8);
    border-top: 2px solid rgba(255, 170, 50, 0.5);
    border-bottom: 2px solid rgba(255, 170, 50, 0.5);
    box-shadow:
        0 0 60px rgba(255, 120, 0, 0.2),
        inset 0 0 60px rgba(255, 120, 0, 0.05);
    animation: bannerBreak 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes bannerBreak {
    0% {
        opacity: 0;
        transform: translateY(-50%) scaleX(0.3);
        filter: brightness(3) blur(8px);
    }
    15% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1.05);
        filter: brightness(2) blur(0);
    }
    25% {
        transform: translateY(-50%) scaleX(1);
        filter: brightness(1);
    }
    70% {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scaleX(1.1);
        filter: brightness(0.5);
    }
}

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

@keyframes bannerHold {
    0%, 100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

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

/* ===== Turn Color Wash ===== */
.turn-color-wash {
    position: absolute;
    inset: 0;
    z-index: 49;
    pointer-events: none;
    opacity: 0;
    animation: colorWashFlash 0.4s ease-out forwards;
}

.turn-color-wash.player {
    background: radial-gradient(ellipse at center, rgba(70, 130, 210, 0.15) 0%, transparent 70%);
}

.turn-color-wash.enemy {
    background: radial-gradient(ellipse at center, rgba(231, 76, 60, 0.12) 0%, transparent 70%);
}

.turn-color-wash.system {
    background: radial-gradient(ellipse at center, rgba(200, 200, 200, 0.08) 0%, transparent 70%);
}

@keyframes colorWashFlash {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ===== Energy Preview ===== */
#energy-orb.energy-preview {
    opacity: 0.65;
    animation: energyPreviewPulse 1s ease-in-out infinite;
}

#energy-orb.energy-preview-empty {
    background: radial-gradient(circle at 40% 35%, #999, #666, #444);
    border-color: rgba(150, 150, 150, 0.4);
    box-shadow: 0 0 8px rgba(100, 100, 100, 0.3);
}

@keyframes energyPreviewPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.95); }
}

/* ===== Damage Preview on Enemy HP ===== */
.enemy-hp-damage-preview {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    pointer-events: none;
    display: none;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 80, 60, 0.5),
        rgba(255, 80, 60, 0.5) 3px,
        rgba(255, 120, 80, 0.3) 3px,
        rgba(255, 120, 80, 0.3) 6px
    );
    transition: width 0.3s ease, left 0.3s ease;
    animation: dmgPreviewPulse 0.8s ease-in-out infinite;
}
@keyframes dmgPreviewPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
    animation: damagePreviewPulse 1s ease-in-out infinite;
}

@keyframes damagePreviewPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}

/* ===== Enemy Attack Windup ===== */
@keyframes enemyWindup {
    0% { transform: translateX(0) scale(1) rotate(0deg); }
    30% { transform: translateX(-8px) scale(1.06) rotate(-2deg); }
    55% { transform: translateX(14px) scale(0.97) rotate(1deg); }
    75% { transform: translateX(4px) scale(1.01) rotate(0deg); }
    100% { transform: translateX(0) scale(1) rotate(0deg); }
}

.enemy-attack-windup {
    animation: enemyWindup 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* ===== Crucible Trial Overlay ===== */
.trial-overlay {
    background: rgba(0, 0, 0, 0.85);
}

.trial-content {
    text-align: center;
    padding: 40px 48px;
    max-width: 460px;
    position: relative;
    background: linear-gradient(180deg, rgba(40, 25, 10, 0.95), rgba(20, 12, 5, 0.98));
    border: 2px solid rgba(230, 126, 34, 0.4);
    border-radius: 8px;
    box-shadow:
        0 0 40px rgba(230, 126, 34, 0.2),
        0 16px 48px rgba(0, 0, 0, 0.6);
}

.trial-glow {
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 0%, rgba(230, 126, 34, 0.15), transparent 60%);
    pointer-events: none;
}

.trial-header {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #e67e22;
    margin-bottom: 8px;
}

.trial-name {
    font-size: 28px;
    font-weight: 900;
    color: #f39c12;
    text-shadow: 0 0 20px rgba(243, 156, 18, 0.5);
    margin-bottom: 16px;
}

.trial-desc {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.5;
}

.trial-turns {
    font-size: 13px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
}

.trial-begin-btn,
.trial-continue-btn {
    padding: 12px 36px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #e67e22, #d35400);
    border: 2px solid rgba(243, 156, 18, 0.5);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(230, 126, 34, 0.3);
}

.trial-begin-btn:hover,
.trial-continue-btn:hover {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    box-shadow: 0 6px 24px rgba(230, 126, 34, 0.5);
    transform: translateY(-2px);
}

.trial-result-title {
    font-size: 32px;
    font-weight: 900;
    margin-bottom: 16px;
}

.trial-passed .trial-result-title {
    color: #f39c12;
    text-shadow: 0 0 30px rgba(243, 156, 18, 0.6);
}

.trial-failed .trial-result-title {
    color: #e74c3c;
    text-shadow: 0 0 30px rgba(231, 76, 60, 0.6);
}

.trial-result-desc {
    font-size: 15px;
    color: var(--text-dim);
    margin-bottom: 24px;
    line-height: 1.5;
}

.trial-failed .trial-continue-btn {
    background: linear-gradient(135deg, #c0392b, #922b21);
    border-color: rgba(231, 76, 60, 0.5);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
}

.trial-failed .trial-continue-btn:hover {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* Crucible victory orange glow */
.crucible-victory .victory-glow {
    background: radial-gradient(circle, rgba(230, 126, 34, 0.3), transparent 70%) !important;
}

/* ===== Shrine Screen ===== */
.shrine-overlay {
    background: rgba(0, 0, 0, 0.85);
}

.shrine-content {
    text-align: center;
    padding: 40px 48px;
    max-width: 420px;
    position: relative;
    background: linear-gradient(180deg, rgba(30, 28, 15, 0.95), rgba(15, 14, 8, 0.98));
    border: 2px solid rgba(241, 196, 15, 0.35);
    border-radius: 8px;
    box-shadow:
        0 0 40px rgba(241, 196, 15, 0.15),
        0 16px 48px rgba(0, 0, 0, 0.6);
}

.shrine-glow {
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 0%, rgba(241, 196, 15, 0.12), transparent 60%);
    pointer-events: none;
}

.shrine-title {
    font-size: 24px;
    font-weight: 900;
    color: #f1c40f;
    text-shadow: 0 0 20px rgba(241, 196, 15, 0.4);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.shrine-desc {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.5;
}

.shrine-cost {
    font-size: 14px;
    color: var(--damage-red);
    font-weight: 700;
    margin-bottom: 16px;
}

.shrine-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.shrine-btn {
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
}

.shrine-accept {
    color: #fff;
    background: linear-gradient(135deg, #f1c40f, #d4ac0d);
    border-color: rgba(241, 196, 15, 0.5);
    box-shadow: 0 4px 16px rgba(241, 196, 15, 0.3);
}

.shrine-accept:hover:not(:disabled) {
    background: linear-gradient(135deg, #f9e154, #f1c40f);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(241, 196, 15, 0.5);
}

.shrine-accept:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.shrine-decline {
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border);
}

.shrine-decline:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
}

.shrine-result {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 700;
    color: #f1c40f;
    text-shadow: 0 0 12px rgba(241, 196, 15, 0.4);
    animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Animations ===== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.shake {
    animation: shake 0.4s ease;
}

@keyframes damageFlash {
    0% { filter: brightness(1); }
    50% { filter: brightness(2) saturate(2); }
    100% { filter: brightness(1); }
}

.damage-flash {
    animation: damageFlash 0.3s ease;
}

/* ===== Floating Damage Numbers ===== */
.floating-number {
    position: absolute;
    font-size: 32px;
    font-weight: 900;
    pointer-events: none;
    z-index: 100;
    animation: floatUp 1s ease-out forwards;
    text-shadow:
        0 2px 4px rgba(0,0,0,0.7),
        0 0 12px currentColor;
    -webkit-text-stroke: 1px rgba(0,0,0,0.3);
}

.floating-number.damage {
    color: var(--damage-red);
    animation: floatDamage 0.9s ease-out forwards;
}

.floating-number.block {
    color: var(--block-blue);
    animation: floatBlock 0.9s ease-out forwards;
}

.floating-number.heal {
    color: var(--heal-green);
    animation: floatHeal 1s ease-out forwards;
}

/* Generic float */
@keyframes floatUp {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    15% { opacity: 1; transform: translateY(-10px) scale(1.2); }
    30% { transform: translateY(-20px) scale(1); }
    70% { opacity: 1; transform: translateY(-60px) scale(1); }
    100% { opacity: 0; transform: translateY(-90px) scale(0.7); }
}

/* Damage: punchy scale-up with slight rotation */
@keyframes floatDamage {
    0% { opacity: 0; transform: translateY(0) scale(0.3) rotate(-5deg); }
    12% { opacity: 1; transform: translateY(-8px) scale(1.4) rotate(3deg); }
    25% { transform: translateY(-18px) scale(1) rotate(-1deg); }
    70% { opacity: 1; transform: translateY(-55px) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.6) rotate(0deg); }
}

/* Block: slides in from left with shield feel */
@keyframes floatBlock {
    0% { opacity: 0; transform: translate(-20px, 0) scale(0.5); }
    15% { opacity: 1; transform: translate(4px, -8px) scale(1.15); }
    30% { transform: translate(0, -16px) scale(1); }
    70% { opacity: 1; transform: translate(0, -50px) scale(1); }
    100% { opacity: 0; transform: translate(0, -75px) scale(0.7); }
}

/* Heal: gentle rise with glow */
@keyframes floatHeal {
    0% { opacity: 0; transform: translateY(8px) scale(0.6); filter: brightness(2); }
    20% { opacity: 1; transform: translateY(-5px) scale(1.1); filter: brightness(1.3); }
    40% { transform: translateY(-20px) scale(1); filter: brightness(1); }
    80% { opacity: 1; transform: translateY(-55px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.8); }
}

/* Poison tick: drips down slightly before rising, toxic feel */
.floating-number.poison {
    color: var(--poison-green);
    text-shadow: 0 0 8px rgba(54, 149, 90, 0.6);
    animation: floatPoison 1s ease-out forwards;
}

/* Poison remaining stacks indicator: smaller, offset */
.floating-number.poison-stacks {
    color: var(--poison-green);
    opacity: 0.85;
    font-size: 18px !important;
    text-shadow: 0 0 6px rgba(54, 149, 90, 0.4);
    animation: floatPoisonStacks 1.2s ease-out forwards;
}

@keyframes floatPoison {
    0% { opacity: 0; transform: translateY(4px) scale(0.4); }
    15% { opacity: 1; transform: translateY(-6px) scale(1.3); }
    30% { transform: translateY(-18px) scale(1); }
    70% { opacity: 1; transform: translateY(-55px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.6); }
}

@keyframes floatPoisonStacks {
    0% { opacity: 0; transform: translate(15px, 0) scale(0.5); }
    20% { opacity: 0.85; transform: translate(18px, -10px) scale(1); }
    70% { opacity: 0.7; transform: translate(20px, -40px) scale(0.9); }
    100% { opacity: 0; transform: translate(22px, -60px) scale(0.7); }
}

/* Burn: fiery orange with flicker-like wobble */
.floating-number.burn {
    color: #ff8833;
    text-shadow:
        0 0 10px rgba(255, 102, 0, 0.7),
        0 0 20px rgba(255, 68, 0, 0.4);
    animation: floatBurn 1s ease-out forwards;
}
@keyframes floatBurn {
    0% { opacity: 0; transform: translateY(4px) scale(0.4) rotate(0deg); }
    12% { opacity: 1; transform: translateY(-6px) scale(1.3) rotate(2deg); }
    24% { transform: translateY(-16px) scale(1.05) rotate(-2deg); }
    36% { transform: translateY(-26px) scale(1) rotate(1deg); }
    70% { opacity: 1; transform: translateY(-55px) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.6) rotate(0deg); }
}

/* Critical hit: large, bold, dramatic scale-up with red emphasis */
.floating-number.critical {
    color: #ff2222;
    font-weight: 900;
    text-shadow:
        0 0 12px rgba(255, 34, 34, 0.8),
        0 0 24px rgba(255, 68, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.8);
    -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.4);
    animation: floatCritical 1.1s ease-out forwards;
}
@keyframes floatCritical {
    0% { opacity: 0; transform: translateY(0) scale(0.2) rotate(-8deg); }
    10% { opacity: 1; transform: translateY(-6px) scale(1.8) rotate(4deg); }
    20% { transform: translateY(-14px) scale(1.3) rotate(-2deg); }
    35% { transform: translateY(-25px) scale(1.15) rotate(0deg); }
    70% { opacity: 1; transform: translateY(-60px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-90px) scale(0.7); }
}

/* Status/debuff: purple, drifts sideways */
.floating-number.status {
    color: #ba55d3;
    text-shadow: 0 0 8px rgba(186, 85, 211, 0.5);
    animation: floatStatus 1s ease-out forwards;
}
@keyframes floatStatus {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    15% { opacity: 1; transform: translate(6px, -8px) scale(1.1); }
    30% { transform: translate(3px, -18px) scale(1); }
    70% { opacity: 1; transform: translate(-2px, -50px) scale(1); }
    100% { opacity: 0; transform: translate(-5px, -75px) scale(0.7); }
}

/* Large hit emphasis — extra scale pop for big damage values */
.floating-number.damage-large {
    color: var(--damage-red);
    animation: floatDamageLarge 1s ease-out forwards;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.4);
}
@keyframes floatDamageLarge {
    0% { opacity: 0; transform: translateY(0) scale(0.2) rotate(-8deg); }
    8% { opacity: 1; transform: translateY(-5px) scale(1.8) rotate(4deg); }
    16% { transform: translateY(-12px) scale(1.1) rotate(-2deg); }
    24% { transform: translateY(-18px) scale(1.25) rotate(1deg); }
    35% { transform: translateY(-25px) scale(1) rotate(0deg); }
    75% { opacity: 1; transform: translateY(-60px) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translateY(-90px) scale(0.5) rotate(0deg); }
}

/* ===== Critical Hit Emphasis ===== */

/* "CRITICAL!" text flash */
.crit-text {
    position: fixed;
    z-index: 1001;
    font-size: 56px;
    font-weight: 900;
    font-family: inherit;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 4px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.9),
        0 0 40px rgba(255, 100, 0, 0.6),
        0 0 60px rgba(255, 50, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.8);
    -webkit-text-stroke: 1.5px rgba(180, 80, 0, 0.6);
    animation: critTextFlash 0.6s ease-out forwards;
}

@keyframes critTextFlash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
        filter: brightness(3);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4);
        filter: brightness(2);
    }
    30% {
        transform: translate(-50%, -50%) scale(0.95);
        filter: brightness(1.2);
    }
    45% {
        transform: translate(-50%, -50%) scale(1.05);
        filter: brightness(1);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(-10px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) translateY(-30px);
    }
}

/* Radial shockwave ring */
.crit-shockwave {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 215, 0, 0.9);
    box-shadow:
        0 0 15px rgba(255, 215, 0, 0.5),
        inset 0 0 10px rgba(255, 200, 0, 0.3);
    animation: critShockwave 0.5s ease-out forwards;
}

@keyframes critShockwave {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        border-width: 4px;
    }
    100% {
        width: 200px;
        height: 200px;
        opacity: 0;
        border-width: 1px;
    }
}

/* Time-freeze overlay */
.crit-freeze {
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
    background: radial-gradient(circle at var(--crit-x, 50%) var(--crit-y, 50%),
        rgba(255, 255, 200, 0.15) 0%,
        rgba(0, 0, 0, 0.1) 60%,
        transparent 100%);
    animation: critFreeze 0.2s ease-out forwards;
}

@keyframes critFreeze {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

/* Shake variant for crits: stronger, faster */
#game.shake-crit {
    animation: shakeCritAnim 0.5s ease;
}

@keyframes shakeCritAnim {
    0%   { transform: translate(0, 0) rotate(0deg); }
    10%  { transform: translate(-6px, 3px) rotate(-0.5deg); }
    20%  { transform: translate(5px, -4px) rotate(0.5deg); }
    30%  { transform: translate(-4px, 2px) rotate(-0.3deg); }
    40%  { transform: translate(3px, -2px) rotate(0.3deg); }
    50%  { transform: translate(-2px, 1px) rotate(-0.2deg); }
    60%  { transform: translate(2px, -1px) rotate(0.1deg); }
    70%  { transform: translate(-1px, 1px) rotate(0deg); }
    80%  { transform: translate(1px, 0px); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* ===== Particle Canvas Overlay ===== */
#particle-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

/* =======================================
   Reward Screen
   ======================================= */

/* Full-screen overlay */
.reward-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(1px);
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.reward-overlay.visible {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
}

.reward-overlay.closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

.reward-overlay.closing .reward-panel {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

/* Main panel */
.reward-panel {
    background: linear-gradient(180deg, rgba(22, 18, 38, 0.98) 0%, var(--bg-light) 12%, var(--bg-light) 88%, rgba(22, 18, 38, 0.98) 100%);
    border: 1px solid rgba(196, 154, 60, 0.15);
    border-radius: 12px;
    padding: 36px 44px;
    min-width: 520px;
    max-width: 860px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(196, 154, 60, 0.08),
        inset 0 1px 0 rgba(196, 154, 60, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.reward-overlay.visible .reward-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Header */
.reward-header {
    text-align: center;
    margin-bottom: 28px;
}

.reward-title {
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f0d48a, var(--gold), #f9e547, #f0d48a);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    animation: rewardTitlePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both, rewardTitleGlow 2s ease-in-out 0.5s infinite alternate, rewardTitleShift 5s ease-in-out infinite;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 16px rgba(196, 154, 60, 0.3));
}

@keyframes rewardTitlePop {
    0% { transform: scale(0.6); opacity: 0; filter: brightness(2) drop-shadow(0 0 30px rgba(196, 154, 60, 0.8)); }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; filter: brightness(1) drop-shadow(0 0 16px rgba(196, 154, 60, 0.3)); }
}

@keyframes rewardTitleGlow {
    0% { filter: brightness(1) drop-shadow(0 0 16px rgba(196, 154, 60, 0.3)); }
    100% { filter: brightness(1.15) drop-shadow(0 0 24px rgba(196, 154, 60, 0.5)); }
}
@keyframes rewardTitleShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.reward-subtitle {
    font-size: 14px;
    color: rgba(200, 190, 220, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
}

/* Absorbed reward styling — eerie soul-capture feel */
.reward-absorbed .reward-title {
    background: linear-gradient(135deg, #88ddff, #44aaff, #cc88ff, #88ddff);
    background-size: 300% 300%;
    filter: drop-shadow(0 0 20px rgba(100, 150, 255, 0.5));
}
.reward-absorbed .reward-subtitle {
    color: rgba(140, 180, 255, 0.7);
    font-size: 15px;
}
.reward-absorbed .reward-section-title {
    color: rgba(140, 180, 255, 0.6);
}
.reward-absorbed .reward-face-card {
    border-color: rgba(100, 150, 255, 0.3);
    box-shadow: 0 0 20px rgba(100, 150, 255, 0.1), inset 0 0 30px rgba(100, 150, 255, 0.05);
}
.reward-absorbed .reward-face-card:hover {
    border-color: rgba(140, 180, 255, 0.6);
    box-shadow: 0 0 30px rgba(100, 150, 255, 0.25), inset 0 0 30px rgba(100, 150, 255, 0.08);
}

/* Gold display */
.reward-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.06), rgba(241, 196, 15, 0.1), rgba(241, 196, 15, 0.06));
    border: 1px solid rgba(241, 196, 15, 0.15);
    border-radius: var(--radius-pill);
    animation: rewardSlideIn 0.5s ease-out both;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    animation-delay: 0.2s;
}

.reward-gold-icon {
    font-size: 26px;
}

.reward-gold-amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.3);
    letter-spacing: 0.5px;
}

/* Section */
.reward-section {
    margin-bottom: 24px;
}

.reward-section-title {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: rgba(196, 154, 60, 0.6);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.reward-section-title::before,
.reward-section-title::after {
    content: '';
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 60, 0.2));
}
.reward-section-title::after {
    background: linear-gradient(90deg, rgba(196, 154, 60, 0.2), transparent);
}

/* Face reward cards row */
.reward-faces-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.reward-face-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 18px;
    width: 165px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    opacity: 0;
    transform: translateY(20px) scale(0.3);
    animation: rewardCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--reveal-delay, 0.3s);
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on reward cards */
.reward-face-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: rewardShimmer 0.7s ease-out forwards;
    animation-delay: calc(var(--reveal-delay, 0.3s) + 0.35s);
    pointer-events: none;
}

/* Face type accent bar — coloured strip at top of reward card */
.reward-face-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    pointer-events: none;
}
.reward-face-card[data-face-type="damage"]::before  { background: var(--damage-red); box-shadow: 0 0 8px var(--damage-red); }
.reward-face-card[data-face-type="block"]::before   { background: var(--block-blue); box-shadow: 0 0 8px var(--block-blue); }
.reward-face-card[data-face-type="heal"]::before    { background: var(--heal-green); box-shadow: 0 0 8px var(--heal-green); }
.reward-face-card[data-face-type="poison"]::before  { background: var(--poison-green); box-shadow: 0 0 8px var(--poison-green); }
.reward-face-card[data-face-type="utility"]::before { background: #bb77ee; box-shadow: 0 0 8px #bb77ee; }
.reward-face-card[data-face-type="status"]::before  { background: #dd66cc; box-shadow: 0 0 8px #dd66cc; }
.reward-face-card[data-face-type="curse"]::before   { background: #aa5555; box-shadow: 0 0 8px #aa5555; }

.reward-face-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--accent);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(196, 154, 60, 0.15);
}

/* Face-type-colored hover glow on reward cards */
.reward-face-card[data-face-type="damage"]:hover {
    border-color: var(--damage-red);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(239, 83, 80, 0.2);
}
.reward-face-card[data-face-type="block"]:hover {
    border-color: var(--block-blue);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(74, 157, 217, 0.2);
}
.reward-face-card[data-face-type="heal"]:hover {
    border-color: var(--heal-green);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(67, 180, 104, 0.2);
}
.reward-face-card[data-face-type="poison"]:hover {
    border-color: var(--poison-green);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(54, 149, 90, 0.2);
}
.reward-face-card[data-face-type="utility"]:hover,
.reward-face-card[data-face-type="status"]:hover {
    border-color: #9b59b6;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 20px rgba(155, 89, 182, 0.2);
}

.reward-face-card:active {
    transform: translateY(-2px) scale(0.98);
}

.reward-face-card[data-rarity="uncommon"] {
    border-color: rgba(46, 204, 113, 0.2);
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.04) 0%, var(--surface) 100%);
}

.reward-face-card[data-rarity="uncommon"]:hover {
    border-color: var(--heal-green);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(46, 204, 113, 0.2);
}

.reward-face-card[data-rarity="rare"] {
    border-color: rgba(155, 89, 182, 0.2);
    background: linear-gradient(180deg, rgba(155, 89, 182, 0.04) 0%, var(--surface) 100%);
}

.reward-face-card[data-rarity="rare"]:hover {
    border-color: var(--rare-purple);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(155, 89, 182, 0.25);
}

@keyframes rewardCardIn {
    0%   { opacity: 0; transform: translateY(20px) scale(0.3); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.06); }
    80%  { transform: translateY(2px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Shimmer sweep that plays once after the card pops in */
@keyframes rewardShimmer {
    0%   { background-position: 200% 0; opacity: 0; }
    20%  { opacity: 1; }
    100% { background-position: -200% 0; opacity: 0; }
}

.reward-face-rarity {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.reward-face-die-size {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim, #999);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 1px 6px;
    display: inline-block;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.reward-face-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Face type colors — multi-stop gradients with inner texture */
.reward-face-icon-wrap[data-face-type="damage"] {
    background: linear-gradient(155deg, #d94040 0%, #b82a2a 30%, #922020 65%, #701515 100%);
    border-color: rgba(255, 100, 100, 0.2);
}
.reward-face-icon-wrap[data-face-type="block"] {
    background: linear-gradient(155deg, #4a9fd8 0%, #2e7eb8 30%, #1d6498 65%, #154d78 100%);
    border-color: rgba(100, 180, 255, 0.2);
}
.reward-face-icon-wrap[data-face-type="heal"] {
    background: linear-gradient(155deg, #3cc868 0%, #28a850 30%, #1e8c40 65%, #167030 100%);
    border-color: rgba(80, 220, 130, 0.2);
}
.reward-face-icon-wrap[data-face-type="poison"] {
    background: linear-gradient(155deg, #40c870 0%, #2aaa55 30%, #1e8842 65%, #156832 100%);
    border-color: rgba(70, 200, 110, 0.2);
}
.reward-face-icon-wrap[data-face-type="utility"] {
    background: linear-gradient(155deg, #a855d8 0%, #8840b8 30%, #6e3098 65%, #542578 100%);
    border-color: rgba(180, 120, 255, 0.2);
}
.reward-face-icon-wrap[data-face-type="blank"] {
    background: linear-gradient(155deg, #4a5568 0%, #3a4555 30%, #2d3748 65%, #222d3a 100%);
    border-color: rgba(120, 140, 170, 0.12);
}
.reward-face-icon-wrap[data-face-type="status"] {
    background: linear-gradient(155deg, #c060e0 0%, #9840c0 30%, #7830a0 65%, #602880 100%);
    border-color: rgba(200, 130, 255, 0.2);
}
.reward-face-icon-wrap[data-face-type="curse"] {
    background: linear-gradient(155deg, #3a2060 0%, #2a1848 30%, #201038 65%, #180c28 100%);
    border-color: rgba(150, 80, 220, 0.15);
}

.reward-face-icon {
    font-size: 28px;
    line-height: 1;
}

.reward-face-value {
    font-size: 13px;
    font-weight: 900;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.reward-face-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.reward-face-desc {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.4;
}

/* Skip button */
.reward-skip-btn {
    display: block;
    margin: 12px auto 0;
    padding: 10px 40px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(136, 136, 170, 0.5);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reward-skip-btn:hover {
    color: var(--text-dim);
    border-color: rgba(196, 154, 60, 0.2);
    background: rgba(196, 154, 60, 0.04);
}

/* ===== Die Selection Screen ===== */

.reward-chosen-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    animation: rewardSlideIn 0.3s ease-out both;
}

.reward-chosen-face .chosen-preview {
    width: 48px;
    height: 48px;
}

.reward-chosen-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

@keyframes rewardSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reward-dice-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px 0;
    margin-bottom: 16px;
}

.reward-die-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reward-die-card:hover {
    border-color: rgba(196, 154, 60, 0.5);
}

.reward-die-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(196, 154, 60, 0.2);
}

/* Locked d4 card — can't accept rare+ faces */
.reward-die-card.die-card-locked {
    opacity: 0.4;
    filter: grayscale(0.6);
    pointer-events: none;
    position: relative;
}

.die-card-lock-label {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: var(--damage-red);
    background: rgba(10, 10, 18, 0.9);
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid rgba(231, 76, 60, 0.3);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reward-die-header {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-glow);
    margin-bottom: 8px;
}

.reward-die-faces {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reward-die-face-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
    min-width: 80px;
}

.reward-die-face-slot[data-face-type="damage"] {
    background: linear-gradient(135deg, rgba(217, 64, 64, 0.2), rgba(140, 30, 30, 0.25));
    border-color: rgba(255, 100, 100, 0.12);
}
.reward-die-face-slot[data-face-type="block"] {
    background: linear-gradient(135deg, rgba(74, 159, 216, 0.2), rgba(30, 100, 152, 0.25));
    border-color: rgba(100, 180, 255, 0.12);
}
.reward-die-face-slot[data-face-type="heal"] {
    background: linear-gradient(135deg, rgba(60, 200, 104, 0.18), rgba(30, 140, 64, 0.22));
    border-color: rgba(80, 220, 130, 0.12);
}
.reward-die-face-slot[data-face-type="poison"] {
    background: linear-gradient(135deg, rgba(64, 200, 112, 0.18), rgba(30, 136, 66, 0.22));
    border-color: rgba(70, 200, 110, 0.12);
}
.reward-die-face-slot[data-face-type="utility"] {
    background: linear-gradient(135deg, rgba(168, 85, 216, 0.2), rgba(110, 48, 152, 0.25));
    border-color: rgba(180, 120, 255, 0.12);
}
.reward-die-face-slot[data-face-type="blank"] {
    background: linear-gradient(135deg, rgba(74, 85, 104, 0.25), rgba(45, 55, 72, 0.3));
    border-color: rgba(120, 140, 170, 0.08);
}
.reward-die-face-slot[data-face-type="curse"] {
    background: linear-gradient(135deg, rgba(58, 32, 96, 0.25), rgba(32, 16, 56, 0.3));
    border-color: rgba(150, 80, 220, 0.1);
}
.reward-die-face-slot[data-face-type="status"] {
    background: linear-gradient(135deg, rgba(192, 96, 224, 0.18), rgba(120, 48, 160, 0.22));
    border-color: rgba(200, 130, 255, 0.12);
}

.reward-die-face-slot:hover {
    border-color: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(196, 154, 60, 0.2);
}

.rdf-icon {
    font-size: 16px;
}

.rdf-name {
    font-weight: 600;
    color: var(--text);
}

.rdf-value {
    font-weight: 800;
    color: var(--text-dim);
    margin-left: auto;
}

/* Back button */
.reward-back-btn {
    display: block;
    margin: 0 auto;
    padding: 10px 36px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reward-back-btn:hover {
    color: var(--text);
    border-color: var(--text-dim);
    background: rgba(255, 255, 255, 0.04);
}

/* ===== Confirmation Dialog ===== */

.reward-confirm-overlay {
    position: absolute;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
    border-radius: 4px;
}

.reward-confirm-overlay.visible {
    background: rgba(0, 0, 0, 0.6);
}

.reward-confirm-box {
    background: linear-gradient(180deg, rgba(22, 18, 38, 0.98) 0%, var(--bg-mid) 15%, var(--bg-mid) 85%, rgba(22, 18, 38, 0.98) 100%);
    border: 1px solid rgba(196, 154, 60, 0.15);
    border-radius: 10px;
    padding: 30px 36px;
    text-align: center;
    min-width: 340px;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6), 0 0 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reward-confirm-overlay.visible .reward-confirm-box {
    transform: scale(1);
    opacity: 1;
}

.reward-confirm-box.reward-confirm-success {
    border-color: rgba(46, 204, 113, 0.3);
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(46, 204, 113, 0.2),
        inset 0 1px 0 rgba(46, 204, 113, 0.1);
}

.reward-confirm-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent-glow);
    margin-bottom: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    filter: drop-shadow(0 0 8px rgba(196, 154, 60, 0.15));
}

.reward-confirm-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}

.reward-confirm-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    min-width: 100px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.reward-confirm-face[data-face-type="damage"] { background: linear-gradient(155deg, rgba(217, 64, 64, 0.22), rgba(140, 30, 30, 0.28)); border-color: rgba(255, 100, 100, 0.15); }
.reward-confirm-face[data-face-type="block"]  { background: linear-gradient(155deg, rgba(74, 159, 216, 0.22), rgba(30, 100, 152, 0.28)); border-color: rgba(100, 180, 255, 0.15); }
.reward-confirm-face[data-face-type="heal"]   { background: linear-gradient(155deg, rgba(60, 200, 104, 0.2), rgba(30, 140, 64, 0.25)); border-color: rgba(80, 220, 130, 0.15); }
.reward-confirm-face[data-face-type="poison"] { background: linear-gradient(155deg, rgba(64, 200, 112, 0.2), rgba(30, 136, 66, 0.25)); border-color: rgba(70, 200, 110, 0.15); }
.reward-confirm-face[data-face-type="utility"]{ background: linear-gradient(155deg, rgba(168, 85, 216, 0.22), rgba(110, 48, 152, 0.28)); border-color: rgba(180, 120, 255, 0.15); }
.reward-confirm-face[data-face-type="blank"]  { background: linear-gradient(155deg, rgba(74, 85, 104, 0.3), rgba(45, 55, 72, 0.35)); border-color: rgba(120, 140, 170, 0.1); }
.reward-confirm-face[data-face-type="curse"]  { background: linear-gradient(155deg, rgba(58, 32, 96, 0.3), rgba(32, 16, 56, 0.35)); border-color: rgba(150, 80, 220, 0.12); }
.reward-confirm-face[data-face-type="status"] { background: linear-gradient(155deg, rgba(192, 96, 224, 0.2), rgba(120, 48, 160, 0.25)); border-color: rgba(200, 130, 255, 0.15); }

.reward-confirm-face .reward-face-icon {
    font-size: 26px;
}

.reward-confirm-face-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

.reward-confirm-face.old {
    opacity: 0.55;
}

.reward-confirm-face.new {
    border-color: rgba(196, 154, 60, 0.3);
    box-shadow: 0 0 16px rgba(196, 154, 60, 0.15), 0 2px 10px rgba(0, 0, 0, 0.3);
}

.reward-confirm-arrow {
    font-size: 24px;
    color: rgba(196, 154, 60, 0.5);
    font-weight: 700;
    filter: drop-shadow(0 0 6px rgba(196, 154, 60, 0.2));
}

.reward-confirm-die-name {
    font-size: 12px;
    color: rgba(200, 190, 220, 0.5);
    margin-bottom: 22px;
    letter-spacing: 0.5px;
}

.reward-confirm-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.reward-confirm-yes {
    padding: 11px 32px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1a1a2e;
    background: linear-gradient(135deg, #c49a3c, #daa520);
    border: 1px solid rgba(218, 165, 32, 0.4);
    font-family: inherit;
    box-shadow: 0 0 15px rgba(196, 154, 60, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reward-confirm-yes:hover {
    background: linear-gradient(135deg, #daa520, #f0d48a);
    box-shadow: 0 0 25px rgba(196, 154, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: rgba(240, 212, 138, 0.5);
}

.reward-confirm-no {
    padding: 11px 28px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(136, 136, 170, 0.5);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-family: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reward-confirm-no:hover {
    color: var(--text-dim);
    border-color: rgba(196, 154, 60, 0.2);
    background: rgba(196, 154, 60, 0.04);
}

/* ===== Reward panel scrollbar ===== */
.reward-panel::-webkit-scrollbar,
.reward-dice-selection::-webkit-scrollbar {
    width: 6px;
}

.reward-panel::-webkit-scrollbar-track,
.reward-dice-selection::-webkit-scrollbar-track {
    background: transparent;
}

.reward-panel::-webkit-scrollbar-thumb,
.reward-dice-selection::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}

.reward-panel::-webkit-scrollbar-thumb:hover,
.reward-dice-selection::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* =======================================
   3D Face Replacer Overlay
   ======================================= */

.fr-overlay {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.fr-overlay.visible {
    background: rgba(5, 3, 15, 0.95);
    backdrop-filter: blur(10px);
}

.fr-panel {
    display: flex;
    flex-direction: column;
    width: 95%;
    max-width: 900px;
    height: 85vh;
    max-height: 640px;
    background: linear-gradient(180deg, rgba(20, 18, 35, 0.98) 0%, rgba(10, 8, 20, 0.99) 100%);
    border: 1px solid rgba(120, 110, 160, 0.15);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.fr-overlay.visible .fr-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- Header --- */
.fr-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: rgba(15, 12, 28, 0.6);
    border-bottom: 1px solid rgba(120, 110, 160, 0.1);
}

.fr-new-face-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    background: rgba(var(--fr-face-rgb, 100,100,150), 0.12);
    border: 1px solid rgba(var(--fr-face-rgb, 100,100,150), 0.3);
}
.fr-new-face-badge[data-face-type="damage"] { --fr-face-rgb: 255,102,85; }
.fr-new-face-badge[data-face-type="block"]  { --fr-face-rgb: 85,153,255; }
.fr-new-face-badge[data-face-type="heal"]   { --fr-face-rgb: 85,221,119; }
.fr-new-face-badge[data-face-type="poison"] { --fr-face-rgb: 153,204,68; }
.fr-new-face-badge[data-face-type="utility"]{ --fr-face-rgb: 187,119,238; }
.fr-new-face-badge[data-face-type="status"] { --fr-face-rgb: 221,102,204; }
.fr-new-face-badge[data-face-type="curse"]  { --fr-face-rgb: 170,102,102; }

.fr-nf-icon { font-size: 20px; }
.fr-nf-val { font-size: 18px; font-weight: 800; color: var(--text); }
.fr-nf-name { font-size: 14px; font-weight: 700; color: var(--text); }

.fr-header-text { flex: 1; }
.fr-title { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: 1px; text-transform: uppercase; }
.fr-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* --- Body: 3-column layout --- */
.fr-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* --- Dice list sidebar --- */
.fr-dice-list {
    width: 200px;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid rgba(120, 110, 160, 0.08);
    background: rgba(10, 8, 18, 0.3);
}

.fr-die-card {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(100, 90, 140, 0.15);
    background: rgba(25, 22, 42, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fr-die-card:hover:not(.fr-die-locked) {
    border-color: rgba(180, 170, 220, 0.3);
    background: rgba(30, 27, 50, 0.8);
}

.fr-die-card.selected {
    border-color: var(--accent-glow);
    background: rgba(196, 154, 60, 0.08);
    box-shadow: 0 0 12px rgba(196, 154, 60, 0.1);
}

.fr-die-card.fr-die-locked {
    opacity: 0.35;
    cursor: not-allowed;
}

.fr-dc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.fr-dc-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.fr-dc-size {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-dim);
    background: rgba(100, 90, 140, 0.15);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.fr-dc-pips {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.fr-pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.7;
}

.fr-dc-lock {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    opacity: 0.6;
}

/* --- 3D Viewer --- */
.fr-viewer {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(30, 25, 50, 0.5) 0%, rgba(14, 12, 30, 1) 70%);
}

.fr-viewer canvas {
    display: none;
    width: 100% !important;
    height: 100% !important;
}

.fr-viewer-hint {
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.5;
}

/* --- Info panel (right) --- */
.fr-info {
    width: 240px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-left: 1px solid rgba(120, 110, 160, 0.08);
    background: rgba(10, 8, 18, 0.3);
}

.fr-info-placeholder {
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    opacity: 0.5;
}

/* --- Swap preview --- */
.fr-swap-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.fr-swap-face {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 6px;
    background: rgba(20, 18, 35, 0.8);
    border: 1px solid rgba(100, 90, 140, 0.2);
    text-align: center;
}

.fr-swap-label {
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    opacity: 0.6;
}

.fr-swap-icon { font-size: 22px; }
.fr-swap-name { font-size: 11px; font-weight: 700; }
.fr-swap-val { font-size: 18px; font-weight: 800; color: var(--text); }
.fr-swap-desc { font-size: 9px; color: var(--text-dim); line-height: 1.3; }
.fr-swap-arrow { font-size: 18px; color: var(--text-dim); opacity: 0.4; }
.fr-swap-die-name { font-size: 11px; color: var(--text-dim); text-align: center; }
.fr-swap-hint { font-size: 10px; color: var(--text-dim); opacity: 0.5; text-align: center; }

.fr-swap-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}

/* --- Buttons --- */
.fr-btn {
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
}

.fr-confirm-btn {
    flex: 1;
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}
.fr-confirm-btn:hover {
    background: rgba(46, 204, 113, 0.25);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
}

.fr-back-btn {
    flex: 1;
    background: transparent;
    border-color: rgba(100, 90, 140, 0.25);
    color: var(--text-dim);
}
.fr-back-btn:hover { border-color: rgba(180, 170, 220, 0.3); color: var(--text); }

.fr-cancel-btn {
    background: transparent;
    border-color: rgba(100, 90, 140, 0.2);
    color: var(--text-dim);
}
.fr-cancel-btn:hover { border-color: rgba(180, 170, 220, 0.3); color: var(--text); }

/* --- Footer --- */
.fr-footer {
    display: flex;
    justify-content: center;
    padding: 12px 24px;
    border-top: 1px solid rgba(120, 110, 160, 0.08);
}

/* --- Responsive --- */
@media (max-width: 700px) {
    .fr-body { flex-direction: column; }
    .fr-dice-list { width: 100%; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid rgba(120, 110, 160, 0.08); max-height: 80px; }
    .fr-info { width: 100%; flex-direction: row; border-left: none; border-top: 1px solid rgba(120, 110, 160, 0.08); }
    .fr-panel { max-height: 95vh; }
}

/* =======================================
   Map Overlay
   ======================================= */

.map-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background 0.5s ease, backdrop-filter 0.5s ease;
}

.map-overlay.hidden {
    display: none !important;
}

.map-overlay.visible {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(196, 154, 60, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 20%, rgba(100, 60, 160, 0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 50%, rgba(40, 60, 130, 0.07) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(15, 12, 30, 1) 0%, rgba(5, 5, 15, 1) 100%);
    backdrop-filter: blur(10px);
}

.map-overlay.closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

/* Map header */
.map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background:
        linear-gradient(180deg, rgba(10, 8, 20, 0.99) 0%, rgba(12, 10, 24, 0.95) 100%);
    border-bottom: 1px solid rgba(196, 154, 60, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(196, 154, 60, 0.04);
    z-index: 10;
    flex-shrink: 0;
}

.map-act-title {
    font-size: 24px;
    font-weight: 900;
    background: linear-gradient(135deg, #f0d48a, var(--accent-glow), #c080f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 3px;
    text-transform: uppercase;
    filter: drop-shadow(0 0 10px rgba(196, 154, 60, 0.25));
}

.map-player-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

.map-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
}

.map-stat .icon {
    width: 16px;
    height: 16px;
}

.map-stat-gold {
    color: #f0d060;
    background: rgba(240, 208, 96, 0.06);
    border: 1px solid rgba(240, 208, 96, 0.15);
    text-shadow: 0 0 8px rgba(240, 208, 96, 0.2);
}

.map-stat-hp {
    color: #e06060;
    background: rgba(224, 96, 96, 0.06);
    border: 1px solid rgba(224, 96, 96, 0.15);
    text-shadow: 0 0 8px rgba(224, 96, 96, 0.2);
}

.map-floor-indicator {
    font-size: 11px;
    font-weight: 700;
    color: rgba(196, 154, 60, 0.5);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: 5px 16px;
    background: rgba(196, 154, 60, 0.04);
    border: 1px solid rgba(196, 154, 60, 0.08);
    border-radius: var(--radius-pill);
}

/* Scroll container */
.map-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background:
        radial-gradient(ellipse at 50% 95%, rgba(196, 154, 60, 0.12) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 5%, rgba(200, 50, 50, 0.08) 0%, transparent 25%),
        radial-gradient(ellipse at 25% 50%, rgba(100, 60, 160, 0.06) 0%, transparent 35%),
        radial-gradient(ellipse at 75% 40%, rgba(40, 100, 180, 0.05) 0%, transparent 35%);
}

/* Starfield layer */
.map-starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.map-star {
    position: absolute;
    border-radius: 50%;
    background: white;
}

.map-star--twinkle {
    animation: starTwinkle ease-in-out infinite alternate;
}

@keyframes starTwinkle {
    0% { opacity: var(--star-min, 0.15); }
    100% { opacity: var(--star-max, 0.5); }
}

/* Vignette overlay */
.map-vignette {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: -100%;
    pointer-events: none;
    z-index: 5;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(5, 3, 15, 0.6) 100%);
}

/* Central ascent spine */
.map-spine {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(200, 50, 50, 0.1) 0%,
        rgba(140, 100, 200, 0.05) 20%,
        rgba(140, 100, 200, 0.07) 50%,
        rgba(196, 154, 60, 0.1) 80%,
        rgba(196, 154, 60, 0.05) 100%
    );
    box-shadow:
        0 0 40px 20px rgba(120, 100, 180, 0.025),
        0 0 100px 50px rgba(120, 100, 180, 0.015);
}

/* Atmospheric fog layers */
.map-fog-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.map-fog-layer--1 {
    background:
        radial-gradient(ellipse 600px 200px at 30% 40%, rgba(80, 50, 140, 0.07) 0%, transparent 100%),
        radial-gradient(ellipse 500px 250px at 70% 65%, rgba(40, 80, 140, 0.06) 0%, transparent 100%),
        radial-gradient(ellipse 400px 300px at 50% 85%, rgba(160, 120, 40, 0.08) 0%, transparent 100%);
    animation: fogDrift 20s ease-in-out infinite alternate;
}

.map-fog-layer--2 {
    background:
        radial-gradient(ellipse 500px 180px at 65% 30%, rgba(100, 40, 120, 0.05) 0%, transparent 100%),
        radial-gradient(ellipse 600px 200px at 35% 70%, rgba(50, 70, 130, 0.05) 0%, transparent 100%);
    animation: fogDrift2 25s ease-in-out infinite alternate;
}

@keyframes fogDrift {
    0% { transform: translateX(-20px) translateY(0); opacity: 1; }
    100% { transform: translateX(20px) translateY(-15px); opacity: 0.7; }
}

@keyframes fogDrift2 {
    0% { transform: translateX(15px) translateY(10px); opacity: 0.8; }
    100% { transform: translateX(-15px) translateY(-10px); opacity: 1; }
}

.map-scroll-container::-webkit-scrollbar {
    width: 6px;
}

.map-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}

.map-scroll-container::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}

.map-scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* SVG paths layer */
.map-paths {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.map-path-visited {
    stroke-dasharray: none;
    opacity: 0.35;
}

.map-path-future {
    stroke-dasharray: 3 8;
    stroke-linecap: round;
    opacity: 0.4;
}

.map-path-available {
    stroke-dasharray: 8 4;
    stroke-linecap: round;
    animation: pathFlow 1.2s linear infinite, pathPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 3px currentColor);
}

@keyframes pathFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -24; }
}

@keyframes pathPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Nodes container */
.map-nodes-container {
    position: relative;
    z-index: 2;
}

/* Individual map node */
.map-node {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 30%, rgba(255,255,255,0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, var(--node-color-tint, rgba(100,100,150,0.08)) 0%, transparent 80%),
        linear-gradient(160deg, rgba(30, 28, 50, 0.95) 0%, rgba(18, 16, 32, 0.98) 100%);
    border: 2px solid var(--node-color, var(--border));
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.6),
        0 0 20px var(--node-glow-soft, rgba(100, 100, 150, 0.08)),
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    cursor: default;
    transition: all 0.25s ease;
    z-index: 3;
    opacity: 0;
    animation: nodeAppear 0.4s ease-out var(--appear-delay, 0s) forwards;
}

/* Subtle idle float for unreached future nodes */
.map-node.future {
    animation: nodeAppear 0.4s ease-out var(--appear-delay, 0s) forwards,
               nodeIdleFloat 4s ease-in-out var(--float-offset, 0s) infinite;
    opacity: 0.55;
    border-color: rgba(var(--node-color-rgb, 100, 100, 150), 0.35);
}

@keyframes nodeIdleFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-3px); }
}

/* Outer ring halo */
.map-node::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1.5px solid var(--node-color, transparent);
    opacity: 0.15;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Ground glow beneath node */
.map-node::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 10px;
    border-radius: 50%;
    background: var(--node-color, rgba(100, 100, 150, 0.2));
    opacity: 0.15;
    filter: blur(6px);
    pointer-events: none;
}

@keyframes nodeAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) translateY(8px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
        filter: blur(0);
    }
}

.map-node-icon {
    font-size: 21px;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
}

.map-node-label {
    position: absolute;
    top: calc(100% + 10px);
    font-size: 9px;
    font-weight: 700;
    color: var(--node-color, var(--text-dim));
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 12px var(--node-glow-soft, transparent);
}

.map-node:hover .map-node-label,
.map-node.current .map-node-label,
.map-node.available .map-node-label {
    opacity: 1;
}

/* Visited nodes */
.map-node.visited {
    opacity: 0.3;
    border-color: rgba(60, 55, 90, 0.35);
    background: linear-gradient(160deg, rgba(25, 22, 40, 0.95) 0%, rgba(12, 10, 22, 0.98) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.map-node.visited::before {
    opacity: 0;
}

.map-node.visited::after {
    opacity: 0.05;
}

.map-node.visited .map-node-icon {
    filter: grayscale(0.8) brightness(0.5);
}

/* Current node — you-are-here beacon */
.map-node.current {
    border-color: var(--accent-glow);
    background:
        radial-gradient(circle at 40% 30%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(228, 190, 106, 0.2) 0%, transparent 70%),
        linear-gradient(160deg, rgba(40, 35, 55, 0.95) 0%, rgba(25, 22, 40, 0.98) 100%);
    box-shadow:
        0 0 18px var(--node-glow, rgba(196, 154, 60, 0.5)),
        0 0 45px rgba(196, 154, 60, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 0 10px rgba(228, 190, 106, 0.1);
    animation: nodeAppear 0.4s ease-out var(--appear-delay, 0s) forwards, currentPulse 2.5s ease-in-out infinite;
    opacity: 1;
}

.map-node.current::before {
    opacity: 0.5;
    border-color: var(--accent-glow);
    border-width: 1.5px;
    animation: currentRing 2.5s ease-in-out infinite;
}

.map-node.current::after {
    opacity: 0.4;
    width: 50px;
    background: rgba(228, 190, 106, 0.4);
    filter: blur(10px);
}

@keyframes currentRing {
    0%, 100% { inset: -6px; opacity: 0.5; }
    50% { inset: -12px; opacity: 0.12; }
}

@keyframes currentPulse {
    0%, 100% {
        box-shadow:
            0 0 18px var(--node-glow, rgba(196, 154, 60, 0.5)),
            0 0 45px rgba(196, 154, 60, 0.2),
            inset 0 1px 2px rgba(255, 255, 255, 0.1),
            inset 0 0 10px rgba(228, 190, 106, 0.1);
    }
    50% {
        box-shadow:
            0 0 28px var(--node-glow, rgba(196, 154, 60, 0.7)),
            0 0 60px rgba(196, 154, 60, 0.3),
            inset 0 1px 2px rgba(255, 255, 255, 0.1),
            inset 0 0 15px rgba(228, 190, 106, 0.15);
    }
}

/* Available (clickable) nodes */
.map-node.available {
    cursor: pointer;
    border-color: var(--node-color);
    background:
        radial-gradient(circle at 40% 30%, rgba(255,255,255,0.14) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, var(--node-color-tint, rgba(100,100,150,0.12)) 0%, transparent 75%),
        linear-gradient(160deg, rgba(35, 32, 55, 0.95) 0%, rgba(20, 18, 35, 0.98) 100%);
    box-shadow:
        0 0 14px var(--node-glow, rgba(228, 190, 106, 0.35)),
        0 0 35px var(--node-glow-soft, rgba(228, 190, 106, 0.1)),
        0 4px 14px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    animation: nodeAppear 0.4s ease-out var(--appear-delay, 0s) forwards, availableGlow 2s ease-in-out infinite;
    opacity: 1;
}

.map-node.available::before {
    opacity: 0.35;
    animation: availableRing 2s ease-in-out infinite;
}

.map-node.available::after {
    opacity: 0.25;
    background: var(--node-color, rgba(100, 100, 150, 0.3));
}

@keyframes availableRing {
    0%, 100% { inset: -5px; opacity: 0.35; }
    50% { inset: -10px; opacity: 0.1; }
}

@keyframes availableGlow {
    0%, 100% {
        box-shadow:
            0 0 14px var(--node-glow, rgba(228, 190, 106, 0.35)),
            0 0 35px var(--node-glow-soft, rgba(228, 190, 106, 0.1)),
            0 4px 14px rgba(0, 0, 0, 0.5),
            inset 0 1px 1px rgba(255, 255, 255, 0.1);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        box-shadow:
            0 0 22px var(--node-glow, rgba(228, 190, 106, 0.55)),
            0 0 50px var(--node-glow-soft, rgba(228, 190, 106, 0.15)),
            0 4px 14px rgba(0, 0, 0, 0.5),
            inset 0 1px 1px rgba(255, 255, 255, 0.1);
        transform: translate(-50%, -50%) scale(1.06);
    }
}

.map-node.available:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow:
        0 0 30px var(--node-glow, rgba(228, 190, 106, 0.7)),
        0 0 60px var(--node-glow, rgba(228, 190, 106, 0.25)),
        0 6px 20px rgba(0, 0, 0, 0.5);
    z-index: 10;
    border-color: #fff;
}

.map-node.available:hover::after {
    opacity: 0.5;
    width: 48px;
    filter: blur(10px);
}

.map-node.available:hover .map-node-label {
    opacity: 1;
    color: var(--text);
}

/* ===== Per-type node styles ===== */
.map-node[data-node-type="combat"] {
    --node-color-tint: rgba(231, 76, 60, 0.1);
    --node-glow-soft: rgba(231, 76, 60, 0.08);
}

.map-node[data-node-type="elite"] {
    width: 54px;
    height: 54px;
    --node-color-tint: rgba(243, 156, 18, 0.12);
    --node-glow-soft: rgba(243, 156, 18, 0.1);
    border-width: 2.5px;
}
.map-node[data-node-type="elite"] .map-node-icon {
    font-size: 23px;
}

.map-node[data-node-type="shop"] {
    --node-color-tint: rgba(46, 204, 113, 0.1);
    --node-glow-soft: rgba(46, 204, 113, 0.08);
}

.map-node[data-node-type="rest"] {
    --node-color-tint: rgba(230, 126, 34, 0.12);
    --node-glow-soft: rgba(230, 126, 34, 0.1);
}
.map-node.available[data-node-type="rest"] .map-node-icon {
    animation: campfireFlicker 1.5s ease-in-out infinite;
}
@keyframes campfireFlicker {
    0%, 100% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 6px rgba(230, 126, 34, 0.4)); transform: scale(1); }
    25% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(230, 126, 34, 0.6)); transform: scale(1.05); }
    75% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(230, 126, 34, 0.5)); transform: scale(1.02); }
}

.map-node[data-node-type="event"],
.map-node[data-node-type="unknown"] {
    --node-color-tint: rgba(155, 89, 182, 0.1);
    --node-glow-soft: rgba(155, 89, 182, 0.08);
}

.map-node[data-node-type="shrine"] {
    --node-color-tint: rgba(241, 196, 15, 0.12);
    --node-glow-soft: rgba(241, 196, 15, 0.1);
}
.map-node.available[data-node-type="shrine"] .map-node-icon {
    animation: shrineShimmer 2s ease-in-out infinite;
}
@keyframes shrineShimmer {
    0%, 100% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 4px rgba(241, 196, 15, 0.3)); }
    50% { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(241, 196, 15, 0.6)); }
}

/* Boss node — big, dramatic */
.map-node[data-node-type="boss"] {
    width: 68px;
    height: 68px;
    border-width: 2.5px;
    --node-color-tint: rgba(231, 76, 60, 0.15);
    --node-glow-soft: rgba(231, 76, 60, 0.12);
    background:
        radial-gradient(circle at 40% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(231, 76, 60, 0.2) 0%, transparent 70%),
        linear-gradient(160deg, rgba(45, 20, 25, 0.95) 0%, rgba(25, 10, 15, 0.98) 100%);
    box-shadow:
        0 0 24px rgba(231, 76, 60, 0.4),
        0 0 60px rgba(231, 76, 60, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.6),
        inset 0 0 12px rgba(231, 76, 60, 0.1);
}

.map-node[data-node-type="boss"]::before {
    opacity: 0.4;
    border-width: 2px;
    border-color: rgba(231, 76, 60, 0.6);
    animation: bossRing 2.5s ease-in-out infinite;
}

.map-node[data-node-type="boss"]::after {
    width: 55px;
    height: 14px;
    background: rgba(231, 76, 60, 0.35);
    filter: blur(12px);
    opacity: 0.3;
}

@keyframes bossRing {
    0%, 100% { inset: -7px; opacity: 0.45; }
    50% { inset: -16px; opacity: 0.08; }
}

.map-node[data-node-type="boss"] .map-node-icon {
    font-size: 28px;
    animation: bossIconPulse 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(231, 76, 60, 0.4));
}

@keyframes bossIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Floor labels */
.map-floor-label {
    position: absolute;
    left: 18px;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 800;
    color: rgba(120, 115, 155, 0.25);
    text-transform: uppercase;
    letter-spacing: 3px;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.map-floor-label-start {
    color: rgba(228, 190, 106, 0.45);
    font-size: 11px;
    letter-spacing: 5px;
    text-shadow: 0 0 16px rgba(228, 190, 106, 0.15);
}

.map-floor-label-boss {
    color: rgba(231, 76, 60, 0.5);
    font-size: 12px;
    letter-spacing: 5px;
    text-shadow: 0 0 16px rgba(231, 76, 60, 0.25);
}

/* "You are here" animated marker above current node */
.map-here-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 6;
    animation: hereMarkerAppear 0.5s ease-out forwards;
}

.map-here-marker-text {
    font-size: 8px;
    font-weight: 800;
    color: rgba(228, 190, 106, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
    margin-bottom: 3px;
}

.map-here-marker-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid rgba(228, 190, 106, 0.6);
    animation: hereArrowBob 1.5s ease-in-out infinite;
}

@keyframes hereMarkerAppear {
    from { opacity: 0; transform: translate(-50%, -100%) translateY(-8px); }
    to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
}

@keyframes hereArrowBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* Connection endpoint dots */
.map-conn-dot {
    fill: rgba(100, 90, 150, 0.25);
    transition: fill 0.3s ease;
}

.map-conn-dot--visited {
    fill: rgba(196, 154, 60, 0.25);
}

.map-conn-dot--available {
    fill: rgba(170, 160, 255, 0.6);
    filter: url(#path-glow);
}

.map-conn-dot--current {
    fill: rgba(228, 190, 106, 0.6);
}

/* Path draw-in animation for available paths */
.map-path-draw-in {
    stroke-dasharray: var(--path-length, 300);
    stroke-dashoffset: var(--path-length, 300);
    animation:
        pathDrawIn 0.6s ease-out var(--draw-delay, 0s) forwards,
        pathPulseAvail 2s ease-in-out 0.7s infinite;
}

@keyframes pathDrawIn {
    to { stroke-dashoffset: 0; }
}

@keyframes pathPulseAvail {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Boss area ornamental rings */
.map-boss-ring {
    fill: none;
    stroke: rgba(231, 76, 60, 0.12);
    animation: bossOrnamentPulse 4s ease-in-out infinite;
}

.map-boss-ring--inner {
    stroke: rgba(231, 76, 60, 0.08);
    stroke-dasharray: 4 8;
    animation: bossOrnamentSpin 30s linear infinite, bossOrnamentPulse 4s ease-in-out infinite;
}

@keyframes bossOrnamentPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes bossOrnamentSpin {
    from { transform-origin: center; stroke-dashoffset: 0; }
    to { transform-origin: center; stroke-dashoffset: -100; }
}

/* Ambient map particles */
.map-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 170, 220, 0.8) 0%, rgba(180, 170, 220, 0) 70%);
    pointer-events: none;
    z-index: 0;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    15% {
        opacity: var(--particle-opacity, 0.2);
    }
    85% {
        opacity: var(--particle-opacity, 0.2);
    }
    100% {
        transform: translateY(-40px) translateX(15px);
        opacity: 0;
    }
}

/* ===== Map encounter modals (shop, rest, event placeholders) ===== */

.map-encounter-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.map-encounter-overlay.visible {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

.map-encounter-overlay.closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

.map-encounter-panel {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 40px 48px;
    min-width: 360px;
    max-width: 500px;
    text-align: center;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(196, 154, 60, 0.08);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-encounter-overlay.visible .map-encounter-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.map-encounter-overlay.closing .map-encounter-panel {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

.map-encounter-icon {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
}

.map-encounter-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent-glow);
    margin-bottom: 8px;
}

.map-encounter-desc {
    font-size: 15px;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 24px;
}

.map-encounter-result {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    background: rgba(196, 154, 60, 0.1);
    border: 1px solid rgba(196, 154, 60, 0.2);
}

.map-encounter-result.heal {
    color: var(--heal-green);
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
}

.map-encounter-result.buff {
    color: var(--accent-glow);
}

.map-encounter-result.gold {
    color: var(--gold);
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);
}

.map-encounter-btn {
    padding: 12px 36px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-encounter-btn:hover {
    background: var(--accent-glow);
    box-shadow: 0 0 20px rgba(196, 154, 60, 0.4);
    transform: translateY(-1px);
}

.map-encounter-btn:active {
    transform: translateY(1px);
}

/* =======================================
   Title Screen
   ======================================= */

.screen-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.6s ease, backdrop-filter 0.6s ease;
}

.screen-overlay.visible {
    background: rgba(5, 5, 15, 0.98);
    backdrop-filter: blur(10px);
}

#title-screen.visible {
    background: radial-gradient(ellipse 100% 80% at 50% 35%, rgba(25, 18, 8, 0.98) 0%, rgba(8, 6, 18, 0.99) 50%, rgba(5, 5, 15, 1) 100%);
}

.screen-overlay.closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
    transition: background 0.5s ease, backdrop-filter 0.5s ease;
}

/* Title Content */
.title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    padding: 0 24px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.screen-overlay.visible .title-content {
    opacity: 1;
    transform: translateY(0);
}

.screen-overlay.closing .title-content {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ===== Atmosphere Layer (viewport-wide) ===== */
.title-atmosphere {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(196, 100, 40, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 70%, rgba(100, 50, 150, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(60, 100, 180, 0.03) 0%, transparent 40%);
}

.title-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 38%, transparent 0%, rgba(5, 5, 15, 0.5) 60%, rgba(2, 2, 8, 0.95) 100%);
}

.title-rune {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(228, 190, 106, 0.12);
    border-radius: 6px;
    transform: rotate(45deg);
    opacity: 0;
    animation: runeFloat 16s ease-in-out infinite, runeFadeIn 2.5s ease-out forwards;
}
.title-rune::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(228, 190, 106, 0.08);
    border-radius: 3px;
}
.title-rune::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(196, 154, 60, 0.12) 0%, transparent 70%);
}
.tr-1 { top: 8%;  left: 10%;  width: 44px; height: 44px; animation-delay: 0s, 0.3s; }
.tr-2 { top: 15%; right: 15%; width: 30px; height: 30px; animation-delay: -3s, 0.6s; }
.tr-3 { bottom: 30%; left: 8%;  width: 26px; height: 26px; animation-delay: -7s, 0.9s; }
.tr-4 { bottom: 10%; right: 12%; width: 38px; height: 38px; animation-delay: -11s, 0.5s; }
.tr-5 { top: 45%; left: 6%;  width: 20px; height: 20px; animation-delay: -5s, 1.2s; }
.tr-6 { top: 65%; right: 8%; width: 34px; height: 34px; animation-delay: -8s, 0.7s; }
.tr-7 { top: 30%; right: 6%; width: 22px; height: 22px; animation-delay: -13s, 1.0s; }
.tr-8 { bottom: 20%; left: 18%; width: 18px; height: 18px; animation-delay: -2s, 1.4s; }

/* Floating dust motes */
.title-mote {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(228, 190, 106, 0.35);
    box-shadow: 0 0 6px rgba(228, 190, 106, 0.2);
    opacity: 0;
    animation: moteFloat 20s ease-in-out infinite, runeFadeIn 3s ease-out forwards;
}
.tm-1 { top: 20%; left: 25%; animation-delay: 0s, 0.5s; }
.tm-2 { top: 35%; right: 20%; width: 2px; height: 2px; animation-delay: -4s, 0.8s; }
.tm-3 { bottom: 35%; left: 30%; animation-delay: -8s, 1.0s; }
.tm-4 { bottom: 15%; right: 25%; width: 2px; height: 2px; animation-delay: -12s, 0.3s; }
.tm-5 { top: 55%; left: 15%; width: 2px; height: 2px; animation-delay: -6s, 1.2s; }
.tm-6 { top: 10%; right: 30%; animation-delay: -10s, 0.6s; }
.tm-7 { bottom: 45%; right: 10%; width: 2px; height: 2px; animation-delay: -3s, 1.5s; }
.tm-8 { top: 75%; left: 20%; animation-delay: -15s, 0.9s; }

@keyframes moteFloat {
    0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
    25% { transform: translateY(-20px) translateX(8px); opacity: 0.7; }
    50% { transform: translateY(-10px) translateX(-5px); opacity: 0.4; }
    75% { transform: translateY(-25px) translateX(12px); opacity: 0.8; }
}

/* Floating dice silhouettes — ghostly dice drifting in the background */
.title-die-float {
    position: absolute;
    font-size: 48px;
    color: rgba(196, 154, 60, 0.04);
    pointer-events: none;
    animation: dieFloat 25s ease-in-out infinite, runeFadeIn 4s ease-out forwards;
    opacity: 0;
    text-shadow: 0 0 20px rgba(196, 154, 60, 0.03);
}
.tdf-1 { top: 12%; left: 8%;  font-size: 60px; animation-delay: 0s, 0.5s; }
.tdf-2 { top: 25%; right: 10%; font-size: 44px; animation-delay: -5s, 1.0s; }
.tdf-3 { bottom: 30%; left: 12%; font-size: 36px; animation-delay: -10s, 1.5s; }
.tdf-4 { bottom: 15%; right: 15%; font-size: 52px; animation-delay: -15s, 0.8s; }
.tdf-5 { top: 55%; left: 5%;  font-size: 28px; animation-delay: -8s, 2.0s; }
.tdf-6 { top: 70%; right: 6%; font-size: 40px; animation-delay: -20s, 1.2s; }

@keyframes dieFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(8deg); }
    50% { transform: translateY(-5px) rotate(-5deg); }
    75% { transform: translateY(-20px) rotate(12deg); }
}

.title-sigil {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 154, 60, 0.08);
    background: radial-gradient(circle, rgba(228, 116, 74, 0.06) 0%, rgba(196, 154, 60, 0.03) 40%, transparent 70%);
    animation: sigilPulse 6s ease-in-out infinite;
}
.title-sigil::before {
    content: '';
    position: absolute;
    inset: 40px;
    border-radius: 50%;
    border: 1px solid rgba(228, 190, 106, 0.06);
}
.title-sigil::after {
    content: '';
    position: absolute;
    inset: 90px;
    border-radius: 50%;
    border: 1.5px dashed rgba(228, 116, 74, 0.08);
    animation: sigilSpin 30s linear infinite;
}
.title-sigil-outer {
    width: 650px;
    height: 650px;
    border: 1px solid rgba(196, 154, 60, 0.04);
    background: none;
    animation-delay: -3s;
}
.title-sigil-outer::before {
    inset: 50px;
    border: 1.5px dashed rgba(196, 154, 60, 0.05);
    animation: sigilSpin 45s linear infinite reverse;
}
.title-sigil-outer::after { display: none; }

@keyframes runeFloat {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(-14px); }
}
@keyframes runeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sigilPulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
    50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.3); }
}
@keyframes sigilSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== Title Header ===== */
.title-header {
    text-align: center;
    margin-bottom: 48px;
}

.title-text {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f0d48a, #c49a3c, #fff8e0, #c49a3c, #f0d48a);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleReveal 1.2s ease-out forwards, titleGradient 6s ease-in-out 1.2s infinite, titlePulse 3s ease-in-out 1.2s infinite;
    text-shadow: none;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 0;
}

@keyframes titleReveal {
    0% { opacity: 0; letter-spacing: 20px; filter: brightness(3) blur(6px); }
    40% { opacity: 1; filter: brightness(2) blur(0); }
    100% { opacity: 1; letter-spacing: 6px; filter: brightness(1) blur(0); }
}

.title-text-accent {
    background: linear-gradient(135deg, #ff9944, #e4734a, #ff9944, #f0d48a);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGradient 6s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes titleGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes titlePulse {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 25px rgba(196, 154, 60, 0.3)); }
    50% { filter: brightness(1.1) drop-shadow(0 0 45px rgba(196, 154, 60, 0.5)); }
}

.title-rule {
    width: 300px;
    height: 2px;
    margin: 16px auto 16px;
    background: linear-gradient(90deg, transparent 0%, rgba(196, 154, 60, 0.1) 15%, rgba(196, 154, 60, 0.5) 50%, rgba(228, 116, 74, 0.4) 55%, rgba(196, 154, 60, 0.1) 85%, transparent 100%);
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out 0.4s forwards;
    position: relative;
    overflow: visible;
}
.title-rule::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 7px;
    height: 7px;
    background: rgba(196, 154, 60, 0.6);
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(196, 154, 60, 0.4);
}
/* Sweeping light along the rule */
.title-rule::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255, 230, 150, 0.6), transparent);
    border-radius: 2px;
    animation: ruleSweep 4s ease-in-out 1.5s infinite;
}
@keyframes ruleSweep {
    0%, 100% { left: -40px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% + 40px); opacity: 0; }
}

.title-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: rgba(180, 160, 200, 0.5);
    letter-spacing: 8px;
    text-transform: uppercase;
    opacity: 0;
    animation: titleFadeIn 0.8s ease-out 0.6s forwards;
    text-shadow: 0 0 12px rgba(180, 160, 200, 0.15);
}

@keyframes titleFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Play Section ===== */
.title-play-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 36px;
}

.title-btn {
    width: 100%;
    max-width: 340px;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    position: relative;
    opacity: 0;
    animation: titleFadeIn 0.5s ease-out 0.6s forwards;
}

.title-btn-primary {
    color: #1a1a2e;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #c49a3c, #daa520, #f0d48a, #daa520);
    background-size: 300% 300%;
    border-color: rgba(218, 165, 32, 0.6);
    box-shadow: 0 0 25px rgba(196, 154, 60, 0.25), 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    animation: titleFadeIn 0.5s ease-out 0.8s forwards, btnShimmer 4s ease-in-out 1.3s infinite;
}
.title-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 50px rgba(196, 154, 60, 0.5), 0 8px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    border-color: rgba(255, 215, 0, 0.8);
}
.title-btn-primary:active { transform: translateY(0) scale(0.97); }

@keyframes btnShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Subtle breathing pulse on primary button to draw the eye */
.title-btn-primary {
    animation: titleFadeIn 0.5s ease-out 0.6s forwards, titleBtnBreathe 3s ease-in-out 1.2s infinite;
}
@keyframes titleBtnBreathe {
    0%, 100% { box-shadow: 0 0 25px rgba(196, 154, 60, 0.25), 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15); }
    50% { box-shadow: 0 0 35px rgba(196, 154, 60, 0.4), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
}

.title-continue-btn {
    background: linear-gradient(135deg, #daa520, #f0d48a) !important;
    border-color: rgba(240, 212, 138, 0.6) !important;
    box-shadow: 0 0 30px rgba(218, 165, 32, 0.3), 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.title-continue-btn {
    animation: titleFadeIn 0.5s ease-out 0.6s forwards, continueBtnPulse 2.5s ease-in-out 1.2s infinite !important;
}
@keyframes continueBtnPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(218, 165, 32, 0.3), 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
    50% { box-shadow: 0 0 40px rgba(218, 165, 32, 0.45), 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3); }
}
.title-continue-btn:hover {
    animation: none !important;
    box-shadow: 0 0 45px rgba(218, 165, 32, 0.5), 0 6px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border-color: rgba(255, 215, 0, 0.8) !important;
}

.title-btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    animation-delay: 0.75s;
}
.title-btn-secondary:hover {
    background: rgba(196, 154, 60, 0.1);
    border-color: rgba(196, 154, 60, 0.4);
    color: var(--text);
    box-shadow: 0 0 15px rgba(196, 154, 60, 0.1);
}

.title-btn-daily {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(74, 157, 217, 0.04);
    border-color: rgba(74, 157, 217, 0.2);
    color: #6ab4e0;
    animation-delay: 0.85s;
}
.title-btn-daily:hover {
    background: rgba(74, 157, 217, 0.1);
    border-color: rgba(74, 157, 217, 0.45);
    box-shadow: 0 0 20px rgba(74, 157, 217, 0.15);
}

/* ===== Divider ===== */
.title-divider {
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 60, 0.2), transparent);
    margin-bottom: 28px;
    opacity: 0;
    animation: titleFadeIn 0.5s ease-out 0.9s forwards;
}

/* ===== Meta Section ===== */
.title-meta-section {
    display: flex;
    gap: 14px;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin-bottom: 36px;
    opacity: 0;
    animation: titleFadeIn 0.5s ease-out 1.0s forwards;
}

.title-meta-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(196, 154, 60, 0.08);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
/* Hover shine sweep */
.title-meta-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 60, 0.08), transparent);
    transition: left 0.4s ease;
    pointer-events: none;
}
.title-meta-btn:hover::after {
    left: 100%;
}
.title-meta-btn:hover {
    background: rgba(196, 154, 60, 0.06);
    border-color: rgba(196, 154, 60, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 15px rgba(196, 154, 60, 0.1);
}
.title-meta-icon { font-size: 22px; line-height: 1; opacity: 0.7; transition: opacity 0.2s; }
.title-meta-btn:hover .title-meta-icon { opacity: 1; }
.title-meta-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text);
}
.title-meta-detail {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 500;
}
.title-unlocks-btn .title-meta-detail {
    color: var(--legendary-gold);
}

/* ===== Footer ===== */
.title-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    opacity: 0;
    animation: titleFadeIn 0.5s ease-out 1.1s forwards;
}
.title-footer-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.title-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(136, 136, 170, 0.5);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.title-footer-btn:hover {
    color: var(--text);
    border-color: rgba(196, 154, 60, 0.25);
    background: rgba(196, 154, 60, 0.05);
}

.title-version {
    font-size: 10px;
    color: rgba(136, 136, 170, 0.3);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* =======================================
   Game Over / Death Screen
   ======================================= */

.gameover-overlay.visible {
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(40, 5, 5, 0.95), rgba(10, 2, 2, 0.98));
    backdrop-filter: blur(10px);
}

.gameover-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    width: 90%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.screen-overlay.visible .gameover-content {
    opacity: 1;
    transform: translateY(0);
}

.screen-overlay.closing .gameover-content {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* DEFEAT title */
.gameover-title {
    font-size: 76px;
    font-weight: 900;
    letter-spacing: 12px;
    text-transform: uppercase;
    color: transparent;
    background: linear-gradient(135deg, #ff6b6b, #e74c3c, #a02020, #e74c3c, #ff6b6b);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    opacity: 0;
    animation: goTitleIn 1.2s ease-out 0.3s forwards, goTitleShift 6s ease-in-out 1.5s infinite;
}

@keyframes goTitleIn {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(30px);
        filter: drop-shadow(0 0 0px rgba(231, 76, 60, 0)) brightness(0.5);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
        filter: drop-shadow(0 0 50px rgba(231, 76, 60, 0.7)) brightness(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 30px rgba(231, 76, 60, 0.4)) brightness(1);
    }
}

@keyframes goTitleShift {
    0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 0 25px rgba(231, 76, 60, 0.35)) brightness(1); }
    50% { background-position: 100% 50%; filter: drop-shadow(0 0 40px rgba(231, 76, 60, 0.5)) brightness(1.05); }
}

/* Stats row */
.gameover-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 36px;
    opacity: 0;
    animation: titleFadeIn 0.6s ease-out 0.8s forwards;
}

.go-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(231, 76, 60, 0.08);
    border-radius: var(--radius-md);
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.go-stat-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(200, 160, 160, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.go-stat-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--text);
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.15);
}

/* Dice collection section */
.gameover-dice-section {
    width: 100%;
    margin-bottom: 36px;
    opacity: 0;
    animation: titleFadeIn 0.6s ease-out 1.1s forwards;
}

.gameover-dice-title {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(200, 160, 160, 0.45);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.gameover-dice-title::before,
.gameover-dice-title::after {
    content: '';
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(231, 76, 60, 0.15));
}
.gameover-dice-title::after {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.15), transparent);
}

.gameover-dice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.go-die-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(20, 8, 8, 0.3) 100%);
    border: 1px solid rgba(231, 76, 60, 0.06);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.go-die-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-glow);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.go-die-faces {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: center;
}

.go-die-face {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.go-die-face[data-face-type="damage"] { background: linear-gradient(155deg, rgba(217, 64, 64, 0.4), rgba(140, 30, 30, 0.35)); border-color: rgba(255, 100, 100, 0.1); }
.go-die-face[data-face-type="block"]  { background: linear-gradient(155deg, rgba(74, 159, 216, 0.4), rgba(30, 100, 152, 0.35)); border-color: rgba(100, 180, 255, 0.1); }
.go-die-face[data-face-type="heal"]   { background: linear-gradient(155deg, rgba(60, 200, 104, 0.35), rgba(30, 140, 64, 0.3)); border-color: rgba(80, 220, 130, 0.1); }
.go-die-face[data-face-type="poison"] { background: linear-gradient(155deg, rgba(64, 200, 112, 0.35), rgba(30, 136, 66, 0.3)); border-color: rgba(70, 200, 110, 0.1); }
.go-die-face[data-face-type="utility"]{ background: linear-gradient(155deg, rgba(168, 85, 216, 0.4), rgba(110, 48, 152, 0.35)); border-color: rgba(180, 120, 255, 0.1); }
.go-die-face[data-face-type="blank"]  { background: linear-gradient(155deg, rgba(74, 85, 104, 0.35), rgba(45, 55, 72, 0.3)); border-color: rgba(120, 140, 170, 0.06); }
.go-die-face[data-face-type="curse"]  { background: linear-gradient(155deg, rgba(58, 32, 96, 0.4), rgba(32, 16, 56, 0.35)); border-color: rgba(150, 80, 220, 0.08); }
.go-die-face[data-face-type="status"]{ background: linear-gradient(155deg, rgba(192, 96, 224, 0.35), rgba(120, 48, 160, 0.3)); border-color: rgba(200, 130, 255, 0.1); }

/* Try Again button */
.gameover-retry-btn {
    padding: 18px 56px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: linear-gradient(135deg, #a02020, #c0392b, #e74c3c);
    border: 1px solid rgba(255, 107, 107, 0.4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 0 25px rgba(231, 76, 60, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    opacity: 0;
    animation: titleFadeIn 0.6s ease-out 1.4s forwards;
    font-family: inherit;
}

.gameover-retry-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 0 45px rgba(231, 76, 60, 0.4),
        0 8px 28px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #c0392b, #e74c3c, #ff6b6b);
    border-color: rgba(255, 140, 140, 0.5);
}

.gameover-retry-btn:active {
    transform: translateY(0) scale(0.98);
}

/* =======================================
   Shop Screen
   ======================================= */

/* Full-screen overlay */
.shop-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(1px);
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.shop-overlay.visible {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
}

.shop-overlay.closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

.shop-overlay.closing .shop-panel {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

/* Main shop panel */
.shop-panel {
    background: linear-gradient(180deg, rgba(20, 18, 35, 0.98) 0%, var(--bg-light) 15%, var(--bg-light) 85%, rgba(20, 18, 35, 0.98) 100%);
    border: 1px solid rgba(196, 154, 60, 0.16);
    border-radius: 12px;
    padding: 32px 40px;
    min-width: 560px;
    max-width: 1100px;
    width: 90vw;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(241, 196, 15, 0.06),
        inset 0 1px 0 rgba(196, 154, 60, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.shop-overlay.visible .shop-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Shop header */
.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(196, 154, 60, 0.1);
}

.shop-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #f0d48a, var(--gold), #f9e547);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(196, 154, 60, 0.3));
}

.shop-gold-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.2);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.shop-gold-icon {
    font-size: 22px;
}

.shop-gold-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}

.shop-gold-display.gold-spent {
    animation: shopGoldSpend 0.45s ease-out;
}
@keyframes shopGoldSpend {
    0% { transform: scale(1); }
    20% { transform: scale(0.92); border-color: rgba(231, 76, 60, 0.4); }
    50% { transform: scale(1.06); border-color: rgba(241, 196, 15, 0.5); }
    100% { transform: scale(1); border-color: rgba(241, 196, 15, 0.2); }
}

.shop-subtitle {
    text-align: center;
    font-size: 15px;
    color: var(--text-dim);
    margin-bottom: 20px;
}

.shop-cost-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold);
}

/* Shop sections */
.shop-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    margin-bottom: 28px;
}

.shop-section {
    padding-bottom: 0;
}

.shop-section.shop-section-full {
    grid-column: 1 / -1;
    padding-top: 20px;
    border-top: 1px solid rgba(196, 154, 60, 0.08);
}

.shop-section-title {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgba(196, 154, 60, 0.6);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 16px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.shop-section-title::before,
.shop-section-title::after {
    content: '';
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 60, 0.15));
}
.shop-section-title::after {
    background: linear-gradient(90deg, rgba(196, 154, 60, 0.15), transparent);
}

/* Face cards for sale */
.shop-faces-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.shop-face-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 14px;
    width: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0;
    transform: scale(0.3);
    animation: rewardCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--reveal-delay, 0.3s);
    position: relative;
}

/* Shimmer sweep on shop face cards */
.shop-face-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: rewardShimmer 0.7s ease-out forwards;
    animation-delay: calc(var(--reveal-delay, 0.3s) + 0.35s);
    pointer-events: none;
}

.shop-face-card:hover:not(.shop-unaffordable) {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(196, 154, 60, 0.15);
}

/* Face-type-colored hover glow */
.shop-face-card[data-face-type="damage"]:hover:not(.shop-unaffordable) {
    border-color: var(--damage-red);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 20px rgba(239, 83, 80, 0.2);
}
.shop-face-card[data-face-type="block"]:hover:not(.shop-unaffordable) {
    border-color: var(--block-blue);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 20px rgba(74, 157, 217, 0.2);
}
.shop-face-card[data-face-type="heal"]:hover:not(.shop-unaffordable) {
    border-color: var(--heal-green);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 20px rgba(67, 180, 104, 0.2);
}
.shop-face-card[data-face-type="poison"]:hover:not(.shop-unaffordable) {
    border-color: var(--poison-green);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 20px rgba(54, 149, 90, 0.2);
}
.shop-face-card[data-face-type="utility"]:hover:not(.shop-unaffordable),
.shop-face-card[data-face-type="status"]:hover:not(.shop-unaffordable) {
    border-color: #9b59b6;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 20px rgba(155, 89, 182, 0.2);
}

.shop-face-card:active:not(.shop-unaffordable) {
    transform: translateY(-2px) scale(0.98);
}

.shop-face-card[data-rarity="uncommon"] {
    border-color: rgba(46, 204, 113, 0.2);
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.04) 0%, var(--surface) 100%);
}
.shop-face-card[data-rarity="uncommon"]:hover:not(.shop-unaffordable) {
    border-color: var(--heal-green);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 24px rgba(46,204,113,0.2);
}

.shop-face-card[data-rarity="rare"] {
    border-color: rgba(155, 89, 182, 0.2);
    background: linear-gradient(180deg, rgba(155, 89, 182, 0.04) 0%, var(--surface) 100%);
}
.shop-face-card[data-rarity="rare"]:hover:not(.shop-unaffordable) {
    border-color: var(--rare-purple);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 24px rgba(155,89,182,0.25);
}

.shop-face-rarity {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.shop-face-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 4px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Face type gradients for shop — match reward icon styling */
.shop-face-icon-wrap[data-face-type="damage"]  { background: linear-gradient(155deg, #d94040 0%, #b82a2a 30%, #922020 65%, #701515 100%); border-color: rgba(255, 100, 100, 0.2); }
.shop-face-icon-wrap[data-face-type="block"]   { background: linear-gradient(155deg, #4a9fd8 0%, #2e7eb8 30%, #1d6498 65%, #154d78 100%); border-color: rgba(100, 180, 255, 0.2); }
.shop-face-icon-wrap[data-face-type="heal"]    { background: linear-gradient(155deg, #3cc868 0%, #28a850 30%, #1e8c40 65%, #167030 100%); border-color: rgba(80, 220, 130, 0.2); }
.shop-face-icon-wrap[data-face-type="poison"]  { background: linear-gradient(155deg, #40c870 0%, #2aaa55 30%, #1e8842 65%, #156832 100%); border-color: rgba(70, 200, 110, 0.2); }
.shop-face-icon-wrap[data-face-type="utility"] { background: linear-gradient(155deg, #a855d8 0%, #8840b8 30%, #6e3098 65%, #542578 100%); border-color: rgba(180, 120, 255, 0.2); }
.shop-face-icon-wrap[data-face-type="blank"]   { background: linear-gradient(155deg, #4a5568 0%, #3a4555 30%, #2d3748 65%, #222d3a 100%); border-color: rgba(120, 140, 170, 0.12); }
.shop-face-icon-wrap[data-face-type="status"]  { background: linear-gradient(155deg, #c060e0 0%, #9840c0 30%, #7830a0 65%, #602880 100%); border-color: rgba(200, 130, 255, 0.2); }
.shop-face-icon-wrap[data-face-type="curse"]   { background: linear-gradient(155deg, #3a2060 0%, #2a1848 30%, #201038 65%, #180c28 100%); border-color: rgba(150, 80, 220, 0.15); }

.shop-face-icon {
    font-size: 24px;
    line-height: 1;
}

.shop-face-value {
    font-size: 12px;
    font-weight: 900;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.shop-face-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.shop-face-desc {
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.3;
}

/* Price tag */
.shop-price-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    background: rgba(241, 196, 15, 0.06);
    border: 1px solid rgba(241, 196, 15, 0.15);
    border-radius: var(--radius-sm);
    margin-top: auto;
}

.shop-price-coin {
    font-size: 14px;
}

.shop-price-amount {
    font-size: 14px;
    font-weight: 800;
    color: var(--gold);
}

/* Unaffordable items */
.shop-unaffordable {
    opacity: 0.35;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Sold items */
.shop-sold {
    opacity: 0.3;
    pointer-events: none;
}

.shop-sold-label {
    font-size: 18px;
    font-weight: 900;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 24px;
}

/* Die for sale */
.shop-dice-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.shop-die-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0;
    transform: scale(0.3);
    animation: rewardCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--reveal-delay, 0.45s);
    position: relative;
}

/* Shimmer sweep on shop die cards */
.shop-die-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.14) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: rewardShimmer 0.7s ease-out forwards;
    animation-delay: calc(var(--reveal-delay, 0.45s) + 0.35s);
    pointer-events: none;
}

.shop-die-card:hover:not(.shop-unaffordable):not(.shop-sold) {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5), 0 0 20px rgba(196, 154, 60, 0.12);
}

.shop-die-card[data-rarity="uncommon"] {
    border-color: rgba(46, 204, 113, 0.3);
}
.shop-die-card[data-rarity="rare"] {
    border-color: rgba(155, 89, 182, 0.3);
}

.shop-die-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.shop-die-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.shop-die-faces-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.shop-die-faces-preview.large {
    gap: 6px;
}

.shop-die-face-pip {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.shop-die-faces-preview.large .shop-die-face-pip {
    width: 34px;
    height: 34px;
    font-size: 17px;
}

.shop-die-face-pip[data-face-type="damage"]  { background: linear-gradient(155deg, rgba(217, 64, 64, 0.35), rgba(140, 30, 30, 0.3)); border-color: rgba(255, 100, 100, 0.1); }
.shop-die-face-pip[data-face-type="block"]   { background: linear-gradient(155deg, rgba(74, 159, 216, 0.35), rgba(30, 100, 152, 0.3)); border-color: rgba(100, 180, 255, 0.1); }
.shop-die-face-pip[data-face-type="heal"]    { background: linear-gradient(155deg, rgba(60, 200, 104, 0.3), rgba(30, 140, 64, 0.25)); border-color: rgba(80, 220, 130, 0.1); }
.shop-die-face-pip[data-face-type="poison"]  { background: linear-gradient(155deg, rgba(64, 200, 112, 0.3), rgba(30, 136, 66, 0.25)); border-color: rgba(70, 200, 110, 0.1); }
.shop-die-face-pip[data-face-type="utility"] { background: linear-gradient(155deg, rgba(168, 85, 216, 0.35), rgba(110, 48, 152, 0.3)); border-color: rgba(180, 120, 255, 0.1); }
.shop-die-face-pip[data-face-type="blank"]   { background: linear-gradient(155deg, rgba(74, 85, 104, 0.3), rgba(45, 55, 72, 0.25)); border-color: rgba(120, 140, 170, 0.06); }
.shop-die-face-pip[data-face-type="status"]  { background: linear-gradient(155deg, rgba(192, 96, 224, 0.3), rgba(120, 48, 160, 0.25)); border-color: rgba(200, 130, 255, 0.1); }
.shop-die-face-pip[data-face-type="curse"]   { background: linear-gradient(155deg, rgba(58, 32, 96, 0.35), rgba(32, 16, 56, 0.3)); border-color: rgba(150, 80, 220, 0.08); }

.shop-confirm-die-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.fusion-result-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    width: 100%;
    max-width: 240px;
    margin-top: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    border: 1px solid var(--border);
}

.fusion-result-face {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}

.fusion-result-face[data-face-type="damage"] { color: var(--damage-red); }
.fusion-result-face[data-face-type="block"]  { color: var(--block-blue); }
.fusion-result-face[data-face-type="heal"]   { color: var(--heal-green); }
.fusion-result-face[data-face-type="poison"] { color: var(--poison-green); }
.fusion-result-face[data-face-type="utility"] { color: #bf7fff; }
.fusion-result-face[data-face-type="status"] { color: #e0b0ff; }
.fusion-result-face[data-face-type="curse"]  { color: #cc99ff; }
.fusion-result-face[data-face-type="blank"]  { color: var(--text-dim); }

.fusion-result-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.fusion-result-cost {
    font-size: 11px;
    color: var(--energy-yellow);
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shop-die-name-big {
    font-size: 20px;
    font-weight: 800;
    color: var(--accent-glow);
}

/* Services row */
.shop-services-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.shop-service-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0;
    transform: scale(0.3);
    animation: rewardCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--reveal-delay, 0.5s);
    position: relative;
}

/* Shimmer sweep on shop service cards */
.shop-service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: rewardShimmer 0.7s ease-out forwards;
    animation-delay: calc(var(--reveal-delay, 0.5s) + 0.35s);
    pointer-events: none;
}

.shop-service-card:hover:not(.shop-unaffordable) {
    transform: translateY(-4px);
    border-color: rgba(196, 154, 60, 0.35);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 18px rgba(196, 154, 60, 0.1);
}

.shop-service-icon {
    font-size: 32px;
    line-height: 1;
}

/* Per-service idle animations */
.shop-service-card[data-service="remove"] .shop-service-icon {
    animation: serviceRemoveSnip 3s ease-in-out infinite;
}
@keyframes serviceRemoveSnip {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-8deg) scale(1.05); }
    25% { transform: rotate(4deg) scale(0.95); }
    35% { transform: rotate(0deg); }
}

.shop-service-card[data-service="fusion"] .shop-service-icon {
    animation: serviceFusionPulse 2.5s ease-in-out infinite;
}
@keyframes serviceFusionPulse {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(241, 196, 15, 0.2)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.5)); transform: scale(1.08); }
}

.shop-service-card[data-service="material"] .shop-service-icon {
    animation: serviceMaterialShimmer 4s ease-in-out infinite;
}
@keyframes serviceMaterialShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3) drop-shadow(0 0 6px rgba(108, 92, 231, 0.4)); }
}

.shop-service-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.shop-service-desc {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.4;
}

/* ===== Shop Material Cards ===== */
.shop-materials-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.shop-material-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0;
    transform: scale(0.3);
    animation: rewardCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--reveal-delay, 0.2s);
    position: relative;
}

/* Shimmer sweep on shop material cards */
.shop-material-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: rewardShimmer 0.7s ease-out forwards;
    animation-delay: calc(var(--reveal-delay, 0.2s) + 0.35s);
    pointer-events: none;
}

.shop-material-card:nth-child(1) { --reveal-delay: 0.15s; }
.shop-material-card:nth-child(2) { --reveal-delay: 0.28s; }
.shop-material-card:nth-child(3) { --reveal-delay: 0.41s; }
.shop-material-card:nth-child(4) { --reveal-delay: 0.54s; }

.shop-material-card:hover:not(.shop-unaffordable) {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(108,92,231,0.2);
}

.shop-material-icon {
    font-size: 28px;
    line-height: 1;
}

.shop-material-icon svg { width: 28px; height: 28px; }

.shop-material-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.shop-material-desc {
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.3;
}

/* Leave shop button */
.shop-leave-btn {
    display: block;
    margin: 8px auto 0;
    padding: 12px 48px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.shop-leave-btn:hover {
    color: var(--text);
    background: rgba(196, 154, 60, 0.08);
    border-color: rgba(196, 154, 60, 0.3);
    box-shadow: 0 0 15px rgba(196, 154, 60, 0.15);
    transform: translateY(-1px);
}

.shop-leave-btn:active {
    transform: translateY(1px);
}

/* ===== Shop Slot Machine Reveal ===== */
.shop-slot-spinning {
    position: relative;
}

.shop-slot-spinning .shop-face-icon-wrap,
.shop-slot-spinning .shop-die-info {
    animation: slotSpin 0.07s steps(1) infinite;
}

@keyframes slotSpin {
    0% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
    100% { transform: translateY(-2px); }
}

.shop-slot-revealed {
    animation: slotRevealPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes slotRevealPop {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== Mystery Pack ===== */
.shop-mystery-pack {
    background: linear-gradient(135deg, rgba(196, 154, 60, 0.08), rgba(228, 190, 106, 0.04)) !important;
    border-color: rgba(196, 154, 60, 0.3) !important;
}

.shop-mystery-pack:hover:not(.shop-unaffordable) {
    border-color: var(--accent-glow) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(196, 154, 60, 0.25) !important;
}

.shop-mystery-icon {
    animation: mysteryIconPulse 2s ease-in-out infinite;
}

@keyframes mysteryIconPulse {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 4px rgba(196, 154, 60, 0.3)); }
    50% { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 0 12px rgba(228, 190, 106, 0.5)); }
}

/* Mystery pack confirm preview */
.mystery-pack-preview {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.mystery-pack-box {
    display: flex;
    gap: 16px;
    padding: 20px 32px;
    background: linear-gradient(135deg, rgba(196, 154, 60, 0.15), rgba(228, 190, 106, 0.08));
    border: 2px solid rgba(196, 154, 60, 0.3);
    border-radius: var(--radius-md);
    box-shadow: 0 0 30px rgba(196, 154, 60, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.mystery-pack-icon {
    font-size: 32px;
    color: var(--accent-glow);
    animation: mysteryIconFloat 2s ease-in-out infinite;
}

.mystery-pack-icon:nth-child(2) { animation-delay: 0.3s; }
.mystery-pack-icon:nth-child(3) { animation-delay: 0.6s; }

@keyframes mysteryIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Mystery reveal area */
.mystery-reveal-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
    perspective: 800px;
}

.mystery-reveal-card {
    width: 160px;
    min-height: 180px;
    perspective: 600px;
    opacity: 0;
    animation: mysteryCardReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes mysteryCardReveal {
    0% { opacity: 0; transform: scale(0.3) rotateY(180deg); }
    40% { opacity: 1; transform: scale(1.1) rotateY(90deg); }
    70% { transform: scale(1.05) rotateY(10deg); }
    100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}

.mystery-reveal-inner {
    position: relative;
    width: 100%;
    min-height: 180px;
}

.mystery-card-back {
    display: none;
}

.mystery-card-front {
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(196, 154, 60, 0.2);
}

.mystery-continue-btn {
    margin-top: 12px;
}

/* Fusion selection */
.shop-fusion-selection {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
    padding: 4px 0;
    margin-bottom: 16px;
}

.shop-fusion-die-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shop-fusion-die-card:hover {
    border-color: rgba(196, 154, 60, 0.5);
}

.shop-fusion-die-card.shop-fusion-selected {
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(241, 196, 15, 0.3);
    background: rgba(241, 196, 15, 0.05);
}

.shop-fusion-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.shop-fusion-confirm-btn {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.shop-fusion-confirm-btn:hover:not(:disabled) {
    background: var(--accent-glow);
    box-shadow: 0 0 20px rgba(196, 154, 60, 0.4);
    transform: translateY(-1px);
}

.shop-fusion-confirm-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Fusion face selection counter */
.shop-fusion-counter {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dim);
    margin: -4px 0 8px;
}

.shop-fusion-counter .fusion-count {
    color: var(--gold);
    font-size: 18px;
}

/* Fusion face pool layout */
.shop-fusion-face-pools {
    display: flex;
    gap: 16px;
    max-height: 45vh;
    overflow-y: auto;
    padding: 4px;
}

.shop-fusion-pool {
    flex: 1;
    min-width: 0;
}

.shop-fusion-pool-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-align: center;
}

.shop-fusion-pool-faces {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Individual face pick slot */
.shop-fusion-face-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.shop-fusion-face-pick:hover:not(.shop-fusion-face-dimmed) {
    border-color: rgba(196, 154, 60, 0.5);
    transform: translateX(2px);
}

.shop-fusion-face-pick.shop-fusion-face-selected {
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(241, 196, 15, 0.25);
    background: rgba(241, 196, 15, 0.08);
}

.shop-fusion-face-pick.shop-fusion-face-dimmed {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.shop-fusion-face-pick .rdf-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.shop-fusion-face-pick .rdf-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.shop-fusion-face-pick .rdf-value {
    margin-left: auto;
    font-size: 14px;
    font-weight: 800;
    color: var(--accent-glow);
}

/* Shop panel scrollbar */
.shop-panel::-webkit-scrollbar,
.shop-fusion-selection::-webkit-scrollbar {
    width: 6px;
}

.shop-panel::-webkit-scrollbar-track,
.shop-fusion-selection::-webkit-scrollbar-track {
    background: transparent;
}

.shop-panel::-webkit-scrollbar-thumb,
.shop-fusion-selection::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}

.shop-panel::-webkit-scrollbar-thumb:hover,
.shop-fusion-selection::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* =======================================
   Rest Site Screen
   ======================================= */

/* Full-screen overlay */
.rest-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.rest-overlay.visible {
    background:
        radial-gradient(ellipse at 50% 70%, rgba(230, 126, 34, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(231, 76, 60, 0.06) 0%, transparent 40%),
        rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
}

.rest-overlay.closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

.rest-overlay.closing .rest-panel {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

/* Rest panel */
.rest-panel {
    background: linear-gradient(180deg, rgba(18, 14, 28, 0.98) 0%, var(--bg-light) 12%, var(--bg-light) 88%, rgba(18, 14, 28, 0.98) 100%);
    border: 1px solid rgba(196, 154, 60, 0.1);
    border-radius: 10px;
    padding: 40px 48px;
    min-width: 520px;
    max-width: 860px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(230, 126, 34, 0.08),
        0 0 40px rgba(196, 154, 60, 0.06);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

/* Warm campfire underglow — positioned below panel */
.rest-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 40px;
    background: radial-gradient(ellipse at 50% 100%, rgba(230, 126, 34, 0.15) 0%, rgba(231, 76, 60, 0.06) 50%, transparent 80%);
    pointer-events: none;
    z-index: 0;
    border-radius: 0 0 10px 10px;
    animation: campfireUnderglow 3s ease-in-out infinite;
}
@keyframes campfireUnderglow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.rest-overlay.visible .rest-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Rest header */
.rest-header {
    text-align: center;
    margin-bottom: 32px;
}

.rest-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffd4a0, #e8a040, #c47020);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 12px rgba(230, 126, 34, 0.3));
}

.rest-subtitle {
    font-size: 13px;
    color: rgba(200, 190, 220, 0.5);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Option cards */
.rest-options {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.rest-option-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 30px 26px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0;
    animation: rewardCardIn 0.5s ease-out both;
}

.rest-option-card:nth-child(2) {
    animation-delay: 0.1s;
}

.rest-option-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.rest-option-card:active {
    transform: translateY(-3px) scale(0.98);
}

/* Heal card warm colors */
.rest-option-heal {
    border-color: rgba(231, 76, 60, 0.2);
    background: linear-gradient(180deg, rgba(231, 76, 60, 0.04) 0%, var(--surface) 100%);
}

.rest-option-heal:hover {
    border-color: var(--hp-red);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(231, 76, 60, 0.15);
}

/* Upgrade card blue colors */
.rest-option-upgrade {
    border-color: rgba(52, 152, 219, 0.2);
    background: linear-gradient(180deg, rgba(52, 152, 219, 0.04) 0%, var(--surface) 100%);
}

.rest-option-upgrade:hover {
    border-color: var(--block-blue);
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(52, 152, 219, 0.15);
}

.rest-option-icon {
    font-size: 48px;
    line-height: 1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 154, 60, 0.08);
}

.rest-icon-heal {
    background: radial-gradient(circle at 40% 35%, rgba(231, 76, 60, 0.18), rgba(231, 76, 60, 0.04));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(231, 76, 60, 0.12);
    animation: restHealGlow 2.5s ease-in-out infinite;
}
@keyframes restHealGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 12px rgba(231, 76, 60, 0.1); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 24px rgba(231, 76, 60, 0.25); }
}

.rest-icon-upgrade {
    background: radial-gradient(circle at 40% 35%, rgba(52, 152, 219, 0.18), rgba(52, 152, 219, 0.04));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(52, 152, 219, 0.12);
    animation: restUpgradeShimmer 3s ease-in-out infinite;
}
@keyframes restUpgradeShimmer {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 10px rgba(52, 152, 219, 0.1); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 20px rgba(52, 152, 219, 0.25); }
}

/* Temper card amber colors */
.rest-option-temper {
    border-color: rgba(243, 156, 18, 0.2);
    background: linear-gradient(180deg, rgba(243, 156, 18, 0.04) 0%, var(--surface) 100%);
}
.rest-option-temper:hover {
    border-color: #f39c12;
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(243, 156, 18, 0.15);
}
.rest-icon-temper {
    background: radial-gradient(circle at 40% 35%, rgba(243, 156, 18, 0.18), rgba(243, 156, 18, 0.04));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(243, 156, 18, 0.12);
    animation: restTemperGlow 3s ease-in-out infinite;
}
@keyframes restTemperGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 10px rgba(243, 156, 18, 0.1); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 20px rgba(243, 156, 18, 0.25); }
}
.rest-feedback-temper {
    background: radial-gradient(circle at 40% 35%, rgba(243, 156, 18, 0.25), rgba(243, 156, 18, 0.05));
    border-color: rgba(243, 156, 18, 0.2);
}
.rest-option-scrap {
    border-color: rgba(149, 165, 166, 0.2);
    background: linear-gradient(180deg, rgba(149, 165, 166, 0.04) 0%, var(--surface) 100%);
}
.rest-option-scrap:hover {
    border-color: #95a5a6;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(149, 165, 166, 0.15);
}
.rest-option-locked { opacity: 0.4; pointer-events: none; }
.rest-icon-scrap {
    background: radial-gradient(circle at 40% 35%, rgba(149, 165, 166, 0.18), rgba(149, 165, 166, 0.04));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(149, 165, 166, 0.12);
}
.rest-feedback-scrap {
    background: radial-gradient(circle at 40% 35%, rgba(149, 165, 166, 0.25), rgba(149, 165, 166, 0.05));
    border-color: rgba(149, 165, 166, 0.2);
}

.rest-option-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.rest-option-desc {
    font-size: 13px;
    color: rgba(200, 190, 220, 0.6);
    text-align: center;
    line-height: 1.5;
}

.rest-option-desc strong {
    color: var(--text);
}

.rest-option-current {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Upgrade hints on face slots */
.rest-upgrade-hint {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    color: var(--heal-green);
    padding: 1px 6px;
    background: rgba(46, 204, 113, 0.1);
    border-radius: 4px;
}

/* Rest feedback screen */
.rest-feedback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    animation: rewardSlideIn 0.4s ease-out;
}

.rest-feedback-icon {
    font-size: 64px;
    line-height: 1;
}

.rest-feedback-heal {
    animation: healPulse 1s ease-in-out infinite;
}

@keyframes healPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.rest-feedback-upgrade {
    animation: upgradeBounce 0.6s ease-out;
}

@keyframes upgradeBounce {
    0% { transform: scale(0.5) rotate(-20deg); }
    50% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.rest-feedback-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.rest-feedback-text {
    font-size: 16px;
    color: rgba(200, 190, 220, 0.6);
}

.rest-feedback-text strong {
    color: var(--heal-green);
}

.rest-feedback-hp {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
}

.rest-feedback-bar {
    width: 220px;
    height: 18px;
    background: var(--hp-red-dark);
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.rest-feedback-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #a82828, var(--hp-red), #e85d5d);
    border-radius: var(--radius-pill);
    transition: width 0.6s ease;
    position: relative;
}

.rest-feedback-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 50%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}

/* Rest panel scrollbar */
.rest-panel::-webkit-scrollbar {
    width: 6px;
}

.rest-panel::-webkit-scrollbar-track {
    background: transparent;
}

.rest-panel::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}

.rest-panel::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* ===== Relic Bar ===== */
#relic-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 24px;
    background: linear-gradient(180deg, rgba(10, 8, 20, 0.7) 0%, rgba(15, 13, 28, 0.5) 100%);
    border-bottom: 1px solid rgba(196, 154, 60, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    min-height: 42px;
    z-index: 10;
    flex-wrap: wrap;
}

#relic-bar.hidden {
    display: none;
}

.relic-icon {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: linear-gradient(155deg, rgba(255,255,255,0.05) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.relic-icon:hover {
    transform: translateY(-3px) scale(1.05);
    border-color: var(--accent-glow);
    box-shadow: 0 6px 16px rgba(196, 154, 60, 0.25), 0 0 10px rgba(196, 154, 60, 0.1);
    animation: none;
}
.relic-icon[data-rarity="uncommon"]:hover {
    border-color: rgba(46, 204, 113, 0.7);
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.25), 0 0 12px rgba(46, 204, 113, 0.2);
}
.relic-icon[data-rarity="rare"]:hover {
    border-color: rgba(155, 89, 182, 0.7);
    box-shadow: 0 6px 16px rgba(155, 89, 182, 0.3), 0 0 14px rgba(155, 89, 182, 0.25);
}
.relic-icon[data-rarity="boss"]:hover {
    border-color: rgba(231, 76, 60, 0.7);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.3), 0 0 14px rgba(231, 76, 60, 0.25);
}

.relic-icon[data-rarity="starter"] {
    border-color: var(--accent);
}

.relic-icon[data-rarity="common"] {
    border-color: rgba(200, 200, 220, 0.3);
}

.relic-icon[data-rarity="uncommon"] {
    border-color: rgba(46, 204, 113, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 8px rgba(46, 204, 113, 0.15);
}

.relic-icon[data-rarity="rare"] {
    border-color: rgba(155, 89, 182, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 10px rgba(155, 89, 182, 0.2);
    animation: relicRareAmbient 3s ease-in-out infinite;
}

.relic-icon[data-rarity="boss"] {
    border-color: rgba(231, 76, 60, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.35), 0 0 12px rgba(231, 76, 60, 0.2);
    animation: relicBossAmbient 2.5s ease-in-out infinite;
}

@keyframes relicRareAmbient {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.35), 0 0 8px rgba(155, 89, 182, 0.15); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.35), 0 0 14px rgba(155, 89, 182, 0.3); }
}

@keyframes relicBossAmbient {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.35), 0 0 10px rgba(231, 76, 60, 0.15); }
    50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.35), 0 0 18px rgba(231, 76, 60, 0.35); }
}

.relic-emoji {
    font-size: 20px;
    line-height: 1;
}

/* Relic trigger glow animation */
.relic-icon.relic-triggered {
    animation: relicTriggerGlow 0.8s ease-out;
}

@keyframes relicTriggerGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0.8);
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 20px 6px rgba(241, 196, 15, 0.6);
        transform: scale(1.15);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(241, 196, 15, 0);
        transform: scale(1);
    }
}

/* Enemy mechanic tooltip */
.enemy-tooltip {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    min-width: 180px;
    max-width: 240px;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.enemy-slot:hover .enemy-tooltip {
    opacity: 1;
}

.enemy-tooltip-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.enemy-tooltip-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.45;
}

/* Relic tooltip */
.relic-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    min-width: 200px;
    max-width: 260px;
    z-index: 200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.relic-icon:hover .relic-tooltip {
    opacity: 1;
}

.relic-tooltip-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.relic-tooltip-rarity {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.relic-tooltip-rarity[data-rarity="starter"] { color: var(--accent-glow); }
.relic-tooltip-rarity[data-rarity="common"] { color: var(--text-dim); }
.relic-tooltip-rarity[data-rarity="uncommon"] { color: var(--heal-green); }
.relic-tooltip-rarity[data-rarity="rare"] { color: var(--rare-purple); }
.relic-tooltip-rarity[data-rarity="boss"] { color: var(--hp-red); }

.relic-tooltip-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* Flipped: open upward instead of downward */
.relic-tooltip.tooltip-flip-y {
    top: auto;
    bottom: calc(100% + 8px);
}

/* Horizontal clamping — shift tooltip when near screen edge */
.relic-tooltip.tooltip-shift-left {
    left: auto;
    right: -8px;
    transform: none;
}
.relic-tooltip.tooltip-shift-right {
    left: -8px;
    transform: none;
}

/* ===== Relic Reward Overlay ===== */
.relic-reward-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.relic-reward-overlay.visible {
    opacity: 1;
}

.relic-reward-overlay.closing {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.relic-reward-panel {
    background: var(--bg-light);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 32px 40px;
    max-width: 700px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

.relic-reward-overlay.visible .relic-reward-panel {
    transform: translateY(0);
}

.relic-reward-header {
    margin-bottom: 24px;
}

.relic-reward-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
}

.relic-reward-subtitle {
    font-size: 14px;
    color: var(--text-dim);
}

.relic-reward-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.relic-reward-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    width: 180px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: relicCardAppear 0.4s ease forwards;
}

@keyframes relicCardAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.relic-reward-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-glow);
    box-shadow: 0 8px 24px rgba(196, 154, 60, 0.3);
}

.relic-reward-card[data-rarity="common"]:hover { border-color: #aaa; }
.relic-reward-card[data-rarity="uncommon"]:hover { border-color: var(--heal-green); }
.relic-reward-card[data-rarity="rare"]:hover { border-color: var(--rare-purple); }
.relic-reward-card[data-rarity="boss"]:hover { border-color: var(--hp-red); }

.relic-reward-card.relic-reward-chosen {
    border-color: var(--legendary-gold);
    box-shadow: 0 0 30px rgba(241, 196, 15, 0.4);
    transform: scale(1.05);
}

.relic-reward-rarity {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.relic-reward-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-mid);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.relic-reward-icon {
    font-size: 32px;
    line-height: 1;
}

.relic-reward-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.relic-reward-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.4;
}

.relic-reward-skip-btn {
    padding: 10px 32px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.relic-reward-skip-btn:hover {
    color: var(--text);
    border-color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
}

/* ===== Reroll Prompt Panel ===== */
.reroll-panel {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: linear-gradient(180deg, rgba(30, 25, 45, 0.97), rgba(15, 12, 25, 0.98));
    border: 1px solid rgba(162, 155, 254, 0.4);
    border-radius: 8px;
    padding: 14px 20px 12px;
    min-width: 200px;
    text-align: center;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(108, 92, 231, 0.15);
    animation: rerollPanelIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}

.reroll-panel-closing {
    opacity: 0;
    transform: translateX(-50%) scale(0.9) translateY(8px);
    transition: all 0.2s ease;
}

@keyframes rerollPanelIn {
    0% { opacity: 0; transform: translateX(-50%) scale(0.85) translateY(10px); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

.reroll-panel-header {
    margin-bottom: 8px;
}

.reroll-panel-relic {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-glow);
    background: rgba(108, 92, 231, 0.12);
    border: 1px solid rgba(108, 92, 231, 0.25);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

.reroll-panel-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 6px;
}

.reroll-panel-face-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.reroll-panel-face-name {
    font-size: 16px;
    font-weight: 800;
    text-shadow: 0 0 8px currentColor;
}

.reroll-panel-question {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Timer bar */
.reroll-panel-timer {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}

.reroll-panel-timer-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-glow), var(--accent));
    border-radius: 2px;
}

/* Buttons */
.reroll-panel-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.reroll-btn-accept,
.reroll-btn-decline {
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reroll-btn-accept {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), rgba(80, 65, 180, 0.9));
    border-color: var(--accent-glow);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
    animation: rerollAcceptPulse 1.5s ease-in-out infinite;
}

.reroll-btn-accept:hover {
    background: linear-gradient(135deg, var(--accent-glow), var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.5);
}

.reroll-btn-decline {
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border);
}

.reroll-btn-decline:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-dim);
}

@keyframes rerollAcceptPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3); }
    50% { box-shadow: 0 2px 16px rgba(108, 92, 231, 0.6); }
}

/* ===== Quantum choice panel (Schrödinger's Die / Many-Worlds Engine) ===== */
.quantum-choice-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.quantum-choice-options {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

.quantum-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 80px;
}

.quantum-choice-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(108, 92, 231, 0.4);
}

.quantum-choice-icon {
    font-size: 22px;
}

.quantum-choice-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Die cost modified indicator ===== */
.die-cost.die-cost-modified {
    background: radial-gradient(circle at 40% 35%, #55efc4, var(--heal-green));
    animation: costModifiedPulse 1.5s ease-in-out infinite;
}

@keyframes costModifiedPulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 2px 12px rgba(46, 204, 113, 0.5); }
}

/* ===== Floating number for relic boost ===== */
.floating-number.relic-boost {
    color: var(--legendary-gold);
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.6);
}

/* =======================================
   Events Screen
   ======================================= */

/* Full-screen overlay */
.event-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(1px);
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
}

.event-overlay.visible {
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
}

.event-overlay.closing {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    pointer-events: none;
}

.event-overlay.closing .event-panel {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

/* Event panel */
.event-panel {
    background: linear-gradient(180deg, rgba(22, 18, 38, 0.98) 0%, var(--bg-light) 10%, var(--bg-light) 90%, rgba(22, 18, 38, 0.98) 100%);
    border: 1px solid rgba(155, 89, 182, 0.15);
    border-radius: 12px;
    padding: 36px 44px;
    min-width: 520px;
    max-width: 860px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 80px rgba(155, 89, 182, 0.1),
        inset 0 1px 0 rgba(155, 89, 182, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.event-overlay.visible .event-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Event panel scrollbar */
.event-panel::-webkit-scrollbar,
.event-dice-selection::-webkit-scrollbar {
    width: 6px;
}

.event-panel::-webkit-scrollbar-track,
.event-dice-selection::-webkit-scrollbar-track {
    background: transparent;
}

.event-panel::-webkit-scrollbar-thumb,
.event-dice-selection::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}

.event-panel::-webkit-scrollbar-thumb:hover,
.event-dice-selection::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

/* Event header */
.event-header {
    text-align: center;
    margin-bottom: 28px;
}

.event-icon {
    font-size: 56px;
    display: block;
    margin-bottom: 14px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    animation: eventIconFloat 3s ease-in-out infinite;
}

@keyframes eventIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.event-title {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-glow), #c080f0, var(--rare-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 12px rgba(155, 89, 182, 0.2));
}

.event-desc {
    font-size: 14px;
    color: rgba(200, 190, 220, 0.65);
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
}

/* Event instruction text */
.event-instruction {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-glow);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

/* Event dice selection */
.event-dice-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 4px 0;
    margin-bottom: 16px;
}

/* Event die card (clickable for selection) */
.event-die-selectable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-die-selectable:hover {
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(196, 154, 60, 0.2);
    transform: translateX(4px);
}

.event-die-disabled {
    opacity: 0.35;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Decline / walk away button */
.event-decline-btn {
    display: block;
    margin: 12px auto 0;
    padding: 10px 40px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(136, 136, 170, 0.5);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-family: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-decline-btn:hover {
    color: var(--text-dim);
    border-color: rgba(196, 154, 60, 0.2);
    background: rgba(196, 154, 60, 0.04);
}

/* Continue button */
.event-continue-btn {
    display: block;
    margin: 16px auto 0;
    padding: 12px 44px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text);
    font-family: inherit;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-continue-btn:hover {
    background: var(--accent-glow);
    box-shadow: 0 0 20px rgba(196, 154, 60, 0.4);
    transform: translateY(-1px);
}

.event-continue-btn:active {
    transform: translateY(1px);
}

/* ===== Event Result Feedback ===== */
.event-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    animation: rewardSlideIn 0.4s ease-out;
}

.event-result-icon {
    font-size: 64px;
    line-height: 1;
}

.event-result-success {
    animation: eventResultSuccess 1s ease-in-out infinite;
}

@keyframes eventResultSuccess {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.3); }
}

.event-result-loss {
    animation: eventResultLoss 0.6s ease-out;
}

@keyframes eventResultLoss {
    0% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.event-result-neutral {
    animation: eventResultNeutral 0.5s ease-out;
}

@keyframes eventResultNeutral {
    0% { transform: rotate(-10deg) scale(0.8); }
    50% { transform: rotate(3deg) scale(1.05); }
    100% { transform: rotate(0) scale(1); }
}

.event-result-title {
    font-size: 30px;
    font-weight: 900;
    color: var(--text);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.event-result-text {
    font-size: 15px;
    color: rgba(200, 190, 220, 0.6);
    text-align: center;
    line-height: 1.6;
}

.event-result-text strong {
    color: var(--text);
}

/* ===== Shady Dealer Offer ===== */
.event-dealer-offer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.event-dealer-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px 18px;
    width: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: rewardCardIn 0.5s ease-out both;
}

.event-dealer-card:nth-child(3) {
    animation-delay: 0.15s;
}

.event-dealer-good {
    border-color: rgba(46, 204, 113, 0.25);
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.04) 0%, var(--surface) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 16px rgba(46, 204, 113, 0.08);
}

.event-dealer-bad {
    border-color: rgba(155, 89, 182, 0.25);
    background: linear-gradient(180deg, rgba(155, 89, 182, 0.04) 0%, var(--surface) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 16px rgba(155, 89, 182, 0.08);
}

.event-dealer-plus {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-dim);
    opacity: 0;
    animation: rewardCardIn 0.3s ease-out 0.1s both;
}

.event-dealer-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.event-dealer-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.event-dealer-desc {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.4;
}

.event-dealer-confirm-text {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 12px;
}

.event-dealer-confirm-text strong {
    color: var(--text);
}

/* ===== Event Choice Cards (Healing Spring) ===== */
.event-choices {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.event-choice-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 28px 24px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    opacity: 0;
    animation: rewardCardIn 0.5s ease-out both;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.event-choice-card:nth-child(2) {
    animation-delay: 0.1s;
}

.event-choice-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.event-choice-card:active {
    transform: translateY(-3px) scale(0.98);
}

.event-choice-heal {
    border-color: rgba(231, 76, 60, 0.2);
    background: linear-gradient(180deg, rgba(231, 76, 60, 0.03) 0%, var(--surface) 100%);
}

.event-choice-heal:hover {
    border-color: var(--hp-red);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(231, 76, 60, 0.2);
}

.event-choice-bathe {
    border-color: rgba(52, 152, 219, 0.2);
    background: linear-gradient(180deg, rgba(52, 152, 219, 0.03) 0%, var(--surface) 100%);
}

.event-choice-bathe:hover {
    border-color: var(--block-blue);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(52, 152, 219, 0.2);
}

.event-choice-icon {
    font-size: 48px;
    line-height: 1;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 35%, rgba(196, 154, 60, 0.12), rgba(196, 154, 60, 0.03));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(196, 154, 60, 0.08);
}

.event-choice-heal .event-choice-icon {
    background: radial-gradient(circle at 40% 35%, rgba(231, 76, 60, 0.15), rgba(231, 76, 60, 0.04));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(231, 76, 60, 0.12);
}

.event-choice-bathe .event-choice-icon {
    background: radial-gradient(circle at 40% 35%, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.04));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    border-color: rgba(52, 152, 219, 0.12);
}

.event-choice-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-choice-desc {
    font-size: 13px;
    color: var(--text-dim);
    text-align: center;
    line-height: 1.5;
}

.event-choice-desc strong {
    color: var(--text);
}

.event-choice-current {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

/* ===== Gold Cache Event ===== */
.event-gold-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    margin: 16px 0;
    background: rgba(241, 196, 15, 0.1);
    border: 1px solid rgba(241, 196, 15, 0.3);
    border-radius: var(--radius-md);
    animation: rewardSlideIn 0.5s ease-out both;
    animation-delay: 0.2s;
}

.event-gold-icon {
    font-size: 28px;
}

.event-gold-amount {
    font-size: 26px;
    font-weight: 800;
    color: var(--gold);
}

/* ===== Wishing Well Animation ===== */
.event-well-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 0;
}

.event-well-splash {
    font-size: 72px;
    animation: wellSplash 1.5s ease-in-out infinite;
}

@keyframes wellSplash {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(20px) scale(0.9); }
    50% { transform: translateY(-10px) scale(1.1); }
    70% { transform: translateY(5px) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}

.event-well-waiting {
    font-size: 18px;
    color: var(--text-dim);
    font-style: italic;
    animation: wellWaiting 1s ease-in-out infinite alternate;
}

@keyframes wellWaiting {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Wishing Well success glow */
.event-well-success .event-result-icon {
    text-shadow: 0 0 30px rgba(46, 204, 113, 0.5);
}

.event-well-success {
    animation: wellSuccessGlow 0.8s ease-out;
}

@keyframes wellSuccessGlow {
    0% {
        background: rgba(46, 204, 113, 0.3);
        border-radius: 4px;
    }
    100% {
        background: transparent;
    }
}

/* Wishing Well fail flash */
.event-well-fail .event-result-icon {
    text-shadow: 0 0 30px rgba(231, 76, 60, 0.5);
}

.event-well-fail {
    animation: wellFailFlash 0.6s ease-out;
}

@keyframes wellFailFlash {
    0% {
        background: rgba(231, 76, 60, 0.3);
        border-radius: 4px;
    }
    100% {
        background: transparent;
    }
}

/* ===== Event Fusion Footer ===== */
.event-fusion-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.event-fuse-btn {
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.event-fuse-btn:hover:not(:disabled) {
    background: var(--accent-glow);
    box-shadow: 0 0 20px rgba(196, 154, 60, 0.4);
    transform: translateY(-1px);
}

.event-fuse-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Blank count badge in Healing Spring */
.event-blank-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(52, 73, 94, 0.4);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

/* ===== Combat Log ===== */
#combat-log {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    pointer-events: none;
}

#log-toggle {
    pointer-events: auto;
    width: 32px;
    height: 32px;
    margin: 12px 0 0 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#log-toggle:hover {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(196, 154, 60, 0.1);
}

#combat-log.open #log-toggle {
    border-color: var(--accent);
    color: var(--accent-glow);
}

#log-panel {
    pointer-events: auto;
    width: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--bg-light);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: width 0.25s ease, opacity 0.25s ease;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4), inset 1px 0 0 rgba(255, 255, 255, 0.04);
}

#combat-log.open #log-panel {
    width: 250px;
    opacity: 1;
}

#log-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-glow);
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

#log-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Scrollbar styling for log */
#log-list::-webkit-scrollbar {
    width: 5px;
}

#log-list::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

#log-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}

#log-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

.log-entry {
    font-size: 12px;
    line-height: 1.4;
    font-family: 'Segoe UI', system-ui, sans-serif;
    word-break: break-word;
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 1px 0;
    animation: logEntryIn 0.2s ease-out;
}
.log-entry strong {
    font-weight: 800;
}
@keyframes logEntryIn {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Type indicator dot */
.log-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    align-self: flex-start;
}

/* Turn separator */
.log-turn-separator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 3px;
    padding: 0;
}
.log-turn-separator::before,
.log-turn-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 154, 60, 0.2), transparent);
}
.log-turn-label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(196, 154, 60, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* ===== Keyboard Hints ===== */
#keyboard-hints {
    position: absolute;
    bottom: 6px;
    right: 12px;
    font-size: 10px;
    color: var(--text-dim);
    opacity: 0.55;
    pointer-events: none;
    letter-spacing: 0.3px;
    z-index: 5;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
}

/* ===== Act Transition Screen ===== */
.act-transition-overlay.visible {
    background: rgba(5, 5, 15, 0.96);
}

.act-transition-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    max-width: 500px;
    width: 90%;
    padding: 40px 30px;
}

.screen-overlay.visible .act-transition-content {
    opacity: 1;
    transform: translateY(0);
}

.screen-overlay.closing .act-transition-content {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.act-transition-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 200, 50, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: actGlowPulse 3s ease-in-out infinite;
}

@keyframes actGlowPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.act-transition-badge {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #d4a843;
    border: 1px solid rgba(212, 168, 67, 0.4);
    padding: 6px 18px;
    border-radius: 4px;
    margin-bottom: 16px;
    animation: badgeFadeIn 0.8s ease 0.4s both;
}

@keyframes badgeFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.act-transition-title {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffd700, #d4a843, #ffd700, #fff3c4);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGradient 4s ease-in-out infinite, titleFadeIn 1s ease 0.6s both;
    margin: 0 0 12px 0;
}

@keyframes titleFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.act-transition-divider {
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 67, 0.5), transparent);
    margin: 16px 0;
}

.act-transition-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    margin: 8px 0;
    animation: statsFadeIn 0.8s ease 0.8s both;
}

@keyframes statsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.at-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

.at-stat-label {
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.at-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #e2e2e2;
}

.act-transition-bonuses {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
    animation: statsFadeIn 0.8s ease 1s both;
}

.at-bonus {
    font-size: 15px;
    color: #5cdb5c;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.act-transition-next {
    font-size: 24px;
    font-weight: 700;
    color: #e4be6a;
    margin: 16px 0 8px;
    letter-spacing: 2px;
    animation: statsFadeIn 0.8s ease 1.2s both;
}

.act-transition-btn {
    margin-top: 20px;
    padding: 14px 48px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: linear-gradient(135deg, #d4a843, #b8860b);
    color: #1a1a2e;
    box-shadow: 0 4px 20px rgba(212, 168, 67, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: statsFadeIn 0.8s ease 1.4s both;
}

.act-transition-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(212, 168, 67, 0.45);
}

.act-transition-btn:active {
    transform: translateY(0);
}

/* ===== Victory Screen ===== */
.victory-overlay.visible {
    background: rgba(5, 5, 15, 0.96);
}

.victory-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    max-width: 550px;
    width: 90%;
    padding: 40px 30px;
    max-height: 90vh;
    overflow-y: auto;
}

.screen-overlay.visible .victory-content {
    opacity: 1;
    transform: translateY(0);
}

.screen-overlay.closing .victory-content {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.victory-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.05) 40%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: victoryGlowPulse 2.5s ease-in-out infinite;
}

@keyframes victoryGlowPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

.victory-title {
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #ffd700, #ff8c00, #ffd700, #fff3c4);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGradient 4s ease-in-out infinite, titleFadeIn 1s ease 0.3s both;
    margin: 0 0 4px 0;
}

.victory-subtitle {
    font-size: 20px;
    color: #d4a843;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0 0 16px 0;
    animation: statsFadeIn 0.8s ease 0.6s both;
}

.victory-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 480px;
    margin: 8px 0 16px;
    animation: statsFadeIn 0.8s ease 0.9s both;
}

.victory-btn {
    margin-top: 24px;
    padding: 16px 56px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1a2e;
    box-shadow: 0 4px 24px rgba(255, 215, 0, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: statsFadeIn 0.8s ease 1.4s both;
}

.victory-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 32px rgba(255, 215, 0, 0.5);
}

.victory-btn:active {
    transform: translateY(0);
}

/* ===== Die size badge in shop cards ===== */
.shop-die-size-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
}

.shop-die-size-badge.die-d4  { background: rgba(46, 204, 113, 0.15); border-color: rgba(46, 204, 113, 0.3); color: #2ecc71; }
.shop-die-size-badge.die-d6  { background: rgba(52, 152, 219, 0.15); border-color: rgba(52, 152, 219, 0.3); color: #3498db; }
.shop-die-size-badge.die-d8  { background: rgba(155, 89, 182, 0.15); border-color: rgba(155, 89, 182, 0.3); color: #9b59b6; }
.shop-die-size-badge.die-d12 { background: rgba(241, 196, 15, 0.15); border-color: rgba(241, 196, 15, 0.3); color: #f1c40f; }
.shop-die-size-badge.die-d20 { background: rgba(231, 76, 60, 0.15);  border-color: rgba(231, 76, 60, 0.3);  color: #e74c3c; }

.shop-die-cost-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ===== Reward die card (whole die offered as reward) ===== */
.reward-die-reward-card {
    border: 2px solid rgba(241, 196, 15, 0.3) !important;
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.05), rgba(155, 89, 182, 0.05)) !important;
    animation: rewardCardIn 0.4s ease-out both, rewardDiePulse 2.5s ease-in-out 1s infinite !important;
}
@keyframes rewardDiePulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 10px rgba(241, 196, 15, 0.08); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 22px rgba(241, 196, 15, 0.2); }
}

.reward-die-reward-card:hover {
    border-color: rgba(241, 196, 15, 0.6) !important;
    box-shadow: 0 0 30px rgba(241, 196, 15, 0.25) !important;
    animation: rewardCardIn 0.4s ease-out both !important;
}

.reward-die-reward-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 8px 0;
}

.reward-die-reward-size {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
}

.reward-die-reward-preview.die-d4  .reward-die-reward-size { color: #2ecc71; }
.reward-die-reward-preview.die-d6  .reward-die-reward-size { color: #3498db; }
.reward-die-reward-preview.die-d8  .reward-die-reward-size { color: #9b59b6; }
.reward-die-reward-preview.die-d12 .reward-die-reward-size { color: #f1c40f; }
.reward-die-reward-preview.die-d20 .reward-die-reward-size { color: #e74c3c; }

.reward-die-reward-faces {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.reward-die-reward-faces .shop-die-face-pip {
    width: 26px;
    height: 26px;
    font-size: 13px;
}

/* =======================================
   Visual Polish: HP Bar Improvements
   ======================================= */

/* Damage preview overlay on player HP bar */
#hp-damage-preview {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(231, 76, 60, 0.35);
    border-radius: var(--radius-pill);
    pointer-events: none;
    display: none;
    transition: width 0.3s ease, left 0.3s ease;
    animation: dmgPreviewPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.4);
}

@keyframes dmgPreviewPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* (old #enemy-hp-tick-preview moved to .enemy-hp-tick-preview in multi-enemy section) */

/* =======================================
   Visual Polish: Energy Orb Animation
   ======================================= */

#energy-orb {
    transition: box-shadow 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

/* Full energy: powerful radiating glow */
#energy-orb.energy-full {
    animation: energyFullPulse 1.5s ease-in-out infinite, energyRadiate 2s ease-in-out infinite;
    border-color: rgba(255, 230, 120, 0.6);
}

@keyframes energyFullPulse {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(243, 156, 18, 0.5),
            0 0 4px rgba(255, 220, 100, 0.6),
            inset 0 -3px 6px rgba(0,0,0,0.2);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 25px rgba(243, 156, 18, 0.8),
            0 0 45px rgba(243, 156, 18, 0.3),
            0 0 8px rgba(255, 220, 100, 0.7),
            inset 0 -3px 6px rgba(0,0,0,0.2);
        transform: scale(1.05);
    }
}

@keyframes energyRadiate {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

/* Empty energy: dimmed */
#energy-orb.energy-empty {
    opacity: 0.45;
    box-shadow:
        0 0 5px rgba(243, 156, 18, 0.15),
        inset 0 -3px 6px rgba(0,0,0,0.3);
    background: radial-gradient(circle at 40% 35%, #b89a6e, #8b6914, #6b4e0a);
    animation: none;
}

/* Flash when energy is spent */
#energy-orb.energy-spent-flash {
    animation: energySpentFlash 0.4s ease-out;
}

@keyframes energySpentFlash {
    0% { transform: scale(1.15); box-shadow: 0 0 30px rgba(243, 156, 18, 0.8); }
    100% { transform: scale(1); box-shadow: 0 0 15px rgba(243, 156, 18, 0.4); }
}

#energy-orb.energy-refill-burst {
    animation: energyRefillBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes energyRefillBurst {
    0% { transform: scale(0.85); filter: brightness(0.7); box-shadow: 0 0 5px rgba(243, 156, 18, 0.2); }
    40% { transform: scale(1.2); filter: brightness(1.5); box-shadow: 0 0 40px rgba(243, 156, 18, 0.9), 0 0 80px rgba(243, 156, 18, 0.3); }
    100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 15px rgba(243, 156, 18, 0.4); }
}

/* =======================================
   Visual Polish: Die Hover Preview
   ======================================= */

.die-hover-ghost {
    display: none;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    background: rgba(196, 154, 60, 0.08);
    border: 2px dashed rgba(196, 154, 60, 0.25);
    color: rgba(228, 190, 106, 0.4);
    font-size: 16px;
    font-weight: 700;
    pointer-events: none;
    animation: ghostPulse 1.5s ease-in-out infinite;
}

@keyframes ghostPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.04); }
}

/* =======================================
   Visual Polish: End Turn Button Pulse
   ======================================= */

#end-turn-btn.end-turn-suggest {
    animation: endTurnSuggestPulse 1.2s ease-in-out infinite;
    border-color: var(--accent-glow);
}

@keyframes endTurnSuggestPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(196, 154, 60, 0.4), 0 0 4px rgba(196, 154, 60, 0.2);
        border-color: var(--accent);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(196, 154, 60, 0.7), 0 0 60px rgba(196, 154, 60, 0.25);
        border-color: #f0d48a;
        background: linear-gradient(180deg, rgba(196, 154, 60, 0.5) 0%, rgba(160, 120, 40, 0.35) 100%);
        transform: scale(1.04);
    }
}

/* =======================================
   Visual Polish: Smooth Transitions
   ======================================= */

/* HP bars already have transition on width. Add for stat bubbles too. */
.stat-bubble {
    transition: opacity 0.3s ease, transform 0.3s ease;
    animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes statusBubbleIn {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* =======================================
   Status Effect Stacking Visuals
   ======================================= */

.status-stack-count {
    display: inline-block;
    transition: transform 0.15s ease;
}

@keyframes stackCountBump {
    0% { transform: scale(1); }
    30% { transform: scale(1.5); }
    60% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.stack-count-bump {
    animation: stackCountBump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes statusStackBump {
    0% { transform: scale(1); }
    25% { transform: scale(1.15); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.status-stack-bump {
    animation: statusStackBump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Intensity-based pulsing glow — scales with stack tier */
@keyframes statusPulseMid {
    0%, 100% { box-shadow: 0 2px 10px var(--status-glow-color, rgba(52, 152, 219, 0.3)), inset 0 1px 0 rgba(255, 255, 255, 0.08); filter: brightness(1); }
    50% { box-shadow: 0 2px 18px var(--status-glow-color, rgba(52, 152, 219, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.12); filter: brightness(1.1); }
}

@keyframes statusPulseHigh {
    0%, 100% { box-shadow: 0 2px 12px var(--status-glow-color, rgba(52, 152, 219, 0.4)), inset 0 1px 0 rgba(255, 255, 255, 0.08); filter: brightness(1); }
    50% { box-shadow: 0 4px 24px var(--status-glow-color, rgba(52, 152, 219, 0.65)), inset 0 1px 0 rgba(255, 255, 255, 0.15); filter: brightness(1.2); }
}

@keyframes statusPulseExtreme {
    0%, 100% { box-shadow: 0 2px 14px var(--status-glow-color, rgba(52, 152, 219, 0.5)), inset 0 1px 0 rgba(255, 255, 255, 0.08); filter: brightness(1); }
    50% { box-shadow: 0 6px 30px var(--status-glow-color, rgba(52, 152, 219, 0.8)), inset 0 1px 0 rgba(255, 255, 255, 0.2); filter: brightness(1.3); }
}

/* Poison: green glow intensifying */
.stat-bubble[data-status-type="poison"] { --status-glow-color: rgba(39, 174, 96, 0.4); }
.stat-bubble[data-status-type="poison"][data-intensity="mid"] { --status-glow-color: rgba(39, 174, 96, 0.55); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseMid 2s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="poison"][data-intensity="high"] { --status-glow-color: rgba(39, 174, 96, 0.7); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseHigh 1.5s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="poison"][data-intensity="extreme"] { --status-glow-color: rgba(39, 174, 96, 0.85); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseExtreme 1s ease-in-out 0.35s infinite; }

/* Burn: orange/red glow intensifying */
.stat-bubble[data-status-type="burn"] { --status-glow-color: rgba(255, 102, 0, 0.4); }
.stat-bubble[data-status-type="burn"][data-intensity="mid"] { --status-glow-color: rgba(255, 102, 0, 0.55); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseMid 2s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="burn"][data-intensity="high"] { --status-glow-color: rgba(255, 80, 0, 0.7); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseHigh 1.5s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="burn"][data-intensity="extreme"] { --status-glow-color: rgba(255, 60, 0, 0.85); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseExtreme 1s ease-in-out 0.35s infinite; }

/* Weak: purple glow intensifying */
.stat-bubble[data-status-type="weak"] { --status-glow-color: rgba(186, 85, 211, 0.4); }
.stat-bubble[data-status-type="weak"][data-intensity="mid"] { --status-glow-color: rgba(186, 85, 211, 0.55); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseMid 2s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="weak"][data-intensity="high"] { --status-glow-color: rgba(186, 85, 211, 0.7); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseHigh 1.5s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="weak"][data-intensity="extreme"] { --status-glow-color: rgba(186, 85, 211, 0.85); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseExtreme 1s ease-in-out 0.35s infinite; }

/* Pain: dark purple glow intensifying */
.stat-bubble[data-status-type="pain"] { --status-glow-color: rgba(160, 50, 220, 0.35); }
.stat-bubble[data-status-type="pain"][data-intensity="mid"] { --status-glow-color: rgba(160, 50, 220, 0.5); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseMid 2s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="pain"][data-intensity="high"] { --status-glow-color: rgba(160, 50, 220, 0.65); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseHigh 1.5s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="pain"][data-intensity="extreme"] { --status-glow-color: rgba(160, 50, 220, 0.8); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseExtreme 1s ease-in-out 0.35s infinite; }

/* Retain: blue glow */
.stat-bubble[data-status-type="retain"] { --status-glow-color: rgba(52, 152, 219, 0.4); }
.stat-bubble[data-status-type="retain"][data-intensity="mid"] { --status-glow-color: rgba(52, 152, 219, 0.55); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseMid 2.5s ease-in-out 0.35s infinite; }
.stat-bubble[data-status-type="retain"][data-intensity="high"] { --status-glow-color: rgba(52, 152, 219, 0.7); animation: statusBubbleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), statusPulseHigh 2s ease-in-out 0.35s infinite; }

/* Bump overrides intensity pulse */
.stat-bubble.status-stack-bump {
    animation: statusStackBump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Energy value number transition */
#energy-value {
    transition: transform 0.2s ease;
}

/* Enemy HP bar smooth */
.enemy-hp-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Player HP bar smooth */
#hp-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Block value transition */
#player-block-value,
.enemy-block-value {
    transition: transform 0.2s ease;
}

/* ===================================================================
   META-PROGRESSION: Forge Points, Unlock Screen, Loadout Selection
   =================================================================== */

/* --- Title Screen: FP Display (legacy, now in meta buttons) --- */

/* --- FP Earned Section (Game Over & Victory) --- */
.fp-earned-section {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.08) 0%, rgba(243, 196, 15, 0.04) 100%);
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    margin: 16px auto;
    max-width: 340px;
    animation: fpEarnedAppear 0.6s ease-out;
}

.fp-earned-section.victory-fp {
    border-color: rgba(243, 196, 15, 0.5);
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.12) 0%, rgba(243, 196, 15, 0.06) 100%);
}

.fp-earned-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fp-earned-icon {
    font-size: 1.5rem;
    animation: fpSparkle 1.5s ease-in-out infinite;
}

.fp-earned-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--legendary-gold);
    text-shadow: 0 0 16px rgba(243, 156, 18, 0.5);
}

.fp-earned-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-earned-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-dim);
    padding: 2px 0;
}

.fp-earned-amount {
    color: var(--legendary-gold);
    font-weight: 600;
}

@keyframes fpEarnedAppear {
    0% { opacity: 0; transform: translateY(16px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fpSparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* --- Unlock Screen Overlay --- */
.unlock-overlay {
    z-index: 3100;
}

.unlock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 32px;
    background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(243, 156, 18, 0.1), 0 20px 60px rgba(0,0,0,0.5);
}

/* Scrollbar styling for unlock content */
.unlock-content::-webkit-scrollbar {
    width: 6px;
}
.unlock-content::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-radius: var(--radius-pill);
}
.unlock-content::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}
.unlock-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

.unlock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
}

.unlock-title {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(135deg, var(--legendary-gold), #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.unlock-fp-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(243, 156, 18, 0.1);
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: 4px;
    padding: 8px 18px;
}

.unlock-fp-icon {
    font-size: 1.2rem;
}

.unlock-fp-balance {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--legendary-gold);
}

/* FP Earned Summary in Unlock Screen */
.unlock-fp-earned {
    width: 100%;
    background: rgba(243, 156, 18, 0.06);
    border: 1px solid rgba(243, 156, 18, 0.2);
    border-radius: var(--radius-md);
    padding: 16px 24px;
    animation: fpEarnedAppear 0.6s ease-out;
}

.unlock-fp-earned-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--legendary-gold);
    margin-bottom: 10px;
    text-align: center;
}

.unlock-fp-earned-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unlock-fp-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.unlock-fp-line-amount {
    color: var(--legendary-gold);
    font-weight: 600;
}

.unlock-fp-earned-total {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(243, 156, 18, 0.2);
    font-weight: 700;
    color: var(--text);
}

.unlock-fp-total-value {
    color: var(--legendary-gold);
    font-size: 1.1rem;
}

/* Forge Roll Section */
.forge-roll-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 0 20px;
    position: relative;
}

/* Decorative corner flourishes on the roll section */
.forge-roll-section::before,
.forge-roll-section::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: rgba(243, 156, 18, 0.15);
    border-style: solid;
    pointer-events: none;
}
.forge-roll-section::before {
    top: 8px;
    left: 0;
    border-width: 1px 0 0 1px;
}
.forge-roll-section::after {
    top: 8px;
    right: 0;
    border-width: 1px 1px 0 0;
}

.forge-roll-display {
    width: 220px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Outer ring decoration around the roll window */
.forge-roll-display::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(243, 156, 18, 0.08);
    pointer-events: none;
    transition: border-color 0.4s ease;
}

.forge-roll-window {
    width: 190px;
    height: 170px;
    background: linear-gradient(180deg, var(--surface) 0%, rgba(13, 19, 32, 0.9) 100%);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    transition: all 0.3s ease, border-color 0.2s ease;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.4),
        0 4px 24px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

/* Inner glow layer */
.forge-roll-window::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 20px rgba(243, 156, 18, 0);
    transition: box-shadow 0.3s ease;
    pointer-events: none;
}

/* Scanning light line effect during spin */
.forge-roll-window::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -10%;
    width: 120%;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, rgba(243, 156, 18, 0.06) 50%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.forge-spinning {
    border-color: var(--legendary-gold);
    background: linear-gradient(180deg, rgba(26, 36, 54, 0.95) 0%, rgba(13, 19, 32, 0.95) 100%);
}

.forge-spinning::before {
    box-shadow: inset 0 0 30px rgba(243, 156, 18, 0.15);
    animation: forgeGlow 0.5s ease-in-out infinite alternate;
}

.forge-spinning::after {
    opacity: 1;
    animation: forgeScanline 0.6s linear infinite;
}

.forge-spinning ~ .forge-roll-remaining {
    opacity: 0;
    transform: translateY(-4px);
}

/* Outer ring pulses during spin */
.forge-roll-display:has(.forge-spinning)::before {
    border-color: rgba(243, 156, 18, 0.2);
    animation: forgeRingPulse 1s ease-in-out infinite;
}

.forge-winner {
    border-color: var(--legendary-gold);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(243, 156, 18, 0.3),
        0 0 100px rgba(243, 156, 18, 0.1),
        0 4px 24px rgba(0, 0, 0, 0.4);
}

.forge-winner::before {
    box-shadow: inset 0 0 50px rgba(243, 156, 18, 0.25);
}

.forge-winner::after {
    opacity: 0;
}

/* Outer ring glows on winner */
.forge-roll-display:has(.forge-winner)::before {
    border-color: rgba(243, 156, 18, 0.3);
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.1);
}

.forge-roll-icon {
    font-size: 3.2rem;
    line-height: 1;
    color: var(--text-dim);
    transition: color 0.15s, transform 0.15s, filter 0.15s;
}

.forge-spinning .forge-roll-icon {
    color: var(--legendary-gold);
    animation: forgeIconShuffle 0.08s steps(1) infinite;
}

.forge-winner-icon {
    color: var(--legendary-gold) !important;
    filter: drop-shadow(0 0 12px rgba(243, 156, 18, 0.6));
    animation: winnerPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.forge-roll-label {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-weight: 600;
    transition: color 0.15s;
    min-height: 1.2em;
}

.forge-spinning .forge-roll-label {
    color: var(--text);
}

.forge-winner .forge-roll-label {
    color: var(--legendary-gold);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Roll button */
.forge-roll-btn {
    padding: 14px 44px;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--legendary-gold) 0%, #d4941a 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Shimmer sweep on button */
.forge-roll-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: none;
    pointer-events: none;
}

.forge-roll-btn:not(:disabled)::after {
    animation: btnShimmer 3s ease-in-out infinite;
}

.forge-roll-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(243, 156, 18, 0.4);
    background: linear-gradient(135deg, #f0b632 0%, #e6a817 100%);
}

.forge-roll-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.25);
}

.forge-roll-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

.forge-roll-hint {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-style: italic;
    animation: fadeInUp 0.3s ease-out;
}

.forge-roll-remaining {
    font-size: 0.8rem;
    color: var(--text-dim);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Forge Roll Result */
.forge-roll-result {
    width: 100%;
    max-width: 420px;
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.forge-result-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.forge-result-card {
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.1) 0%, rgba(243, 196, 15, 0.03) 100%);
    border: 2px solid var(--legendary-gold);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(243, 156, 18, 0.08);
    animation: resultAppear 0.5s ease-out;
}

/* Radial highlight behind the result */
.forge-result-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(243, 156, 18, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.forge-result-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--legendary-gold);
    filter: drop-shadow(0 0 8px rgba(243, 156, 18, 0.4));
    animation: resultIconFloat 2s ease-in-out infinite;
}

.forge-result-category {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 8px;
    position: relative;
}

.forge-result-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    position: relative;
}

.forge-result-desc {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 14px;
    position: relative;
}

.forge-result-new {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--legendary-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 4px 16px;
    border: 1px solid rgba(243, 156, 18, 0.3);
    border-radius: var(--radius-pill);
    background: rgba(243, 156, 18, 0.08);
    animation: newUnlockPulse 1.5s ease-in-out infinite;
    position: relative;
}

/* Forge Collection */
.forge-collection {
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 20px;
    animation: fadeInUp 0.4s ease-out;
}

.forge-collection-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.forge-collection-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.forge-collection-count {
    color: var(--legendary-gold);
    font-size: 0.9rem;
}

.forge-collection-category {
    margin-bottom: 14px;
}

.forge-collection-cat-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    padding-left: 2px;
}

.forge-collection-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.forge-collection-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: all 0.3s ease, transform 0.2s ease;
}

.forge-item-icon {
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.forge-item-name {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forge-item-owned {
    border-color: rgba(243, 156, 18, 0.25);
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.06) 0%, rgba(243, 156, 18, 0.02) 100%);
}

.forge-item-owned:hover {
    border-color: rgba(243, 156, 18, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.forge-item-owned .forge-item-icon {
    color: var(--legendary-gold);
    filter: drop-shadow(0 0 4px rgba(243, 156, 18, 0.3));
}

.forge-item-owned .forge-item-name {
    color: var(--text);
}

.forge-item-locked {
    opacity: 0.35;
}

.forge-item-locked .forge-item-icon {
    color: var(--text-dim);
}

.forge-item-locked .forge-item-name {
    color: var(--text-dim);
    font-style: italic;
}

/* Just-unlocked collection item highlight */
.forge-item-just-unlocked {
    animation: itemUnlockFlash 0.8s ease-out;
    border-color: var(--legendary-gold);
}

/* Forge Animations */
@keyframes forgeGlow {
    0% { box-shadow: inset 0 0 20px rgba(243, 156, 18, 0.1); }
    100% { box-shadow: inset 0 0 45px rgba(243, 156, 18, 0.25); }
}

@keyframes forgeScanline {
    0% { top: -60px; }
    100% { top: 100%; }
}

@keyframes forgeRingPulse {
    0%, 100% { border-color: rgba(243, 156, 18, 0.1); }
    50% { border-color: rgba(243, 156, 18, 0.3); }
}

@keyframes forgeIconShuffle {
    /* Subtle jitter during fast spin */
    0% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}

@keyframes winnerPop {
    0% { transform: scale(1.8) rotate(-10deg); opacity: 0; }
    40% { transform: scale(0.85) rotate(3deg); opacity: 1; }
    70% { transform: scale(1.1) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes resultAppear {
    0% { opacity: 0; transform: scale(0.92) translateY(12px); }
    60% { transform: scale(1.02) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes resultIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes newUnlockPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
    50% { opacity: 0.85; box-shadow: 0 0 12px rgba(243, 156, 18, 0.15); }
}

@keyframes itemUnlockFlash {
    0% { background: rgba(243, 156, 18, 0.25); box-shadow: 0 0 20px rgba(243, 156, 18, 0.2); }
    100% { background: rgba(243, 156, 18, 0.06); box-shadow: none; }
}

@keyframes btnShimmer {
    0% { left: -100%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

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

/* Unlock Close Button */
.unlock-close-btn {
    padding: 12px 36px;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent) 0%, #5a4dd6 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.unlock-close-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(196, 154, 60, 0.35);
}


/* --- Loadout Selection Screen --- */
.loadout-overlay {
    z-index: 3100;
}

.loadout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 700px;
    width: 90%;
    padding: 36px;
    background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-dark) 100%);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.loadout-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text);
}

.loadout-cards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.loadout-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.loadout-card:hover {
    border-color: var(--accent-glow);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(196, 154, 60, 0.2);
}

.loadout-card-chosen {
    border-color: var(--heal-green) !important;
    box-shadow: 0 0 30px rgba(46, 204, 113, 0.3) !important;
    transform: scale(1.05) !important;
}

.loadout-card-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.loadout-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.loadout-card-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
}

/* --- Unlock & Loadout Screen Transitions --- */
.unlock-content,
.loadout-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.screen-overlay.visible .unlock-content,
.screen-overlay.visible .loadout-content {
    opacity: 1;
    transform: translateY(0);
}

.screen-overlay.closing .unlock-content,
.screen-overlay.closing .loadout-content {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Unlock card purchase animation */
@keyframes unlockPulse {
    0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(243, 156, 18, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

.forge-item-owned {
    animation: unlockPulse 0.6s ease-out;
}

/* ===== Deck Viewer Button (Top Bar) ===== */
.deck-viewer-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    font-size: 18px;
    gap: 4px;
}

.deck-viewer-btn svg {
    transition: transform 0.3s ease;
}
.deck-viewer-btn:hover {
    background: rgba(196, 154, 60, 0.12);
    border-color: rgba(196, 154, 60, 0.3);
    color: var(--accent-glow);
}
.deck-viewer-btn:hover svg {
    transform: rotate(-10deg) scale(1.1);
}

.deck-viewer-btn .deck-btn-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Top Bar Buttons Group ===== */
.top-bar-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 14px;
    border-left: 1px solid rgba(100, 100, 160, 0.25);
    margin-left: 8px;
}

/* ===== Deck Viewer Overlay ===== */
.deck-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 10, 0.0);
    backdrop-filter: blur(0px);
    opacity: 0;
    transition: all 0.3s ease;
}

.deck-viewer-overlay.visible {
    opacity: 1;
    background: rgba(5, 5, 10, 0.85);
    backdrop-filter: blur(8px);
}

.deck-viewer-overlay.closing {
    opacity: 0;
    background: rgba(5, 5, 10, 0.0);
    backdrop-filter: blur(0px);
    transition: all 0.3s ease;
}

/* ===== Deck Viewer Content ===== */
.deck-viewer-content {
    background: linear-gradient(180deg, rgba(18, 15, 32, 0.99) 0%, var(--bg-mid) 8%, var(--bg-mid) 92%, rgba(18, 15, 32, 0.99) 100%);
    border: 1px solid rgba(196, 154, 60, 0.1);
    border-radius: 8px;
    width: 90vw;
    max-width: 1100px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 80px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
}

.deck-viewer-overlay.visible .deck-viewer-content {
    transform: translateY(0) scale(1);
}

.deck-viewer-overlay.closing .deck-viewer-content {
    transform: translateY(-20px) scale(0.97);
}

/* ===== Header ===== */
.deck-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid rgba(196, 154, 60, 0.08);
    background: linear-gradient(180deg, rgba(15, 12, 28, 0.6) 0%, var(--bg-light) 100%);
    flex-shrink: 0;
}

.deck-viewer-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.deck-viewer-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-glow);
    margin: 0;
    filter: drop-shadow(0 0 8px rgba(196, 154, 60, 0.2));
}

.deck-viewer-count {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 600;
}

.deck-viewer-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ===== Sort Controls ===== */
.deck-viewer-sort {
    display: flex;
    align-items: center;
    gap: 6px;
}

.deck-viewer-sort-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 4px;
}

.deck-viewer-sort-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.deck-viewer-sort-btn:hover {
    color: var(--text);
    border-color: var(--accent);
}

.deck-viewer-sort-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ===== Close Button ===== */
.deck-viewer-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.deck-viewer-close:hover {
    background: var(--hp-red);
    border-color: var(--hp-red);
}

/* ===== Dice Grid ===== */
.deck-viewer-grid-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.deck-viewer-grid-wrapper::-webkit-scrollbar {
    width: 6px;
}

.deck-viewer-grid-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.deck-viewer-grid-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-pill);
}

.deck-viewer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    justify-items: center;
}

/* ===== Dice Card ===== */
.deck-viewer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, var(--surface) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    width: 100%;
    max-width: 165px;
}

.deck-viewer-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(196, 154, 60, 0.08);
}

.deck-viewer-card[data-rarity="uncommon"] {
    border-color: rgba(46, 204, 113, 0.15);
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.03) 0%, var(--surface) 100%);
}

.deck-viewer-card[data-rarity="uncommon"]:hover {
    border-color: rgba(46, 204, 113, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(46, 204, 113, 0.12);
}

.deck-viewer-card[data-rarity="rare"] {
    border-color: rgba(155, 89, 182, 0.15);
    background: linear-gradient(180deg, rgba(155, 89, 182, 0.03) 0%, var(--surface) 100%);
}

.deck-viewer-card[data-rarity="rare"]:hover {
    border-color: rgba(155, 89, 182, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(155, 89, 182, 0.12);
}

.deck-viewer-card[data-rarity="legendary"] {
    border-color: rgba(241, 196, 15, 0.15);
    background: linear-gradient(180deg, rgba(241, 196, 15, 0.03) 0%, var(--surface) 100%);
}

.deck-viewer-card[data-rarity="legendary"]:hover {
    border-color: rgba(241, 196, 15, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 16px rgba(241, 196, 15, 0.12);
}

.deck-viewer-card .die-container {
    cursor: pointer;
    pointer-events: none;
}

.deck-viewer-card .die-container:hover {
    transform: none;
}

/* ===== Card Info ===== */
.deck-viewer-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.deck-viewer-card-name {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.deck-viewer-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-dim);
}

.deck-viewer-card-size {
    font-weight: 700;
}

.deck-viewer-card-rarity {
    text-transform: capitalize;
}

.deck-viewer-card-cost {
    color: var(--energy-yellow);
    font-weight: 600;
}

.deck-viewer-card-faces {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    margin-top: 4px;
}

.deck-viewer-mini-face {
    font-size: 14px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    border-radius: 4px;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.deck-viewer-mini-face[data-face-type="damage"] { border-color: rgba(255, 107, 107, 0.25); background: linear-gradient(155deg, rgba(217, 64, 64, 0.2), rgba(140, 30, 30, 0.15)); }
.deck-viewer-mini-face[data-face-type="block"]  { border-color: rgba(52, 152, 219, 0.25); background: linear-gradient(155deg, rgba(74, 159, 216, 0.2), rgba(30, 100, 152, 0.15)); }
.deck-viewer-mini-face[data-face-type="heal"]   { border-color: rgba(46, 204, 113, 0.25); background: linear-gradient(155deg, rgba(60, 200, 104, 0.18), rgba(30, 140, 64, 0.12)); }
.deck-viewer-mini-face[data-face-type="poison"] { border-color: rgba(39, 174, 96, 0.25); background: linear-gradient(155deg, rgba(64, 200, 112, 0.18), rgba(30, 136, 66, 0.12)); }
.deck-viewer-mini-face[data-face-type="curse"]  { border-color: rgba(231, 76, 60, 0.25); background: linear-gradient(155deg, rgba(58, 32, 96, 0.25), rgba(32, 16, 56, 0.2)); }
.deck-viewer-mini-face[data-face-type="status"] { border-color: rgba(155, 89, 182, 0.25); background: linear-gradient(155deg, rgba(192, 96, 224, 0.18), rgba(120, 48, 160, 0.12)); }
.deck-viewer-mini-face[data-face-type="utility"]{ border-color: rgba(243, 156, 18, 0.25); background: linear-gradient(155deg, rgba(168, 85, 216, 0.2), rgba(110, 48, 152, 0.15)); }
.deck-viewer-mini-face[data-face-type="blank"]  { border-color: rgba(136, 136, 170, 0.12); opacity: 0.45; }

/* ===== Detail Panel ===== */
.deck-viewer-detail-panel {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.deck-viewer-detail-panel.hidden {
    display: none !important;
}

.deck-viewer-detail {
    max-width: 500px;
    margin: 0 auto;
    animation: deckDetailSlideIn 0.25s ease;
}

@keyframes deckDetailSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.deck-viewer-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.deck-viewer-detail-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deck-viewer-detail-name {
    font-size: 24px;
    font-weight: 800;
}

.deck-viewer-detail-meta {
    font-size: 13px;
    color: var(--text-dim);
}

.deck-viewer-detail-close {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.deck-viewer-detail-close:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.deck-viewer-detail-die {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    padding: 20px 0;
}

.deck-viewer-detail-die .die-container {
    transform: scale(1.5);
    cursor: default;
}

.deck-viewer-detail-die .die-container:hover {
    transform: scale(1.5);
}

/* ===== Face List (Detail) ===== */
.deck-viewer-detail-faces {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, var(--surface) 100%);
    border: 1px solid rgba(196, 154, 60, 0.08);
    border-radius: var(--radius-md);
    padding: 18px;
}

.deck-viewer-detail-faces-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(196, 154, 60, 0.6);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.deck-viewer-detail-faces-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 154, 60, 0.15), transparent);
}

.deck-viewer-detail-face-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(51, 51, 90, 0.2);
    border-radius: 4px;
    transition: background 0.15s ease;
}

.deck-viewer-detail-face-row:hover {
    background: rgba(196, 154, 60, 0.04);
}

.deck-viewer-detail-face-row:last-child {
    border-bottom: none;
}

.deck-viewer-face-icon {
    font-size: 20px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.deck-viewer-detail-face-row[data-face-type="damage"] .deck-viewer-face-icon { border-color: rgba(255, 107, 107, 0.3); background: linear-gradient(155deg, rgba(217, 64, 64, 0.15), rgba(140, 30, 30, 0.1)); }
.deck-viewer-detail-face-row[data-face-type="block"] .deck-viewer-face-icon  { border-color: rgba(52, 152, 219, 0.3); background: linear-gradient(155deg, rgba(74, 159, 216, 0.15), rgba(30, 100, 152, 0.1)); }
.deck-viewer-detail-face-row[data-face-type="heal"] .deck-viewer-face-icon   { border-color: rgba(46, 204, 113, 0.3); background: linear-gradient(155deg, rgba(60, 200, 104, 0.12), rgba(30, 140, 64, 0.08)); }
.deck-viewer-detail-face-row[data-face-type="poison"] .deck-viewer-face-icon { border-color: rgba(39, 174, 96, 0.3); background: linear-gradient(155deg, rgba(64, 200, 112, 0.12), rgba(30, 136, 66, 0.08)); }
.deck-viewer-detail-face-row[data-face-type="curse"] .deck-viewer-face-icon  { border-color: rgba(231, 76, 60, 0.3); background: linear-gradient(155deg, rgba(58, 32, 96, 0.2), rgba(32, 16, 56, 0.15)); }
.deck-viewer-detail-face-row[data-face-type="status"] .deck-viewer-face-icon { border-color: rgba(155, 89, 182, 0.3); background: linear-gradient(155deg, rgba(192, 96, 224, 0.12), rgba(120, 48, 160, 0.08)); }
.deck-viewer-detail-face-row[data-face-type="blank"] .deck-viewer-face-icon  { opacity: 0.35; }

.deck-viewer-face-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    min-width: 80px;
}

.deck-viewer-face-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-glow);
    min-width: 24px;
    text-align: center;
}

.deck-viewer-face-desc {
    font-size: 12px;
    color: var(--text-dim);
    flex: 1;
}

/* ===== Stats Section ===== */
.deck-viewer-stats {
    padding: 16px 28px;
    border-top: 1px solid rgba(196, 154, 60, 0.06);
    background: linear-gradient(180deg, var(--bg-light) 0%, rgba(15, 12, 28, 0.4) 100%);
    flex-shrink: 0;
}

.deck-viewer-stats-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.deck-viewer-stats-title {
    font-size: 11px;
    font-weight: 700;
    color: rgba(196, 154, 60, 0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.deck-viewer-stats-summary {
    font-size: 12px;
    color: var(--text-dim);
}

.deck-viewer-stats-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
}

.deck-viewer-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.deck-viewer-stat-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.deck-viewer-stat-label {
    min-width: 50px;
    color: var(--text-dim);
}

.deck-viewer-stat-count {
    min-width: 24px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

.deck-viewer-stat-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-dark);
    border-radius: var(--radius-pill);
    overflow: hidden;
    min-width: 40px;
}

.deck-viewer-stat-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}

.deck-viewer-stat-pct {
    min-width: 30px;
    text-align: right;
    color: var(--text-dim);
    font-size: 11px;
}

/* ===== Relics Section ===== */
.deck-viewer-relics-section {
    padding: 0 28px 16px;
    background: var(--bg-light);
    flex-shrink: 0;
}

.deck-viewer-relics-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.deck-viewer-relics-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-glow);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.deck-viewer-relics-count {
    font-size: 12px;
    color: var(--text-dim);
}

.deck-viewer-relics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.deck-viewer-relic-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-width: 220px;
    transition: border-color 0.2s ease;
}

.deck-viewer-relic-card:hover {
    border-color: var(--accent);
}

.deck-viewer-relic-card[data-rarity="rare"] {
    border-color: rgba(155, 89, 182, 0.25);
}

.deck-viewer-relic-card[data-rarity="legendary"] {
    border-color: rgba(241, 196, 15, 0.25);
}

.deck-viewer-relic-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.deck-viewer-relic-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deck-viewer-relic-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.deck-viewer-relic-desc {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* ===== Hint Footer ===== */
.deck-viewer-hint {
    text-align: center;
    padding: 8px;
    font-size: 10px;
    color: rgba(136, 136, 170, 0.4);
    border-top: 1px solid rgba(196, 154, 60, 0.05);
    background: linear-gradient(180deg, var(--bg-light) 0%, rgba(15, 12, 28, 0.5) 100%);
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.deck-viewer-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    font-size: 11px;
    font-family: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
}

/* ===== Map View Deck Button ===== */
.map-deck-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    z-index: 10;
}

.map-deck-btn:hover {
    border-color: var(--accent);
    background: rgba(196, 154, 60, 0.15);
    color: var(--accent-glow);
}


/* ===================================================================
   RESPONSIVE: Tablet — max-width: 1024px
   =================================================================== */
@media (max-width: 1024px) {
    /* Top bar: more compact */
    #top-bar {
        padding: 8px 16px;
    }
    #hp-bar {
        width: 160px;
        height: 20px;
    }
    #floor-info,
    #gold-info {
        font-size: 13px;
    }

    /* Combat area: less padding */
    #combat-area {
        padding: 16px 30px;
    }

    /* Sprites: smaller */
    #player-sprite {
        width: 110px;
        height: 110px;
    }
    .enemy-sprite-canvas {
        width: 140px;
        height: 140px;
    }
    .multi-enemy .enemy-sprite-canvas {
        width: 100px;
        height: 100px;
    }
    #player-side {
        min-width: 120px;
    }
    #enemy-side {
        min-width: 200px;
    }
    .enemy-name {
        font-size: 15px;
        padding: 2px 10px;
    }
    #player-name {
        font-size: 12px;
    }

    /* Dice board: smaller */
    #dice-board {
        max-width: 450px;
        min-height: 260px;
    }
    #roll-result {
        font-size: 24px;
    }
    #roll-selected-btn {
        padding: 8px 20px;
        font-size: 14px;
    }

    /* Enemy intent */
    .enemy-intent {
        font-size: 14px;
        padding: 4px 10px;
    }

    /* HP bars */
    .enemy-hp-bar {
        width: 160px;
        height: 20px;
    }
    .multi-enemy .enemy-hp-bar {
        width: 110px;
        height: 16px;
    }

    /* Hand area */
    #hand-area {
        gap: 12px;
        padding: 12px 16px 16px;
        min-height: 140px;
    }
    #dice-tray {
        padding: 12px 16px;
        min-height: 100px;
    }
    #dice-hand {
        gap: 12px;
        min-height: 70px;
    }

    /* Energy orb */
    #energy-orb {
        width: 50px;
        height: 50px;
        font-size: 17px;
    }

    /* End turn button */
    #end-turn-btn {
        padding: 10px 22px;
        font-size: 13px;
    }

    /* Pile buttons */
    .pile-icon {
        font-size: 20px;
    }
    .pile-count {
        font-size: 16px;
    }

    /* Modals: wider */
    .modal-content {
        min-width: 300px;
        max-width: 90%;
        padding: 20px;
    }

    /* Reward panel */
    .reward-panel {
        min-width: auto;
        width: 90%;
        max-width: 760px;
        padding: 28px 32px;
    }
    .reward-title {
        font-size: 32px;
    }
    .reward-face-card {
        width: 140px;
        padding: 16px 14px;
    }

    /* Shop panel */
    .shop-panel {
        min-width: auto;
        width: 90%;
        max-width: 800px;
        padding: 28px 32px;
    }
    .shop-title {
        font-size: 28px;
    }
    .shop-face-card {
        width: 130px;
        padding: 14px 12px;
    }

    /* Rest panel */
    .rest-panel {
        min-width: auto;
        width: 90%;
        max-width: 760px;
        padding: 28px 32px;
    }
    .rest-title {
        font-size: 28px;
    }
    .rest-option-card {
        width: 180px;
        padding: 20px 18px;
    }

    /* Event panel */
    .event-panel {
        min-width: auto;
        width: 90%;
        max-width: 760px;
        padding: 28px 32px;
    }
    .event-title {
        font-size: 28px;
    }

    /* Map encounter panel */
    .map-encounter-panel {
        min-width: auto;
        width: 90%;
        max-width: 460px;
        padding: 32px 36px;
    }

    /* Map header */
    .map-act-title {
        font-size: 22px;
    }

    /* Map nodes: ensure minimum tap target */
    .map-node {
        min-width: 44px;
        min-height: 44px;
    }

    /* Relic bar */
    #relic-bar {
        padding: 4px 16px;
    }

    /* Title screen */
    .title-text {
        font-size: 44px;
        letter-spacing: 3px;
    }
    .title-dice-icon svg { width: 32px; height: 32px; }
    .title-subtitle {
        font-size: 12px;
        letter-spacing: 3px;
    }
    .title-btn {
        max-width: 280px;
        padding: 12px 20px;
        font-size: 14px;
    }
    .title-btn-primary {
        padding: 14px 20px;
        font-size: 15px;
    }

    /* Game over */
    .gameover-title {
        font-size: 56px;
    }

    /* Victory */
    .victory-title {
        font-size: 48px;
    }

    /* Unlock screen */
    .unlock-content {
        max-width: 90%;
        padding: 24px;
    }
    .forge-collection-items {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    /* Loadout screen */
    .loadout-content {
        max-width: 90%;
        padding: 28px;
    }
    .loadout-card {
        width: 160px;
        padding: 16px;
    }

    /* Stat bubble: slightly smaller */
    .stat-bubble {
        font-size: 16px;
        padding: 3px 12px;
    }

    /* Floating numbers */
    .floating-number {
        font-size: 26px;
    }

    /* Combat log panel */
    #combat-log.open #log-panel {
        width: 200px;
    }

    /* Relic tooltip: tighter */
    .relic-tooltip {
        min-width: 170px;
        max-width: 230px;
        padding: 8px 12px;
    }

    /* Deck viewer */
    .deck-viewer-content {
        width: 95vw;
        height: 88vh;
    }
    .deck-viewer-header {
        padding: 14px 20px;
    }
    .deck-viewer-grid-wrapper {
        padding: 16px;
    }
    .deck-viewer-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 14px;
    }
    .deck-viewer-stats {
        padding: 12px 20px;
    }
    .deck-viewer-stats-breakdown {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    .deck-viewer-relics-section {
        padding: 0 20px 12px;
    }
    .deck-viewer-relic-card {
        min-width: 180px;
    }
}


/* ===================================================================
   RESPONSIVE: Mobile — max-width: 768px
   =================================================================== */
@media (max-width: 768px) {
    /* Allow vertical scrolling on mobile */
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Top bar: compact, wrap-friendly */
    #top-bar {
        padding: 6px 10px;
        gap: 6px;
        flex-wrap: wrap;
    }
    #player-info {
        gap: 6px;
    }
    #player-hp-label {
        font-size: 12px;
    }
    #hp-bar {
        width: 120px;
        height: 18px;
    }
    #hp-text {
        font-size: 10px;
    }
    #floor-info {
        font-size: 11px;
    }
    #gold-info {
        font-size: 12px;
    }
    .volume-btn {
        padding: 4px 6px;
    }
    .volume-btn .volume-icon {
        width: 16px;
        height: 16px;
    }

    /* Deck viewer button */
    .deck-viewer-btn {
        padding: 4px 6px;
        font-size: 15px;
    }
    .deck-viewer-btn .deck-btn-label {
        display: none;
    }

    /* Relic bar */
    #relic-bar {
        padding: 3px 10px;
        gap: 4px;
        min-height: 34px;
    }
    .relic-icon {
        width: 30px;
        height: 30px;
    }
    .relic-emoji {
        font-size: 16px;
    }

    /* Combat area: compact horizontal */
    #combat-area {
        padding: 10px 12px;
    }

    /* Player side */
    #player-side {
        min-width: 80px;
        gap: 4px;
    }
    #player-sprite {
        width: 80px;
        height: 80px;
        border-radius: var(--radius-sm);
    }
    #player-hp-compact {
        height: 14px;
    }
    #player-hp-compact .player-hp-text {
        font-size: 9px;
    }
    #player-name {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    /* Enemy side */
    #enemy-side {
        min-width: 100px;
        gap: 4px;
        padding: 8px 6px;
    }
    .enemy-sprite-canvas {
        width: 100px;
        height: 100px;
        border-radius: var(--radius-sm);
    }
    .multi-enemy .enemy-sprite-canvas {
        width: 75px;
        height: 75px;
    }
    .enemy-name {
        font-size: 12px;
        padding: 2px 8px;
    }
    .enemy-intent {
        font-size: 12px;
        padding: 3px 8px;
        min-height: 24px;
        gap: 3px;
    }
    .enemy-hp-bar {
        width: 110px;
        height: 16px;
    }
    .multi-enemy .enemy-hp-bar {
        width: 80px;
        height: 12px;
    }
    .enemy-hp-text {
        font-size: 9px;
    }
    #turn-counter {
        font-size: 10px;
        padding: 3px 10px;
    }
    .enemy-ground-shadow {
        width: 70px;
        height: 10px;
    }

    /* Stat bubbles */
    .stat-bubble {
        font-size: 14px;
        padding: 2px 10px;
        gap: 4px;
    }
    .stat-bubble .stat-icon {
        font-size: 13px;
    }

    /* Status effects */
    #enemy-status-effects,
    #player-status-effects {
        gap: 3px;
    }

    /* Dice board */
    #dice-board {
        max-width: 280px;
        min-height: 180px;
    }
    #roll-result {
        font-size: 20px;
    }
    #roll-selected-btn {
        padding: 6px 14px;
        font-size: 12px;
        letter-spacing: 1px;
    }
    #roll-selection-info {
        font-size: 11px;
        padding: 2px 10px;
    }

    /* Keyboard hints: hidden on mobile */
    #keyboard-hints {
        display: none;
    }

    /* Combat log: hidden by default, toggle still there */
    #log-toggle {
        width: 28px;
        height: 28px;
        margin: 8px 0 0 4px;
    }
    #combat-log.open #log-panel {
        width: 180px;
    }
    #log-header {
        font-size: 10px;
        padding: 6px 8px 4px;
    }
    .log-entry {
        font-size: 10px;
    }

    /* Hand area */
    #hand-area {
        gap: 8px;
        padding: 8px 8px 12px;
        min-height: 110px;
    }

    /* Energy display */
    #energy-orb {
        width: 44px;
        height: 44px;
        font-size: 15px;
    }
    #energy-label {
        font-size: 9px;
    }
    #energy-display {
        gap: 2px;
    }

    /* Dice tray */
    #dice-tray {
        padding: 8px 10px;
        min-height: 80px;
        border-radius: var(--radius-md);
    }
    #dice-hand {
        gap: 8px;
        min-height: 60px;
    }

    /* End turn button */
    #end-turn-btn {
        padding: 8px 16px;
        font-size: 12px;
        letter-spacing: 0.5px;
        border-radius: var(--radius-sm);
    }

    /* Pile buttons: icon only */
    .pile-btn {
        padding: 6px 8px;
        min-width: 44px;
        min-height: 44px;
        border-radius: var(--radius-sm);
    }
    .pile-label {
        display: none;
    }
    .pile-icon {
        font-size: 18px;
    }
    .pile-count {
        font-size: 14px;
    }

    /* Modals: near full-width */
    .modal-content {
        min-width: auto;
        width: 95%;
        max-width: 95%;
        max-height: 85vh;
        padding: 16px;
        border-radius: var(--radius-md);
    }
    #pile-modal-title {
        font-size: 16px;
    }
    .modal-dice-grid {
        gap: 12px;
        padding: 6px 0;
    }

    /* Reward panel: full-width */
    .reward-panel {
        width: 95%;
        max-width: 95%;
        padding: 20px 16px;
        border-radius: var(--radius-md);
        max-height: 90vh;
    }
    .reward-title {
        font-size: 26px;
    }
    .reward-subtitle {
        font-size: 13px;
    }
    .reward-gold-icon {
        font-size: 20px;
    }
    .reward-gold-amount {
        font-size: 18px;
    }
    .reward-section-title {
        font-size: 13px;
    }
    .reward-faces-row {
        gap: 10px;
    }
    .reward-face-card {
        width: 120px;
        padding: 14px 10px;
        gap: 8px;
    }
    .reward-face-icon-wrap {
        width: 50px;
        height: 50px;
    }
    .reward-face-icon {
        font-size: 22px;
    }
    .reward-face-value {
        font-size: 11px;
    }
    .reward-face-name {
        font-size: 12px;
    }
    .reward-face-desc {
        font-size: 10px;
    }
    .reward-skip-btn {
        padding: 8px 28px;
        font-size: 13px;
    }

    /* Reward die selection */
    .reward-dice-selection {
        max-height: 40vh;
    }
    .reward-die-card {
        padding: 10px 12px;
    }
    .reward-die-header {
        font-size: 13px;
    }
    .reward-die-face-slot {
        font-size: 11px;
        padding: 5px 8px;
        min-width: 70px;
    }

    /* Reward confirm */
    .reward-confirm-box {
        min-width: auto;
        width: 90%;
        padding: 20px 16px;
    }
    .reward-confirm-title {
        font-size: 16px;
    }
    .reward-confirm-arrow {
        font-size: 22px;
    }
    .reward-confirm-face {
        padding: 10px 12px;
        min-width: 75px;
    }

    /* Shop panel: full-width mobile */
    .shop-panel {
        width: 95%;
        max-width: 95%;
        padding: 20px 16px;
        border-radius: var(--radius-md);
        max-height: 90vh;
    }
    .shop-title {
        font-size: 24px;
    }
    .shop-gold-display {
        padding: 6px 14px;
    }
    .shop-gold-icon {
        font-size: 18px;
    }
    .shop-gold-value {
        font-size: 18px;
    }
    .shop-faces-row {
        gap: 8px;
    }
    .shop-face-card {
        width: 110px;
        padding: 12px 8px;
        gap: 6px;
    }
    .shop-face-icon-wrap {
        width: 44px;
        height: 44px;
    }
    .shop-face-icon {
        font-size: 20px;
    }
    .shop-face-name {
        font-size: 11px;
    }
    .shop-face-desc {
        font-size: 9px;
    }
    .shop-die-card {
        min-width: auto;
        width: 100%;
        padding: 12px 14px;
    }
    .shop-service-card {
        width: 160px;
        padding: 14px 12px;
    }
    .shop-service-icon {
        font-size: 26px;
    }
    .shop-service-name {
        font-size: 12px;
    }
    .shop-leave-btn {
        padding: 10px 28px;
        font-size: 13px;
    }

    /* Rest panel */
    .rest-panel {
        width: 95%;
        max-width: 95%;
        padding: 20px 16px;
        border-radius: var(--radius-md);
    }
    .rest-title {
        font-size: 24px;
    }
    .rest-options {
        gap: 14px;
    }
    .rest-option-card {
        width: 160px;
        padding: 18px 16px;
    }
    .rest-option-icon {
        font-size: 36px;
        width: 64px;
        height: 64px;
    }
    .rest-option-name {
        font-size: 16px;
    }
    .rest-option-desc {
        font-size: 12px;
    }
    .rest-feedback-title {
        font-size: 24px;
    }
    .rest-feedback-text {
        font-size: 15px;
    }

    /* Event panel */
    .event-panel {
        width: 95%;
        max-width: 95%;
        padding: 20px 16px;
        border-radius: var(--radius-md);
    }
    .event-title {
        font-size: 24px;
    }
    .event-icon {
        font-size: 40px;
    }
    .event-desc {
        font-size: 13px;
    }
    .event-choices {
        gap: 14px;
    }
    .event-choice-card {
        width: 160px;
        padding: 18px 16px;
    }
    .event-choice-icon {
        font-size: 36px;
        width: 64px;
        height: 64px;
    }
    .event-choice-name {
        font-size: 16px;
    }
    .event-choice-desc {
        font-size: 12px;
    }
    .event-dealer-offer {
        gap: 12px;
    }
    .event-dealer-card {
        width: 140px;
        padding: 14px 12px;
    }
    .event-result-title {
        font-size: 24px;
    }
    .event-result-text {
        font-size: 14px;
    }

    /* Map overlay */
    .map-header {
        padding: 12px 16px;
    }
    .map-act-title {
        font-size: 18px;
        letter-spacing: 1px;
    }
    .map-floor-indicator {
        font-size: 11px;
        padding: 4px 12px;
    }
    .map-node {
        width: 48px;
        height: 48px;
    }
    .map-node-icon {
        font-size: 22px;
    }
    .map-node[data-node-type="boss"] {
        width: 56px;
        height: 56px;
    }
    .map-node-label {
        font-size: 8px;
    }
    .map-deck-btn {
        bottom: 12px;
        right: 12px;
        padding: 8px 14px;
        font-size: 12px;
    }

    /* Map encounter panel */
    .map-encounter-panel {
        width: 92%;
        max-width: 92%;
        padding: 24px 20px;
    }
    .map-encounter-icon {
        font-size: 40px;
    }
    .map-encounter-title {
        font-size: 22px;
    }
    .map-encounter-desc {
        font-size: 13px;
    }

    /* Title screen */
    .title-text {
        font-size: 34px;
        letter-spacing: 2px;
    }
    .title-dice-icon svg { width: 28px; height: 28px; }
    .title-logo-row { gap: 10px; }
    .title-subtitle {
        font-size: 11px;
        letter-spacing: 2px;
    }
    .title-btn {
        max-width: 260px;
        padding: 12px 18px;
        font-size: 14px;
        letter-spacing: 2px;
    }
    .title-btn-primary {
        padding: 13px 18px;
        font-size: 15px;
    }
    .title-meta-section {
        gap: 8px;
    }
    .title-meta-btn {
        padding: 10px 6px 8px;
    }
    .title-version {
        font-size: 10px;
    }

    /* Game over */
    .gameover-title {
        font-size: 44px;
        letter-spacing: 6px;
        margin-bottom: 24px;
    }
    .gameover-stats {
        gap: 10px;
    }
    .go-stat {
        padding: 10px 14px;
        min-width: 90px;
    }
    .go-stat-value {
        font-size: 22px;
    }
    .gameover-retry-btn {
        padding: 12px 36px;
        font-size: 16px;
    }

    /* Victory */
    .victory-title {
        font-size: 36px;
        letter-spacing: 4px;
    }
    .victory-subtitle {
        font-size: 16px;
    }
    .victory-stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }
    .victory-btn {
        padding: 12px 40px;
        font-size: 16px;
    }

    /* Act transition */
    .act-transition-title {
        font-size: 32px;
    }
    .act-transition-next {
        font-size: 18px;
    }
    .act-transition-btn {
        padding: 12px 36px;
        font-size: 16px;
    }

    /* Floating damage numbers */
    .floating-number {
        font-size: 22px;
    }

    /* Relic reward overlay */
    .relic-reward-panel {
        width: 95%;
        padding: 20px 16px;
    }
    .relic-reward-title {
        font-size: 22px;
    }
    .relic-reward-cards {
        gap: 12px;
    }
    .relic-reward-card {
        width: 150px;
        padding: 14px 12px;
    }
    .relic-reward-icon-wrap {
        width: 50px;
        height: 50px;
    }
    .relic-reward-icon {
        font-size: 26px;
    }
    .relic-reward-name {
        font-size: 13px;
    }
    .relic-reward-desc {
        font-size: 11px;
    }

    /* Relic tooltip: show on tap, position better */
    .relic-tooltip {
        min-width: 160px;
        max-width: 200px;
        padding: 8px 10px;
    }
    .relic-tooltip-name {
        font-size: 12px;
    }
    .relic-tooltip-desc {
        font-size: 10px;
    }

    /* Unlock screen */
    .unlock-content {
        max-width: 95%;
        padding: 20px 16px;
    }
    .unlock-title {
        font-size: 1.4rem;
    }
    .forge-roll-display { width: 180px; height: 160px; }
    .forge-roll-window { width: 160px; height: 140px; }
    .forge-roll-icon { font-size: 2.5rem; }
    .forge-roll-btn { padding: 12px 30px; font-size: 0.95rem; }
    .forge-result-icon { font-size: 1.8rem; }
    .forge-result-card { padding: 18px 20px; }
    .forge-collection-items {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 6px;
    }
    .forge-collection-item { padding: 7px 10px; }
    .forge-item-icon { font-size: 1.1rem; }
    .forge-item-name { font-size: 0.75rem; }

    /* Loadout screen */
    .loadout-content {
        max-width: 95%;
        padding: 20px 16px;
    }
    .loadout-title {
        font-size: 1.2rem;
    }
    .loadout-card {
        width: 140px;
        padding: 14px;
    }
    .loadout-card-icon {
        font-size: 2rem;
    }
    .loadout-card-name {
        font-size: 0.85rem;
    }
    .loadout-card-desc {
        font-size: 0.7rem;
    }

    /* Reroll prompt */
    .reroll-panel {
        min-width: 170px;
        padding: 10px 14px 8px;
    }
    .reroll-panel-face-icon { font-size: 20px; }
    .reroll-panel-face-name { font-size: 14px; }
    .reroll-btn-accept, .reroll-btn-decline { font-size: 12px; padding: 6px 12px; }

    /* Die hover ghost */
    .die-hover-ghost {
        width: 54px;
        height: 54px;
    }

    /* Deck viewer: full screen on mobile */
    .deck-viewer-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        border-radius: 0;
    }
    .deck-viewer-header {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .deck-viewer-title {
        font-size: 18px;
    }
    .deck-viewer-sort {
        flex-wrap: wrap;
        gap: 4px;
    }
    .deck-viewer-sort-label {
        display: none;
    }
    .deck-viewer-sort-btn {
        padding: 4px 10px;
        font-size: 11px;
    }
    .deck-viewer-grid-wrapper {
        padding: 12px;
    }
    .deck-viewer-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    .deck-viewer-card {
        padding: 10px 8px;
        gap: 6px;
        max-width: 140px;
    }
    .deck-viewer-card-name {
        font-size: 11px;
    }
    .deck-viewer-card-meta {
        font-size: 10px;
    }
    .deck-viewer-stats {
        padding: 10px 14px;
    }
    .deck-viewer-stats-breakdown {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 4px;
    }
    .deck-viewer-stat-item {
        font-size: 11px;
    }
    .deck-viewer-relics-section {
        padding: 0 14px 10px;
    }
    .deck-viewer-relic-card {
        min-width: auto;
        padding: 8px 10px;
        gap: 8px;
    }
    .deck-viewer-relic-icon {
        font-size: 22px;
    }
    .deck-viewer-relic-name {
        font-size: 12px;
    }
    .deck-viewer-relic-desc {
        font-size: 10px;
    }
    .deck-viewer-hint {
        font-size: 10px;
    }
    .deck-viewer-hint kbd {
        display: none;
    }

    /* Deck viewer detail panel */
    .deck-viewer-detail-panel {
        padding: 16px;
    }
    .deck-viewer-detail-name {
        font-size: 20px;
    }
    .deck-viewer-detail-die .die-container {
        transform: scale(1.2);
    }
    .deck-viewer-detail-die .die-container:hover {
        transform: scale(1.2);
    }
    .deck-viewer-detail-faces {
        padding: 12px;
    }
    .deck-viewer-face-name {
        font-size: 12px;
        min-width: 60px;
    }
    .deck-viewer-face-value {
        font-size: 14px;
    }
    .deck-viewer-face-desc {
        font-size: 11px;
    }
}


/* ===================================================================
   RESPONSIVE: Small Mobile — max-width: 480px
   =================================================================== */
@media (max-width: 480px) {
    /* Top bar: two-row friendly */
    #top-bar {
        padding: 4px 8px;
        gap: 4px;
    }
    #hp-bar {
        width: 90px;
        height: 16px;
        border-radius: var(--radius-pill);
    }
    #hp-text {
        font-size: 8px;
    }
    #player-hp-label {
        font-size: 10px;
    }
    #floor-info {
        font-size: 10px;
    }
    #gold-info {
        font-size: 10px;
    }

    /* Relic bar */
    #relic-bar {
        padding: 2px 6px;
        gap: 3px;
        min-height: 28px;
    }
    .relic-icon {
        width: 26px;
        height: 26px;
        border-radius: var(--radius-sm);
    }
    .relic-emoji {
        font-size: 14px;
    }

    /* Combat area: very compact */
    #combat-area {
        padding: 6px 6px;
    }

    /* Player side */
    #player-side {
        min-width: 65px;
        gap: 2px;
    }
    #player-sprite {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-sm);
    }
    #player-hp-compact {
        height: 12px;
    }
    #player-hp-compact .player-hp-text {
        font-size: 8px;
    }
    #player-name {
        font-size: 9px;
        letter-spacing: 0;
    }

    /* Enemy side */
    #enemy-side {
        min-width: 70px;
        gap: 2px;
        padding: 4px 3px;
    }
    .enemy-sprite-canvas {
        width: 70px;
        height: 70px;
        border-radius: var(--radius-sm);
    }
    .multi-enemy .enemy-sprite-canvas {
        width: 54px;
        height: 54px;
    }
    .enemy-name {
        font-size: 10px;
        padding: 1px 6px;
    }
    .enemy-intent {
        font-size: 10px;
        padding: 2px 6px;
        min-height: 20px;
        border-radius: var(--radius-sm);
    }
    .enemy-hp-bar {
        width: 80px;
        height: 12px;
    }
    .multi-enemy .enemy-hp-bar {
        width: 60px;
        height: 10px;
    }
    .enemy-hp-text {
        font-size: 8px;
    }
    #turn-counter {
        font-size: 8px;
        padding: 2px 8px;
    }
    .enemy-ground-shadow {
        width: 50px;
        height: 8px;
    }
    .enemy-boss-crown {
        font-size: 14px;
        top: -10px;
    }

    /* Stat bubbles */
    .stat-bubble {
        font-size: 14px;
        padding: 4px 10px;
        border-radius: 8px;
    }
    .stat-bubble .stat-icon {
        font-size: 11px;
    }

    /* Dice board */
    #dice-board {
        max-width: 220px;
        min-height: 140px;
    }
    #roll-result {
        font-size: 16px;
    }
    #roll-selected-btn {
        padding: 4px 10px;
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    #roll-selection-info {
        font-size: 9px;
        padding: 2px 6px;
    }

    /* Hand area: very tight */
    #hand-area {
        gap: 4px;
        padding: 4px 4px 8px;
        min-height: 90px;
    }

    /* Energy orb */
    #energy-orb {
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
    #energy-label {
        font-size: 7px;
        letter-spacing: 0.5px;
    }

    /* Dice tray: scroll for many dice */
    #dice-tray {
        padding: 6px 6px;
        min-height: 64px;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: var(--radius-md);
    }
    #dice-hand {
        gap: 6px;
        min-height: 50px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    /* End turn button */
    #end-turn-btn {
        padding: 6px 12px;
        font-size: 10px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    /* Pile buttons */
    .pile-btn {
        padding: 4px 6px;
        min-width: 36px;
        min-height: 44px;
        border-radius: var(--radius-sm);
        gap: 2px;
    }
    .pile-icon {
        font-size: 16px;
    }
    .pile-count {
        font-size: 12px;
    }

    /* Modals: nearly full-screen */
    .modal-content {
        width: 98%;
        max-width: 98%;
        max-height: 92vh;
        padding: 12px;
        border-radius: var(--radius-md);
    }
    .modal-dice-grid {
        gap: 8px;
    }

    /* Reward panel */
    .reward-panel {
        width: 98%;
        max-width: 98%;
        padding: 16px 10px;
        border-radius: var(--radius-md);
        max-height: 94vh;
    }
    .reward-title {
        font-size: 22px;
    }
    .reward-subtitle {
        font-size: 11px;
    }
    .reward-faces-row {
        gap: 8px;
    }
    .reward-face-card {
        width: 100px;
        padding: 10px 8px;
        gap: 6px;
        border-radius: var(--radius-md);
    }
    .reward-face-icon-wrap {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
    }
    .reward-face-icon {
        font-size: 20px;
    }
    .reward-face-name {
        font-size: 11px;
    }
    .reward-face-desc {
        font-size: 9px;
    }
    .reward-face-rarity {
        font-size: 8px;
    }
    .reward-gold {
        padding: 8px 16px;
    }
    .reward-gold-icon {
        font-size: 18px;
    }
    .reward-gold-amount {
        font-size: 16px;
    }
    .reward-section-title {
        font-size: 11px;
    }
    .reward-skip-btn,
    .reward-back-btn {
        padding: 8px 24px;
        font-size: 12px;
    }

    /* Reward confirm */
    .reward-confirm-box {
        padding: 16px 12px;
    }
    .reward-confirm-title {
        font-size: 14px;
    }
    .reward-confirm-swap {
        gap: 10px;
    }
    .reward-confirm-face {
        padding: 8px 10px;
        min-width: 65px;
    }
    .reward-confirm-buttons {
        gap: 8px;
    }
    .reward-confirm-yes,
    .reward-confirm-no {
        padding: 8px 20px;
        font-size: 12px;
    }

    /* Shop panel */
    .shop-panel {
        width: 98%;
        max-width: 98%;
        padding: 16px 10px;
        border-radius: var(--radius-md);
        max-height: 94vh;
    }
    .shop-header {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }
    .shop-title {
        font-size: 20px;
    }
    .shop-gold-value {
        font-size: 16px;
    }
    .shop-subtitle {
        font-size: 12px;
    }
    .shop-section-title {
        font-size: 11px;
    }
    .shop-faces-row {
        gap: 6px;
    }
    .shop-face-card {
        width: 95px;
        padding: 10px 6px;
        gap: 4px;
        border-radius: var(--radius-md);
    }
    .shop-face-icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: var(--radius-sm);
    }
    .shop-face-icon {
        font-size: 18px;
    }
    .shop-face-name {
        font-size: 10px;
    }
    .shop-face-desc {
        font-size: 8px;
    }
    .shop-price-tag {
        padding: 3px 8px;
    }
    .shop-price-amount {
        font-size: 12px;
    }
    .shop-die-card {
        padding: 10px 10px;
    }
    .shop-die-name {
        font-size: 13px;
    }
    .shop-die-face-pip {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    .shop-services-row {
        gap: 8px;
    }
    .shop-service-card {
        width: 130px;
        padding: 12px 10px;
    }
    .shop-service-icon {
        font-size: 22px;
    }
    .shop-service-name {
        font-size: 11px;
    }
    .shop-service-desc {
        font-size: 9px;
    }
    .shop-leave-btn {
        padding: 8px 24px;
        font-size: 12px;
    }

    /* Rest panel */
    .rest-panel {
        width: 98%;
        max-width: 98%;
        padding: 16px 10px;
        border-radius: var(--radius-md);
    }
    .rest-title {
        font-size: 20px;
    }
    .rest-subtitle {
        font-size: 12px;
    }
    .rest-options {
        gap: 10px;
    }
    .rest-option-card {
        width: 140px;
        padding: 14px 12px;
        gap: 8px;
    }
    .rest-option-icon {
        font-size: 28px;
        width: 56px;
        height: 56px;
    }
    .rest-option-name {
        font-size: 14px;
    }
    .rest-option-desc {
        font-size: 11px;
    }
    .rest-feedback-icon {
        font-size: 48px;
    }
    .rest-feedback-title {
        font-size: 20px;
    }
    .rest-feedback-text {
        font-size: 13px;
    }

    /* Event panel */
    .event-panel {
        width: 98%;
        max-width: 98%;
        padding: 16px 10px;
        border-radius: var(--radius-md);
    }
    .event-title {
        font-size: 20px;
    }
    .event-icon {
        font-size: 32px;
    }
    .event-desc {
        font-size: 12px;
    }
    .event-choices {
        gap: 8px;
    }
    .event-choice-card {
        width: 130px;
        padding: 14px 10px;
        gap: 8px;
    }
    .event-choice-icon {
        font-size: 28px;
        width: 52px;
        height: 52px;
    }
    .event-choice-name {
        font-size: 14px;
    }
    .event-choice-desc {
        font-size: 11px;
    }
    .event-dealer-offer {
        gap: 8px;
    }
    .event-dealer-card {
        width: 110px;
        padding: 10px 8px;
    }
    .event-result-icon {
        font-size: 48px;
    }
    .event-result-title {
        font-size: 20px;
    }
    .event-result-text {
        font-size: 12px;
    }
    .event-decline-btn,
    .event-continue-btn {
        padding: 8px 24px;
        font-size: 13px;
    }

    /* Map */
    .map-header {
        padding: 8px 10px;
    }
    .map-act-title {
        font-size: 16px;
        letter-spacing: 1px;
    }
    .map-floor-indicator {
        font-size: 10px;
        padding: 3px 10px;
    }
    .map-deck-btn {
        bottom: 8px;
        right: 8px;
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Map encounter panel */
    .map-encounter-panel {
        width: 96%;
        max-width: 96%;
        padding: 20px 14px;
    }
    .map-encounter-icon {
        font-size: 36px;
        margin-bottom: 10px;
    }
    .map-encounter-title {
        font-size: 18px;
    }
    .map-encounter-desc {
        font-size: 12px;
        margin-bottom: 16px;
    }
    .map-encounter-result {
        font-size: 15px;
        padding: 10px 14px;
    }
    .map-encounter-btn {
        padding: 10px 28px;
        font-size: 13px;
    }

    /* Title screen */
    .title-text {
        font-size: 24px;
        letter-spacing: 2px;
    }
    .title-dice-icon { display: none; }
    .title-subtitle {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
    .title-content {
        padding: 0 16px;
    }
    .title-btn {
        max-width: 240px;
        padding: 10px 16px;
        font-size: 13px;
        letter-spacing: 1.5px;
    }
    .title-meta-section {
        flex-direction: column;
        max-width: 240px;
    }
    .title-meta-btn {
        flex-direction: row;
        gap: 8px;
        padding: 10px 14px;
    }
    .title-sigil {
        width: 180px;
        height: 180px;
    }
    .title-version {
        font-size: 9px;
    }

    /* Game over */
    .gameover-title {
        font-size: 32px;
        letter-spacing: 4px;
        margin-bottom: 20px;
    }
    .gameover-stats {
        gap: 6px;
    }
    .go-stat {
        padding: 8px 10px;
        min-width: 75px;
    }
    .go-stat-label {
        font-size: 9px;
    }
    .go-stat-value {
        font-size: 18px;
    }
    .go-die-card {
        padding: 8px 8px;
        min-width: 70px;
    }
    .go-die-name {
        font-size: 9px;
    }
    .go-die-face {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
    .gameover-retry-btn {
        padding: 10px 28px;
        font-size: 14px;
    }

    /* Victory */
    .victory-title {
        font-size: 28px;
        letter-spacing: 3px;
    }
    .victory-subtitle {
        font-size: 14px;
        letter-spacing: 2px;
    }
    .victory-stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
    .victory-btn {
        padding: 10px 32px;
        font-size: 14px;
    }

    /* Act transition */
    .act-transition-title {
        font-size: 24px;
        letter-spacing: 2px;
    }
    .act-transition-badge {
        font-size: 11px;
        letter-spacing: 2px;
    }
    .act-transition-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .at-stat-value {
        font-size: 18px;
    }
    .act-transition-next {
        font-size: 16px;
    }
    .act-transition-btn {
        padding: 10px 28px;
        font-size: 14px;
    }

    /* Floating numbers: smaller */
    .floating-number {
        font-size: 18px;
    }

    /* Relic reward */
    .relic-reward-panel {
        width: 98%;
        padding: 16px 10px;
    }
    .relic-reward-title {
        font-size: 18px;
    }
    .relic-reward-cards {
        gap: 8px;
    }
    .relic-reward-card {
        width: 120px;
        padding: 12px 8px;
    }
    .relic-reward-icon-wrap {
        width: 44px;
        height: 44px;
    }
    .relic-reward-icon {
        font-size: 22px;
    }
    .relic-reward-name {
        font-size: 12px;
    }
    .relic-reward-desc {
        font-size: 10px;
    }

    /* Unlock screen */
    .unlock-content {
        padding: 16px 10px;
        gap: 14px;
    }
    .unlock-title {
        font-size: 1.2rem;
        letter-spacing: 2px;
    }
    .forge-roll-section::before,
    .forge-roll-section::after { display: none; }
    .forge-roll-display { width: 150px; height: 130px; }
    .forge-roll-window { width: 130px; height: 110px; }
    .forge-roll-icon { font-size: 2rem; }
    .forge-roll-label { font-size: 0.75rem; }
    .forge-roll-btn { padding: 10px 24px; font-size: 0.9rem; }
    .forge-result-icon { font-size: 1.5rem; }
    .forge-result-card { padding: 16px 14px; }
    .forge-result-name { font-size: 1.05rem; }
    .forge-collection-items {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 4px;
    }
    .forge-collection-item { padding: 5px 8px; }
    .forge-item-icon { font-size: 1rem; }
    .forge-item-name { font-size: 0.7rem; }
    .unlock-close-btn {
        padding: 10px 28px;
        font-size: 0.9rem;
    }

    /* Loadout */
    .loadout-content {
        padding: 16px 10px;
        gap: 16px;
    }
    .loadout-title {
        font-size: 1rem;
    }
    .loadout-cards {
        gap: 10px;
    }
    .loadout-card {
        width: 120px;
        padding: 12px;
    }
    .loadout-card-icon {
        font-size: 1.8rem;
    }
    .loadout-card-name {
        font-size: 0.8rem;
    }
    .loadout-card-desc {
        font-size: 0.65rem;
    }

    /* FP sections */
    .fp-earned-section {
        padding: 12px 16px;
    }
    .fp-earned-title {
        font-size: 1.1rem;
    }

    /* Reroll prompt */
    .reroll-panel {
        min-width: 150px;
        padding: 8px 10px 6px;
    }
    .reroll-panel-face-icon { font-size: 18px; }
    .reroll-panel-face-name { font-size: 13px; }
    .reroll-btn-accept, .reroll-btn-decline { font-size: 11px; padding: 5px 10px; }

    /* Die hover ghost */
    .die-hover-ghost {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-sm);
    }

    /* Combat log: very small toggle */
    #log-toggle {
        width: 24px;
        height: 24px;
    }
    #combat-log.open #log-panel {
        width: 150px;
    }

    /* Deck viewer: smallest */
    .deck-viewer-header {
        padding: 8px 10px;
    }
    .deck-viewer-title {
        font-size: 16px;
    }
    .deck-viewer-count {
        font-size: 12px;
    }
    .deck-viewer-close {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
    .deck-viewer-grid-wrapper {
        padding: 8px;
    }
    .deck-viewer-grid {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
        gap: 8px;
    }
    .deck-viewer-card {
        padding: 8px 6px;
        gap: 4px;
        border-radius: var(--radius-md);
        max-width: 120px;
    }
    .deck-viewer-card-name {
        font-size: 10px;
    }
    .deck-viewer-card-meta {
        font-size: 9px;
    }
    .deck-viewer-mini-face {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
    .deck-viewer-stats {
        padding: 8px 10px;
    }
    .deck-viewer-stats-title {
        font-size: 12px;
    }
    .deck-viewer-stats-breakdown {
        grid-template-columns: 1fr;
    }
    .deck-viewer-relics-section {
        padding: 0 10px 8px;
    }
    .deck-viewer-relics-grid {
        gap: 6px;
    }
    .deck-viewer-relic-card {
        padding: 6px 8px;
    }
    .deck-viewer-relic-icon {
        font-size: 18px;
    }
    .deck-viewer-relic-name {
        font-size: 11px;
    }
    .deck-viewer-relic-desc {
        font-size: 9px;
    }

    /* Detail panel on small mobile */
    .deck-viewer-detail-panel {
        padding: 12px;
    }
    .deck-viewer-detail-name {
        font-size: 18px;
    }
    .deck-viewer-detail-die {
        padding: 12px 0;
        margin-bottom: 16px;
    }
    .deck-viewer-detail-die .die-container {
        transform: scale(1);
    }
    .deck-viewer-detail-die .die-container:hover {
        transform: scale(1);
    }
    .deck-viewer-detail-faces {
        padding: 10px;
    }
    .deck-viewer-detail-face-row {
        gap: 6px;
        padding: 6px 0;
    }
    .deck-viewer-face-icon {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }
    .deck-viewer-face-name {
        font-size: 11px;
        min-width: 50px;
    }
    .deck-viewer-face-value {
        font-size: 13px;
    }
    .deck-viewer-face-desc {
        font-size: 10px;
    }
}


/* ===================================================================
   RESPONSIVE: Touch hover overrides for non-dice elements
   =================================================================== */

/* Only show hover effects on devices that support true hover */
@media (hover: hover) {
    .pile-btn:hover {
        background: rgba(196, 154, 60, 0.15);
        border-color: var(--accent);
        transform: translateY(-2px);
    }
    .relic-icon:hover .relic-tooltip {
        opacity: 1;
    }
}

@media (hover: none) {
    /* Disable hover transforms on touch */
    .pile-btn:hover {
        transform: none;
        box-shadow: none;
    }
    .reward-face-card:hover {
        transform: none;
    }
    .shop-face-card:hover:not(.shop-unaffordable) {
        transform: none;
    }
    .rest-option-card:hover {
        transform: none;
    }
    .event-choice-card:hover {
        transform: none;
    }
    .map-node.available:hover {
        transform: translate(-50%, -50%) scale(1);
    }
    .deck-viewer-card:hover {
        transform: none;
    }
    /* Relic tooltip: show on tap/active */
    .relic-icon:hover .relic-tooltip {
        opacity: 0;
    }
    .relic-icon:active .relic-tooltip {
        opacity: 1;
    }
}

/* ============================================================
   TUTORIAL SYSTEM
   ============================================================ */

/* --- Overlay container (always on top, passes clicks through) --- */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;           /* Let gameplay clicks through by default */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.tutorial-overlay.visible {
    opacity: 1;
}
.tutorial-overlay.tutorial-exit {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* --- Fullscreen dark backdrop (for welcome/goodbye steps) --- */
.tutorial-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: auto;           /* Block clicks on the backdrop */
}
.tutorial-backdrop-full {
    background: rgba(6, 6, 14, 0.82);
    backdrop-filter: blur(2px);
}

/* --- Centered card (fullscreen steps) --- */
.tutorial-card {
    position: fixed;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.tutorial-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tutorial-card-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(24px) scale(0.96);
    width: min(440px, 90vw);
    background: linear-gradient(145deg, var(--bg-light) 0%, var(--bg-mid) 100%);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 36px 32px 28px;
    text-align: center;
    box-shadow:
        0 0 40px rgba(196, 154, 60, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.5);
}
.tutorial-card-center.visible {
    transform: translate(-50%, -50%) translateY(0) scale(1);
}

.tutorial-card-icon {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}

.tutorial-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-glow);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}

.tutorial-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 24px;
}

/* --- Buttons --- */
.tutorial-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tutorial-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.tutorial-btn:active {
    transform: scale(0.96);
}

.tutorial-btn-primary {
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    padding: 10px 36px;
    box-shadow: 0 0 16px rgba(196, 154, 60, 0.35);
}
.tutorial-btn-primary:hover {
    background: var(--accent-glow);
    box-shadow: 0 0 24px rgba(228, 190, 106, 0.45);
}

.tutorial-btn-skip {
    background: transparent;
    color: var(--text-dim);
    font-size: 12px;
    padding: 6px 16px;
}
.tutorial-btn-skip:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.tutorial-progress {
    margin-top: 14px;
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 1px;
}

/* --- Spotlight (highlight mode) --- */
.tutorial-spotlight {
    position: fixed;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 9999px rgba(6, 6, 14, 0.72);
    pointer-events: none;
    transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
    z-index: 9001;
    /* Subtle pulsing glow around the highlighted area */
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    animation: tutorial-spotlight-pulse 2s ease-in-out infinite;
}

@keyframes tutorial-spotlight-pulse {
    0%, 100% { outline-color: var(--accent); box-shadow: 0 0 0 9999px rgba(6, 6, 14, 0.72); }
    50% { outline-color: var(--accent-glow); box-shadow: 0 0 0 9999px rgba(6, 6, 14, 0.68), 0 0 20px rgba(196, 154, 60, 0.3); }
}

/* --- Speech bubble --- */
.tutorial-bubble {
    position: fixed;
    pointer-events: auto;
    width: min(360px, 85vw);
    background: linear-gradient(145deg, var(--bg-light) 0%, var(--bg-mid) 100%);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 20px 22px 16px;
    box-shadow:
        0 0 30px rgba(196, 154, 60, 0.2),
        0 6px 24px rgba(0, 0, 0, 0.45);
    z-index: 9002;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.tutorial-bubble.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Arrow / pointer nubs for bubble positioning */
.tutorial-bubble::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg-light);
    border: 1px solid var(--accent);
    transform: rotate(45deg);
}

.tutorial-bubble-above::after {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.tutorial-bubble-below::after {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.tutorial-bubble-left::after {
    right: -7px;
    top: 50%;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}

.tutorial-bubble-right::after {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.tutorial-bubble-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--accent-glow);
    margin-bottom: 8px;
}

.tutorial-bubble-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 16px;
}

.tutorial-bubble-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tutorial-waiting-hint {
    font-size: 13px;
    color: var(--accent-glow);
    font-style: italic;
    animation: tutorial-waiting-pulse 1.5s ease-in-out infinite;
}

@keyframes tutorial-waiting-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Reset Tutorial button (now styled via .title-footer-btn) --- */

/* ============================================================
   SETTINGS MENU
   ============================================================ */

.settings-content {
    max-width: 520px;
    width: 90%;
    margin: 0 auto;
    padding: 40px 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    max-height: 90vh;
    overflow-y: auto;
}

.screen-overlay.visible .settings-content {
    opacity: 1;
    transform: translateY(0);
}

.screen-overlay.closing .settings-content {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.settings-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent-glow);
    margin-bottom: 24px;
}

.settings-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.settings-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-glow);
    margin-bottom: 12px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.settings-row + .settings-row {
    border-top: 1px solid rgba(51, 51, 90, 0.5);
}

.settings-label {
    font-size: 14px;
    color: var(--text);
}

/* Slider */
.settings-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--border);
    outline: none;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--accent-glow);
    transition: transform 0.15s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.settings-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--accent-glow);
}

.settings-slider-value {
    font-size: 13px;
    color: var(--text-dim);
    min-width: 36px;
    text-align: right;
}

/* Toggle button */
.settings-toggle {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    min-width: 60px;
}

.settings-toggle.active {
    background: rgba(196, 154, 60, 0.2);
    border-color: var(--accent);
    color: var(--accent-glow);
}

.settings-toggle:hover {
    border-color: var(--accent);
}

/* Button group (animation speed) */
.settings-btn-group {
    display: flex;
    gap: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.settings-choice {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.settings-choice + .settings-choice {
    border-left: 1px solid var(--border);
}

.settings-choice.active {
    background: var(--accent);
    color: #fff;
}

.settings-choice:hover:not(.active) {
    background: rgba(196, 154, 60, 0.15);
}

/* Action buttons (Reset Tutorial, Delete All) */
.settings-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.settings-action-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.settings-danger-btn {
    border-color: rgba(231, 76, 60, 0.4);
    color: var(--hp-red);
}

.settings-danger-btn:hover {
    border-color: var(--hp-red);
    background: rgba(231, 76, 60, 0.1);
}

.settings-confirm-state {
    background: rgba(231, 76, 60, 0.2) !important;
    border-color: var(--hp-red) !important;
    color: #fff !important;
    animation: settingsFlash 0.5s ease;
}

@keyframes settingsFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* About section */
.settings-about {
    text-align: center;
    background: transparent;
    border: none;
}

.settings-about-text {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.settings-about-version {
    font-size: 12px;
    color: rgba(136, 136, 170, 0.5);
    letter-spacing: 1px;
}

/* Close button */
.settings-close-btn {
    display: block;
    margin: 24px auto 0;
    padding: 14px 60px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.settings-close-btn:hover {
    border-color: var(--accent);
    background: rgba(196, 154, 60, 0.1);
}

/* Gear button in top bar */
.settings-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    font-size: 18px;
}

.settings-btn svg {
    transition: transform 0.3s ease;
}
.settings-btn:hover {
    background: rgba(196, 154, 60, 0.12);
    border-color: rgba(196, 154, 60, 0.3);
    color: var(--accent-glow);
}
.settings-btn:hover svg {
    transform: rotate(60deg);
}

/* Title screen settings & statistics (now styled via .title-footer-btn) */

/* ============================================================
   STATISTICS SCREEN
   ============================================================ */

.statistics-content {
    max-width: 560px;
    width: 90%;
    margin: 0 auto;
    padding: 40px 30px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    max-height: 90vh;
    overflow-y: auto;
}

.screen-overlay.visible .statistics-content {
    opacity: 1;
    transform: translateY(0);
}

.screen-overlay.closing .statistics-content {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.statistics-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent-glow);
    margin-bottom: 24px;
}

/* Stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.stats-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-card-wide {
    grid-column: span 3;
}

.stats-card-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-glow);
}

.stats-card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}

/* Run history */
.stats-history-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text);
    margin-bottom: 12px;
    text-align: center;
}

.stats-run-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.stats-run-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.stats-run-row:hover {
    border-color: var(--accent);
    background: rgba(196, 154, 60, 0.08);
}

.stats-run-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.stats-run-floor {
    font-weight: 700;
    color: var(--text);
    min-width: 60px;
}

.stats-run-enemies {
    color: var(--text-dim);
    flex: 1;
}

.stats-run-duration {
    color: var(--text-dim);
    min-width: 50px;
    text-align: right;
}

.stats-run-fp {
    color: var(--legendary-gold);
    font-weight: 700;
    min-width: 50px;
    text-align: right;
}

.stats-no-runs {
    text-align: center;
    color: var(--text-dim);
    padding: 30px 0;
    font-size: 14px;
}

/* Detail view */
.stats-detail {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stats-detail-back {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 13px;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    margin-bottom: 16px;
}

.stats-detail-back:hover {
    border-color: var(--accent);
    color: var(--text);
}

.stats-detail-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

.stats-detail-icon {
    font-size: 28px;
}

.stats-detail-result {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-glow);
}

.stats-detail-date {
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 20px;
}

.stats-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.stats-detail-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-detail-stat-wide {
    grid-column: span 2;
}

.stats-detail-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
}

.stats-detail-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

/* Statistics close button */
.statistics-close-btn {
    display: block;
    margin: 20px auto 0;
    padding: 14px 60px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.statistics-close-btn:hover {
    border-color: var(--accent);
    background: rgba(196, 154, 60, 0.1);
}

/* ===== Ascension Badge (Top Bar) ===== */
#ascension-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
}
#ascension-badge.hidden { display: none; }

/* ===== Daily Run Badge (Top Bar) ===== */
#daily-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    animation: dailyPulse 2.5s ease-in-out infinite alternate;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
}
#daily-badge.hidden { display: none; }
@keyframes dailyPulse {
    0% { border-color: rgba(245, 166, 35, 0.25); text-shadow: none; }
    100% { border-color: rgba(245, 166, 35, 0.5); text-shadow: 0 0 6px rgba(245, 166, 35, 0.3); }
}

/* ===== Ascension Selector (Title Screen) ===== */
.title-ascension-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 12px 0 4px;
}

.ascension-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.ascension-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ascension-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
    font-weight: 700;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    line-height: 1;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ascension-btn:hover:not(:disabled) {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

.ascension-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.ascension-value {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
    min-width: 36px;
    text-align: center;
}

.ascension-desc-text {
    max-width: 320px;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
}

.ascension-mod {
    padding: 1px 0;
}

/* ===== Ascension Badge on Game Over / Victory ===== */
.gameover-ascension-badge,
.victory-ascension-badge {
    display: inline-block;
    padding: 4px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--radius-sm);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* ===== Game Over: Death Context ===== */
.gameover-death-cause {
    color: rgba(255, 130, 120, 0.8);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}
.gameover-death-cause strong {
    color: #ff8a7a;
}

.gameover-relics {
    margin-bottom: 20px;
}
.gameover-relic-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.go-relic {
    font-size: 22px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(196, 154, 60, 0.2);
    border-radius: var(--radius-sm);
    cursor: help;
}

/* ===== Collection Overlay (Bestiary & Face Collection) ===== */

.collection-overlay {
    z-index: 3100;
}

.collection-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    margin: 5vh auto;
    padding: 32px 28px 24px;
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 8px 60px rgba(0, 0, 0, 0.8);
    overflow-y: auto;
}

.collection-header {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.collection-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--accent-glow);
    text-shadow: 0 0 20px rgba(196, 154, 60, 0.5);
    margin-bottom: 12px;
}

.collection-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.collection-progress-bar {
    width: 240px;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.collection-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-glow));
    border-radius: 4px;
    transition: width 0.6s ease;
}

.collection-progress-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-glow);
    letter-spacing: 1px;
}

.collection-close-btn {
    margin-top: 20px;
    padding: 10px 36px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
}

.collection-close-btn:hover {
    background: var(--accent);
    border-color: var(--accent-glow);
}

/* ===== Bestiary ===== */

.bestiary-body {
    width: 100%;
}

.bestiary-category {
    margin-bottom: 20px;
}

.bestiary-cat-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.bestiary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.bestiary-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform 0.2s, border-color 0.2s;
}

.bestiary-card:hover {
    transform: translateY(-2px);
}

.bestiary-undiscovered {
    border-color: rgba(50, 50, 80, 0.5);
    opacity: 0.6;
}

.bestiary-undiscovered:hover {
    border-color: var(--accent);
    opacity: 0.8;
}

.bestiary-encountered {
    border-color: var(--border);
}

.bestiary-defeated {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-dark), rgba(196, 154, 60, 0.08));
}

.bestiary-sprite-wrap {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.bestiary-sprite-canvas {
    width: 80px;
    height: 80px;
}

.bestiary-silhouette {
    filter: brightness(0) saturate(0) opacity(0.3);
}

.bestiary-card-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bestiary-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.bestiary-undiscovered .bestiary-name {
    color: var(--text-dim);
    font-style: italic;
}

.bestiary-hp {
    font-size: 12px;
    color: var(--hp-red);
    font-weight: 600;
}

.bestiary-pattern {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.4;
}

.bestiary-details {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
}

.bestiary-undefeated {
    color: var(--energy-yellow);
}

.bestiary-defeat-stats {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

.bestiary-stat {
    font-size: 11px;
    color: var(--accent-glow);
}

.bestiary-stat strong {
    color: var(--text);
}

/* ===== Face Collection ===== */

.face-collection-body {
    width: 100%;
}

.face-collection-category {
    margin-bottom: 20px;
}

.face-cat-label {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.face-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.face-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.face-card:hover {
    transform: translateY(-2px);
}

.face-discovered {
    background: linear-gradient(180deg, var(--bg-dark), rgba(196, 154, 60, 0.06));
}

.face-discovered:hover {
    box-shadow: 0 4px 20px rgba(196, 154, 60, 0.2);
}

.face-undiscovered {
    opacity: 0.45;
    border-style: dashed;
}

.face-undiscovered:hover {
    opacity: 0.65;
}

.face-card-icon {
    font-size: 28px;
    margin-bottom: 6px;
    line-height: 1;
}

.face-icon-hidden {
    font-size: 24px;
    font-weight: 700;
}

.face-card-name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}

.face-name-hidden {
    color: var(--text-dim);
    font-style: italic;
}

.face-card-value {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
}

.face-card-desc {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.3;
    margin-top: 4px;
}

.face-desc-hidden {
    font-style: italic;
    color: rgba(136, 136, 170, 0.5);
}

.face-card-rolled {
    font-size: 10px;
    color: var(--accent-glow);
    margin-top: 6px;
}

.face-card-rarity {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-top: 2px;
}

/* ===== Collection Menu (sub-menu from title) ===== */

.collection-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
    width: 90%;
    margin: 15vh auto;
    padding: 36px 28px 28px;
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 8px 60px rgba(0, 0, 0, 0.8);
}

.collection-menu-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin: 20px 0;
}

.collection-menu-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text);
    font-family: inherit;
    text-align: center;
}

.collection-menu-card:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg-dark), rgba(196, 154, 60, 0.1));
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(196, 154, 60, 0.2);
}

.collection-menu-card-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.collection-menu-card-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.collection-menu-card-progress {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.collection-menu-card-bar {
    width: 180px;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.collection-menu-card-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-glow));
    border-radius: var(--radius-pill);
    transition: width 0.6s ease;
}

/* ===================================================================
   SCREEN TRANSITIONS & VISUAL JUICE
   =================================================================== */

/* --- Transition Overlay Base --- */
#transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

#transition-overlay.transition-active {
    visibility: visible;
}

/* --- Fade to Black --- */
#transition-overlay.transition-fade-to-black {
    background: #000;
    opacity: 0;
    transition: opacity var(--transition-duration, 400ms) ease;
}

#transition-overlay.transition-fade-to-black.transition-in {
    opacity: 1;
}

/* --- Fade from Black --- */
#transition-overlay.transition-fade-from-black {
    background: #000;
    opacity: 1;
    transition: opacity var(--transition-duration, 400ms) ease;
}

#transition-overlay.transition-fade-from-black.transition-out {
    opacity: 0;
}

/* --- Slide Transition --- */
#transition-overlay.transition-slide {
    background: #000;
    transition: transform var(--transition-duration, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
}

#transition-overlay.transition-slide-up {
    transform: translateY(100%);
    opacity: 1;
}

#transition-overlay.transition-slide-up.transition-in {
    transform: translateY(0%);
}

#transition-overlay.transition-slide-up.transition-out {
    transform: translateY(-100%);
}

#transition-overlay.transition-slide-down {
    transform: translateY(-100%);
    opacity: 1;
}

#transition-overlay.transition-slide-down.transition-in {
    transform: translateY(0%);
}

#transition-overlay.transition-slide-down.transition-out {
    transform: translateY(100%);
}

/* --- Camera Flash (white) --- */
#transition-overlay.transition-flash {
    background: #fff;
    opacity: 0;
}

#transition-overlay.transition-flash.transition-in {
    animation: cameraFlashAnim var(--flash-duration, 200ms) ease-out forwards;
}

@keyframes cameraFlashAnim {
    0% { opacity: var(--flash-opacity, 0.3); }
    100% { opacity: 0; }
}

/* --- Red Damage Vignette --- */
#transition-overlay.transition-vignette {
    opacity: 0;
}

#transition-overlay.transition-vignette.transition-in {
    animation: damageVignetteAnim var(--vignette-duration, 500ms) ease-out forwards;
}

@keyframes damageVignetteAnim {
    0% {
        opacity: 1;
        background: radial-gradient(ellipse at center, transparent 40%, rgba(180, 20, 20, var(--vignette-intensity, 0.5)) 100%);
    }
    100% {
        opacity: 0;
        background: radial-gradient(ellipse at center, transparent 40%, rgba(180, 20, 20, var(--vignette-intensity, 0.5)) 100%);
    }
}

/* --- Screen Shake Variants (damage-scaled) --- */
/* --- Green Heal Vignette --- */
#transition-overlay.transition-heal-vignette {
    opacity: 0;
}

#transition-overlay.transition-heal-vignette.transition-in {
    animation: healVignetteAnim var(--heal-vignette-duration, 600ms) ease-out forwards;
}

@keyframes healVignetteAnim {
    0% {
        opacity: 1;
        background: radial-gradient(ellipse at center, transparent 45%, rgba(46, 204, 113, var(--heal-vignette-intensity, 0.3)) 100%);
    }
    100% {
        opacity: 0;
        background: radial-gradient(ellipse at center, transparent 45%, rgba(46, 204, 113, var(--heal-vignette-intensity, 0.3)) 100%);
    }
}

/* --- HP Bar Heal Flash (green glow) --- */
#hp-fill.hp-heal-flash {
    animation: hpHealFlash 0.5s ease-out;
}

@keyframes hpHealFlash {
    0% { filter: brightness(1.8) saturate(1.5); box-shadow: inset 0 0 12px rgba(46, 204, 113, 0.6); }
    30% { filter: brightness(1.4) saturate(1.3); box-shadow: inset 0 0 8px rgba(46, 204, 113, 0.4); }
    100% { filter: brightness(1) saturate(1); box-shadow: none; }
}

/* --- HP Bar Container Heal Glow --- */
#hp-bar.hp-bar-heal-glow {
    animation: hpBarHealGlow 0.6s ease-out;
}

@keyframes hpBarHealGlow {
    0% { box-shadow: 0 0 8px rgba(46, 204, 113, 0.5), 0 0 16px rgba(46, 204, 113, 0.2); }
    40% { box-shadow: 0 0 12px rgba(46, 204, 113, 0.3), 0 0 8px rgba(46, 204, 113, 0.1); }
    100% { box-shadow: none; }
}

/* --- Screen Shake Variants (damage-scaled) --- */
#game.shake-light {
    animation: shakeLightAnim 0.3s ease;
}

#game.shake-medium {
    animation: shakeMediumAnim 0.45s ease;
}

#game.shake-heavy {
    animation: shakeHeavyAnim 0.6s ease;
}

@keyframes shakeLightAnim {
    0%, 100% { transform: translate(0, 0); }
    15% { transform: translate(-2px, 1px); }
    30% { transform: translate(2px, -1px); }
    45% { transform: translate(-1px, 1px); }
    60% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, 0); }
}

@keyframes shakeMediumAnim {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, 2px) rotate(-0.5deg); }
    20% { transform: translate(4px, -2px) rotate(0.5deg); }
    30% { transform: translate(-3px, 1px) rotate(-0.3deg); }
    40% { transform: translate(3px, -1px) rotate(0.3deg); }
    50% { transform: translate(-2px, 1px); }
    60% { transform: translate(2px, -1px); }
    70% { transform: translate(-1px, 0); }
    80% { transform: translate(1px, 0); }
}

@keyframes shakeHeavyAnim {
    0%, 100% { transform: translate(0, 0); }
    5% { transform: translate(-8px, 3px) rotate(-1deg); }
    10% { transform: translate(8px, -3px) rotate(1deg); }
    15% { transform: translate(-7px, 2px) rotate(-0.8deg); }
    20% { transform: translate(7px, -2px) rotate(0.8deg); }
    25% { transform: translate(-6px, 2px) rotate(-0.6deg); }
    30% { transform: translate(6px, -2px) rotate(0.6deg); }
    40% { transform: translate(-4px, 1px) rotate(-0.3deg); }
    50% { transform: translate(4px, -1px) rotate(0.3deg); }
    60% { transform: translate(-2px, 1px); }
    70% { transform: translate(2px, 0); }
    80% { transform: translate(-1px, 0); }
}

/* --- HP Bar Flash White on Damage --- */
#hp-fill.hp-damage-flash {
    animation: hpDamageFlash 0.4s ease-out;
}

@keyframes hpDamageFlash {
    0% { filter: brightness(3) saturate(0); }
    30% { filter: brightness(2) saturate(0.5); }
    100% { filter: brightness(1) saturate(1); }
}

/* Low HP critical pulse — urgent heartbeat glow */
#hp-fill.hp-critical {
    animation: hpCriticalPulse 1.2s ease-in-out infinite;
}

@keyframes hpCriticalPulse {
    0%, 100% {
        box-shadow: inset 0 0 8px rgba(255, 50, 50, 0.3);
        filter: brightness(1);
    }
    50% {
        box-shadow: inset 0 0 16px rgba(255, 50, 50, 0.6);
        filter: brightness(1.15) saturate(1.3);
    }
}

#hp-bar.hp-bar-critical {
    animation: hpBarCriticalGlow 1.2s ease-in-out infinite;
}

@keyframes hpBarCriticalGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 50, 50, 0.2); }
    50% { box-shadow: 0 0 12px rgba(255, 50, 50, 0.5); }
}

/* --- Gold Gain Floating Text --- */
.floating-gold {
    position: fixed;
    font-size: 24px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 2px 8px rgba(241, 196, 15, 0.6), 0 0 20px rgba(241, 196, 15, 0.3);
    pointer-events: none;
    z-index: 8000;
    animation: floatGoldUp 1.2s ease-out forwards;
    white-space: nowrap;
}

@keyframes floatGoldUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    20% { transform: translateY(-10px) scale(1.2); }
    60% { opacity: 1; transform: translateY(-50px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.9); }
}

/* --- Gold Counter Pulse --- */
#gold-info.gold-pulse {
    animation: goldCounterPulse 0.5s ease-out;
}

@keyframes goldCounterPulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.25); text-shadow: 0 0 15px rgba(241, 196, 15, 0.6); }
    100% { transform: scale(1); text-shadow: none; }
}

/* --- Gold Coin Particles (CSS-based) --- */
.gold-coin-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffd700, #daa520);
    box-shadow: 0 0 4px rgba(241, 196, 15, 0.6);
    pointer-events: none;
    z-index: 8001;
    animation: goldCoinBurst var(--coin-duration, 0.8s) ease-out forwards;
}

@keyframes goldCoinBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--coin-dx, 20px), var(--coin-dy, -40px)) scale(0.3);
    }
}

/* --- Die Spent: Fly to Discard --- */
.die-container.spent-fly {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- Pile Count Bump — noticeable flash + scale --- */
#discard-count.bump {
    animation: pileBump 0.5s ease-out;
}
#bag-count.bump {
    animation: pileBump 0.5s ease-out;
}
@keyframes pileBump {
    0% { transform: scale(1); }
    20% { transform: scale(1.6); color: #fff; text-shadow: 0 0 8px rgba(196, 154, 60, 0.8); }
    50% { transform: scale(1.1); color: var(--accent-glow); }
    100% { transform: scale(1); text-shadow: none; }
}

/* --- Reshuffle: ghost dice fly from discard → draw pile --- */
.reshuffle-ghost {
    position: fixed;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(162, 155, 254, 0.9), rgba(130, 120, 220, 0.7));
    border: 1.5px solid rgba(200, 195, 255, 0.6);
    box-shadow: 0 0 8px rgba(162, 155, 254, 0.5), 0 0 3px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 0.9;
    transition: none;
}

.reshuffle-ghost.reshuffle-fly {
    transition: transform var(--rs-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity var(--rs-duration) ease-in;
    transform: translate(
        calc(-50% + var(--rs-dx)),
        calc(-50% + var(--rs-dy) + var(--rs-arc))
    ) scale(0.5) rotate(var(--rs-spin));
    opacity: 0.3;
}

.pile-btn.reshuffle-source {
    animation: reshuffleSource 0.5s ease-out;
}

@keyframes reshuffleSource {
    0%   { transform: translateY(0) scale(1); }
    25%  { transform: translateY(-3px) scale(1.08); filter: brightness(1.3); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

/* --- Energy Spend: Spark Fly --- */
.energy-spark {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff8e0, #ffeaa7, var(--energy-yellow));
    box-shadow:
        0 0 8px rgba(243, 156, 18, 0.9),
        0 0 20px rgba(243, 156, 18, 0.5),
        0 0 40px rgba(243, 156, 18, 0.2);
    pointer-events: none;
    z-index: 8001;
    animation: sparkFly var(--spark-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Light trail behind spark */
.energy-spark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 4px;
    transform: translate(-100%, -50%);
    background: linear-gradient(90deg, transparent, rgba(243, 156, 18, 0.3), rgba(255, 234, 167, 0.6));
    border-radius: 2px;
    filter: blur(2px);
}

@keyframes sparkFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1.3);
        filter: brightness(1.5);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--spark-dx, 100px) * 0.5), calc(var(--spark-dy, -50px) * 0.5)) scale(1);
        filter: brightness(1.2);
    }
    85% {
        opacity: 1;
        transform: translate(var(--spark-dx, 100px), var(--spark-dy, -50px)) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(var(--spark-dx, 100px), var(--spark-dy, -50px)) scale(0.2);
        filter: brightness(2);
    }
}

/* --- Energy Number Tick-Down --- */
#energy-value.tick-down {
    animation: energyTickDown 0.35s ease-out;
}

@keyframes energyTickDown {
    0% { transform: translateY(-8px); opacity: 0; }
    40% { transform: translateY(2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

/* --- Die Roll Anticipation (Wind-Up) --- */
.die-container.roll-windup .die {
    animation: dieWindUp 0.2s ease-out forwards !important;
}

@keyframes dieWindUp {
    0% { transform: scale(1) rotateX(-8deg) rotateY(10deg); }
    50% { transform: scale(0.92) rotateX(-8deg) rotateY(10deg); }
    100% { transform: scale(1.08) rotateX(-8deg) rotateY(10deg); }
}

/* --- Die Landing Impact (Squash & Stretch) --- */
.die.land-impact {
    animation: dieLandImpact 0.35s ease-out !important;
}

@keyframes dieLandImpact {
    0% { transform: scaleX(1) scaleY(1) translateY(0); }
    15% { transform: scaleX(1.15) scaleY(0.85) translateY(2px); filter: brightness(1.2); }
    35% { transform: scaleX(0.92) scaleY(1.08) translateY(-4px); }
    55% { transform: scaleX(1.05) scaleY(0.96) translateY(1px); }
    75% { transform: scaleX(0.98) scaleY(1.02) translateY(-1px); }
    100% { transform: scaleX(1) scaleY(1) translateY(0); filter: brightness(1); }
}

/* --- Enemy Death Dissolve & Shake --- */
#enemy-sprite.death-shake {
    animation: enemyDeathShake 0.5s ease;
}

@keyframes enemyDeathShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-4px) rotate(-1deg); }
    20% { transform: translateX(4px) rotate(1deg); }
    30% { transform: translateX(-3px) rotate(-1deg); }
    40% { transform: translateX(3px) rotate(1deg); }
    50% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}

#enemy-sprite.death-dissolve {
    animation: enemyDissolve 0.8s ease-out forwards;
}

@keyframes enemyDissolve {
    0% { opacity: 1; filter: brightness(1); transform: scale(1) translateX(0); }
    10% { opacity: 0.95; filter: brightness(2) saturate(1.5); transform: scale(1.08) translateX(0); }
    25% { opacity: 0.7; filter: brightness(2.5) hue-rotate(20deg) saturate(0.6); transform: scale(1.02) translateX(-8px); }
    45% { opacity: 0.4; filter: brightness(3) hue-rotate(40deg) saturate(0.3); transform: scaleX(0.85) scaleY(1.1) translateX(-20px); }
    70% { opacity: 0.15; filter: brightness(3.5) hue-rotate(60deg) blur(4px); transform: scaleX(0.6) scaleY(0.9) translateX(-40px); }
    100% { opacity: 0; filter: brightness(4) hue-rotate(80deg) blur(8px); transform: scaleX(0.3) scaleY(0.7) translateX(-60px); }
}

/* --- Die Ghost Trail (for roll zone tumbling) --- */
.die-ghost-trail {
    position: absolute;
    pointer-events: none;
    opacity: 0.3;
    filter: blur(1px);
    animation: ghostTrailFade 0.3s ease-out forwards;
}

.die-ghost-trail:nth-child(1) { opacity: 0.2; }
.die-ghost-trail:nth-child(2) { opacity: 0.15; }
.die-ghost-trail:nth-child(3) { opacity: 0.1; }

@keyframes ghostTrailFade {
    0% { opacity: inherit; }
    100% { opacity: 0; }
}

/* --- Dust Cloud on Die Landing --- */
.dust-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(200, 200, 220, 0.3);
    pointer-events: none;
    z-index: 10;
    animation: dustPuff var(--dust-duration, 0.5s) ease-out forwards;
}

@keyframes dustPuff {
    0% {
        opacity: 0.6;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dust-dx, 10px), var(--dust-dy, 5px)) scale(0.2);
    }
}

/* ===================================================================
   TOOLTIP & INFO SYSTEM
   =================================================================== */

/* --- Die Info Tooltip (on reward/shop die cards) --- */
.reward-die-reward-card,
.shop-die-card {
    position: relative;
}

.die-info-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 18, 0.96);
    border: 1px solid rgba(100, 100, 160, 0.5);
    border-radius: 6px;
    padding: 10px 14px;
    min-width: 180px;
    max-width: 240px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease 0.15s;
    z-index: 200;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7);
    text-align: left;
}

.reward-die-reward-card:hover .die-info-tooltip,
.shop-die-card:hover .die-info-tooltip {
    opacity: 1;
}

.die-info-tooltip-header {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 4px;
}

.die-info-tooltip-cost {
    font-size: 11px;
    color: var(--energy-yellow);
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.die-info-tooltip-faces {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.die-info-tooltip-face {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    padding: 2px 0;
}

.die-info-tooltip-face[data-face-type="damage"] { color: var(--damage-red); }
.die-info-tooltip-face[data-face-type="block"]  { color: var(--block-blue); }
.die-info-tooltip-face[data-face-type="heal"]   { color: var(--heal-green); }
.die-info-tooltip-face[data-face-type="poison"] { color: var(--poison-green); }
.die-info-tooltip-face[data-face-type="utility"] { color: #bf7fff; }
.die-info-tooltip-face[data-face-type="status"] { color: #e0b0ff; }
.die-info-tooltip-face[data-face-type="curse"]  { color: #cc99ff; }
.die-info-tooltip-face[data-face-type="blank"]  { color: var(--text-dim); }

.die-info-tooltip-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Arrow pointing down */
.die-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(10, 10, 18, 0.96);
}

/* --- Status Effect Tooltips (on .stat-bubble) --- */
.stat-bubble {
    position: relative;
    cursor: default;
}

.status-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 18, 0.95);
    color: #e0e0f0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    padding: 7px 12px 7px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(100, 100, 160, 0.4);
    border-left: 3px solid currentColor;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease 0.15s;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

/* Tooltip arrow */
.status-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(10, 10, 18, 0.95);
}

/* Flipped: open downward instead of upward */
.status-tooltip.tooltip-flip-y {
    bottom: auto;
    top: calc(100% + 8px);
}
.status-tooltip.tooltip-flip-y::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(10, 10, 18, 0.95);
}
/* Horizontal clamping */
.status-tooltip.tooltip-shift-left {
    left: auto;
    right: 0;
    transform: none;
}
.status-tooltip.tooltip-shift-left::after { left: auto; right: 12px; transform: none; }
.status-tooltip.tooltip-shift-right {
    left: 0;
    transform: none;
}
.status-tooltip.tooltip-shift-right::after { left: 12px; transform: none; }

/* Show on hover (desktop) and active/touch (mobile) */
.stat-bubble:hover .status-tooltip,
.stat-bubble:active .status-tooltip {
    opacity: 1;
}

/* --- Enemy Intent Tooltip --- */
#enemy-intent {
    position: relative;
    cursor: default;
}

.intent-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 18, 0.95);
    color: #e0e0f0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(100, 100, 160, 0.4);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.intent-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(10, 10, 18, 0.95);
}

/* Flipped: open downward */
.intent-tooltip.tooltip-flip-y {
    bottom: auto;
    top: calc(100% + 8px);
}
.intent-tooltip.tooltip-flip-y::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(10, 10, 18, 0.95);
}

#enemy-intent:hover .intent-tooltip,
#enemy-intent:active .intent-tooltip {
    opacity: 1;
}

/* --- Energy Orb Tooltip --- */
#energy-orb {
    position: relative;
    cursor: default;
}

.energy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 18, 0.95);
    color: #e0e0f0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(100, 100, 160, 0.4);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.energy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(10, 10, 18, 0.95);
}

#energy-orb:hover .energy-tooltip,
#energy-orb:active .energy-tooltip {
    opacity: 1;
}

/* --- Face Type Help Button --- */
#face-help-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(196, 154, 60, 0.2);
    border: 1px solid rgba(196, 154, 60, 0.4);
    color: var(--accent-glow);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#face-help-btn:hover {
    background: rgba(196, 154, 60, 0.4);
    transform: scale(1.1);
}

/* --- Face Help Modal --- */
#face-help-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#face-help-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.face-help-content {
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    max-width: 380px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.face-help-content h3 {
    text-align: center;
    color: var(--accent-glow);
    margin-bottom: 14px;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.face-help-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(50, 50, 80, 0.3);
}

.face-help-row:last-child {
    border-bottom: none;
}

.face-help-swatch {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.face-help-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    min-width: 60px;
}

.face-help-desc {
    font-size: 12px;
    color: var(--text-dim);
}

.face-help-close {
    display: block;
    margin: 14px auto 0;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.face-help-close:hover {
    background: var(--accent-glow);
}

/* --- Context Hint Toasts --- */
.context-hint {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(10, 10, 18, 0.92);
    color: #e0e0f0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(196, 154, 60, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 90vw;
    text-align: center;
}

.context-hint.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.context-hint.fade-out {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
}

/* --- Player Block Tooltip (reuses stat-bubble tooltip) --- */
#player-block {
    position: relative;
    cursor: default;
}

#enemy-block {
    position: relative;
    cursor: default;
}

/* --- Responsive tooltip adjustments --- */
@media (max-width: 700px) {
    .status-tooltip,
    .intent-tooltip,
    .energy-tooltip {
        font-size: 11px;
        padding: 5px 8px;
        max-width: 200px;
        white-space: normal;
    }
}


/* Daily Challenge Button (now styled via .title-btn-daily) */

/* ===== Daily Challenge Screen ===== */
.daily-overlay {
    z-index: 3100;
}

.daily-content {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    padding: 40px 30px;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
}

.daily-glow {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(74, 157, 217, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.daily-title {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: #6ab4e0;
    text-shadow: 0 0 30px rgba(74, 157, 217, 0.5);
    margin-bottom: 6px;
}

.daily-subtitle {
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 24px;
}

.daily-seed-display {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    padding: 12px 24px;
    background: rgba(74, 157, 217, 0.08);
    border: 1px solid rgba(74, 157, 217, 0.25);
    border-radius: var(--radius-md);
}

.daily-seed-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
}

.daily-seed-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #6ab4e0;
    font-family: 'Courier New', monospace;
}

.daily-today-score {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 16px 0;
    padding: 10px 20px;
    background: rgba(74, 157, 217, 0.06);
    border: 1px solid rgba(74, 157, 217, 0.15);
    border-radius: var(--radius-md);
}

.daily-score-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
}

.daily-score-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #6ab4e0;
}

.daily-rules,
.daily-scoring {
    text-align: left;
    margin: 16px 0;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.daily-rules-title,
.daily-scoring-title,
.daily-history-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6ab4e0;
    margin-bottom: 10px;
}

.daily-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.daily-rules-list li {
    padding: 3px 0;
    padding-left: 16px;
    position: relative;
}

.daily-rules-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: #6ab4e0;
}

.daily-scoring-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 20px;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.daily-scoring-grid span:nth-child(even) {
    text-align: right;
    color: #6ab4e0;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.daily-history {
    margin: 16px 0;
}

.daily-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.daily-history-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.daily-history-today {
    border-color: rgba(74, 157, 217, 0.3);
    background: rgba(74, 157, 217, 0.06);
}

.daily-history-victory {
    border-color: rgba(46, 204, 113, 0.3);
}

.daily-history-date {
    color: var(--text-dim);
    min-width: 60px;
}

.daily-history-score {
    color: var(--text);
    font-weight: 600;
    font-family: 'Courier New', monospace;
    flex: 1;
    text-align: right;
    margin-right: 8px;
}

.daily-history-badge {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.2);
    color: var(--heal-green);
    font-size: 0.7rem;
    font-weight: 700;
}

.daily-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.daily-start-btn {
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(135deg, rgba(74, 157, 217, 0.2), rgba(55, 125, 180, 0.2));
    border: 2px solid #00bcd4;
    color: #6ab4e0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s;
}

.daily-start-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(74, 157, 217, 0.35), rgba(55, 125, 180, 0.35));
    box-shadow: 0 0 25px rgba(74, 157, 217, 0.3);
    transform: translateY(-2px);
}

.daily-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed !important;
}

.daily-btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.daily-back-btn {
    padding: 10px 24px;
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.daily-back-btn:hover {
    border-color: var(--text-dim);
    color: var(--text);
}

/* ===== Daily Score Screen ===== */
.daily-score-overlay {
    z-index: 200;
}

.daily-score-content {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 30px;
    text-align: center;
    max-height: 90vh;
    overflow-y: auto;
}

.daily-score-glow {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(74, 157, 217, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.daily-score-title {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #6ab4e0;
    text-shadow: 0 0 25px rgba(74, 157, 217, 0.5);
    margin-bottom: 4px;
}

.daily-score-date {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 24px;
    font-family: 'Courier New', monospace;
}

.daily-score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 20px;
}

.daily-score-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    opacity: 0;
    animation: dailyScoreReveal 0.4s ease forwards;
}

@keyframes dailyScoreReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.daily-score-row-label {
    text-align: left;
    font-size: 0.9rem;
    color: var(--text);
}

.daily-score-row-calc {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-family: 'Courier New', monospace;
}

.daily-score-row-value {
    font-size: 1rem;
    font-weight: 700;
    color: #6ab4e0;
    text-align: right;
    min-width: 60px;
    font-family: 'Courier New', monospace;
}

.daily-score-total-section {
    margin: 20px 0;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(74, 157, 217, 0.1), rgba(55, 125, 180, 0.06));
    border: 2px solid rgba(74, 157, 217, 0.3);
    border-radius: var(--radius-md);
    animation: dailyTotalPulse 2s ease-in-out infinite;
}

@keyframes dailyTotalPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(74, 157, 217, 0.1); }
    50% { box-shadow: 0 0 30px rgba(74, 157, 217, 0.25); }
}

.daily-score-total-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.daily-score-total-value {
    font-size: 2.4rem;
    font-weight: 800;
    color: #6ab4e0;
    text-shadow: 0 0 20px rgba(74, 157, 217, 0.4);
    font-family: 'Courier New', monospace;
}

.daily-score-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(74, 157, 217, 0.1);
    border: 1px solid rgba(74, 157, 217, 0.3);
    border-radius: 4px;
    color: #6ab4e0;
    font-weight: 600;
    font-size: 0.95rem;
    margin: 8px 0;
}

.daily-score-new-best {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
    color: var(--heal-green);
}

.daily-score-compare {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 8px 0;
}

.daily-run-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 20px 0;
}

.daily-run-stat {
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.daily-run-stat span:first-child {
    color: var(--text-dim);
}

.daily-run-stat span:last-child {
    font-weight: 600;
    color: var(--text);
}

.daily-score-continue-btn {
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(74, 157, 217, 0.2), rgba(55, 125, 180, 0.2));
    border: 2px solid #00bcd4;
    color: #6ab4e0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 16px;
}

.daily-score-continue-btn:hover {
    background: linear-gradient(135deg, rgba(74, 157, 217, 0.35), rgba(55, 125, 180, 0.35));
    box-shadow: 0 0 25px rgba(74, 157, 217, 0.3);
    transform: translateY(-2px);
}

/* ===== Achievement System ===== */

/* --- Toast Notification --- */
.achievement-toast {
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(20, 20, 35, 0.97), rgba(30, 30, 55, 0.97));
    border: 2px solid var(--legendary-gold);
    border-radius: var(--radius-md);
    box-shadow:
        0 0 30px rgba(243, 156, 18, 0.4),
        0 0 60px rgba(243, 156, 18, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    opacity: 0;
    min-width: 320px;
    max-width: 500px;
    overflow: hidden;
}

.achievement-toast.visible {
    top: 24px;
    opacity: 1;
}

.achievement-toast.fade-out {
    top: -120px;
    opacity: 0;
    transition: top 0.5s ease-in, opacity 0.4s ease;
}

.achievement-toast-glow {
    position: absolute;
    inset: -2px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(243, 156, 18, 0.2) 25%,
        rgba(243, 156, 18, 0.4) 50%,
        rgba(243, 156, 18, 0.2) 75%,
        transparent 100%
    );
    animation: achievement-glow-sweep 1.5s ease-in-out;
    pointer-events: none;
    opacity: 0;
}

@keyframes achievement-glow-sweep {
    0% { opacity: 0; transform: translateX(-100%); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}

.achievement-toast-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(243, 156, 18, 0.5));
    animation: achievement-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes achievement-icon-pop {
    0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
    60% { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.achievement-toast-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.achievement-toast-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--legendary-gold);
    font-weight: 700;
}

.achievement-toast-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    text-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.achievement-toast-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* --- Achievements Screen Overlay --- */
.achievements-overlay {
    z-index: 3100;
}

.achievements-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-mid);
}

.achievements-header {
    text-align: center;
    margin-bottom: 24px;
    width: 100%;
}

.achievements-title {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--legendary-gold);
    text-shadow: 0 0 20px rgba(243, 156, 18, 0.3);
    margin-bottom: 16px;
}

.achievements-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.achievements-progress-bar {
    width: 300px;
    height: 8px;
    background: var(--bg-dark);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.achievements-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--legendary-gold), #f1c40f);
    border-radius: 4px;
    transition: width 0.6s ease;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.3);
}

.achievements-progress-text {
    font-size: 0.9rem;
    color: var(--text-dim);
    font-weight: 600;
}

.achievements-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

/* --- Category Headers --- */
.achievement-category {
    width: 100%;
}

.achievement-category-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-glow);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(228, 190, 106, 0.2);
}

/* --- Achievement Grid --- */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

/* --- Achievement Cards --- */
.achievement-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    background: var(--bg-mid);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Unlocked Card */
.achievement-unlocked {
    border-color: var(--legendary-gold);
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.08), rgba(241, 196, 15, 0.04));
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.1), inset 0 0 20px rgba(243, 156, 18, 0.03);
}

.achievement-unlocked::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), transparent 60%);
    pointer-events: none;
}

.achievement-unlocked:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(243, 156, 18, 0.2), 0 4px 20px rgba(0, 0, 0, 0.3);
}

.achievement-unlocked .achievement-card-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 6px rgba(243, 156, 18, 0.4));
}

/* Locked Card */
.achievement-locked {
    border-color: rgba(51, 51, 90, 0.5);
    background: rgba(10, 10, 18, 0.6);
    opacity: 0.6;
}

.achievement-locked:hover {
    opacity: 0.75;
}

.achievement-icon-locked {
    font-size: 1.4rem;
    color: var(--text-dim);
    opacity: 0.4;
    font-style: normal;
}

.achievement-card-icon {
    flex-shrink: 0;
    width: 44px;
    text-align: center;
    font-size: 1.8rem;
}

.achievement-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.achievement-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.achievement-card-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.achievement-desc-hidden {
    color: rgba(136, 136, 170, 0.4);
    font-style: italic;
}

.achievement-card-date {
    font-size: 0.7rem;
    color: var(--legendary-gold);
    opacity: 0.7;
    margin-top: 2px;
}

/* --- Close Button --- */
.achievements-close-btn {
    padding: 12px 36px;
    font-size: 1rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(196, 154, 60, 0.2), rgba(228, 190, 106, 0.1));
    border: 2px solid var(--accent);
    color: var(--accent-glow);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 1px;
}

.achievements-close-btn:hover {
    background: linear-gradient(135deg, rgba(196, 154, 60, 0.35), rgba(228, 190, 106, 0.2));
    box-shadow: 0 0 25px rgba(196, 154, 60, 0.3);
    transform: translateY(-2px);
}

/* --- Title Screen Achievement (now in .title-meta-btn) --- */

/* ===== Class Selection Screen ===== */
/* --- Class selection overlay --- */
.class-select-overlay {
    z-index: 3100;
}

.class-select-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 920px;
    width: 95%;
    padding: 40px 36px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(100, 80, 160, 0.06) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 18, 35, 0.98) 0%, rgba(10, 8, 20, 0.99) 100%);
    border: 1px solid rgba(120, 110, 160, 0.15);
    border-radius: 8px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(120, 110, 160, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.class-select-overlay.visible .class-select-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- Title with decorative lines --- */
.class-select-header {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.class-select-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(200, 190, 230, 0.9), rgba(228, 190, 106, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.class-select-title-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120, 110, 160, 0.25), transparent);
    max-width: 120px;
}

/* --- Card grid --- */
.class-select-cards {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- Individual card --- */
.class-select-card {
    background:
        radial-gradient(ellipse at 50% 20%, rgba(var(--class-accent-rgb, 100,100,150), 0.04) 0%, transparent 70%),
        linear-gradient(180deg, rgba(25, 22, 42, 0.95) 0%, rgba(15, 12, 28, 0.98) 100%);
    border: 1.5px solid rgba(var(--class-accent-rgb, 100,100,150), 0.2);
    border-radius: 8px;
    padding: 0 20px 22px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
}

.class-select-overlay.visible .class-select-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--card-index, 0) * 0.1s + 0.2s);
}

/* Top accent bar */
.class-card-accent-bar {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--class-accent, rgba(100,100,150,0.5)), transparent);
    margin-bottom: 16px;
    border-radius: 0 0 2px 2px;
    opacity: 0.6;
}

/* --- Class-specific idle ambient effects --- */

/* Tinkerer: steady golden glow with subtle gear-like pulse */
.class-select-card[data-class-id="tinkerer"].class-card-available {
    animation: tinkererAmbient 4s ease-in-out infinite;
}
@keyframes tinkererAmbient {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 10px rgba(228, 190, 106, 0.06); }
    50% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 18px rgba(228, 190, 106, 0.12); }
}

/* Pyromancer: flickering warm firelight */
.class-select-card[data-class-id="pyromancer"].class-card-available {
    animation: pyroAmbient 2s ease-in-out infinite;
}
.class-select-card[data-class-id="pyromancer"].class-card-available .class-card-accent-bar {
    animation: pyroBarFlicker 1.5s ease-in-out infinite;
}
@keyframes pyroAmbient {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 8px rgba(255, 107, 53, 0.06); }
    30% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 16px rgba(255, 107, 53, 0.14); }
    60% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 10px rgba(255, 80, 30, 0.08); }
}
@keyframes pyroBarFlicker {
    0%, 100% { opacity: 0.5; }
    25% { opacity: 0.8; }
    50% { opacity: 0.6; }
    75% { opacity: 0.9; }
}

/* Cursed Knight: dark pulsing with brief sinister flicker */
.class-select-card[data-class-id="cursedKnight"].class-card-available {
    animation: knightAmbient 3s ease-in-out infinite;
}
@keyframes knightAmbient {
    0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 10px rgba(176, 96, 224, 0.06); }
    45% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 18px rgba(176, 96, 224, 0.15); }
    48% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 6px rgba(176, 96, 224, 0.03); }
    51% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 20px rgba(176, 96, 224, 0.18); }
}

/* --- Card hover --- */
.class-select-card.class-card-available:hover {
    border-color: var(--class-accent, var(--accent-glow));
    transform: translateY(-8px);
    animation: none;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 0 25px var(--class-glow, rgba(196, 154, 60, 0.2)),
        inset 0 0 30px rgba(var(--class-accent-rgb, 100,100,150), 0.04);
}

.class-select-card.class-card-available:hover .class-card-accent-bar {
    opacity: 1;
    height: 3px;
    box-shadow: 0 0 12px var(--class-glow, rgba(196, 154, 60, 0.3));
}

.class-select-card.class-card-available:hover .class-card-name {
    color: var(--class-accent, var(--text));
}

/* --- Chosen card --- */
.class-select-card.class-card-chosen {
    border-color: var(--heal-green) !important;
    box-shadow: 0 0 35px rgba(46, 204, 113, 0.3) !important;
    transform: scale(1.03) !important;
}

.class-select-card.class-card-chosen .class-card-accent-bar {
    background: linear-gradient(90deg, transparent, var(--heal-green), transparent) !important;
    opacity: 1 !important;
}

/* --- Locked card --- */
.class-select-card.class-card-locked {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.5) brightness(0.85);
}

.class-card-lock-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 10;
    border-radius: 8px;
    backdrop-filter: blur(3px);
}

.class-lock-icon {
    font-size: 1.8rem;
    color: rgba(200, 190, 220, 0.6);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.class-lock-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(200, 190, 220, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.class-lock-cost {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--legendary-gold, #ffd700);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 4px;
    margin-top: 2px;
}

/* --- Card content --- */
.class-card-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--class-accent-rgb, 100,100,150), 0.08) 0%, transparent 70%),
        rgba(8, 6, 18, 0.9);
    border: 2px solid rgba(var(--class-accent-rgb, 100,100,150), 0.15);
    margin-bottom: 4px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.class-preview-canvas {
    width: 120px;
    height: 120px;
}

.class-card-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
}

.class-card-desc {
    font-size: 0.82rem;
    color: var(--text-dim);
    line-height: 1.45;
    max-width: 220px;
}

.class-card-divider {
    width: 40px;
    height: 1px;
    background: rgba(var(--class-accent-rgb, 100,100,150), 0.15);
    margin: 2px 0;
}

.class-card-relic {
    font-size: 0.8rem;
    color: var(--class-accent, var(--accent-glow, #e4be6a));
    display: flex;
    align-items: center;
    gap: 5px;
}

.class-card-relic-icon {
    font-size: 1rem;
}

.class-card-hint {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-style: italic;
    opacity: 0.65;
    margin-top: 2px;
    max-width: 210px;
}

/* --- Shake animation --- */
.class-card-shake {
    animation: classCardShake 0.4s ease;
}

@keyframes classCardShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* --- Responsive --- */
@media (max-width: 860px) {
    .class-select-content {
        max-width: 600px;
    }
    .class-select-cards {
        gap: 14px;
    }
    .class-select-card {
        width: 240px;
    }
}

@media (max-width: 600px) {
    .class-select-cards {
        flex-direction: column;
        align-items: center;
    }
    .class-select-card {
        width: 90%;
        max-width: 280px;
    }
}


/* ===== Boss Phase Transition Overlay ===== */
.boss-phase-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.boss-phase-overlay.visible {
    opacity: 1;
}
.boss-phase-overlay.closing {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.boss-phase-text {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #ff4444;
    text-shadow:
        0 0 20px rgba(255, 60, 60, 0.8),
        0 0 40px rgba(255, 60, 60, 0.5),
        0 0 80px rgba(255, 0, 0, 0.3);
    animation: phaseTextPulse 0.8s ease-in-out infinite alternate;
}
.boss-phase-sub {
    font-size: 1rem;
    color: rgba(255, 150, 150, 0.9);
    margin-top: 8px;
    letter-spacing: 2px;
}
@keyframes phaseTextPulse {
    from {
        transform: scale(1);
        text-shadow:
            0 0 20px rgba(255, 60, 60, 0.8),
            0 0 40px rgba(255, 60, 60, 0.5);
    }
    to {
        transform: scale(1.08);
        text-shadow:
            0 0 30px rgba(255, 60, 60, 1),
            0 0 60px rgba(255, 60, 60, 0.7),
            0 0 100px rgba(255, 0, 0, 0.4);
    }
}

/* ===== Abyss Depth Badge ===== */
.abyss-depth-badge {
    display: inline-block;
    padding: 2px 10px;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e0c0ff;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.4), rgba(192, 57, 43, 0.4));
    border: 1px solid rgba(142, 68, 173, 0.6);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    text-shadow: 0 0 8px rgba(180, 120, 255, 0.5);
    animation: abyssGlow 2s ease-in-out infinite alternate;
}
.abyss-depth-badge.hidden {
    display: none;
}
@keyframes abyssGlow {
    from { box-shadow: 0 0 4px rgba(142, 68, 173, 0.3); }
    to   { box-shadow: 0 0 12px rgba(142, 68, 173, 0.6), 0 0 20px rgba(192, 57, 43, 0.2); }
}

/* ===== Event Choice Disabled ===== */
.event-choice-disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* ===== Charged Status ===== */
.enemy-intent .charged-indicator {
    color: #f1c40f;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(241, 196, 15, 0.6);
}

/* ===================================================================
   DIE FLIGHT ANIMATION — fly die toward target on resolve
   =================================================================== */

/* Die in flight: use CSS transition for position + scale.
   The JS sets --fly-x, --fly-y, --fly-rot, --fly-scale, --fly-duration. */
.die-container.die-flying {
    transition:
        transform var(--fly-duration, 0.4s) var(--fly-ease, cubic-bezier(0.55, 0, 0.85, 0.35)),
        opacity var(--fly-duration, 0.4s) var(--fly-ease, cubic-bezier(0.55, 0, 0.85, 0.35));
    transform:
        translate(var(--fly-x, 0px), var(--fly-y, 0px))
        scale(var(--fly-scale, 0.7))
        rotate(var(--fly-rot, 0deg));
    z-index: 50;
    pointer-events: none;
}

/* Blue glow tint on defend-type dice during flight */
.die-container.die-flying.die-fly-defend {
    filter:
        drop-shadow(0 0 12px rgba(52, 152, 219, 0.9))
        drop-shadow(0 0 24px rgba(52, 152, 219, 0.4))
        brightness(1.2);
}

/* Attack glow — warm red tint during flight */
.die-container.die-flying.die-fly-attack {
    filter:
        drop-shadow(0 0 12px rgba(231, 76, 60, 0.8))
        drop-shadow(0 0 24px rgba(231, 76, 60, 0.4))
        brightness(1.15);
}

/* Impact: shrink + fade at arrival */
.die-container.die-impact {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    opacity: 0 !important;
    transform:
        translate(var(--fly-x, 0px), var(--fly-y, 0px))
        scale(0.3) !important;
    pointer-events: none;
}

/* Fade-in-place for neutral dice (blank/curse/utility) */
.die-container.die-fade-out {
    transition: opacity 0.35s ease-out, transform 0.35s ease-out, filter 0.35s ease-out;
    opacity: 0;
    transform: scale(0.6) translateY(-15px);
    filter: blur(3px);
    pointer-events: none;
}

/* ===================================================================
   ARMOR OVERLAY — blue shield pulse on player sprite
   =================================================================== */
.armor-overlay {
    position: absolute;
    inset: -2px;
    border-radius: 6px;
    border: 3px solid var(--block-blue);
    background: rgba(52, 152, 219, 0.06);
    box-shadow:
        0 0 12px rgba(52, 152, 219, 0.4),
        0 0 24px rgba(52, 152, 219, 0.2),
        inset 0 0 18px rgba(52, 152, 219, 0.35),
        inset 0 0 6px rgba(52, 152, 219, 0.5);
    pointer-events: none;
    z-index: 10;
    animation: armorPulse 1.2s ease-out forwards;
    overflow: hidden;
}

/* Sweeping shield shine */
.armor-overlay::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -120%;
    width: 60%;
    height: 200%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(100, 200, 255, 0.1) 40%,
        rgba(150, 220, 255, 0.25) 50%,
        rgba(100, 200, 255, 0.1) 60%,
        transparent 100%
    );
    animation: armorShine 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes armorShine {
    0% { left: -120%; }
    100% { left: 160%; }
}

/* Stronger overlay when player already had block */
.armor-overlay.armor-intense {
    border-width: 4px;
    border-color: #5dade2;
    background: rgba(52, 152, 219, 0.12);
    box-shadow:
        0 0 16px rgba(52, 152, 219, 0.5),
        0 0 32px rgba(52, 152, 219, 0.25),
        inset 0 0 24px rgba(52, 152, 219, 0.5),
        inset 0 0 8px rgba(52, 152, 219, 0.6);
}

@keyframes armorPulse {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    12% {
        opacity: 1;
        transform: scale(1.06);
        filter: brightness(1.3);
    }
    25% {
        transform: scale(0.98);
        filter: brightness(1);
    }
    40% {
        opacity: 1;
        transform: scale(1.02);
    }
    65% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* ===================================================================
   ENEMY WINCE — squash-stretch on impact
   =================================================================== */
.enemy-sprite-canvas.enemy-wince {
    animation: enemyWince 0.2s ease-out;
}

@keyframes enemyWince {
    0%   { transform: scaleX(1) scaleY(1) translateX(0); }
    35%  { transform: scaleX(1.12) scaleY(0.88) translateX(8px); }
    65%  { transform: scaleX(0.95) scaleY(1.05) translateX(3px); }
    100% { transform: scaleX(1) scaleY(1) translateX(0); }
}

/* ===================================================================
   HEAL PULSE — green flash on player sprite when healed
   =================================================================== */
.heal-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 6px;
    border: 2px solid var(--heal-green);
    background: rgba(46, 204, 113, 0.08);
    box-shadow:
        0 0 12px rgba(46, 204, 113, 0.4),
        inset 0 0 14px rgba(46, 204, 113, 0.25);
    pointer-events: none;
    z-index: 10;
    animation: healPulse 0.8s ease-out forwards;
}

@keyframes healPulse {
    0% { opacity: 0; transform: scale(0.95); filter: brightness(1.5); }
    20% { opacity: 1; transform: scale(1.04); filter: brightness(1.2); }
    50% { opacity: 0.7; transform: scale(1); filter: brightness(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* ===================================================================
   POISON TINT — green tint on poisoned enemies
   =================================================================== */
.enemy-sprite-canvas.poisoned-tint {
    filter: hue-rotate(-20deg) saturate(1.2);
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.4);
}

/* ===================================================================
   BURN TINT — warm tint on burning enemies
   =================================================================== */
.enemy-sprite-canvas.burning-tint {
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
}

/* ===================================================================
   BLANK FIZZLE — when a blank face is rolled
   =================================================================== */
@keyframes blankFizzle {
    0% { opacity: 1; transform: scale(1); filter: grayscale(0); }
    30% { opacity: 0.7; filter: grayscale(0.8); }
    60% { opacity: 0.4; transform: scale(0.85) rotate(5deg); filter: grayscale(1) blur(1px); }
    100% { opacity: 0; transform: scale(0.5) rotate(10deg); filter: grayscale(1) blur(3px); }
}

.die-container.blank-fizzle {
    animation: blankFizzle 0.5s ease-out forwards !important;
    pointer-events: none;
}

/* ===================================================================
   COMBO GLOW — flash on multi-die results
   =================================================================== */
@keyframes comboFlash {
    0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
    30% { box-shadow: 0 0 20px 4px rgba(243, 156, 18, 0.6); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

.combo-glow {
    animation: comboFlash 0.6s ease-out;
}

/* ===================================================================
   COMBO TEXT — escalating hit counter overlay
   =================================================================== */
@keyframes comboTextPop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3) rotate(-8deg);
        filter: brightness(2);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15) rotate(3deg);
        filter: brightness(1.5);
    }
    30% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        filter: brightness(1.2);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        filter: brightness(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg) translateY(-20px);
        filter: brightness(1);
    }
}

.combo-text {
    position: fixed;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    font-size: var(--combo-size, 48px);
    font-weight: 900;
    color: var(--combo-color, #fff);
    pointer-events: none;
    z-index: 200;
    animation: comboTextPop 0.8s ease-out forwards;
    text-shadow:
        0 0 8px var(--combo-glow-color, rgba(255,255,255,0.6)),
        0 0 20px var(--combo-glow-color, rgba(255,255,255,0.3)),
        0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 2px;
    text-transform: uppercase;
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.4);
}

/* ===== Act Transition Reward ===== */
.act-reward-overlay {
    position: fixed; inset: 0; z-index: 3100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0; transition: opacity 0.4s ease;
}
.act-reward-overlay.visible { opacity: 1; }

.act-reward-panel {
    text-align: center;
    padding: 32px 40px;
}
.act-reward-title {
    font-size: 28px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 2px; color: #f1c40f; margin: 0 0 6px;
}
.act-reward-subtitle {
    font-size: 14px; color: rgba(200, 190, 220, 0.6); margin: 0 0 28px;
}
.act-reward-options {
    display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
}
.act-reward-card {
    width: 170px; padding: 24px 16px; border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, var(--surface, #1a1a2e) 100%);
    cursor: pointer; transition: all 0.2s ease;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.act-reward-card:hover {
    border-color: #f1c40f; transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 20px rgba(241, 196, 15, 0.15);
}
.act-reward-icon { font-size: 32px; }
.act-reward-name {
    font-size: 15px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text, #eee);
}
.act-reward-desc {
    font-size: 13px; color: rgba(200, 190, 220, 0.6); line-height: 1.4;
}

/* ===== Enemy Intent Pattern Pips ===== */
.enemy-intent-pips {
    display: flex; gap: 3px; justify-content: center; margin-top: 3px;
}
.intent-pip {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}
.intent-pip.pip-active {
    transform: scale(1.4);
    box-shadow: 0 0 4px currentColor;
}
.intent-pip.pip-attack { background: rgba(231, 76, 60, 0.3); }
.intent-pip.pip-attack.pip-active { background: #e74c3c; color: #e74c3c; }
.intent-pip.pip-block { background: rgba(52, 152, 219, 0.3); }
.intent-pip.pip-block.pip-active { background: #3498db; color: #3498db; }
.intent-pip.pip-buff { background: rgba(243, 156, 18, 0.3); }
.intent-pip.pip-buff.pip-active { background: #f39c12; color: #f39c12; }
.intent-pip.pip-heal { background: rgba(46, 204, 113, 0.3); }
.intent-pip.pip-heal.pip-active { background: #2ecc71; color: #2ecc71; }
.intent-pip.pip-debuff, .intent-pip.pip-hex, .intent-pip.pip-createZone { background: rgba(186, 85, 211, 0.3); }
.intent-pip.pip-debuff.pip-active, .intent-pip.pip-hex.pip-active, .intent-pip.pip-createZone.pip-active { background: #ba55d3; color: #ba55d3; }
.intent-pip.pip-steal, .intent-pip.pip-leech { background: rgba(241, 196, 15, 0.3); }
.intent-pip.pip-steal.pip-active, .intent-pip.pip-leech.pip-active { background: #f1c40f; color: #f1c40f; }
.intent-pip.pip-phaseShift, .intent-pip.pip-mirrorBlock, .intent-pip.pip-mimic { background: rgba(150, 180, 255, 0.3); }
.intent-pip.pip-phaseShift.pip-active, .intent-pip.pip-mirrorBlock.pip-active, .intent-pip.pip-mimic.pip-active { background: #99bbff; color: #99bbff; }