/* Riverhold - Mobile Game Styles */

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

/* Restart Countdown Overlay */
.restart-countdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: restartFadeIn 0.3s ease-out;
}

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

.restart-countdown-modal {
    position: relative;
    text-align: center;
    padding: 40px 30px;
    max-width: 320px;
    background: transparent;
}

/* Occult frame - outer border gradient */
.restart-countdown-modal::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 frame - inner dark background */
.restart-countdown-modal::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: radial-gradient(circle at center, #1a0f05 0%, #0d0805 50%, #050302 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: -1;
}

.restart-countdown-content {
    position: relative;
    z-index: 1;
}

.restart-countdown-icon {
    font-size: 3em;
    margin-bottom: 15px;
    animation: hammerPulse 0.5s ease-in-out infinite;
}

@keyframes hammerPulse {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.restart-countdown-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}

.restart-countdown-number {
    font-family: 'Cinzel', serif;
    font-size: 5em;
    color: #ff6b35;
    font-weight: bold;
    margin: 20px 0;
    text-shadow: 0 0 30px rgba(255, 107, 53, 0.8), 0 0 60px rgba(255, 107, 53, 0.5);
    animation: countdownPulse 1s ease-in-out infinite;
}

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

.restart-countdown-text {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #b8a080;
    margin-top: 15px;
}

/* Level Up Overlay - Occult Theme */
.level-up-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-up-modal {
    position: relative;
    text-align: center;
    padding: 30px 25px;
    max-width: 300px;
    width: 90%;
    background: transparent;
}

/* Occult frame - outer border gradient */
.level-up-modal::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 frame - inner dark background */
.level-up-modal::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: radial-gradient(circle at center, #1a0f05 0%, #0d0805 50%, #050302 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: -1;
}

.level-up-content {
    position: relative;
    z-index: 1;
}

.level-up-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}

.level-up-level {
    font-family: 'Cinzel', serif;
    font-size: 3.5em;
    color: #ffd700;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
}

.level-up-unlocks {
    margin-bottom: 20px;
}

.level-up-unlocks-header {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    text-align: center;
}

.level-up-unlock {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #b8a080;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(90, 74, 58, 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);
}

.level-up-unlock-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.level-up-unlock-info {
    text-align: left;
}

.level-up-unlock-name {
    color: #daa520;
    font-weight: bold;
    margin-bottom: 2px;
}

.level-up-unlock-desc {
    font-size: 0.8em;
    color: #8a7a6a;
}

.level-up-buttons {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* ===== DEATH NOTIFICATION MODAL ===== */
.death-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 0, 0, 0.97);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.death-modal {
    position: relative;
    text-align: center;
    padding: 30px 25px;
    max-width: 320px;
    width: 90%;
    background: transparent;
}

/* Death modal frame - blood red gradient */
.death-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #4a2020 0%, #3d1010 25%, #2a0808 50%, #3d1010 75%, #4a2020 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;
}

/* Death modal inner dark background */
.death-modal::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: radial-gradient(circle at center, #1a0505 0%, #0d0303 50%, #050101 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: -1;
}

.death-content {
    position: relative;
    z-index: 1;
}

.death-icon {
    font-size: 4em;
    margin-bottom: 10px;
    filter: grayscale(50%);
}

.death-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8em;
    color: #8b0000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

.death-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
}

.death-losses {
    margin-bottom: 20px;
}

.death-loss-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #bf6f6f;
    margin-bottom: 10px;
    padding: 10px;
    background: rgba(139, 0, 0, 0.2);
    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);
}

.death-loss-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.death-message {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #8a6a6a;
    margin-bottom: 20px;
    line-height: 1.4;
    font-style: italic;
}

.death-deathwish {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #ff4444;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 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);
}

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

: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);
}

/* Global Dark Thin Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a #1a1a1a;
}

*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

*::-webkit-scrollbar-track {
    background: #1a1a1a;
}

*::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 2px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* 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%;
    height: 100dvh; /* Dynamic viewport height - excludes browser UI */
    margin: 0;
    padding: 0;
    background: linear-gradient(-45deg, #0a0506, #1a0f0a, #0d1015, #12080a, #0a100d);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

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

body {
    width: 100%;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height - excludes browser UI */
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Cinzel', serif;
    color: var(--text-light);
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

/* Full-screen mobile game layout */
.mobile-game {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 440px;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height - excludes browser UI */
    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);
}

/* Locked/uncaught creature entries */
.page.locked {
    cursor: not-allowed;
    filter: grayscale(100%) brightness(0.5);
    opacity: 0.6;
}

.page.locked:hover {
    transform: none;
}

.page.locked .volume-title {
    font-style: italic;
    color: #666;
}

.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;
}

/* Bestiary page spine with beast silhouette watermark */
.page-spine.bestiary-spine {
    position: relative;
}

.page-spine.bestiary-spine::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background-image: var(--beast-bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.page-spine.bestiary-spine .volume-number,
.page-spine.bestiary-spine .volume-title {
    position: relative;
    z-index: 1;
}

/* Items page spine with item silhouette watermark */
.page-spine.items-spine {
    position: relative;
}

.page-spine.items-spine::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background-image: var(--item-bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.page-spine.items-spine .volume-number,
.page-spine.items-spine .volume-title {
    position: relative;
    z-index: 1;
}

/* 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;
}

.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%;
    min-width: 400px;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    padding: 6px;
}

/* Header */
.game-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 5px 5px 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: 10100;
    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;
    width: 100%;
}

.header-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 400px;
    min-width: 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;
    flex-shrink: 0;
}

.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: hidden;
    flex: 1;
    min-width: 0;
    max-width: 220px;
}

.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: 100px;
    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;
    flex-shrink: 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;
    /* Hide scrollbar on mobile but allow scrolling */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

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

/* Desktop: remove overflow hidden that was blocking messages page scroll */
@media (min-width: 768px) {
    .game-content {
        overflow-y: auto;
    }
}



.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;
    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;
    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);
}

.vocation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    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;
}

/* 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;
}

/* 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 5px;
    background: none;
    border: none;
    margin-bottom: 0;
}

/* Buff glow on header stat items */
.stat-item.stat-buffed {
    animation: buffGlow 1.5s ease-in-out infinite;
}

.stat-item.stat-buffed > span {
    color: #ff9944;
    text-shadow: 0 0 6px rgba(255, 153, 68, 0.8), 0 0 12px rgba(255, 100, 20, 0.4);
}

/* HTML tooltip for attack/defense breakdown */
.stat-html-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 6, 2, 0.95);
    border: 1px solid rgba(90, 74, 58, 0.6);
    border-radius: 6px;
    padding: 8px 10px;
    z-index: 10002;
    white-space: nowrap;
    pointer-events: none;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: #b8a080;
}

.stat-item:hover .stat-html-tooltip,
.stat-item:active .stat-html-tooltip,
.stat-item.tooltip-active .stat-html-tooltip {
    display: block;
}

.stat-tip-title {
    color: #d4af37;
    font-weight: bold;
    margin-bottom: 4px;
    text-align: center;
}

.stat-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.stat-tip-buffed {
    color: #ff9944;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 140, 40, 0.6);
}

@keyframes buffGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 140, 40, 0.6)); }
    50% { filter: drop-shadow(0 0 8px rgba(255, 140, 40, 1.0)); }
}

/* Buffed stat rows in character combat breakdown */
.occult-stats-row.stat-row-buffed span {
    color: #ff9944;
    text-shadow: 0 0 5px rgba(255, 140, 40, 0.6);
}

/* BUFFED label in combat power header */
.buff-active-label {
    font-size: 0.65em;
    color: #ff9944;
    letter-spacing: 0.1em;
    animation: buffLabelPulse 2s ease-in-out infinite;
    margin-left: 6px;
}

@keyframes buffLabelPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1.0; text-shadow: 0 0 6px rgba(255, 140, 40, 0.8); }
}

/* Header buff icons row */
.header-buff-row {
    justify-content: center;
    gap: 6px;
    padding: 0 4px 2px;
}

.header-buff-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: buffIconPulse 2s ease-in-out infinite;
}

.header-buff-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(255, 140, 40, 0.8));
}

/* Buff icons row below combat power */
.buff-icons-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 4px;
    flex-wrap: wrap;
}

.buff-icon-item {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: buffIconPulse 2s ease-in-out infinite;
}

.buff-icon-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 0 3px rgba(255, 140, 40, 0.7));
}

@keyframes buffIconPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255, 140, 40, 0.5)); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.9)); }
}

.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 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;
        }

        .music-toggle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(30, 20, 10, 0.95);
            border: 2px solid #8a7a5a;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            position: fixed;
            bottom: 85px;
            left: 12px;
            z-index: 100;
            box-shadow: 0 3px 10px rgba(0,0,0,0.6);
        }

        .music-toggle:active {
            transform: scale(0.9);
            background: rgba(50, 40, 20, 0.95);
        }

        .messages-toggle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(30, 20, 10, 0.95);
            border: 2px solid #8a7a5a;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: fixed;
            bottom: 175px;
            left: 12px;
            z-index: 100;
            box-shadow: 0 3px 10px rgba(0,0,0,0.6);
        }

        .messages-toggle:active {
            transform: scale(0.9);
            background: rgba(50, 40, 20, 0.95);
        }

        .messages-toggle .log-notification-badge {
            position: absolute;
            top: -2px;
            right: -2px;
        }

        .browser-toggle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(30, 20, 10, 0.95);
            border: 2px solid #8a7a5a;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            position: fixed;
            bottom: 40px;
            left: 12px;
            z-index: 100;
            box-shadow: 0 3px 10px rgba(0,0,0,0.6);
        }

        .browser-toggle:active {
            transform: scale(0.9);
            background: rgba(50, 40, 20, 0.95);
        }

        .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: none;
            border: none;
            border-radius: 0;
            padding: 0;
            margin: 0 auto;
            max-width: 500px;
            width: 100%;
            position: relative;
            z-index: 10;
            backdrop-filter: none;
        }
        
        .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);
        }
        
        /* 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');
        }
        
        /* 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;
        }

        /* 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 {
            position: relative;
            padding: 3px;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            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);
        }

        /* Octagonal frame border */
        .quest-zone-card::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: -1;
        }

        /* Inner content with background image */
        .quest-zone-card-inner {
            padding: 20px;
            background-size: cover;
            background-position: center;
            background-repeat: 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);
        }

        .quest-zone-card:hover {
            transform: translateY(-2px);
        }

        .quest-zone-card:hover::before {
            background: linear-gradient(135deg, #7a6a4a 0%, #5d4a17 25%, #4a3a14 50%, #5d4a17 75%, #7a6a4a 100%);
        }

        /* Locked zone cards - higher level than player */
        .quest-zone-card.locked {
            cursor: not-allowed;
            filter: grayscale(80%) brightness(0.5);
            opacity: 0.7;
        }

        .quest-zone-card.locked:hover {
            transform: none;
        }

        .quest-zone-card.locked:hover::before {
            background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
        }

        .quest-zone-card.locked .zone-title {
            font-style: italic;
        }

        .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: 0px;
            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: 10px 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;
            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 {
            padding: 20px 0px;
            border-bottom: 2px solid rgba(139, 69, 19, 0.3);
        }
        
        .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: 85vh;
            display: flex;
            flex-direction: column;
            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 */
        }

        /* Purple spell modal variant */
        .beautiful-modal-content.spell-modal {
            background: radial-gradient(circle at top, #251832 0, #140a1a 45%, #0c0710 100%);
        }

        .beautiful-modal-content.spell-modal::before {
            background: linear-gradient(135deg, #4a3a5a 0%, #2d1a47 25%, #1a0a2a 50%, #2d1a47 75%, #4a3a5a 100%);
        }

        .beautiful-modal-content.spell-modal::after {
            background: radial-gradient(circle at top, #251832 0, #140a1a 45%, #0c0710 100%);
        }

        .beautiful-modal-content.spell-modal .modal-header {
            border-bottom-color: rgba(138, 106, 191, 0.3);
        }

        .beautiful-modal-content.spell-modal .modal-title {
            color: #b896e0;
        }

        @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;
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
        }

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

        .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;
            flex-shrink: 0;
        }

        .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/icons/headers/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);
        }

        .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/icons/headers/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/icons/headers/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;
        }

        /* ===== BESTIARY STYLES ===== */
        
        /* Bestiary Header */
        #bestiarySection .section-header {
            background-image: url('../images/icons/headers/bestiary_header.png');
            height: 140px;
            overflow: visible;
        }
        
        /* ===== HUNT STYLES ===== */
        
        /* Hunt Header */
        #huntSection .section-header {
            background-image: url('../images/icons/headers/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;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Cinzel', serif;
            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);
        }

        .vocation-card:hover {
            border-color: #ffd700;
        }

        .vocation-card.active-vocation {
            border-color: #32cd32;
            background: rgba(50, 205, 50, 0.1);
        }

        .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/icons/headers/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;
        }

        /* Stance Popup Modal Styles */
        .stance-popup-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            padding: 5px;
        }

        .stance-popup-card {
            position: relative;
            padding: 3px;
            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);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .stance-popup-card:hover {
            transform: scale(1.03);
            background: linear-gradient(135deg, #7a6a5a 0%, #5d4a17 25%, #4a3a14 50%, #5d4a17 75%, #7a6a5a 100%);
        }

        .stance-popup-card:active {
            transform: scale(0.98);
        }

        .stance-popup-card-inner {
            background: rgba(15, 10, 5, 0.95);
            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);
            padding: 5%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .stance-popup-icon {
            width: 100px;
            height: 100px;
            position: relative;
            padding: 2px;
            background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 50%, #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);
        }

        .stance-popup-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            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);
        }

        .stance-popup-name {
            color: #d4af37;
            font-family: 'Cinzel', serif;
            font-size: 0.95em;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            text-align: center;
        }

        /* Selected stance indicator - green border only */
        .stance-popup-card.selected .stance-popup-icon {
            background: linear-gradient(135deg, #4a7c4a 0%, #2a5a2a 50%, #4a7c4a 100%);
        }

        .stance-info-btn {
            width: 24px;
            height: 24px;
            vertical-align: middle;
            margin-left: 8px;
            cursor: pointer;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .stance-info-btn:hover {
            opacity: 1;
        }

        .stance-info-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .stance-info-item {
            padding: 10px;
            background: rgba(15, 10, 5, 0.6);
            border-left: 3px solid #d4af37;
            color: #b8a080;
            line-height: 1.4;
        }

        .stance-info-item strong {
            color: #d4af37;
        }

        /* ===== QTE STYLES ===== */
        
        /* QTE Header */
        #qteSection .section-header {
            background-image: url('../images/icons/headers/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;
        }

        /* ===== ENEMY INFO / FOES STYLES ===== */
        
        /* Enemy Info Header */
        #enemyInfoSection .section-header {
            background-image: url('../images/icons/headers/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: 30px 20px;
            color: #e8c49a;
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            position: relative;
            z-index: 1;
            margin: 20px;
            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);
        }

        .forge-error::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, #6a3a3a 0%, #4a2020 25%, #3a1515 50%, #4a2020 75%, #6a3a3a 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;
        }

        .forge-error::after {
            content: '';
            position: absolute;
            top: 3px; left: 3px; right: 3px; bottom: 3px;
            background: rgba(25, 10, 10, 0.95);
            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;
        }

/* Fantasy Frame - Main viewport container */
.fantasy-frame {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 440px;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height - excludes browser UI */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Mobile: full screen, no aspect ratio constraint */
@media (max-width: 499px) {
    .game-header {
        padding: 5px 10px;
        width: 100%;
    }

    .fantasy-frame {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        aspect-ratio: unset;
    }
}

/* Landscape orientation warning - FULL SCREEN to cover everything */
/* Note: body has transform, so fixed elements are relative to body, not viewport */
/* Center within body (which is centered in viewport) then use 100vw/vh to cover full screen */
.landscape-warning {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, #1a0f0a 0%, #0a0506 100%);
    z-index: 3000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.landscape-warning-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: rotatePhone 2s ease-in-out infinite;
}

@keyframes rotatePhone {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-20deg); }
    75% { transform: rotate(20deg); }
}

.landscape-warning-text {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: #c4a574;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.landscape-warning-subtext {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: #8a7a5a;
    margin-top: 10px;
}

@media screen and (orientation: landscape) and (max-height: 500px) {
    .landscape-warning {
        display: flex;
    }
}

/* Frame always matches game-screen size - no landscape expansion */

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

.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: 200;
    pointer-events: none;
}

.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;
}

/* ===== VOCATION PEEK CHARACTERS ===== */
.vocation-peek {
    position: fixed;
    height: 400px;
    z-index: 2001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    display: none; /* Hidden on mobile by default */
}

/* Only show on desktop/larger screens */
@media screen and (min-width: 800px) {
    .vocation-peek {
        display: block;
    }
}

.vocation-peek.visible {
    opacity: 1;
}

/* Vertical sliding animation - slow ambient movement */
.vocation-peek.slide-up {
    animation: vocationSlideUp 60s linear forwards;
}

.vocation-peek.slide-down {
    animation: vocationSlideDown 60s linear forwards;
}

@keyframes vocationSlideUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-150px); }
}

@keyframes vocationSlideDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(150px); }
}

/* Position at left edge of centered game (max-width 440px) */
/* Image right edge aligns with game left edge, showing ~50px overhang */
.vocation-peek.left {
    left: calc(50% - 220px - 130px);
}

/* Position at right edge of centered game */
/* Image left edge aligns with game right edge, showing ~50px overhang */
.vocation-peek.right {
    right: calc(50% - 220px - 130px);
}

