/* Heroes of the Continent - Mobile Game Styles */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');

:root {
    --witcher-gold: #d4af37;
    --witcher-bronze: #cd7f32;
    --witcher-dark: #1a1a1a;
    --witcher-red: #8b0000;
    --text-light: #f5f5f5;
    --text-gold: #ffd700;
    --background-dark: rgba(0, 0, 0, 0.7);
    --card-background: rgba(20, 20, 20, 0.85);
    --border-glow: rgba(212, 175, 55, 0.6);
    --button-shadow: rgba(0, 0, 0, 0.8);
}

/* Utility Classes */
.centered {
    text-align: center !important;
}

/* Unified Page Container */
.page-container {
    padding: 20px 10px;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease-out;
}

.loading-content {
    text-align: center;
    color: var(--text-light);
}

.loading-logo {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--witcher-gold);
    box-shadow: 0 0 30px var(--border-glow);
}

.loading-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
    transition: filter 2s ease-in-out;
}

.loading-fill {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--witcher-gold) 0%, var(--witcher-bronze) 100%);
    animation: fillUp 3s ease-in-out infinite;
}

.loading-text {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-gold);
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeInText 1s ease-in-out 0.5s forwards;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid transparent;
    border-top: 3px solid var(--witcher-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes fillUp {
    0% { top: 100%; }
    50% { top: 0%; }
    100% { top: 100%; }
}

@keyframes fadeInText {
    to { opacity: 1; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    width: 100%;
    height: 100%;
    min-width: 380px;
    max-width: 440px;
    min-height: 700px;
    max-height: 956px;
    margin: 0;
    overflow: hidden;
    font-family: 'Cinzel', serif;
    background: #000;
    background-size: 440px 956px;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--text-light);
    user-select: none;
    -webkit-user-select: none;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

/* Full-screen mobile game layout */
.mobile-game {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 440px;
    height: 100%;
    max-height: 956px;
    display: flex;
    flex-direction: column;
}

/* Page classes for bestiary */
.page {
    width: 33%;
    aspect-ratio: 1;
    margin: 0 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    transform-style: preserve-3d;
    border-radius: 5px;
    flex-shrink: 0;
}

.page:hover {
    transform: translateY(-10px) rotateZ(-5deg);
}

.page-spine {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color:black;
    padding: 3px;
    border-radius: 5px;
    background: url('../images/backgrounds/parchment_bg.png');
    background-size: cover;
    background-position: center;
}

/* Content sections with backgrounds */
#bestiarySection, #enemyInfoSection, #zoneInfoSection {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(20,10,0,0.8)), url('../images/backgrounds/settings_bg.jpg');
    background-size: cover;
    background-position: center;
}

/* Volume number and title styling */
.volume-number {
    font-family: 'IM Fell English', serif;
    color: #8b4513;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.volume-title {
    font-family: 'IM Fell English', serif;
    color: #cd7f32;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.book .volume-number {
    color: #d4af37;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.book .volume-title {
    color: var(--text-gold);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    margin-left: 5px;
    font-size: 0.7rem;
    word-break: break-word;
    hyphens: auto;
    transform: none;
}

.page .volume-number {
    color: #8b6f47;
    font-size: 2rem;
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.2);
}

.page .volume-title {
    color: #5c3317;
    padding: 0 2px;
    font-size: 0.8rem;
    transform: none;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: none;
    white-space: normal;
}

/* Centered content pages */
.beast-detail-page.centered,
.parchment-page.centered {
    max-width: 600px;
    margin: 0 auto;
}

/* Background system */
.game-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 440px;
    height: 100%;
    max-height: 956px;
    background-size: 440px 956px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
}

.welcome-bg {
    background-image: url('../images/backgrounds/welcome_bg.jpg');
}

.character-creation-bg {
    background-image: url('../images/backgrounds/character_creation_bg.jpg');
}

.main-game-bg {
    background-image: url('../images/backgrounds/main_game_bg.jpg');
}

.adventure-bg {
    background-image: url('../images/backgrounds/adventure_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.character-bg {
    background-image: url('../images/backgrounds/character_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.settings-bg {
    background-image: url('../images/backgrounds/settings_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.socials-bg {
    background-image: url('../images/backgrounds/socials_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Game screen overlay - full height, no padding */
.game-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    padding: 0;
    overflow: hidden;
}

/* Header */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 5px 20px;
    gap: 5px;
    background: rgba(26, 26, 26, 0.95);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url('../images/backgrounds/header_footer_bg.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10003;
    box-shadow: 0 3px 12px rgba(212, 175, 55, 0.25), 0 3px 20px rgba(212, 175, 55, 0.15);
    overflow: visible;
    flex-shrink: 0;
}

/* Header text contrast */
.game-header * {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
}

.header-left {
    display: flex;
    align-items: center;
}

.game-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.5));
}

.player-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 0.8rem;
    font-weight: 600;
    overflow: visible;
}

.game-header .game-title,
.game-header .status-value,
.game-header .status-label {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(0, 0, 0, 1);
}

.game-header .game-title,
.game-header .status-value,
.game-header .status-label {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(0, 0, 0, 1);
}

/* Extended health bar styles */
.health-container-extended {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.health-bar-container-extended {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.health-bar-extended {
    flex: 1;
    min-width: 150px;
    max-width: 180px;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    overflow: hidden;
    position: relative;
}

.player-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.game-title {
    font-family: 'Uncial Antiqua', cursive;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    color: var(--witcher-gold);
    text-shadow: 
        0 0 6px rgba(212, 175, 55, 0.8),
        0 1px 2px rgba(0, 0, 0, 0.8);
    margin: 0;
    letter-spacing: 1px;
    flex: 1;
}

.game-subtitle {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
    color: var(--text-gold);
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Main content wrapper - fills remaining space after header */
.main-content {
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
    background: transparent;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}



.main-content .content-section:first-child {
    margin-top: 0;
}

/* Content area - fills remaining space */
.game-content {
    flex: 1 1 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.game-content::-webkit-scrollbar {
    display: none;
}

.welcome-text {
    margin-bottom: 2rem;
    max-width: 90%;
}

.welcome-text p {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem);
    line-height: 1.6;
    margin-bottom: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.welcome-text .highlight {
    color: var(--text-gold);
    font-weight: 600;
    font-size: clamp(1rem, 4vw, 1.2rem);
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    max-width: 300px;
}

.feature {
    background: var(--card-background);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--witcher-gold);
    font-size: clamp(0.8rem, 3vw, 1rem);
    text-align: left;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.feature:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateX(5px);
}

/* Game controls */
.game-controls {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

.game-button {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 60px;
    border: none;
    border-radius: 12px;
    font-family: 'Cinzel', serif;
    font-size: clamp(1rem, 4vw, 1.2rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px var(--button-shadow);
}

.game-button.primary {
    background: linear-gradient(135deg, var(--witcher-gold), var(--witcher-bronze));
    color: var(--witcher-dark);
    border: 2px solid var(--witcher-gold);
}

.game-button.secondary {
    background: transparent;
    color: var(--text-gold);
    border: 2px solid var(--witcher-gold);
}

.game-button:active {
    transform: scale(0.98);
}

.game-button.primary:hover {
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.game-button.secondary:hover {
    background: var(--witcher-gold);
    color: var(--witcher-dark);
}

.button-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.game-button:hover .button-glow {
    left: 100%;
}

/* Character Creation Specific */
.vocation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 350px;
    padding: 0 10px;
}

.vocation-card {
    background: var(--card-background);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.vocation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(45deg, var(--witcher-gold), var(--witcher-bronze));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vocation-card:active::before {
    opacity: 1;
}

.vocation-card:active {
    transform: scale(0.95);
    border-color: var(--witcher-gold);
    background: rgba(212, 175, 55, 0.1);
}

.vocation-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.vocation-name {
    font-size: clamp(0.8rem, 3vw, 1rem);
    color: var(--text-gold);
    font-weight: 600;
    margin-bottom: 5px;
}

.vocation-description {
    font-size: clamp(0.7rem, 2.5vw, 0.9rem);
    opacity: 0.8;
    line-height: 1.3;
}

/* Footer */
.game-footer {
    padding: 15px 20px;
    text-align: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.developer-info {
    font-size: clamp(0.7rem, 2.5vw, 0.9rem);
    color: var(--text-light);
    opacity: 0.7;
}

/* Particle Effects */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--witcher-gold);
    border-radius: 50%;
    opacity: 0.6;
    animation: float 8s ease-in-out infinite;
}

.particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.particle:nth-child(2) {
    left: 30%;
    animation-delay: 1s;
    animation-duration: 8s;
}

.particle:nth-child(3) {
    left: 50%;
    animation-delay: 2s;
    animation-duration: 7s;
}

.particle:nth-child(4) {
    left: 70%;
    animation-delay: 3s;
    animation-duration: 9s;
}

.particle:nth-child(5) {
    left: 90%;
    animation-delay: 4s;
    animation-duration: 6s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.6;
    }
    50% {
        transform: translateY(50vh) rotate(180deg);
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.8s ease-out;
}

.slide-up {
    animation: slideUp 0.6s ease-out;
}

.bounce-in {
    animation: bounceIn 0.8s ease-out;
}


/* Landscape orientation adjustments */

/* Welcome Section */
.welcome-section {
    margin: 20px 0;
    text-align: center;
}

.welcome-message {
    background: var(--card-background);
    border: 2px solid var(--witcher-gold);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.welcome-message:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.welcome-message h2 {
    color: var(--witcher-gold);
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.welcome-message p {
    color: var(--text-light);
    opacity: 0.8;
    font-size: 0.9rem;
}

/* Status Cards */
.status-cards {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    justify-content: space-between;
}

.status-card {
    flex: 1;
    background: var(--card-background);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.status-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.status-label {
    font-size: 0.7rem;
    color: var(--text-light);
    opacity: 0.8;
    margin-bottom: 2px;
}

.status-value {
    font-size: 0.9rem;
    color: var(--text-gold);
    font-weight: 600;
}

/* Quest Section */
.quest-section {
    margin: 20px 0;
}

.section-title {
    color: var(--witcher-gold);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.quest-card {
    background: var(--card-background);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 15px;
    backdrop-filter: blur(10px);
}

.quest-name {
    color: var(--text-gold);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.quest-description {
    color: var(--text-light);
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 10px;
    line-height: 1.3;
}

.quest-progress {
    margin-top: 10px;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--witcher-gold), var(--witcher-bronze));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.7rem;
    color: var(--text-gold);
    text-align: center;
}

/* Activity Section */
.activity-section {
    margin: 20px 0;
}

.activity-list {
    background: var(--card-background);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 10px;
    backdrop-filter: blur(10px);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    font-size: 1.2rem;
    min-width: 25px;
    text-align: center;
}

.activity-text {
    flex: 1;
    color: var(--text-light);
    font-size: 0.8rem;
    line-height: 1.2;
}

.activity-time {
    color: var(--text-gold);
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Avatar Section */
.avatar-section {
    display: flex;
    justify-content: center;
    margin: 30px 0 20px;
}

.player-main-avatar {
    text-align: center;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    gap: 15px;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--witcher-gold), transparent);
}

.divider-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sub Menu Container - slides up from main navigation */
.sub-menu-container {
    position: fixed;
    bottom: 125px;
    left: 0;
    width: 100%;
    max-width: 440px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 45;
    padding: 8px 0;
    overflow: hidden;
    height: 65px;
}

/* Sub Level 2 and 3 menus */
.sub-level-2, .sub-level-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding: 8px 0;
    overflow: hidden;
    height: 65px;
    background: rgba(0, 0, 0, 0.95);
    pointer-events: auto;
}



/* Different background textures for each menu - full size textures */
#adventureSubMenu {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/menu_adventure_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
    border-top: 2px solid rgba(64, 64, 64, 0.8);
}

#characterSubMenu {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/menu_character_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
    border-top: 2px solid rgba(64, 64, 64, 0.8);
}

#socialSubMenu {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/menu_social_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
    border-top: 2px solid rgba(64, 64, 64, 0.8);
}

#settingsSubMenu {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/header_footer_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
    border-top: 2px solid rgba(64, 64, 64, 0.8);
}

.sub-menu-container.active, .sub-level-2.active, .sub-level-3.active {
    transform: translateY(0);
}

/* Remove all parent-active sliding effects */

/* Second Level Sub-Menus - inherit parent textures */
.sub-level-2 {
    position: fixed;
    bottom: 125px;
    left: 0;
    width: 100%;
    max-width: 440px;
    height: 65px;
    z-index: 1001;
    padding: 8px 0;
    transform: translateX(100%);
    transition: transform 1.0s ease-in-out, opacity 1.0s ease-in-out, visibility 1.0s ease-in-out;
    display: block;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
}

/* Adventure sub-menus get parchment texture - full size */
.sub-level-2#questManagement,
.sub-level-2#worldExploration,
.sub-level-2#combatActions,
.sub-level-2#commerceHub,
.sub-level-2#smithyServices,
.sub-level-2#magicSystem,
.sub-level-2#entertainment,
.sub-level-2#communityBoard {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/menu_adventure_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
}

/* Character sub-menus get leather texture - full size */
.sub-level-2#characterProfile,
.sub-level-2#inventorySystem,
.sub-level-2#equipmentManagement,
.sub-level-2#characterProgression,
.sub-level-2#vocationsSkills,
.sub-level-2#characterEnhancement,
.sub-level-2#homePersonalSpace,
.sub-level-2#petSystem {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/menu_character_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
}

/* Social sub-menus get social texture - full size */
.sub-level-2#guildManagement,
.sub-level-2#guildOperations,
.sub-level-2#rankingsCompetition,
.sub-level-2#playerVsPlayer,
.sub-level-2#communication,
.sub-level-2#playerTrading,
.sub-level-2#specialActivities {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/menu_social_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
}

/* Settings sub-menus get header/footer texture - full size */
.sub-level-2#gameHelp,
.sub-level-2#gameInformation,
.sub-level-2#worldInformation,
.sub-level-2#accountManagement,
.sub-level-2#communityNotes {
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/header_footer_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
}

.sub-level-2.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

/* Sliding door effect for second level menus */
.sub-level-2.sliding-left {
    transform: translateX(-25%);
    width: 50%;
}

.sub-level-2.sliding-right {
    transform: translateX(25%);
    width: 50%;
    left: 50%;
}



/* Slide out to left animation (opposite direction from entry) */
.sub-level-2.hiding {
    transform: translateX(-100%);
}

/* Ensure hidden menus stay off-screen */
.sub-level-2:not(.active):not(.hiding) {
    transform: translateX(100%);
}


/* Force specific hiding for Community Board menu */
.sub-level-2#communityBoard:not(.active) {
    transform: translateX(-100%);
    visibility: hidden;
}

.sub-level-2.active {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}




.sub-menu-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sub-menu-scroll::-webkit-scrollbar {
    display: none;
}

/* Level 3 menus - inherit positioning from level 2 */
.sub-level-3 {
    position: fixed;
    bottom: 125px;
    left: 0;
    width: 100%;
    max-width: 440px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 50;
    padding: 8px 0;
    height: 80px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    border-top: 2px solid rgba(64, 64, 64, 0.8);
}

.sub-level-3.active {
    transform: translateY(0);
}

.sub-menu-grid {
    display: flex;
    min-width: max-content;
    flex-wrap: nowrap;
    /* Ensure grid can extend beyond container for scrolling */
    width: max-content;
    overflow: visible;
}

.sub-menu-item {
    flex: 0 0 auto;
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    height: 64px;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 3px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 1;
}

.sub-menu-item:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.3));
}

.sub-menu-item:active {
    transform: translateY(-2px);
    z-index: 1010;
    filter: drop-shadow(0 8px 16px rgba(212, 175, 55, 0.4));
}

.sub-menu-item.elevated {
    z-index: 10000;
    filter: drop-shadow(0 8px 16px rgba(212, 175, 55, 0.4));
    transition: transform 0.3s ease, filter 0.3s ease;
    position: relative;
}

/* Elevated sub-menu labels get nav-button.active styling */
.sub-menu-item.elevated .sub-menu-label {
    background: #3c2414;
    color: #ffd700;
    padding: 3px 6px;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid rgba(212, 175, 55, 0.5);
    animation: floatIn 0.3s ease-out;
    position: relative;
    width: auto;
    top: 3px;
    overflow: visible;
}

/* Nav-label arrow pointing up for elevated labels */
.sub-menu-item.elevated .sub-menu-label::after {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.9);
    z-index: 10001;
}

/* Float-in animation for elevated labels */
@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.sub-menu-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
    opacity: 1;
    object-fit: contain;
}

/* Ensure no items are highlighted by default - full opacity */
.sub-menu-item .sub-menu-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    opacity: 1;
}

/* Specifically reset first item to prevent any default highlighting */
.sub-menu-item:first-child .sub-menu-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
    opacity: 1 !important;
}

/* Remove any default focus styling that might cause highlighting */
.sub-menu-item:focus {
    outline: none;
}

.sub-menu-item:focus .sub-menu-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    opacity: 1;
}

/* Active sub-menu items get the same effect as active nav icons */
.sub-menu-item:hover .sub-menu-icon {
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 4px 8px rgba(212, 175, 55, 0.6));
}

/* Only explicitly active items get the highlight (not automatic) */
.sub-menu-item.active .sub-menu-icon {
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 4px 8px rgba(212, 175, 55, 0.6));
}

/* Specific fix for World Exploration submenu - ensure full visibility */
#worldExploration .sub-menu-item {
    opacity: 1 !important;
    filter: none !important;
}

#worldExploration .sub-menu-icon {
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
}

#worldExploration .sub-menu-label {
    opacity: 1 !important;
}

/* World Exploration hover effects */
#worldExploration .sub-menu-item:hover .sub-menu-icon {
    filter: brightness(1.2) saturate(1.3) drop-shadow(0 4px 8px rgba(212, 175, 55, 0.6)) !important;
}

.sub-menu-label {
    font-size: 0.6rem;
    color: var(--text-gold);
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    background: #3c2414;
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid #d4af37;
}

/* Bottom Menu */
.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 440px;
    background: rgba(0, 0, 0, 0.4);
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url('../images/backgrounds/header_footer_bg.jpg');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    background-position: top;
    padding: 12px;
    z-index: 50;
}

.menu-grid-4x4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    height: 140px;
    padding: 0 8px;
    justify-items: stretch;
    align-items: stretch;
}

.menu-item {
    background: transparent !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 8px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
}

.menu-item:hover {
    border-color: var(--witcher-gold);
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-3px);
}

.menu-item:active {
    transform: scale(0.95);
}

.menu-icon {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
    transition: all 0.3s ease !important;
    object-fit: contain !important;
}

.menu-label {
    font-size: 0.7rem;
    color: var(--text-gold);
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    border: 1px solid var(--witcher-gold);
}

.menu-item.active .menu-label,
.menu-item:active .menu-label {
    opacity: 1;
    visibility: visible;
}

