/* Part 5 of 7 of the game's stylesheet (was style.css; the parts load in order, so rule
   order is exactly as before). Mostly: Atmosphere, title screen, utility row, splash, loot sack (obc-*), town crier, Sanctuary rows, retire button, portraits, element affinity, ambience mode. */

/* --- GPU-ACCELERATED ATMOSPHERE --- */
.particle-env {
    position: fixed;
    pointer-events: none; /* Allows clicking buttons through particles */
    z-index: 1000; /* Above panels, behind grimoire */
    will-change: transform, opacity; /* Hint to browser for optimization */
   /* contain: strict;*//* Critical: tells the browser this element won't affect layout */
    opacity: 0.8;
}

/* Wind Movement: Top-Left to Bottom-Right */
@keyframes wind-diagonal {
    0% { 
        transform: translate3d(-10vw, -10vh, 0) rotate(0deg); 
        opacity: 0;
    }
    10% { opacity: 0.8; } /* Fade in quickly as it enters */
    90% { opacity: 0.8; }
    100% { 
        transform: translate3d(110vw, 110vh, 0) rotate(720deg); 
        opacity: 0; /* Fade out as it leaves the viewport */
    }
}

/* Downward movement (Snow/Leaves) */
@keyframes fall-linear {
    0% { transform: translate3d(0, -10px, 0) rotate(0deg); }
    100% { transform: translate3d(20px, 105dvh, 0) rotate(360deg); }
}

/* Upward movement (Embers/Motes) */
@keyframes rise-linear {
    0% { transform: translate3d(0, 105dvh, 0) rotate(0deg); }
    100% { transform: translate3d(-20px, -20px, 0) rotate(-360deg); }
}


/* --- TITLE SCREEN REBORN --- */

.title-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}

/* Header Styling - Simplified for clarity */

.title-main-text {
    font-family: var(--font-head);
    font-size: 2rem;
    color: var(--text-main);
    letter-spacing: 8px;
    margin: 0;
    text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.title-sub-brand {
    font-family: var(--font-head);
    font-size: 0.9rem;
    color: var(--accent-gold);
    letter-spacing: 6px;
    margin-top: 5px;
    opacity: 0.8;
}

/* Menu & Main Buttons */

.title-btn {
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 16px;
    flex-direction: column;
}

.btn-shine {
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transform: skewX(-20deg);
    animation: shine-sweep 4s infinite;
}

@keyframes shine-sweep {
    20% { left: 150%; }
    100% { left: 150%; }
}

.btn-primary {
    border-color: var(--accent-gold);
}

.btn-primary:active {
    background: rgba(var(--accent-gold-rgb), 0.15);
    transform: scale(0.98);
}

/* --- UPDATED UTILITY ROW --- */
.title-utility-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.btn-utility {
    border-radius: 4px;
}

/* Interactive Bracket Effect */
.btn-utility span::before { content: '['; opacity: 0; margin-right: 4px; transition: 0.2s; color: var(--accent-gold); }
.btn-utility span::after { content: ']'; opacity: 0; margin-left: 4px; transition: 0.2s; color: var(--accent-gold); }

.btn-utility:active {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--accent-gold) !important;
    color: var(--text-main) !important;
    transform: translateY(-1px);
}

.btn-utility:active span::before,
.btn-utility:active span::after {
    opacity: 1;
}

/* The interactive gutter: Now an overlay */

/* Subtle visual marking: A thin vertical line to indicate the "crease" */

.page-arrow {
    font-size: 16px;
    color: var(--ink);
    opacity: 0.4;
    text-align: center;
    user-select: none;
    /* Ensure arrows don't block text interaction if not being tapped */
    pointer-events: none; 
}

/* On hover (or tap-hold), the edge darkens slightly to define the area */
/* Update your bar fill classes */
 #bar-enemy, #bar-fury {
    width: 100%;            /* The helper now scales this 100% width */
    transform-origin: left; /* Ensures it shrinks toward the left */
    
    /* CRITICAL: Transition 'transform' instead of 'width' */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Performance hint for the browser */
    will-change: transform; 
}

@keyframes pulse2 {
    from { transform: scale(1); }
    to { transform: scale(1.02); }
}

/* =========================================
   SPLASH SCREEN SEQUENCE MASTER CSS
========================================= */

/* The transparent layers that hold the images/text */
.splash-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 2s ease-in-out; 
}

.splash-layer.active {
    opacity: 1;
}