/* Dwarf positioning */
.vocation-peek.left.vocation-dwarf {
    left: calc(50% - 322px - 130px);
}

.vocation-peek.right.vocation-dwarf {
    right: calc(50% - 322px - 130px);
}

/* Sorceress positioning */
.vocation-peek.left.vocation-sorceress {
    left: calc(50% - 234px - 130px);
}

.vocation-peek.right.vocation-sorceress {
    right: calc(50% - 234px - 130px);
}

/* Elf positioning */
.vocation-peek.left.vocation-elf {
    left: calc(50% - 282px - 130px);
}

.vocation-peek.right.vocation-elf {
    right: calc(50% - 282px - 130px);
}

/* Knight positioning */
.vocation-peek.left.vocation-knight {
    left: calc(50% - 267px - 130px);
}

.vocation-peek.right.vocation-knight {
    right: calc(50% - 267px - 130px);
}

/* Shadehunter positioning */
.vocation-peek.left.vocation-shadehunter {
    left: calc(50% - 324px - 130px);
}

.vocation-peek.right.vocation-shadehunter {
    right: calc(50% - 324px - 130px);
}

/* Doppler positioning */
.vocation-peek.left.vocation-doppler {
    left: calc(50% - 326px - 130px);
}

.vocation-peek.right.vocation-doppler {
    right: calc(50% - 326px - 130px);
}

/* Bard positioning */
.vocation-peek.left.vocation-bard {
    left: calc(50% - 288px - 130px);
}

.vocation-peek.right.vocation-bard {
    right: calc(50% - 288px - 130px);
}

/* Priest positioning */
.vocation-peek.left.vocation-priest {
    left: calc(50% - 291px - 130px);
}

.vocation-peek.right.vocation-priest {
    right: calc(50% - 291px - 130px);
}

.vocation-peek.right img {
    transform: scaleX(-1);
}

.vocation-peek img {
    width: auto;
    height: 100%;
    display: block;
}

/* Desktop: peek positions - game half-width = (100vh - 90px) / 3 */
@media (min-width: 768px) {
    .vocation-peek.left {
        left: calc(50% - (100vh - 90px) / 3 - 86px);
    }
    .vocation-peek.right {
        right: calc(50% - (100vh - 90px) / 3 - 86px);
    }
    .vocation-peek.left.vocation-dwarf {
        left: calc(50% - (100vh - 90px) / 3 - 186px);
    }
    .vocation-peek.right.vocation-dwarf {
        right: calc(50% - (100vh - 90px) / 3 - 186px);
    }
    .vocation-peek.left.vocation-sorceress {
        left: calc(50% - (100vh - 90px) / 3 - 98px);
    }
    .vocation-peek.right.vocation-sorceress {
        right: calc(50% - (100vh - 90px) / 3 - 98px);
    }
    .vocation-peek.left.vocation-elf {
        left: calc(50% - (100vh - 90px) / 3 - 146px);
    }
    .vocation-peek.right.vocation-elf {
        right: calc(50% - (100vh - 90px) / 3 - 146px);
    }
    .vocation-peek.left.vocation-knight {
        left: calc(50% - (100vh - 90px) / 3 - 131px);
    }
    .vocation-peek.right.vocation-knight {
        right: calc(50% - (100vh - 90px) / 3 - 131px);
    }
    .vocation-peek.left.vocation-shadehunter {
        left: calc(50% - (100vh - 90px) / 3 - 188px);
    }
    .vocation-peek.right.vocation-shadehunter {
        right: calc(50% - (100vh - 90px) / 3 - 188px);
    }
    .vocation-peek.left.vocation-doppler {
        left: calc(50% - (100vh - 90px) / 3 - 190px);
    }
    .vocation-peek.right.vocation-doppler {
        right: calc(50% - (100vh - 90px) / 3 - 190px);
    }
    .vocation-peek.left.vocation-bard {
        left: calc(50% - (100vh - 90px) / 3 - 152px);
    }
    .vocation-peek.right.vocation-bard {
        right: calc(50% - (100vh - 90px) / 3 - 152px);
    }
    .vocation-peek.left.vocation-priest {
        left: calc(50% - (100vh - 90px) / 3 - 155px);
    }
    .vocation-peek.right.vocation-priest {
        right: calc(50% - (100vh - 90px) / 3 - 155px);
    }
}

/* ===== 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;
}

/* ===== OCCULT MAGIC PAGE ===== */

/* Magic page container with dark arcane background */
.magic-page {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px 10px 18px;
    border: 1px solid rgb(61 42 87 / 90%);
    box-shadow:
        0 0 0 1px rgba(10, 6, 15, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #201428 0, #120a18 45%, #0a0510 100%);
    font-family: 'Cormorant Garamond', 'Cinzel', serif;
    text-shadow: 0px 0px 1px #000000;
}

/* Magic info box (eldritch power info) */
.magic-info-box {
    position: relative;
    margin: 0 5px 10px 5px;
    padding: 12px 14px;
    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);
}

.magic-info-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #5a3a6a 0%, #3d1a47 25%, #2a0a34 50%, #3d1a47 75%, #5a3a6a 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;
}

.magic-info-box::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: radial-gradient(ellipse at center, rgba(25, 15, 30, 0.95) 0%, rgba(12, 8, 18, 0.98) 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;
}

.magic-info-box strong {
    color: #d8b4fe;
    font-family: 'Cinzel', serif;
}

.magic-info-box {
    color: #a090b0;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    line-height: 1.5;
}

.spells-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 5px;
}

/* Spell level divider - fading line with star */
.spell-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    gap: 12px;
}

.spell-divider::before,
.spell-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to var(--dir), transparent, #a090b0 50%, #c8b8d8 100%);
}

.spell-divider::before {
    --dir: right;
}

.spell-divider::after {
    --dir: left;
}

/* Occult spell card with frame */
.spell-card {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    overflow: hidden;
}

/* Spell background image container */
.spell-image {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Magic spell frame overlay */
.spell-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../images/backgrounds/magicspell-frame.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 5;
}

/* Removed .spell-card:active - only cast button should have push animation */

/* Dark gradient overlay for text readability */
.spell-card::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    /* Clip corners to match octagonal frame - larger cuts at bottom */
    clip-path: polygon(12px 0%, calc(100% - 12px) 0%, 100% 12px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0% calc(100% - 40px), 0% 12px);
}

/* Spell Level Badge - occult parchment style */
.spell-level-badge {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('../images/icons/headers/header-container.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #3a2714;
    font-family: 'Cinzel', serif;
    font-size: 0.5em;
    font-weight: 600;
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 10;
    white-space: nowrap;
}

/* Spell Info Badge - bottom right (octagonal occult style) */
.spell-info-badge {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    background: transparent;
    transition: transform 0.2s ease;
    box-sizing: border-box;
}

.spell-info-badge::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #5a4a8a 0%, #3a2a5a 50%, #2a1a3a 100%);
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
    pointer-events: none;
    transition: background 0.2s ease;
}

.spell-info-badge::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: rgba(15, 10, 20, 0.9);
    clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
    pointer-events: none;
}

.spell-info-badge img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

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

