/* Part 4 of 7 of the game's stylesheet (was style.css; the parts load in order, so rule
   order is exactly as before). Mostly: Story and class-selection transitions, travel overlay, grimoire, resonance buttons, primary commands, hero/enemy battle frames, title menu, world header. */

/* --- CINEMATIC STORY OVERLAY --- */

#intro-overlay.active {
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* Ensure the book itself has a slight scale-up animation when it appears */

#intro-overlay.active .modal-box.book-theme {
    transform: scale(1) translateY(0);
}

#story-text-container.visible {
    opacity: 1;
}

/* Add a slight blur to the background during transitions to focus on the text */

/* --- CINEMATIC CLASS SELECTION TRANSITION --- */
#overlay { 
    display: flex !important; /* Keep flex active for centering */
    
    /* The Magic Sauce: Start Hidden */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(10px);
    z-index: 999;
    /* Full Page Scroll Behavior */
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 20px;
    display: flex;
}

#overlay.active {
    opacity: 1;
    visibility: visible; display: flex;
}

/* Optional: Make the Class Selection Box slide up slightly as it fades in */
#overlay.active .modal-box {
    animation: fadeInUp 1.2s ease-out forwards;
}

/* --- TRAVEL OVERLAY --- */
#travel-overlay {
    position: fixed;
    inset: 0;
    z-index: 8000; /* Above everything */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
    pointer-events: none;
}

#travel-content {
    transform: translateY(20px);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    align-items: center; /* This centers all children horizontally */
    text-align: center;
}

/*#travel-icon-wrap {
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px var(--z-col));
    transform: scale(2);
}*/
#travel-icon-wrap {
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px var(--z-col));
    width:100%;
    height: 100%;
    max-width: 90%;
    max-width: 90%;
    
    max-width:80%;
    max-height:75vh;
    height:auto;
    width: auto;
    display: inline-block; /* Forces the box to shrink to the image size */
    margin: 0 auto 25px auto; /* Centers the box itself */
    line-height: 0; /* Removes extra vertical space from images */
    /* Your Stylized Border */
    /*padding: 8px;*/
    background: #2a2118;
    border: 4px solid var(--z-col);
    box-shadow: 
        inset 0 0 0 2px #1a140f, 
        0 4px 10px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.travel-text {
    font-family: var(--font-head);
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

#travel-loc-name {
    font-family: var(--font-head);
    font-size: 32px;
    color: #fff;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Moving progress bar for the "loading" feel */
.travel-bar-track {
    width: 200px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.travel-bar-fill {
    position: absolute;
    height: 100%;
    width: 50%;
    background: var(--z-col);
    left: -50%;
    animation: travel-progress 1.2s infinite linear;
}

@keyframes travel-progress {
    0% { left: -50%; }
    100% { left: 100%; }
}


/* Container and Scroll Area */

/* Category Labels */

/* The Shop Button (Minimalist) */

.sanc-row-btn:hover:not(:disabled) {
    border-color: var(--accent-gold);
    background: #1c1f26;
}

/* Row Info (Shortened) */

.sanc-row-desc {
    display: block;
    font-size: 9px !important;
    text-transform: uppercase;
    font-size: 11px;
    color: #888;
    line-height: 1.2;
    margin-top: 2px;
    text-align: left;
}

/* Price Tags */

/* Footer (Ritual Buttons) */

/* Sanctuary Layout */

.sanc-scroll-body {
    padding: 10px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Ensures smooth kinetic scrolling on mobile browsers */
    padding-bottom: 80px; /* Crucial: Extra padding at the bottom so content isn't trapped behind the floating REST button */
}

/* Section Labels */

/* Grid for Relics */

/* Universal Button Tile Style */

/* Button Text Styling */

.sanc-row-price {
    margin-top: 4px;
    opacity: 0.7;
    font-family: var(--font-head);
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    border-radius: 3px;
    min-width: 65px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: var(--gold-bright); /* Gold color */
    padding-left: 10px;
    white-space: nowrap;
}

/* Footer Rituals (Side-by-Side) */

/* Visual States */

.legendary {
    border-color: var(--magic);
    background: rgba(197, 108, 240, 0.02);
}

/* Ensure uniformity in the footer */

/* Specific button borders for rituals */
#btnRest { border-color: rgba(39, 174, 96, 0.3); /* Absolute Positioning */ position: absolute; bottom: 16px; right: 16px; z-index: 99; /* Layout & Sizing */ display: flex; align-items: center; gap: 12px; width: auto; max-width: 170px; padding: 8px 14px; /* Slightly wider padding for a more intentional card shape */ /* Dark RPG Plate Background */ /* Background & Reset raw border */ background: linear-gradient(135deg, #1a1412 0%, #0d0a09 100%); border: none; /* Removing standard border to let pseudo-element handle it */ border-radius: 4px; /* Retaining your epic depth shadows */ box-shadow: 
        inset 0 0 8px rgba(223, 177, 91, 0.15),
        0 8px 20px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(223, 177, 91, 0.1); cursor: pointer; text-transform: uppercase; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); -webkit-tap-highlight-color: transparent; }