.menu-item.active .menu-icon,
.menu-item:active .menu-icon {
    transform: scale(1.2);
}

.menu-item.active {
    /* Keep only the visual effects - no background or border changes */
}

/* Intro Tutorial Highlight */
.intro-highlight {
    border: 2px solid var(--witcher-gold) !important;
    background: rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6) !important;
    animation: pulse-glow 2s ease-in-out infinite !important;
    position: relative !important;
    z-index: 9999 !important;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
    }
}

/* Character Page Styles */
.character-profile {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.character-avatar {
    margin-bottom: 20px;
}

.avatar-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--witcher-gold);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.character-name {
    color: var(--text-gold);
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.character-vocation {
    color: var(--text-light);
    opacity: 0.8;
    margin-bottom: 5px;
}

.character-level {
    color: var(--witcher-gold);
    font-weight: 600;
    margin-bottom: 20px;
}

.character-stats {
    margin-bottom: 25px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #ffd700;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 8px 12px;
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.5));
}

.game-header .stat-item {
    padding: 0px 10px;
    background: none;
    border: none;
    margin-bottom: 0;
}

.game-header .player-stats {
    padding: 4px 0px;
    align-items: center;
}

.stat-label {
    color: var(--text-light);
    font-size: 0.9em;
    font-weight: 600;
    flex: 1;
    text-align: left;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.stat-value {
    color: var(--text-gold);
    font-weight: bold;
    text-align: right;
}

.stat-bar {
    position: relative;
    width: 60%;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
}

.stat-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.health-fill {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.xp-fill {
    background: linear-gradient(90deg, var(--witcher-gold), var(--witcher-bronze));
}

.stat-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.equipment-preview {
    margin-top: 20px;
}

.equipment-preview h3 {
    color: var(--text-gold);
    margin-bottom: 10px;
}

.equipment-slots {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.equipment-slot {
    background: var(--card-background);
    border: 1px solid var(--witcher-gold);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    min-width: 80px;
}

.equipment-slot.empty {
    opacity: 0.5;
}

.equipment-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}

.equipment-name {
    font-size: 0.8rem;
    color: var(--text-light);
}

.empty-slot {
    color: var(--text-light);
    opacity: 0.6;
    font-size: 0.8rem;
}

/* Action Grid Styles */
.action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 10px;
}

.action-button {
    background: var(--card-background);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.action-button:hover {
    border-color: var(--witcher-gold);
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.action-button:active {
    transform: scale(0.95);
}

.button-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.button-label {
    font-size: 0.8rem;
    color: var(--text-gold);
    font-weight: 600;
}

/* Adventure Page Styles */
.location-info {
    text-align: center;
    margin-bottom: 30px;
}

.location-name {
    color: var(--text-gold);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.location-description {
    color: var(--text-light);
    opacity: 0.8;
}

.adventure-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
    max-width: 400px;
}

.adventure-option {
    display: flex;
    align-items: center;
    padding: 15px;
    background: var(--card-background);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.adventure-option:hover {
    border-color: var(--witcher-gold);
    background: rgba(212, 175, 55, 0.1);
}

.option-icon {
    font-size: 2rem;
    margin-right: 15px;
    min-width: 60px;
    text-align: center;
}

.option-content h3 {
    color: var(--text-gold);
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.option-content p {
    color: var(--text-light);
    opacity: 0.8;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.option-reward {
    color: var(--witcher-gold);
    font-size: 0.8rem;
    font-weight: 600;
}

.active-adventure {
    background: var(--card-background);
    border: 2px solid var(--witcher-gold);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.adventure-progress h3 {
    color: var(--text-gold);
    margin-bottom: 15px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--witcher-gold), var(--witcher-bronze));
    border-radius: 4px;
    transition: width 0.3s ease;
}

.time-remaining {
    color: var(--witcher-gold);
    font-weight: 600;
    margin-top: 10px;
}

/* Back Button - Unified Dark Parchment Design */
.back-button {
    background: linear-gradient(135deg, #3c2414, #4a2a1a);
    border: 2px solid #2a1810;
    color: #e6d7c3;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Cinzel', serif;
    min-width: 120px;
    text-align: center;
    margin: 15px auto;
    display: block;
}

.back-button:hover {
    background: linear-gradient(135deg, #4a2a1a, #3c2414);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(60, 36, 20, 0.6);
    border-color: #5a3520;
}

/* Player Status in Header */
.player-status {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.status-item .label {
    color: var(--text-light);
    opacity: 0.8;
    font-size: 0.9rem;
}

.status-item .value {
    color: var(--text-gold);
    font-weight: 600;
}


/* Character Details Styles */
.character-details-container {
    padding: 20px;
    height: calc(100vh - 160px);
    overflow-y: auto;
    background: var(--card-background);
    border: 2px solid var(--witcher-gold);
    border-radius: 10px;
    margin: 10px;
}

.character-details-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-gold);
    font-size: 18px;
}

.character-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--witcher-gold);
    padding-bottom: 20px;
}

.character-header h2 {
    color: var(--text-gold);
    font-size: 24px;
    margin-bottom: 10px;
    font-family: 'Uncial Antiqua', serif;
}

.character-description {
    color: var(--text-light);
    font-style: italic;
    font-size: 16px;
}

.stats-section {
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 15px;
}

.stats-section h3 {
    color: var(--text-gold);
    margin-bottom: 15px;
    font-size: 18px;
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}


.stat-item:hover {
    background: rgba(212, 175, 55, 0.2);
}


.character-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--witcher-gold);
}

.character-actions .sub-menu-item {
    min-width: 120px;
    margin: 0 10px;
}


/* Character Details in Main Content */
.character-details-full {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

.character-details-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-gold);
    font-size: 18px;
}

.character-details-full .character-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--witcher-gold);
    padding-bottom: 20px;
}

.character-details-full .character-header h2 {
    color: var(--text-gold);
    font-size: 28px;
    margin-bottom: 10px;
}

.character-details-full .character-description {
    color: var(--text-light);
    font-style: italic;
    font-size: 18px;
}

.character-details-full .stats-section {
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 15px;
}

.character-details-full .stats-section h3 {
    color: var(--text-gold);
    margin-bottom: 15px;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 10px;
}

.character-details-full .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.character-details-full .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.character-details-full .stat-item:hover {
    background: rgba(212, 175, 55, 0.2);
}

.character-details-full .stat-label {
    color: var(--text-light);
    font-weight: 600;
    flex: 1;
    font-size: 1em;
    text-align: left;
}

.character-details-full .stat-value {
    color: var(--text-gold);
    font-weight: bold;
    text-align: right;
    font-size: 1em;
}

.character-details-full .character-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid var(--witcher-gold);
}

.character-details-full .game-button {
    min-width: 150px;
}

.zone-start-button {
    width: 100%;
    margin-top: 10px;
    padding: 6px 12px;
    background: rgba(212, 175, 55, 0.8);
    color: #000;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    font-family: 'Cinzel', serif;
    cursor: pointer;
    transition: background 0.3s ease;
}

.zone-start-button:hover {
    background: rgba(212, 175, 55, 0.9);
}

.text-overlay {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 6px;
    backdrop-filter: blur(2px);
}

.expandable-zone {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Universal approach - target any zone details container */
/* Zone details container styling */
.zone-details-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    animation: fadeInZone 0.5s ease-out;
}