.spell-info-badge:hover::before {
    background: linear-gradient(135deg, #7a6a9a 0%, #5a4a7a 50%, #3a2a5a 100%);
}

/* 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;
}

/* Spell card content area at bottom */
.spell-content {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 6px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* Spell name */
.spell-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #e8d4f8;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.95);
    line-height: 1.2;
}

/* Spell description */
.spell-description {
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    color: #b0a0c0;
    text-align: center;
    line-height: 1.2;
    padding: 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Occult game-btn style cast button */
.cast-start-button {
    display: inline-block;
    padding: 2px;
    background: linear-gradient(135deg, #7a5a8a 0%, #5a3a6a 50%, #3a2a4a 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);
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.cast-start-button span,
.cast-start-button {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Inner button appearance */
.cast-btn-inner {
    display: block;
    padding: 4px 10px;
    background: radial-gradient(circle at top, #5a3a6a 0%, #2a1a34 50%, #1a0a24 100%);
    color: #d8b4fe;
    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);
}

.cast-start-button:hover {
    background: linear-gradient(135deg, #8a6a9a 0%, #6a4a7a 50%, #4a3a5a 100%);
}

.cast-start-button:active {
    transform: scale(0.96);
}

/* Disabled/Cooldown state for cast button */
.cast-start-button.disabled,
.cast-start-button:disabled {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 50%, #2a2a2a 100%);
    cursor: not-allowed;
    opacity: 0.7;
}

.cast-start-button.disabled .cast-btn-inner,
.cast-start-button:disabled .cast-btn-inner {
    background: radial-gradient(circle at top, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #888;
}

.cast-start-button.disabled:hover,
.cast-start-button:disabled:hover {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 50%, #2a2a2a 100%);
}

/* Spell card on cooldown state */
.spell-card.on-cooldown {
    opacity: 0.6;
}

.spell-card.on-cooldown::after {
    content: 'COOLDOWN';
    position: absolute;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: rgba(255, 100, 100, 0.9);
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.2em;
    pointer-events: none;
    z-index: 5;
}

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

/* ===== 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: 90%;
    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: 10px 0px;
}

/* Occult Navigation Button - with double-layer frame */
.occult-nav-button {
    position: relative;
    width: 60px;
    height: 60px;
    background: transparent;
    cursor: pointer;
    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);
    transition: transform 0.2s, filter 0.2s;
}

.occult-nav-button::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #6a5a7a 0%, #4a3a5a 25%, #2a1a3a 50%, #4a3a5a 75%, #6a5a7a 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-nav-button::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: radial-gradient(ellipse at center, rgba(30, 25, 35, 0.95) 0%, rgba(18, 15, 22, 0.98) 100%);
    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-nav-button:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

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

.occult-nav-button img {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.occult-nav-button.nav-prev img {
    transform: translate(-50%, -50%) scaleX(1);
}

.occult-nav-button.nav-next img {
    transform: translate(-50%, -50%) scaleX(-1);
}

/* Legacy encyclopedia-nav-button - keep for backwards compatibility */
.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: 2px;
    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-top: 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: 25%;
    left: 50%;
    transform: translateX(-50%);
}

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

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

/* New secondary armor slot positions */
.portrait-amulet {
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
}

.portrait-gloves {
    top: 45%;
    left: 5%;
}

.portrait-arms {
    top: 45%;
    right: 5%;
    left: auto;
}

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

.portrait-relic {
    top: 20%;
    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;
}

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

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

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

#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-subfilters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 8px 5px;
    background: rgba(30, 20, 10, 0.6);
    border-radius: 8px;
    margin: 0 5px 12px 5px;
}

.occult-filter-btn {
    width: 90px;
    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;
    margin-bottom: 20px;
}

/* Pagination Controls */
.occult-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
    padding: 10px;
}

.occult-pagination .game-btn {
    width: 50px;
    height: 40px;
    min-width: 50px;
}

.occult-pagination .game-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.occult-page-info {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #c4a574;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Main page container */
.occult-page {
    width: 100%;
    max-width: 500px;
    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;
}

/* Market theme - yellow/green elven forest */
.occult-page.market-theme {
    border: 1px solid rgb(42 61 30 / 90%);
    box-shadow:
        0 0 0 1px rgba(6, 10, 4, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #1a2814 0, #0f180a 45%, #080c05 100%);
}

/* Smithy theme - gray/brown dwarven forge */
.occult-page.smithy-theme {
    border: 1px solid rgb(50 45 40 / 90%);
    box-shadow:
        0 0 0 1px rgba(8, 7, 6, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #282420 0, #161412 45%, #0c0a08 100%);
}

/* Pets theme - warm amber/brown */
.occult-page.pets-theme {
    border: 1px solid rgb(61 50 30 / 90%);
    box-shadow:
        0 0 0 1px rgba(10, 8, 4, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #2a2010 0, #181208 45%, #0e0a04 100%);
}

/* Armory theme - steel blue/gray */
.occult-page.armory-theme {
    border: 1px solid rgb(40 50 60 / 90%);
    box-shadow:
        0 0 0 1px rgba(5, 7, 10, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #1a2028 0, #10141a 45%, #080a0e 100%);
}

/* Storage theme - warm brown/tan */
.occult-page.storage-theme {
    border: 1px solid rgb(55 45 35 / 90%);
    box-shadow:
        0 0 0 1px rgba(9, 7, 5, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #28201a 0, #161210 45%, #0c0906 100%);
}

/* Workshop/Vocations theme - copper/bronze */
.occult-page.workshop-theme {
    border: 1px solid rgb(70 50 35 / 90%);
    box-shadow:
        0 0 0 1px rgba(12, 8, 5, 0.9),
        0 12px 30px rgba(0, 0, 0, 0.9);
    background:
        radial-gradient(circle at top, #2a1e18 0, #18100c 45%, #0e0806 100%);
}

/* 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;
}

/* ===== OCCULT VOCATIONS SYSTEM (Workshop) ===== */

/* Vocation card with background image */
.occult-vocation-card {
    position: relative;
    margin: 10px 5px;
    padding: 3px;
    background: linear-gradient(135deg, #6a5040 0%, #4a3020 50%, #2a1810 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);
    overflow: hidden;
}

.occult-vocation-inner {
    position: relative;
    padding: 15px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    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);
    min-height: 200px;
}

/* Vocation backgrounds */
.occult-vocation-inner.adventurer { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_adventurer.jpg'); }
.occult-vocation-inner.arcanist { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_arcanist.jpg'); }
.occult-vocation-inner.hunter { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_hunter.jpg'); }
.occult-vocation-inner.clown { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_clown.jpg'); }
.occult-vocation-inner.inquisitor { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_inquisitor.jpg'); }
.occult-vocation-inner.merchant { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_merchant.jpg'); }
.occult-vocation-inner.artisan { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_artisan.jpg'); }
.occult-vocation-inner.rogue { background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('../images/backgrounds/vocations_rogue.jpg'); }

/* Active vocation glow */
.occult-vocation-card.active {
    background: linear-gradient(135deg, #7a6a30 0%, #5a4a10 50%, #3a3000 100%);
    box-shadow: 0 0 15px rgba(218, 165, 32, 0.5);
}

/* Vocation header with name and ID badge */
.occult-vocation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.occult-vocation-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    font-weight: 700;
    color: #daa520;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.occult-vocation-id {
    background: rgba(0, 0, 0, 0.7);
    color: #c4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    padding: 4px 10px;
    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-vocation-description {
    background: rgba(0, 0, 0, 0.75);
    padding: 10px;
    margin: 10px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9em;
    color: #e8dcc8;
    line-height: 1.4;
    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-vocation-upgrade-cost {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    margin: 8px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.occult-vocation-modifiers {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.occult-vocation-modifier {
    color: #c4a574;
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.85em;
    margin: 5px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.occult-vocation-modifier-sub {
    margin-left: 15px;
    color: #a89070;
}

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

/* Vocation buttons container */
.occult-vocation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Occult vocation button */
.occult-vocation-btn {
    display: inline-block;
    padding: 3px;
    background: linear-gradient(135deg, #8a7a5a 0%, #6a5a3a 50%, #4a3a2a 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);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.occult-vocation-btn span {
    display: block;
    background: radial-gradient(circle at top, #695740 0%, #2a1f14 50%, #1a0f04 100%);
    color: #c4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 16px;
    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);
}

.occult-vocation-btn:hover span {
    background: radial-gradient(circle at top, #8a7a60 0%, #4a3f24 50%, #2a1f14 100%);
    color: #daa520;
}

/* Slot button variations */
.occult-vocation-btn.slot-selected {
    background: linear-gradient(135deg, #7a6a30 0%, #5a4a10 50%, #3a3000 100%);
}

.occult-vocation-btn.slot-selected span {
    background: radial-gradient(circle at top, #6a5a20 0%, #4a3a10 50%, #2a2000 100%);
    color: #daa520;
    box-shadow: inset 0 0 10px rgba(218, 165, 32, 0.3);
}

/* Disabled vocation button (max level) */
.occult-vocation-btn.disabled,
.occult-vocation-btn:disabled {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 50%, #2a2a2a 100%);
    cursor: not-allowed;
    opacity: 0.7;
}

.occult-vocation-btn.disabled span,
.occult-vocation-btn:disabled span {
    background: radial-gradient(circle at top, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #888;
}

.occult-vocation-btn.disabled:hover span,
.occult-vocation-btn:disabled:hover span {
    background: radial-gradient(circle at top, #3a3a3a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #888;
}

/* Max level indicator */
.occult-vocation-max-level {
    text-align: center;
    margin: 8px 0;
    padding: 4px 8px;
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(218, 165, 32, 0.5);
}

/* Active badge */
.occult-vocation-active-badge {
    text-align: center;
    margin-top: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #6a5a20 0%, #4a3a10 100%);
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    font-weight: 700;
    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);
}

/* Vocation slots header (Level 20+) */
.occult-vocation-slots-header {
    position: relative;
    background: transparent;
    padding: 15px;
    margin-bottom: 15px;
    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-vocation-slots-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #8a6a4a 0%, #5a4020 25%, #3d2a10 50%, #5a4020 75%, #8a6a4a 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-vocation-slots-header::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: radial-gradient(ellipse at center, rgba(30, 20, 12, 0.95) 0%, rgba(15, 10, 6, 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-vocation-slot-info {
    color: #c4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    text-align: center;
    margin-bottom: 10px;
}

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

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

/* Confirm button - occult gold style (NOT green) */
.occult-vocation-confirm-btn {
    display: block;
    margin: 0 auto;
    padding: 3px;
    background: linear-gradient(135deg, #8a7a40 0%, #6a5a20 50%, #4a3a10 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);
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
}

.occult-vocation-confirm-btn span {
    display: block;
    background: radial-gradient(circle at top, #5a4a20 0%, #3a2a10 50%, #2a1a05 100%);
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 24px;
    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);
}

.occult-vocation-confirm-btn:hover span {
    background: radial-gradient(circle at top, #7a6a30 0%, #5a4a20 50%, #3a2a10 100%);
    color: #ffd700;
}

/* ===== FORGE CARD SYSTEM (Smithy & Market) ===== */

/* Market theme - yellow/green elven forest */
.occult-page.market-theme {
    background: radial-gradient(circle at top, #1a2814 0%, #0f180a 50%, #080c05 100%);
}

/* Smithy theme - gray/brown dwarven forge */
.occult-page.smithy-theme {
    background: radial-gradient(circle at top, #282420 0%, #161412 50%, #0c0a08 100%);
}

/* Grid: always 2 columns */
.forge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 5px;
}

/* Individual forge card */
.forge-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: url('../images/backgrounds/dwarvensmithy-frame.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.forge-card:active {
    transform: scale(0.98);
}

.forge-card.selected {
    filter: drop-shadow(0 0 8px rgba(218, 165, 32, 0.8));
}

/* Market variant uses elven frame */
.forge-card.market-card {
    background-image: url('../images/backgrounds/elvenmarket-frame.png');
}

/* Slot badge (top-left) - Primary/Secondary/Armor */
.forge-slot-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #c0c0c0;
    font-family: 'Cinzel', serif;
    font-size: 0.55em;
    font-weight: 600;
    padding: 3px 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #5a5a5a;
    clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
}

.forge-slot-badge.primary {
    background: linear-gradient(135deg, #8b4513 0%, #5a2d0a 50%, #3a1a05 100%);
    color: #ffd700;
    border-color: #cd853f;
}

.forge-slot-badge.secondary {
    background: linear-gradient(135deg, #4a6a4a 0%, #2a4a2a 50%, #1a3a1a 100%);
    color: #90ee90;
    border-color: #6b8e6b;
}

/* Type badge (top-right) - Weapon/Armor class */
.forge-type-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #3a3020 0%, #2a2015 50%, #1a100a 100%);
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.55em;
    font-weight: 600;
    padding: 3px 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid #5a4a3a;
    clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
}

/* Item image container */
.forge-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
}

.forge-image img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0px 0px 10px rgba(128, 128, 128, 0.5));
}

/* Item info section at bottom */
.forge-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    gap: 3px;
}

.forge-name {
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    font-weight: 600;
    color: #f0e6d3;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
    line-height: 1.2;
}

.forge-type {
    font-family: 'Cinzel', serif;
    font-size: 0.55em;
    color: #8a7a6a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forge-price {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #ffd700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}

/* Stat icons row in forge cards */
.forge-stats {
    display: flex;
    gap: 1px;
    margin: 4px 0;
    align-items: center;
}

.forge-stat-icon {
    position: relative;
    display: inline-block;
}

.forge-stat-icon img {
    height: 20px;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5));
    cursor: pointer;
}

/* Craft/Buy button - occult style wrapper */
.forge-btn {
    display: inline-block;
    padding: 3px;
    background: linear-gradient(135deg, #8a7a5a 0%, #6a5a3a 50%, #4a3a2a 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);
    cursor: pointer;
    margin-top: 5px;
    transition: all 0.2s ease;
    /* Reset button defaults */
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.forge-btn span {
    display: block;
    background: radial-gradient(circle at top, #695740 0%, #2a1f14 50%, #1a0f04 100%);
    color: #c4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    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);
}

.forge-btn:hover span, .forge-btn:active span {
    background: radial-gradient(circle at top, #8a7a60 0%, #4a3f24 50%, #2a1f14 100%);
    color: #ffd700;
}

/* Sold out button styling */
.forge-btn.forge-btn-sold {
    cursor: not-allowed;
    opacity: 0.7;
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 50%, #2a2a2a 100%);
}

.forge-btn.forge-btn-sold span {
    background: radial-gradient(circle at top, #3a3a3a 0%, #1a1a1a 50%, #0a0a0a 100%);
    color: #888;
}

/* Sold out card styling */
.forge-card.sold-out {
    opacity: 0.6;
}

.forge-card.sold-out .forge-image img {
    filter: grayscale(70%);
}

/* Info button - bottom-right inside frame */
.forge-info-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #d4af37;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.forge-info-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

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

/* Countdown timer for forge pages - Occult styled */
.forge-countdown {
    margin: 10px;
    padding: 3px;
    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
    );
}

/* Forge countdown inner content */
.forge-countdown-inner {
    background: rgba(15, 10, 5, 0.95);
    padding: 12px 15px;
    text-align: center;
    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
    );
}

.forge-countdown-text {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #b8a080;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forge-countdown-timer {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    font-weight: 700;
    color: #daa520;
    text-shadow: 0 0 8px rgba(218, 165, 32, 0.5);
    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;
}

/* Swipe action layers - behind the card content */
.occult-card-swipe-container {
    position: relative;
    overflow: hidden;
}

.occult-swipe-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
}

.occult-swipe-action {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.occult-swipe-action.equip {
    left: 0;
    width: 100px;
    background: linear-gradient(90deg, #2a5a2a 0%, #3a7a3a 70%, transparent 100%);
    color: #90ee90;
    text-shadow: 0 0 5px rgba(0, 100, 0, 0.8);
}

.occult-swipe-action.sell {
    right: 0;
    width: 100px;
    background: linear-gradient(270deg, #5a2a2a 0%, #8a3a3a 70%, transparent 100%);
    color: #ff9090;
    text-shadow: 0 0 5px rgba(100, 0, 0, 0.8);
}

.occult-swipe-action.visible {
    opacity: 1;
}

.occult-swipe-action.triggered {
    animation: swipeActionPulse 0.3s ease-out;
}

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

/* Swipeable content layer */
.occult-swipeable {
    position: relative;
    transition: transform 0.15s ease-out;
    touch-action: pan-y pinch-zoom;
    z-index: 1;
}

.occult-swipeable.swiping {
    transition: none;
}

/* 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,
.occult-modal-image.common img {
    filter: drop-shadow(0px 0px 10px #CCCCCCCC);
}

.occult-icon-large.odd,
.occult-icon-small.odd,
.occult-modal-image.odd img {
    filter: drop-shadow(0px 0px 10px #306f32cc);
}

.occult-icon-large.strange,
.occult-icon-small.strange,
.occult-modal-image.strange img {
    filter: drop-shadow(0px 0px 10px #242f6bcc);
}

.occult-icon-large.eldritch,
.occult-icon-small.eldritch,
.occult-modal-image.eldritch img {
    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: 30px;
}

.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;
}

/* Storage consumable stat icons row - CLOSED card (centered) */
.occult-stat-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    justify-content: center;
}

.occult-stat-icons .forge-stat-icon {
    width: 22px;
    height: 22px;
}

.occult-stat-icons .forge-stat-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Consumable details value */
.occult-details-value {
    font-size: 0.9em;
    color: #d4af37;
    margin-top: 6px;
    font-family: 'Cinzel', serif;
}

/* Effects section in expanded card - icon + text per line */
.occult-effects-list {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(218, 165, 32, 0.3);
}

.occult-effect-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.occult-effect-item img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}

.occult-effect-item span {
    color: #e0d0b0;
}

/* 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;
}

/* Pet ID badge - top left corner */
.occult-id-badge {
    position: absolute;
    top: 8px;
    left: 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    color: #8a7a5a;
    letter-spacing: 0.05em;
    z-index: 5;
}

/* Selected badge - centered at top, same line as level */
.occult-selected-center {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: #4ade80;
    font-size: 0.7em;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 5;
}

/* Selected text in details section (under Damage/Resist) */
.occult-details-selected {
    color: #4ade80;
    font-size: 0.85em;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 6px;
    text-align: center;
}

/* Expanded occult panel */
.occult-details {
    position: relative;
    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;
    color: #daa520;
}

.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);
    align-self: auto;
}

.occult-details-main .occult-equipped-badge {
    margin-top: 8px;
}

/* Auction badge - orange/amber theme */
.occult-auction-badge {
    display: inline-block;
    background: radial-gradient(circle at top, #7a4a2a 0%, #5a3a1a 50%, #3a2010 100%);
    color: #f59e0b;
    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);
    align-self: auto;
}

/* Auction state in collapsed card */
.occult-state.auction {
    color: #f59e0b;
}

/* Auction notice message */
.occult-auction-notice {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.occult-auction-notice span {
    color: #f59e0b;
    font-size: 0.85em;
    font-family: 'Cinzel', serif;
}

/* Dim the card when item is on auction */
.occult-card.on-auction .occult-summary {
    opacity: 0.75;
}

.occult-card.on-auction .occult-icon-small {
    filter: grayscale(30%);
}

.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;
}

/* Full width button modifier */
.game-btn.game-btn-full {
    width: 100%;
}

/* 75% width button modifier */
.game-btn.game-btn-75 {
    width: 75%;
}

/* 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;
}

/* Delete/Danger button (red frame and inner) */
.game-btn.btn-delete {
    background: linear-gradient(135deg, #5a2a2a 0%, #3d1a1a 50%, #2a0a0a 100%);
}

.game-btn.btn-delete .game-btn-inner {
    background: radial-gradient(circle at top, #8b2020 0%, #4a1010 50%, #2a0505 100%);
    color: #ffaaaa;
}

/* Delete button hover */
.game-btn.btn-delete:hover {
    background: linear-gradient(135deg, #6a3a3a 0%, #4d2a2a 50%, #3a1a1a 100%);
    transform: translateY(-1px);
}

.game-btn.btn-delete:hover .game-btn-inner {
    background: radial-gradient(circle at top, #a03030 0%, #5a2020 50%, #3a1515 100%);
    color: #ffcccc;
}

/* Delete button active */
.game-btn.btn-delete:active {
    transform: translateY(1px);
}

.game-btn.btn-delete:active .game-btn-inner {
    background: radial-gradient(circle at top, #701818 0%, #3a0808 50%, #1a0202 100%);
    color: #ff8888;
}

/* Button container with separator line (for delete section) */
.btn-delete-container {
    padding: 15px 0;
    margin-top: 20px;
    border-top: 1px solid rgba(139, 90, 43, 0.3);
    display: flex;
    justify-content: center;
}

/* 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;
}

/* Pet count display */
.occult-pet-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin: 10px 0;
    background: rgba(0, 0, 0, 0.4);
    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);
    font-family: 'Cinzel', serif;
}

.occult-pet-count-label {
    color: #8a7a5a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85em;
}

.occult-pet-count-value {
    color: #daa520;
    font-size: 1.1em;
    font-weight: bold;
}

.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: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    padding: 5%;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.occult-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px auto;
    background: transparent;
    border: none;
    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::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;
}

.occult-modal::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    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;
}

.occult-modal-header {
    position: relative;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 10px;
    text-align: center;
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 2px solid #5a4a3a;
}

.occult-modal-header img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
    z-index: 0;
    padding-top: 10px;
}

.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: 400px;
    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;
    padding: 10px;
}

.occult-modal-behavior {
    text-align: center;
    font-style: italic;
    color: #b8a080;
    font-size: 0.9em;
    margin-bottom: 15px;
}

/* Occult Details Image - for expanded auction cards */
.occult-details-image {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    margin: 0 auto 10px;
    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-details-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(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-details-image::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(15, 10, 5, 0.85);
    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-details-image.common::before { background: linear-gradient(135deg, #5a5a5a 0%, #6b6b6b 25%, #4a4a4a 50%, #6b6b6b 75%, #5a5a5a 100%); }
.occult-details-image.odd::before { background: linear-gradient(135deg, #3a5a3a 0%, #4a7c4a 25%, #2a4a2a 50%, #4a7c4a 75%, #3a5a3a 100%); }
.occult-details-image.strange::before { background: linear-gradient(135deg, #3a4a6a 0%, #4a6a9c 25%, #2a3a5a 50%, #4a6a9c 75%, #3a4a6a 100%); }
.occult-details-image.eldritch::before { background: linear-gradient(135deg, #7a4a2a 0%, #9c5a2a 25%, #5a3a1a 50%, #9c5a2a 75%, #7a4a2a 100%); }

.occult-details-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    padding: 5px;
}

/* 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 {
    filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(0.9);
}

.occult-combat-stat.resist .occult-combat-icon {
    filter: sepia(1) saturate(2) hue-rotate(180deg) brightness(1.2);
}

.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);
    color: #daa520;
}

.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;
    gap: 15px;
    border-top: 1px solid #3a2a1a;
}

.occult-modal-bonus {
    color: #4ade80;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    margin-top: 5px;
}

/* ========== ENCOUNTER MODAL SYSTEM ========== */
.encounter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.encounter-portrait {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    z-index: 1;
}

.encounter-portrait img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.8));
}

.encounter-dialogue-box {
    position: relative;
    width: 95%;
    max-width: 420px;
    margin-bottom: 20px;
    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);
    z-index: 2;
}

.encounter-dialogue-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(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;
}

.encounter-dialogue-box::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(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;
}

.encounter-npc-name {
    padding: 15px 20px 10px;
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid #3d2a07;
}

.encounter-dialogue-text {
    padding: 15px 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: #c4a574;
    line-height: 1.6;
    font-style: italic;
}

.encounter-choices {
    padding: 10px 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.encounter-choice-btn {
    position: relative;
    padding: 4px;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 50%, #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);
    cursor: pointer;
    transition: all 0.2s ease;
}

.encounter-choice-btn:active {
    transform: scale(0.98);
}

.encounter-choice-inner {
    padding: 12px 20px;
    background: radial-gradient(circle at top, #2a1f14 0%, #1a0f08 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);
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #c4a574;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.encounter-choice-btn:hover .encounter-choice-inner {
    background: radial-gradient(circle at top, #3a2f24 0%, #2a1f18 100%);
    color: #daa520;
}

/* Encounter outcome overlay - centered version */
.encounter-outcome-overlay {
    justify-content: center !important;
}

/* Encounter outcome modal */
.encounter-outcome {
    padding: 20px;
    text-align: center;
}

.encounter-outcome-type {
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 15px;
}

.encounter-outcome-type.positive {
    color: #6fbf6f;
}

.encounter-outcome-type.negative {
    color: #bf6f6f;
}

.encounter-outcome-type.neutral {
    color: #c4a574;
}

.encounter-outcome-text {
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: #b8a080;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
}

.encounter-rewards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.encounter-reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
}

.encounter-reward-item.gain {
    color: #6fbf6f;
}

.encounter-reward-item.loss {
    color: #bf6f6f;
}

.encounter-reward-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.encounter-close-btn {
    margin-top: 15px;
}

/* Encounter outcome in success modal */
.encounter-outcome-content {
    text-align: center;
}

.encounter-result-text {
    font-style: italic;
    color: #c4a574;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 1em;
}

.encounter-result-text strong {
    font-style: normal;
    color: #daa520;
}

.encounter-rewards-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.encounter-rewards-row .encounter-reward-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    font-weight: bold;
}

.encounter-rewards-row .encounter-reward-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ========== ENCOUNTER OUTCOME FLASH OVERLAYS ========== */
.outcome-flash-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.outcome-flash-overlay.active {
    opacity: 1;
}

/* Positive outcome - green flash */
.outcome-flash-overlay.outcome-positive {
    background: radial-gradient(circle at center, rgba(50, 205, 50, 0.4) 0%, rgba(34, 139, 34, 0.6) 50%, rgba(0, 100, 0, 0.3) 100%);
}

/* Negative outcome - red blood-like flash */
.outcome-flash-overlay.outcome-negative {
    background: radial-gradient(circle at center, rgba(139, 0, 0, 0.5) 0%, rgba(178, 34, 34, 0.6) 30%, rgba(100, 0, 0, 0.4) 70%, rgba(50, 0, 0, 0.3) 100%);
}

/* Neutral outcome - white/grey flash */
.outcome-flash-overlay.outcome-neutral {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 200, 0.4) 50%, rgba(100, 100, 100, 0.2) 100%);
}

/* Icon container */
.outcome-flash-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    animation: iconPulse 0.6s ease-out;
}

.outcome-flash-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

/* Positive icon - green glow */
.outcome-positive .outcome-flash-icon {
    background: radial-gradient(circle, rgba(50, 205, 50, 0.5) 0%, rgba(34, 139, 34, 0.3) 100%);
    box-shadow: 0 0 40px rgba(50, 205, 50, 0.8), 0 0 80px rgba(50, 205, 50, 0.4);
}

.outcome-positive .outcome-flash-icon img {
    filter: drop-shadow(0 0 15px rgba(50, 255, 50, 1)) brightness(1.2);
}

/* Negative icon - red glow */
.outcome-negative .outcome-flash-icon {
    background: radial-gradient(circle, rgba(139, 0, 0, 0.5) 0%, rgba(100, 0, 0, 0.3) 100%);
    box-shadow: 0 0 40px rgba(178, 34, 34, 0.8), 0 0 80px rgba(139, 0, 0, 0.4);
}

.outcome-negative .outcome-flash-icon img {
    filter: drop-shadow(0 0 15px rgba(255, 50, 50, 1)) brightness(1.1);
}

/* Neutral icon - white glow */
.outcome-neutral .outcome-flash-icon {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 200, 0.2) 100%);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5), 0 0 80px rgba(200, 200, 200, 0.3);
}

.outcome-neutral .outcome-flash-icon img {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)) brightness(1.1);
}

@keyframes iconPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== SPELL TARGET MODAL ========== */
.spell-target-overlay {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    padding: 20px;
    padding-bottom: 80px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spell-target-modal {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    background: transparent;
    border: none;
    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);
}

.spell-target-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #4a3a5a 0%, #2d1a47 25%, #1a0a2a 50%, #2d1a47 75%, #4a3a5a 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;
}

.spell-target-modal::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: radial-gradient(circle at top, #251832 0, #140a1a 45%, #0c0710 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;
}

.spell-target-body {
    padding: 20px;
}

.spell-target-section {
    text-align: center;
}

.spell-target-label {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #c4a574;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.spell-target-input {
    width: 100%;
    padding: 12px 15px;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #daa520;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #4a3a5a;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    text-align: center;
}

.spell-target-input:focus {
    border-color: #8a6abf;
    box-shadow: 0 0 10px rgba(138, 106, 191, 0.3);
}

.spell-target-input::placeholder {
    color: #6a5a7a;
}

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

.spell-target-divider {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #6a5a7a;
    margin: 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.spell-target-footer {
    padding: 15px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.game-btn-wide {
    width: 180px;
}

/* Player Search Autocomplete */
.spell-search-container {
    position: relative;
    width: 100%;
}

.player-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(20, 10, 26, 0.98);
    border: 2px solid #4a3a5a;
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 100;
}

.player-search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid rgba(74, 58, 90, 0.5);
    transition: background 0.2s ease;
}

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

.player-search-item:hover {
    background: rgba(138, 106, 191, 0.3);
}

.player-search-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: #daa520;
}

.player-search-level {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #8a6abf;
}

.player-search-empty {
    padding: 15px;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #6a5a7a;
    font-style: italic;
}

/* ===================================
   PETTING HEARTS ANIMATION
   =================================== */
.petting-hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 20000;
    overflow: hidden;
}

.petting-xp-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', serif;
    font-size: 2.5em;
    font-weight: bold;
    color: #daa520;
    text-shadow:
        0 0 10px rgba(218, 165, 32, 0.8),
        0 0 20px rgba(218, 165, 32, 0.6),
        0 0 30px rgba(218, 165, 32, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    animation: xpPulse 0.6s ease-out forwards, xpFadeOut 2.5s ease-in forwards;
}

.petting-heart {
    position: absolute;
    bottom: 20%;
    color: #daa520;
    text-shadow:
        0 0 8px rgba(218, 165, 32, 0.9),
        0 0 16px rgba(218, 165, 32, 0.6);
    animation: heartFloat 2.5s ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(218, 165, 32, 0.8));
}

@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.5) rotate(0deg);
    }
    20% {
        transform: translateY(-50px) scale(1) rotate(-10deg);
    }
    40% {
        transform: translateY(-150px) scale(1.1) rotate(10deg);
    }
    60% {
        transform: translateY(-250px) scale(1) rotate(-5deg);
    }
    80% {
        opacity: 0.8;
        transform: translateY(-350px) scale(0.9) rotate(5deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-450px) scale(0.7) rotate(0deg);
    }
}

@keyframes xpPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

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

/* ===================================
   HOME PAGE - RIVERHOLD MAP (Occult Style)
   =================================== */

/* Override content-section for home - always visible as background */
#homeSection.content-section {
    display: block !important;
    max-width: none;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Hide home section when another page is active */
#homeSection.content-section.home-hidden {
    display: none !important;
}

/* Non-home content sections - appear above map */
.content-section:not(#homeSection) {
    position: relative;
    z-index: 100;
    overflow-y: visible;
    flex: 1 1 auto;
    width: 100%;
}

/* Override game-content for home page - no scroll, fits screen */
.game-content.home-bg {
    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 - fills game content */
.home-map-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Riverhold map wrapper - fills container, background extends as needed */
.riverhold-map {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Background image fills width, height scales proportionally */
    /* On tall screens more of the 3072px image shows as filler */
    background-image: url('/static/images/riverhold/riverhold.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    transition: filter 0.3s ease;
}

/* Day mode - uses separate brightened map image */
.riverhold-map.day-mode {
    background-image: url('/static/images/riverhold/riverhold-day.png');
}

/* Day/Night mode toggle button - stacked: browser(40) -> music(85) -> day/night(130) -> chat(175) */
.map-mode-toggle {
    position: fixed;
    bottom: 130px;
    left: 12px;
    width: 40px;
    height: 40px;
    background: rgba(30, 20, 10, 0.95);
    border: 2px solid #8a7a5a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

.map-mode-toggle:hover {
    background: rgba(50, 35, 20, 0.9);
    border-color: #7a6a5a;
    transform: scale(1.05);
}

.map-mode-toggle:active {
    transform: scale(0.95);
}

.map-mode-toggle .mode-icon {
    font-size: 20px;
    line-height: 1;
}

/* Building slots container - maintains 1024:1536 aspect ratio based on WIDTH */
/* This layer and map playable area stay perfectly aligned */
.building-slots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Height calculated from width to maintain 1024:1536 ratio */
    /* padding-bottom trick: 1536/1024 = 1.5 = 150% of width */
    height: 0;
    padding-bottom: 150%; /* Creates height based on width */
    pointer-events: none;
    overflow: visible;
}

/* Individual building slot - uses pixel coordinates */
.building-slot {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    overflow: visible;
}

.building-slot:hover {
    transform: scale(1.08);
    filter: brightness(1.2) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
    overflow: visible;
}

.building-slot:active {
    transform: scale(0.95);
    filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    overflow: visible;
}

/* Building label - ribbon style with occult borders */
.building-label {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 18px;
    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 - 10px for more text clearance */
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 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(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 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(9px 0%, calc(100% - 9px) 0%, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0% 50%);
    z-index: -1;
}

/* Day mode building labels - inverted colors (light background, dark text) */
.riverhold-map.day-mode .building-label {
    color: #2a1a04;
}

.riverhold-map.day-mode .building-label::before {
    background: linear-gradient(135deg, #d4c4a4 0%, #c4a574 25%, #b8a060 50%, #c4a574 75%, #d4c4a4 100%);
}

.riverhold-map.day-mode .building-label::after {
    background: radial-gradient(circle at top, #f5e8d0 0%, #e8d8b8 50%, #dcc8a0 100%);
}

/* ===== OCCULT CHARACTER PAGE SYSTEM ===== */

/* Quest map timer overlay - occult frame */
.quest-map-timer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.55em;
    color: #d4a574;
    background: transparent;
    white-space: nowrap;
    display: none;
    z-index: 10;
    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 frame border (outer gradient) */
.quest-map-timer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #8a7a5a 0%, #6a5a3a 25%, #4a3a2a 50%, #6a5a3a 75%, #8a7a5a 100%);
    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);
    z-index: -2;
}

/* Occult frame inner background */
.quest-map-timer::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: rgba(15, 10, 5, 0.95);
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
    z-index: -1;
}

.quest-map-timer.active {
    display: block;
}

/* Quest map notification (ready/failed indicator) */
.quest-map-notification {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: none;
    z-index: 10;
    animation: questNotificationPulse 1.5s ease-in-out infinite;
}

.quest-map-notification.ready {
    display: block;
    background: radial-gradient(circle at 30% 30%, #d4a574 0%, #8b5a2b 60%, #5a3a1a 100%);
    border: 2px solid #d4a574;
    box-shadow: 0 0 8px rgba(212, 165, 116, 0.6);
}

.quest-map-notification.failed {
    display: block;
    background: radial-gradient(circle at 30% 30%, #c48f8f 0%, #8b2b2b 60%, #5a1a1a 100%);
    border: 2px solid #c48f8f;
    box-shadow: 0 0 8px rgba(196, 143, 143, 0.6);
}

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

/* Hunter Lodge pulse when on quest (green/odd glow) */
.building-slot.on-quest img {
    animation: oddPulse 2s ease-in-out infinite;
}

@keyframes oddPulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(50, 205, 50, 0.6)) drop-shadow(0 0 10px rgba(34, 139, 34, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(50, 205, 50, 0.9)) drop-shadow(0 0 18px rgba(34, 139, 34, 0.6));
    }
}

/* Log notification badge (new log indicator) - same style as quest badge */
.log-notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: none;
    z-index: 15;
    background: radial-gradient(circle at 30% 30%, #d4a574 0%, #8b5a2b 60%, #5a3a1a 100%);
    border: 2px solid #d4a574;
    box-shadow: 0 0 8px rgba(212, 165, 116, 0.6);
    animation: questNotificationPulse 1.5s ease-in-out infinite;
}

.log-notification-badge.active {
    display: block;
}

/* Badge on building slot - position adjusted */
.building-slot .log-notification-badge {
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
}

/* Badge on hunter tabs */
.hunter-tab {
    position: relative;
}

.hunter-tab .log-notification-badge {
    top: 5px;
    right: 15px;
    width: 12px;
    height: 12px;
}

/* Player Messages Icon - lower left corner of Riverhold map */
.player-messages-icon {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    z-index: 100;
    cursor: pointer;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #3a2a1a 0%, #1a0f05 100%);
    border: 2px solid #8b5a2b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(139, 90, 43, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.player-messages-icon:active {
    transform: scale(0.95);
}

.player-messages-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(1.2) sepia(0.3);
}

/* Badge on player messages icon */
.player-messages-icon .log-notification-badge {
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
}

/* When there's an active chat, show avatar instead of icon */
.player-messages-icon.has-chat img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

/* ========== PLAYER MESSAGES / CONVERSATIONS STYLES ========== */

/* Empty state for messages */
.player-messages-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.messages-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.messages-empty-text {
    color: #b8a080;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Conversations list */
.conversations-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}

.conversation-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-bottom: 8px;
    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);
}

.conversation-item::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;
}

.conversation-item::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(20, 14, 8, 0.95);
    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;
}

.conversation-item:active::after {
    background: rgba(40, 28, 15, 0.95);
}

.conversation-item.has-unread::before {
    background: linear-gradient(135deg, #d4a574 0%, #8b5a2b 25%, #5a3a1a 50%, #8b5a2b 75%, #d4a574 100%);
}

.conversation-item.has-unread::after {
    background: rgba(35, 25, 12, 0.95);
}

.conversation-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.conversation-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #5a4a3a;
}

.conversation-item.has-unread .conversation-avatar img {
    border-color: #d4a574;
}

.conversation-info {
    flex: 1;
    min-width: 0;
}

.conversation-name {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #daa520;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time {
    font-size: 0.75em;
    color: #8a7a5a;
}

.conversation-unread {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: radial-gradient(circle at 30% 30%, #d4a574 0%, #8b5a2b 60%, #5a3a1a 100%);
    border: 2px solid #d4a574;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: bold;
    color: #fff;
}

.conversation-arrow {
    font-size: 1.5em;
    color: #5a4a3a;
    margin-left: 8px;
}

/* Player Chat Page */
.player-chat-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 95px) !important;
    max-height: calc(100vh - 95px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: fixed;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    z-index: 50;
}

.player-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: linear-gradient(135deg, #2a1a0a 0%, #1a0f05 100%);
    border-bottom: 2px solid #5a4a3a;
    cursor: pointer;
    flex-shrink: 0;
}

.chat-back-btn {
    font-size: 1.8em;
    color: #d4a574;
    padding: 0 10px;
    cursor: pointer;
}

.chat-partner-avatar {
    width: 40px;
    height: 40px;
}

.chat-partner-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #8b5a2b;
}

.chat-partner-name {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #daa520;
    flex: 1;
}

/* Player Chat Container */
.player-chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.player-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.player-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px;
}

.chat-empty-text {
    color: #8a7a5a;
    font-family: 'Cinzel', serif;
    text-align: center;
    font-size: 0.9em;
    line-height: 1.5;
}

/* Player Chat Input */
.player-chat-input-container {
    display: flex;
    gap: 8px;
    padding: 10px 15px 30px 15px;
    background: rgba(20, 15, 8, 0.95);
    border-top: 1px solid #3a2a1a;
    flex-shrink: 0;
}

.player-chat-input {
    flex: 1;
    padding: 10px 15px;
    background: rgba(30, 22, 12, 0.9);
    border: 1px solid #5a4a3a;
    border-radius: 20px;
    color: #e0d0c0;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    outline: none;
}

.player-chat-input:focus {
    border-color: #8b5a2b;
}

.player-chat-input::placeholder {
    color: #6a5a4a;
}

.player-chat-send-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #8b5a2b 0%, #5a3a1a 100%);
    border: 2px solid #d4a574;
    border-radius: 50%;
    color: #f0e0c0;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.player-chat-send-btn:active {
    transform: scale(0.95);
}

/* New Message Button Container */
.new-message-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    margin-bottom: 5px;
}

/* Player Search Styles */
.player-search-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.player-search-input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(20, 15, 10, 0.9);
    border: 2px solid #5a4a3a;
    border-radius: 8px;
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s ease;
}

.player-search-input:focus {
    border-color: #8b5a2b;
}

.player-search-input::placeholder {
    color: #6a5a4a;
}

.player-search-results {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-hint,
.search-loading,
.search-no-results,
.search-error {
    text-align: center;
    color: #8a7a5a;
    font-size: 0.9em;
    padding: 20px;
}

.search-error {
    color: #c75050;
}

.player-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(30, 20, 10, 0.8);
    border: 1px solid rgba(139, 90, 43, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.player-search-result:active {
    background: rgba(50, 35, 20, 0.9);
    border-color: #8b5a2b;
}

.search-result-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 2px;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    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);
}

.search-result-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    border: none;
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: #daa520;
    margin-bottom: 2px;
}

.search-result-level {
    font-size: 0.75em;
    color: #8a7a5a;
}

/* New Message Modal - Brown Theme (matches messages page) */
.new-message-overlay.spell-target-overlay {
    background: rgba(0, 0, 0, 0.85);
}

.new-message-overlay .spell-target-modal {
    width: 90%;
    max-width: 400px;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    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);
}

/* Override purple border with brown */
.new-message-overlay .spell-target-modal::before {
    background: linear-gradient(135deg, #6a4a2a 0%, #4a3018 25%, #2a1a08 50%, #4a3018 75%, #6a4a2a 100%) !important;
}

/* Override purple body with brown */
.new-message-overlay .spell-target-modal::after {
    background: radial-gradient(circle at top, #2a1a0a 0%, #1a0f05 45%, #0f0803 100%) !important;
}

.new-message-overlay .occult-modal-header {
    background: transparent;
    border-bottom: none;
}

.new-message-overlay .spell-target-body {
    padding: 20px;
    flex: 1;
}

.new-message-overlay .spell-target-label {
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    margin-bottom: 12px;
}

/* Search input container with occult frame */
.new-message-overlay .spell-search-container {
    position: relative;
    padding: 3px;
    background: linear-gradient(135deg, #6a4a2a 0%, #4a3018 25%, #2a1a08 50%, #4a3018 75%, #6a4a2a 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);
    margin-bottom: 15px;
}

.new-message-overlay .spell-target-input {
    width: 100%;
    background: rgba(20, 15, 10, 0.95);
    border: none;
    border-radius: 0;
    color: #e0d0c0;
    font-family: 'Cinzel', serif;
    padding: 12px 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);
    box-sizing: border-box;
}

.new-message-overlay .spell-target-input:focus {
    outline: none;
}

.new-message-overlay .spell-target-input::placeholder {
    color: #6a5a4a;
}

.new-message-overlay .player-search-results {
    position: relative;
    display: block;
    margin-top: 15px;
    max-height: 200px;
    overflow-y: auto;
    background: transparent;
    border: none;
    padding: 0;
}

/* Player result cards with occult frame */
.new-message-overlay .player-search-result {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 10px;
    padding: 3px;
    background: linear-gradient(135deg, #5a4a3a 0%, #3a2a1a 50%, #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);
}

.new-message-overlay .player-search-result > * {
    position: relative;
    z-index: 1;
}

.new-message-overlay .player-search-result .search-result-info,
.new-message-overlay .player-search-result .search-result-avatar {
    position: relative;
    z-index: 1;
}

.new-message-overlay .player-search-result-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(30, 20, 10, 0.95);
    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);
}

.new-message-overlay .player-search-result:active {
    background: linear-gradient(135deg, #8b5a2b 0%, #5a3a1a 50%, #8b5a2b 100%);
}

.new-message-overlay .search-result-avatar img {
    border-radius: 0;
    border: none;
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
}

.new-message-overlay .spell-target-footer {
    background: transparent;
    border-top: none;
    padding: 15px;
    margin-top: auto;
}

/* Character page theme - warm amber/blood colors */
.occult-page.character-theme {
    background: radial-gradient(circle at top, #201816 0%, #140e0c 45%, #0a0706 100%);
}

/* Occult stats section - framed container */
.occult-stats-section {
    position: relative;
    background: transparent;
    padding: 15px;
    margin-top: 15px;
    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-stats-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #6a4a3a 0%, #4a2a1a 25%, #2a1a0a 50%, #4a2a1a 75%, #6a4a3a 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-stats-section::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: radial-gradient(ellipse at center, rgba(25, 18, 14, 0.95) 0%, rgba(14, 10, 8, 0.98) 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-stats-section-title {
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.occult-stats-section-content {
    position: relative;
    z-index: 1;
}

/* Character header in occult style */
.occult-char-header {
    text-align: center;
    padding: 15px 10px;
    position: relative;
}

.occult-char-name {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.occult-char-description {
    color: #c4a574;
    font-style: italic;
    font-size: 0.85em;
    margin-bottom: 10px;
}

.occult-char-info {
    color: #b8a080;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    margin-bottom: 4px;
}

.occult-char-money {
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    margin-top: 8px;
}

/* Avatar container in occult style */
.occult-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 0;
}

.occult-avatar-frame {
    position: relative;
    width: 256px;
    height: 256px;
    padding: 4px;
    background: linear-gradient(135deg, #8a6a4a 0%, #5a3a2a 50%, #3a2a1a 100%);
    clip-path: polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
}

.occult-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px);
}

.occult-avatar-cost {
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    margin-top: 8px;
}

.occult-avatar-cost-free {
    color: #7aaf7a;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    margin-top: 8px;
}

/* Vocation badge */
.occult-vocation-badge {
    color: #d4af37;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 10px 0;
    text-align: center;
}

/* Resource bars in occult style */
.occult-resource-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 0 10px;
}

.occult-resource-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.occult-resource-bar {
    flex: 1;
    height: 18px;
    background: rgba(20, 15, 10, 0.9);
    border: 1px solid rgba(106, 80, 50, 0.5);
    clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
    position: relative;
    overflow: hidden;
}

.occult-resource-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.occult-resource-fill.hp-fill {
    background: linear-gradient(to right, #8b2020, #cc3030, #8b2020);
}

.occult-resource-fill.sanity-fill {
    background: linear-gradient(to right, #2a4a6a, #4080b0, #2a4a6a);
}

.occult-resource-fill.eldritch-fill {
    background: linear-gradient(to right, #4a2a6a, #8040b0, #4a2a6a);
}

.occult-resource-text {
    color: #c4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    min-width: 70px;
    text-align: right;
}

/* Stats divider grid in occult style */
.occult-stats-grid {
    display: flex;
    gap: 10px;
}

.occult-stats-column {
    flex: 1;
}

.occult-stats-column-left {
    text-align: right;
}

.occult-stats-column-right {
    text-align: left;
}

.occult-stats-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    color: #b8a080;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
}

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

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

.occult-stats-row img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.occult-stats-divider {
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(212, 165, 116, 0.6), transparent);
    margin: 0 5px;
}

/* Perk/buff items in occult style */
.occult-perk-item {
    margin: 8px 0;
    padding: 8px;
    background: rgba(30, 20, 15, 0.5);
    border-left: 2px solid #6a4a3a;
}

.occult-perk-name {
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    margin-bottom: 4px;
}

.occult-perk-desc {
    color: #9a8a7a;
    font-size: 0.75em;
}

/* Pet display in occult style */
.occult-pet-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 10px;
}

.occult-pet-frame {
    position: relative;
    width: 256px;
    height: 256px;
    padding: 4px;
    clip-path: polygon(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
}

.occult-pet-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(16px 0%, calc(100% - 16px) 0%, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0% calc(100% - 16px), 0% 16px);
    z-index: -2;
}

.occult-pet-frame::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: rgba(15, 10, 5, 0.9);
    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px);
    z-index: -1;
}

.occult-pet-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0% calc(100% - 14px), 0% 14px);
}

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

.occult-pet-name {
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
}

.occult-pet-level {
    color: #9a8a7a;
    font-size: 0.8em;
}

/* Artifact grid in occult style */
.occult-artifacts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.occult-artifact-item {
    color: #c4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    padding: 4px 8px;
    background: rgba(40, 30, 20, 0.5);
    clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
}

/* Quest status text */
.occult-quest-text {
    color: #b8a080;
    font-size: 0.85em;
    line-height: 1.5;
}

/* Heptagon container styling for occult */
.occult-heptagon-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* ===== OCCULT ARCHIVES SYSTEM ===== */

/* Archives page theme - sepia/parchment colors */
.occult-page.archives-theme {
    background: radial-gradient(circle at top, #1a1510 0%, #140f0a 45%, #0d0a07 100%);
}

/* Encyclopedia grid for Archives */
.encyclopedia-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 15px;
}

/* Occult Archive Card - with double-layer frame */
.occult-archive-card {
    position: relative;
    background: transparent;
    padding: 3px;
    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;
}

.occult-archive-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #8a7a5a 0%, #5a4a3a 25%, #3a2a1a 50%, #5a4a3a 75%, #8a7a5a 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-archive-card::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: radial-gradient(ellipse at center, rgba(25, 20, 15, 0.95) 0%, rgba(15, 12, 8, 0.98) 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-archive-card:hover {
    transform: scale(1.03);
    filter: brightness(1.15);
}

.occult-archive-card:active {
    transform: scale(0.97);
}

.occult-archive-card-inner {
    position: relative;
    z-index: 1;
    padding: 20px 15px;
    text-align: center;
}

.occult-archive-card .card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.occult-archive-card .card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.occult-archive-card .card-icon-emoji {
    font-size: 2.2em;
}

.occult-archive-card .card-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #c4a0d4;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Legacy encyclopedia-card - keep for backwards compatibility */
.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;
}

/* ===== CONSUMABLES ENCYCLOPEDIA GRID ===== */
.consumables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
}

/* Occult Consumable Card */
.occult-consumable-card {
    padding: 3px;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 25%, #2a1a04 50%, #3d2a07 75%, #5a4a3a 100%);
    cursor: pointer;
    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
    );
    transition: transform 0.2s, filter 0.2s;
}