#btn-retire { border-color: rgba(255, 92, 92, 0.3); /* Increased the spread and opacity so you can actually see it */ animation: shadow-breathe 2.5s infinite ease-in-out; }

/* Ensure icons don't break layout */

/* Shop Row Container */
.sanc-row-btn {
    justify-content: space-between;
    display: grid;
    grid-template-columns: 60px 1fr auto; /* [Icon] [Name/Desc] [Price] */
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 8px;
    margin-bottom: 8px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-align: left; /* Reset button default */
}

/* Grouping Icon + Text on the Left */
.sanc-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

/* Vertical Text Stack in the Center */

.sanc-row-name {
    font-family: var(--font-head);
    letter-spacing: 1px;
    grid-column: 2; /* Stay in second column */
    margin: 0 !important;
    padding: 0 5px;
    white-space: nowrap; /* Prevents wrapping */
    display: block;      /* Ensures it fills the grid cell */
    font-weight: bold;
    font-size: 14px;
    color: #eee;
    text-transform: uppercase;
    text-align: left;
    padding-left:0px;
}

/* Price Locked to the Right */

/* Ritual Footer Mirroring */

/* If you use icons inside buttons or rows, ensure they center well */
.sanc-icon-box, .dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px; /* Minimum space for the icon */
}

/* style.css */
.amulet-circle {
    box-shadow: 0 0 15px rgba(var(--accent-gold-rgb), 0.2);
    position: relative;
    overflow: hidden; /* Clips any sprite misalignment */
    width: 100%; height: 100%; border: 2px solid var(--ink); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: #fdfaf0;
}

/* Ensure the sprite within the circle remains crisp */
/* 1. THE OVERLAY (The background scroll container) */

/* 2. THE GRIMOIRE (The Modal Box) */

/* 3. REMOVE INNER SCROLLING */

/* The Big First Letter (Drop Cap) */
#story-text-container::first-letter {
    margin-top: 5px; /* Deep blood red */
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    font-family: 'Cinzel', serif;
    font-size: 4rem;
    float: left;
    line-height: 0.8;
    margin-right: 12px;
    color: var(--blood); /* Deep crimson ink */
}

/* Grimoire Action Button */

/* style.css */

/* style.css */
.modal-box.book-theme {
    border: 12px solid var(--ink) !important; /* Thick leather frame */
    border-radius: 4px !important;
    padding: 60px 50px !important;
}

/* Fix the text container so it doesn't have its own scrollbar */

/* Cinematic Drop Cap */

/* style.css */

/* Apply Grimoire visuals to the selection box */
#overlay .modal-box.book-theme {
    width: 95%;
    max-width: 650px;
    height: auto !important;
    max-height: none !important;
    background-color: var(--parchment) !important;
    background-image: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(139, 69, 19, 0.15) 100%) !important;
    border: 12px solid var(--ink) !important;
    outline: 2px solid var(--accent-gold);
    outline-offset: -8px;
    padding: 50px 30px !important;
    color: var(--blood-dark);
}

/* style.css additions */

.portrait-side {
    width: 140px; /* Reduced from 190px for better fit */
    min-height: 120px;
}

@media (max-width: 800px) {
    .portrait-side {
        width: 100% !important; /* Spans full width on mobile */
        border-right: none;
        border-bottom: 2px solid var(--ink);
        padding: 20px 0;
        overflow: hidden;
        vertical-align: top;
        justify-content: top;
    }
    .modal-box, .modal-box.book-theme {
        padding:30px !important;
    }
    
    #intro-overlay, #overlay {
        padding: 30px 0px; /* Gives the book breathing room at top/bottom */
    }
}
/* style.css */

/* The card container */

/* Narrow but tall pillar for the sprite */
.portrait-pillar {
    /* CHANGE THIS: */
    border-right: 2px solid var(--ink);
    width: 110px;
    flex-shrink: 0;
    display: flex;
    /* Changing from flex-start to stretch ensures children fill the height */
    align-items: stretch;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #000; /* Backdrop for any transparent areas */
}


/* The text area */

/* Mobile Adjustments */
@media (max-width: 800px) {
    .portrait-pillar {
        width: 85px; /* Even narrower on mobile */
    }
    .book-theme h1 {
        font-size: 26px !important;
        letter-spacing: 2px !important;
    }
}

/* style.css */
.hero-portrait-mini {
    width: 100px;
    height: 150px;
    background: radial-gradient(circle at top, rgba(var(--accent-gold-rgb), 0.15) 0%, transparent 80%);
    border: 1px solid #3a404a;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
.hero-portrait-mini .ui-static-icon {
    height: 130%;
}

#hero-sprite {
    width: 100px;
    height: 150px;
    background: radial-gradient(circle at top, rgba(var(--accent-gold-rgb), 0.15) 0%, transparent 80%);
    border: 1px solid #3a404a;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    padding-top:0px !important;
    /*display: flex !important;
    align-items: center;
    justify-content: center;*/
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.9)); /* Sharp shadow for the sprite */
    z-index: 1;
}