@keyframes fadeInZone {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
        body.mobile-game {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a1810 100%);
            min-height: 100vh;
        }
        
        
        
        /* Enhanced game background */
        .game-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 440px;
            height: 100%;
            max-height: 956px;
            background: 
                radial-gradient(circle at 25% 75%, rgba(139, 69, 19, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 75% 25%, rgba(212, 175, 55, 0.04) 0%, transparent 50%);
            z-index: -1;
        }
        
        
        .header-left {
            display: flex;
            align-items: center;
        }
        
        .logo-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        
        .game-logo {
            width: 40px;
            height: 40px;
            filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.5));
        }
        
        .game-title {
            font-size: 0.7rem;
            color: #d4af37;
            font-weight: 600;
            display: block;
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            font-family: 'Cinzel', serif !important;
        }
        
        .player-stats {
            display: flex;
            flex-direction: column;
            gap: 0;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .stats-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
        }
        
        .money-row {
            justify-content: center;
        }
        
        .combat-row {
            justify-content: center;
            gap: 12px;
        }
        
        .health-row {
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        
        
        .health-container {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .health-bar-container {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .health-bar {
            width: 50px;
            height: 12px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 6px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            overflow: hidden;
            position: relative;
        }
        
        .health-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff4444, #ff6666);
            border-radius: 5px;
            transition: width 0.3s ease;
        }
        
        .health-text {
            color: #ffd700;
            font-size: 0.8rem;
            font-weight: 600;
            min-width: 25px;
        }
        
        .player-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        
        .player-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #d4af37;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(212, 175, 55, 0.2);
            font-size: 1.2rem;
        }
        
        .player-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .player-name {
            font-size: 0.7rem;
            color: #d4af37;
            font-weight: 600;
            display: block;
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }
        
        
        .content-section {
            background: rgba(26, 26, 26, 0.3);
            border: 2px solid rgba(212, 175, 55, 0.3);
            border-radius: 15px;
            padding: 20px 10px;
            margin: 5px auto;
            max-width: 500px;
            width: 100%;
            position: relative;
            z-index: 10;
            backdrop-filter: blur(10px);
        }
        
        .section-title {
            font-family: 'Cinzel', serif;
            font-size: 1.3rem;
            color: #d4af37;
            margin-bottom: 15px;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
        }
        
        
        /* Action buttons grid */
        .action-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin: 5px auto;
            padding: 0;
            width: 100%;
            max-width: 500px;
        }
        
        /* Base action button styles */
        .action-button {
            border-radius: 8px;
            padding: 6px 4px;
            color: #ffd700;
            font-family: 'Cinzel', serif;
            font-weight: 600;
            font-size: 0.65rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            height: auto;
            overflow: hidden;
            text-align: center;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
        }
        
        /* Adventure Tab - Parchment Theme */
        .adventure-bg .action-button {
            background: rgba(139, 120, 93, 0.95);
            background-image: 
                linear-gradient(rgba(101, 67, 33, 0.4), rgba(160, 130, 98, 0.4)),
                url('../static/images/backgrounds/menu_adventure_bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 2px solid rgba(139, 120, 93, 0.8);
            color: #2c1810;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3), 0 0 4px rgba(255, 255, 255, 0.2);
        }
        
        /* Character Tab - Leather Theme */
        .character-bg .action-button {
            background: rgba(92, 51, 23, 0.95);
            background-image: 
                linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
                url('../static/images/backgrounds/menu_character_bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 2px solid rgba(139, 90, 43, 0.8);
            color: #d4af37;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
        }
        
        /* Social Tab - Stone Theme */
        .socials-bg .action-button {
            background: rgba(85, 85, 85, 0.95);
            background-image: 
                linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
                url('../static/images/backgrounds/menu_social_bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 2px solid rgba(105, 105, 105, 0.8);
            color: #e0e0e0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
        }
        
        /* Settings Tab - Metal Theme (keep existing) */
        .settings-bg .action-button {
            background: rgba(26, 26, 26, 0.95);
            background-image: 
                linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                url('../static/images/backgrounds/header_footer_bg.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border: 2px solid rgba(212, 175, 55, 0.6);
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
        }
        
        .action-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s ease;
        }
        
        .action-button:hover::before {
            left: 100%;
        }
        
        /* Adventure Tab Hover - Parchment glow */
        .adventure-bg .action-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(139, 120, 93, 0.6);
            border-color: rgba(160, 130, 98, 1);
            background-image: 
                linear-gradient(rgba(255, 248, 220, 0.3), rgba(255, 248, 220, 0.3)),
                url('../static/images/backgrounds/menu_adventure_bg.jpg');
        }
        
        /* Character Tab Hover - Leather warmth */
        .character-bg .action-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(139, 90, 43, 0.6);
            border-color: rgba(160, 100, 50, 1);
            background-image: 
                linear-gradient(rgba(139, 90, 43, 0.2), rgba(139, 90, 43, 0.2)),
                url('../static/images/backgrounds/menu_character_bg.jpg');
        }
        
        /* Social Tab Hover - Stone luminescence */
        .socials-bg .action-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(105, 105, 105, 0.6);
            border-color: rgba(150, 150, 150, 1);
            background-image: 
                linear-gradient(rgba(200, 200, 200, 0.2), rgba(200, 200, 200, 0.2)),
                url('../static/images/backgrounds/menu_social_bg.jpg');
        }
        
        /* Settings Tab Hover - Metal shine */
        .settings-bg .action-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.6);
            border-color: #ffd700;
            background-image: 
                linear-gradient(rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.2)),
                url('../static/images/backgrounds/header_footer_bg.jpg');
        }
        
        .action-button:active {
            transform: translateY(-1px) scale(0.98);
        }
        
        .action-button .button-icon {
            font-size: 2.0rem;
            display: block;
            margin-bottom: 4px;
        }
        
        .action-button .button-icon img, .action-button img.button-icon {
            width: 72px;
            height: 72px;
            display: block;
            margin: 0 auto 8px auto;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) brightness(1.1);
        }
        
        .resource-icon, .stat-item img.resource-icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 4px;
            object-fit: contain;
            filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.4));
        }
        
        .action-button .button-label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            line-height: 0.9;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            padding: 0 2px;
            font-weight: 700;
        }
        
        /* Character status display */
        .character-status {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 10px;
            margin: 15px 0;
        }
        
        .status-card {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 8px;
            padding: 12px;
            text-align: center;
        }
        
        .status-icon {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .status-label {
            font-size: 0.7rem;
            color: #ccc;
            margin-bottom: 3px;
        }
        
        .status-value {
            font-size: 1rem;
            color: #d4af37;
            font-weight: bold;
        }
        
        /* Quest display */
        .quest-display {
            background: rgba(139, 69, 19, 0.2);
            border: 2px solid rgba(139, 69, 19, 0.5);
            border-radius: 10px;
            padding: 15px;
            margin: 15px 0;
        }
        
        .quest-title {
            font-size: 1.1rem;
            color: #ffd700;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .quest-description {
            font-size: 0.9rem;
            color: #e0e0e0;
            line-height: 1.4;
            margin-bottom: 10px;
        }

        /* Profile display styles */
        .profile-info {
            margin-bottom: 15px;
        }

        .profile-section {
            margin-bottom: 15px;
        }

        .profile-section h4 {
            color: #d4af37;
            border-bottom: 1px solid #d4af37;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .stats-grid p {
            margin: 4px 0;
        }
        
        .quest-progress {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            padding: 8px;
            margin-top: 10px;
        }
        
        .progress-bar {
            background: rgba(212, 175, 55, 0.3);
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 5px;
        }
        
        .progress-fill {
            background: linear-gradient(90deg, #d4af37, #ffd700);
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            font-size: 0.8rem;
            color: #ccc;
            text-align: center;
        }
        
        /* Enhanced navigation */
        .bottom-navigation {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            max-width: 440px;
            background: rgba(26, 26, 26, 0.95);
            background-image: 
                linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                url('../static/images/backgrounds/header_footer_bg.jpg');
            background-size: cover;
            background-position: center bottom;
            background-repeat: no-repeat;
            border-top: 2px solid rgba(212, 175, 55, 0.3);
            padding: 5px 15px 10px 15px;
            backdrop-filter: blur(10px);
            z-index: 1000;
                }
        
        .bottom-navigation::before {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(to top, rgba(212, 175, 55, 0.2) 0%, transparent 100%);
            pointer-events: none;
            z-index: -1;
        }
        
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            max-width: 500px;
            margin: 0 auto;
        }
        
        .nav-button {
            background: transparent;
            border: none;
            border-radius: 12px;
            padding: 5px 0px;
            color: #d4af37;
            font-family: 'Cinzel', serif;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .nav-button:hover {
            transform: translateY(-2px);
        }
        
        .nav-button.active {
            /* Keep only the visual effects - no background or border changes */
            color: #ffd700;
        }
        
        /* Floating label styles */
        .nav-label {
            display: none;
            text-align: center;
            position: relative;
            background: rgba(0, 0, 0, 0.9);
            color: #ffd700;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            white-space: nowrap;
            border: 1px solid rgba(212, 175, 55, 0.5);
            box-shadow: 0 -2px 8px rgba(212, 175, 55, 0.3);
            z-index: 1001;
        }
        
        .nav-button.active .nav-label {
            display: block;
            animation: floatIn 0.3s ease-out;
        }
        
        .nav-label::after {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            border: 5px solid transparent;
            border-bottom-color: rgba(0, 0, 0, 0.9);
        }
        
        @keyframes floatIn {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        
        .nav-icon {
            font-size: 1.2rem;
            display: block;
            margin-bottom: 3px;
        }
        
        .nav-icon img, img.nav-icon {
            width: 20vw;
            height: auto;
            max-width: 60px;
            max-height: 60px;
            min-width: 40px;
            display: block;
            margin: 0 auto 8px auto;
            filter: brightness(0.6) saturate(0.7);
            transition: all 0.3s ease;
            object-fit: contain;
        }
        
        .nav-button.active .nav-icon img, .nav-button.active img.nav-icon {
            filter: brightness(1.3) saturate(1.2) drop-shadow(0 0 8px rgba(212, 175, 55, 0.8));
            transform: scale(1.1);
        }
        
        /* Message display area */
        .message-area {
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid rgba(212, 175, 55, 0.4);
            border-radius: 12px;
            padding: 15px;
            margin: 15px 0;
            max-height: 300px;
            overflow-y: auto;
            font-family: 'Cinzel', serif;
            line-height: 1.5;
            background-image: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(0, 0, 0, 0.8));
        }
        
        .message-area p {
            margin: 8px 0;
            color: #e0e0e0;
        }
        
        .game-response {
            margin: 12px 0;
            padding: 12px;
            border-radius: 8px;
            border-left: 4px solid #d4af37;
            background: rgba(0, 0, 0, 0.3);
            animation: fadeIn 0.3s ease-in;
        }
        
        .game-response.success {
            border-left-color: #4ade80;
            background: rgba(74, 222, 128, 0.1);
            color: #86efac;
        }
        
        .game-response.error {
            border-left-color: #ef4444;
            background: rgba(239, 68, 68, 0.1);
            color: #fca5a5;
        }
        
        .game-response.loading {
            border-left-color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
            color: #93c5fd;
        }
        
        .game-response.quest {
            border-left-color: #fbbf24;
            background: rgba(251, 191, 36, 0.1);
            color: #fcd34d;
            border: 1px solid rgba(251, 191, 36, 0.3);
        }
        
        .game-response.combat {
            border-left-color: #dc2626;
            background: rgba(220, 38, 38, 0.1);
            color: #fca5a5;
            border: 1px solid rgba(220, 38, 38, 0.3);
        }
        
        .game-response.info {
            border-left-color: #06b6d4;
            background: rgba(6, 182, 212, 0.1);
            color: #67e8f9;
        }
        
        .message-timestamp {
            font-size: 0.7rem;
            color: #9ca3af;
            margin-bottom: 5px;
            font-family: 'Roboto', sans-serif;
        }
        
        .message-content {
            font-size: 0.9rem;
            line-height: 1.4;
        }
        
        .message-content strong {
            color: #ffd700;
        }
        
        .message-content .reward {
            color: #4ade80;
            font-weight: bold;
        }
        
        .message-content .penalty {
            color: #ef4444;
            font-weight: bold;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Quest Board Styling */
        .quest-board-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }
        
        .quest-zone-card {
            background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(0, 0, 0, 0.6));
            border: 2px solid rgba(212, 175, 55, 0.4);
            border-radius: 12px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .quest-zone-card:hover {
            border-color: rgba(212, 175, 55, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
        }
        
        .quest-zone-card.recommended {
            border-color: rgba(74, 222, 128, 0.6);
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.1), rgba(0, 0, 0, 0.6));
        }
        
        .quest-zone-card.challenging {
            border-color: rgba(239, 68, 68, 0.6);
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(0, 0, 0, 0.6));
        }
        
        .quest-zone-card.selected {
            border-color: #00ffff !important;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 0, 0, 0.7)) !important;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5) !important;
            transform: translateY(-3px) !important;
        }
        
        .quest-zone-card.active-quest {
            border-color: rgba(74, 222, 128, 0.8);
            background: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(0, 0, 0, 0.7));
            box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
        }
        
        .quest-zone-card.quest-ready {
            border-color: rgba(255, 215, 0, 1) !important;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(0, 0, 0, 0.7)) !important;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.6) !important;
            animation: questReadyPulse 2s ease-in-out infinite !important;
        }
        
        @keyframes questReadyPulse {
            0%, 100% { 
                box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
                border-color: rgba(255, 215, 0, 1);
            }
            50% { 
                box-shadow: 0 0 35px rgba(255, 215, 0, 0.9);
                border-color: rgba(255, 215, 0, 1);
            }
        }
        
        @keyframes questMessagePulse {
            0% {
                opacity: 0;
                transform: translateY(-10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .quest-zone-card.quest-failed {
            border-color: rgba(239, 68, 68, 1) !important;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(0, 0, 0, 0.7)) !important;
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.4) !important;
        }

        .quest-zone-card.no-quest {
            border-color: rgba(156, 163, 175, 0.5);
            background: linear-gradient(135deg, rgba(156, 163, 175, 0.1), rgba(0, 0, 0, 0.6));
        }

        .quest-zone-card.active-vocation {
            border-color: rgba(0, 255, 0, 0.8) !important;
            background: linear-gradient(135deg, rgba(0, 255, 0, 0.15), rgba(0, 0, 0, 0.7)) !important;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.4) !important;
        }

        .vocation-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 15px;
        }

        /* Vocation button sizing overrides (styling comes from unified button system) */
        .vocation-btn-select,
        .vocation-btn-upgrade {
            font-size: 0.9rem;
            padding: 8px 12px;
        }

        .vocation-active-badge {
            text-align: center;
            margin-top: 10px;
            padding: 5px;
            background: rgba(0, 255, 0, 0.8);
            color: black;
            border-radius: 4px;
            font-weight: bold;
        }

        .vocation-modifier-list {
            margin: 10px 0;
            padding: 0;
        }


        .vocation-modifier-value {
            background: rgba(0, 0, 0, 0.7);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .vocation-description {
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 6px;
            margin: 10px 0;
            color: var(--text-gold) !important;
        }

        .vocation-upgrade-cost {
            margin: 10px 0;
            color: var(--text-gold);
        }

        /* Vocation background images */
        .quest-zone-card.vocation-adventurer {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_adventurer.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .quest-zone-card.vocation-arcanist {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_arcanist.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .quest-zone-card.vocation-hunter {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_hunter.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .quest-zone-card.vocation-clown {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_clown.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .quest-zone-card.vocation-inquisitor {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_inquisitor.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .quest-zone-card.vocation-merchant {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_merchant.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .quest-zone-card.vocation-artisan {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_artisan.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .quest-zone-card.vocation-rogue {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('../images/backgrounds/vocations_rogue.jpg') !important;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }

        .vocation-modifier-item {
            list-style: none;
            margin: 5px 0;
            color: var(--text-gold);
        }

        .vocation-modifier-sub {
            list-style: none;
            margin: 5px 0;
            margin-left: 15px;
            color: var(--text-gold);
        }
        
        .quest-progress-container {
            margin-top: 15px;
        }
        
        .quest-progress-bar {
            position: relative;
            height: 20px;
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(212, 175, 55, 0.4);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .quest-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4ade80, #22c55e);
            border-radius: 9px;
            transition: width 1s ease;
            animation: progressPulse 2s ease-in-out infinite;
        }
        
        .quest-countdown {
            display: block;
            color: #d4af37;
            font-size: 1.2rem;
            font-weight: bold;
            font-family: 'Cinzel', serif;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            padding: 15px;
            margin: 15px 0;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }
        
        @keyframes progressPulse {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 1; }
        }
        
        .zone-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .zone-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: #ffd700;
            margin-bottom: 5px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                         0 0 6px rgba(0, 0, 0, 0.6);
        }
        
        .zone-level {
            background: rgba(0, 0, 0, 0.8);
            color: #d4af37;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .quest-countdown {
            color: #d4af37;
            font-size: 1.1rem;
            font-weight: bold;
            font-family: 'Cinzel', serif;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
            text-align: center;
            padding: 12px;
            margin: 15px 0;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 8px;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        .zone-description {
            color: #cccccc;
            font-size: 0.9rem;
            line-height: 1.4;
            margin-bottom: 15px;
        }
        
        .zone-progress {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            margin-bottom: 15px;
        }
        
        .progress-item {
            display: flex;
            align-items: center;
            color: #999;
        }
        
        .progress-item .value {
            color: #4ade80;
            font-weight: bold;
            margin-left: 5px;
        }
        
        .zone-difficulty {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: bold;
        }
        
        .difficulty-easy {
            background: rgba(74, 222, 128, 0.8);
            color: #000;
        }
        
        .difficulty-normal {
            background: rgba(251, 191, 36, 0.8);
            color: #000;
        }
        
        .difficulty-hard {
            background: rgba(239, 68, 68, 0.8);
            color: #fff;
        }
        
        .quest-board-actions {
            text-align: center;
            margin-top: 20px;
        }
        
        /* Bestiary Library Shelf Styling */
        .library-shelves {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-container.library-shelves {
            padding: 20px 0px !important;
        }

        .shelf {
            margin-bottom: 20px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 0 0 10px;
            position: relative;
            overflow: visible;
        }

        .book {
            width: 33%;
            aspect-ratio: 1;
            margin: 0 2px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            transform-style: preserve-3d;
            border-radius: 5px;
            background: url('../images/backgrounds/book_bg.png');
            background-size: cover;
            background-position: center;
        }
        
        .book:hover {
            transform: translateY(-10px) rotateZ(-5deg);
        }
        
        .book-spine {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 8px;
            border-radius: 5px;
            position: relative;
            text-align: center;
        }
        
        
        .volume-number {
            font-size: 1.2rem;
            color: #d4af37;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
            margin-bottom: 8px;
            padding: 0 15px 0 20px;
            /* No tilting - keep flat */
            transform: none;
            display: inline-block;
            word-break: normal;
            hyphens: auto;
        }

        .volume-title {
            width: 80%;
            font-size: 0.7rem;
            color: #cd7f32;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
            line-height: 1.2;
            /* No tilting - keep flat */
            transform: none;
            display: inline-block;
            word-break: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }

        /* Override tilting for pages - they should be flat */
        .page .volume-number {
            transform: none;
            padding: 0 10px;
            overflow-wrap: anywhere;
            word-break: normal;
            hyphens: none;
            white-space: normal;
        }

        .book-view {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
        }
        
        .book-content {
            flex: 1;
            margin-bottom: 20px;
        }
        
        .beast-page {
            width: 120px;
            height: 160px;
            margin: 0 3px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            border-radius: 15px;
            flex-shrink: 0;
            background: url('../static/images/backgrounds/menu_adventure_bg.jpg');
            background-size: cover;
            background-position: center;
            border: 3px solid #8b4513;
            box-shadow: 5px 5px 20px rgba(0,0,0,0.8);
        }
        
        .beast-page:hover {
            transform: translateY(-10px) rotateZ(-3deg);
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }
        
        .beast-page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 248, 220, 0.1);
            border-radius: 12px;
            pointer-events: none;
        }
        
        .beast-page-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 8px;
            position: relative;
            z-index: 1;
            text-align: center;
        }
        
        .beast-name {
            font-size: 0.8rem;
            color: #5c3317;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            line-height: 1.1;
            margin-bottom: 5px;
        }
        
        .beast-type {
            font-size: 0.6rem;
            color: #3e2810;
            font-style: italic;
            line-height: 1.1;
        }
        
        .parchment-pages {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .parchment-page {
            background: url('../images/backgrounds/menu_adventure_bg.jpg');
            background-size: cover;
            background-position: center;
            padding: 30px;
            position: relative;
            min-height: 300px;
        }
        
        .beast-detail-page {
            background: url('../images/backgrounds/menu_adventure_bg.jpg');
            background-size: cover;
            background-position: center;
            padding: 30px;
            position: relative;
            min-height: 300px;
        }
        
        .creature-entry {
            position: relative;
            z-index: 1;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(139, 69, 19, 0.3);
        }
        
        .creature-entry:last-child {
            border-bottom: none;
        }
        
        .creature-name {
            font-size: 1.3rem;
            font-weight: bold;
            color: #5c3317;
            margin-bottom: 10px;
            text-align: center;
            text-decoration: underline;
            text-decoration-color: rgba(92, 51, 23, 0.3);
        }
        
        .creature-description {
            font-size: 1rem;
            color: #3e2810;
            line-height: 1.6;
            text-align: justify;
            font-family: 'Georgia', serif;
        }
        
        /* Enemy Dossier Styles */
        .enemy-dossier {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(139, 69, 19, 0.3);
        }

        .dossier-header {
            font-size: 2rem;
            color: #5c3317;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
            font-family: 'Georgia', serif;
            text-decoration: underline;
            text-decoration-color: rgba(92, 51, 23, 0.3);
        }

        .location-info {
            margin-bottom: 20px;
        }

        .location-info h4 {
            color: #8b4513;
            margin: 0 0 10px 0;
            font-size: 1.3rem;
            font-weight: bold;
            text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
        }

        .location-info p {
            color: #3e2810;
            margin: 0;
            font-size: 1.1rem;
            line-height: 1.5;
            font-family: 'Georgia', serif;
        }

        .description-info {
            margin-top: 20px;
        }

        .description-info h4 {
            color: #8b4513;
            margin: 0 0 10px 0;
            font-size: 1.3rem;
            font-weight: bold;
            text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
        }

        .description-info p {
            color: #3e2810;
            margin: 0;
            font-size: 1.1rem;
            line-height: 1.6;
            text-align: justify;
            font-family: 'Georgia', serif;
        }
        
        .enemy-description {
            margin-top: 20px;
        }
        
        .enemy-description h4 {
            color: #8b4513;
            margin: 0 0 10px 0;
            font-size: 1.3rem;
            font-weight: bold;
            text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
        }
        
        .enemy-description p {
            color: #3e2810;
            margin: 0;
            font-size: 1.1rem;
            line-height: 1.6;
            text-align: justify;
            font-family: 'Georgia', serif;
        }
        
        .empty-page {
            text-align: center;
            padding: 60px 30px;
            background: linear-gradient(135deg, #404040, #2a2a2a, #1a1a1a);
            border-radius: 15px;
            border: 3px solid #555;
            box-shadow: 5px 5px 20px rgba(0,0,0,0.9);
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 300px;
            opacity: 0.7;
        }
        
        .empty-title {
            font-size: 1.5rem;
            color: #888;
            margin-bottom: 15px;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
        }
        
        .empty-text {
            font-size: 1.1rem;
            color: #666;
            font-style: italic;
            line-height: 1.5;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
        }
        
        
        .loading-text {
            text-align: center;
            padding: 100px;
            color: #e6d7c3;
            font-size: 1.3rem;
        }
        
        .error-text {
            text-align: center;
            padding: 100px;
            color: #ef4444;
            font-size: 1.3rem;
        }
        
        /* Zone Info Layout */
        .zone-rows {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .zone-row {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            height: 120px;
        }
        
        .zone-card {
            width: 300px;
            height: 120px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            border-radius: 10px;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
            border: 3px solid #8b4513;
            box-shadow: 5px 5px 20px rgba(0,0,0,0.8);
            overflow: hidden;
        }
        
        .zone-card:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 15px 30px rgba(0,0,0,0.7);
        }
        
        .zone-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
            pointer-events: none;
        }

        /* Equipment Page Styles */
        .equipment-item-type {
            color: #a0a0a0;
            font-size: 0.85rem;
            font-weight: normal;
        }

        /* Witcher-Themed Button System - Two Types Only */

        /* Primary Button: For positive/neutral actions (Vocations, Enhancement, Pets, etc.) */
        .vocation-btn-select,
        .vocation-btn-upgrade,
        .enhancement-button,
        .pet-action-btn {
            background: linear-gradient(135deg, #4a3728, #6b4e3d);
            border: 2px solid #d4af37;
            color: #f0e6d2;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.85em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Cinzel', serif;
            min-width: 60px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        }

        .vocation-btn-select:hover,
        .vocation-btn-upgrade:hover,
        .enhancement-button:hover,
        .pet-action-btn:hover {
            background: linear-gradient(135deg, #6b4e3d, #8b6f47);
            border-color: #f0e6d2;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.6);
        }

        .vocation-btn-select:active,
        .vocation-btn-upgrade:active,
        .enhancement-button:active,
        .pet-action-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        }

        /* Vocation Slot Selection System (Level 20+) */
        .vocation-slots-header {
            background: linear-gradient(135deg, #2a1f14 0%, #3d2a1a 100%);
            border: 2px solid #d4af37;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            text-align: center;
        }

        .vocation-slot-info {
            color: #f0e6d2;
            font-family: 'Cinzel', serif;
            margin-bottom: 10px;
        }

        .vocation-slot-display {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 12px;
            color: #d4af37;
            font-family: 'Cinzel', serif;
        }

        .slot-label {
            color: #f0e6d2;
            margin-right: 5px;
        }

        .vocation-slot-btn {
            background: linear-gradient(135deg, #3a2a1a, #4a3a2a);
            border: 2px solid #8b7355;
            color: #f0e6d2;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 0.75em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Cinzel', serif;
            min-width: 50px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }

        .vocation-slot-btn:hover {
            background: linear-gradient(135deg, #4a3a2a, #5a4a3a);
            border-color: #d4af37;
        }

        .vocation-slot-btn.slot-selected {
            background: linear-gradient(135deg, #4a6a2a, #5a8a3a);
            border-color: #7fff00;
            color: #ffffff;
            box-shadow: 0 0 10px rgba(127, 255, 0, 0.4);
        }

        .vocation-confirm-btn {
            background: linear-gradient(135deg, #2a5a2a, #3a7a3a);
            border: 2px solid #7fff00;
            color: #ffffff;
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 0.9em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Cinzel', serif;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            box-shadow: 0 2px 8px rgba(127, 255, 0, 0.3);
        }

        .vocation-confirm-btn:hover {
            background: linear-gradient(135deg, #3a7a3a, #4a9a4a);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(127, 255, 0, 0.5);
        }

        /* Equipment Filter Buttons */
        .equipment-filter-btn {
            background: linear-gradient(135deg, #4a3728, #6b4e3d);
            border: 2px solid #d4af37;
            color: #f0e6d2;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.8em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Cinzel', serif;
            min-width: 50px;
            margin: 3px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        }

        .equipment-filter-btn:hover {
            background: linear-gradient(135deg, #6b4e3d, #8b6f47);
            border-color: #f0e6d2;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.6);
        }

        .equipment-filter-btn.active {
            background: linear-gradient(135deg, #8b6f47, #a89158);
            border-color: #f0e6d2;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.8), inset 0 0 10px rgba(212, 175, 55, 0.4);
            transform: scale(1.05);
        }

        .equipment-filter-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        }

        /* Danger Button: For destructive actions (Sell, Sacrifice, Delete, etc.) */
        .pet-action-btn.danger {
            background: linear-gradient(135deg, #5c1a1a, #7d2424);
            border: 2px solid #a83232;
            color: #f0e6d2;
            box-shadow: 0 2px 8px rgba(168, 50, 50, 0.3);
        }

        .pet-action-btn.danger:hover {
            background: linear-gradient(135deg, #7d2424, #9d3030);
            border-color: #d44444;
            box-shadow: 0 4px 15px rgba(168, 50, 50, 0.6);
        }

        .pet-action-btn.danger:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(168, 50, 50, 0.3);
        }

        /* Disabled State: For buttons that can't be used (insufficient level, wrong location, etc.) */
        .enhancement-button:disabled {
            background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
            color: #666;
            cursor: not-allowed;
            border-color: #444;
            transform: none;
            opacity: 0.5;
            box-shadow: none;
            text-shadow: none;
        }

        .enhancement-button:disabled:hover {
            background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
            transform: none;
            box-shadow: none;
            border-color: #444;
        }

        /* Item Details Modal Styles */
        .item-details-modal {
            font-family: 'Cinzel', serif;
            color: #e6d7c3;
            max-width: 600px;
        }

        .item-header {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #654321;
        }

        .item-details-image {
            width: 80px;
            height: 80px;
            margin-right: 20px;
            border-radius: 8px;
            background: url('../images/backgrounds/parchment_bg.jpg') center/cover;
            padding: 8px;
            box-sizing: border-box;
            object-fit: contain;
        }

        .item-title h2 {
            margin: 0 0 5px 0;
            color: #d4af37;
            font-size: 1.8rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .item-title .item-type {
            color: #a0a0a0;
            font-size: 1rem;
            font-style: italic;
        }

        .item-sections {
            margin-bottom: 25px;
        }

        .item-section {
            margin-bottom: 20px;
            background: linear-gradient(135deg, rgba(44, 24, 16, 0.3), rgba(61, 36, 21, 0.3));
            border: 1px solid #654321;
            border-radius: 8px;
            padding: 15px;
        }

        .item-section h3 {
            margin: 0 0 10px 0;
            color: #d4af37;
            font-size: 1.2rem;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .item-section-content {
            line-height: 1.6;
            color: #e6d7c3;
        }

        .raw-data-section {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid #555;
            border-radius: 8px;
            padding: 15px;
        }

        .raw-data-section h3 {
            margin: 0 0 10px 0;
            color: #888;
            font-size: 1rem;
        }

        .raw-data-content {
            font-family: monospace;
            font-size: 0.9rem;
            color: #ccc;
            white-space: pre-wrap;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #333;
        }

        .debug-section {
            margin-top: 20px;
            padding: 10px;
            background: #333;
            color: #fff;
            font-family: monospace;
            font-size: 12px;
            white-space: pre-wrap;
            border-radius: 5px;
        }
        
        .zone-content {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 15px;
        }
        
        .zone-number {
            font-size: 1.8rem;
            color: #ffd700;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
            margin-bottom: 5px;
        }
        
        .zone-name {
            font-size: 1.1rem;
            color: #fff;
            font-weight: 600;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
            line-height: 1.2;
        }
        
        .zone-level {
            font-size: 0.9rem;
            color: #d4af37;
            font-weight: 500;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
            margin-top: 5px;
        }
        
        /* Zone Details View */
        .zone-details-view {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .zone-details-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        .zone-landscape-placeholder {
            width: 100%;
            height: 150px;
            background: linear-gradient(135deg, #2c1810, #4a2818);
            border: 2px solid #d4af37;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            position: relative;
        }
        
        .landscape-text {
            color: #d4af37;
            font-size: 1.2rem;
            font-weight: 600;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .zone-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .zone-stat-card {
            background: rgba(0,0,0,0.4);
            border: 1px solid #d4af37;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }
        
        .zone-stat-card .stat-label {
            color: #d4af37;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 8px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .zone-stat-card .stat-value {
            color: #fff;
            font-size: 1.3rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .zone-description-box {
            background: rgba(0,0,0,0.3);
            border: 1px solid #d4af37;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .zone-description {
            color: #e0e0e0;
            line-height: 1.6;
            font-size: 0.95rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        }
        
        .zone-other-stats {
            background: rgba(0,0,0,0.6);
            border: 1px solid #d4af37;
            border-radius: 8px;
            padding: 20px;
        }
        
        .zone-other-stats h4 {
            color: #d4af37;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .other-stats-content {
            color: #e0e0e0;
            line-height: 1.6;
        }
        
        .zone-details-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            color: #d4af37;
            font-size: 1.1rem;
        }
        
        .zone-details-loading::after {
            content: 'Loading zone details...';
        }
        
        /* Zone listing styles using quest-zone-card template */
        .zone-listing {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .zone-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            margin: 15px 0;
        }
        
        .zone-number-badge {
            background: rgba(44, 24, 16, 0.9);
            color: #ffd700;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
            border: 1px solid rgba(212, 175, 55, 0.6);
            width: 100px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Expandable zone styles */
        .expandable-zone {
            transition: all 0.3s ease;
        }
        
        .expandable-zone.expanded {
            border-color: rgba(212, 175, 55, 0.8);
            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.3);
        }
        
        
        .zone-loading, .zone-error {
            text-align: center;
            padding: 20px;
            color: #d4af37;
            font-style: italic;
        }
        
        .zone-error {
            color: #ff6b6b;
        }
        
        .expanded-zone-content {
            animation: expandIn 0.3s ease-out;
        }
        
        @keyframes expandIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .zone-stats-row {
            display: flex;
            gap: 20px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        
        .zone-stat-container {
            flex: 1;
            min-width: 120px;
        }
        
        .zone-stat-container .stat-label {
            color: #d4af37;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 4px;
            display: block;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .zone-stat {
            background: rgba(0,0,0,0.8);
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid rgba(212, 175, 55, 0.2);
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8),
                         0 0 6px rgba(0, 0, 0, 0.6);
        }
        
        .zone-stat .stat-value {
            color: #fff;
            font-size: 0.9rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .zone-full-description {
            background: rgba(0,0,0,0.8);
            padding: 12px;
            border-radius: 6px;
            border: 1px solid rgba(212, 175, 55, 0.2);
            color: #e0e0e0;
            line-height: 1.5;
            font-size: 0.9rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .zone-additional-stats {
            background: rgba(0,0,0,0.2);
            padding: 12px;
            border-radius: 6px;
            border: 1px solid rgba(212, 175, 55, 0.2);
        }
        
        .zone-additional-stats h4 {
            color: #d4af37;
            font-size: 1rem;
            margin-bottom: 8px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }
        
        .additional-stats-content {
            color: #e0e0e0;
            font-size: 0.9rem;
            line-height: 1.4;
        }
        
        /* Loading states */
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .loading-spinner {
            width: 30px;
            height: 30px;
            border: 3px solid rgba(212, 175, 55, 0.3);
            border-top: 3px solid #d4af37;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Enhanced particles */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            background: radial-gradient(circle, #ffd700, #d4af37);
            border-radius: 50%;
            width: 3px;
            height: 3px;
            opacity: 0.6;
            animation: sparkleGame 6s infinite linear;
        }
        
        @keyframes sparkleGame {
            0% {
                transform: translateY(100vh) rotate(0deg) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
                transform: scale(1);
            }
            90% {
                opacity: 0.6;
                transform: scale(1);
            }
            100% {
                transform: translateY(-50px) rotate(360deg) scale(0);
                opacity: 0;
            }
        }

        /* Pet System Styles */
        .pets-page-container {
            padding: 15px;
        }

        .pet-info-box {
            background: rgba(212, 175, 55, 0.1);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
            font-family: 'Cinzel', serif;
            font-size: 0.85rem;
            color: rgba(212, 175, 55, 0.9);
            line-height: 1.4;
            text-align: center;
        }

        .catch-section {
            margin-bottom: 20px;
        }

        .catch-pet-button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #d4af37, #ffd700);
            border: none;
            border-radius: 8px;
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            font-weight: 600;
            color: #000;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .catch-pet-button:disabled {
            background: linear-gradient(135deg, #666, #888);
            cursor: not-allowed;
            opacity: 0.6;
        }

        .catch-pet-button:not(:disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
        }

        .pets-list,
        .equipment-list,
        .items-grid {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .pet-card,
        .equipment-item {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 8px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 15px;
        }

        /* Rarity-based borders and shine for pet/equipment cards */
        .pet-card:has(.pet-rarity-badge.rarity-common),
        .equipment-item:has(.equipment-rarity-badge.rarity-common) {
            border: 2px solid rgba(169, 169, 169, 0.8);
            box-shadow: 0 0 8px rgba(169, 169, 169, 0.4);
        }

        .pet-card:has(.pet-rarity-badge.rarity-odd),
        .equipment-item:has(.equipment-rarity-badge.rarity-odd) {
            border: 2px solid rgba(50, 205, 50, 0.9);
            box-shadow: 0 0 12px rgba(50, 205, 50, 0.5);
        }

        .pet-card:has(.pet-rarity-badge.rarity-strange),
        .equipment-item:has(.equipment-rarity-badge.rarity-strange) {
            border: 2px solid rgba(30, 144, 255, 0.9);
            box-shadow: 0 0 15px rgba(30, 144, 255, 0.6);
        }

        .pet-card:has(.pet-rarity-badge.rarity-eldritch),
        .equipment-item:has(.equipment-rarity-badge.rarity-eldritch) {
            border: 2px solid rgba(255, 140, 0, 1.0);
            box-shadow: 0 0 18px rgba(255, 140, 0, 0.6), 0 0 18px rgba(186, 85, 211, 0.4);
        }

        .pet-name,
        .equipment-item-name,
        .item-info {
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: #d4af37;
            text-align: center;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.3);
        }

        .pet-content,
        .equipment-content {
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        .pet-image,
        .equipment-item-image,
        .item-image {
            flex-shrink: 0;
            width: 140px;
            height: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            border: 1px solid rgba(212, 175, 55, 0.4);
            background: url('../images/backgrounds/parchment_bg.jpg') center/cover;
            padding: 6px;
            box-sizing: border-box;
            position: relative;
        }

        .pet-image img,
        .equipment-item-image img,
        .item-image img {
            width: 128px;
            height: 128px;
            object-fit: contain;
            mix-blend-mode: multiply;
        }

        /* Pet level badge */
        .pet-level-badge {
            position: absolute;
            bottom: 3px;
            left: 3px;
            background: linear-gradient(135deg, #d4af37, #f0e6d2);
            color: #2c1810;
            font-family: 'Cinzel', serif;
            font-size: 0.85rem;
            font-weight: bold;
            padding: 2px 5px;
            border-radius: 12px;
            border: 2px solid #2c1810;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
            text-shadow: none;
        }

        /* Pet rarity badge - using images */
        .pet-rarity-badge {
            position: absolute;
            bottom: 3px;
            right: 3px;
            width: 32px;
            height: 32px;
            cursor: help;
        }

        .pet-rarity-badge img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            mix-blend-mode: normal;
            pointer-events: none;
        }

        /* Equipment rarity badge - using images */
        .equipment-rarity-badge {
            position: absolute;
            bottom: 3px;
            right: 3px;
            width: 32px;
            height: 32px;
            cursor: help;
        }

        .equipment-rarity-badge img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            mix-blend-mode: normal;
            pointer-events: none;
        }

        /* Custom tooltip system - for rarity badges only */
        .pet-rarity-badge[data-tooltip]::after,
        .equipment-rarity-badge[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            right: 0;
            transform: translateY(-5px);
            background: rgba(0, 0, 0, 0.9);
            color: #d4af37;
            padding: 6px 10px;
            border-radius: 6px;
            font-family: 'Cinzel', serif;
            font-size: 0.75rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            z-index: 10002;
        }

        .pet-rarity-badge[data-tooltip]:hover::after,
        .equipment-rarity-badge[data-tooltip]:hover::after {
            opacity: 1;
            transform: translateY(-8px);
        }

        /* Stat item tooltips handled by JavaScript with position:fixed */

        /* Pet actions - buttons aligned to image container height (140px) */
        .pet-actions,
        .equipment-actions,
        .equipment-actions-left,
        .equipment-actions-right,
        .item-actions {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 140px;
            gap: 8px;
        }

        /* Pet/Equipment buttons - card layout styling */
        .pet-action-btn,
        .equipment-action-btn {
            background: linear-gradient(135deg, #4a3728, #6b4e3d);
            border: 2px solid #d4af37;
            color: #f0e6d2;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Cinzel', serif;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
            width: 100%;
            font-size: 0.8rem;
            padding: 0;
            text-align: center;
            flex: 1 1 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pet-action-btn:hover,
        .equipment-action-btn:hover {
            background: linear-gradient(135deg, #6b4e3d, #8b6f47);
            border-color: #f0e6d2;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.6);
        }

        .pet-action-btn:active,
        .equipment-action-btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        }

        .pet-action-btn.danger,
        .equipment-action-btn.btn-sell {
            background: linear-gradient(135deg, #5c1a1a, #7d2424);
            border: 2px solid #a83232;
            box-shadow: 0 2px 8px rgba(168, 50, 50, 0.3);
        }

        .pet-action-btn.danger:hover,
        .equipment-action-btn.btn-sell:hover {
            background: linear-gradient(135deg, #7d2424, #9d3030);
            border-color: #d44444;
            box-shadow: 0 4px 15px rgba(168, 50, 50, 0.6);
        }

        .pet-action-btn.danger:active,
        .equipment-action-btn.btn-sell:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(168, 50, 50, 0.3);
        }

        .no-pets-message {
            text-align: center;
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            color: rgba(212, 175, 55, 0.8);
            padding: 30px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 8px;
        }
        
        
        /* Hide elements initially */
        .hidden {
            display: none !important;
        }

        /* Beautiful Modal Styles - Occult Theme */
        .beautiful-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            padding-top: 80px; /* Account for sticky header */
            box-sizing: border-box;
        }

        .beautiful-modal-content {
            position: relative;
            background: radial-gradient(circle at top, #322014 0, #19100a 45%, #120c07 100%);
            max-width: 450px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            overflow-x: hidden;
            animation: modalSlideIn 0.3s ease-out;
            padding: 3px;
            clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0% calc(100% - 15px), 0% 15px);
        }

        .beautiful-modal-content::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
            clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0% calc(100% - 15px), 0% 15px);
            z-index: -2;
        }

        .beautiful-modal-content::after {
            content: '';
            position: absolute;
            top: 3px; left: 3px; right: 3px; bottom: 3px;
            background: radial-gradient(circle at top, #322014 0, #19100a 45%, #120c07 100%);
            clip-path: polygon(13px 0%, calc(100% - 13px) 0%, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0% calc(100% - 13px), 0% 13px);
            z-index: -1;
        }

        .beautiful-modal-content.success-modal,
        .beautiful-modal-content.error-modal {
            /* Same occult styling for all modal types */
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-30px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-header {
            background: transparent;
            padding: 20px;
            border-bottom: 1px solid rgba(181, 76, 7, 0.3);
            position: relative;
            z-index: 1;
        }

        .modal-title {
            color: #c9a227;
            margin: 0;
            font-family: 'Cinzel', serif;
            font-size: 1.3rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-shadow: 0 0 10px rgba(181, 76, 7, 0.5);
            text-align: center;
        }

        .modal-body {
            padding: 15px;
            position: relative;
            z-index: 1;
        }

        .modal-message {
            color: #b8a080;
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            line-height: 1.6;
            margin: 0;
            text-align: center;
        }

        .modal-footer {
            padding: 20px;
            display: flex;
            gap: 15px;
            justify-content: center;
            background: transparent;
            border-top: 1px solid rgba(181, 76, 7, 0.2);
            position: relative;
            z-index: 1;
        }

        .modal-btn {
            padding: 12px 25px;
            border: none;
            font-family: 'Cinzel', serif;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 120px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
        }

        .modal-btn-primary {
            background: radial-gradient(circle at top, #695740 0%, #2a1f14 50%, #1a0f04 100%);
            color: #c4a574;
        }

        .modal-btn-primary:hover {
            background: radial-gradient(circle at top, #7a6850 0%, #3a2f24 50%, #2a1f14 100%);
        }

        .modal-btn-danger {
            background: radial-gradient(circle at top, #8b0000 0%, #4a0000 50%, #2a0000 100%);
            color: #ffc4c4;
        }

        .modal-btn-danger:hover {
            background: radial-gradient(circle at top, #a01010 0%, #5a1010 50%, #3a0000 100%);
        }

        .modal-btn-secondary {
            background: radial-gradient(circle at top, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
            color: #aaa;
        }

        .modal-btn-secondary:hover {
            background: radial-gradient(circle at top, #5a5a5a 0%, #3a3a3a 50%, #2a2a2a 100%);
        }

        /* Smithy Section Styling */
        #smithySection {
        }

        /* Section Header - Metal Plate Button (Global) */
        .section-header {
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            display: block;
            width: 100%;
            cursor: pointer;
            border: none;
            outline: none;
        }

        /* Unified gradient overlay for all section headers */
        .section-header::after {
            content: '';
            position: absolute;
            bottom: 14px;
            left: 10px;
            right: 10px;
            height: 45px;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 70%, transparent 100%);
            pointer-events: none;
            border-radius: 0 0 12px 12px;
        }

        /* Smithy specific header background */
        #smithySection .section-header {
            background-image: url('../images/backgrounds/smithy_header.png');
            height: 140px;
            overflow: visible;
            position: relative;
        }

        /* Section title positioning within smithy section header */
        #smithySection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Character menu main page header (footer 2nd icon) */
        #questSection .character-menu-header {
            background-image: url('../images/icons/headers/profile-header.png') !important;
            height: 140px;
            overflow: visible;
            position: relative;
            margin-bottom: 20px;
        }

        /* Section title positioning within character menu header */
        #questSection .character-menu-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Character Profile page header (Profile submenu button) */
        #questSection .character-profile-header {
            background-image: url('../images/icons/headers/character-profile-header.png') !important;
            height: 140px;
            overflow: visible;
            position: relative;
            margin-bottom: 20px;
        }

        /* Section title positioning within character profile header */
        #questSection .character-profile-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Quest header style */
        .quest-header-style {
            background-image: url('../images/icons/headers/quest-header.png');
            height: 140px;
            overflow: visible;
            position: relative;
            margin-bottom: 20px;
        }

        /* Section title positioning within quest header */
        .quest-header-style .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Items Container */
        #smithyContent {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: calc(100vh - 120px);
            padding-top: 20px;
        }

        .craft-items-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            width: 100%;
            max-width: 800px;
            background: transparent;
        }

        .craft-item {
            width: 100%;
            aspect-ratio: 1 / 1;
            cursor: pointer;
            position: relative;
            transition: transform 0.3s ease;
            background-image: url('../images/backgrounds/dwarvensmithy-frame.png');
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border-radius: 0;
        }

        .craft-item:hover {
            /* transform removed to prevent jumping on click */
        }

        @keyframes pulseCommon {
            0%, 100% { filter: drop-shadow(0 0 8px rgba(169, 169, 169, 0.8)); }
            50% { filter: drop-shadow(0 0 16px rgba(169, 169, 169, 1.0)); }
        }

        @keyframes pulseOdd {
            0%, 100% { filter: drop-shadow(0 0 12px rgba(50, 205, 50, 0.9)); }
            50% { filter: drop-shadow(0 0 24px rgba(50, 205, 50, 1.0)); }
        }

        @keyframes pulseStrange {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(30, 144, 255, 0.9)); }
            50% { filter: drop-shadow(0 0 30px rgba(30, 144, 255, 1.0)); }
        }

        @keyframes pulseEldritch {
            0% { filter: drop-shadow(0 0 18px rgba(255, 140, 0, 1.0)); }
            50% { filter: drop-shadow(0 0 36px rgba(186, 85, 211, 1.0)); }
            100% { filter: drop-shadow(0 0 18px rgba(255, 140, 0, 1.0)); }
        }

        .craft-item.rarity-common.selected {
            animation: pulseCommon 1.5s ease-in-out infinite;
            transform: translateY(-3px);
        }

        .craft-item.rarity-odd.selected {
            animation: pulseOdd 1.5s ease-in-out infinite;
            transform: translateY(-3px);
        }

        .craft-item.rarity-strange.selected {
            animation: pulseStrange 1.5s ease-in-out infinite;
            transform: translateY(-3px);
        }

        .craft-item.rarity-eldritch.selected {
            animation: pulseEldritch 1.5s ease-in-out infinite;
            transform: translateY(-3px);
        }

        /* Rarity-based shadows for selected items - preserve metal background */

        
        .craft-item-rarity-badge {
            position: absolute;
            top: 13px;
            right: 13px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            z-index: 20;
            background: rgba(0, 0, 0, 0.6);
            border: 2px solid;
            cursor: help;
        }

        .craft-item-rarity-badge img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .craft-item-rarity-badge.rarity-common {
            background: rgba(169, 169, 169, 0.7);
            border-color: #a9a9a9;
        }

        .craft-item-rarity-badge.rarity-odd {
            background: rgba(50, 205, 50, 0.7);
            border-color: #32cd32;
        }

        .craft-item-rarity-badge.rarity-strange {
            background: rgba(30, 144, 255, 0.7);
            border-color: #1e90ff;
        }

        .craft-item-rarity-badge.rarity-eldritch {
            background: linear-gradient(135deg, rgba(255, 140, 0, 0.7), rgba(186, 85, 211, 0.7));
            border-color: #ff8c00;
        }

        .craft-item-info-badge {
            position: absolute;
            top: 13px;
            left: 13px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .craft-item-info-badge img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .craft-item-info-badge:hover {
            transform: scale(1.1);
        }

        .craft-item-icon {
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            z-index: 1;
        }



        .craft-item-details {
            position: absolute;
            bottom: 5px;
            left: 5px;
            right: 5px;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 70%, transparent 100%);
            padding: 8px 6px 6px 6px;
            z-index: 10;
            text-align: center;
            border-radius: 0;
        }


        .craft-item-name {
            font-size: 0.75rem;
            color: #fff;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
            margin-bottom: 2px;
            line-height: 1.1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .craft-item-type {
            font-size: 0.65rem;
            color: #d4af37;
            font-weight: 500;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
            margin-bottom: 2px;
            line-height: 1.1;
        }

        .craft-item-rarity {
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 12px;
            margin-bottom: 6px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .craft-item-rarity.rarity-common, .market-item-rarity.rarity-common {
            background: rgba(169, 169, 169, 0.3);
            color: #a9a9a9;
            border: 1px solid rgba(169, 169, 169, 0.5);
        }

        .craft-item-rarity.rarity-odd, .market-item-rarity.rarity-odd {
            background: rgba(34, 139, 34, 0.3);
            color: #32cd32;
            border: 1px solid rgba(34, 139, 34, 0.5);
        }

        .craft-item-rarity.rarity-strange, .market-item-rarity.rarity-strange {
            background: rgba(30, 144, 255, 0.3);
            color: #1e90ff;
            border: 1px solid rgba(30, 144, 255, 0.5);
        }

        .craft-item-rarity.rarity-eldritch, .market-item-rarity.rarity-eldritch {
            background: rgba(186, 85, 211, 0.3);
            color: #ff8c00;
            border: 1px solid rgba(255, 140, 0, 0.5);
        }

        .craft-item-price {
            font-size: 0.75rem;
            color: #ffd700;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
            margin-top: 1px;
        }

        /* ===== MARKET STYLES ===== */
        
        /* Market Header */
        #marketSection .section-header {
            background-image: url('../images/backgrounds/market_header.png');
            height: 140px;
            overflow: visible;
            position: relative;
        }

        /* Section title positioning within market section header */
        #marketSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Market Items Container */
        #marketContent {
            padding-top: 20px;
        }

        /* Market items use craft-item class but with market background */
        .craft-item.market-bg {
            background-image: url('../images/backgrounds/elvenmarket-frame.png') !important;
        }

        /* Market selected items preserve market background and add filter effects */
        .craft-item.market-bg.selected.rarity-common, .market-item.selected.rarity-common {
            filter: drop-shadow(0 0 6px rgba(169, 169, 169, 0.6)) !important;
            transform: translateY(-3px);
            background-image: url('../images/backgrounds/elvenmarket-frame.png') !important;
            background-size: 100% 100% !important;
            background-position: center !important;
        }

        .craft-item.market-bg.selected.rarity-odd, .market-item.selected.rarity-odd {
            filter: drop-shadow(0 0 8px rgba(50, 205, 50, 0.6)) !important;
            transform: translateY(-3px);
            background-image: url('../images/backgrounds/elvenmarket-frame.png') !important;
            background-size: 100% 100% !important;
            background-position: center !important;
        }

        .craft-item.market-bg.selected.rarity-strange, .market-item.selected.rarity-strange {
            filter: drop-shadow(0 0 10px rgba(30, 144, 255, 0.7)) !important;
            transform: translateY(-3px);
            background-image: url('../images/backgrounds/elvenmarket-frame.png') !important;
            background-size: 100% 100% !important;
            background-position: center !important;
        }

        .craft-item.market-bg.selected.rarity-eldritch, .market-item.selected.rarity-eldritch {
            filter: drop-shadow(0 0 14px rgba(255, 140, 0, 0.8)) drop-shadow(0 0 14px rgba(186, 85, 211, 0.6)) !important;
            transform: translateY(-3px);
            background-image: url('../images/backgrounds/elvenmarket-frame.png') !important;
            background-size: 100% 100% !important;
            background-position: center !important;
        }

        /* ===== REGIONS STYLES ===== */
        
        /* Regions Header */
        #zoneInfoSection .section-header {
            background-image: url('../images/backgrounds/regions_header.png');
            height: 140px;
            overflow: visible;
        }

        /* Regions title positioning */
        #zoneInfoSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Regions content padding */
        #zoneInfoContent {
            padding-top: 20px;
        }

        /* ===== BESTIARY STYLES ===== */
        
        /* Bestiary Header */
        #bestiarySection .section-header {
            background-image: url('../images/backgrounds/bestiary_header.png');
            height: 140px;
            overflow: visible;
        }
        
        /* ===== HUNT STYLES ===== */
        
        /* Hunt Header */
        #huntSection .section-header {
            background-image: url('../images/backgrounds/hunt_header.png');
            height: 140px;
            overflow: visible;
        }
        
        /* Hunt title positioning */
        #huntSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }
        
        /* Hunt content styling */
        #huntContent {
            padding-top: 20px;
        }
        
        #huntSection {
            background: transparent;
        }

        /* ===== VOCATION CARDS STYLES ===== */
        .vocations-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            width: 100%;
            padding: 10px;
        }

        .vocation-card {
            background: rgba(20, 20, 20, 0.85);
            border: 1px solid #d4af37;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Cinzel', serif;
        }

        .vocation-card:hover {
            border-color: #ffd700;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }

        .vocation-card.active-vocation {
            border-color: #32cd32;
            background: rgba(50, 205, 50, 0.1);
            box-shadow: 0 0 15px rgba(50, 205, 50, 0.4);
        }

        .vocation-level {
            font-size: 1.1rem;
            color: #ffd700;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .vocation-name {
            font-size: 0.9rem;
            color: #d4af37;
            margin-bottom: 8px;
        }

        .vocation-description {
            font-size: 0.8rem;
            color: #e0e0e0;
            line-height: 1.3;
            margin-bottom: 8px;
        }

        .vocation-cost {
            font-size: 0.85rem;
            color: #ffd700;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .vocation-modifiers {
            font-size: 0.75rem;
            color: #d0d0d0;
            line-height: 1.2;
        }

        .vocation-modifiers div {
            margin-bottom: 2px;
        }

        
        .hunt-header {
            background: linear-gradient(145deg, #8b4513, #654321);
            border: 1px solid #d4af37;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
        }
        
        
        .hunt-status {
            background: #3a2419;
            border: 1px solid #654321;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .hunt-status h3 {
            color: #d4af37;
            margin: 0 0 10px 0;
        }
        
        .hunt-benefits, .hunt-tips {
            background: #2c1810;
            border-left: 3px solid #d4af37;
            padding: 10px;
            margin: 10px 0;
        }
        
        .hunt-benefits h4, .hunt-tips h4 {
            color: #d4af37;
            margin: 0 0 8px 0;
        }
        
        .hunt-benefits ul, .hunt-tips ul, .hunt-info ul, .vocation-bonuses ul {
            color: #f4f1e8;
            margin: 0;
            padding-left: 25px;
            list-style-position: inside;
        }

        .hunt-benefits li, .hunt-tips li, .hunt-info li, .vocation-bonuses li {
            margin: 4px 0;
            padding-left: 5px;
        }
        
        .hunt-note, .hunt-warning {
            color: #f4f1e8;
            font-style: italic;
            text-align: center;
            margin: 10px 0;
        }
        
        .sanity-display {
            background: #2c1810;
            border: 1px solid #654321;
            border-radius: 6px;
            padding: 8px;
        }
        
        .sanity-label {
            color: #d4af37;
            font-weight: bold;
            margin-bottom: 4px;
        }
        
        .sanity-bar-bg {
            background: #1a0f0a;
            border: 1px solid #8b4513;
            border-radius: 4px;
            height: 20px;
            overflow: hidden;
        }
        
        .sanity-bar-fill {
            height: 100%;
            transition: width 0.3s ease;
        }

        .hunt-start-button {
            background: linear-gradient(145deg, #d4af37, #b8941f);
            border: 3px solid #8b4513;
            border-radius: 10px;
            padding: 15px 30px;
            color: #000;
            font-family: 'Cinzel', serif;
            font-weight: bold;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            width: 100%;
            margin-top: 15px;
        }

        .hunt-start-button:hover {
            background: linear-gradient(145deg, #f4d03f, #d4af37);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }

        .hunt-start-button:active {
            transform: translateY(0);
        }

        .hunt-start-button:disabled {
            background: #666;
            border-color: #444;
            cursor: not-allowed;
            opacity: 0.5;
        }

        .hunt-info, .vocation-bonuses {
            background: #2c1810;
            border-left: 3px solid #d4af37;
            padding: 10px;
            margin: 10px 0;
        }

        .hunt-info h4, .vocation-bonuses h4 {
            color: #d4af37;
            margin: 0 0 8px 0;
        }

        /* ===== STANCE STYLES ===== */
        
        /* Stance Header */
        #stanceSection .section-header {
            background-image: url('../images/backgrounds/stance_header.png');
            height: 140px;
            overflow: visible;
        }
        
        /* Stance title positioning */
        #stanceSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }
        
        /* Stance content styling */
        #stanceContent {
            padding: 20px;
            background: transparent;
        }
        
        .stance-interface {
            background: transparent;
        }
        
        .stance-buttons-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 20px;
        }
        
        .stance-button {
            background: linear-gradient(145deg, #d4af37, #b8941f);
            border: 3px solid #8b4513;
            border-radius: 10px;
            padding: 15px;
            color: #000;
            font-family: 'Cinzel', serif;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .stance-button:hover {
            background: linear-gradient(145deg, #f4d03f, #d4af37);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        }
        
        .stance-button h4 {
            margin: 0 0 8px 0;
            font-size: 1.1em;
            color: #2c1810;
        }
        
        .stance-button p {
            margin: 0;
            font-size: 0.9em;
            color: #5d4e37;
            font-weight: normal;
            line-height: 1.3;
        }
        
        /* ===== QTE STYLES ===== */
        
        /* QTE Header */
        #qteSection .section-header {
            background-image: url('../images/backgrounds/qte_header.png');
            height: 140px;
            overflow: visible;
        }
        
        /* QTE title positioning */
        #qteSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }
        
        /* QTE content styling */
        #qteContent {
            padding: 20px;
            background: transparent;
        }
        
        .qte-interface {
            background: transparent;
        }
        
        .qte-buttons-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
            margin-top: 20px;
        }
        
        .qte-button {
            background: linear-gradient(145deg, #d4af37, #b8941f);
            border: 3px solid #8b4513;
            border-radius: 8px;
            padding: 12px;
            color: #000;
            font-family: 'Cinzel', serif;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .qte-button:hover {
            background: linear-gradient(145deg, #f4d03f, #d4af37);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        }
        
        .qte-button h4 {
            margin: 0 0 6px 0;
            font-size: 1em;
            color: #2c1810;
        }
        
        .qte-button p {
            margin: 0;
            font-size: 0.8em;
            color: #5d4e37;
            font-weight: normal;
            line-height: 1.2;
        }
        
        .qte-custom {
            grid-column: span 3;
        }

        /* Bestiary title positioning */
        #bestiarySection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Bestiary content padding */
        #bestiaryContent {
            padding-top: 20px;
        }

        /* ===== ENEMY INFO / FOES STYLES ===== */
        
        /* Enemy Info Header */
        #enemyInfoSection .section-header {
            background-image: url('../images/backgrounds/enemy_header.png');
            height: 140px;
            overflow: visible;
        }

        /* Enemy Info title positioning */
        #enemyInfoSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Enemy Info content padding */
        #enemyInfoContent {
            padding-top: 20px;
        }

        /* ===== CHARACTER MENU HEADERS ===== */

        /* Profile Header */
        #profileSection .section-header {
            background-image: url('../images/icons/headers/profile-header.png');
            height: 140px;
            overflow: visible;
        }

        #profileSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Character Stats Header */
        #statsSection .section-header {
            background-image: url('../images/icons/headers/character-stats-header.png');
            height: 140px;
            overflow: visible;
        }

        #statsSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Equipment Header */
        #equipmentSection .section-header {
            background-image: url('../images/icons/headers/equipment-header.png');
            height: 140px;
            overflow: visible;
        }

        #equipmentSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Pets Header */
        #petsSection .section-header {
            background-image: url('../images/icons/headers/pet-header.png');
            height: 140px;
            overflow: visible;
        }

        #petsSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Character Consumables Header */
        #characterConsumablesSection .section-header {
            background-image: url('../images/icons/headers/consumables-header.png');
            height: 140px;
            overflow: visible;
        }

        #characterConsumablesSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Enhancement Header */
        #enhancementSection .section-header {
            background-image: url('../images/icons/headers/enhancement-header.png');
            height: 140px;
            overflow: visible;
        }

        #enhancementSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Vocations Header */
        #vocationsSection .section-header {
            background-image: url('../images/icons/headers/vocations-header.png');
            height: 140px;
            overflow: visible;
        }

        #vocationsSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* ===== ADVENTURE MENU HEADERS ===== */

        /* Quest Header */
        #questSection .section-header {
            background-image: url('../images/icons/headers/quest-header.png');
            height: 140px;
            overflow: visible;
        }

        #questSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Dark Magic Header */
        #magicSection .section-header {
            background-image: url('../images/icons/headers/magic-header.png');
            height: 140px;
            overflow: visible;
        }

        #magicSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }
        /* ===== ENCYCLOPEDIA HEADERS ===== */

        /* Artifacts Encyclopedia Header */
        #artifactsSection .section-header {
            background-image: url('../images/icons/headers/artifacts-world-header.png');
            height: 140px;
            overflow: visible;
        }

        #artifactsSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Items Encyclopedia Header */
        #itemsSection .section-header {
            background-image: url('../images/icons/headers/items-world-header.png');
            height: 140px;
            overflow: visible;
        }

        #itemsSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }

        /* Perks Encyclopedia Header */
        #perksSection .section-header {
            background-image: url('../images/icons/headers/perks-world-header.png');
            height: 140px;
            overflow: visible;
        }

        #perksSection .section-header .section-title {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            pointer-events: none;
            margin-bottom: 0;
        }
        .craft-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            padding: 0;
            width: 100%;
            max-width: 600px;
        }

        .craft-button {
            background: linear-gradient(145deg, #d4af37, #b8941f);
            color: #000;
            border: 3px solid #8b4513;
            padding: 15px 40px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1.2rem;
            font-weight: bold;
            font-family: 'Cinzel', serif;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }

        .craft-button:hover {
            transform: translateY(-3px);
            background: linear-gradient(145deg, #ffd700, #d4af37);
        }

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


        .craft-item-wrapper {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .craft-item-wrapper .craft-button {
            padding: 10px 20px;
            font-size: 1rem;
            margin: 0;
        }

        .craft-button:disabled {
            background: linear-gradient(145deg, #666, #555);
            color: #999;
            cursor: not-allowed;
            border-color: #444;
            transform: none;
        }

        .craft-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s;
        }

        .craft-button:hover::before {
            left: 100%;
        }

        .selected-item-info {
            text-align: center;
            margin: 15px 0;
            padding: 10px;
            background: rgba(0,0,0,0.5);
            border-radius: 8px;
            border: 2px solid #d4af37;
            width: 100%;
            max-width: 600px;
        }

        .selected-item-info h3 {
            color: #ffd700;
            margin-bottom: 15px;
            font-size: 1.4rem;
            font-family: 'Cinzel', serif;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
        }

        .selected-item-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .stat-group {
            background: rgba(212, 175, 55, 0.1);
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        .stat-group h4 {
            color: #d4af37;
            margin-bottom: 8px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .stat-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            font-size: 0.8rem;
        }

        .stat-label {
            color: #ccc;
        }

        .stat-value {
            color: #fff;
            font-weight: bold;
        }

        .forge-loading {
            text-align: center;
            padding: 60px;
            color: #d4af37;
            font-size: 1.3rem;
            position: relative;
            z-index: 1;
        }


        .forge-error {
            text-align: center;
            padding: 60px;
            color: #ff6b6b;
            font-size: 1.3rem;
            position: relative;
            z-index: 1;
        }

/* Universal Fantasy Frame Overlay */
.fantasy-frame-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    pointer-events: none;
    z-index: 2000;
}

/* Landscape orientation - frame follows viewport */
@media screen and (orientation: landscape) {
    .fantasy-frame-overlay {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
    }
}

/* Corner Elements - Fixed 36x36px */
.frame-corner {
    position: absolute;
    width: 36px;
    height: 36px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 2002;
}

.frame-top-left {
    top: 0;
    left: 0;
    background-image: url('../images/frame/top_left.png');
}

.frame-top-right {
    top: 0;
    right: 0;
    background-image: url('../images/frame/top_right.png');
}

.frame-bottom-left {
    bottom: 0;
    left: 0;
    background-image: url('../images/frame/bottom_left.png');
}

.frame-bottom-right {
    bottom: 0;
    right: 0;
    background-image: url('../images/frame/bottom_right.png');
}

/* Edge Elements - Stretched to fill */
.frame-edge {
    position: absolute;
    z-index: 2001;
}

.frame-top {
    top: 0;
    left: 36px;
    right: 36px;
    height: 6px;
    background-image: url('../images/frame/top.png');
    background-size: 100% 100%;
}

.frame-left {
    left: 0;
    top: 36px;
    bottom: 36px;
    width: 6px;
    background-image: url('../images/frame/left.png');
    background-size: 100% 100%;
}

.frame-right {
    right: 0;
    top: 36px;
    bottom: 36px;
    width: 6px;
    background-image: url('../images/frame/right.png');
    background-size: 100% 100%;
}

.frame-bottom {
    bottom: 0;
    left: 36px;
    right: 36px;
    height: 6px;
    background-image: url('../images/frame/bottom.png');
    background-size: 100% 100%;
}

/* Single frame image - stretched to fill */
.frame-image {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* ===== AVATAR SYSTEM ===== */

.profile-avatar-section {
    text-align: center;
    padding: 20px 0;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    margin-bottom: 20px;
}

.profile-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.profile-avatar-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #d4af37;
    overflow: hidden;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.8));
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.8);
}

.profile-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.generate-avatar-button {
    padding: 10px 25px;
    background: linear-gradient(135deg, #d4af37, #f0e6d2);
    color: #2c1810;
    border: none;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.generate-avatar-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(212, 175, 55, 0.6);
}

.generate-avatar-button:active {
    transform: translateY(0);
}

/* ===== AVATAR GENERATION MODAL ===== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-content {
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.modal-title {
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 20px;
}

.modal-body {
    text-align: center;
}

.modal-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.modal-btn-cancel {
    background: radial-gradient(circle at top, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #aaa;
}

.modal-btn-cancel:hover {
    background: radial-gradient(circle at top, #5a5a5a 0%, #3a3a3a 50%, #2a2a2a 100%);
}

.modal-btn-confirm {
    background: radial-gradient(circle at top, #695740 0%, #2a1f14 50%, #1a0f04 100%);
    color: #c4a574;
    font-weight: bold;
}

.modal-btn-confirm:hover {
    background: radial-gradient(circle at top, #7a6850 0%, #3a2f24 50%, #2a1f14 100%);
}

/* ===== OCCULT INPUT MODAL ===== */
.occult-input-container {
    text-align: center;
    padding: 20px;
}

.occult-input-message {
    margin-bottom: 20px;
    color: #b8a080;
    font-family: 'Cinzel', serif;
}

.occult-input-field {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.4);
    color: #c9a227;
    font-family: 'Cinzel', serif;
    border: none;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-input-field:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.6);
}

.occult-input-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ===== OCCULT CONFIRM MODAL ===== */
.occult-confirm-body {
    text-align: center;
    padding: 10px;
}

.occult-confirm-item {
    color: #c9a227;
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}

.occult-confirm-message {
    margin-bottom: 20px;
    color: #b8a080;
    font-family: 'Cinzel', serif;
    line-height: 1.6;
}

.occult-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.occult-confirm-buttons .game-btn {
    flex: 1;
    max-width: 120px;
}

.occult-confirm-buttons .game-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Danger button for No/Cancel */
.game-btn-inner.btn-danger {
    background: radial-gradient(circle at top, #8b0000 0%, #4a0000 50%, #2a0000 100%);
    color: #ffc4c4;
}

/* ===== ENCHANT RESULT DISPLAY ===== */
.enchant-result {
    text-align: center;
    padding: 10px;
}

.enchant-item-name {
    color: #c9a227;
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
}

.enchant-success {
    color: #4ade80;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    margin-bottom: 15px;
}

.enchant-perks-header {
    color: #b8a080;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.enchant-perks-list {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.enchant-perk {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    padding: 5px 0;
}

/* ===== GRIMOIRE SPELL CARDS ===== */

.grimoire-container {
    padding: 20px;
    max-width: 100%;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.grimoire-pages {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.spell-level-section {
    margin-bottom: 30px;
}

.spell-level-header {
    color: #FFD700;
    font-family: 'Cinzel', serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    padding-bottom: 10px;
}

.spells-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 0 10px;
}


/* Spell Card Size Only */
.spell-card {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 944 / 609;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: visible !important;
}

/* Spell Info Badge - positioned at top-right corner of spell cards */
.spell-info-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    left: auto;
    transform: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    border: 2px solid #d4af37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

.spell-info-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.spell-info-badge:hover {
    transform: scale(1.15);
    background: #000;
    border-color: #ffd700;
}

/* Spell Info Modal Styling */
.spell-info-container {
    font-family: 'Cinzel', serif;
    color: #e6d7c3;
}

.spell-info-title {
    color: #d4af37;
    margin-bottom: 10px;
}

.spell-info-description {
    margin-bottom: 15px;
    color: #aaa;
    font-style: italic;
}

.spell-info-row {
    margin-bottom: 10px;
}

.spell-info-label {
    color: #d4af37;
    font-weight: bold;
}

.spell-info-value {
    color: #ccc;
}

/* Metallic Red Spell Text */
.spell-name {
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 
        1px 1px 0 #8D1515,
        2px 2px 4px rgba(0, 0, 0, 0.8);
}

.spell-level {
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.spell-description {
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: 0 15px;
    line-height: 1.3;
}

/* Large Cast Button with Individual Backgrounds */
.cast-start-button {
    width: 60%;
    height: 60px;
    margin-top: auto;
    margin-bottom: 10px;
    align-self: center;
    padding: 12px 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 3px solid rgba(255, 215, 0, 0.8);
    border-radius: 25px;
    color: #FFD700;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.2),
        inset 0 -2px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    background: rgba(0, 0, 0, 0.6);
}

.cast-start-button:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 1);
    box-shadow: 
        0 9px 18px rgba(0, 0, 0, 0.6),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

.cast-start-button:active {
    transform: translateY(2px);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* Individual Spell Backgrounds */
#spell-aurum-veil { background-image: url('../images/backgrounds/aurum_veil_bg.png') !important; }
#spell-bonewhisper { background-image: url('../images/backgrounds/bonewhisper_bg.png') !important; }
#spell-veilstep { background-image: url('../images/backgrounds/veilstep_bg.png') !important; }
#spell-lifebalm { background-image: url('../images/backgrounds/lifebalm_bg.png') !important; }
#spell-coinbind { background-image: url('../images/backgrounds/coinbind_bg.png') !important; }
#spell-titans-grip { background-image: url('../images/backgrounds/titans_grip_bg.png') !important; }
#spell-windstride { background-image: url('../images/backgrounds/windstride_bg.png') !important; }
#spell-blood-rite { background-image: url('../images/backgrounds/blood_rite_bg.png') !important; }
#spell-calmchant { background-image: url('../images/backgrounds/calmchant_bg.png') !important; }
#spell-mindbreak { background-image: url('../images/backgrounds/mindbreak_bg.png') !important; }
#spell-sanguine-pact { background-image: url('../images/backgrounds/sanguine_pact_bg.png') !important; }
#spell-wither-mark { background-image: url('../images/backgrounds/wither_mark_bg.png') !important; }
#spell-oathbound-favor { background-image: url('../images/backgrounds/oathbound_favor_bg.png') !important; }
#spell-stonehide { background-image: url('../images/backgrounds/stonehide_bg.png') !important; }
#spell-ashen-relic { background-image: url('../images/backgrounds/ashen_relic_bg.png') !important; }
#spell-crown-of-dominion { background-image: url('../images/backgrounds/crown_of_dominion_bg.png') !important; }

/* ===== STAT INFO STYLES ===== */

/* Info button styling */
.stat-info-btn {
    background: rgba(212, 175, 55, 0.8);
    color: #1a1a1a;
    border: none;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    vertical-align: middle;
}

.stat-info-btn:hover {
    background: rgba(212, 175, 55, 1);
    transform: scale(1.1);
}

/* Info modal backdrop */
.stat-info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    backdrop-filter: blur(3px);
}

/* Info modal content */
.stat-info-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #2c1810 0%, #3d2415 100%);
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 20px;
    max-width: 320px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Info modal header */
.stat-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.stat-info-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #d4af37;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-info-close {
    background: none;
    border: none;
    color: #d4af37;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.stat-info-close:hover {
    color: #fff;
}

/* Info modal body */
.stat-info-body {
    color: #e8e8e8;
    font-size: 0.9rem;
    line-height: 1.4;
}

.stat-info-description {
    margin-bottom: 15px;
}

.stat-info-effects {
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid #d4af37;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

.stat-info-effects h5 {
    color: #d4af37;
    margin: 0 0 8px 0;
    font-size: 0.85rem;
    font-weight: bold;
}

.stat-info-effects ul {
    margin: 0;
    padding-left: 16px;
    color: #ccc;
}

.stat-info-effects li {
    margin-bottom: 4px;
    font-size: 0.8rem;
}

.stat-info-title-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

/* ===== CHARACTER EDIT FORM STYLES ===== */

.character-edit-form {
    background: linear-gradient(135deg, #2c1810 0%, #3d2415 100%);
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.edit-form-group {
    margin-bottom: 15px;
}

.edit-form-label {
    display: block;
    color: #d4af37;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.edit-form-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    color: #e8e8e8;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.edit-form-input:focus {
    outline: none;
    border-color: #d4af37;
    background: rgba(255, 255, 255, 0.15);
}

.edit-form-input::placeholder {
    color: #aaa;
    font-style: italic;
}

.edit-form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.edit-form-btn {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-form-btn-save {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
}

.edit-form-btn-cancel {
    background: linear-gradient(135deg, #95a5a6, #bdc3c7);
    color: #2c3e50;
}

.edit-form-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Mobile keyboard handling */
.edit-form-container {
    min-height: 60vh;
    padding-bottom: 100px;
}

/* Ensure form stays visible when keyboard appears */
@media screen and (max-height: 600px) {
    .character-edit-form {
        margin: 10px 0;
        padding: 15px;
    }
    
    .edit-form-group {
        margin-bottom: 10px;
    }
    
    .footer {
        position: fixed;
        bottom: 0;
        z-index: 1000;
    }
}


/* ===== CHARACTER PROFILE STYLES ===== */

.character-subtitle {
    font-size: 14px;
    font-style: italic;
    color: #ccc;
    margin-bottom: 5px;
}

.character-description-text {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    color: #fff;
    margin-bottom: 10px;
}

.character-items-list {
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-bottom: 10px;
}

.character-item-equipped {
    color: var(--text-gold);
    padding: 5px 0;
    font-weight: bold;
}

.character-item-inventory {
    color: #fff;
    padding: 3px 0;
}

.item-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: block;
    margin: 0 auto 8px auto;
    object-fit: contain;
    object-position: center;
}

.character-equipment-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.character-equipment-slot:last-child {
    border-bottom: none;
}

.equipment-slot-label {
    font-weight: bold;
    color: var(--text-gold);
    min-width: 120px;
    font-size: 14px;
}

.equipment-slot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    padding: 10px;
}

.equipment-empty {
    color: #888;
    font-style: italic;
    font-size: 14px;
}

.equipment-section {
    margin-bottom: 25px;
}

.equipment-section-title {
    color: var(--text-gold);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    justify-items: center;
}

.profile-equipment-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.character-debug-text {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    color: #fff;
    margin-top: 20px;
}

/* Reroll confirmation modal styles */
.reroll-confirmation-modal {
    text-align: center;
    font-family: 'Cinzel', serif;
    color: #e6d7c3;
}

.reroll-header h3 {
    color: #d4af37;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.reroll-header p {
    margin-bottom: 10px;
    line-height: 1.4;
}

.reroll-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.reroll-confirm-btn, .reroll-cancel-btn {
    padding: 10px 20px;
    border: 2px solid;
    border-radius: 8px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    font-family: 'Cinzel', serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.reroll-confirm-btn {
    border-color: #28a745;
    color: #28a745;
}

.reroll-confirm-btn:hover {
    background: linear-gradient(145deg, #28a745, #1e7932);
    color: white;
    transform: translateY(-2px);
}

.reroll-cancel-btn {
    border-color: #dc3545;
    color: #dc3545;
}

.reroll-cancel-btn:hover {
    background: linear-gradient(145deg, #dc3545, #a71e2a);
    color: white;
    transform: translateY(-2px);
}

/* Perks Detail Page Styling */
.perk-container {
    margin: 15px 0;
    padding: 10px;
    background: url('../images/backgrounds/parchment_bg.jpg');
    background-size: cover;
    border-left: 3px solid #8B4513;
    border-radius: 5px;
}

.perk-name {
    color: #2c1810;
    font-weight: bold;
}

.perk-description {
    color: #3d2b1f;
    font-style: italic;
}

.perk-other-content {
    color: #2c1810;
}

/* Vocations Library Styling */
.vocation-level-container {
    margin: 20px 0;
    padding: 15px;
    background: url('../images/backgrounds/parchment_bg.jpg');
    background-size: cover;
    border-left: 4px solid #8B4513;
    border-radius: 8px;
}

.vocation-header {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vocation-level {
    color: #2c1810;
    font-size: 18px;
    font-weight: bold;
}

.vocation-description {
    color: #3d2b1f;
    font-style: italic;
    font-size: 14px;
}

.modifier-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.modifier-item {
    background: rgba(44, 24, 16, 0.1);
    padding: 8px 12px;
    border-radius: 4px;
    color: #2c1810;
    font-size: 13px;
    border-left: 2px solid #8B4513;
}

/* Vocations List Display Styles */
.vocations-list {
    padding: 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    width: 100%;
}

.vocation-entry {
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid #d4af37;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.vocation-entry:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

.vocation-entry.vocation-active {
    background: rgba(212, 175, 55, 0.2);
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.vocation-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.vocation-level {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    color: #2c1810;
    margin-right: 10px;
}

.vocation-name {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #d4af37;
    font-weight: 600;
}

.vocation-description {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 8px;
    font-style: italic;
}

.vocation-cost {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #2c1810;
    font-weight: 500;
    margin-bottom: 10px;
}

.vocation-modifiers {
    background: rgba(240, 240, 240, 0.8);
    border-radius: 5px;
    padding: 8px;
    margin-top: 8px;
}

.vocation-modifiers .modifier {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #2c1810;
    margin-bottom: 3px;
    line-height: 1.3;
}

.vocation-modifiers .modifier:last-child {
    margin-bottom: 0;
}

/* Enhancement Page Styling */
.enhancement-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 800px;
    background: transparent;
    margin: 20px auto;
}

.enhancement-card {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 0, 0, 0.8));
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 15px;
    padding: 20px;
    cursor: default;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 200px;
}

.enhancement-card:hover {
    border-color: rgba(255, 215, 0, 1);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    transform: translateY(-5px);
}

.enhancement-icon {
    margin-bottom: 15px;
}

.enhancement-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}

.enhancement-content h3 {
    font-family: 'Cinzel', serif;
    color: #ffd700;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.enhancement-content p {
    font-family: 'Cinzel', serif;
    color: #ffffff;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.enhancement-cost {
    font-family: 'Cinzel', serif;
    color: #ffcc00;
    font-size: 0.8rem;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 15px;
}

/* Enhancement button sizing override (styling comes from unified button system) */
.enhancement-button {
    min-width: 100px;
}

/* Item and Beast Portrait Images */
.item-portrait {
    text-align: center;
    padding: 15px;
}

.item-portrait img {
    width: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Pet Modal Image */
.pet-modal-image-container {
    text-align: center;
    margin-bottom: 20px;
}

.pet-modal-image-frame {
    display: inline-block;
    background: url('/static/images/backgrounds/parchment_bg.jpg') center/cover;
    padding: 15px;
    border-radius: 12px;
    box-sizing: border-box;
}

.pet-modal-image-frame img {
    max-width: 100%;
    max-height: 400px;
    display: block;
    border-radius: 8px;
    mix-blend-mode: multiply;
}

/* Navigation Container for Encyclopedia Pagination */
.navigation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.encyclopedia-nav-button {
    background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
    color: transparent;
    border: 2px solid #5c3317;
    padding: 12px 20px;
    font-size: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    min-width: 60px;
    width: 60px;
    height: 60px;
    background-image: url('../images/icons/arrow_128.png'), linear-gradient(135deg, #8b4513 0%, #654321 100%);
    background-size: contain, 100% 100%;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

.encyclopedia-nav-button:hover {
    background-image: url('../images/icons/arrow_128.png'), linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

.encyclopedia-nav-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.encyclopedia-nav-next {
    transform: scaleX(-1);
}

.encyclopedia-nav-next:hover {
    transform: scaleX(-1) translateY(-2px);
}

.encyclopedia-nav-next:active {
    transform: scaleX(-1) translateY(0);
}

/* Pet Card Layout */
/* Old pet styles removed - using unified styles at line 4171+ */

/* Character Avatar Display */
.character-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    gap: 10px;
}

.character-avatar-large {
    width: 256px;
    height: 256px;
    border-radius: 8px;
    border: 3px solid #d4af37;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.2);
    overflow: hidden;
    position: relative;
}

.character-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.generate-avatar-btn {
    padding: 6px 16px;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid #d4af37;
    border-radius: 4px;
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.generate-avatar-btn:hover {
    background: rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* ===========================
   Heptagon Stats Visualization
   =========================== */

.heptagon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 10px;
}

.heptagon-container canvas {
    display: block;
}

.heptagon-title {
    color: #d4af37;
    border-bottom: 1px solid #d4af37;
    padding-bottom: 5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-family: 'Cinzel', serif;
}

/* ===========================
   Stats Grid with Divider
   =========================== */

.stats-divider-grid {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 12px;
    font-size: 0.8rem;
}

.stats-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-column-left .stats-row {
    justify-content: flex-end;
}

.stats-column-right .stats-row {
    justify-content: flex-start;
}

.stats-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d4af37;
}

.stats-row img {
    width: 18px;
    height: 18px;
}

.stats-center-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.6), transparent);
    height: 100%;
    position: relative;
}

.stats-center-divider::after {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #d4af37;
    font-size: 10px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

.stats-section {
    margin-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    padding-top: 15px;
}

.stats-section-title {
    color: #d4af37;
    border-bottom: 1px solid #d4af37;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
}

.quest-status-text {
    color: #e0e0e0;
    font-size: 0.9rem;
}

.stats-horizontal-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.6), transparent);
    position: relative;
    margin: 10px 0;
}

.stats-horizontal-divider::after {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #d4af37;
    font-size: 10px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
    background: rgba(0, 0, 0, 0.8);
    padding: 0 5px;
}

.stats-perk-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 8px;
    color: #d4af37;
}

.stats-perk-name {
    font-size: 0.85rem;
}

.stats-perk-desc {
    font-size: 0.75rem;
    opacity: 0.8;
}

/* Character Page Header */
.char-header {
    text-align: center;
    margin-bottom: 15px;
}

.char-name {
    margin-bottom: 5px;
}

.char-description {
    color: #d4af37;
    font-style: italic;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.char-level-info {
    color: #d4af37;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.char-money {
    color: #ffd700;
    font-size: 0.8rem;
}

.char-avatar-cost-free {
    color: #4CAF50;
    font-size: 0.85rem;
    margin-top: 5px;
    font-family: 'Cinzel', serif;
}

.char-avatar-cost {
    color: #ffd700;
    font-size: 0.85rem;
    margin-top: 5px;
    font-family: 'Cinzel', serif;
}

/* Health Bar */
.char-health-row {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.char-health-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.char-health-icon {
    width: 20px;
    height: 20px;
}

.char-health-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.char-health-bar {
    width: 120px;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    overflow: hidden;
    position: relative;
}

.char-health-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 7px;
}

.char-resource-fill.health-high {
    background: linear-gradient(90deg, #4CAF50, #66BB6A);
}

.char-resource-fill.health-medium {
    background: linear-gradient(90deg, #FFC107, #FFD54F);
}

.char-resource-fill.health-low {
    background: linear-gradient(90deg, #FF9800, #FFB74D);
}

.char-resource-fill.health-critical {
    background: linear-gradient(90deg, #ff4444, #ff6666);
}

.char-health-text {
    color: #ffd700;
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 45px;
}

/* Base Stats Grid */
.char-base-stats-grid {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 12px;
    font-size: 0.8rem;
    position: relative;
}

.char-stats-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.char-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d4af37;
}

.char-stat-row-left {
    justify-content: flex-end;
}

.char-stat-row-right {
    justify-content: flex-start;
}

.char-stat-icon {
    width: 18px;
    height: 18px;
}

.char-center-divider {
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.6), transparent);
    height: 100%;
    position: relative;
}

.char-center-divider::after {
    content: '★';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #d4af37;
    font-size: 10px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
    background: rgba(0, 0, 0, 0.8);
    padding: 0 3px;
}

/* Vocation Display */
.char-vocation {
    text-align: center;
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    margin: 10px 0;
}

/* Resource Bars (HP, Sanity, Eldritch) */
.char-resource-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.char-bar-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.char-resource-bar {
    flex: 1;
    height: 16px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    overflow: hidden;
}

.char-resource-fill {
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 7px;
}

.char-bar-text {
    color: #d4af37;
    font-size: 0.8rem;
    min-width: 60px;
    text-align: right;
}

/* Sanity bar color */
.sanity-fill {
    background: linear-gradient(90deg, #3498db, #5dade2);
}

/* Eldritch bar color */
.eldritch-fill {
    background: linear-gradient(90deg, #8e44ad, #9b59b6);
}

/* Artifacts Grid (two columns) */
.artifacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.artifact-item {
    color: #d4af37;
    font-size: 0.75rem;
    padding: 2px 0;
}

/* ===========================
   Character Portrait Equipment
   =========================== */

.character-portrait-equipment {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.portrait-container {
    position: relative;
    width: 100%;
    padding-top: 133%; /* 3:4 aspect ratio for portrait */
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: visible;
}

.character-dummy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    padding-bottom: 10px;
}

.portrait-pet-background {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.9));
}

.portrait-item {
    position: absolute;
    z-index: 2;
    width: 70px;
    height: 70px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #d4af37;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.portrait-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Rarity-based borders and backgrounds for portrait items */
.portrait-item.rarity-common {
    border: 2px solid rgba(169, 169, 169, 0.8);
    background: rgba(85, 85, 85, 0.6);
}

.portrait-item.rarity-odd {
    border: 2px solid rgba(50, 205, 50, 0.9);
    background: rgba(25, 102, 25, 0.6);
}

.portrait-item.rarity-strange {
    border: 2px solid rgba(30, 144, 255, 0.9);
    background: rgba(15, 72, 127, 0.6);
}

.portrait-item.rarity-eldritch {
    border: 2px solid rgba(255, 140, 0, 1.0);
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.6), rgba(186, 85, 211, 0.6));
}

/* Position items around the character dummy */
.portrait-head {
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
}

.portrait-chest {
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.portrait-arms {
    top: 35%;
    left: 5%;
}

.portrait-legs {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.portrait-primary {
    bottom: 5%;
    left: 5%;
}

.portrait-secondary {
    bottom: 5%;
    right: 5%;
}

/* Character Page - Selected Pet Display */
.char-pet-display {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.char-pet-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid rgba(212, 175, 55, 0.5);
}

.char-pet-info {
    flex: 1;
}

.char-pet-name {
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: bold;
}

.char-pet-level {
    color: #aaa;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ===========================
   Dummy Tier Light Effects
   =========================== */

/* Tier 1 (Level 1-9): Soft white glow */
.portrait-container.dummy-tier-1 .character-dummy {
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.5))
        drop-shadow(0 0 16px rgba(255, 255, 255, 0.3));
}

/* Tier 2 (Level 10-19): Warm orange glow */
.portrait-container.dummy-tier-2 .character-dummy {
    filter:
        drop-shadow(0 0 10px rgba(255, 150, 80, 0.6))
        drop-shadow(0 0 20px rgba(255, 150, 80, 0.4));
}

/* Tier 3 (Level 20-29): Blue glow */
.portrait-container.dummy-tier-3 .character-dummy {
    filter:
        drop-shadow(0 0 10px rgba(50, 150, 255, 0.6))
        drop-shadow(0 0 20px rgba(50, 150, 255, 0.4));
}

/* Tier 4 (Level 30-39): Bright white glow */
.portrait-container.dummy-tier-4 .character-dummy {
    filter:
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.6))
        drop-shadow(0 0 24px rgba(255, 255, 255, 0.4));
}

/* Tier 5 (Level 40-49): Golden glow */
.portrait-container.dummy-tier-5 .character-dummy {
    filter:
        drop-shadow(0 0 10px rgba(255, 215, 0, 0.7))
        drop-shadow(0 0 18px rgba(255, 215, 0, 0.5));
}

/* Tier 6 (Level 50-59): Cyan breathing glow */
@keyframes breathingGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 10px rgba(0, 255, 255, 0.6))
            drop-shadow(0 0 20px rgba(0, 255, 255, 0.4));
    }
    50% {
        filter:
            drop-shadow(0 0 15px rgba(0, 255, 255, 0.7))
            drop-shadow(0 0 25px rgba(0, 255, 255, 0.5));
    }
}

.portrait-container.dummy-tier-6 .character-dummy {
    animation: breathingGlow 4s ease-in-out infinite;
}

/* Tier 7 (Level 60-69): Purple pulse */
@keyframes silverPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 12px rgba(200, 100, 255, 0.6))
            drop-shadow(0 0 22px rgba(200, 100, 255, 0.4));
    }
    50% {
        filter:
            drop-shadow(0 0 18px rgba(200, 100, 255, 0.7))
            drop-shadow(0 0 30px rgba(200, 100, 255, 0.5));
    }
}

.portrait-container.dummy-tier-7 .character-dummy {
    animation: silverPulse 3s ease-in-out infinite;
}

/* Tier 8 (Level 70-79): Silver-blue glow */
.portrait-container.dummy-tier-8 .character-dummy {
    filter:
        drop-shadow(0 0 12px rgba(150, 200, 255, 0.7))
        drop-shadow(0 0 22px rgba(150, 200, 255, 0.5));
}

/* Tier 9 (Level 80-89): Bright silver glow */
.portrait-container.dummy-tier-9 .character-dummy {
    filter:
        drop-shadow(0 0 15px rgba(220, 230, 255, 0.8))
        drop-shadow(0 0 25px rgba(220, 230, 255, 0.6));
}

.portrait-container.dummy-tier-9::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 30%;
    width: 15%;
    height: 25%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.25), transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
}

/* Tier 10 (Level 90+): Grandmaster brilliant pulse */
@keyframes grandmasterPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 15px rgba(180, 220, 255, 0.8))
            drop-shadow(0 0 28px rgba(180, 220, 255, 0.6))
            brightness(1.05);
    }
    50% {
        filter:
            drop-shadow(0 0 22px rgba(180, 220, 255, 0.9))
            drop-shadow(0 0 38px rgba(180, 220, 255, 0.7))
            brightness(1.1);
    }
}