/* Splash 1: The Studio Logo */
/* Splash 1: Coffee Bean Code (Brushed Steel Frame) */
#splash-logo {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    
    /* Matches the silver/steel of the cup */
    border: 2px solid rgba(180, 190, 200, 0.4); 
    border-radius: 8px; /* Softens the sharp corners */
    
    /* Faint cyan glow radiating outward */
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.15); 
}

/* Splash 2: The Fullscreen Background Art */
#splash-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 'cover' and 'center' guarantee it fills mobile screens vertically without stretching */
    object-fit: cover; 
    object-position: center center; 
    z-index: -1;
}

/* The wrapper anchoring the text and providing the cinematic shadow band */
/*.splash-cinematic-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    padding: 30px 0;
    z-index: 100;
    animation: slowDriftUp 4s ease-out forwards; 
}*/

/* The primary text (YOUR LINEAGE AWAKENS) */
.splash-center-text {
    color: #e3e5e8;
    font-family: var(--font-head, serif);
    font-size: clamp(16px, 4.5vw, 24px); 
    letter-spacing: clamp(3px, 1.5vw, 8px); 
    text-transform: uppercase;
    text-shadow: 0 4px 15px rgba(0,0,0,1), 0 0 30px rgba(0,0,0,1);
    margin-bottom: 8px;
}

/* The whispering echo (The Ember Amulet hungers...) */
.splash-sub-text {
    color: var(--accent-gold, var(--gold-old));
    font-family: 'Crimson Pro', serif; 
    font-style: italic;
    font-size: clamp(12px, 2.5vw, 15px);
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeInSub 2s ease-in forwards 1.5s; 
}

/* The interactive UI prompt at the bottom */
.splash-click-text {
    /*position: absolute;
    bottom: 12vh; */
    color: var(--accent-gold, var(--gold-old));
    font-family: var(--font-head, sans-serif);
    font-size: 14px;
    letter-spacing: 4px;
    animation: pulseText 1.5s infinite alternate;
    text-shadow: 0 4px 8px rgba(0,0,0,0.9);
    cursor: pointer;
    z-index: 1000000;
}

/* --- KEYFRAME ANIMATIONS --- */

@keyframes pulseText {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

@keyframes fadeInSub {
    to { opacity: 0.8; }
}

/* ==========================================================================
   Regular Enemy Charge (Unchanged - clean and subtle)
   ========================================================================== */
.enemy-charge {
    filter: drop-shadow(0 0 12px #ffa502) brightness(1.1);
    animation: minion-vibration 0.15s infinite alternate;
    transition: filter 0.4s ease-in-out;
}

@keyframes minion-vibration {
    from { transform: translate(-1px, 0); }
    to { transform: translate(1px, 0); }
}


/* ==========================================================================
   Boss Charge (Toned Down & Smoother)
   ========================================================================== */
.boss-charge {
    /* Softened the glow: Removed the blinding 45px bleed overlay */
    filter: drop-shadow(0 0 12px #ff4757) brightness(1.2);
    
    /* Shudder only. The old boss-pulse animated drop-shadow blur every frame, which
       re-rasterizes the full-size sprite continuously; the glow is now static and the
       pulse lives on the ::after overlay's opacity instead. */
    animation: boss-shudder 0.14s infinite alternate;

    transition: filter 0.4s ease-in-out;
    position: relative;
}

/* Optional crimson vignette: Slowed down to match the new breathing pace */
.boss-charge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 50%, rgba(255, 71, 87, 0.15) 100%);
    pointer-events: none;
    border-radius: inherit;
    animation: boss-charge-glow 2.0s infinite ease-in-out;
}

@keyframes boss-charge-glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 1. Toned-Down Shake: Slowed speed down from 0.08s to 0.14s, removed rotations */
@keyframes boss-shudder {
    0% { transform: translate(-1.5px, 0); }
    100% { transform: translate(1.5px, 0.5px); }
}



/* --- BUTTON HOVER & ACTIVE SEQUENCING --- */

/* 1. Base State Transition */
#sanctuary-ui .well-btn {
   /* transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
*/            transition: transform 0.1s, box-shadow 0.1s, color 0.2s;

}

/* 2. Hover State: Lift and Glow */
/* Triggered when mouse is over or finger is touching (before release) */
#sanctuary-ui .well-btn:not(:disabled):hover {
    border-color: var(--accent-gold) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-2px); /* Slight lift effect */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer;
}

/* 3. Active State: Press and Recede */
/* Triggered during the actual click/press */
#sanctuary-ui .well-btn:not(:disabled):active {
    transform: translateY(1px) scale(0.98) !important; /* Pushes down below the hover height */
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.05s; /* Fast response for the click */
}