#enemy-sprite {
    width: 100px;
    height: 150px;
    border-radius: 4px;
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: center;
    flex-shrink: 0;
    padding-top:0px !important;
    /* Overriding default border and background */
    border: 2px solid var(--blood-dark) !important; /* Deep blood-red tint */
    background: #0d0d0d !important;      /* Near black */
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.9),         /* Strong floor shadow */
        inset 0 0 0 1px #4a1414,            /* Inner rusted metal rim */
        inset 0 0 30px rgba(0,0,0,1) !important; /* Intense inner shadow */
    position: relative;
    overflow: hidden;
}
#enemy-sprite .ui-static-icon {
    height: 130%;
}
#enemy-sprite .enemy-icon {
    
        width: auto;
    height: 100%;
    object-fit: contain;
}

/* style.css */

.dock-item {
    padding-top: 5px; /* Stacks icon on top of text */ /* Or your preferred font */
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px; /* Gives perfectly balanced vertical separation inside 58px */
    background: transparent; /* Ensures no blocky background shapes disrupt the dock */
    border: none;
    cursor: pointer;
    padding: 6px 4px 4px;
    position: relative;
    color: #62626a; /* Slightly dimmed unselected text to increase contrast depth */
    font-family: 'Cinzel', serif;
    font-size: 8px; /* Returned to 8px to prevent text from feeling bulky */
    font-weight: 600;
    letter-spacing: 0.14em; /* Increased spacing makes small text vastly more readable and "premium" */
    text-transform: uppercase;
    transition: color 0.25s ease, background 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Target the sprites inside the dock items */

/* Specific fix for the Hero icon if it uses the 64px character sprite */

/* Adjust the icon container to ensure centering */
.dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
#resonance-wrapper .btn-action {
  
  display: flex; flex-shrink: 0;
  justify-content: left;
  vertical-align: middle;
  align-items: left;
}

.res-icon {
  display: flex; flex-shrink: 0; vertical-align: middle; align-items: center;
  height:30px;
  width: 30px;
}
.btn-resonance .res-icon {
  display: flex; flex-shrink: 0; vertical-align: middle; align-items: center;
  /*max-height:30px;
  max-width:30px;
  height:100%;
  width: 100%;*/
  flex:1;
}

/* --- TINTED RESONANCE BUTTONS USING VARIABLES --- */

/* MIGHT - Tinted with --fury */
#res-btn-dawn {
    border-color: var(--fury) !important;
    /* Mixes 15% of the fury variable with the dark background */
    background: linear-gradient(135deg, color-mix(in srgb, var(--fury), transparent 85%) 0%, #121418 100%) !important;
    box-shadow: 0 4px 0 #2a150e, 0 0 10px rgba(255, 159, 26, 0.1);
}

/* POISE - Tinted with Light Grey */
#res-btn-twilight {
    border-color: #dcdde1 !important;
    background: linear-gradient(135deg, color-mix(in srgb, #dcdde1, transparent 90%) 0%, #121418 100%) !important;
    box-shadow: 0 4px 0 #1e2124;
}

/* ARTS - Tinted with --magic */
#res-btn-eclipse {
    border-color: var(--magic) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--magic), transparent 85%) 0%, #121418 100%) !important;
    box-shadow: 0 4px 0 #1a0e21, 0 0 10px rgba(197, 108, 240, 0.1);
}

/* --- PRIMARY COMMAND ENHANCEMENTS --- */

/* Targets only the Amulet, Strike, and Skill buttons */

/* Make the Icon Well stand out on primary buttons */



/* Hover state for primary actions */

/* Active "Pressed" state */

/* Ensure the Hero Card has relative positioning so the absolute button knows where to stay */
#card-hero {
    position: relative; /* REQUIRED */
    overflow: visible !important; /* Allows the button to peek outside the card boundaries */
}

#btn-salve-hero {
    position: absolute; /* Keep absolute */
    /* Move it to the far right, outside the main meter area */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Styling to make it look like a distinct side-tab */
    width: 46px;
    height: 46px;
    background: #121418;
    border: 2px solid var(--safe);
    border-radius: 8px 8px 8px 8px; /* Rounded on the left, squarer on the right */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100; /* Ensures it stays above the health bars */
    box-shadow: -4px 0 10px rgba(0,0,0,0.5);
}

/* Adjust the icon and text inside */
#btn-salve-hero span:first-child {
    font-size: 18px;
    margin-bottom: -2px;
}

#pot-count {
    font-size: 11px;
    font-weight: bold;
    color: var(--safe);
}

#btn-dragon-essence-hero {
    position: absolute; /* Keep absolute */
    /* Move it to the far right, outside the main meter area */
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    
    /* Styling to make it look like a distinct side-tab */
    width: 46px;
    height: 46px;
    background: #121418;
    border: 2px solid var(--safe);
    border-radius: 8px 8px 8px 8px; /* Rounded on the left, squarer on the right */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100; /* Ensures it stays above the health bars */
    box-shadow: -4px 0 10px rgba(0,0,0,0.5);
}