.occult-consumable-card:hover {
    transform: scale(1.03);
    filter: brightness(1.15);
}

.occult-consumable-card:active {
    transform: scale(0.97);
}

.occult-consumable-card-inner {
    background: rgba(15, 10, 5, 0.95);
    padding: 10px 8px;
    text-align: center;
    height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    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-consumable-card-inner img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    margin-bottom: 8px;
}

.occult-consumable-name {
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

/* Navigation container for archives */
.occult-nav-container {
    display: flex;
    justify-content: center;
    padding: 15px 10px;
    gap: 10px;
}

/* Artifact Modal Styling */
.artifact-modal-id {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #8a7a5a;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.artifact-modal-description {
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: #c4a574;
    text-align: center;
    line-height: 1.6;
    padding: 0 10px;
}

/* Consumable Details Modal */
.consumable-details {
    text-align: center;
}

.consumable-details-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
    margin: 20px auto;
    display: block;
}

.consumable-details-description {
    font-style: italic;
    color: #a0826d;
    margin: 15px 0;
}

.consumable-details-value {
    color: #d4af37;
    font-size: 18px;
    margin: 10px 0;
}

.consumable-effects {
    margin-top: 15px;
}

.consumable-effects-title {
    color: #d4af37;
    margin-bottom: 10px;
}