/* 4. Disabled State: Reset All */
#sanctuary-ui .well-btn:disabled {
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.25 !important;
    filter: grayscale(1);
}

#pity-bar-fill {
    /*animation: fillFromEmpty 0.5s ease-out;
    transition: width 0.5s ease-out;*/
    
    /* This ensures any change to 'width' takes 0.5 seconds */
    transition: width 0.5s ease-out;
    
    /* Optional: adds a nice 'energy' glow to the bar */
    box-shadow: 0 0 10px rgba(var(--gold-sun-rgb), 0.6);
}

/* Primary Passive Flash (Gold/Safe) */
/* .anim-passive-trigger / .anim-passive-dual were a drop-shadow + brightness filter animated on the hero
   portrait (the same kind of effect as the boss glow that lagged on phones). They're now overlay
   divs added by flashOverlay() in ui.js that only animate opacity, like .hit-flash. */
.passive-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
    border-radius: inherit;
    box-shadow: inset 0 0 22px 6px var(--flash-color);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.22) 0%, transparent 70%);
    animation: passive-flash 0.6s ease-out;
}
.passive-flash-primary { --flash-color: var(--safe); }
.passive-flash-dual { --flash-color: var(--magic); }
@keyframes passive-flash {
    0% { opacity: 0; }
    40% { opacity: 1; }
    100% { opacity: 0; }
}

/* Container for the archive section */

/* The Grid Layout */
.remnant-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile readability */
    gap: 12px;
    margin-top: 15px;
}

/* Individual entries */
.remnant-entry {
    background: rgba(255,255,255,0.02);
    border-left: 3px solid #222;
    padding: 12px;
    transition: 0.3s;
}

.remnant-entry.discovered {
    border-left-color: var(--magic);
    background: rgba(197, 108, 240, 0.05);
}

.remnant-entry.sealed {
    opacity: 0.4;
    font-style: italic;
}

/* Special styling for the Boss Echo */
.active-chapter {
    border-color: var(--accent-gold) !important;
    background: rgba(212, 212, 212, 0.4) !important;
    border-left: 3px solid var(--accent-gold) !important;
    border-bottom:none !important;
}

/* Mobile-First Chronicle Layout */

.journal-sidebar::-webkit-scrollbar { display: none; }

.journal-nav-item { 
    width: 100%; 
    padding: 12px 0; 
    border: none; 
    border-bottom: 1px solid #222;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.active-chapter .toc-num { 
    color:rgba(153, 153, 153);
}

/* Sub-Sidebar Items (Archives) */
/* Sub-Sidebar Items (Archives) */

/* Visual Branch: Connects to the chapter above */

/* Active State for Archives */


/* Content Pane */

/* Compact Navigation Controls */
.journal-controls { 
    gap: 10px; 
    margin-top: 30px;
}

.nav-btn {
    padding: 12px;
}

.nav-btn-next {
    background: rgba(var(--gold-old-rgb), 0.1); 
    border-color: var(--accent-gold);
}
.toc-act-menu {
    /* 212, 175, 55 is the RGB equivalent of var(--gold-old) */
    background: rgba(255, 225, 0, 0.08); 
}


.skim-container {
    background: #f4ece0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Extremely subtle depth */
    border-radius: 2px;
}


.act-splash-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0;
}

.act-header-glow {
    margin-bottom: 10px;
    background: radial-gradient(circle, rgba(210, 180, 140, 0.3) 0%, transparent 70%);
    /*padding: 10px 40px;*/
}

.act-label {
    font-family: 'Crimson Text', serif;
    font-size: 1.4rem;
    color: #706253;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
}

/* The ornate frame around the large image */

.act-hero-image { /* Soft inner border */
    background-blend-mode: multiply; /* Crucial for the sketch-on-paper look */
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border: 1px solid #706253; /* Inner framing line */
}

.act-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #8c7d70, transparent);
    border: none;
    border-top: 1px solid #bda88a;
    width: 60%;
    margin: 25px auto;
}

.act-prologue-quote {
    text-align: left;
    /*font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    color: #333;
    max-width: 80%;
    line-height: 1.4;*/
}

/* Container for Chapter Title grouping */
.chapter-header-container {
    text-align: center;
    margin-bottom: 15px;
}

/* The "Chapter 1" label */
.chapter-number-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #8c7d70;
    margin-bottom: 8px; /* Push the title down slightly */
    opacity: 0.7; /* Softens the stone color to make the red title pop */
}