/* Adjust the icon and text inside */
#btn-dragon-essence-hero span:first-child {
    font-size: 18px;
    margin-bottom: -2px;
}

#dragon-essence-count {
    font-size: 11px;
    font-weight: bold;
    color: var(--safe);
}

#resonance-wrapper .btn-resonance {
    min-width: 0; /* Prevents text from forcing the button to grow wide */
    border-radius: 4px !important;
    padding: 0 4px 0 34px !important; /* Leaves room for the 30px absolute sidebar slot */
    position: relative;
    height: 100%;
    transition: all 0.2s ease;
}

/* style.css */



/* Sidebar Specific: Scale down for the 3 vertical resonance buttons */
#resonance-wrapper .ui-static-icon {
    /*height: 100%;*/ /* Smaller height to fit the sidebar rows */
    flex-shrink:0;
    
}

/* Main Action Grid: Ensure icons don't squash text */

/* style.css */

.portrait-pillar .ui-static-icon {
    /* Force the image to ignore the base 32px size */
    width: 100% !important;
    height: 100% !important;
    
    /* Cover ensures the entire pillar is filled, cropping the sides if needed */
    object-fit: cover !important;
    
    /* Center the character in the pillar */
    object-position: center top !important; 
    
    /* Keep your retro pixels sharp */
    
}
.location-card .ui-static-icon {
    /* Force the image to ignore the base 32px size */
    width: 100%;
    height: 100%;
    
    /* Cover ensures the entire pillar is filled, cropping the sides if needed */
    object-fit: cover !important;
    
    /* Center the character in the pillar */
    object-position: center top !important; 
    
    /* Keep your retro pixels sharp */
    
}


.ui-static-icon {
    height: 100%;
    width: auto;
    object-fit: contain;
     /* Keeps your 32x32 tiles crisp */
    vertical-align: middle;
}

.btn-dashboard {
    min-width: 0;
    flex: 1;
    background: transparent;
    border: 1px solid transparent; /* Invisible border to prevent layout shifting on tap */
    border-radius: 6px;
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    cursor: pointer;
    /* Smooth transition for the tap effect */
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
}

.btn-dashboard:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #555;
}

.dash-icon {
    font-size: 1.4rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.btn-dashboard:active .dash-icon {
    transform: scale(0.9);
}

.dash-label {
    white-space: nowrap;
    font-family: var(--font-head), sans-serif;
    font-size: 8px;
    color: #666; /* Subdued gray */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900;
    transition: color 0.15s;
}

/* Specific styling for the Magic/Lore button */
.btn-dashboard[style*="--btn-color"] .dash-label {
    color: var(--magic);
    opacity: 0.8;
}
.dashboard-container .btn-dashboard .dash-icon {
    height: 50px;
}

#settings-overlay .btn-action {
    display: flex;
    align-items: center;    /* Vertically centers the text relative to the image */
    justify-content: flex-start; /* Ensures content starts from the left */
    padding: 0;             /* Remove default padding to let panels fill the space */
    overflow: hidden;       /* Keeps the image corners from spilling out */
    text-align: left;
    gap: 15px;              /* Space between the image and the text */
}

/* This styles the 'left panel' (the image) */
#settings-overlay .ui-static-icon {
    height: 50px;           /* Fixed height */
    width: 50px;            /* Fixed width to make it a square panel */
    object-fit: contain;    /* Ensures pixel art isn't distorted */
    background: rgba(0, 0, 0, 0.2); /* Subtle background to distinguish the panel */
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* Vertical divider line */
    /*padding: 5px;*/
    flex-shrink: 0;         /* Prevents the image from squishing */
}

/* Optional: If you want the text to have a bit of padding from the right edge */
#settings-overlay .btn-action span, 
#settings-overlay .btn-action {
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* 1. Base Styles (Hidden by default for larger screens) */

/* 2. Responsive Trigger (Show only on smaller screens) */
@media screen and (max-width: 768px) {
    #nav-dock {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 5px 0;
    }
}

/* 3. Button Styling (The Container) */

/* 4. Icon Styling (Handling the non-transparent squares) */
#nav-dock .ui-static-icon, #nav-dock .dock-icon {
    width: 32px;  /* Control icon size */
    height: 32px;
    margin-bottom: 4px;
    border-radius: 4px; /* Softens the square edges */
    border: 1px solid #555; /* Makes the non-transparent block look like a framed tile */
    object-fit: contain;
    background-color: #000; /* Optional: provides a consistent backing for the icons */
}

/* 5. Active and Hover States */

.dock-item.active img, .dock-item.active .dock-icon {
    border-color: var(--gold-bright);
    box-shadow: 0 0 5px rgba(var(--gold-bright-rgb), 0.5);
}

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

/* Container remains flex to put buttons side-by-side */

/* The Button: Forced into 2 strict columns */

/* Column 1: The Icon Socket - UPDATED to fill */

/* The Square Icon - UPDATED to fill the span */