.consumable-effects-list {
    text-align: left;
    color: #a0826d;
    padding-left: 25px;
    margin: 0;
}

.consumable-effects-list li {
    margin-bottom: 5px;
}

/* Occult Detail Container for Perks/Items */
.occult-detail-container {
    padding: 20px 15px;
}

.occult-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    background: rgba(30, 20, 10, 0.6);
    border-left: 3px solid #5a4a3a;
}

.occult-detail-label {
    color: #b8a080;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

.occult-detail-value {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

.occult-detail-section {
    padding: 15px;
    margin-bottom: 10px;
    background: rgba(30, 20, 10, 0.6);
    border-left: 3px solid #5a4a3a;
}

.occult-detail-heading {
    color: #daa520;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.occult-detail-text {
    color: #b8a080;
    line-height: 1.6;
    font-size: 0.95em;
}

.occult-muted {
    color: #6a5a4a;
    font-size: 0.85em;
}

/* Rarity colors for detail values */
.rarity-common { color: #9a9a9a; }
.rarity-odd { color: #4a9a4a; }
.rarity-strange { color: #4a7a9a; }
.rarity-eldritch { color: #9a5a2a; }

/* Perk Details Modal */
.perk-details {
    padding: 10px 0;
}

.perk-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(90, 74, 58, 0.5);
}

.perk-details-label {
    color: #b8a080;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-size: 0.85em;
}

.perk-details-value {
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

.perk-details-section {
    padding: 15px 0;
}

.perk-details-heading {
    color: #daa520;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.perk-details-text {
    color: #b8a080;
    line-height: 1.6;
    font-size: 0.95em;
}

/* Item Details Modal */
.item-details {
    padding: 10px 0;
    text-align: center;
}

.item-details-image {
    width: 180px;
    height: 180px;
    margin: 15px auto;
}

.item-details-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-details-description {
    font-style: italic;
    color: #a0826d;
    margin: 15px 0;
    padding: 0 10px;
}

.item-details-section {
    padding: 15px 0;
    border-top: 1px solid rgba(90, 74, 58, 0.5);
    text-align: left;
}

.item-details-heading {
    color: #daa520;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-bottom: 10px;
}

.item-details-list {
    color: #b8a080;
    padding-left: 25px;
    margin: 0;
}

.item-details-list li {
    margin-bottom: 5px;
}

.item-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(90, 74, 58, 0.5);
}

.item-details-label {
    color: #b8a080;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    font-size: 0.85em;
}

.item-details-value {
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

.building-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== OCCULT QUEST SYSTEM ===== */

/* Quest page theme - adventurous brown/gold tones */
.occult-page.quest-theme {
    background: radial-gradient(circle at top, #2a1f14 0%, #1a1208 45%, #0f0a04 100%);
}

/* Occult Quest Card - with double-layer frame */
.occult-quest-card {
    position: relative;
    background: transparent;
    padding: 3px;
    margin-bottom: 15px;
    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);
    overflow: hidden;
    border: 0px;
}

.occult-quest-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #6a5a3a 0%, #4a3a1a 25%, #2a1a04 50%, #4a3a1a 75%, #6a5a3a 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-quest-card::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px; right: 3px; bottom: 3px;
    background: radial-gradient(ellipse at center, rgba(20, 15, 10, 0.95) 0%, rgba(10, 8, 4, 0.98) 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: -1;
}

.occult-quest-card-inner {
    position: relative;
    z-index: 1;
    padding: 15px;
    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);
}

/* Quest card with background image */
.occult-quest-card.with-bg .occult-quest-card-inner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.occult-quest-card.with-bg .occult-quest-card-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 0;
    pointer-events: none;
}

.occult-quest-card.with-bg .occult-quest-content {
    position: relative;
    z-index: 1;
}

/* Quest difficulty badges */
.occult-quest-difficulty {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    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);
    z-index: 2;
}

.occult-quest-difficulty.easy {
    background: linear-gradient(135deg, #3a5a3a 0%, #2a4a2a 100%);
    color: #8fc48f;
}

.occult-quest-difficulty.normal {
    background: linear-gradient(135deg, #5a5a3a 0%, #4a4a2a 100%);
    color: #c4c48f;
}

.occult-quest-difficulty.hard {
    background: linear-gradient(135deg, #5a3a3a 0%, #4a2a2a 100%);
    color: #c48f8f;
}

.occult-quest-difficulty.locked {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    color: #8a8a8a;
}

/* Locked quest card - greyed out */
.occult-quest-card.locked {
    opacity: 0.6;
    filter: grayscale(60%);
}

.occult-quest-card.locked .occult-quest-card-inner::before {
    background: linear-gradient(to bottom, rgba(30, 30, 30, 0.4) 0%, rgba(20, 20, 20, 0.85) 100%);
}

.occult-quest-card.locked .occult-quest-title {
    color: #8a8a8a;
}

.occult-quest-card.locked .occult-quest-level {
    color: #6a6a6a;
}

.occult-quest-card.locked .occult-quest-description {
    color: #7a7a7a;
}

/* Anomaly quest card - eldritch pulsing effect on the contract itself */
.occult-quest-card.has-anomaly {
    animation: eldritchContractPulse 2s ease-in-out infinite;
}

.occult-quest-card.has-anomaly::before {
    background: linear-gradient(135deg, #5a3a7a 0%, #3d2a5a 25%, #2a1a4a 50%, #3d2a5a 75%, #5a3a7a 100%);
}

@keyframes eldritchContractPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(138, 43, 226, 0.5), 0 0 20px rgba(181, 76, 7, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(138, 43, 226, 0.8), 0 0 35px rgba(181, 76, 7, 0.5), 0 0 50px rgba(186, 85, 211, 0.3);
    }
}

.anomaly-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #e0b0ff;
    background: linear-gradient(135deg, #6a3a9a 0%, #4a2a6a 100%);
    border-radius: 4px;
    z-index: 10;
    animation: anomalyPulse 2s ease-in-out infinite;
}

@keyframes anomalyPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(138, 43, 226, 0.5); }
    50% { box-shadow: 0 0 15px rgba(138, 43, 226, 0.8); }
}

.anomaly-info {
    background: rgba(90, 40, 120, 0.3);
    border: 1px solid rgba(138, 43, 226, 0.4);
    border-radius: 6px;
    padding: 8px;
    margin: 8px 0;
}

.anomaly-name {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #e0b0ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.anomaly-effects {
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    color: #c9a0e0;
    line-height: 1.4;
}

/* Disabled quest button */
.occult-quest-btn.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.occult-quest-btn.disabled .occult-quest-btn-inner {
    background: radial-gradient(circle at top, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #6a6a6a;
}

/* Quest title and info */
.occult-quest-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #d4a574;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.occult-quest-level {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #9a8a7a;
    margin-bottom: 10px;
}

.occult-quest-description {
    font-size: 0.85em;
    color: #b8a080;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* Quest progress stats - single container */
.occult-quest-progress {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(30, 25, 15, 0.6);
    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-quest-progress.centered {
    justify-content: center;
}

.occult-quest-stat {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #9a8a7a;
}

.occult-quest-stat .value {
    color: #d4a574;
    font-weight: 600;
}

/* Quest stats row - two separate containers */
.occult-quest-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.occult-quest-stat-box {
    flex: 1;
    padding: 8px 12px;
    background: rgba(30, 25, 15, 0.6);
    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);
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #9a8a7a;
    text-align: center;
}

.occult-quest-stat-box .value {
    color: #d4a574;
    font-weight: 600;
}

/* Quest action button */
.occult-quest-btn {
    width: 100%;
    padding: 3px;
    background: linear-gradient(135deg, #6a5a2a 0%, #4a3a1a 50%, #3a2a0a 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);
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.occult-quest-btn:hover {
    background: linear-gradient(135deg, #8a7a4a 0%, #6a5a3a 50%, #5a4a2a 100%);
    transform: translateY(-1px);
}

.occult-quest-btn-inner {
    display: block;
    padding: 10px 15px;
    background: radial-gradient(circle at top, #5a4a2a 0%, #2a1f14 50%, #1a0f04 100%);
    color: #d4a574;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: 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);
}

/* Quest board grid */
.occult-quest-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 0;
}

/* Status cards for no quest / errors */
.occult-quest-card.status-card .occult-quest-title {
    color: #9a8a7a;
}

.occult-quest-card.status-card.error .occult-quest-title {
    color: #c48f8f;
}

.occult-quest-card.status-card.success .occult-quest-title {
    color: #8fc48f;
}

/* Quest Roll Animation */
.quest-roll-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 15px 0;
    padding: 15px;
    background: rgba(20, 15, 10, 0.8);
    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);
}

.quest-roll-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    background: transparent;
    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);
}

.quest-roll-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #6a5a3a 0%, #4a3a2a 50%, #3a2a1a 100%);
    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);
    z-index: -2;
}

.quest-roll-box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: radial-gradient(circle at top, #2a1f14 0%, #1a0f04 100%);
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
    z-index: -1;
}

.quest-roll-box.target::before {
    background: linear-gradient(135deg, #5a4a4a 0%, #3a2a2a 50%, #2a1a1a 100%);
}

.quest-roll-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65em;
    color: #9a8a7a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.quest-roll-value {
    font-family: 'Cinzel', serif;
    font-size: 2em;
    font-weight: bold;
    color: #d4a574;
    min-width: 60px;
    text-align: center;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.quest-roll-value.rolling {
    animation: rollPulse 0.1s ease-in-out infinite;
}

.quest-roll-value.success {
    color: #8fc48f;
    text-shadow: 0 0 10px rgba(143, 196, 143, 0.5);
}

.quest-roll-value.failure {
    color: #c48f8f;
    text-shadow: 0 0 10px rgba(196, 143, 143, 0.5);
}

.quest-roll-vs {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #6a5a4a;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.quest-roll-result {
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
    margin: 10px 0;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.quest-roll-result.show {
    opacity: 1;
    transform: scale(1);
}

.quest-roll-result.success {
    color: #8fc48f;
    text-shadow: 0 0 15px rgba(143, 196, 143, 0.6);
}

.quest-roll-result.failure {
    color: #c48f8f;
    text-shadow: 0 0 15px rgba(196, 143, 143, 0.6);
}

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

/* Hidden button during animation */
.occult-quest-btn.hidden {
    display: none;
}

.occult-quest-btn.fade-in {
    animation: questBtnFadeIn 0.5s ease-out forwards;
}

@keyframes questBtnFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section title for quest board */
.occult-quest-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #c4a574;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 15px;
    margin: 10px 0;
    text-align: center;
    background: linear-gradient(90deg, transparent 0%, rgba(90, 70, 40, 0.3) 20%, rgba(90, 70, 40, 0.3) 80%, transparent 100%);
}

/* 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 1024:1536 aspect ratio */
@media (min-width: 768px) {
    body {
        max-width: none;
        max-height: none;
    }

    .fantasy-frame {
        width: calc((100vh - 90px) * (1024 / 1536));
        max-width: calc((100vh - 90px) * (1024 / 1536));
        max-height: none;
    }

    /* Desktop: no scroll, clip map at frame boundary */
    .game-content.home-bg {
        overflow: hidden;
    }

    .home-map-container {
        height: 100%;
        overflow: hidden;
    }

    .riverhold-map {
        width: 100%;
        height: 100%;
        padding-bottom: 0;
        background-size: 100% auto;
        background-position: top center;
    }

    .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 (same intensity as Hunter Lodge) */
/* Animation on img only - not on the slot container (to avoid glowing the name tag) */
.building-slot.eldritch-glow img {
    animation: eldritchPulse 2s ease-in-out infinite;
}

@keyframes eldritchPulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(181, 76, 7, 0.6)) drop-shadow(0 0 10px rgba(157, 119, 5, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(181, 76, 7, 0.9)) drop-shadow(0 0 18px rgba(157, 119, 5, 0.6));
    }
}

/* Strange glow (blue) for buildings with available actions (same intensity as Hunter Lodge) */
/* Animation on img only - not on the slot container (to avoid glowing the name tag) */
.building-slot.strange-glow {
    overflow: visible;
}

.building-slot.strange-glow img {
    animation: strangePulse 2s ease-in-out infinite;
}

@keyframes strangePulse {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(30, 144, 255, 0.6)) drop-shadow(0 0 10px rgba(0, 100, 200, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 10px rgba(30, 144, 255, 0.9)) drop-shadow(0 0 18px rgba(0, 100, 200, 0.6));
    }
}

/* Crypt/Shadehunt glitch effect for Hunter Lodge when player is in the depths */
.building-slot.crypt-glitch img {
    animation: cryptGlitch 3s infinite;
}

@keyframes cryptGlitch {
    0%, 85%, 100% {
        filter: drop-shadow(0 0 8px rgba(128, 0, 255, 0.5));
        transform: translate(0, 0);
    }
    86% {
        filter: drop-shadow(-3px 0 #ff0040) drop-shadow(3px 0 #00ffff) drop-shadow(0 0 12px rgba(128, 0, 255, 0.8));
        transform: translate(2px, 0);
    }
    88% {
        filter: drop-shadow(3px 0 #ff0040) drop-shadow(-3px 0 #00ffff) drop-shadow(0 0 12px rgba(128, 0, 255, 0.8));
        transform: translate(-2px, 0);
    }
    90% {
        filter: drop-shadow(-2px 0 #ff0040) drop-shadow(2px 0 #00ffff) drop-shadow(0 0 10px rgba(128, 0, 255, 0.7));
        transform: translate(1px, -1px);
    }
    92% {
        filter: drop-shadow(0 0 8px rgba(128, 0, 255, 0.5));
        transform: translate(0, 0);
    }
    /* Second glitch burst */
    94% {
        filter: drop-shadow(-2px 0 #ff0040) drop-shadow(2px 0 #00ffff) drop-shadow(0 0 15px rgba(128, 0, 255, 0.9));
        transform: translate(-1px, 1px) skewX(-2deg);
    }
    96% {
        filter: drop-shadow(2px 0 #ff0040) drop-shadow(-2px 0 #00ffff) drop-shadow(0 0 15px rgba(128, 0, 255, 0.9));
        transform: translate(1px, 0) skewX(2deg);
    }
    98% {
        filter: drop-shadow(0 0 8px rgba(128, 0, 255, 0.5));
        transform: translate(0, 0) skewX(0);
    }
}

/* ===== 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/ASCENSION MODAL ===== */
.occult-sacrifice-modal {
    position: relative;
    width: 90%;
    max-width: 380px;
    margin: 10px 0;
    padding: 4px;
    background: linear-gradient(135deg, #8a7a5a 0%, #6a5a3a 25%, #4a3a2a 50%, #6a5a3a 75%, #8a7a5a 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);
    animation: occultPagePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    flex-shrink: 0;
}

.occult-sacrifice-modal-inner {
    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);
}

.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: 3%;
}

.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;
}

/* Requirement status colors for ascension modal */
.sacrifice-cost.requirement-met .sacrifice-value {
    color: #4ade80;
}

.sacrifice-cost.requirement-not-met .sacrifice-value {
    color: #e74c3c;
}

.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;
}

.game-btn-inner.btn-strange {
    background: radial-gradient(circle at top, #4a6a9c 0%, #2a3a5a 50%, #1a2a4a 100%);
    color: #c4d4f4;
}

/* Deathwish Status Styling */
.deathwish-status {
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.deathwish-status-label {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #9c7c5c;
    text-transform: uppercase;
    margin-right: 8px;
}

.deathwish-status-value {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
}

.deathwish-status.active .deathwish-status-value {
    color: #ff4444;
}

.deathwish-status.inactive .deathwish-status-value {
    color: #666666;
}

.game-btn-inner.btn-deathwish-on {
    background: radial-gradient(circle at top, #44aa44 0%, #2a6a2a 50%, #1a4a1a 100%);
    color: #c4ffc4;
}

.game-btn-inner.btn-deathwish-off {
    background: radial-gradient(circle at top, #aa4444 0%, #6a2a2a 50%, #4a1a1a 100%);
    color: #ffc4c4;
}

/* Hunter Lodge Styles */
.hunter-lodge-options {
    display: flex;
    gap: 15px;
    margin: 15px 0;
}

.hunter-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    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);
}

.hunter-option-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #c9a227;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.hunter-option-desc {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #b8a080;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 8px;
    flex-grow: 1;
}

.hunter-option-cost {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #9c7c5c;
    margin-bottom: 12px;
}

.game-btn-inner.btn-hunt {
    background: radial-gradient(circle at top, #8b5a2b 0%, #5a3a1a 50%, #3a2510 100%);
    color: #f4d4a4;
}

.game-btn-inner.btn-catch {
    background: radial-gradient(circle at top, #4a7a4a 0%, #2a5a2a 50%, #1a3a1a 100%);
    color: #c4f4c4;
}

/* Hunter Lodge Tab System */
.hunter-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #3d2a07;
}

.hunter-tab {
    flex: 1;
    padding: 10px 15px;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #9c7c5c;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.hunter-tab:first-child {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.hunter-tab:nth-child(2):not(:last-child) {
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.hunter-tab:last-child {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
}

.hunter-tab.active {
    color: #c9a227;
    background: rgba(61, 42, 7, 0.6);
    border-bottom: 2px solid #c9a227;
    margin-bottom: -2px;
}

.hunter-tab-content {
    padding: 10px 0;
}

/* Hunter Tabs in Occult Modal */
.occult-modal .hunter-tabs {
    margin: 0 4px;
}

.occult-modal .occult-modal-header {
    margin: 10px 15px;
}

/* Hunter Tab Content in Modal (hide/show) */
.occult-modal .hunter-tab-content {
    display: none;
    padding: 0;
}

.occult-modal .hunter-tab-content.active {
    display: block;
}

/* Character Menu Tab System (4 tabs) */
.char-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #3d2a07;
}

.char-tab {
    flex: 1;
    padding: 10px 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #9c7c5c;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.char-tab:first-child {
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

.char-tab:last-child {
    clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%);
}

.char-tab:not(:first-child):not(:last-child) {
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
    margin-left: -4px;
}

.char-tab:nth-child(2) {
    margin-left: -4px;
}

.char-tab.active {
    color: #c9a227;
    background: rgba(61, 42, 7, 0.6);
    border-bottom: 2px solid #c9a227;
    margin-bottom: -2px;
}

.char-tab-content {
    padding: 10px 0;
}

/* Guild Hall Tab System (3 tabs) */
.guild-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #3d2a07;
}

.guild-tab {
    flex: 1;
    padding: 10px 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #9c7c5c;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
}

.guild-tab:first-child {
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.guild-tab:last-child {
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
}

.guild-tab:not(:first-child):not(:last-child) {
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
    margin-left: -6px;
}

.guild-tab.active {
    color: #c9a227;
    background: rgba(61, 42, 7, 0.6);
    border-bottom: 2px solid #c9a227;
    margin-bottom: -2px;
}

/* Notification badge for guild tabs */
.guild-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 5px;
    background: linear-gradient(135deg, #b54c07 0%, #9d7705 100%);
    color: #fff;
    font-size: 0.65em;
    font-weight: bold;
    border-radius: 9px;
    box-shadow: 0 0 6px rgba(181, 76, 7, 0.8);
    animation: badgePulse 1.5s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(181, 76, 7, 0.8);
    }
    50% {
        box-shadow: 0 0 12px rgba(181, 76, 7, 1), 0 0 20px rgba(157, 119, 5, 0.6);
    }
}

.guild-tab-content {
    padding: 10px 0;
}

/* Guild Ranking Items */
.occult-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.occult-ranking-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-bottom: 8px;
    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-ranking-item::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-ranking-item::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(20, 14, 8, 0.95);
    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-ranking-item:hover::after,
.occult-ranking-item:active::after {
    background: rgba(40, 28, 15, 0.95);
}

.ranking-position {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: bold;
    color: #9c7c5c;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    flex-shrink: 0;
}

.ranking-position.gold {
    color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(184, 134, 11, 0.3));
    border: 2px solid #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.ranking-position.silver {
    color: #c0c0c0;
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.3), rgba(128, 128, 128, 0.3));
    border: 2px solid #c0c0c0;
    text-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}

.ranking-position.bronze {
    color: #cd7f32;
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.3), rgba(139, 90, 43, 0.3));
    border: 2px solid #cd7f32;
    text-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}