/* The Main Title (Red) */
.chapter-title-main {
    font-size: 1.8rem;
    font-weight: 700;
    color: #4a0404 !important;
    text-transform: uppercase;
    margin: 0 !important;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 15px !important;
}

.chapter-header-divider {
    width: 40%;
    height: 1px;
    /* Fades from transparent to gold to transparent */
    background: linear-gradient(to right, transparent, #d2b48c, transparent);
    margin: 15px auto 25px auto;
    position: relative;
    opacity: 0.6;
}

/* The tiny diamond focal point */
.chapter-header-divider::after {
    content: '◆';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #d2b48c;
}

.journal-image-header {
    position: relative;
    width: 100%;
    height: 120px; /* Cinematic banner height */
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid rgba(var(--gold-old-rgb), 0.2); /* Muted Gold frame */
    margin-top: 10px;
}

.journal-image-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* This makes the white-background sketch look archival on black */
    filter: sepia(0.6) brightness(0.8) contrast(1.1);
    opacity: 0.9;
}

/* This creates a soft fade so the image doesn't just "end" */
.journal-image-vignette {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, transparent 20%, rgba(26, 26, 26, 0.8) 100%);
    box-shadow: inset 0 0 20px #000;
}
#pl-hp-txt.full-duality {
  font-size: 1.4em; /* Noticeably bigger than other stats */
  font-weight: 900;
  letter-spacing: 1.5px;
  
  /* Gold/Silver Metallic Gradient */
  background: linear-gradient(to bottom, #fff 20%, var(--gold-bright) 50%, #b8860b 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Multi-layered glow to give it "weight" */
  filter: drop-shadow(0 0 5px rgba(var(--gold-bright-rgb), 0.5)) 
          drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
  
  /* The "Soul Pulse" Animation */
  animation: dual-pulse 3s ease-in-out infinite;
}

@keyframes dual-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.3); }
}

/* ── TAB NAV ───────────────────────────────────────────── */

.sanc-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #666;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.sanc-tab:hover {
    color: #999;
}

.sanc-tab.active {
    color: var(--accent-gold);
    border-bottom: 2px solid var(--accent-gold);
}

/* ── TAB PANELS ────────────────────────────────────────── */
.sanc-tab-panel {
    display: none;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.sanc-tab-panel.active {
    display: flex;
    flex-direction: column;
}

/* ── VENDOR HEADER ─────────────────────────────────────── */

/* ── HEARTH DIVIDER ────────────────────────────────────── */
.sanc-hearth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 12px 12px;
    color: var(--accent-gold);/*#555;*/
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top:30px;
}

.sanc-hearth-divider::before,
.sanc-hearth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #2a2a2a;
}

/* ── HEARTH ACTION BUTTONS ─────────────────────────────── */
.sanc-hearth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 20px;
}

/* Subtle shimmer line at top like sanc-row-btn */

/* RECOVER */