.portrait-container.dummy-tier-10 .character-dummy {
    animation: grandmasterPulse 3s ease-in-out infinite;
}

.portrait-container.dummy-tier-10::after {
    content: '';
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 20%;
    background: radial-gradient(ellipse, rgba(180, 220, 255, 0.4), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ===== OCCULT DESIGN SYSTEM ===== */
/* New occult-styled pages for pets, equipment, market, smithy */

/* Override game-content padding for occult pages */
.game-content.occult-active {
    padding: 0;
}

/* Override content-section styles for occult pages */
#petsSection.content-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    backdrop-filter: none;
}

#petsContent {
    padding: 0;
    margin: 0;
    border: none;
}

#marketSection.content-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    backdrop-filter: none;
}

#marketContent {
    padding: 0;
    margin: 0;
    border: none;
}

#marketSection .occult-summary-inner,
#marketSection .occult-details-inner {
    background: url('../images/backgrounds/occult-bck-market.png') center/cover no-repeat;
}

#smithySection.content-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    backdrop-filter: none;
}

#smithyContent {
    padding: 0;
    margin: 0;
    border: none;
}

#smithySection .occult-summary-inner,
#smithySection .occult-details-inner {
    background: url('../images/backgrounds/occult-bck-smith.png') center/cover no-repeat;
}