/* Column 2: The Text */

/* Branding */
/*#btnRest { border-left: 4px solid var(--safe); }
#btn-retire { border-left: 4px solid var(--danger); }*/

/* THE PULSE: Enhanced visibility */

@keyframes shadow-breathe {
    0% { 
        box-shadow: 0 0 0px rgba(0, 0, 0, 0); 
    }
    50% { 
        /* The 3rd value (15px) is the blur, the 4th (4px) is the spread */
        box-shadow: 0 0 15px 4px rgba(255, 0, 0, 0.35); 
    }
    100% { 
        box-shadow: 0 0 0px rgba(0, 0, 0, 0); 
    }
}

/* 1. The Container Row */

/* 2. The Icon Container (The Socket) */

.sanc-icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;  /* Larger size for the list icon */
    height: 48px;
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

/* 3. The Icon Image (Solving the 'tiny' problem) */
.sanc-icon-inline {
    object-fit: cover;
}

/* 4. Text Info Area */
.sanc-row-info {
    display: flex;
    flex-direction: column;
    /*padding-left: 12px;*/
    overflow: hidden;
}

/* 5. The Price Tag */

/* 6. States and Special Effects */
.sanc-row-btn:disabled {
    opacity: 0.6;
    filter: grayscale(0.8);
    cursor: not-allowed;
}

.sanc-row-btn.legendary {
    border: 1px solid var(--magic);
    background: linear-gradient(90deg, #1a1a1a, #2a1a3a);
}

.sanc-row-btn:active:not(:disabled) {
    transform: scale(0.98);
}
#btn-salve-hero .ui-static-icon {
    height: 30px;
}
#btn-dragon-essence-hero .ui-static-icon {
    height: 30px;
}

/* Container - Already centers children, but let's be sure */

/* Fix for the Centering */

#travel-icon-wrap .ui-static-icon {
    width: 100%; /* Doubled size */
    height: 100%;
    display: block; /* Removes bottom whitespace alignment */
    margin: 0 auto; /* Extra centering safety */
     
    
    object-fit:contain;
    max-height:65vh;
}

/* Add a shadow overlay to make the icon look "deep" in the frame */
#travel-icon-wrap::after {
    content: "";
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Ensure the Boss Icon fills the frame exactly like the previous one */

/* Boss Variant: You can add this class to the #travel-icon-wrap in your HTML 
   if you want a different "danger" feel for bosses */

/* Base Card Style (for context) */
.location-card {
    position: relative;
    background: #1a140f;
    /*margin-bottom: 8px;*/
    overflow: hidden;
}

/* THE ACTIVE STATE */
.location-card.active {
    background: #2a2118; /* Slightly lighter background */
    border: 1px solid var(--accent-gold, var(--gold-old));
    box-shadow: inset 0 0 15px rgba(var(--gold-old-rgb), 0.1), 0 0 10px rgba(0, 0, 0, 0.5);
    transform: scale(1.02); /* Slight pop out effect */
    z-index: 2; /* Ensure glow/shadow sits above neighbors */
}

/* The "You Are Here" Indicator */
.location-card.active::before {
    content: "CURRENT LOCATION";
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent-gold, var(--gold-old));
    color: #000;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 8px;
    border-bottom-left-radius: 4px;
    letter-spacing: 1px;
}

/* Animated Border Glow */
.location-card.active::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid var(--accent-gold, var(--gold-old));
    animation: pulse-border 2s infinite;
    pointer-events: none;
}

@keyframes pulse-border {
    0% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.01); }
    100% { opacity: 0.5; transform: scale(1); }
}

/* Enhancing the icon of the active location */

@keyframes floatArc {
    0% {
        opacity: 0;
        margin-top: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        /* This creates the upward movement */
        margin-top: -120px; 
        /* The 'transform' from JS handles the horizontal drift */
    }
}


/* --- GRIMOIRE STYLE SUMMARY (INK & PARCHMENT) --- */

.skim-container {
    /* Slightly darker parchment tint to look like an indented box */ 
    /* Elegant double border typical of old books */
    border: 1px solid rgba(93, 64, 55, 0.3); /* Deep Crimson Accent */
    margin-bottom: 25px;
    
    /* Typography */
    font-family: 'Crimson Pro', serif;
    color: var(--ink); /* Matching your book text color */
    justify-content: center; /* Centers the summary vertically if it's the only item */
    min-height: 50px;
    display: flex;
    height: 100px; /* Locked height for consistency */
    border-left: 4px solid #4a0404;
    overflow: hidden;
    align-items: center; /* Vertically centers the text side */
    flex-direction: row;
    padding:0px; width: 100%; margin: 20px auto;
}

/* Label for "Next Objective" */

/* The actual location text */

/* The divider between skim and full story */
.story-divider {
    height: 1px;
    background: linear-gradient(to right, rgba(93, 64, 55, 0.3), transparent); border: 0; border-top: 1px dashed var(--ink); margin: 15px 0; opacity: 0.5;
}