/* RETIRE */
.sanc-vendor-name {
    text-align: left;
    text-transform: uppercase;
    display: block;
    color: var(--accent-gold);
    font-family: var(--font-head), serif;
    font-size: 11px;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(var(--gold-old-rgb), 0.2); /* The dividing line */
    padding-bottom: 6px;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.sanc-vendor-desc {
    text-align: left;
    font-size: 11px;
    color: #bbb;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

.crier-portrait {
    width: 96px;
    height: 96px;
    flex-shrink: 0; /* Matches the rounded card aesthetic of the store */
    /* Burnished bronze/gold frame to lock the portrait into the UI */
    border-image: linear-gradient(to bottom, #a67c33 0%, #59411a 60%, #261b0a 100%) 1;
    border-radius: 4px; /* Matches the exact curve of the RETIRE button and item cards */
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    border: none !important; /* Remove old flat/sharp border */
}

#sanctuary-crier-container {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0px !important;
    /*margin-bottom:40px;*/
    padding: 10px 12px;
    background: #1a1510;
    border: 1px solid #3a3220;
    border-radius: 6px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.crier-text-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.crier-label {
    font-size: 11px;
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.crier-welcome {
    font-size: 11px;
    color: #bbb;
    font-style: italic;
}

.crier-message {
    font-size: 11px;
    color: #bbb;
    font-style: italic;
    line-height: 1.5;
}

/* --- RPG PORTRAIT OVERHAUL --- */

/* --- OATHBOUND CRIMSON RETIRE BUTTON --- */
.crier-retire-button {
    position: relative; /* Crucial for the pseudo-element border trick */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    padding: 6px 0; /* Giving it a touch more vertical substance */
    
    /* Premium Dark Crimson Plate Gradient */
    background: linear-gradient(135deg, #2a0e0e 0%, #140505 100%) !important;
    border: none !important; /* Managed by pseudo-element for perfect rounding */
    border-radius: 4px;
    
    /* Deep Crimson Ambient Glow & Shadows */
    box-shadow: 
        inset 0 0 6px rgba(224, 102, 102, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.7),
        0 0 8px rgba(224, 102, 102, 0.2);
    
    /* Typography matching game styling */
    font-family: 'Georgia', serif;
    color: #fcaeae; /* Crisp light red/rose tint for legibility */
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    cursor: pointer;
    
    /* Text pop drop shadow */
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.9));
    
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-tap-highlight-color: transparent;
}

/* Rounded Metallic Crimson Gradient Border */
.crier-retire-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 4px; 
    padding: 1.5px; /* Border weight */
    
    /* High-contrast metallic red to deep iron-maroon gradient */
    background: linear-gradient(to bottom, #e06666 0%, #360b0b 0%, #802323 50%, #360b0b 100%);
    
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* --- INTERACTIVE STATES --- */

/* Hover state if testing on desktop */
.crier-retire-button:hover {
    background: linear-gradient(135deg, #3d1414 0%, #1f0808 100%) !important;
    box-shadow: 
        inset 0 0 8px rgba(224, 102, 102, 0.3),
        0 6px 14px rgba(0, 0, 0, 0.8),
        0 0 14px rgba(224, 102, 102, 0.45);
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 1));
}

/* Phone Tap / Click Feedback */
.crier-retire-button:active {
    transform: scale(0.95) translateY(1px);
    background: linear-gradient(135deg, #140505 0%, #050101 100%) !important;
    box-shadow: 
        inset 0 0 10px rgba(0, 0, 0, 0.95),
        0 2px 4px rgba(0, 0, 0, 0.6);
}

/* --- RPG PORTRAIT OVERHAUL (ROUNDED) --- */
/* Target the stack container to allow absolute positioning for the border overlay */
.crier-action-stack {
    position: relative; 
}

/* Pseudo-element to apply the rounded metallic frame overlay over the portrait */
.crier-action-stack::before {
    content: "";
    position: absolute;
    top: 0;
    left: 2px; /* Centers it perfectly over the 76px wide image inside the 80px container */
    width: 76px;
    height: 76px;
    border-radius: 4px; 
    padding: 2px; /* Border thickness */
    box-sizing: border-box;
    
    /* Smooth, burnished bronze-to-gold metallic gradient */
    background: linear-gradient(to bottom, #d4a34b 0%, #8c6323 60%, #3a250a 100%);
    
    /* Masking trick to make the center transparent so the portrait shows through */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}




.sanc-tab-title {
    font-size: 13px;
    color: var(--accent-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    
    /* Crucial layout fixes */
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%; /* Forces the container to take up the full width so lines can expand */
    box-sizing: border-box;
    
    gap: 15px;
    margin-bottom: 8px; 
    margin-top: 8px; 
    padding: 0 20px; /* Gives the lines some breathing room from the screen edges */
}

/* Left line: fades out as it approaches the text */
.sanc-tab-title::before {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, rgba(186, 45, 50, 0) 0%, rgba(186, 45, 50, 0.4) 100%);
}

/* Right line: fades out as it leaves the text */
.sanc-tab-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(186, 45, 50, 0) 0%, rgba(186, 45, 50, 0.4) 100%);
}

.void-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 5px 1rem;
  color: #a382ff; /* Light purple to match the Void theme */
  font-family: 'Serif', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.void-divider::before,
.void-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid transparent;
  /* Fades the line out at the ends */
  border-image: linear-gradient(to right, transparent, #444, transparent) 1;
}

.void-divider:not(:empty)::before {
  margin-right: 1rem;
}

.void-divider:not(:empty)::after {
  margin-left: 1rem;
}

/* Optional: Add the label text via the data-label attribute */

/* Second line to complete the sandwich */
.void-divider::after {
  white-space: nowrap;
  margin: 0 1rem;
  text-shadow: 0 0 8px rgba(163, 130, 255, 0.5);
  content: '';
  flex: 1;
}

#confirm-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ── Container Reset ── */
.obc-armor-wrapper, .obc-armor-wrapper * {
    box-sizing: border-box;
}

/* ── Section Header ── */

/* ── Equipped Card (With Subtle Glow) ── */

/* ── Portrait (Fixed Flatness) ── */
.obc-portrait {
    width: 64px !important;
    height: 64px !important;
    position: relative;
    /* Inner shadow to make the image look recessed */
    padding: 5px;
    /* Creates a dark, recessed socket */
    /* Inner shadow for depth, outer shadow to ground it on the card */
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.05);
    width: 44px;
    height: 44px;
    background: #1a1c23;
    border: 1px solid #3d4357;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    
}
.obc-portrait img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 2px;
    display: block; /* Makes the art "pop" more */
}

/* ── Item Info ── */
.obc-item-info { flex: 1; text-align: left; flex-grow: 1; min-width: 0; }

/* ── Stats ── */
.obc-item-stats { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Buttons ── */
.obc-scrap-btn {
    background: linear-gradient(to bottom, #3d1010, var(--blood-dark)) !important;
    color: #e74c3c !important;
    border: 1px solid rgba(231, 76, 60, 0.5);
    cursor: pointer;
    line-height: 1.2;
    width: 100%; /* Equipped item scrap button takes full width */
    padding: 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.obc-action-row { display: flex; gap: 8px; margin-top: 10px; display: flex; gap: 8px; }
.obc-action-btn {
    flex: 1;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.15);
    color: #eee;
    padding: 10px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}
.obc-action-btn.reinforce { border-color: var(--gold-sand); color: var(--gold-sand) !important; background: var(--gold-ochre); color: #000; }
.obc-action-btn.enchant { border-color: #a78bfa; color: #a78bfa !important; background: #8a5cf6; color: #fff; }
.obc-action-btn.disabled { filter: grayscale(1); opacity: 0.3; cursor: not-allowed; background: #222 !important; color: #666 !important; }
.obc-action-btn .btn-desc { font-size: 0.6em; color: #aaa;}

/* ── Spare Card (Better Clarity) ── */

/* ── Loot Modal Layout ── */

/* ── Loot Cards ── */

/* The Green Aura for the New Item */

/* ── Labels & Text ── */

/* ── Loot Action Buttons ── */

/* Dynamic Advantage: Uses the --affinity-color variable */
.affinity-advantage {
    border-color: var(--affinity-color) !important;
    box-shadow: 0 0 15px var(--affinity-glow), inset 0 0 8px rgba(255, 255, 255, 0.2) !important;
    animation: pulse-bloom-dynamic 1.2s infinite alternate ease-in-out;
}
@keyframes pulse-bloom-dynamic {
    0% { filter: brightness(1); box-shadow: 0 0 5px var(--affinity-glow); }
    100% { filter: brightness(1.4); box-shadow: 0 0 20px var(--affinity-glow); }
}

/* ADVANTAGE: Vivid glow using the player's element color */
/*.affinity-advantage {
    border-color: var(--affinity-color) !important;
    box-shadow: 0 0 15px var(--affinity-glow), inset 0 0 8px rgba(255, 255, 255, 0.2) !important;
    animation: pulse-element-power 1.2s infinite alternate ease-in-out;
    filter: brightness(1.2);
}*/

/* NEUTRAL: Clean, steady border in the player's element color */
.affinity-neutral {
    border-color: var(--affinity-color) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    filter: brightness(1);
}
/* WEAKNESS: Pulsing Identity to Danger */
.affinity-disadvantage {
    /* 1. Reset any existing border styles */
    border-style: solid !important;
    border-width: 1px !important;
    
    /* 2. Kill transitions so they don't stall the animation */
    transition: none !important; 
    
    /* 3. The Animation: 1.5 seconds, back and forth */
    animation: pulse-border-danger 1s infinite alternate ease-in !important;
    
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6) !important;
}

@keyframes pulse-border-danger {
    from {
        border-color: var(--affinity-color);
        box-shadow: 0 0 2px transparent, inset 0 0 15px rgba(0, 0, 0, 0.6);
    }
    to {
        border-color: #ff3030;
        /* The glow is what actually makes it 'pulse' on an OLED screen */
        box-shadow: 0 0 12px rgba(255, 48, 48, 0.7), inset 0 0 15px rgba(0, 0, 0, 0.6);
    }
}

@keyframes familiarPulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 0 8px rgba(0,0,0,0.8); 
        border-color: var(--c-rare, var(--gold-dull)); 
    }
    20% { 
        transform: scale(1.2); /* Makes the portrait physically pop outward */
        box-shadow: 0 0 45px var(--fam-glow-color), inset 0 0 25px var(--fam-glow-color) !important; 
        border-color: var(--fam-glow-color) !important; 
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 0 8px rgba(0,0,0,0.8); 
        border-color: var(--c-rare, var(--gold-dull)); 
    }
}
.fx-familiar-glow #familiar-combat-icon {
    /* Extended to 1 full second for a slower, more deliberate fade */
    animation: familiarPulse 1s ease-out forwards; 
}
/* Accordion Base Classes */

/* Rotates the arrow when closed */
.icon-collapsed {
    transform: rotate(-90deg);
}
/* 1. The Recessed Tray Container */
.dashboard-container {
    display: flex; 
    justify-content: space-between; 
    gap: 4px; 
    margin-bottom: 12px; 
    /* Darker background with inset shadow to look recessed */
    background: rgba(10, 12, 16, 0.85); 
    padding: 10px 8px; 
    border-radius: 6px; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255,255,255,0.02);
}

/* 2. The Transparent Buttons */

/* 3. The Tactile Tap Effect */
.btn-dashboard:active {
    background: rgba(255, 255, 255, 0.05);
    transform: scale(0.92); /* Shrinks slightly when pressed */
    border: 1px solid rgba(var(--gold-old-rgb), 0.3); /* Subtle gold border on press */
}

/* 4. Asset Polish (Assuming your images have the class .dash-icon or are <img> tags) */
.btn-dashboard img, .dash-icon {
    width: 42px; 
    height: 42px;
    object-fit: contain;
    /* Adds a shadow directly to the shape of the image */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
    transition: filter 0.15s;
    border-radius:5px;
}

/* Flattens the shadow when pressed */
.btn-dashboard:active img, .btn-dashboard:active .dash-icon {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.9));
}