/* Storage (Consumables) Section Overrides */
#characterConsumablesSection.content-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    backdrop-filter: none;
}

#characterConsumablesContent {
    padding: 0;
    margin: 0;
    border: none;
}

#characterConsumablesSection .occult-summary-inner,
#characterConsumablesSection .occult-details-inner {
    background: url('../images/backgrounds/occult-bck-market.png') center/cover no-repeat;
}

/* Equipment (Armory) Section Overrides */
#equipmentSection.content-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    backdrop-filter: none;
}

#equipmentDisplay {
    padding: 0;
    margin: 0;
    border: none;
}

#equipmentSection .occult-summary-inner,
#equipmentSection .occult-details-inner {
    background: url('../images/backgrounds/occult-bck-smith.png') center/cover no-repeat;
}

/* Equipment Filter Buttons - Occult Style */
.occult-filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 5px;
}

.occult-filter-btn {
    width: 70px;
    height: 40px;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 50%, #2a1a04 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 2px;
    clip-path: polygon(
        10px 0%, calc(100% - 10px) 0%,
        100% 10px, 100% calc(100% - 10px),
        calc(100% - 10px) 100%, 10px 100%,
        0% calc(100% - 10px), 0% 10px
    );
}

.occult-filter-btn-inner {
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, #3a2a1a 0%, #1a0f04 50%, #0d0704 100%);
    color: #9a8060;
    font-family: 'Cinzel', serif;
    font-size: 0.65em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    clip-path: polygon(
        10px 0%, calc(100% - 10px) 0%,
        100% 10px, 100% calc(100% - 10px),
        calc(100% - 10px) 100%, 10px 100%,
        0% calc(100% - 10px), 0% 10px
    );
}