/* NEW SCOPED DROP CAP */
/* This ignores the summary and only targets the actual lore paragraphs */
.lore-content p:first-of-type::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 3.8rem;
    float: left;
    line-height: 0.8;
    margin-right: 12px;
    margin-top: 5px;
    color: var(--blood);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.lore-content b {
    color: #4a0404; /* Keep your deep red base */
    font-weight: 700;
    position: relative;
    display: inline-block; /* Helps with animation performance */
    animation: ember-pulse 4s ease-in-out infinite;
    /* Initial state glow */
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.2); 
}
@keyframes ember-pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 140, 0, 0.1);
        color: #4a0404;
    }
    50% {
        /* A warm, amber glow that looks like a dying coal */
        text-shadow: 0 0 15px rgba(255, 165, 0, 0.5),
                     0 0 5px rgba(255, 69, 0, 0.3);
        color: #7a0606; /* Slightly brighter red at the peak of the pulse */
    }
}

.journal-body b {
    color: var(--accent-gold); /* Keep your deep red base */
    font-weight: 700;
    position: relative;
    display: inline-block; /* Helps with animation performance */
    animation: ember-pulse 4s ease-in-out infinite;
    /* Initial state glow */
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.2); 
}
@keyframes ember-pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 140, 0, 0.1);
        color: var(--accent-gold);
    }
    50% {
        /* A warm, amber glow that looks like a dying coal */
        text-shadow: 0 0 15px rgba(255, 165, 0, 0.5),
                     0 0 5px rgba(255, 69, 0, 0.3);
        color: #7a0606; /* Slightly brighter red at the peak of the pulse */
    }
}


/* Ensure the summary box never accidentally triggers a drop cap */
.skim-container::first-letter {
    font-size: inherit;
    float: none;
    color: inherit;
}

/* Make the Void restoration log line pop */

/* Layout Structure */
.journal-layout {
    background: #111;
}

.journal-sidebar {
    /*width: 220px;*/ /* Fixed width to ensure it stays on the side */
    /*min-width: 180px;*/
    padding: 10px 0;
    background: rgba(0,0,0,0.3);
    border-right: 1px solid #333;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
}

/* Button Base Styles */

/* Visual Distinction: ACT */

/* Visual Distinction: CHAPTER */

/* Label & Number Stack */

.toc-identity {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 2px;
    color: #999;
    font-weight: bold;
}

.toc-num {
    font-size: 1.1rem;
}

/* Mobile Specific Adjustments (Keeping sidebar on side) */
@media (max-width: 768px) {

    .journal-page {
        padding: 20px 15px;
    }
}

.elite-glow {
    color: var(--gold-sun) !important; /* Solid Gold */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Simple static underline instead of a glowing beam */
    /*border-bottom: 2px solid var(--gold-sun);*/
    padding-bottom: 2px;

    /* A single, static shadow that doesn't move */
    text-shadow: 1px 1px 0px #000; 
}

/* Remove pseudo-elements entirely to simplify the DOM */
.elite-glow::before, .elite-glow::after {
    display: none !important;
}


/* Optional: Add a label in your refreshUI function */
/* If (STATE.enemy.isElite) enemyName.innerText = "⭐ " + STATE.enemy.name; */

/* Omen Animations */
@keyframes pulse-orange {
    0% { box-shadow: 0 0 5px rgba(230, 81, 0, 0.4); }
    50% { box-shadow: 0 0 20px rgba(230, 81, 0, 0.7); }
    100% { box-shadow: 0 0 5px rgba(230, 81, 0, 0.4); }
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 5px rgba(183, 28, 28, 0.4); }
    50% { box-shadow: 0 0 25px rgba(183, 28, 28, 0.9); }
    100% { box-shadow: 0 0 5px rgba(183, 28, 28, 0.4); }
}

/* Theme Classes */
.omen-pulse-regular {
    animation: pulse-orange 2.5s infinite ease-in-out;
    border: 2px solid #e65100 !important;
}

.omen-pulse-volatile {
    animation: pulse-red 1.5s infinite ease-in-out;
    border: 2px solid #b71c1c !important;
}
/* Omen Status Tags */

/* Pulsing label for the status section */

/*#view-combat {
    background: url('../assets/misc/bg_1.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}*/

.travel-hidden {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

#view-combat {
    transition: background 0.5s ease-in-out;
}

.combat-card {
    background: linear-gradient(145deg, #252a30, #16191d);
    border: 1px solid #3a404a;
    padding: 15px; 
    /*margin-bottom: 12px; */
    position: relative; 
    border-radius: 4px;
    box-shadow: 
        0 10px 25px rgba(0,0,0,0.6), 
        inset 0 1px 1px rgba(255,255,255,0.1),
        inset 0 -2px 10px rgba(0,0,0,0.4);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Lighting Overlay */
.combat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
    pointer-events: none;
    z-index: 2;
}

/* Enhanced Decorative Brackets */



.combat-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    background-image: 
        linear-gradient(to right, var(--accent-gold, var(--gold-muted)) 2px, transparent 2px),
        linear-gradient(to bottom, var(--accent-gold, var(--gold-muted)) 2px, transparent 2px),
        linear-gradient(to left, var(--accent-gold, var(--gold-muted)) 2px, transparent 2px),
        linear-gradient(to top, var(--accent-gold, var(--gold-muted)) 2px, transparent 2px);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 0 0, 0 0, 100% 100%, 100% 100%;
    z-index: 3;
    transition: opacity 0.3s ease;
    opacity: 1;
    filter: drop-shadow(0 0 2px var(--accent-gold, var(--gold-muted)));
}