.ranking-info {
    flex: 1;
    min-width: 0;
}

.ranking-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: #c4a574;
    margin-bottom: 2px;
}

.ranking-score {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #8a7a5a;
}

.ranking-arrow {
    font-size: 1.5em;
    color: #5a4a3a;
    flex-shrink: 0;
}

/* Tourney countdown */
.occult-tourney-countdown {
    position: relative;
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #c9a227;
    background: transparent;
    border: none;
    text-transform: capitalize;
    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-tourney-countdown::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #c9a227 0%, #8a7a2a 25%, #5a5a1a 50%, #8a7a2a 75%, #c9a227 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-tourney-countdown::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(20, 18, 8, 0.95);
    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;
}

/* Compact styles for guild details modal */
.occult-guild-stats.compact {
    gap: 8px;
}

.occult-guild-stats.compact .occult-guild-stat {
    padding: 6px 0;
}

.occult-members-list.compact {
    max-height: 200px;
    overflow-y: auto;
}

.occult-member-item.small {
    padding: 8px 10px;
}

.occult-member-item.small .member-info {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.occult-member-item.small .member-name {
    font-size: 0.85em;
}

.occult-member-item.small .member-level {
    font-size: 0.7em;
}

.hunter-info-box {
    background: rgba(0, 0, 0, 0.3);
    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);
}

.hunter-info-box p {
    margin: 0 0 8px 0;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #b8a080;
    text-align: center;
    line-height: 1.4;
}

.hunter-info-box p:last-child {
    margin-bottom: 0;
}

.hunter-info-note {
    font-size: 0.75em !important;
    color: #9c7c5c !important;
    font-style: italic;
}

.hunter-stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
}

.hunter-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hunter-stat-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #9c7c5c;
    text-transform: uppercase;
}

.hunter-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #c9a227;
}

.hunter-action {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.hunter-catch-chance {
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    margin-bottom: 15px;
    text-align: 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);
}

.hunter-catch-title {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #9c7c5c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.hunter-catch-value {
    font-family: 'Cinzel', serif;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 8px;
}

.hunter-catch-details {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #9c7c5c;
    line-height: 1.5;
}

/* Hunter Lodge Combat Log */
.hunter-log-section {
    margin-top: 15px;
    border-top: 1px solid #3d2a07;
}

.hunter-log-header {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    user-select: none;
}

.hunter-log-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #9c7c5c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex-grow: 1;
}

.hunter-log-count {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #c9a227;
    background: rgba(61, 42, 7, 0.6);
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 10px;
}

.hunter-log-toggle {
    color: #9c7c5c;
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.hunter-log-section.expanded .hunter-log-toggle {
    transform: rotate(180deg);
}

.hunter-log-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.hunter-log-section.expanded .hunter-log-container {
    max-height: 300px;
    overflow-y: auto;
}

.hunter-log-empty {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #6c5c4c;
    text-align: center;
    padding: 15px;
    font-style: italic;
}

.hunter-log-entry {
    border-bottom: 1px solid rgba(61, 42, 7, 0.4);
}

.hunter-log-entry:last-child {
    border-bottom: none;
}

.hunter-log-summary {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    cursor: pointer;
    gap: 8px;
}

.hunter-log-time {
    font-family: 'Cinzel', serif;
    font-size: 0.65em;
    color: #6c5c4c;
    white-space: nowrap;
}

.hunter-log-preview {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #b8a080;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hunter-log-arrow {
    color: #6c5c4c;
    font-size: 0.6em;
    transition: transform 0.3s ease;
}

.hunter-log-entry.expanded .hunter-log-arrow {
    transform: rotate(180deg);
}

.hunter-log-details {
    max-height: 0;
    overflow: hidden;
    padding: 0 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #b8a080;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.2);
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.hunter-log-entry.expanded .hunter-log-details {
    max-height: 500px;
    padding: 10px;
    overflow-y: auto;
}

/* Catch Log Specific Styles */
.catch-log-section .hunter-log-header {
    cursor: default;
}

.catch-entry .hunter-log-summary {
    cursor: pointer;
    flex-wrap: wrap;
}

.catch-entry .hunter-log-preview {
    flex: 1;
    min-width: 100%;
    margin-top: 5px;
}

.catch-status-icon {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.catch-entry.catch-success .catch-status-icon {
    color: #2ecc71;
}

.catch-entry.catch-fail .catch-status-icon {
    color: #e74c3c;
}

.catch-entry.catch-success {
    background: rgba(46, 204, 113, 0.1);
}

.catch-entry.catch-fail {
    background: rgba(231, 76, 60, 0.1);
}

/* Catch log with pet image */
.catch-log-image {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    margin-right: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.catch-log-image.clickable {
    cursor: pointer;
}

.catch-log-image.clickable:hover {
    transform: scale(1.05);
}

.catch-log-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.catch-status-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid rgba(0, 0, 0, 0.5);
}

.catch-status-badge.catch-success {
    display: none;
}

.catch-status-badge.catch-fail {
    background: #e74c3c;
    color: #fff;
}

.catch-status-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.catch-status-x {
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.catch-log-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Catch log detail styling */
.catch-detail-image {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.catch-detail-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid #d4af37;
    background: rgba(0, 0, 0, 0.3);
}

.catch-detail-text {
    color: #b8a080;
    font-size: 0.9em;
    line-height: 1.4;
}

/* Quest caught pet image */
.quest-caught-pet {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

.quest-caught-pet img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid #d4af37;
    background: rgba(0, 0, 0, 0.3);
}

/* ===== KEEP PAGE STYLES ===== */
.keep-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}

.keep-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    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);
}

.keep-stat-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.keep-stat-info {
    display: flex;
    flex-direction: column;
}

.keep-stat-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7em;
    color: #9c7c5c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.keep-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    color: #c9a227;
    font-weight: bold;
}

.keep-bonuses {
    background: rgba(0, 0, 0, 0.3);
    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);
}

.keep-bonus-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #9c7c5c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(61, 42, 7, 0.5);
}

.keep-bonus-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #b8a080;
}

.keep-bonus-value {
    color: #2ecc71;
    font-weight: bold;
}

.keep-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
}

.keep-cost {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #b8a080;
    text-align: center;
}

.keep-home-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.3);
    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);
}

.keep-home-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.keep-home-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.keep-home-label {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #9c7c5c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.keep-home-level {
    font-family: 'Cinzel', serif;
    font-size: 2em;
    color: #c9a227;
    font-weight: bold;
}

/* Vault Tab Styles */
.vault-address-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    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);
}

.vault-address-label {
    color: #b8a080;
    font-size: 0.9em;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
}

.vault-address-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.vault-address-code {
    color: #daa520;
    font-family: monospace;
    font-size: 0.85em;
    word-break: break-all;
}

.vault-address-code.truncated {
    color: #888;
    font-size: 0.75em;
}

.vault-copy-btn {
    background: #3d2a07;
    border: 1px solid #5a4a3a;
    color: #c4a574;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
}

.vault-copy-btn:hover {
    background: #4d3a17;
}

.vault-activation-box {
    background: rgba(139, 69, 19, 0.2);
    border-left: 3px solid #cd853f;
    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);
}

.vault-activation-title {
    color: #cd853f;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 8px;
}

.vault-activation-text {
    font-size: 0.9em;
    color: #b8a080;
    font-family: 'Cinzel', serif;
    line-height: 1.4;
}

.vault-frozen-box {
    background: rgba(139, 0, 0, 0.2);
    border-left: 3px solid #8b0000;
    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);
}

.vault-frozen-title {
    color: #ff6b6b;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 8px;
}

.vault-frozen-text {
    font-size: 0.9em;
    color: #b8a080;
    font-family: 'Cinzel', serif;
    line-height: 1.4;
}

.vault-warning-box {
    background: rgba(255, 140, 0, 0.2);
    border-left: 3px solid #ff8c00;
    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);
}

.vault-warning-title {
    color: #ffa500;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 8px;
}

.vault-warning-text {
    font-size: 0.9em;
    color: #b8a080;
    font-family: 'Cinzel', serif;
    line-height: 1.4;
}

.vault-balances {
    display: flex;
    justify-content: space-around;
    margin: 15px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    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);
}

.vault-balance-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vault-balance-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.vault-balance-text {
    text-align: left;
}

.vault-balance-label {
    color: #b8a080;
    font-size: 0.8em;
    font-family: 'Cinzel', serif;
}

.vault-balance-value {
    font-size: 1.4em;
    font-family: 'Cinzel', serif;
}

.vault-balance-value.river {
    color: #daa520;
}