.occult-filter-btn.active .occult-filter-btn-inner {
    background: radial-gradient(circle at top, #695740 0%, #2a1f14 50%, #1a0f04 100%);
    color: #daa520;
}

.occult-close-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Main page container */
.occult-page {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 10px 10px 18px;
    border: 1px solid rgb(61 42 7 / 90%);
    box-shadow:
        0 0 0 1px rgba(10, 6, 2, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #322014 0, #19100a 45%, #120c07 100%);
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    text-shadow: 0px 0px 1px #000000;
}

/* Header section */
.occult-header-container {
    background-image: url('../images/icons/headers/header-container.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.occult-header {
    font-family: 'Cinzel', serif;
    position: relative;
    padding: 10px 20px;
    color: #3a2714;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    font-size: 1em;
    font-weight: 600;
}

.occult-header img {
    width: 100%;
    mix-blend-mode: hard-light;
    filter: drop-shadow(2px 2px 4px black);
}

/* Daily refresh countdown timer */
.occult-countdown {
    position: relative;
    margin: 0 10px 10px 10px;
    padding: 12px 16px;
    text-align: center;
    clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}

.occult-countdown::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
    z-index: -2;
}

.occult-countdown::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: radial-gradient(ellipse at center, rgba(30, 20, 10, 0.95) 0%, rgba(15, 10, 5, 0.98) 100%);
    clip-path: polygon(11px 0%, calc(100% - 11px) 0%, 100% 11px, 100% calc(100% - 11px), calc(100% - 11px) 100%, 11px 100%, 0% calc(100% - 11px), 0% 11px);
    z-index: -1;
}

.occult-countdown-text {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #b8a080;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.occult-countdown-timer {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    font-weight: 700;
    color: #daa520;
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.1em;
}

/* Pulsing glow animation for timer */
@keyframes timerGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(218, 165, 32, 0.5), 0 2px 4px rgba(0, 0, 0, 0.8); }
    50% { text-shadow: 0 0 15px rgba(218, 165, 32, 0.8), 0 0 25px rgba(218, 165, 32, 0.4), 0 2px 4px rgba(0, 0, 0, 0.8); }
}