/* 1. THE OUTER FRAME */
#hero-portrait-container {
    /* Overriding border and background with a more metallic, layered look */
    border: 2px solid var(--ink) !important;
    background: #2c1e1e !important; /* Deep mahogany */
    box-shadow: 
        0 4px 10px rgba(0,0,0,0.8),         /* Drop shadow */
        inset 0 0 0 1px var(--accent-gold),  /* Internal gold rim */
        inset 0 0 25px rgba(0,0,0,1) !important; /* Deep inner shadow */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. THE INNER LIGHTING & OVERLAY */
#hero-portrait-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Creates a focal point behind the sprite */
    background: radial-gradient(circle at center, 
        rgba(var(--gold-old-rgb), 0.15) 0%, 
        transparent 75%);
    pointer-events: none;
}

#hero-portrait-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Glass sheen effect */
    background: linear-gradient(135deg, 
        rgba(255,255,255,0.08) 0%, 
        rgba(255,255,255,0.03) 25%, 
        transparent 50%);
    pointer-events: none;
}

/* 3. THE SPRITE CONTAINER */
#hero-sprite .ui-static-icon{
    height: 150% !important;
}



/* DYNAMIC AURA INTEGRATION */
/* If the container gets resonance classes, this adds a thematic glow */
#hero-portrait-container.aura-dawn { border-color: var(--accent-gold) !important; box-shadow: 0 0 15px var(--accent-gold), inset 0 0 25px #000; }
#hero-portrait-container.aura-twilight { border-color: var(--safe) !important; box-shadow: 0 0 15px var(--safe), inset 0 0 25px #000; }
#hero-portrait-container.aura-eclipse { border-color: var(--magic) !important; box-shadow: 0 0 15px var(--magic), inset 0 0 25px #000; }

/* 1. THE ENEMY FRAME: Darker and more rugged than the Hero frame */

/* 2. THE MENACING LIGHTING: A red/dark-purple focal glow behind the enemy */
#enemy-sprite::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Creates a dark "lair" atmosphere */
    background: radial-gradient(circle at center, 
        rgba(139, 0, 0, 0.2) 0%, 
        transparent 80%);
    pointer-events: none;
}

/* 3. THE "GRIME" OVERLAY: Adds texture and a subtle vignette */
/* 3. THE "GRIME" OVERLAY & CORNER DESIGN */
#enemy-sprite::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* Layer 1: Linear gradient vignette (your original logic)
       Layer 2: Conic-gradient to create corner "brackets" 
    */
    background: 
        linear-gradient(rgba(0,0,0,0.4) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.6) 100%),
        conic-gradient(from 90deg at 2px 2px, transparent 0 90deg, #4a1414 0) 0 0 / calc(100% - 2px) calc(100% - 2px),
        rgba(0,0,0,0.1);

    /* Original positioning and z-index from your code */
    pointer-events: none;
    z-index: 2;

    /* Corner Styling: This adds the "bracket" visual in all 4 corners */
    mask: 
        conic-gradient(from 180deg at 12px 12px, #000 0 90deg, transparent 0) 0 0 / 100% 100%,
        conic-gradient(from 0deg at calc(100% - 12px) calc(100% - 12px), #000 0 90deg, transparent 0) 0 0 / 100% 100%,
        conic-gradient(from -90deg at calc(100% - 12px) 12px, #000 0 90deg, transparent 0) 0 0 / 100% 100%,
        conic-gradient(from 90deg at 12px calc(100% - 12px), #000 0 90deg, transparent 0) 0 0 / 100% 100%;
    
    /* Ensuring the corners are prominent but don't obscure the center */
    padding: 2px;
}


/* 4. THE ENEMY ICON: Handles pixel art scaling and floating animation */
#enemy-sprite img.enemy-icon {
    filter: drop-shadow(0 6px 10px rgba(0,0,0,1)); /* Heavy shadow below the foe */
    position: relative;
    z-index: 1;
}


/* BOSS SPECIFIC EFFECTS: Integration with your boss-aura logic */
#enemy-sprite.boss-aura {
    border-color: var(--glow-col) !important;
    box-shadow: 
        0 0 20px var(--glow-col), 
        inset 0 0 30px #000 !important;
}
/* Adjusting Boss Aura to also ignite the corners */
#enemy-sprite.boss-aura::after {
    background: 
        linear-gradient(rgba(0,0,0,0.4) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.6) 100%),
        conic-gradient(from 90deg at 2px 2px, transparent 0 90deg, var(--glow-col) 0) 0 0 / calc(100% - 2px) calc(100% - 2px),
        rgba(0,0,0,0.1);
    opacity: 0.8;
}
#enemy-sprite.boss-aura::before {
    background: radial-gradient(circle at center, 
        var(--glow-col) 0%, 
        rgba(0,0,0,0.4) 70%, 
        transparent 100%);
    opacity: 0.3;
}