/* 5. The Text Labels */

/* Lights up the text on tap */
.btn-dashboard:active .dash-label {
    color: var(--accent-gold);
}

/* Card Base */
.obc-card {
    margin-bottom: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    background: #222530;
    border: 1px solid #2f3446;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

/* Row 1: Image + Info */

/* Row 2: Buttons */

/* The Socketed Portrait */

/* The 3D Item Effect */

/* Text Formatting */

.obc-item-name {
    font-family: var(--font-head), sans-serif;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2px;
}

.obc-slot-tag {
    color: #666;
    font-size: 9px;
    margin-right: 4px;
    font-family: monospace;
}

.obc-item-level {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem;
    color: #8e94a6;
    margin-bottom: 4px;
}

/* Button Layout Adjustments */

/* Empty Slots */
.obc-empty-slot {
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px dashed #2d313f;
    border-radius: 4px;
    padding: 8px;
    color: #565d6e;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}

 #toast-container {
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        pointer-events: none; /* Lets you click through the empty space */
    }

    .toast-msg {
        background: rgba(10, 12, 15, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 3px solid var(--accent-gold);
        padding: 12px 16px;
        border-radius: 4px;
        min-width: 220px;
        max-width: 320px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        gap: 12px;
        animation: slideInToast 0.3s ease-out forwards;
        pointer-events: auto; /* Allows tapping the toast itself if needed later */
    }

    .toast-msg.hiding {
        animation: fadeOutToast 0.4s ease-in forwards;
    }

    @keyframes slideInToast {
        from { transform: translateX(120%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

    @keyframes fadeOutToast {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(120%); opacity: 0; }
    }
    
#ambience-bg {
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    will-change: transform, opacity; /* Tells the browser to optimize this layer ahead of time */
}
#ambience-mode {
    /* Keep your existing display: flex, centering, and positioning, but add these: */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

/* When this class is added via JavaScript, it will fade in */
#ambience-mode.active {
    opacity: 1;
    visibility: visible;
}

/* Big damage/heal numbers float upward */
.float-drift-up.float-animating {
  animation: floatUp 1.8s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 1;   transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1;   transform: translateX(-50%) translateY(-40px); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-60px); }
}