.vault-balance-value.blacksmith {
    color: #cd853f;
}

.vault-action-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.vault-note {
    font-size: 0.85em;
    opacity: 0.8;
}

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

.game-btn-inner.btn-vault-action {
    background: radial-gradient(circle at top, #7a5a2a 0%, #4a3a1a 50%, #2a1a0a 100%);
    color: #f4d4a4;
}

.game-btn.vault-btn {
    width: 200px;
}

.game-btn.vault-btn-small {
    width: 140px;
}

/* Vault Conversion Modal */
.vault-conversion-modal {
    text-align: center;
    padding: 10px;
}

.vault-rate-info {
    font-family: 'Cinzel', serif;
    color: #daa520;
    margin-bottom: 15px;
}

.vault-input-group {
    margin: 15px 0;
}

.vault-input-label {
    display: block;
    margin-bottom: 5px;
    color: #b8a080;
}

.vault-input {
    width: 100px;
    padding: 8px 12px;
    font-size: 1.1em;
    font-family: 'Cinzel', serif;
    text-align: center;
    background: rgba(15, 10, 5, 0.8);
    border: 1px solid #5a4a3a;
    color: #daa520;
    border-radius: 4px;
}

.vault-input:focus {
    outline: none;
    border-color: #daa520;
}

.vault-rate-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.vault-rate-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    color: #daa520;
}

.vault-coin-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.vault-rate-equals {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: #b8a080;
}

.vault-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vault-input-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.vault-cost-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    color: #c4a574;
    margin: 15px 0;
    font-size: 1.1em;
}

.vault-cost-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.vault-cost-display span {
    color: #daa520;
    font-weight: bold;
}

.vault-balance-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    font-family: 'Cinzel', serif;
    color: #daa520;
    font-size: 1.1em;
}

.vault-input-wide {
    width: 100%;
    max-width: 280px;
}

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

.game-btn-inner.btn-meditate {
    background: radial-gradient(circle at top, #4a6a9c 0%, #2a3a5a 50%, #1a2a4a 100%);
    color: #c4d4f4;
}

.game-btn-inner.btn-upgrade {
    background: radial-gradient(circle at top, #4a7a4a 0%, #2a5a2a 50%, #1a3a1a 100%);
    color: #c4f4c4;
}

/* Keep modal scrollable content */
.sacrifice-content.keep-scrollable {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #5a4a3a #1a0f04;
}

.sacrifice-content.keep-scrollable::-webkit-scrollbar {
    width: 8px;
}

.sacrifice-content.keep-scrollable::-webkit-scrollbar-track {
    background: #1a0f04;
}

.sacrifice-content.keep-scrollable::-webkit-scrollbar-thumb {
    background: #5a4a3a;
    border-radius: 4px;
}

.sacrifice-content.keep-scrollable::-webkit-scrollbar-thumb:hover {
    background: #7a6a5a;
}

/* Path of Hero - Meditation Styles */
.meditation-info-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    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);
}

.meditation-info-box p {
    margin: 0 0 10px 0;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #b8a080;
    text-align: center;
    line-height: 1.5;
}

.meditation-info-box p:last-child {
    margin-bottom: 0;
}

.meditation-note {
    font-size: 0.75em !important;
    color: #c9a227 !important;
    font-style: italic;
}

.meditation-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.4);
    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);
}

.meditation-icon {
    font-size: 3em;
    margin-bottom: 10px;
}

.meditation-status-text {
    text-align: center;
}

.meditation-ready {
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    color: #2ecc71;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.meditation-cooldown {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #9c7c5c;
    display: block;
    margin-bottom: 5px;
}

.meditation-timer {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: #f39c12;
    font-weight: bold;
}

.meditation-rewards {
    background: rgba(61, 42, 7, 0.4);
    padding: 15px;
    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);
}

.meditation-reward-title {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #9c7c5c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 10px;
}

.meditation-reward-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;
}

.meditation-reward {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #c9a227;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.game-btn-inner.btn-meditate {
    background: radial-gradient(circle at top, #6a5acd 0%, #483d8b 50%, #2e2654 100%);
    color: #e6e6fa;
}

.meditation-level {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(106, 90, 205, 0.2);
    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);
}

.meditation-level-label {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #9c7c5c;
    text-transform: uppercase;
}

.meditation-level-value {
    font-family: 'Cinzel', serif;
    font-size: 1.8em;
    color: #6a5acd;
    font-weight: bold;
}

.meditation-cost {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.meditation-cost-label {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #9c7c5c;
}

.meditation-cost-value {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #c9a227;
    font-weight: bold;
}

.meditation-cost-value.cannot-afford {
    color: #e74c3c;
}

/* ===== OCCULT GUILD HALL SYSTEM ===== */

/* Guild theme - noble purple/gold */
.occult-page.guild-theme {
    background: radial-gradient(circle at top, #2a1f3a 0%, #1a1225 50%, #0f0a15 100%);
}

/* Guild buttons - purple/blue theme */
.guild-actions .game-btn {
    background: linear-gradient(135deg, #6a5a8a 0%, #4a3a6a 50%, #3a2a5a 100%);
}

.guild-actions .game-btn-inner {
    background: radial-gradient(circle at top, #5a4a7a 0%, #3a2a5a 50%, #2a1a4a 100%);
    color: #c4b4d4;
}

.guild-actions .game-btn-inner.btn-sell {
    background: radial-gradient(circle at top, #7a3a4a 0%, #5a2a3a 50%, #3a1a2a 100%);
    color: #d4b4c4;
}

/* Guild card container */
.occult-guild-card {
    position: relative;
    margin: 10px 5px;
    padding: 3px;
    background: linear-gradient(135deg, #5a4a6a 0%, #3a2a4a 50%, #2a1a3a 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);
}

.occult-guild-card::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: rgba(20, 15, 30, 0.95);
    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-guild-name {
    font-family: 'Cinzel', serif;
    font-size: 1.5em;
    color: #daa520;
    text-align: center;
    padding: 15px 10px 5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.occult-guild-level {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #9c7c9c;
    text-align: center;
    margin-bottom: 10px;
}

.occult-guild-description {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #b8a0b8;
    text-align: center;
    padding: 10px 15px;
    font-style: italic;
    border-top: 1px solid rgba(138, 122, 138, 0.3);
    border-bottom: 1px solid rgba(138, 122, 138, 0.3);
    margin: 10px 10px;
}

.occult-guild-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 15px 15px;
}

.occult-guild-stat {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #c9b8c9;
    display: flex;
    justify-content: space-between;
}

.occult-guild-stat .stat-label {
    color: #8a7a8a;
}

/* Section title */
.occult-section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #daa520;
    text-align: center;
    margin: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Members list */
.occult-members-list {
    margin: 0 10px 15px;
    padding: 10px;
    background: rgba(30, 25, 40, 0.6);
    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);
    max-height: 200px;
    overflow-y: auto;
}

.occult-member-item {
    font-family: 'Cinzel', serif;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 5px 0;
    background: transparent;
    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);
}

.occult-member-item::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-member-item::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(20, 14, 8, 0.95);
    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-member-item:hover::after,
.occult-member-item:active::after {
    background: rgba(40, 28, 15, 0.95);
}

.occult-member-item .member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(30, 20, 15, 0.8);
    border: 2px solid #5a4a3a;
    overflow: hidden;
    flex-shrink: 0;
}

.occult-member-item .member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.occult-member-item .member-info {
    flex: 1;
    min-width: 0;
}

.occult-member-item .member-name {
    color: #c4a574;
    font-size: 0.95em;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.occult-member-item .member-level {
    color: #8a7a5a;
    font-size: 0.75em;
    margin-top: 2px;
}

.occult-member-item .member-arrow {
    color: #6a5a4a;
    font-size: 1.5em;
    flex-shrink: 0;
}

.occult-member-item .member-message-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(90, 70, 50, 0.6);
    border-radius: 50%;
    transition: background 0.2s ease;
}

.occult-member-item .member-message-btn:active {
    background: rgba(120, 90, 60, 0.8);
}

.occult-member-item .member-message-btn img {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.occult-member-item.small .member-message-btn {
    width: 28px;
    height: 28px;
}

.occult-member-item.small .member-message-btn img {
    width: 16px;
    height: 16px;
}

/* Member kick button (for guild owner) */
.occult-member-item .member-kick-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 50, 50, 0.6);
    border-radius: 50%;
    margin-left: 6px;
    transition: background 0.2s ease;
    cursor: pointer;
    color: #f4c4c4;
    font-size: 14px;
    font-weight: bold;
}

.occult-member-item .member-kick-btn:active {
    background: rgba(180, 60, 60, 0.8);
}

.occult-member-item .member-kick-btn img {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

/* Clickable founder link */
.occult-guild-stat.clickable {
    cursor: pointer;
}

.occult-guild-stat.clickable:hover .founder-link,
.occult-guild-stat.clickable:active .founder-link {
    color: #daa520;
    text-decoration: underline;
}

.founder-link {
    color: #c4a574;
    transition: color 0.2s ease;
}

/* Founder avatar in guild stat */
.founder-stat {
    align-items: center;
    gap: 10px;
}

.founder-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #5a4a3a;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.founder-avatar.clickable {
    cursor: pointer;
}

.founder-avatar.clickable:hover {
    border-color: #daa520;
    transform: scale(1.1);
}

/* Player profile modal styles */
.player-profile-modal {
    text-align: left;
}

.player-profile-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #4a3a2a;
}

.player-profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #5a4a3a;
    flex-shrink: 0;
}

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

.player-profile-info {
    flex: 1;
}

.player-profile-name {
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    color: #c4a574;
    font-weight: bold;
}

.player-profile-class {
    color: #9c7c9c;
    font-size: 0.85em;
    margin-top: 2px;
}

.player-profile-level {
    color: #8a7a5a;
    font-size: 0.8em;
    margin-top: 2px;
}

.player-profile-stats {
    margin-bottom: 15px;
}

.player-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(74, 58, 42, 0.5);
}

.player-stat-row .stat-label {
    color: #8a7a5a;
}

.player-stat-row .stat-value {
    color: #c4a574;
}

.player-profile-raw {
    background: rgba(20, 15, 10, 0.6);
    border: 1px solid #3a2a1a;
    border-radius: 6px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.player-profile-desc {
    color: #9c8c6c;
    font-size: 0.75em;
    font-style: italic;
    margin-top: 5px;
}

.player-profile-section {
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(20, 15, 10, 0.5);
    border: 1px solid #3a2a1a;
    border-radius: 6px;
}

.player-profile-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #4a3a2a;
}

.player-profile-stats-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.player-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: rgba(30, 20, 10, 0.6);
    border: 1px solid #4a3a2a;
    border-radius: 4px;
}

.player-stat-item .stat-name {
    font-size: 0.7em;
    color: #8a7a5a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.player-stat-item .stat-val {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: #c4a574;
    font-weight: bold;
}

/* Player Profile Page (with tabs) - Occult styling */
.player-profile-header-large {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    position: relative;
    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);
}

.player-profile-header-large::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;
}

.player-profile-header-large::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;
}

.player-profile-avatar-large {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 2px solid #5a4a3a;
    flex-shrink: 0;
    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);
}

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

.player-profile-info-large {
    flex: 1;
}

.player-profile-name-large {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    color: #daa520;
    font-weight: bold;
}

.player-profile-vocation {
    color: #9c7c9c;
    font-size: 0.85em;
    margin-top: 2px;
}

.player-profile-level-large {
    color: #c4a574;
    font-size: 0.9em;
    margin-top: 2px;
}

.player-profile-desc-large {
    color: #8a7a5a;
    font-size: 0.75em;
    font-style: italic;
    margin-top: 5px;
}

/* Profile Tab Content */
.profile-tab-content {
    padding: 10px 0;
}

/* Guild action buttons row */
.occult-button-row.guild-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 10px;
    flex-wrap: wrap;
}

.occult-button-row.guild-actions .game-btn {
    flex: 1;
    min-width: 80px;
    max-width: 120px;
}

/* No guild state */
.occult-no-guild {
    text-align: center;
    padding: 30px 20px;
    margin: 20px 10px;
    background: rgba(30, 25, 40, 0.6);
    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-no-guild-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    color: #8a7a8a;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.occult-no-guild-text {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #9c8c9c;
    line-height: 1.5;
}

/* Large buttons for create/join */
.game-btn.game-btn-large {
    min-width: 130px;
}

/* Rankings info */
.occult-rankings-info {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #7a6a7a;
    text-align: center;
    padding: 15px;
    font-style: italic;
}

/* ========================================
   Guild Chat System - Mobile Phone Style
   ======================================== */

.guild-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 280px);
    min-height: 300px;
}

.guild-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Chat bubble container */
.chat-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 85%;
}

.chat-message.own {
    flex-direction: row-reverse;
    align-self: flex-end;
}

.chat-message.other {
    align-self: flex-start;
}

/* Avatar in chat */
.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #5a4a3a;
}

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

/* Chat bubble */
.chat-bubble {
    position: relative;
    padding: 10px 14px;
    border-radius: 18px;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    line-height: 1.4;
    max-width: 100%;
    word-wrap: break-word;
}

/* Own messages - right side, golden */
.chat-message.own .chat-bubble {
    background: linear-gradient(135deg, #5a4a2a 0%, #3d2a07 50%, #2a1a04 100%);
    color: #daa520;
    border-bottom-right-radius: 4px;
    border: 1px solid #6a5a3a;
}

/* Other messages - left side, darker */
.chat-message.other .chat-bubble {
    background: linear-gradient(135deg, #2a2a3a 0%, #1a1a2a 50%, #0f0f1a 100%);
    color: #c4a574;
    border-bottom-left-radius: 4px;
    border: 1px solid #3a3a4a;
}

/* Sender name for other messages */
.chat-sender {
    font-size: 0.75em;
    color: #8a7a5a;
    margin-bottom: 4px;
    font-weight: bold;
}

/* Timestamp */
.chat-time {
    font-size: 0.65em;
    color: #6a5a4a;
    margin-top: 4px;
    text-align: right;
}

.chat-message.other .chat-time {
    text-align: left;
}

/* Chat input area */
.guild-chat-input-container {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: rgba(15, 10, 5, 0.9);
    border-top: 2px solid #3d2a07;
}

.guild-chat-input {
    flex: 1;
    background: rgba(30, 20, 10, 0.9);
    border: 2px solid #5a4a3a;
    border-radius: 20px;
    padding: 10px 16px;
    color: #daa520;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.3s;
}

.guild-chat-input:focus {
    border-color: #8a7a5a;
}

.guild-chat-input::placeholder {
    color: #6a5a4a;
}

.guild-chat-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5a4a2a 0%, #3d2a07 50%, #2a1a04 100%);
    border: 2px solid #6a5a3a;
    color: #daa520;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.guild-chat-send-btn:hover {
    background: linear-gradient(135deg, #6a5a3a 0%, #4d3a17 50%, #3a2a14 100%);
}

.guild-chat-send-btn:active {
    transform: scale(0.95);
}

/* Empty chat state */
.guild-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6a5a4a;
    font-family: 'Cinzel', serif;
    text-align: center;
    padding: 20px;
}

.guild-chat-empty-icon {
    font-size: 3em;
    margin-bottom: 15px;
    opacity: 0.5;
}

.guild-chat-empty-text {
    font-size: 1em;
    color: #8a7a5a;
}

/* No guild chat message */
.guild-chat-no-guild {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #8a7a5a;
    font-family: 'Cinzel', serif;
    text-align: center;
    padding: 20px;
}

/* Broadcast button section */
.guild-chat-broadcast {
    padding: 10px;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #3d2a07;
}

.game-btn.game-btn-wide {
    min-width: 200px;
}

.game-btn.game-btn-wide .game-btn-inner {
    font-size: 0.7em;
    padding: 0 10px;
}

/* Quick Chat Modal */
.quick-chat-modal {
    max-width: 350px !important;
    width: 90% !important;
}

.quick-chat-messages {
    height: 200px;
    overflow-y: auto;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-chat-message {
    display: flex;
    width: 100%;
}

.quick-chat-message.own {
    justify-content: flex-end;
}

.quick-chat-message.other {
    justify-content: flex-start;
}

.quick-chat-bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.quick-chat-message.own .quick-chat-bubble {
    background: linear-gradient(135deg, #4a3a2a, #3a2a1a);
    color: #daa520;
    border-bottom-right-radius: 4px;
}

.quick-chat-message.other .quick-chat-bubble {
    background: rgba(90, 74, 58, 0.8);
    color: #c4a574;
    border-bottom-left-radius: 4px;
}

.quick-chat-empty,
.quick-chat-loading {
    text-align: center;
    color: #8a7a5a;
    font-style: italic;
    padding: 20px;
    font-size: 13px;
}

.quick-chat-input-area {
    display: flex;
    gap: 8px;
    padding: 10px 15px;
    background: transparent;
    border-top: 1px solid #3a2a1a;
    flex-shrink: 0;
}

.quick-chat-input {
    flex: 1;
    padding: 10px 15px;
    background: rgba(30, 22, 12, 0.9);
    border: 1px solid #5a4a3a;
    border-radius: 20px;
    color: #e0d0c0;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    outline: none;
}

.quick-chat-input:focus {
    border-color: #8b5a2b;
}

.quick-chat-input::placeholder {
    color: #6a5a4a;
}

.quick-chat-send-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #8b5a2b 0%, #5a3a1a 100%);
    border: 2px solid #d4a574;
    border-radius: 50%;
    color: #f0e0c0;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-chat-send-btn:active {
    transform: scale(0.95);
}

/* ========================================
   AUCTION HOUSE STYLES
   ======================================== */

/* Auction page container */
.auction-page {
    background: radial-gradient(circle at top, #322014 0, #19100a 45%, #120c07 100%);
    min-height: 100%;
    padding: 10px;
}

/* Auction tabs container */
.auction-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0 5px;
}

/* Individual tab button */
.auction-tab {
    flex: 1;
    padding: 12px 16px;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8a7a5a;
    background: rgba(30, 22, 12, 0.8);
    border: 1px solid #3a2a1a;
    cursor: pointer;
    transition: all 0.2s ease;
    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);
}

.auction-tab:hover {
    background: rgba(50, 40, 25, 0.9);
    color: #c4a574;
}

.auction-tab.active {
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 50%, #2a1a04 100%);
    color: #daa520;
    border-color: #8b5a2b;
}

/* Sort controls */
.auction-sort-controls {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 5px;
    flex-wrap: wrap;
}

.auction-sort-btn {
    padding: 8px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8a7a5a;
    background: rgba(25, 18, 10, 0.9);
    border: 1px solid #3a2a1a;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auction-sort-btn:hover {
    background: rgba(40, 30, 18, 0.9);
    color: #b8a080;
}

.auction-sort-btn.active {
    background: rgba(90, 74, 58, 0.9);
    color: #daa520;
    border-color: #8b5a2b;
}

/* Auction cards container */
.auction-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual auction card - uses occult card styling */
.auction-card {
    position: relative;
    margin-bottom: 2px;
}

/* Auction summary (collapsed view) */
.auction-summary {
    position: relative;
    cursor: pointer;
    padding: 3px;
    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);
}

