.menu-container {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);
    z-index: 1000;
}

.settings-select {
    min-width: 138px;
    padding: 8px 12px;
    border: 1px solid rgba(78, 221, 255, 0.42);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(3, 26, 39, 0.92), rgba(5, 57, 75, 0.84));
    color: #e8fbff;
    font-weight: 800;
    letter-spacing: 0.02em;
    outline: none;
    box-shadow: inset 0 0 14px rgba(67, 225, 255, 0.10), 0 8px 18px rgba(0, 0, 0, 0.28);
}

.settings-select:focus {
    border-color: rgba(123, 242, 255, 0.78);
    box-shadow: 0 0 0 3px rgba(49, 217, 255, 0.14), inset 0 0 14px rgba(67, 225, 255, 0.14);
}

.menu {
    background: rgba(25, 25, 45, 0.9);
    border: 2px solid #4a4a8a;
    border-radius: 15px;
    padding: 40px;
    min-width: 400px;
    text-align: center;
    box-shadow: 0 0 50px rgba(100, 100, 255, 0.3);
}

.menu-title {
    margin: 0 0 20px;
    color: #8a2be2;
    font-size: 3em;
    font-family: 'Arial Black', sans-serif;
    text-shadow: 0 0 10px #8a2be2;
}

.menu-button {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(45deg, #4a4a8a, #6a6aaa);
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-button:hover {
    background: linear-gradient(45deg, #6a6aaa, #8a8aca);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(100, 100, 255, 0.4);
}

.menu-button:active {
    transform: translateY(1px);
}

.hub-placeholder-overlay {
    position: fixed;
    inset: 0;
    z-index: 1950;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 50% 24%, rgba(255, 33, 60, 0.16), transparent 40%),
        rgba(2, 3, 7, 0.82);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.2s ease;
}

.hub-placeholder-modal {
    width: min(560px, 94vw);
    overflow: hidden;
    border-radius: 24px;
    color: #edf1f7;
    animation: slideUp 0.28s ease;
}

.hub-placeholder-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
}

.hub-placeholder-header h2 {
    margin: 0;
    color: #fff4d4;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.hub-placeholder-header p,
.hub-placeholder-body p {
    margin: 8px 0 0;
    color: #aeb7c5;
    line-height: 1.5;
}

.hub-placeholder-body {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.back-button {
    margin-top: 20px;
    background: linear-gradient(45deg, #8a2be2, #a052d2);
}

.settings-menu {
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    background: rgba(30, 30, 50, 0.95);
}

.settings-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    padding: 10px;
    border-radius: 5px;
    background: rgba(40, 40, 60, 0.7);
}

.toggle-switch {
    position: relative;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    width: 0;
    height: 0;
    opacity: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    background-color: #444;
    cursor: pointer;
    transition: 0.4s;
}

.toggle-slider:before {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: white;
    transition: 0.4s;
}

input:checked + .toggle-slider {
    background-color: #8a2be2;
}

input:checked + .toggle-slider:before {
    transform: translateX(30px);
}

.hud-container {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    z-index: 520;
    width: min(210px, calc(100vw - 24px));
    padding: 9px 10px;
    overflow: hidden;
    border: 1px solid rgba(70, 220, 255, 0.22);
    border-radius: 13px;
    background:
        linear-gradient(135deg, rgba(5, 29, 43, 0.86), rgba(2, 8, 14, 0.78));
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    color: var(--hunt-ivory, #e8fbff);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
}

.hud-container::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 40%);
}

.hud-container::after {
    display: none;
}

.hud-health-card,
.hud-grid {
    position: relative;
    z-index: 1;
}

.hud-health-card {
    padding: 0 0 7px;
    border: 0;
    border-bottom: 1px solid rgba(70, 220, 255, 0.10);
    border-radius: 0;
    background: transparent;
}

.hud-health-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.hud-stat {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.hud-grid {
    display: grid;
    gap: 0;
    margin-top: 3px;
}

.hud-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    padding: 4px 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid rgba(70, 220, 255, 0.08);
    border-radius: 0;
    background: transparent;
}

.hud-row::before {
    display: none;
}

.hud-wave-row {
    border-bottom-color: rgba(255, 210, 138, 0.12);
}

.hud-wave-row::before {
    display: none;
}

.hud-label {
    min-width: 0;
    overflow: hidden;
    color: var(--hunt-muted, rgba(179, 232, 242, 0.74));
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.hud-value {
    color: var(--hunt-ivory, #e8fbff);
    font-size: 0.74rem;
    font-weight: 950;
    text-align: right;
    text-shadow: none;
    white-space: nowrap;
}

.hud-divider,
.hud-unit {
    color: rgba(179, 232, 242, 0.62);
    font-size: 0.72em;
}

.health-bar {
    width: 100%;
    height: 5px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    box-shadow: none;
}

.health-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff3150 0%, #5cf6d5 100%);
    box-shadow: none;
    transition: width 0.24s ease-out;
}

.experience-bottom-container {
    position: fixed;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 520;
    width: min(360px, calc(100vw - 72px));
    padding: 3px;
    border: 1px solid rgba(120, 255, 164, 0.25);
    border-radius: 999px;
    background: rgba(2, 8, 5, 0.5);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    pointer-events: none;
    transform: translateX(-50%);
}

.experience-bottom-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(7, 22, 13, 0.88);
}

.experience-bottom-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2ed573 0%, #7bed9f 100%);
    box-shadow: 0 0 12px rgba(46, 213, 115, 0.62);
    transition: width 0.24s ease-out;
}

@media (max-width: 640px) {
    .hud-container {
        top: max(8px, env(safe-area-inset-top));
        left: max(8px, env(safe-area-inset-left));
        width: min(190px, calc(100vw - 16px));
        padding: 8px;
        border-radius: 12px;
        font-size: 0.74rem;
    }

    .hud-health-card {
        padding-bottom: 6px;
    }

    .hud-grid {
        gap: 5px;
        margin-top: 7px;
    }

    .hud-row {
        min-height: 21px;
        padding: 4px 0;
    }

    .hud-label {
        font-size: 0.56rem;
        letter-spacing: 0.06em;
    }

    .hud-value {
        font-size: 0.78rem;
    }

    .experience-bottom-container {
        bottom: max(10px, env(safe-area-inset-bottom));
        width: min(300px, calc(100vw - 56px));
    }
}

.damage-text {
    position: absolute;
    color: #ff4444;
    font-weight: bold;
    text-shadow: 0 0 3px black;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
}

.skins-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    min-height: 100px;
    margin: 20px 0;
}