#btn-skill:disabled{
    justify-content: center !important;
}

/* THE OVERLAY: Deep atmospheric background */
.title-overlay {
    background-image: radial-gradient(circle at 50% 30%, #1e2329 0%, #0a0c10 100%);
    position: fixed;
    inset: 0;
    background: #0a0c10;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    overflow: hidden;
    padding: 20px;
}

/* CONTENT BOX: Centered and responsive */
/* CONTENT BOX: The central container for the menu */
.title-content-box {
    padding: 50px 20px;
    
    /* 1. LAYERED BACKGROUND: Semi-transparent dark base with a subtle texture */
    background: rgba(18, 20, 24, 0.75);
    backdrop-filter: blur(10px); /* Blurs the background radial gradient for a "frosted" effect */
    
    /* 2. THEMATIC BORDER: Dark with a slight gold highlight */
    border: 1px solid rgba(var(--accent-gold-rgb), 0.15);
    border-radius: 8px;
    
    /* 3. DEPTH: Inner and outer shadows to make it feel like a physical object */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.5),      /* Grounding shadow */
        inset 0 0 30px rgba(0, 0, 0, 0.8),   /* Inner depth */
        inset 0 0 0 1px rgba(255, 255, 255, 0.05); /* Very thin edge highlight */
    
    /* 4. ANIMATION: Match the spawn-in of the header */
    animation: spawn-in 1.2s ease-out;
    position: relative;
    width: 100%;
    max-width: 400px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Optional: Add a decorative horizontal line between the Logo and Menu */
.title-header-block::after {
    display: block;
    margin: 25px auto 0;
    opacity: 0.3;
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    box-shadow: 0 0 8px var(--accent-gold);
}


/* HEADER: Golden glow with spawn animation */
.title-header-block {
    margin-bottom: 0px !important;
    animation: spawn-in 1.2s ease-out;
    position: relative;
    padding-bottom: 20px;
}

/* MENU LAYOUT */
.title-menu-container {
    width: 280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* BASE BUTTON STYLES */
.title-btn {
    border-radius: 4px;
    position: relative;
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.title-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.title-btn:disabled {
    opacity: 0.3;
    filter: grayscale(1);
    cursor: not-allowed;
}

/* PRIMARY BUTTON: Begin */
.btn-primary {
    padding: 18px;
    color: var(--safe);
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.1);
    background: rgba(var(--accent-gold-rgb), 0.05);
}

/* SECONDARY BUTTON: Load */
.btn-secondary {
    padding: 14px;
    color: #fff;
}

/* UTILITY BUTTONS: Guide & Dev */

.btn-utility {
    flex: 1;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px !important;
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-guide { border-color: var(--magic); color: var(--magic); }
.btn-dev { border-color: #444; color: #666; font-size: 9px; }

/* TEXT SIZING */
.btn-large-text { font-weight: bold; font-family: var(--font-head); font-size: 1.1rem; letter-spacing: 2px; }
.btn-med-text { font-size: 14px; font-weight: bold; }
.btn-sub-text { opacity: 0.7; font-size: 0.65rem; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }

/* FOOTER */
.title-footer-text {
    margin-top: 60px;
    text-transform: uppercase;
    font-family: 'Crimson Pro', serif;
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Ensure the parent card is the anchor for absolute elements */

/* 1. THE WORLD HEADER: Lifted to the top edge */
.world-context-header {
    position: absolute;
    top: 10px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between; /* Zone Label Left, Boss Button Right */
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 5px;
}

/* 2. ZONE LABEL REFINEMENT */
#zone-label {
    font-size: 0.8rem !important; /* Smaller, breadcrumb style */
    opacity: 0.8;
}

/* 3. BOSS BUTTON REFINEMENT */
#btn-boss-small {
    margin: 0 !important;
    position: relative;
    z-index: 10;
    animation: boss-btn-pulse 2s infinite;
}

/* 4. COMBAT STACK: The main focus */

#enemy-lvl-display {
    font-family: var(--font-head);
    font-size: 1.1rem !important; /* Make enemy name the primary focus */
    color: #fff;
    font-weight: bold;
}

/* Subtle pulse for the boss button to separate it visually */
@keyframes boss-btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(179, 57, 57, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(179, 57, 57, 0); }
    100% { box-shadow: 0 0 0 0 rgba(179, 57, 57, 0); }
}

.boss-text-glow {
    color: #ff4b2b !important; /* Vicious Red */
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    
    /* Static, high-contrast outline */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0px 0px 8px rgba(255, 75, 43, 0.6);
}

/* Completely remove the pseudo-element to lighten the DOM */
.boss-text-glow::before {
    display: none !important;
}