.occult-countdown-timer {
    animation: timerGlow 2s ease-in-out infinite;
}

/* Item list container */
.occult-item-list {
    margin-top: 6px;
}

/* Individual card wrapper */
.occult-card {
    position: relative;
    margin: 8px 4px;
    overflow: hidden;
}

/* Rarity gradients for summary (collapsed) */
.occult-summary.common,
.occult-details.common {
    background: linear-gradient(135deg, #CCCCCC 0%, #EEEEEE 50%, #333333 100%);
}

.occult-summary.odd,
.occult-details.odd {
    background: linear-gradient(135deg, #306f32 0%, #5e8530 50%, #02635a 100%);
}

.occult-summary.strange,
.occult-details.strange {
    background: linear-gradient(135deg, #242f6b 0%, #1666a5 50%, #44267b 100%);
}

.occult-summary.eldritch,
.occult-details.eldritch {
    background: linear-gradient(135deg, #b54c07 0%, #9d7705 50%, #a33a18 100%);
}

/* Icon glow effects by rarity */
.occult-icon-large.common,
.occult-icon-small.common {
    filter: drop-shadow(0px 0px 10px #CCCCCCCC);
}

.occult-icon-large.odd,
.occult-icon-small.odd {
    filter: drop-shadow(0px 0px 10px #306f32cc);
}

.occult-icon-large.strange,
.occult-icon-small.strange {
    filter: drop-shadow(0px 0px 10px #242f6bcc);
}

.occult-icon-large.eldritch,
.occult-icon-small.eldritch {
    filter: drop-shadow(0px 0px 10px #b54c07cc);
}

/* Collapsed parchment strip */
.occult-summary {
    position: relative;
    padding: 3px;
    color: #daa520;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    cursor: pointer;
}

/* Layout of collapsed row */
.occult-summary-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 10px;
    align-items: center;
    border: 1px solid #3f1c0769;
    padding: 0 10px;
    background: url('../images/backgrounds/occult-bck-pet.png') center/cover no-repeat;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

/* Small icon */
.occult-icon-small {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.occult-icon-small.selected {
    filter: drop-shadow(0px 0px 10px #ffd70077);
    mix-blend-mode: normal;
}

.occult-icon-small img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Name and trait in summary */
.occult-summary-main {
    min-width: 0;
    margin-top: 15px;
}

.occult-item-name {
    font-size: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid #b8860bcf;
    font-family: 'Cinzel', serif;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    max-height: 2.4em;
}

.occult-trait-line {
    margin-top: 2px;
    font-size: 0.75em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #daa520;
    border-bottom: 1px solid #b8860bcf;
}

/* Level and rarity on the right */
.occult-summary-meta {
    text-align: right;
    font-size: 0.85em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.occult-level {
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 15px;
    font-family: 'Cinzel', serif;
}

.occult-rarity {
    display: inline-block;
    position: absolute;
    top: 35px;
    right: 15px;
}

.occult-state {
    margin-top: 4px;
    color: #4ade80;
    font-size: 0.85em;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Expanded occult panel */
.occult-details {
    display: none;
    padding: 3px;
    background: linear-gradient(135deg, #7b6804 0%, #6a5a3a 50%, #4a3a2a 100%);
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

/* When card is open, show details */
.occult-card.open {
    display: block;
    aspect-ratio: auto;
    background-image: url('../images/backgrounds/occult-bck-pet.png');
    background-size: 100% 100%;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.occult-card.open .occult-details {
    display: block;
    animation: occultCardOpen 0.4s ease-out;
    transform-origin: top center;
    cursor: pointer;
}

.occult-card.open .occult-summary {
    display: none;
}

@keyframes occultCardOpen {
    0% {
        opacity: 0;
        transform: scaleY(0);
        max-height: 0;
    }
    100% {
        opacity: 1;
        transform: scaleY(1);
        max-height: 1000px;
    }
}

@keyframes occultCardClose {
    0% {
        opacity: 1;
        transform: scaleY(1);
        max-height: 1000px;
    }
    100% {
        opacity: 0;
        transform: scaleY(0);
        max-height: 0;
    }
}

.occult-card.closing .occult-details {
    display: block;
    animation: occultCardClose 0.3s ease-in forwards;
    transform-origin: top center;
}

.occult-card.closing .occult-summary {
    display: none;
}

/* Inner layout of expanded panel */
.occult-details-inner {
    display: flex;
    flex-direction: column;
    border: 1px solid #16100a33;
    padding: 15px;
    filter: drop-shadow(0px 0px 1px #36454F);
    background: url('../images/backgrounds/occult-bck-pet.png') center/cover no-repeat;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    overflow: hidden;
}

/* Large portrait */
.occult-icon-large {
    max-width: 512px;
    max-height: 512px;
    margin: 0 auto;
    object-fit: contain;
    overflow: hidden;
    filter: drop-shadow(0px 0px 1px #36454F);
}

.occult-icon-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Details text */
.occult-details-main {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    color: #daa520;
}

.occult-details-name {
    font-size: 1.5em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid #b8860bcf;
    text-align: center;
    font-family: 'Cinzel', serif;
}

.occult-details-sub {
    margin-top: 4px;
    font-size: 0.8em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 1px solid #b8860bcf;
    text-align: center;
}

/* Equipment expanded header layout */
.occult-details-header {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
}

.occult-details-header .occult-icon-large {
    flex-shrink: 0;
    max-width: 120px;
    max-height: 120px;
}

.occult-details-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.occult-details-info .occult-details-name {
    font-size: 1.1em;
    text-align: left;
    border-bottom: none;
}

.occult-details-info .occult-details-sub {
    font-size: 0.75em;
    text-align: left;
    border-bottom: none;
    color: #b8a080;
}

.occult-equipped-badge {
    display: inline-block;
    background: radial-gradient(circle at top, #2d5a2d 0%, #1a3d1a 50%, #0f2a0f 100%);
    color: #4ade80;
    padding: 4px 10px;
    font-size: 0.7em;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}

.occult-rarity-display {
    font-size: 0.8em;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 5px;
}

.occult-rarity-display.common { color: #9ca3af; }
.occult-rarity-display.odd { color: #4ade80; }
.occult-rarity-display.strange { color: #60a5fa; }
.occult-rarity-display.eldritch { color: #f59e0b; }

/* Simple stats lines */
.occult-stats {
    margin-top: 8px;
    font-size: 0.85em;
    line-height: 1.4;
    text-align: center;
}

/* Occult button container */
.occult-button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.occult-button-row {
    display: flex;
    gap: 5px;
    justify-content: center;
}

/* Octagonal button */
.game-btn {
    width: 100px;
    height: 50px;
    background: linear-gradient(135deg, #7b6804 0%, #6a5a3a 50%, #4a3a2a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 2px;
    clip-path: polygon(
        10px 0%, calc(100% - 10px) 0%,
        100% 10px, 100% calc(100% - 10px),
        calc(100% - 10px) 100%, 10px 100%,
        0% calc(100% - 10px), 0% 10px
    );
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 1px 2px rgba(0,0,0,0.8),
        0 4px 8px rgba(0,0,0,0.6);
    transition: all 0.2s ease;
}

.game-btn-inner {
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    background: radial-gradient(circle at top, #9f754a 0%, #2a1f14 50%, #1a0f04 100%);
    color: #c4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(
        10px 0%, calc(100% - 10px) 0%,
        100% 10px, 100% calc(100% - 10px),
        calc(100% - 10px) 100%, 10px 100%,
        0% calc(100% - 10px), 0% 10px
    );
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
    transition: all 0.2s ease;
}

/* Sell button specific styling (red) */
.game-btn-inner.btn-sell {
    background: radial-gradient(circle at top, #e12e2e 0%, #7e2020 50%, #3c0f10 100%);
    color: #f4c4c4;
}

/* Button hover */
.game-btn:hover {
    background: linear-gradient(135deg, #9a8a6a 0%, #7a6a4a 50%, #5a4a3a 100%);
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 1px 3px rgba(0,0,0,0.9),
        0 5px 10px rgba(0,0,0,0.7);
}

.game-btn:hover .game-btn-inner {
    background: radial-gradient(circle at top, #897057 0%, #3a2f24 50%, #2a1f14 100%);
    color: #d4b584;
}

/* Sell button hover */
.game-btn:hover .game-btn-inner.btn-sell {
    background: radial-gradient(circle at top, #ffb6b6 0%, #8e3030 50%, #4c1f20 100%);
    color: #ffd4d4;
}

/* Button active */
.game-btn:active {
    transform: translateY(1px);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 1px 2px rgba(0,0,0,0.8);
}

.game-btn:active .game-btn-inner {
    background: radial-gradient(circle at top, #2a1f14 0%, #1a0f04 50%, #0a0502 100%);
}

/* Sell button active */
.game-btn:active .game-btn-inner.btn-sell {
    background: radial-gradient(circle at top, #d09090 0%, #6e1010 50%, #2c0506 100%);
    color: #e4b4b4;
}

/* Disabled button */
.game-btn.disabled,
.game-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Catch section styling for occult pets */
.occult-catch-section {
    position: relative;
    margin-bottom: 15px;
    padding: 15px;
    background: transparent;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.occult-catch-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    z-index: -2;
}

.occult-catch-section::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: radial-gradient(circle at top, #322014 0, #19100a 45%, #120c07 100%);
    clip-path: polygon(9px 0%, calc(100% - 9px) 0%, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0% calc(100% - 9px), 0% 9px);
    z-index: -1;
}

.occult-catch-btn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #7b6804 0%, #6a5a3a 50%, #4a3a2a 100%);
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    transition: all 0.2s ease;
}

.occult-catch-btn:hover {
    background: linear-gradient(135deg, #9a8a6a 0%, #8a7a5a 50%, #6a5a4a 100%);
    color: #ffd700;
}

.occult-catch-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.occult-info-box {
    position: relative;
    margin-top: 12px;
    padding: 12px;
    background: transparent;
    color: #daa520;
    font-size: 0.85em;
    line-height: 1.5;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-info-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -2;
}

.occult-info-box::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-catch-chance {
    position: relative;
    margin-top: 10px;
    padding: 12px;
    background: transparent;
    text-align: center;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-catch-chance::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -2;
}

.occult-catch-chance::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-catch-chance-title {
    color: #d4af37;
    font-weight: bold;
    margin-bottom: 8px;
    font-family: 'Cinzel', serif;
}

.occult-catch-chance-value {
    font-size: 1.5rem;
    font-weight: bold;
}

.occult-catch-chance-details {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 5px;
}

/* No pets message */
.occult-no-items {
    text-align: center;
    color: #daa520;
    padding: 30px;
    font-size: 1.1em;
    font-style: italic;
}

@media (max-width: 360px) {
    .occult-details-inner {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }
    .occult-icon-large {
        margin: 0 auto;
    }
    .game-btn {
        width: 85px;
        height: 45px;
    }
    .game-btn-inner {
        font-size: 0.65em;
    }
}

/* ========== OCCULT MODAL SYSTEM ========== */
.occult-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 80px 20px 20px 20px; /* Top padding for sticky header */
    box-sizing: border-box;
}

.occult-modal {
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    background: radial-gradient(circle at top, #322014 0, #19100a 45%, #120c07 100%);
    border: 2px solid #3d2a07;
    clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0% calc(100% - 15px), 0% 15px);
    box-shadow: 0 0 30px rgba(0,0,0,0.9), 0 0 60px rgba(0,0,0,0.5);
}

.occult-modal-header {
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 0 15px;
    text-align: center;
}

.occult-modal-header img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.occult-modal-title {
    position: relative;
    z-index: 1;
    color: #36454F;
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.2);
}

.occult-modal-body {
    padding: 15px;
}

.occult-modal-image {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    margin: 0 auto 15px;
    background: transparent;
    clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
}

/* Outer frame border */
.occult-modal-image::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0% calc(100% - 12px), 0% 12px);
    z-index: -2;
}

/* Inner background */
.occult-modal-image::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    background: url('../images/backgrounds/occult-bck-pet.png') center/cover no-repeat;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    z-index: -1;
}

.occult-modal-image.common::before { background: linear-gradient(135deg, #5a5a5a 0%, #6b6b6b 25%, #4a4a4a 50%, #6b6b6b 75%, #5a5a5a 100%); }
.occult-modal-image.odd::before { background: linear-gradient(135deg, #3a5a3a 0%, #4a7c4a 25%, #2a4a2a 50%, #4a7c4a 75%, #3a5a3a 100%); }
.occult-modal-image.strange::before { background: linear-gradient(135deg, #3a4a6a 0%, #4a6a9c 25%, #2a3a5a 50%, #4a6a9c 75%, #3a4a6a 100%); }
.occult-modal-image.eldritch::before { background: linear-gradient(135deg, #7a4a2a 0%, #9c5a2a 25%, #5a3a1a 50%, #9c5a2a 75%, #7a4a2a 100%); }

.occult-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.occult-modal-behavior {
    text-align: center;
    font-style: italic;
    color: #b8a080;
    font-size: 0.9em;
    margin-bottom: 15px;
}

/* Rusty metallic frame mixin - applied via position relative + ::before */
.occult-frame {
    position: relative;
    background: rgba(0,0,0,0.4);
    padding: 12px;
    margin-bottom: 15px;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -1;
}

.occult-frame::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-modal-info {
    position: relative;
    background: transparent;
    padding: 12px;
    margin-bottom: 15px;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-modal-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -2;
}

.occult-modal-info::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-modal-stats {
    position: relative;
    background: transparent;
    padding: 12px;
    margin: 0 auto 15px;
    width: 50%;
    text-align: center;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-modal-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -2;
}

.occult-modal-stats::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-stats-header {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #3d2a07;
}

.occult-stats-content {
    color: #b8a080;
    font-size: 0.85em;
    line-height: 1.5;
}

.occult-modal-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #3d2a0755;
}

.occult-modal-row:last-child {
    border-bottom: none;
}

.occult-modal-label {
    color: #b8860b;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.occult-modal-value {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
}

.occult-modal-combat {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    gap: 15px;
}

.occult-combat-stat {
    flex: 1;
    position: relative;
    text-align: center;
    padding: 12px;
    background: transparent;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-combat-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -2;
}

.occult-combat-stat::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-combat-stat.damage::before {
    background: linear-gradient(135deg, #7a5030 0%, #8b4513 25%, #5a2a07 50%, #8b4513 75%, #7a5030 100%);
}

.occult-combat-stat.resist::before {
    background: linear-gradient(135deg, #3a5a7a 0%, #4682b4 25%, #2a4a6a 50%, #4682b4 75%, #3a5a7a 100%);
}

.occult-combat-icon {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.occult-combat-stat.damage .occult-combat-icon {
    color: #cd853f;
}

.occult-combat-stat.resist .occult-combat-icon {
    color: #87ceeb;
}

.occult-combat-label {
    color: #b8860b;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
}

.occult-combat-value {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 1.4em;
    font-weight: 600;
}

.occult-combat-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #3d2a0755;
    font-size: 0.7em;
    color: #b8a080;
    line-height: 1.4;
    text-align: left;
}

.occult-modal-rarity {
    position: relative;
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
    background: transparent;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-modal-rarity::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -2;
}

.occult-modal-rarity::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-modal-rarity.common::before { background: linear-gradient(135deg, #5a5a5a 0%, #6b6b6b 25%, #4a4a4a 50%, #6b6b6b 75%, #5a5a5a 100%); }
.occult-modal-rarity.odd::before { background: linear-gradient(135deg, #3a5a3a 0%, #4a7c4a 25%, #2a4a2a 50%, #4a7c4a 75%, #3a5a3a 100%); }
.occult-modal-rarity.strange::before { background: linear-gradient(135deg, #3a4a6a 0%, #4a6a9c 25%, #2a3a5a 50%, #4a6a9c 75%, #3a4a6a 100%); }
.occult-modal-rarity.eldritch::before { background: linear-gradient(135deg, #7a4a2a 0%, #9c5a2a 25%, #5a3a1a 50%, #9c5a2a 75%, #7a4a2a 100%); }

.occult-rarity-stars {
    font-size: 1.3em;
    margin-right: 10px;
}

.occult-modal-rarity.common .occult-rarity-stars { color: #999; }
.occult-modal-rarity.odd .occult-rarity-stars { color: #6fbf6f; }
.occult-modal-rarity.strange .occult-rarity-stars { color: #6f9fbf; }
.occult-modal-rarity.eldritch .occult-rarity-stars { color: #f0a040; }

.occult-rarity-label {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.occult-modal-rarity.common .occult-rarity-label { color: #999; }
.occult-modal-rarity.odd .occult-rarity-label { color: #6fbf6f; }
.occult-modal-rarity.strange .occult-rarity-label { color: #6f9fbf; }
.occult-modal-rarity.eldritch .occult-rarity-label { color: #f0a040; }

.occult-modal-description {
    font-style: italic;
    color: #b8a080;
    font-size: 0.85em;
    line-height: 1.5;
    padding: 12px;
    margin-bottom: 15px;
    background: rgba(0,0,0,0.3);
    border-left: 3px solid #b8860b;
}

.occult-modal-perks {
    position: relative;
    background: transparent;
    padding: 12px;
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
}

.occult-modal-perks::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    z-index: -2;
}

.occult-modal-perks::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0% calc(100% - 7px), 0% 7px);
    z-index: -1;
}

.occult-perks-header {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #3d2a07;
}

.occult-perks-list {
    color: #b8a080;
    font-size: 0.85em;
    line-height: 1.5;
}

.occult-perk-item {
    padding: 8px 0;
    border-bottom: 1px solid #3d2a0744;
}

.occult-perk-item:last-child {
    border-bottom: none;
}

.occult-perk-item strong {
    color: #daa520;
}

.occult-modal-footer {
    padding: 15px;
    display: flex;
    justify-content: center;
}

/* ===================================
   HOME PAGE - RIVERHOLD MAP (Occult Style)
   =================================== */

/* Hide all sub menus, footer, and old navigation - not used with map navigation */
.sub-menu-container,
.sub-level-2,
.sub-level-3,
.sub-menu-grid,
.sub-menu-item,
.sub-menu-scroll,
.nav-grid,
.nav-button,
.game-footer,
.bottom-navigation {
    display: none !important;
}

/* Override content-section for home - always visible as background */
#homeSection.content-section {
    display: block !important;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    height: 100%;
    backdrop-filter: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Non-home content sections - appear above map with scrolling */
.content-section:not(#homeSection) {
    position: relative;
    z-index: 100;
    overflow-y: auto;
    flex: 1 1 auto;
    width: 100%;
}

/* Override game-content for home page */
.game-content.home-bg {
    background: radial-gradient(circle at center, #1a1510 0%, #0d0a07 100%);
    padding: 0;
    margin: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Game content when not on home - allow scrolling, full height */
.game-content:not(.home-bg) {
    overflow-y: auto;
    height: 100%;
    flex: 1 1 auto;
    position: relative;
}

/* Map container - centers the map */
.home-map-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}

/* Riverhold map - scales to fit viewport width */
.riverhold-map {
    position: relative;
    width: 100vw;
    max-width: calc((100vh - 120px) * 0.667); /* maintain 1024:1536 ratio, account for header */
    aspect-ratio: 1024 / 1536;
}

.riverhold-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Building slots container - matches map size */
.building-slots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Individual building slot - uses pixel coordinates */
.building-slot {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.building-slot:hover {
    transform: scale(1.08);
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
}

.building-slot:active {
    transform: scale(0.95);
}

/* Building label - ribbon style with occult borders */
.building-label {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.55em;
    color: #c4a574;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    /* Transparent background - pseudo-elements handle colors */
    background: transparent;
    /* Ribbon shape with pointed ends */
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%);
    z-index: 1;
}

/* Occult metallic frame border */
.building-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%);
    z-index: -2;
}

/* Dark inner fill */
.building-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: radial-gradient(circle at top, #322014 0%, #19100a 50%, #120c07 100%);
    clip-path: polygon(7px 0%, calc(100% - 7px) 0%, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0% 50%);
    z-index: -1;
}

/* Encyclopedia grid for Archives */
.encyclopedia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
}

.encyclopedia-card {
    background: linear-gradient(135deg, #3d2a07 0%, #2a1a04 50%, #3d2a07 100%);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
    transition: transform 0.2s, filter 0.2s;
}

.encyclopedia-card:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.encyclopedia-card:active {
    transform: scale(0.95);
}

.encyclopedia-card .card-icon {
    font-size: 2em;
    margin-bottom: 8px;
}

.encyclopedia-card .card-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #c4a574;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.building-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Map footer spacer - adjusts for different screens */
.map-footer-spacer {
    height: 10px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
}

/* Logo clickable cursor */
.logo-section {
    cursor: pointer;
}

.logo-section:hover {
    opacity: 0.8;
}

/* Maintenance notice overlay */
.maintenance-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', serif;
    font-size: 2em;
    color: #daa520;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 10;
}

/* Play in Browser button - overlay at bottom of map in Telegram WebApp */
.browser-play-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    justify-content: center;
}

.browser-play-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #3d2a07 0%, #5a4a3a 50%, #3d2a07 100%);
    border: 2px solid #8a7a5a;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.browser-play-btn:hover {
    background: linear-gradient(135deg, #5a4a3a 0%, #7a6a4a 50%, #5a4a3a 100%);
    border-color: #daa520;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

.browser-play-btn:active {
    transform: translateY(0);
}

.browser-play-icon {
    font-size: 1.4em;
}

.browser-play-text {
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Desktop mode - wider layout matching map aspect ratio */
@media (min-width: 768px) {
    body {
        max-width: none;
        max-height: none;
    }

    .mobile-game {
        width: calc((100vh - 60px) * 0.667);
        max-width: calc((100vh - 60px) * 0.667);
        max-height: none;
    }

    .fantasy-frame-overlay {
        width: calc((100vh - 60px) * 0.667);
        max-width: calc((100vh - 60px) * 0.667);
        max-height: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .home-map-container {
        height: auto;
    }

    .riverhold-map {
        max-width: calc((100vh - 60px) * 0.667);
    }

    .frame-corner {
        width: 72px;
        height: 72px;
    }

    .frame-top {
        height: 12px;
        left: 72px;
        right: 72px;
    }

    .frame-bottom {
        height: 12px;
        left: 72px;
        right: 72px;
    }

    .frame-left {
        width: 12px;
        top: 72px;
        bottom: 72px;
    }

    .frame-right {
        width: 12px;
        top: 72px;
        bottom: 72px;
    }

    .game-header {
        padding: 15px 50px 5px 50px;
    }

    .browser-play-container {
        display: none !important;
    }
}

/* Building slot position adjustments */
#keepSlot {
    transform: translateY(-12px);
}
#keepSlot:hover {
    transform: translateY(-12px) scale(1.08);
}

#questboardSlot {
    transform: translateY(-22px);
}
#questboardSlot:hover {
    transform: translateY(-22px) scale(1.08);
}

#magetowerSlot {
    transform: translateX(15px);
}
#magetowerSlot:hover {
    transform: translateX(15px) scale(1.08);
}

/* Eldritch glow for buildings when action is available */
.building-slot.eldritch-glow {
    animation: eldritchPulse 2s ease-in-out infinite;
}

.building-slot.eldritch-glow img {
    filter: drop-shadow(0 0 8px #b54c07) drop-shadow(0 0 16px #9d7705);
}

@keyframes eldritchPulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(181, 76, 7, 0.6)) drop-shadow(0 0 12px rgba(157, 119, 5, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(181, 76, 7, 0.9)) drop-shadow(0 0 24px rgba(157, 119, 5, 0.7));
    }
}

/* ===== OCCULT PAGE POP-IN ANIMATION ===== */

/* Overlay for the zoom effect - positioned inside .game-screen */
.occult-page-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    pointer-events: none;
    overflow: hidden;
}

/* The expanding circle from click point */
.occult-zoom-circle {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181, 76, 7, 0.9) 0%, rgba(90, 40, 5, 0.8) 100%);
    box-shadow:
        0 0 20px rgba(181, 76, 7, 0.8),
        0 0 40px rgba(157, 119, 5, 0.6),
        inset 0 0 15px rgba(255, 200, 100, 0.3);
    animation: occultZoomExpand 0.35s ease-out forwards;
    transform-origin: center;
}

@keyframes occultZoomExpand {
    0% {
        transform: scale(0.3);
        opacity: 1;
    }
    60% {
        transform: scale(15);
        opacity: 0.8;
    }
    100% {
        transform: scale(35);
        opacity: 0;
    }
}

/* Page pop-in animation */
.occult-page.page-pop-in {
    animation: occultPagePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.15s;
    opacity: 0;
}

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

/* Page exit animation */
.occult-page.page-exiting {
    animation: occultPageExit 0.2s ease-in forwards;
}

@keyframes occultPageExit {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* ===== SACRIFICE MODAL ===== */
.occult-sacrifice-modal {
    position: relative;
    width: 90%;
    max-width: 380px;
    max-height: 90vh;
    overflow: hidden;
    clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0% calc(100% - 15px), 0% 15px);
    animation: occultPagePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sacrifice-altar-image {
    width: 100%;
    height: auto;
    display: block;
}

.sacrifice-content {
    background: linear-gradient(180deg, rgba(30, 15, 10, 0.95) 0%, rgba(15, 8, 5, 0.98) 100%);
    padding: 20px;
    border: 1px solid rgba(181, 76, 7, 0.4);
    border-top: none;
}

.sacrifice-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: #c9a227;
    text-align: center;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(181, 76, 7, 0.5);
}

.sacrifice-description {
    color: #b8a080;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    line-height: 1.5;
}

.sacrifice-description p {
    margin: 0 0 12px 0;
    text-align: center;
}

.sacrifice-details {
    background: rgba(0, 0, 0, 0.3);
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
    padding: 12px;
    margin: 12px 0;
}

.sacrifice-cost,
.sacrifice-reward {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(181, 76, 7, 0.2);
}

.sacrifice-cost:last-of-type,
.sacrifice-reward {
    border-bottom: none;
}

.sacrifice-label {
    color: #8a7a6a;
}

.sacrifice-cost .sacrifice-value {
    color: #e74c3c;
    font-weight: bold;
}

.sacrifice-reward .sacrifice-value {
    color: #c9a227;
    font-weight: bold;
}

.sacrifice-warning {
    color: #e74c3c;
    font-size: 0.85em;
    text-align: center;
    font-style: italic;
    margin-top: 10px !important;
}

.sacrifice-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 15px;
}

.sacrifice-buttons .game-btn {
    flex: 1;
    max-width: 140px;
}

.game-btn-inner.btn-sacrifice {
    background: radial-gradient(circle at top, #8b0000 0%, #4a0000 50%, #2a0000 100%);
    color: #ffc4c4;
}