/* Status text (BLEEDING) drifts left and fades */
.float-drift-left.float-animating {
  animation: floatLeft 1.6s ease-out forwards;
}
@keyframes floatLeft {
  0%   { opacity: 1;   transform: translateX(-50%) translateY(0); }
  60%  { opacity: 0.8; transform: translateX(calc(-50% - 20px)) translateY(-10px); }
  100% { opacity: 0;   transform: translateX(calc(-50% - 35px)) translateY(-15px); }
}

/* Hit counters just fade in place */
.float-drift-fade.float-animating {
  animation: floatFade 1.4s ease-in-out forwards;
}
@keyframes floatFade {
  0%   { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(-50%); }
}

/* Container Box from 55219.jpg */
.hero-group {
    background: #1a1c23; /* Deep dark RPG background */
}

/* Stat Grid Layout */
.stat-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

/* Individual Stat Box Card */
.stat-compact {
    background: #222530;
    border: 1px solid #2f3446;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* Upper Row: Label & Value */
.stat-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.stat-val-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-val {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Bonus Stat text (+7) styling */
.stat-bonus {
    color: #6c7283;
    font-size: 0.9rem;
    font-weight: normal;
}

/* Subtext Description */
.stat-tiny-desc {
    color: #565d6e;
    font-size: 0.72rem;
    line-height: 1.2;
}

/* Level Up Button Interaction */
.stat-btn {
    background: var(--gold-ochre);
    color: #000;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Core highlight for the Primary Stat card container (Solid Border) */
.stat-compact.primary-highlight {
    border-color: var(--gold-amber); 
    background: linear-gradient(135deg, #272a37 0%, #1e212c 100%);
    box-shadow: inset 0 0 8px rgba(var(--gold-amber-rgb), 0.05), 
                0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Secondary Stat card container (Borderless Radiant Glow) */
.stat-compact.secondary-highlight {
    background: linear-gradient(135deg, #252335 0%, #1d1b28 100%);
    box-shadow: inset 0 0 12px rgba(138, 92, 246, 0.15), /* Magical violet/blue inner glow */
                0 0 10px rgba(138, 92, 246, 0.1),       /* Soft ambient outer glow */
                0 2px 8px rgba(0, 0, 0, 0.3);
    border-color: #3d3659; /* Kept dark, but tinted to match the glow */
}

/* Dual Layer: When Primary AND Secondary stats land on the exact same attribute box */
.stat-compact.primary-highlight.secondary-highlight {
    border-color: var(--gold-amber); /* Keeps the sharp gold border */
    background: linear-gradient(135deg, #2f2a35 0%, #1f1c26 100%); /* Merged background */
    box-shadow: inset 0 0 15px rgba(138, 92, 246, 0.25), /* Combined supercharged glow */
                0 0 12px rgba(var(--gold-amber-rgb), 0.15),
                0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Text label color changes for visual feedback */
.stat-compact.primary-highlight .stat-label { color: var(--gold-amber); }
.stat-compact.secondary-highlight .stat-label { color: #a78bfa; } /* Soft purple-tinted label */
.stat-compact.primary-highlight.secondary-highlight .stat-label { color: #ffe066; }


/* Container adjustments to match 55219.jpg */
.mastery-content-wrapper {
    color: #eee;
    font-family: inherit;
}

/* Class Information Header */
.mastery-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #2d313f;
    padding-bottom: 12px;
    text-align: left;
    padding: 6px 4px 14px 4px; /* Compact top layout spacing */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mastery-title-row {
    color: var(--gold-amber); /* Gold class title accent */
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.mastery-flavor-text {
    margin-top: 6px;
    color: #585e6b;
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 95%;
}

/* Core Mechanics Row */
.mastery-mechanics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.mastery-mech-card {
    background: #222530;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #2f3446;
    text-align: center;
}

.mastery-mech-label {
    font-size: 0.65rem;
    color: #565d6e;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.mastery-mech-value {
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 1px;
}

/* Move/Ability Cards */
.mastery-move-card {
    border-left-width: 4px;
    border-left-style: solid;
    background: #191b22;
    border: 1px solid #23262f;
    border-radius: 6px;
    margin-bottom: 12px; /* Reduced layout spacing between elements */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Ability Badges & Typography */

.mastery-move-badge {
    padding: 2px 6px;
    color: #000;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1.2px;
}

.mastery-move-formula {
    font-weight: bold;
    background: #0b0c0e;
    color: #585e6b;
    font-family: monospace;
    font-size: 0.6em;
    padding: 8px 10px; /* Reduced box footprint padding */
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.mastery-move-bonus {
    padding-top: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    border-top: 1px solid #23262f;
    padding: 12px 14px; /* Snug top rule spacer */
    background: rgb(34,37,48);
}

/* Custom Passive Trigger Tag */

/* Core Equipment Layout Wrapper */
.obc-armor-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Master Item Card Look (Clean Dark Palette from 55219.jpg) */

.obc-card-header {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Image Thumbnails */

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

/* Typography & Info Layout */

/* Micro Stat Chips Container */

.obc-stat-chip {
    background: #1a1c23;
    color: #b3b9c9;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #2d313f;
}

/* Utility Actions Buttons */

.obc-action-btn, .obc-scrap-btn {
    flex: 1;
    background: #2f3446;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px;
    font-size: 0.72rem;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
}

.obc-scrap-btn { background: #5a2c2c; color: #ff9999; }
.obc-scrap-btn:hover { background: #7a3c3c; }