/* Default grey frame for common items */
.auction-summary {
    background: linear-gradient(135deg, #5a5a5a 0%, #6b6b6b 25%, #4a4a4a 50%, #6b6b6b 75%, #5a5a5a 100%);
}

.auction-summary.rarity-odd {
    background: linear-gradient(135deg, #3a5a3a 0%, #4a7c4a 25%, #2a4a2a 50%, #4a7c4a 75%, #3a5a3a 100%);
}

.auction-summary.rarity-strange {
    background: linear-gradient(135deg, #3a4a6a 0%, #4a6a9c 25%, #2a3a5a 50%, #4a6a9c 75%, #3a4a6a 100%);
}

.auction-summary.rarity-eldritch {
    background: linear-gradient(135deg, #7a4a2a 0%, #9c5a2a 25%, #5a3a1a 50%, #9c5a2a 75%, #7a4a2a 100%);
}

.auction-summary-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(15, 10, 5, 0.95);
    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);
}

/* Item icon in summary */
.auction-icon-small {
    width: 50px;
    height: 50px;
    padding: 2px;
    flex-shrink: 0;
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
}

.auction-icon-small {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 50%, #4a4a4a 100%);
}

.auction-icon-small.rarity-odd {
    background: linear-gradient(135deg, #3a5a3a 0%, #2a4a2a 50%, #3a5a3a 100%);
}

.auction-icon-small.rarity-strange {
    background: linear-gradient(135deg, #3a4a6a 0%, #2a3a5a 50%, #3a4a6a 100%);
}

.auction-icon-small.rarity-eldritch {
    background: linear-gradient(135deg, #7a4a2a 0%, #5a3a1a 50%, #7a4a2a 100%);
}

.auction-icon-small img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Summary main info */
.auction-summary-main {
    flex: 1;
    min-width: 0;
}

.auction-item-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auction-price-line {
    font-size: 0.8em;
    color: #c4a574;
}

.auction-price-line .bid-amount {
    color: #daa520;
    font-weight: bold;
}

/* Summary meta (level, time) */
.auction-summary-meta {
    text-align: right;
    flex-shrink: 0;
}

.auction-level {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #b8a080;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auction-time {
    font-size: 0.7em;
    color: #8a7a5a;
    margin-top: 2px;
}

/* Expanded details section */
.auction-details {
    display: none;
    overflow: hidden;
}

.auction-card.open .auction-details {
    display: block;
    animation: occultCardOpen 0.4s ease-out;
    transform-origin: top center;
}

.auction-card.closing .auction-details {
    animation: occultCardClose 0.3s ease-in forwards;
}

/* Details inner container */
.auction-details {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 50%, #4a4a4a 100%);
    padding: 3px;
    margin-top: -2px;
    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);
}

.auction-details.rarity-odd {
    background: linear-gradient(135deg, #3a5a3a 0%, #2a4a2a 50%, #3a5a3a 100%);
}

.auction-details.rarity-strange {
    background: linear-gradient(135deg, #3a4a6a 0%, #2a3a5a 50%, #3a4a6a 100%);
}

.auction-details.rarity-eldritch {
    background: linear-gradient(135deg, #7a4a2a 0%, #5a3a1a 50%, #7a4a2a 100%);
}

.auction-details-inner {
    padding: 12px;
    background: rgba(15, 10, 5, 0.95);
    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);
}

/* Bid input row */
.auction-bid-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
}

.auction-bid-input {
    flex: 1;
    padding: 10px 14px;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #daa520;
    background: rgba(30, 22, 12, 0.9);
    border: 1px solid #5a4a3a;
    border-radius: 4px;
    outline: none;
    text-align: center;
}

.auction-bid-input:focus {
    border-color: #8b5a2b;
    box-shadow: 0 0 8px rgba(139, 90, 43, 0.3);
}

.auction-bid-input::placeholder {
    color: #6a5a4a;
    font-size: 0.85em;
}

/* Auction action buttons row */
.auction-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* Owner notice when viewing own auction */
.auction-owner-notice {
    padding: 10px;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #8a7a5a;
    font-style: italic;
    background: rgba(60, 50, 35, 0.3);
    border-radius: 4px;
    margin-bottom: 12px;
}

/* Slot type icon in details */
.auction-slot-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(40, 30, 20, 0.5);
    border-radius: 4px;
}

.auction-slot-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.8;
}

.auction-slot-text {
    font-size: 0.8em;
    color: #b8a080;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Empty state message */
.auction-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8a7a5a;
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    font-style: italic;
}

/* Create auction button */
.auction-create-btn {
    display: block;
    width: 100%;
    margin-top: 15px;
    padding: 14px 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #daa520;
    background: linear-gradient(135deg, #3d2a07 0%, #5a4a3a 50%, #3d2a07 100%);
    border: 1px solid #8b5a2b;
    cursor: pointer;
    transition: all 0.2s ease;
    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);
}

.auction-create-btn:hover {
    background: linear-gradient(135deg, #5a4a3a 0%, #7a5a3a 50%, #5a4a3a 100%);
}

/* Bidder info */
.auction-bidder {
    font-size: 0.75em;
    color: #8a7a5a;
    margin-top: 4px;
}

/* Auction detail row (for full info) */
.auction-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(90, 74, 58, 0.3);
}

.auction-detail-row:last-child {
    border-bottom: none;
}

.auction-detail-label {
    color: #8a7a5a;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.auction-detail-value {
    color: #c4a574;
    font-size: 0.85em;
    font-family: 'Cinzel', serif;
}

/* Create Auction Modal Styles */
.auction-select-instructions {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    text-align: center;
}

.auction-select-list {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 5px;
}

.auction-select-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(30, 22, 12, 0.8);
    border: 1px solid #3a2a1a;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auction-select-item:hover {
    background: rgba(50, 40, 25, 0.9);
    border-color: #5a4a3a;
}

.auction-select-item.selected {
    background: linear-gradient(135deg, #3a5a3a 0%, #2a4a2a 50%, #3a5a3a 100%);
    border-color: #4a7c4a;
}

/* Rarity colors for auction select items */
.auction-select-item.odd {
    border-left: 3px solid #4a7c4a;
}

.auction-select-item.strange {
    border-left: 3px solid #4a6a9c;
}

.auction-select-item.eldritch {
    border-left: 3px solid #9c5a2a;
}

.auction-select-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.auction-select-name {
    flex: 1;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #c4a574;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auction-select-item.selected .auction-select-name {
    color: #daa520;
}

.auction-select-level {
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #8a7a5a;
    text-transform: uppercase;
}

.auction-bid-setup {
    padding: 12px;
    background: rgba(40, 30, 20, 0.5);
    border-radius: 4px;
    margin-top: 15px;
}

.auction-selected-item {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #b8a080;
    margin-bottom: 12px;
    text-align: center;
}

.auction-selected-item strong {
    color: #daa520;
}

.auction-starting-bid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auction-starting-bid label {
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    color: #8a7a5a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Tab count badge */
.auction-tab-count {
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.7;
}

/* Auction icon in summary card */
.auction-icon span {
    font-size: 1.5em;
}

/* Auction current bid styling */
.auction-bid-info {
    margin-top: 10px;
    padding: 10px;
    background: rgba(40, 30, 20, 0.5);
    border-radius: 4px;
}

.auction-current-bid {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #c4a574;
    margin-bottom: 6px;
}

.auction-current-bid span {
    color: #daa520;
    font-weight: bold;
}

.auction-expires {
    font-size: 0.8em;
    color: #8a7a5a;
}

/* Auction inspect content */
.auction-inspect-content {
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    color: #b8a080;
    line-height: 1.6;
}

/* Auction inspect modal - detailed view */
.auction-inspect-modal {
    font-family: 'Cinzel', serif;
    color: #b8a080;
}

.auction-inspect-header {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(184, 160, 128, 0.3);
}

.auction-inspect-name {
    font-size: 1.2em;
    color: #daa520;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auction-inspect-modal.strange .auction-inspect-name { color: #60a5fa; }
.auction-inspect-modal.odd .auction-inspect-name { color: #4ade80; }
.auction-inspect-modal.eldritch .auction-inspect-name { color: #f97316; }

.auction-inspect-sub {
    font-size: 0.85em;
    color: #8a7a5a;
    margin-top: 4px;
}

.auction-inspect-slot {
    font-size: 0.8em;
    color: #6a5a4a;
    margin-top: 2px;
}

.auction-inspect-seller,
.auction-inspect-bid {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(184, 160, 128, 0.2);
}

.seller-label, .bid-label {
    color: #8a7a5a;
}

.seller-name {
    color: #daa520;
}

.bid-amount {
    color: #4ade80;
    font-weight: bold;
}

.auction-inspect-desc {
    font-size: 0.85em;
    color: #9a8a6a;
    font-style: italic;
    padding: 10px 0;
    line-height: 1.5;
    border-bottom: 1px solid rgba(184, 160, 128, 0.2);
}

.auction-inspect-stats {
    padding: 10px 0;
}

.stats-label, .perks-label {
    font-size: 0.85em;
    color: #8a7a5a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.stats-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stats-icons .forge-stat-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
}

.stats-icons .forge-stat-icon img {
    width: 20px;
    height: 20px;
}

.stats-icons .stat-value {
    font-size: 0.85em;
    color: #daa520;
}

.auction-inspect-perks {
    padding: 10px 0;
}

.auction-perk {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    border-left: 3px solid #9ca3af;
}

.auction-perk.odd { border-left-color: #4ade80; }
.auction-perk.strange { border-left-color: #60a5fa; }
.auction-perk.eldritch, .auction-perk.legendary { border-left-color: #f97316; }
.auction-perk.uncommon { border-left-color: #4ade80; }
.auction-perk.rare { border-left-color: #60a5fa; }

.perk-name {
    font-size: 0.9em;
    color: #daa520;
}

.perk-rarity {
    font-size: 0.75em;
    color: #8a7a5a;
}

.perk-effect {
    font-size: 0.8em;
    color: #9a8a6a;
    margin-top: 4px;
}

.auction-inspect-value {
    text-align: right;
    font-size: 0.85em;
    color: #6a5a4a;
    padding-top: 10px;
    border-top: 1px solid rgba(184, 160, 128, 0.2);
}

/* ==================== Auction Filter Panel (Slide-in Drawer) ==================== */
.auction-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.auction-filter-overlay.open {
    opacity: 1;
    visibility: visible;
}

.auction-filter-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 320px;
    height: 100%;
    background: linear-gradient(180deg, #1a1208 0%, #0f0a05 100%);
    border-right: 2px solid #5a4a3a;
    z-index: 2501;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.auction-filter-overlay.open .auction-filter-panel {
    transform: translateX(0);
}

.auction-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: linear-gradient(180deg, #2a1f14 0%, #1a1208 100%);
    border-bottom: 1px solid #5a4a3a;
}

.auction-filter-title {
    font-family: 'Cinzel', serif;
    font-size: 1.2em;
    color: #daa520;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.auction-filter-close {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #5a4a3a 0%, #3d2a07 50%, #2a1a04 100%);
    border: none;
    color: #b8a080;
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    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);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        inset 0 1px 2px rgba(0,0,0,0.4);
    transition: all 0.2s ease;
}

.auction-filter-close:hover {
    background: linear-gradient(135deg, #7a5a4a 0%, #4d3a17 50%, #3a2a14 100%);
    color: #d4b584;
}

.auction-filter-close:active {
    background: linear-gradient(135deg, #3d2a07 0%, #2a1a04 50%, #1a0f04 100%);
    transform: scale(0.95);
}

.auction-filter-body {
    flex: 1;
    padding: 10px;
    padding-bottom: 20px;
    overflow-y: auto;
}

.auction-filter-section {
    position: relative;
    margin-bottom: 15px;
    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);
}

.auction-filter-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(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;
}

.auction-filter-section::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background: rgba(15, 10, 5, 0.95);
    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;
}

.auction-filter-section-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: #b8a080;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(90, 74, 58, 0.3);
}

.auction-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.auction-filter-option {
    position: relative;
    padding: 8px 12px;
    background: linear-gradient(135deg, #3a3020 0%, #2a2010 50%, #1a1005 100%);
    font-family: 'Cinzel', serif;
    font-size: 0.75em;
    color: #8a7a6a;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: capitalize;
    clip-path: polygon(5px 0%, calc(100% - 5px) 0%, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0% calc(100% - 5px), 0% 5px);
    box-shadow:
        0 0 0 1px rgba(90, 74, 58, 0.6),
        inset 0 1px 2px rgba(0,0,0,0.4);
}

.auction-filter-option:active {
    transform: scale(0.95);
}

.auction-filter-option.active {
    background: linear-gradient(135deg, #6a5a3a 0%, #4a3a1a 50%, #3a2a0a 100%);
    color: #daa520;
    box-shadow:
        0 0 0 1px rgba(218, 165, 32, 0.5),
        inset 0 1px 2px rgba(0,0,0,0.4),
        0 0 8px rgba(218, 165, 32, 0.3);
}

.auction-filter-option.rarity-common.active {
    color: #9a9a9a;
    box-shadow:
        0 0 0 1px rgba(107, 107, 107, 0.6),
        inset 0 1px 2px rgba(0,0,0,0.4),
        0 0 8px rgba(107, 107, 107, 0.3);
}

.auction-filter-option.rarity-odd.active {
    color: #7ac97a;
    box-shadow:
        0 0 0 1px rgba(74, 124, 74, 0.6),
        inset 0 1px 2px rgba(0,0,0,0.4),
        0 0 8px rgba(74, 124, 74, 0.3);
}

.auction-filter-option.rarity-strange.active {
    color: #7a9adc;
    box-shadow:
        0 0 0 1px rgba(74, 106, 156, 0.6),
        inset 0 1px 2px rgba(0,0,0,0.4),
        0 0 8px rgba(74, 106, 156, 0.3);
}

.auction-filter-option.rarity-eldritch.active {
    color: #dc8a4a;
    box-shadow:
        0 0 0 1px rgba(156, 90, 42, 0.6),
        inset 0 1px 2px rgba(0,0,0,0.4),
        0 0 8px rgba(156, 90, 42, 0.3);
}

.auction-filter-footer {
    padding: 15px;
    background: linear-gradient(180deg, #1a1208 0%, #2a1f14 100%);
    border-top: 1px solid #5a4a3a;
    display: flex;
    gap: 10px;
}

.auction-filter-footer .game-btn {
    flex: 1;
    width: auto;
    height: 45px;
}

/* Filter button in main auction page - uses game-btn structure */
.auction-filter-trigger {
    width: 160px;
    height: 45px;
    background: linear-gradient(135deg, #8a7a5a 0%, #6a5a3a 50%, #4a3a2a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    padding: 3px;
    margin: 10px auto;
    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;
}

.auction-filter-trigger-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.8em;
    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);
}

.auction-filter-trigger:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.9),
        0 2px 4px rgba(0,0,0,0.8),
        0 6px 12px rgba(0,0,0,0.5);
}

.auction-filter-trigger:hover .auction-filter-trigger-inner {
    background: radial-gradient(circle at top, #af8560 0%, #3a2f24 50%, #2a1f14 100%);
    color: #d4b584;
}

.auction-filter-trigger: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);
}

.auction-filter-trigger:active .auction-filter-trigger-inner {
    background: radial-gradient(circle at top, #695740 0%, #2a1f14 50%, #1a0f04 100%);
}

.auction-active-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 5px 0;
    padding: 0 10px;
}

.auction-active-filter-tag {
    padding: 4px 10px;
    background: linear-gradient(135deg, #3a3020 0%, #2a2010 50%, #1a1005 100%);
    font-family: 'Cinzel', serif;
    font-size: 0.65em;
    color: #b8a080;
    text-transform: capitalize;
    clip-path: polygon(4px 0%, calc(100% - 4px) 0%, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0% calc(100% - 4px), 0% 4px);
    box-shadow:
        0 0 0 1px rgba(90, 74, 58, 0.6),
        inset 0 1px 2px rgba(0,0,0,0.3);
}