.skin-button {
    padding: 15px;
    border: 2px solid #4a4a8a;
    border-radius: 8px;
    background: linear-gradient(45deg, #4a4a8a, #6a6aaa);
    color: white;
    font-size: 1.1em;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.skin-button:hover {
    background: linear-gradient(45deg, #6a6aaa, #8a8aca);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(100, 100, 255, 0.4);
}

.skin-button.selected {
    border-color: #8a2be2;
    background: linear-gradient(45deg, #8a2be2, #a052d2);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
}

.skin-description {
    min-height: 20px;
    margin-top: 10px;
    color: #aaa;
    font-size: 0.9em;
    text-align: center;
}

.card-selection-container {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.card-modal {
    position: relative;
    z-index: 1001;
    width: 90%;
    max-width: 900px;
    padding: 30px;
    border: 3px solid #0f3460;
    border-radius: 20px;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    animation: cardModalAppear 0.5s ease-out;
}

.card-title {
    margin-bottom: 10px;
    color: #e94560;
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
    font-family: 'Arial Black', sans-serif;
}

.card-subtitle {
    margin-bottom: 30px;
    color: #64dfdf;
    font-size: 1.2rem;
    text-align: center;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 15px;
    background: linear-gradient(145deg, #2d4059 0%, #222831 100%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.card:hover,
.wave-card:hover {
    transform: translateY(-5px);
}

.card:hover {
    border-color: #64dfdf;
    box-shadow: 0 10px 20px rgba(100, 223, 223, 0.3);
}

.card.selected {
    border-color: #e94560;
    background: linear-gradient(145deg, #3d5a80 0%, #2d4059 100%);
    box-shadow: 0 10px 30px rgba(233, 69, 96, 0.4);
}

.card.health { border-left: 5px solid #e94560; }
.card.damage { border-left: 5px solid #ff9f1c; }
.card.speed { border-left: 5px solid #64dfdf; }
.card.attack { border-left: 5px solid #7209b7; }
.card.experience { border-left: 5px solid #ffd166; }
.card.special { border-left: 5px solid #06d6a0; }
.card.luck { border-left: 5px solid #f6ad55; }
.card.elemental { border-left: 5px solid #38bdf8; }
.card.area { border-left: 5px solid #fb923c; }
.card.duration { border-left: 5px solid #a3e635; }
.card.ice { border-left: 5px solid #90cdf4; }
.card.lightning { border-left: 5px solid #f6e05e; }
.card.fire { border-left: 5px solid #f56565; }
.card.nature { border-left: 5px solid #68d391; }
.card.corruption { border-left: 5px solid #9f7aea; }
.card.physical { border-left: 5px solid #c0a062; }
.card.synergy { border-left: 5px solid #f687b3; }

.card-checkmark,
.card-number {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.card-checkmark {
    right: 10px;
    background: #e94560;
    font-size: 18px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.card.selected .card-checkmark {
    opacity: 1;
    transform: scale(1);
}

.card-number {
    left: 10px;
    background: #0f3460;
    font-size: 14px;
}

.card-rarity {
    position: absolute;
    top: 10px;
    right: 50px;
    padding: 4px 10px;
    border-radius: 12px;
    background: #222831;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.card.common .card-rarity { background: #4a5568; color: #cbd5e0; }
.card.good .card-rarity { background: #2d7d46; color: #b7f7c7; }
.card.uncommon .card-rarity { background: #2d7d46; color: #9ae6b4; }
.card.rare .card-rarity { background: #2b6cb0; color: #90cdf4; }
.card.epic .card-rarity { background: #6b46c1; color: #d6bcfa; }
.card.legendary .card-rarity { background: #b7791f; color: #fff3bf; }

.card.legendary {
    border-color: #f6ad55;
    box-shadow: 0 12px 32px rgba(246, 173, 85, 0.28);
}

.card.synergy {
    background: linear-gradient(145deg, #321f45 0%, #182d46 100%);
    box-shadow: 0 12px 32px rgba(246, 135, 179, 0.22);
}

.card-type-icon {
    position: absolute;
    top: 50px;
    left: 20px;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    font-size: 24px;
}

.card-name {
    margin: 40px 0 15px;
    color: white;
    font-size: 1.3rem;
    text-align: center;
    font-family: 'Arial Black', sans-serif;
}

.card-description {
    margin-top: auto;
    color: #cbd5e0;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
}

.card-buttons-container {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.card-button {
    min-width: 300px;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Arial Black', sans-serif;
}

.skip-button {
    background: linear-gradient(145deg, #4a5568 0%, #2d3748 100%);
    color: #cbd5e0;
}

.skip-button:hover {
    background: linear-gradient(145deg, #718096 0%, #4a5568 100%);
    color: white;
    transform: scale(1.05);
}

.confirm-button {
    background: linear-gradient(145deg, #e94560 0%, #b91d1d 100%);
    color: white;
}

.confirm-button:hover:not(.disabled) {
    background: linear-gradient(145deg, #ff6b81 0%, #e94560 100%);
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(233, 69, 96, 0.4);
}

.confirm-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

.wave-card-selection-container,
.game-result-overlay {
    animation: fadeIn 0.5s ease;
}

.wave-card-modal,
.game-result-modal {
    animation: slideUp 0.7s ease;
}

.wave-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.wave-card.selected {
    transform: scale(1.05);
    border-color: #4caf50 !important;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}

.wave-card.common { border-color: #808080; }
.wave-card.uncommon { border-color: #4caf50; }
.wave-card.rare { border-color: #2196f3; }
.wave-card.epic { border-color: #9c27b0; }

.wave-progress-info {
    margin-bottom: 20px;
    padding: 15px;
    border: 2px solid #ff9800;
    border-radius: 10px;
    background: rgba(26, 26, 46, 0.8);
    animation: slideIn 0.5s ease;
}

#remainingChoicesValue {
    display: inline-block;
    animation: pulseScale 1.5s infinite;
}

#progressBarFill {
    transition: width 0.5s ease;
}

.stats-toggle-button {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border: 2px solid #64dfdf;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    z-index: 1000;
    transition: all 0.3s ease;
}

.stats-toggle-button:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.9);
    opacity: 1;
    box-shadow: 0 0 15px rgba(100, 223, 223, 0.5);
}

.stats-overlay {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    z-index: 1999;
}

.stats-window {
    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    border: 3px solid #0f3460;
    border-radius: 15px;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%);
    z-index: 2000;
    animation: statsWindowAppear 0.3s ease-out;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 2px solid #64dfdf;
    background: linear-gradient(90deg, #0f3460 0%, #1a1a2e 100%);
}

.stats-header h3 {
    margin: 0;
    color: #64dfdf;
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(100, 223, 223, 0.5);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pause-indicator {
    padding: 4px 10px;
    border: 1px solid #e94560;
    border-radius: 12px;
    background: rgba(233, 69, 96, 0.2);
    color: #e94560;
    font-size: 0.9rem;
    font-weight: bold;
    animation: pulseOpacity 2s infinite;
}

.close-button {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #e94560;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-button:hover {
    transform: scale(1.2);
    background: rgba(233, 69, 96, 0.2);
}

.stats-content {
    max-height: calc(80vh - 70px);
    overflow-y: auto;
    padding: 20px;
}

.stats-section {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(100, 223, 223, 0.3);
}

.stats-section:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.stats-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(100, 223, 223, 0.3);
    color: #64dfdf;
    font-size: 1.1rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

.stat-row:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.1);
}

.stat-label {
    color: #ffd700;
    font-size: 16px;
    font-weight: bold;
}

.stat-value {
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-item {
    padding: 12px 15px;
    border-left: 4px solid #64dfdf;
    border-radius: 10px;
    background: rgba(15, 52, 96, 0.3);
    transition: all 0.3s ease;
}

.card-item:hover {
    transform: translateX(5px);
    background: rgba(15, 52, 96, 0.5);
}

.card-info {
    display: flex;
    flex-direction: column;
}

.card-count {
    padding: 2px 8px;
    border-radius: 12px;
    background: #e94560;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.card-desc {
    color: #cbd5e0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.no-modifiers,
.no-cards {
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: #718096;
    text-align: center;
    font-style: italic;
}

.game-result-button {
    min-width: 200px;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.game-result-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.restart-button {
    background: linear-gradient(to right, #4caf50, #2e7d32);
    color: white;
}

.restart-button:hover {
    background: linear-gradient(to right, #45a049, #1b5e20);
}

.game-result-button.menu-button {
    background: linear-gradient(to right, #2196f3, #0d47a1);
    color: white;
}

.game-result-button.menu-button:hover {
    background: linear-gradient(to right, #1976d2, #1565c0);
}

.victory-modal {
    animation: victoryGlow 2s infinite;
}

.defeat-modal {
    animation: defeatPulse 1s infinite;
}

@keyframes cardModalAppear {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

@keyframes statsWindowAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

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

@keyframes pulseScale {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

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

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

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

@keyframes victoryGlow {
    0% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.8); }
    100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
}

@keyframes defeatPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .card-modal {
        padding: 20px;
    }

    .card-title {
        font-size: 2rem;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-button {
        min-width: 150px;
        padding: 12px 25px;
    }

    .stats-window {
        width: 95%;
        max-height: 90vh;
    }

    .stats-toggle-button {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }

    .stats-content {
        max-height: calc(90vh - 70px);
    }

    .header-controls {
        flex-direction: column;
        gap: 5px;
    }

    .pause-indicator {
        padding: 3px 8px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .card-buttons-container {
        flex-direction: column;
        gap: 15px;
    }

    .card-button {
        min-width: 100%;
    }

    .stats-window {
        width: 98%;
        max-height: 95vh;
    }

    .stat-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .stat-value {
        align-self: flex-end;
    }
}

/* O.M.E.N. dossier panels */
.omen-panel {
    border: 1px solid rgba(214, 190, 132, 0.28);
    background:
        radial-gradient(circle at 12% 0%, rgba(202, 138, 62, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(19, 24, 34, 0.98), rgba(10, 13, 21, 0.98));
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.72),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.omen-panel-header {
    border-bottom: 1px solid rgba(214, 190, 132, 0.22);
    background:
        linear-gradient(90deg, rgba(214, 190, 132, 0.10), transparent),
        rgba(9, 12, 20, 0.72);
}

.omen-panel-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 190, 132, 0.55) rgba(255, 255, 255, 0.05);
}

.omen-kicker {
    margin-bottom: 4px;
    color: #c9a96a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.stats-toggle-button {
    border-color: rgba(214, 190, 132, 0.6);
    background:
        radial-gradient(circle at 35% 20%, rgba(245, 221, 163, 0.24), transparent 36%),
        rgba(10, 14, 24, 0.82);
    color: #f5dfaa;
    font-size: 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.stats-toggle-button:hover {
    border-color: #f5dfaa;
    box-shadow: 0 0 22px rgba(214, 190, 132, 0.35);
}

.stats-overlay {
    background:
        radial-gradient(circle at 50% 20%, rgba(168, 118, 55, 0.16), transparent 40%),
        rgba(2, 4, 8, 0.78);
    backdrop-filter: blur(7px);
}

.stats-window {
    width: min(960px, 94vw);
    max-width: 960px;
    max-height: 86vh;
    border-radius: 24px;
    overflow: hidden;
}

.stats-header h3 {
    color: #f3e6c2;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    text-shadow: none;
}

.pause-indicator {
    border-color: rgba(214, 190, 132, 0.35);
    background: rgba(214, 190, 132, 0.12);
    color: #f1d99c;
    text-transform: uppercase;
    animation: none;
}

.close-button {
    color: #f1d99c;
}

.close-button:hover {
    background: rgba(214, 190, 132, 0.12);
}

.stats-content {
    max-height: calc(86vh - 76px);
    padding: 22px;
}

.hero-summary-card {
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(214, 190, 132, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(214, 190, 132, 0.10), transparent),
        rgba(255, 255, 255, 0.04);
}

.hero-summary-topline,
.hero-summary-metrics,
.card-summary-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.hero-summary-title {
    color: #fff8df;
    font-size: 1.35rem;
    font-weight: 800;
}

.hero-summary-subtitle,
.hero-summary-metrics,
.card-summary-meta {
    color: #9fa8b8;
    font-size: 0.86rem;
}

.hero-summary-pill,
.card-summary-count {
    flex: 0 0 auto;
    padding: 6px 11px;
    border: 1px solid rgba(214, 190, 132, 0.28);
    border-radius: 999px;
    background: rgba(214, 190, 132, 0.13);
    color: #f5dfaa;
    font-size: 0.82rem;
    font-weight: 800;
}

.hero-health-track {
    height: 9px;
    margin: 14px 0 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.hero-health-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a53e38, #e08b53, #f4d27b);
    box-shadow: 0 0 16px rgba(224, 139, 83, 0.35);
}

.stats-two-columns,
.result-two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.stats-section,
.result-section,
.result-card-block {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
}

.stats-section {
    margin-bottom: 16px;
    padding: 16px;
}

.stats-section h4,
.result-section h2,
.result-card-block h3 {
    margin: 0 0 12px;
    border: 0;
    color: #f3e6c2;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stat-row {
    margin-bottom: 7px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(7, 10, 18, 0.42);
}

.stat-row:hover {
    transform: none;
    background: rgba(214, 190, 132, 0.08);
}

.stat-label {
    color: #aeb7c5;
    font-size: 0.9rem;
}

.stat-value {
    color: #fff7dc;
    font-size: 0.98rem;
}

.stat-meta {
    color: #c9a96a;
    font-size: 0.8rem;
}

.empty-state {
    padding: 14px;
    border: 1px dashed rgba(214, 190, 132, 0.22);
    border-radius: 14px;
    color: #87909f;
    text-align: center;
}

.summary-cards-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.card-summary-item {
    position: relative;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(8, 12, 20, 0.58);
}

.card-summary-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #c9a96a;
}

.card-summary-item.health::before { background: #d86b6b; }
.card-summary-item.damage::before { background: #e29f54; }
.card-summary-item.speed::before { background: #74b8b0; }
.card-summary-item.attack::before { background: #b58adb; }
.card-summary-item.experience::before { background: #e2c66a; }
.card-summary-item.luck::before { background: #f0b66b; }
.card-summary-item.elemental::before { background: #70bde7; }
.card-summary-item.area::before { background: #e4864f; }
.card-summary-item.duration::before { background: #a6cf6a; }
.card-summary-item.ice::before { background: #93d5f6; }
.card-summary-item.lightning::before { background: #f3dc66; }
.card-summary-item.fire::before { background: #e06f4f; }
.card-summary-item.nature::before { background: #7ecb7a; }
.card-summary-item.corruption::before { background: #9b75d8; }
.card-summary-item.physical::before { background: #c8aa68; }
.card-summary-item.synergy::before { background: #e58abd; }

.card-summary-name {
    color: #fff8df;
    font-size: 1rem;
    font-weight: 800;
}

.card-summary-value {
    margin-top: 10px;
    color: #d7deea;
    font-size: 0.9rem;
}

.game-result-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background:
        radial-gradient(circle at 50% 20%, rgba(214, 190, 132, 0.12), transparent 38%),
        rgba(1, 3, 8, 0.88);
    backdrop-filter: blur(10px);
}

.game-result-container {
    position: fixed;
    inset: 0;
    z-index: 2001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: auto;
}

.omen-result-modal {
    width: min(980px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    border-radius: 28px;
    color: #edf1f7;
}

.result-crest {
    padding: 34px 34px 24px;
    border-bottom: 1px solid rgba(214, 190, 132, 0.20);
    background:
        radial-gradient(circle at 20% 0%, rgba(214, 190, 132, 0.18), transparent 36%),
        rgba(255, 255, 255, 0.03);
    text-align: center;
}

.result-crest.victory {
    background:
        radial-gradient(circle at 50% 0%, rgba(226, 190, 92, 0.22), transparent 42%),
        rgba(255, 255, 255, 0.03);
}

.result-crest.defeat {
    background:
        radial-gradient(circle at 50% 0%, rgba(160, 64, 58, 0.20), transparent 42%),
        rgba(255, 255, 255, 0.03);
}

.game-result-title {
    margin: 0;
    color: #fff4d4;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    letter-spacing: 0.03em;
    text-shadow: 0 0 24px rgba(214, 190, 132, 0.18);
}

.result-subtitle {
    max-width: 620px;
    margin: 10px auto 0;
    color: #aeb7c5;
    font-size: 1rem;
}

.result-section {
    margin: 18px;
    padding: 18px;
}

.result-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.result-stat-card {
    padding: 14px;
    border: 1px solid rgba(214, 190, 132, 0.13);
    border-radius: 15px;
    background: rgba(7, 10, 18, 0.48);
}

.result-stat-card span {
    display: block;
    color: #929cab;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.result-stat-card strong {
    display: block;
    margin-top: 6px;
    color: #fff7dc;
    font-size: 1.3rem;
}

.result-card-block {
    padding: 14px;
}

.result-cards-list {
    max-height: 330px;
    overflow-y: auto;
    padding-right: 4px;
}

.game-result-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 6px 18px 24px;
}

.game-result-button {
    min-width: 170px;
    border: 1px solid rgba(214, 190, 132, 0.28);
    border-radius: 999px;
    background: rgba(214, 190, 132, 0.12);
    color: #fff4d4;
}

.restart-button,
.restart-button:hover {
    background: linear-gradient(135deg, #a46b35, #d2a056);
    color: #110d08;
}

.game-result-button.menu-button,
.game-result-button.menu-button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f3e6c2;
}

.run-setup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 20%, rgba(214, 190, 132, 0.16), transparent 42%),
        rgba(1, 3, 8, 0.82);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.22s ease;
}

.run-setup-overlay.closing {
    opacity: 0;
    transition: opacity 0.18s ease;
}

.run-setup-modal {
    width: min(980px, 94vw);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 26px;
    color: #edf1f7;
    animation: fadeIn 0.22s ease;
}

.run-setup-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
}

.run-setup-header h2 {
    margin: 0;
    color: #fff4d4;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.run-setup-header p,
.run-setup-section p {
    margin: 8px 0 0;
    color: #aeb7c5;
    line-height: 1.45;
}

.run-setup-content {
    max-height: calc(90vh - 190px);
    overflow-y: auto;
    padding: 22px 24px;
}

.run-setup-section {
    margin-bottom: 22px;
}

.run-setup-section h3 {
    margin: 0 0 12px;
    color: #f3e6c2;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.run-hero-grid,
.difficulty-grid,
.run-area-grid,
.run-wave-level-grid,
.run-setup-hub-actions {
    display: grid;
    gap: 14px;
}

.run-hero-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.difficulty-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.run-area-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.run-wave-level-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    max-height: min(54vh, 520px);
    overflow-y: auto;
    padding-right: 6px;
}

.run-setup-hub-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.run-hero-card,
.difficulty-card,
.area-card,
.wave-level-card,
.run-setup-tool-card {
    position: relative;
    min-height: 180px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
        rgba(8, 12, 20, 0.64);
    color: #edf1f7;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.run-hero-card:hover,
.difficulty-card:hover,
.area-card:hover,
.wave-level-card:hover:not(:disabled),
.run-setup-tool-card:hover {
    transform: translateY(-3px);
    border-color: rgba(214, 190, 132, 0.42);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.run-hero-card.selected,
.difficulty-card.selected,
.area-card.selected,
.wave-level-card.selected {
    border-color: #f1d99c;
    background:
        radial-gradient(circle at 18% 0%, rgba(214, 190, 132, 0.18), transparent 42%),
        rgba(14, 18, 27, 0.92);
    box-shadow:
        0 0 0 1px rgba(214, 190, 132, 0.16),
        0 18px 42px rgba(0, 0, 0, 0.44);
}

.area-card,
.wave-level-card,
.run-setup-tool-card {
    min-height: 150px;
}

.wave-level-card {
    min-height: 138px;
}

.wave-level-card.is-locked {
    cursor: not-allowed;
    opacity: 0.52;
    filter: saturate(0.48);
}

.wave-level-card.is-locked:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.wave-level-card.is-cleared .wave-level-sigil {
    border-color: rgba(214, 190, 132, 0.44);
    color: #f1d99c;
    box-shadow: 0 0 18px rgba(214, 190, 132, 0.18);
}

.area-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.wave-level-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.area-sigil {
    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(92, 246, 213, 0.34);
    border-radius: 999px;
    background: rgba(5, 22, 32, 0.72);
    color: #5cf6d5;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(92, 246, 213, 0.16);
}

.wave-level-sigil {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(92, 246, 213, 0.34);
    border-radius: 999px;
    background: rgba(5, 22, 32, 0.72);
    color: #5cf6d5;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(92, 246, 213, 0.16);
}

.wave-level-stats {
    margin-top: 10px;
}

.wave-level-enemies {
    margin-top: 10px;
    font-size: 0.82rem;
}

.run-setup-tool-card {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 112px;
}

.run-setup-tool-card strong {
    color: #fff8df;
    font-size: 1.04rem;
}

.run-setup-tool-card span {
    color: #aeb7c5;
    line-height: 1.35;
}

.run-hero-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    margin-bottom: 10px;
}

.run-hero-portrait {
    position: relative;
    flex: 0 0 112px;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(241, 217, 156, 0.16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 74%, rgba(241, 217, 156, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 -18px 38px rgba(0, 0, 0, 0.28);
}

.run-hero-portrait::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 13px;
    height: 11px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.36);
    filter: blur(4px);
}

.run-hero-preview-canvas {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    image-rendering: pixelated;
}

.run-option-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(241, 217, 156, 0.22);
    border-radius: 11px;
    background: rgba(9, 12, 20, 0.72);
    color: #f5dfaa;
    font-size: 1rem;
    font-weight: 900;
    backdrop-filter: blur(6px);
}

.run-option-title {
    color: #fff8df;
    font-size: 1.08rem;
    font-weight: 900;
}

.run-option-role {
    margin-top: 2px;
    color: #c9a96a;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.run-option-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.run-option-stats span,
.result-run-badges span {
    padding: 5px 8px;
    border: 1px solid rgba(214, 190, 132, 0.18);
    border-radius: 999px;
    background: rgba(214, 190, 132, 0.10);
    color: #f1d99c;
    font-size: 0.76rem;
    font-weight: 700;
}

.run-setup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 24px 24px;
    border-top: 1px solid rgba(214, 190, 132, 0.14);
}

.run-setup-primary,
.run-setup-secondary {
    min-width: 150px;
    padding: 13px 22px;
    border: 1px solid rgba(214, 190, 132, 0.28);
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
}

.run-setup-primary {
    background: linear-gradient(135deg, #a46b35, #d2a056);
    color: #110d08;
}

.run-setup-secondary {
    background: rgba(255, 255, 255, 0.07);
    color: #f3e6c2;
}

.escape-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 18%, rgba(214, 190, 132, 0.17), transparent 42%),
        rgba(1, 3, 8, 0.80);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.2s ease;
}

.escape-menu {
    width: min(620px, 94vw);
    max-height: 90vh;
    overflow: hidden;
    border-radius: 26px;
    color: #edf1f7;
    animation: slideUp 0.28s ease;
}

.escape-menu-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
}

.escape-menu-header h2 {
    margin: 0;
    color: #fff4d4;
    font-size: clamp(1.65rem, 4vw, 2.7rem);
}

.escape-menu-header p {
    margin: 8px 0 0;
    color: #aeb7c5;
    line-height: 1.45;
}

.escape-menu-body {
    max-height: calc(90vh - 150px);
    overflow-y: auto;
    padding: 22px 24px 24px;
}

.escape-menu-section {
    margin-bottom: 20px;
    padding: 18px;
    border: 1px solid rgba(214, 190, 132, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.escape-menu-section h3 {
    margin: 0 0 14px;
    color: #f3e6c2;
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.escape-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    color: #edf1f7;
    font-weight: 800;
}

.escape-setting-row + .escape-setting-row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.escape-setting-row input {
    width: 20px;
    height: 20px;
    accent-color: #d2a056;
}

.escape-shop-placeholder {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px dashed rgba(214, 190, 132, 0.28);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(214, 190, 132, 0.10), transparent),
        rgba(10, 14, 24, 0.62);
}

.escape-shop-placeholder strong {
    color: #fff4d4;
}

.escape-shop-placeholder span {
    color: #aeb7c5;
    line-height: 1.45;
}

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

.escape-action {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(214, 190, 132, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: #f3e6c2;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.escape-action:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 223, 170, 0.65);
    background: rgba(255, 255, 255, 0.10);
}

.escape-action.primary {
    background: linear-gradient(135deg, #a46b35, #d2a056);
    color: #110d08;
}

.escape-action.danger {
    border-color: rgba(220, 86, 70, 0.38);
    color: #ffd0c9;
}

.result-run-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.victory-modal,
.defeat-modal {
    animation: slideUp 0.45s ease;
}

@media (max-width: 760px) {
    .stats-two-columns,
    .result-two-columns {
        grid-template-columns: 1fr;
    }

    .run-hero-grid,
    .difficulty-grid,
    .run-area-grid,
    .run-setup-hub-actions {
        grid-template-columns: 1fr;
    }

    .summary-cards-list {
        grid-template-columns: 1fr;
    }

    .game-result-buttons {
        flex-direction: column;
    }

    .game-result-button {
        width: 100%;
    }

    .escape-menu-header,
    .escape-menu-body {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Night Hunt unified UI pass */
:root {
    --hunt-bg: #070206;
    --hunt-panel: rgba(13, 5, 9, 0.94);
    --hunt-panel-strong: rgba(24, 5, 10, 0.98);
    --hunt-red: #ff213c;
    --hunt-red-deep: #7a0715;
    --hunt-crimson: #b70d22;
    --hunt-gold: #ffd28a;
    --hunt-ivory: #fff3e9;
    --hunt-muted: rgba(255, 211, 202, 0.72);
    --hunt-line: rgba(255, 52, 71, 0.44);
    --hunt-line-soft: rgba(255, 52, 71, 0.20);
    --hunt-blue: #48b9ff;
    --hunt-violet: #c566ff;
    --hunt-green: #69f1a1;
    --hunt-shadow: 0 28px 72px rgba(0, 0, 0, 0.72);
}

.omen-panel,
.menu,
.card-modal,
.stats-window,
.game-result-modal,
.run-setup-modal,
.escape-menu,
.hub-placeholder-modal {
    border: 1px solid var(--hunt-line);
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 38, 62, 0.18), transparent 34%),
        linear-gradient(145deg, #21050c 0%, #0b0508 48%, #050507 100%);
    box-shadow:
        var(--hunt-shadow),
        0 0 38px rgba(255, 0, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.omen-panel-header,
.stats-header,
.run-setup-header,
.escape-menu-header,
.hub-placeholder-header,
.result-crest {
    border-bottom: 1px solid var(--hunt-line);
    background:
        linear-gradient(90deg, rgba(255, 33, 60, 0.20), transparent 68%),
        rgba(12, 5, 9, 0.78);
}

.omen-kicker,
.run-setup-section h3,
.escape-menu-section h3,
.stats-section h4,
.result-section h2,
.result-card-block h3 {
    color: var(--hunt-red);
    letter-spacing: 0.16em;
    text-shadow: 0 0 16px rgba(255, 0, 42, 0.34);
}

.menu-title {
    color: var(--hunt-ivory);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(2.5rem, 8vw, 4.4rem);
    letter-spacing: 0.06em;
    text-shadow:
        0 2px 0 var(--hunt-red-deep),
        0 0 24px rgba(255, 0, 42, 0.48);
}

.menu-button,
.run-setup-primary,
.run-setup-secondary,
.card-button,
.game-result-button,
.escape-action {
    border: 1px solid var(--hunt-line);
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 33, 60, 0.24), rgba(12, 4, 8, 0.86)),
        rgba(0, 0, 0, 0.70);
    color: var(--hunt-ivory);
    text-transform: uppercase;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
}

.menu-button:hover,
.run-setup-primary:hover,
.run-setup-secondary:hover,
.card-button:hover:not(.disabled),
.game-result-button:hover,
.escape-action:hover {
    border-color: rgba(255, 128, 139, 0.72);
    background:
        linear-gradient(135deg, rgba(255, 33, 60, 0.38), rgba(21, 5, 10, 0.94)),
        rgba(0, 0, 0, 0.72);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.56),
        0 0 22px rgba(255, 0, 42, 0.28);
}

.back-button,
.run-setup-secondary,
.game-result-button.menu-button,
.escape-action.danger {
    border-color: rgba(255, 255, 255, 0.22);
    background:
        linear-gradient(135deg, rgba(88, 91, 104, 0.24), rgba(5, 5, 8, 0.94)),
        rgba(0, 0, 0, 0.72);
}

.settings-menu,
.escape-menu-section,
.stats-section,
.result-section,
.result-card-block,
.hero-summary-card,
.wave-progress-info {
    border: 1px solid var(--hunt-line-soft);
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 33, 60, 0.08), transparent),
        rgba(8, 5, 9, 0.62);
}

.settings-option,
.escape-setting-row {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.28);
    color: var(--hunt-ivory);
}

.toggle-slider {
    border: 1px solid var(--hunt-line-soft);
    background: rgba(0, 0, 0, 0.70);
}

input:checked + .toggle-slider {
    background: linear-gradient(90deg, var(--hunt-crimson), var(--hunt-red));
    box-shadow: 0 0 18px rgba(255, 0, 42, 0.36);
}

.skins-container {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.skin-button {
    border: 1px solid var(--hunt-line);
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 33, 60, 0.20), rgba(10, 4, 8, 0.92)),
        rgba(0, 0, 0, 0.68);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

.skin-button:hover,
.skin-button.selected {
    border-color: rgba(255, 128, 139, 0.82);
    background:
        linear-gradient(135deg, rgba(255, 33, 60, 0.38), rgba(15, 5, 10, 0.96)),
        rgba(0, 0, 0, 0.72);
    box-shadow: 0 0 22px rgba(255, 0, 42, 0.28);
}

.skin-description {
    color: var(--hunt-muted);
}

.card-selection-container {
    z-index: 1850;
    padding: 24px;
}

.card-overlay {
    background:
        radial-gradient(circle at 50% 28%, rgba(226, 20, 42, 0.28), transparent 38%),
        rgba(2, 2, 6, 0.86);
    backdrop-filter: blur(10px);
}

.card-modal {
    width: min(1040px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 0;
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.card-title,
.game-result-title,
.run-setup-header h2,
.escape-menu-header h2,
.hub-placeholder-header h2,
.stats-header h3 {
    color: var(--hunt-ivory);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    letter-spacing: 0.06em;
    text-shadow:
        0 2px 0 var(--hunt-red-deep),
        0 0 22px rgba(255, 0, 42, 0.42);
}

.card-subtitle,
.run-setup-header p,
.escape-menu-header p,
.hub-placeholder-header p,
.hub-placeholder-body p,
.result-subtitle,
.hero-summary-subtitle,
.hero-summary-metrics,
.card-summary-meta {
    color: var(--hunt-muted);
}

.cards-grid {
    gap: 16px;
}

.card {
    min-height: 210px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 5px solid var(--hunt-red);
    border-radius: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(145deg, #1c070d 0%, #07070b 100%);
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}

.card:hover {
    border-color: rgba(255, 128, 139, 0.72);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.54),
        0 0 24px rgba(255, 0, 42, 0.26);
}

.card.selected {
    border-color: var(--hunt-red);
    background:
        radial-gradient(circle at 22% 0%, rgba(255, 33, 60, 0.28), transparent 40%),
        linear-gradient(145deg, #2d060e 0%, #0a070c 100%);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.62),
        0 0 28px rgba(255, 0, 42, 0.36);
}

.card-number,
.card-checkmark,
.card-type-icon,
.card-rarity,
.hero-summary-pill,
.card-summary-count,
.result-run-badges span,
.run-option-stats span {
    border: 1px solid var(--hunt-line-soft);
    background: rgba(0, 0, 0, 0.42);
    color: var(--hunt-ivory);
}

.card-checkmark {
    background: var(--hunt-crimson);
}

.card-rarity {
    border-radius: 0;
    text-transform: uppercase;
}

.card.common .card-rarity { background: rgba(94, 101, 116, 0.45); color: #d7dce5; }
.card.good .card-rarity,
.card.uncommon .card-rarity { background: rgba(70, 166, 100, 0.36); color: #bfffcf; }
.card.rare .card-rarity { background: rgba(58, 154, 225, 0.36); color: #bce7ff; }
.card.epic .card-rarity { background: rgba(165, 84, 234, 0.36); color: #f0d1ff; }
.card.legendary .card-rarity { background: rgba(255, 182, 73, 0.36); color: #fff1c9; }

.card.legendary {
    border-color: rgba(255, 190, 92, 0.72);
    box-shadow: 0 18px 44px rgba(255, 147, 34, 0.20);
}

.card.synergy {
    background:
        radial-gradient(circle at 20% 0%, rgba(196, 76, 255, 0.20), transparent 38%),
        linear-gradient(145deg, #1c082a 0%, #08070d 100%);
}

.card-name {
    color: var(--hunt-ivory);
    font-family: Georgia, serif;
    font-style: italic;
    text-shadow: 0 0 14px rgba(255, 0, 42, 0.22);
}

.card-description {
    color: rgba(255, 225, 218, 0.78);
}

.skip-button {
    color: rgba(255, 225, 218, 0.78);
}

.confirm-button,
.restart-button,
.escape-action.primary,
.run-setup-primary {
    background:
        linear-gradient(135deg, #ff334b, #8b0716),
        rgba(0, 0, 0, 0.72);
    color: var(--hunt-ivory);
}

.wave-card.selected {
    border-color: var(--hunt-red) !important;
    box-shadow: 0 0 24px rgba(255, 0, 42, 0.44);
}

.stats-toggle-button {
    border: 1px solid var(--hunt-line);
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 33, 60, 0.28), transparent 50%),
        rgba(5, 5, 8, 0.86);
    color: var(--hunt-ivory);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.50), 0 0 16px rgba(255, 0, 42, 0.22);
}

.stats-toggle-button:hover {
    border-color: rgba(255, 128, 139, 0.72);
    box-shadow: 0 0 24px rgba(255, 0, 42, 0.34);
}

.stats-window {
    border-radius: 0;
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.pause-indicator {
    border-color: var(--hunt-line);
    background: rgba(255, 33, 60, 0.13);
    color: var(--hunt-red);
}

.close-button {
    color: var(--hunt-red);
}

.close-button:hover {
    background: rgba(255, 33, 60, 0.16);
}

.hero-summary-card,
.result-stat-card,
.card-summary-item,
.stat-row {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 33, 60, 0.07), transparent),
        rgba(0, 0, 0, 0.30);
}

.hero-summary-title,
.card-summary-name,
.stat-value,
.result-stat-card strong,
.escape-shop-placeholder strong,
.run-option-title {
    color: var(--hunt-ivory);
}

.stat-label,
.result-stat-card span {
    color: rgba(255, 211, 202, 0.68);
}

.hero-health-track {
    background: rgba(0, 0, 0, 0.44);
}

.hero-health-fill {
    background: linear-gradient(90deg, #7d0715, #ff213c, #ffd28a);
    box-shadow: 0 0 18px rgba(255, 33, 60, 0.42);
}

.card-summary-item::before {
    background: var(--hunt-red);
}

.game-result-overlay {
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 45, 64, 0.26), transparent 38%),
        rgba(1, 2, 5, 0.90);
}

.omen-result-modal {
    border-radius: 0;
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.result-crest.victory {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 193, 92, 0.24), transparent 42%),
        linear-gradient(90deg, rgba(255, 33, 60, 0.18), transparent);
}

.result-crest.defeat {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 33, 60, 0.26), transparent 44%),
        linear-gradient(90deg, rgba(110, 0, 20, 0.34), transparent);
}

.victory-modal,
.defeat-modal {
    animation: slideUp 0.45s ease;
}

.run-setup-overlay {
    z-index: 1850;
}

.run-setup-modal,
.escape-menu,
.hub-placeholder-modal {
    border-radius: 0;
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}

.run-setup-modal {
    display: flex;
    flex-direction: column;
}

.run-setup-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.run-setup-footer {
    flex: 0 0 auto;
}

.run-hero-card,
.difficulty-card,
.area-card,
.run-setup-tool-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.07), transparent 34%),
        linear-gradient(145deg, #15070c 0%, #07070b 100%);
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}

.run-hero-card:hover,
.difficulty-card:hover,
.area-card:hover,
.run-setup-tool-card:hover,
.run-hero-card.selected,
.difficulty-card.selected,
.area-card.selected {
    border-color: rgba(255, 86, 100, 0.78);
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 33, 60, 0.22), transparent 42%),
        linear-gradient(145deg, #26060d 0%, #09070c 100%);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.52),
        0 0 26px rgba(255, 0, 42, 0.26);
}

.run-hero-portrait {
    border-color: var(--hunt-line-soft);
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 72%, rgba(255, 33, 60, 0.22), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.16));
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}

.run-option-icon {
    border-color: var(--hunt-line-soft);
    border-radius: 0;
    color: var(--hunt-red);
}

.run-option-role,
.stat-meta {
    color: var(--hunt-red);
}

.escape-shop-placeholder,
.empty-state {
    border: 1px dashed var(--hunt-line-soft);
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(255, 33, 60, 0.08), transparent),
        rgba(0, 0, 0, 0.30);
    color: var(--hunt-muted);
}

@media (max-width: 760px) {

    .card-selection-container,
    .run-setup-overlay,
    .escape-menu-overlay,
    .game-result-container,
    .hub-placeholder-overlay {
        padding: 12px;
    }

    .card-modal {
        width: 96vw;
        padding: 18px;
    }

    .cards-grid {
        gap: 12px;
    }

    .card {
        min-height: 180px;
        padding: 16px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .run-hero-card,
    .difficulty-card,
    .area-card,
    .run-setup-tool-card {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    .run-setup-modal {
        max-height: 94vh;
    }

    .run-setup-header {
        padding: 18px;
    }

    .run-setup-header h2 {
        font-size: clamp(1.65rem, 8vw, 2.25rem);
    }

    .run-setup-header p {
        font-size: 0.88rem;
        line-height: 1.38;
    }

    .run-setup-content {
        padding: 16px 18px;
    }

    .run-setup-footer {
        padding: 12px 18px 16px;
    }

    .run-setup-primary,
    .run-setup-secondary {
        min-width: 0;
        padding: 12px 18px;
    }

    .escape-menu {
        max-height: 94vh;
    }

    .escape-menu-header {
        padding: 18px;
    }

    .escape-menu-header h2 {
        font-size: clamp(1.55rem, 8vw, 2.15rem);
    }

    .escape-menu-header p {
        font-size: 0.88rem;
        line-height: 1.38;
    }

    .escape-menu-body {
        max-height: calc(94vh - 132px);
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .escape-menu-section {
        margin-bottom: 12px;
        padding: 14px;
    }

    .escape-setting-row {
        padding: 9px 0;
    }

    .escape-shop-placeholder {
        padding: 12px;
    }

    .escape-menu-actions {
        gap: 8px;
    }

    .escape-action {
        padding: 11px 14px;
        font-size: 0.84rem;
    }
}

/* Cold Moon UI pass: keeps art buttons intact and cools every code-drawn panel/button. */
:root {
    --hunt-bg: #031018;
    --hunt-panel: rgba(4, 19, 28, 0.94);
    --hunt-panel-strong: rgba(5, 27, 40, 0.98);
    --hunt-red: #42e8ff;
    --hunt-red-deep: #06465f;
    --hunt-crimson: #159bd3;
    --hunt-gold: #8af7ff;
    --hunt-ivory: #e8fbff;
    --hunt-muted: rgba(179, 232, 242, 0.74);
    --hunt-line: rgba(70, 220, 255, 0.46);
    --hunt-line-soft: rgba(70, 220, 255, 0.22);
    --hunt-blue: #4bbdff;
    --hunt-violet: #69a8ff;
    --hunt-green: #5cf6d5;
    --hunt-shadow: 0 28px 72px rgba(0, 0, 0, 0.72);
}

.card-subtitle,
.run-setup-header p,
.escape-menu-header p,
.hub-placeholder-header p,
.hub-placeholder-body p,
.result-subtitle,
.hero-summary-subtitle,
.hero-summary-metrics,
.card-summary-meta,
.skin-description,
.skip-button,
.stat-label,
.result-stat-card span {
    color: var(--hunt-muted);
}

.confirm-button,
.restart-button,
.escape-action.primary,
.run-setup-primary {
    border-color: rgba(92, 246, 213, 0.62);
    background:
        linear-gradient(135deg, #5cf6d5, #159bd3 54%, #06465f),
        rgba(0, 0, 0, 0.72);
    color: #021018;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.20);
}

.confirm-button:hover,
.restart-button:hover,
.escape-action.primary:hover,
.run-setup-primary:hover {
    border-color: rgba(204, 255, 255, 0.82);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.58),
        0 0 28px rgba(92, 246, 213, 0.36);
}

.back-button,
.run-setup-secondary,
.game-result-button.menu-button,
.escape-action.danger {
    border-color: rgba(120, 189, 209, 0.32);
    background:
        linear-gradient(135deg, rgba(45, 101, 122, 0.26), rgba(4, 11, 17, 0.94)),
        rgba(0, 0, 0, 0.72);
    color: rgba(225, 249, 255, 0.92);
}

.settings-menu,
.escape-menu-section,
.stats-section,
.result-section,
.result-card-block,
.hero-summary-card,
.wave-progress-info,
.settings-option,
.escape-setting-row,
.run-hero-card,
.difficulty-card,
.area-card,
.run-setup-tool-card,
.hero-summary-card,
.result-stat-card,
.card-summary-item,
.stat-row,
.escape-shop-placeholder,
.empty-state {
    border-color: var(--hunt-line-soft);
    background:
        linear-gradient(135deg, rgba(66, 232, 255, 0.08), transparent),
        rgba(2, 13, 21, 0.62);
}

.settings-option,
.escape-setting-row,
.stat-row,
.result-stat-card,
.card-summary-item {
    color: var(--hunt-ivory);
}

.toggle-slider {
    border-color: var(--hunt-line-soft);
    background: rgba(0, 0, 0, 0.70);
}

input:checked + .toggle-slider {
    background: linear-gradient(90deg, #117ca0, #5cf6d5);
    box-shadow: 0 0 18px rgba(66, 232, 255, 0.34);
}

.run-hero-card,
.difficulty-card,
.area-card,
.run-setup-tool-card,
.card {
    border-color: rgba(70, 220, 255, 0.18);
    background:
        radial-gradient(circle at 20% 0%, rgba(102, 238, 255, 0.08), transparent 34%),
        linear-gradient(145deg, #071e2e 0%, #050b13 100%);
}

.run-hero-card:hover,
.difficulty-card:hover,
.area-card:hover,
.run-setup-tool-card:hover,
.run-hero-card.selected,
.difficulty-card.selected,
.area-card.selected,
.card:hover,
.card.selected {
    border-color: rgba(95, 238, 255, 0.78);
    background:
        radial-gradient(circle at 20% 0%, rgba(66, 232, 255, 0.24), transparent 42%),
        linear-gradient(145deg, #082a40 0%, #060d16 100%);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.52),
        0 0 26px rgba(66, 232, 255, 0.26);
}

.card {
    border-left-color: var(--hunt-red);
}

.card.synergy {
    background:
        radial-gradient(circle at 20% 0%, rgba(91, 169, 255, 0.22), transparent 38%),
        linear-gradient(145deg, #081d34 0%, #060912 100%);
}

.card.legendary {
    border-color: rgba(138, 247, 255, 0.72);
    box-shadow: 0 18px 44px rgba(66, 232, 255, 0.22);
}

.card-number,
.card-checkmark,
.card-type-icon,
.card-rarity,
.hero-summary-pill,
.card-summary-count,
.result-run-badges span,
.run-option-stats span {
    border-color: var(--hunt-line-soft);
    background: rgba(2, 10, 16, 0.52);
    color: var(--hunt-ivory);
}

.card-checkmark {
    background: var(--hunt-crimson);
}

.card-name {
    color: var(--hunt-ivory);
    text-shadow: 0 0 14px rgba(66, 232, 255, 0.22);
}

.card-description,
.card-summary-value {
    color: rgba(220, 248, 255, 0.80);
}

.run-hero-portrait {
    border-color: var(--hunt-line-soft);
    background:
        radial-gradient(circle at 50% 72%, rgba(66, 232, 255, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.16));
}

.run-option-icon {
    border-color: var(--hunt-line-soft);
    background: rgba(2, 14, 22, 0.76);
    color: var(--hunt-red);
}

.hero-summary-title,
.card-summary-name,
.stat-value,
.result-stat-card strong,
.escape-shop-placeholder strong,
.run-option-title {
    color: var(--hunt-ivory);
}

.stats-toggle-button {
    border-color: var(--hunt-line);
    background:
        radial-gradient(circle at 50% 35%, rgba(66, 232, 255, 0.24), transparent 50%),
        rgba(4, 15, 24, 0.88);
    color: var(--hunt-ivory);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.50),
        0 0 18px rgba(66, 232, 255, 0.22);
}

.stats-toggle-button:hover {
    border-color: rgba(138, 247, 255, 0.72);
    box-shadow: 0 0 24px rgba(66, 232, 255, 0.34);
}

.pause-indicator {
    border-color: var(--hunt-line);
    background: rgba(66, 232, 255, 0.13);
    color: var(--hunt-red);
}

.close-button {
    color: var(--hunt-red);
}

.close-button:hover {
    background: rgba(66, 232, 255, 0.16);
}

.hero-health-fill {
    background: linear-gradient(90deg, #0d7ea4, #37e8ff, #90fff0);
    box-shadow: 0 0 18px rgba(66, 232, 255, 0.42);
}

.card-summary-item::before {
    background: var(--hunt-red);
}

.card-summary-item.fire::before { background: #4dd8ff; }
.card-summary-item.lightning::before { background: #8af7ff; }
.card-summary-item.physical::before { background: #69a8ff; }
.card-summary-item.synergy::before { background: #5cf6d5; }

.result-crest.victory {
    background:
        radial-gradient(circle at 50% 0%, rgba(92, 246, 213, 0.24), transparent 42%),
        linear-gradient(90deg, rgba(66, 232, 255, 0.16), transparent);
}

.result-crest.defeat {
    background:
        radial-gradient(circle at 50% 0%, rgba(66, 169, 255, 0.24), transparent 44%),
        linear-gradient(90deg, rgba(5, 55, 80, 0.36), transparent);
}

/* Hero upgrade tree */
.hero-upgrades-overlay {
    position: fixed;
    inset: 0;
    z-index: 1860;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 50% 20%, rgba(58, 220, 255, 0.20), transparent 38%),
        radial-gradient(circle at 50% 8%, rgba(13, 92, 130, 0.42), transparent 34%),
        rgba(1, 8, 14, 0.88);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.2s ease;
}

.hero-upgrades-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 16%, rgba(92, 246, 213, 0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 72%, rgba(74, 190, 255, 0.14) 0 1px, transparent 2px);
    background-size: 120px 150px, 170px 210px;
    opacity: 0.42;
}

.hero-upgrades-modal {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1320px, 96vw);
    max-height: 94vh;
    overflow: hidden;
    border-radius: 0;
    clip-path: polygon(1.5% 0, 100% 0, 98.5% 100%, 0 100%);
}

.hero-upgrades-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
}

.hero-upgrades-header h2 {
    margin: 0;
    color: var(--hunt-ivory);
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: clamp(2rem, 5vw, 3.7rem);
    letter-spacing: 0.06em;
    text-shadow:
        0 2px 0 var(--hunt-red-deep),
        0 0 22px rgba(66, 232, 255, 0.38);
}

.hero-upgrades-header p {
    max-width: 780px;
    margin: 8px 0 0;
    color: var(--hunt-muted);
    line-height: 1.45;
}

.hero-upgrades-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.hero-upgrade-tabs {
    display: flex;
    gap: 10px;
    padding: 16px 24px 0;
}

.hero-upgrade-tab {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 0;
    padding: 12px 14px;
    border: 1px solid rgba(70, 220, 255, 0.24);
    border-radius: 0;
    background:
        linear-gradient(135deg, rgba(42, 187, 230, 0.16), rgba(4, 16, 25, 0.86)),
        rgba(0, 0, 0, 0.62);
    color: var(--hunt-ivory);
    cursor: pointer;
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}

.hero-upgrade-tab span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(70, 220, 255, 0.28);
    background: rgba(2, 12, 20, 0.62);
    color: var(--hunt-red);
}

.hero-upgrade-tab strong,
.hero-upgrade-tab small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-upgrade-tab small {
    color: var(--hunt-muted);
    font-weight: 800;
}

.hero-upgrade-tab:hover,
.hero-upgrade-tab.selected {
    border-color: rgba(138, 247, 255, 0.78);
    background:
        linear-gradient(135deg, rgba(66, 232, 255, 0.30), rgba(5, 31, 45, 0.96)),
        rgba(0, 0, 0, 0.70);
    box-shadow: 0 0 24px rgba(66, 232, 255, 0.22);
}

.hero-upgrades-layout {
    display: grid;
    grid-template-columns: minmax(240px, 292px) 1fr;
    gap: 18px;
    height: calc(94vh - 272px);
    min-height: 0;
    padding: 18px 24px 24px;
}

.hero-upgrades-summary,
.hero-upgrade-tree {
    min-height: 0;
    border: 1px solid var(--hunt-line-soft);
    background:
        linear-gradient(135deg, rgba(66, 232, 255, 0.08), transparent),
        rgba(2, 13, 21, 0.62);
}

.hero-upgrades-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding: 14px 18px;
}

.hero-upgrades-portrait {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border: 1px solid var(--hunt-line-soft);
    background:
        radial-gradient(circle at 50% 72%, rgba(66, 232, 255, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18));
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}

.hero-upgrades-portrait .run-option-icon {
    top: 10px;
    right: 10px;
}

.hero-upgrades-name {
    color: var(--hunt-ivory);
    font-size: 1.35rem;
    font-weight: 900;
}

.hero-upgrades-role {
    margin-top: 2px;
    color: var(--hunt-red);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.hero-upgrades-summary p,
.hero-upgrade-note {
    margin: 0;
    color: var(--hunt-muted);
    line-height: 1.45;
}

.hero-upgrade-point-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hero-upgrade-point-grid span {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--hunt-line-soft);
    background: rgba(1, 10, 17, 0.50);
    text-align: center;
}

.hero-upgrade-point-grid strong {
    color: var(--hunt-ivory);
    font-size: 1.25rem;
}

.hero-upgrade-point-grid small {
    color: var(--hunt-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.hero-upgrades-bonuses {
    display: grid;
    gap: 10px;
}

.hero-upgrades-bonuses h3 {
    margin: 0;
    color: var(--hunt-red);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero-upgrade-bonus-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hero-upgrade-bonus-list span,
.hero-upgrade-empty {
    padding: 7px 9px;
    border: 1px solid var(--hunt-line-soft);
    background: rgba(1, 10, 17, 0.46);
    color: var(--hunt-muted);
    font-size: 0.82rem;
}

.hero-upgrade-actions {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.hero-upgrade-reset {
    border-color: rgba(120, 189, 209, 0.32);
}

.hero-upgrade-tree {
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 18px;
}

.hero-upgrade-column {
    display: grid;
    align-content: start;
    gap: 10px;
    flex: 0 0 calc((clamp(130px, 10vw, 154px) * var(--upgrade-node-columns, 1)) + (10px * (var(--upgrade-node-columns, 1) - 1)));
    min-width: calc((130px * var(--upgrade-node-columns, 1)) + (10px * (var(--upgrade-node-columns, 1) - 1)));
}

.hero-upgrade-column + .hero-upgrade-column {
    margin-top: 0;
}

.hero-upgrade-row-label {
    display: grid;
    gap: 6px;
    min-height: 42px;
    color: var(--hunt-ivory);
}

.hero-upgrade-row-label strong {
    color: var(--hunt-red);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-upgrade-row-label span {
    color: var(--hunt-muted);
    font-size: 0.82rem;
}

.hero-upgrade-node-grid {
    display: grid;
    grid-template-columns: repeat(var(--upgrade-node-columns, 1), minmax(130px, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 6px;
}

.hero-upgrade-node {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 4px;
    min-height: 80px;
    padding: 7px 9px;
    border: 1px solid rgba(70, 220, 255, 0.24);
    border-radius: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(66, 232, 255, 0.14), transparent 36%),
        linear-gradient(145deg, rgba(8, 36, 52, 0.92), rgba(3, 10, 17, 0.96));
    color: var(--hunt-ivory);
    text-align: left;
    cursor: pointer;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.hero-upgrade-node:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: rgba(138, 247, 255, 0.80);
    box-shadow: 0 0 24px rgba(66, 232, 255, 0.24);
}

.hero-upgrade-node:disabled {
    cursor: default;
}

.hero-upgrade-node.is-locked {
    opacity: 0.42;
    filter: grayscale(0.35);
}

.hero-upgrade-node.is-maxed {
    border-color: rgba(92, 246, 213, 0.62);
    background:
        radial-gradient(circle at 18% 0%, rgba(92, 246, 213, 0.20), transparent 36%),
        linear-gradient(145deg, rgba(7, 55, 55, 0.94), rgba(3, 10, 17, 0.96));
}

.hero-upgrade-node-branch {
    width: max-content;
    max-width: 100%;
    padding: 2px 5px;
    border: 1px solid var(--hunt-line-soft);
    background: rgba(1, 10, 17, 0.46);
    color: var(--hunt-red);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.hero-upgrade-node strong {
    color: var(--hunt-ivory);
    font-size: 0.76rem;
    line-height: 1.12;
}

.hero-upgrade-node small {
    color: var(--hunt-muted);
    line-height: 1.32;
}

.hero-upgrade-node-effect {
    color: #8af7ff;
    font-size: 0.63rem;
    font-weight: 900;
    line-height: 1.22;
}

.hero-upgrade-node-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: var(--hunt-muted);
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hero-upgrade-node-footer span {
    color: var(--hunt-ivory);
}

.hero-upgrade-node-footer em {
    white-space: nowrap;
}

.hero-upgrade-node-footer em {
    color: var(--hunt-red);
    font-style: normal;
}

.achievements-modal {
    max-width: min(1180px, 96vw);
}

.achievements-content {
    display: grid;
    gap: 22px;
}

.achievement-section {
    display: grid;
    gap: 12px;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.achievement-card {
    position: relative;
    display: grid;
    gap: 9px;
    min-height: 178px;
    padding: 14px;
    border: 1px solid rgba(72, 222, 218, 0.24);
    background:
        linear-gradient(145deg, rgba(10, 34, 42, 0.88), rgba(5, 8, 14, 0.94)),
        rgba(0, 0, 0, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 16px 26px rgba(0, 0, 0, 0.35);
}

.achievement-card.is-unlocked {
    border-color: rgba(255, 204, 88, 0.52);
    background:
        radial-gradient(circle at 16% 12%, rgba(255, 204, 88, 0.20), transparent 34%),
        linear-gradient(145deg, rgba(33, 25, 10, 0.92), rgba(5, 8, 14, 0.96));
}

.achievement-card.is-locked {
    filter: saturate(0.72);
    opacity: 0.82;
}

.achievement-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.achievement-seal {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 204, 88, 0.46);
    border-radius: 50%;
    color: #ffdc7c;
    font-weight: 900;
    box-shadow: 0 0 18px rgba(255, 204, 88, 0.20);
}

.achievement-status {
    color: rgba(203, 242, 240, 0.78);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.achievement-card h4 {
    margin: 0;
    color: #fff2df;
    font-size: 1rem;
}

.achievement-card p {
    margin: 0;
    color: rgba(220, 242, 240, 0.72);
    font-size: 0.84rem;
    line-height: 1.45;
}

.achievement-reward {
    display: grid;
    gap: 3px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.achievement-reward small {
    color: rgba(103, 232, 226, 0.82);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.achievement-reward strong {
    color: #ffd879;
    font-size: 0.9rem;
}

.achievement-recent-list,
.result-achievement-list {
    display: grid;
    gap: 8px;
}

.achievement-recent-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.achievement-recent-list span {
    padding: 9px 12px;
    border: 1px solid rgba(255, 204, 88, 0.28);
    background: rgba(255, 204, 88, 0.08);
    color: #ffe2a0;
    font-size: 0.86rem;
}

@media (max-width: 980px) {
    .hero-upgrades-layout {
        grid-template-columns: 1fr;
        height: calc(94vh - 250px);
        overflow-y: auto;
    }

    .hero-upgrades-summary,
    .hero-upgrade-tree {
        overflow: visible;
    }

    .hero-upgrade-tree {
        display: flex;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 20px;
    }

    .hero-upgrade-node-grid {
        grid-template-columns: repeat(var(--upgrade-node-columns, 1), minmax(130px, 1fr));
        grid-auto-flow: column;
        grid-template-rows: repeat(4, auto);
    }
}

@media (max-width: 640px) {
    .hero-upgrades-overlay {
        padding: 10px;
    }

    .hero-upgrades-modal {
        width: 98vw;
        max-height: 96vh;
        clip-path: none;
    }

    .hero-upgrades-header {
        padding: 16px;
    }

    .hero-upgrades-header h2 {
        font-size: clamp(1.65rem, 8vw, 2.3rem);
    }

    .hero-upgrade-tabs {
        overflow-x: auto;
        padding: 12px 14px 0;
    }

    .hero-upgrade-tab {
        min-width: 174px;
    }

    .hero-upgrades-layout {
        height: calc(96vh - 240px);
        padding: 14px;
    }

    .hero-upgrade-node-grid {
        grid-template-columns: repeat(var(--upgrade-node-columns, 1), minmax(130px, 1fr));
    }

    .hero-upgrade-column {
        flex-basis: calc((min(40vw, 150px) * var(--upgrade-node-columns, 1)) + (10px * (var(--upgrade-node-columns, 1) - 1)));
        min-width: calc((130px * var(--upgrade-node-columns, 1)) + (10px * (var(--upgrade-node-columns, 1) - 1)));
    }

    .hero-upgrade-row-label {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

/* Leaderboard */
.leaderboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 1870;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
        radial-gradient(circle at 50% 22%, rgba(58, 220, 255, 0.20), transparent 38%),
        radial-gradient(circle at 52% 8%, rgba(13, 92, 130, 0.44), transparent 34%),
        rgba(1, 8, 14, 0.90);
    backdrop-filter: blur(10px);
}

.leaderboard-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 16%, rgba(74, 229, 255, 0.16) 0 8%, transparent 26%),
        radial-gradient(circle at 24% 18%, rgba(92, 246, 213, 0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 76% 68%, rgba(74, 190, 255, 0.14) 0 1px, transparent 2px);
    background-size: auto, 96px 118px, 130px 150px;
    opacity: 0.44;
}

.leaderboard-modal {
    position: relative;
    z-index: 1;
    width: min(1180px, 96vw);
    max-height: 92vh;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--hunt-line);
    background:
        radial-gradient(circle at 18% 0%, rgba(66, 232, 255, 0.16), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(92, 246, 213, 0.10), transparent 30%),
        linear-gradient(145deg, #062132 0%, #06111b 48%, #03070d 100%);
    box-shadow:
        var(--hunt-shadow),
        0 0 40px rgba(66, 232, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--hunt-line);
    background:
        linear-gradient(90deg, rgba(66, 232, 255, 0.18), transparent 70%),
        rgba(4, 20, 31, 0.82);
}

.leaderboard-header h2 {
    margin: 0;
    color: var(--hunt-ivory);
    font-size: clamp(2rem, 4vw, 3.6rem);
    text-shadow:
        0 2px 0 var(--hunt-red-deep),
        0 0 22px rgba(66, 232, 255, 0.38);
}

.leaderboard-header p {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--hunt-muted);
}

.leaderboard-content {
    max-height: calc(92vh - 130px);
    overflow-y: auto;
    padding: 22px;
}

.leaderboard-scoring-note {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(66, 232, 255, 0.10), transparent),
        rgba(2, 13, 21, 0.64);
    color: rgba(220, 248, 255, 0.82);
}

.leaderboard-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.leaderboard-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.leaderboard-tab {
    min-height: 54px;
    padding: 10px 14px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 14px;
    background: rgba(2, 13, 21, 0.62);
    color: var(--hunt-muted);
    cursor: pointer;
}

.leaderboard-tab strong {
    color: inherit;
}

.leaderboard-tab.is-active,
.leaderboard-tab:hover {
    border-color: rgba(214, 190, 132, 0.42);
    color: var(--hunt-ivory);
    background:
        linear-gradient(135deg, rgba(214, 190, 132, 0.12), transparent),
        rgba(2, 13, 21, 0.84);
}

.leaderboard-tab-panel:not(.is-active) {
    display: none;
}

.leaderboard-mode-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 22px;
    background:
        radial-gradient(circle at 20% 0%, rgba(102, 238, 255, 0.08), transparent 34%),
        linear-gradient(145deg, #071e2e 0%, #050b13 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.leaderboard-mode-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.leaderboard-mode-icon {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--hunt-line);
    border-radius: 14px;
    background:
        radial-gradient(circle at 50% 35%, rgba(66, 232, 255, 0.24), transparent 50%),
        rgba(4, 15, 24, 0.88);
    color: var(--hunt-ivory);
    font-weight: 900;
    box-shadow: 0 0 18px rgba(66, 232, 255, 0.22);
}

.leaderboard-mode-header h3 {
    margin: 0;
    color: var(--hunt-ivory);
    font-size: 1.08rem;
}

.leaderboard-mode-header p,
.leaderboard-run-summary small,
.leaderboard-row small {
    margin: 4px 0 0;
    color: var(--hunt-muted);
    font-size: 0.78rem;
}

.leaderboard-best-block,
.leaderboard-player-result {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(66, 232, 255, 0.08), transparent),
        rgba(2, 13, 21, 0.62);
}

.leaderboard-player-result {
    margin: 14px 0 0;
    border-color: rgba(92, 246, 213, 0.34);
}

.leaderboard-wave-tools {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(66, 232, 255, 0.08), transparent),
        rgba(2, 13, 21, 0.62);
}

.leaderboard-wave-tools label {
    display: grid;
    gap: 6px;
    color: var(--hunt-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.leaderboard-wave-tools select {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 12px;
    background: rgba(2, 13, 21, 0.84);
    color: var(--hunt-ivory);
    font: inherit;
}

.leaderboard-wave-tools p {
    margin: 0;
    color: var(--hunt-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.leaderboard-block-title {
    margin-bottom: 8px;
    color: var(--hunt-red);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.leaderboard-run-summary {
    display: grid;
    gap: 6px;
    color: rgba(220, 248, 255, 0.88);
}

.leaderboard-run-summary strong {
    color: var(--hunt-ivory);
    font-size: 1.1rem;
}

.leaderboard-run-summary b {
    color: var(--hunt-ivory);
}

.leaderboard-table {
    display: grid;
    gap: 7px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.8fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 13px;
    background: rgba(2, 13, 21, 0.52);
    color: rgba(220, 248, 255, 0.88);
    font-size: 0.86rem;
}

.leaderboard-wave-row {
    grid-template-columns: 1.15fr 0.95fr 0.95fr 0.72fr;
}

.leaderboard-row-head {
    border-color: rgba(66, 232, 255, 0.26);
    background: rgba(66, 232, 255, 0.10);
    color: var(--hunt-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.leaderboard-row strong {
    display: block;
    color: var(--hunt-ivory);
}

.leaderboard-empty {
    padding: 12px;
    border: 1px dashed var(--hunt-line-soft);
    border-radius: 14px;
    color: var(--hunt-muted);
    background: rgba(2, 13, 21, 0.38);
    text-align: center;
}

/* Bestiary */
.bestiary-overlay {
    background:
        radial-gradient(circle at 50% 20%, rgba(92, 246, 213, 0.18), transparent 38%),
        radial-gradient(circle at 14% 76%, rgba(31, 125, 92, 0.22), transparent 34%),
        rgba(1, 8, 14, 0.92);
}

.bestiary-modal {
    width: min(1120px, 96vw);
}

.bestiary-header h2 {
    text-shadow:
        0 2px 0 rgba(5, 62, 58, 0.9),
        0 0 22px rgba(92, 246, 213, 0.34);
}

.bestiary-note {
    border-color: rgba(92, 246, 213, 0.30);
}

.bestiary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bestiary-section {
    display: grid;
    gap: 14px;
    margin-bottom: 26px;
}

.bestiary-section:last-child {
    margin-bottom: 0;
}

.bestiary-section-title {
    display: grid;
    gap: 6px;
}

.bestiary-section-title h3 {
    margin: 0;
    color: var(--hunt-ivory);
    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(92, 246, 213, 0.24);
}

.bestiary-section-title p {
    margin: 0;
    color: var(--hunt-muted);
    line-height: 1.5;
}

.bestiary-card {
    --enemy-glow: #42e8ff;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(92, 246, 213, 0.34);
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 4%, rgba(92, 246, 213, 0.12), transparent 36%),
        linear-gradient(145deg, rgba(6, 30, 44, 0.94), rgba(3, 8, 14, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 26px rgba(92, 246, 213, 0.10);
}

.bestiary-card-header {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.bestiary-portrait {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid rgba(92, 246, 213, 0.38);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 40%, rgba(92, 246, 213, 0.16), transparent 60%),
        rgba(2, 13, 21, 0.72);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.04);
}

.bestiary-location-sigil,
.bestiary-card-icon {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 1px solid rgba(92, 246, 213, 0.38);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 40%, rgba(92, 246, 213, 0.16), transparent 60%),
        rgba(2, 13, 21, 0.72);
    color: var(--hunt-ivory);
    font-size: 2.4rem;
    font-weight: 900;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.04);
}

.bestiary-card-icon {
    color: #8af7ff;
    font-size: 2rem;
    text-shadow: 0 0 18px rgba(92, 246, 213, 0.42);
}

.bestiary-card-icon.has-card-art-preview {
    width: clamp(58px, 7vw, 78px);
    height: clamp(87px, 10.5vw, 117px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow:
        0 14px 20px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(92, 246, 213, 0.14);
}

.bestiary-card-icon.has-card-art-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.bestiary-preview-canvas {
    width: 112px;
    height: 112px;
    image-rendering: pixelated;
}

.bestiary-kill-badge {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 5px 9px;
    border: 1px solid rgba(92, 246, 213, 0.42);
    border-radius: 999px;
    background: rgba(2, 13, 21, 0.58);
    color: var(--hunt-ivory);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bestiary-card h3 {
    margin: 0;
    color: var(--hunt-ivory);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    text-shadow: 0 0 16px rgba(92, 246, 213, 0.34);
}

.bestiary-card-header p {
    margin: 5px 0 0;
    color: var(--hunt-muted);
    font-weight: 800;
}

.bestiary-description {
    min-height: 54px;
    margin-bottom: 14px;
    color: rgba(220, 248, 255, 0.84);
    line-height: 1.48;
}

.bestiary-card-values {
    margin: -4px 0 14px;
    padding: 10px 12px;
    border: 1px solid rgba(92, 246, 213, 0.22);
    border-radius: 14px;
    background: rgba(2, 13, 21, 0.48);
    color: rgba(173, 246, 230, 0.94);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.45;
}

.bestiary-chip-block {
    display: grid;
    gap: 8px;
}

.bestiary-chip-block small {
    color: var(--hunt-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bestiary-chip-list,
.bestiary-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.bestiary-chip-list span,
.bestiary-card-tags span {
    padding: 6px 9px;
    border: 1px solid rgba(92, 246, 213, 0.30);
    border-radius: 999px;
    background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--enemy-glow, #42e8ff) 18%, transparent), transparent 60%),
        rgba(2, 13, 21, 0.58);
    color: var(--hunt-ivory);
    font-size: 0.75rem;
    font-weight: 800;
}

.bestiary-card-progress {
    margin: 0;
}

.bestiary-card-groups,
.bestiary-card-class-group {
    display: grid;
    gap: 18px;
}

.bestiary-card-class-group {
    padding: 14px;
    border: 1px solid rgba(92, 246, 213, 0.18);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(2, 13, 21, 0.68), rgba(7, 30, 41, 0.38)),
        radial-gradient(circle at 0% 0%, rgba(92, 246, 213, 0.10), transparent 42%);
}

.bestiary-class-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.bestiary-class-header div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bestiary-class-header span {
    display: grid;
    min-width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(92, 246, 213, 0.34);
    border-radius: 12px;
    background: rgba(2, 13, 21, 0.62);
    color: #8af7ff;
    font-weight: 900;
}

.bestiary-class-header h4 {
    margin: 0;
    color: var(--hunt-ivory);
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bestiary-synergy-break {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 -2px;
    color: #8af7ff;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bestiary-synergy-break::before,
.bestiary-synergy-break::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(92, 246, 213, 0.36), transparent);
}

.bestiary-synergy-grid .bestiary-card {
    border-color: rgba(255, 85, 118, 0.28);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 85, 118, 0.12), transparent 42%),
        linear-gradient(145deg, rgba(2, 13, 21, 0.88), rgba(10, 35, 48, 0.74));
}

.bestiary-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.bestiary-stat-grid span {
    min-width: 0;
    padding: 9px 8px;
    border: 1px solid var(--hunt-line-soft);
    border-radius: 14px;
    background: rgba(2, 13, 21, 0.58);
    text-align: center;
}

.bestiary-stat-grid b {
    display: block;
    color: var(--hunt-ivory);
    font-size: 1rem;
}

.bestiary-stat-grid small {
    display: block;
    margin-top: 3px;
    color: var(--hunt-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

@media (max-width: 1060px) {
    .leaderboard-mode-grid {
        grid-template-columns: 1fr;
    }

    .bestiary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .leaderboard-overlay {
        padding: 10px;
    }

    .leaderboard-modal {
        width: 98vw;
        max-height: 96vh;
        border-radius: 18px;
    }

    .leaderboard-header {
        padding: 16px;
    }

    .leaderboard-content {
        max-height: calc(96vh - 118px);
        padding: 14px;
    }

    .leaderboard-row {
        grid-template-columns: 1fr 0.72fr 0.68fr 0.92fr;
        gap: 6px;
        padding: 8px;
        font-size: 0.78rem;
    }

    .leaderboard-wave-row {
        grid-template-columns: 1fr 0.8fr 0.82fr 0.58fr;
    }

    .leaderboard-mode-card {
        padding: 12px;
    }

    .bestiary-card {
        padding: 12px;
    }

    .bestiary-card-header {
        grid-template-columns: 88px 1fr;
        gap: 10px;
    }

    .bestiary-portrait,
    .bestiary-location-sigil,
    .bestiary-card-icon,
    .bestiary-preview-canvas {
        width: 86px;
        height: 86px;
    }

    .bestiary-location-sigil,
    .bestiary-card-icon {
        font-size: 1.5rem;
    }

    .bestiary-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.skins-container {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.skin-preview-frame {
    position: relative;
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(138, 247, 255, 0.24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 74%, rgba(92, 246, 213, 0.20), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow:
        inset 0 -18px 38px rgba(0, 0, 0, 0.30),
        0 12px 24px rgba(0, 0, 0, 0.24);
}

.skin-preview-frame::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 13px;
    height: 11px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.38);
    filter: blur(4px);
}

.skin-preview-canvas {
    position: relative;
    z-index: 1;
    width: 112px;
    height: 112px;
    image-rendering: pixelated;
}

.skin-card-title {
    display: block;
    color: #fff8df;
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.16;
}

.skin-card-caption {
    display: block;
    color: #8af7ff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

@media (max-width: 520px) {
    .skins-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .skin-preview-frame,
    .skin-preview-canvas {
        width: 96px;
        height: 96px;
    }

    .skin-card-title {
        font-size: 0.88rem;
    }

    .skin-card-caption {
        font-size: 0.64rem;
    }
}

.skins-menu-panel {
    width: min(1080px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
}

.skins-menu-panel .menu-title {
    margin-bottom: 2px;
}

.skins-menu-panel .skins-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    margin: 8px 0 4px;
    padding: 2px 6px 4px 2px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(138, 247, 255, 0.42) rgba(0, 0, 0, 0.20);
}

.skin-hero-section {
    position: relative;
    padding: 14px;
    border: 1px solid rgba(138, 247, 255, 0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at 5% 0%, rgba(92, 246, 213, 0.13), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
        rgba(2, 12, 19, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 16px 30px rgba(0, 0, 0, 0.28);
}

.skin-hero-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.skin-hero-header h2 {
    margin: 2px 0 0;
    color: #fff8df;
    font-size: 1.02rem;
    line-height: 1.1;
}

.skin-hero-kicker {
    color: #8af7ff;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.skin-hero-selected {
    max-width: 44%;
    padding: 6px 10px;
    border: 1px solid rgba(92, 246, 213, 0.28);
    border-radius: 999px;
    background: rgba(1, 18, 27, 0.70);
    color: #bffcf3;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-align: right;
    text-transform: uppercase;
}

.skin-hero-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.skins-menu-panel .skin-button {
    min-height: 156px;
    padding: 10px 8px 12px;
    gap: 7px;
    border-radius: 16px;
}

.skins-menu-panel .skin-button.selected {
    border-color: rgba(255, 231, 153, 0.80);
    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.48),
        0 0 24px rgba(255, 211, 105, 0.22),
        inset 0 0 0 1px rgba(255, 231, 153, 0.12);
}

.skins-menu-panel .skin-button.selected .skin-preview-frame {
    border-color: rgba(255, 231, 153, 0.55);
    box-shadow:
        inset 0 -18px 38px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(255, 211, 105, 0.18);
}

.skins-menu-panel .skin-preview-frame {
    width: 86px;
    height: 86px;
    border-radius: 20px;
}

.skins-menu-panel .skin-preview-frame::after {
    left: 20px;
    right: 20px;
    bottom: 10px;
}

.skins-menu-panel .skin-preview-canvas {
    width: 86px;
    height: 86px;
}

.skins-menu-panel .skin-card-title {
    min-height: 2.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
}

.skins-menu-panel .skin-card-caption {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
}

.skins-menu-panel .skin-description {
    min-height: 18px;
    margin-top: 0;
}

.skins-menu-panel .back-button {
    align-self: center;
    min-width: 190px;
}

@media (max-width: 860px) {
    .skins-menu-panel {
        width: min(720px, 95vw);
        padding: 18px;
    }

    .skin-hero-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .skins-menu-panel {
        max-height: 92vh;
        padding: 14px;
    }

    .skin-hero-section {
        padding: 12px;
    }

    .skin-hero-header {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .skin-hero-selected {
        max-width: none;
        text-align: left;
    }

    .skin-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .skins-menu-panel .skin-button {
        min-height: 142px;
        padding: 9px 6px 10px;
    }

    .skins-menu-panel .skin-preview-frame,
    .skins-menu-panel .skin-preview-canvas {
        width: 76px;
        height: 76px;
    }
}

/* Card art integration */
.card-modal {
    width: min(1180px, 96vw);
    max-height: 94vh;
    padding: clamp(14px, 2.2vw, 30px);
    overflow-y: auto;
}

.card-title {
    margin-bottom: clamp(6px, 1vh, 10px);
    font-size: clamp(1.35rem, 4.4vw, 2.7rem);
}

.card-subtitle {
    margin-bottom: clamp(12px, 2.6vh, 26px);
    font-size: clamp(0.82rem, 1.8vw, 1.12rem);
}

.cards-grid {
    --card-choice-width: clamp(150px, 23vw, 256px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-choice-width)), var(--card-choice-width)));
    justify-content: center;
    align-items: start;
    gap: clamp(10px, 1.7vw, 24px);
    margin-bottom: clamp(16px, 3vh, 34px);
}

.card.has-card-art {
    width: var(--card-choice-width);
    min-height: 0;
    aspect-ratio: 2 / 3;
    padding: 0;
    border: 0;
    border-left: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    clip-path: none;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.58));
    isolation: isolate;
    overflow: visible;
}

.card.has-card-art::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--card-art, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.card-art-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.card.has-card-art::after {
    content: '';
    position: absolute;
    inset: 4.8% 5.5%;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, box-shadow 180ms ease;
}

.card.has-card-art:hover {
    border: 0;
    background: transparent !important;
    box-shadow: none;
    transform: translateY(-6px) scale(1.018);
    filter:
        drop-shadow(0 22px 28px rgba(0, 0, 0, 0.68))
        drop-shadow(0 0 18px rgba(92, 246, 213, 0.18));
}

.card.has-card-art.selected {
    border: 0;
    background: transparent !important;
    box-shadow: none;
    filter:
        drop-shadow(0 24px 30px rgba(0, 0, 0, 0.70))
        drop-shadow(0 0 22px rgba(92, 246, 213, 0.34));
}

.card.has-card-art.selected::after {
    opacity: 1;
    border-color: rgba(92, 246, 213, 0.58);
    box-shadow:
        inset 0 0 22px rgba(92, 246, 213, 0.14),
        0 0 22px rgba(92, 246, 213, 0.24);
}

.card.has-card-art .card-name {
    position: absolute;
    top: 9.8%;
    left: 25%;
    right: 25%;
    z-index: 2;
    display: flex;
    height: 7.6%;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    color: #2d1a10;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(0.5rem, 0.92vw, 0.84rem);
    font-style: normal;
    font-weight: 800;
    line-height: 1.02;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 237, 196, 0.34);
    text-wrap: balance;
}

.card.has-card-art .card-description {
    position: absolute;
    left: 14.8%;
    right: 14.8%;
    bottom: 9.6%;
    z-index: 2;
    display: -webkit-box;
    height: 16.2%;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    color: #352013;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(0.46rem, 0.78vw, 0.72rem);
    font-weight: 700;
    line-height: 1.08;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 238, 200, 0.24);
}

.card.has-card-art .card-type-icon {
    display: none;
}

.card.has-card-art .card-rarity,
.card.has-card-art .card-number,
.card.has-card-art .card-checkmark {
    z-index: 3;
    border: 1px solid rgba(222, 196, 150, 0.42);
    background: rgba(10, 7, 8, 0.72);
    color: #f4e7c8;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}

.card.has-card-art .card-rarity {
    top: 20.6%;
    right: auto;
    left: 50%;
    max-width: 62%;
    padding: 3px 8px;
    transform: translateX(-50%);
    border-radius: 999px;
    font-size: clamp(0.42rem, 0.62vw, 0.58rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.card.has-card-art.common .card-rarity {
    color: #e8ddd0;
}

.card.has-card-art.good .card-rarity {
    border-color: rgba(94, 221, 235, 0.48);
    color: #bdf7ff;
}

.card.has-card-art.epic .card-rarity {
    border-color: rgba(186, 116, 255, 0.55);
    color: #efd7ff;
}

.card.has-card-art.legendary .card-rarity {
    border-color: rgba(255, 199, 90, 0.62);
    color: #ffe7a3;
}

.card.has-card-art .card-number,
.card.has-card-art .card-checkmark {
    top: 7.2%;
    width: clamp(20px, 2.8vw, 30px);
    height: clamp(20px, 2.8vw, 30px);
    font-size: clamp(0.62rem, 1vw, 0.88rem);
}

.card.has-card-art .card-number {
    left: 10.5%;
}

.card.has-card-art .card-checkmark {
    right: 10.5%;
    opacity: 0;
    background: rgba(20, 126, 111, 0.88);
}

.card.has-card-art.selected .card-checkmark {
    opacity: 1;
}

@media (max-width: 760px) {
    .card-selection-container {
        padding: 10px;
    }

    .card-modal {
        width: 98vw;
        max-height: 96vh;
        padding: 12px;
    }

    .cards-grid {
        --card-choice-width: clamp(136px, 42vw, 188px);
        gap: 10px;
    }

    .card-buttons-container {
        gap: 10px;
    }

    .card-button {
        min-width: min(44vw, 220px);
        padding: 10px 12px;
        font-size: 0.76rem;
    }
}

@media (max-height: 620px) and (orientation: landscape) {
    .card-selection-container {
        padding: 8px;
    }

    .card-modal {
        width: 98vw;
        max-height: 98vh;
        padding: 10px 12px;
    }

    .card-title {
        font-size: clamp(1.05rem, 5vh, 1.55rem);
    }

    .card-subtitle {
        margin-bottom: 8px;
        font-size: 0.78rem;
    }

    .cards-grid {
        --card-choice-width: clamp(118px, 24vw, 158px);
        gap: 8px;
        margin-bottom: 10px;
    }

    .card.has-card-art .card-name {
        font-size: clamp(0.42rem, 1.8vh, 0.58rem);
    }

    .card.has-card-art .card-description {
        -webkit-line-clamp: 4;
        font-size: clamp(0.36rem, 1.45vh, 0.5rem);
    }

    .card.has-card-art .card-rarity {
        font-size: 0.38rem;
    }
}

/* Achievement badge art */
.achievement-card {
    min-height: 208px;
    padding: 16px;
}

.achievement-card-top {
    align-items: flex-start;
}

.achievement-seal {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(54px, 6vw, 72px);
    height: clamp(54px, 6vw, 72px);
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 14px 22px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(92, 246, 213, 0.16);
}

.achievement-seal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.38));
}

.achievement-card.is-unlocked .achievement-seal {
    filter: saturate(1.08) brightness(1.04);
}

.achievement-card.is-locked .achievement-seal img {
    filter: grayscale(0.92) brightness(0.55) contrast(0.92);
    opacity: 0.68;
}

.achievement-card.is-hidden-achievement:not(.is-unlocked) .achievement-seal img {
    filter: grayscale(1) brightness(0.36) blur(0.5px);
    opacity: 0.48;
}

.achievement-status {
    margin-top: 4px;
    padding: 5px 8px;
    border: 1px solid rgba(72, 222, 218, 0.18);
    background: rgba(0, 0, 0, 0.24);
}

.achievement-result-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding-left: 14px;
}

.achievement-result-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter:
        drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 12px rgba(92, 246, 213, 0.14));
}

.achievement-result-item .card-summary-main {
    min-width: 0;
}

.achievement-result-item .card-summary-value {
    margin-top: 0;
    text-align: right;
}

/* First-run server profile gate */
.omen-profile-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 50% 40%, rgba(34, 25, 18, 0.88), rgba(5, 5, 8, 0.96) 66%),
        rgba(0, 0, 0, 0.84);
    pointer-events: auto;
}

.omen-profile-gate__panel {
    width: min(440px, 92vw);
    padding: 26px;
    border: 1px solid rgba(230, 193, 121, 0.36);
    border-radius: 8px;
    background: rgba(13, 11, 10, 0.94);
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.54),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.omen-profile-gate__title {
    margin: 0 0 10px;
    color: #f8e4b5;
    font-family: var(--omen-font-display);
    font-size: 1.4rem;
    line-height: 1.18;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.omen-profile-gate__description,
.omen-profile-gate__hint,
.omen-profile-gate__status {
    margin: 0;
    color: rgba(242, 226, 190, 0.84);
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
}

.omen-profile-gate__field {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.omen-profile-gate__label {
    color: rgba(248, 228, 181, 0.9);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.omen-profile-gate__input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border: 1px solid rgba(230, 193, 121, 0.45);
    border-radius: 6px;
    outline: none;
    background: rgba(0, 0, 0, 0.38);
    color: #fff4d6;
    font: 700 1.05rem/1.2 var(--omen-font-body);
}

.omen-profile-gate__input:focus {
    border-color: rgba(92, 246, 213, 0.76);
    box-shadow: 0 0 0 2px rgba(92, 246, 213, 0.14);
}

.omen-profile-gate__hint {
    margin-top: 9px;
    color: rgba(242, 226, 190, 0.66);
    font-size: 0.82rem;
}

.omen-profile-gate__status {
    min-height: 1.35em;
    margin-top: 12px;
    font-weight: 700;
}

.omen-profile-gate__status[data-state="ok"] {
    color: #82f2ce;
}

.omen-profile-gate__status[data-state="error"] {
    color: #ffb3a4;
}

.omen-profile-gate__status[data-state="pending"] {
    color: #f8e4b5;
}

.omen-profile-gate__button {
    width: 100%;
    margin-top: 16px;
    padding: 13px 18px;
    border: 1px solid rgba(230, 193, 121, 0.58);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(44, 35, 24, 0.96), rgba(18, 15, 13, 0.96));
    color: #f8e4b5;
    cursor: pointer;
    font: 800 1rem/1 var(--omen-font-display);
    text-transform: uppercase;
}

.omen-profile-gate__button:disabled {
    cursor: not-allowed;
    filter: grayscale(0.6);
    opacity: 0.5;
}

@media (max-width: 640px) {
    .achievement-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .achievement-card {
        min-height: 188px;
    }

    .achievement-result-item {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .achievement-result-icon {
        width: 48px;
        height: 48px;
    }

    .achievement-result-item .card-summary-value {
        grid-column: 2;
        text-align: left;
    }
}