/* Part 1 of 7 of the game's stylesheet (was style.css; the parts load in order, so rule
   order is exactly as before). Mostly: Fonts, theme colours and variables, core layout, stat bars, panels. */

/* --- MYSTIC IRON THEME (Rich Texture + Depth) --- 2 */

/* --- CINZEL: REGULAR (400) --- */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v26-latin-regular.woff2') format('woff2');
}

/* --- CINZEL: BOLD (700) --- */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/cinzel-v26-latin-700.woff2') format('woff2');
}

/* --- CRIMSON PRO: REGULAR (400) --- */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/crimson-pro-v28-latin-regular.woff2') format('woff2');
}

/* --- CRIMSON PRO: SEMI-BOLD (600) --- */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/crimson-pro-v28-latin-600.woff2') format('woff2');
}

/* --- CRIMSON PRO: BOLD (700) --- */
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/crimson-pro-v28-latin-700.woff2') format('woff2');
}

body, html {
    touch-action: manipulation; 
}

    :root {
        /* Palette: Gunmetal, Bronze, Parchment */
        --bg-dark: #121418;         /* Deepest shadow */
        --bg-light: #1f2329;        /* Lighter surface */
        --panel-bg: rgba(30, 34, 40, 0.95); /* Semi-transparent slate */
        
        --text-main: #e3e5e8;       /* Bright White-Grey */
        --text-muted: #9fa6b2;      /* Soft Grey */
        
        /* Accents - Neon/Magic feel */
        --accent-gold: #eebb4d;     /* Rich Gold */
        --accent-glow: rgba(var(--accent-gold-rgb), 0.15); 
        
        --danger: #ff5c5c;          /* Bright Red */
        --safe: #4cd137;            /* Emerald Green */
        --magic: #c56cf0;           /* Runestone Purple */
        --fury: #ff9f1a;            /* Fire Orange */
        
        --border-color: #3a404a;    /* Visible Iron Border */

        /* Second-tier theme colours (named so they can be re-themed in one place) */
        --gold-bright: #ffd700;     /* Pure gold: highlights, rewards */
        --gold-old: #d4af37;        /* Old gold: frames, titles */
        --gold-brass: #cfa851;      /* Brass: action buttons, duel cards */
        --gold-amber: #ffcc00;      /* Amber: warnings, scrap, status */
        --parchment: #f4e4bc;       /* Book pages */
        --ink: #3e2723;             /* Brown ink on parchment */
        --ink-soft: #5d4037;        /* Faded ink */
        --blood: #800000;           /* Deep red: book accents */
        --blood-dark: #2c0e0e;      /* Hard Mode backdrop red */
        --gold-muted: #c5a059;      /* Muted gold: sanctuary trim */
        /* More gold shades used across screens (Hard Mode turns each one red) */
        --gold-sun: #f1c40f;    /* Sunflower: XP bars, level labels */
        --gold-pale: #ffe082;   /* Pale gold: mastered highlights */
        --gold-dull: #b89c50;   /* Dull gold: rare frames */
        --gold-deep: #cca43b;   /* Deep gold: map cards */
        --gold-warm: #d4aa40;   /* Warm gold: companion glow */
        --gold-soft: #feca57;   /* Soft gold: highlights */
        --gold-honey: #ffce54;  /* Honey: highlights */
        --gold-sand: #c8a84b;   /* Sand gold: trims */
        --gold-ochre: #cc9900;
        --gold-nav: #e8a020;         /* Active navigation tab */  /* Ochre: buttons */
        /* The same golds as "r, g, b" for see-through versions: rgba(var(--accent-gold-rgb), 0.2) */
        --accent-gold-rgb: 238, 187, 77;
        --gold-old-rgb: 212, 175, 55;
        --gold-brass-rgb: 207, 168, 81;
        --gold-bright-rgb: 255, 215, 0;
        --gold-amber-rgb: 255, 204, 0;
        --gold-nav-rgb: 232, 160, 32;
        --gold-deep-rgb: 204, 164, 59;
        --gold-dull-rgb: 184, 156, 80;
        --gold-honey-rgb: 255, 206, 84;
        --gold-muted-rgb: 197, 160, 89;
        --gold-pale-rgb: 255, 224, 130;
        --gold-sun-rgb: 241, 196, 15;
        --gold-warm-rgb: 212, 170, 64;
        --border: 1px solid var(--border-color);
        
        /* Fonts */
        --font-head: 'Cinzel', serif;
        --font-body: 'Crimson Pro', serif;
    }
	/* --- HARD MODE THEME OVERRIDES --- */
body.hard-mode {
    /* Override the Main Heroic Gold with a Hostile Red */
    --accent-gold: #ff4d4d; 
    
    /* Change the glow from warm gold to bloody mist */
    --accent-glow: rgba(255, 77, 77, 0.15);
    
    /* Make the borders slightly sharper/brighter to look like raw iron */
    --border-color: #554444;

    /* Every gold turns red: each keeps its brightness relative to the others */
    --gold-bright: #ff6b6b;     /* was pure gold */
    --gold-old: #d9534f;        /* was old gold */
    --gold-brass: #cc5a5a;      /* was brass */
    --gold-amber: #ff7a5c;      /* was amber */
    --gold-muted: #c45c5c;      /* was muted gold */
    --accent-gold-rgb: 255, 77, 77;
    --gold-old-rgb: 217, 83, 79;
    --gold-brass-rgb: 204, 90, 90;
    --gold-bright-rgb: 255, 107, 107;
    --gold-amber-rgb: 255, 122, 92;
    /* The other gold shades: same lightness, red hue */
    --gold-sun: #cf3131;
    --gold-pale: #e79a9a;
    --gold-dull: #b85050;
    --gold-deep: #cc3b3b;
    --gold-warm: #d34141;
    --gold-soft: #df7676;
    --gold-honey: #df7474;
    --gold-sand: #c84b4b;
    --gold-ochre: #ba2c2c;
    --gold-nav: #d95353;
    --gold-nav-rgb: 217, 83, 83;
    --gold-deep-rgb: 204, 59, 59;
    --gold-dull-rgb: 184, 80, 80;
    --gold-honey-rgb: 223, 116, 116;
    --gold-muted-rgb: 196, 92, 92;
    --gold-pale-rgb: 231, 154, 154;
    --gold-sun-rgb: 207, 49, 49;
    --gold-warm-rgb: 211, 65, 65;

    /* Optional: Tint the background slightly red */
    background: radial-gradient(circle at 50% 10%, #2a1a1a 0%, #050505 90%) !important;
    background-image: radial-gradient(circle at 50% 10%, var(--blood-dark) 0%, #0a0a0a 100%) !important;
}

/* Optional: Make the buttons look more aggressive in Hard Mode */
body.hard-mode .btn-action {
    border-style: double; /* Changes from solid to double lines */
}

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

    body {
        margin: 0; padding: 0; height: 100dvh; width: 100%;
        overflow: hidden; 
        /* Torchlight Gradient Background */
        background: radial-gradient(circle at 50% 10%, #2c313a 0%, #121418 90%);
        color: var(--text-main);
        font-family: var(--font-body);
        font-size: 16px;
        display: flex; flex-direction: column;
        line-height: 1.5;
            /* [ANDROID FIX] Prevents long-press selecting text or opening menus */
    -webkit-user-select: none; /* Chrome/Safari/Android */
    user-select: none;         /* Standard */
    -webkit-touch-callout: none; /* Prevents "Copy/Save Image" menu on long press */
    
    /* Prevent "pull to refresh" behavior in some WebViews */
    overscroll-behavior: none;
    }
    
    /* Allow text selection ONLY in specific areas where needed (like the Save Export box) */
#data-io-area {
    -webkit-user-select: text;
    user-select: text;
}

    /* --- ANIMATIONS --- */

    @keyframes spawn-in {
        0% { opacity: 0; transform: scale(0.9) translateY(10px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .anim-spawn { animation: spawn-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

    @keyframes death-fade {
        0% { opacity: 1; filter: grayscale(0); transform: scale(1); }
        100% { opacity: 0; filter: grayscale(1); transform: scale(0.9); }
    }
    .anim-death { animation: death-fade 0.5s ease-in forwards; pointer-events: none; }



    /* --- LAYOUT --- */
    #game-interface {
        flex: 1;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        display: flex; flex-direction: column; position: relative; height: 100%; z-index: 1;
    }

    .panel {
        flex: 1; display: flex; flex-direction: column;
        padding: 15px; overflow-y: auto;
        /* Glassy Panel Look */
        background: var(--panel-bg);
        margin-bottom: 70px;
        box-shadow: 0 0 20px rgba(0,0,0,0.2); 
    }
    
    #game-interface .panel {
        padding-bottom: 0px;
        margin-bottom: 58px;
    }

    /* If the body contains a #nav-dock that is NOT hidden, add margin to the panel */
    body:has(#nav-dock:has([style*="display: none"])) .panel {
        margin-bottom: 70px;
    }

    .panel:not(.active) { display: none; }

    h3 { 
        color: var(--accent-gold); margin: 0 0 15px 0; 
        text-transform: uppercase; font-size: 15px; letter-spacing: 3px; 
        font-family: var(--font-head); 
        border-bottom: 2px solid var(--border-color); 
        padding-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    /* --- CARDS (Rich Depth) --- */
    .card-header {
        display: flex; justify-content: space-between; align-items: center;
        font-size: 11px; color: var(--text-muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;
        font-family: var(--font-head); font-weight: bold;
    }
    .card-header b { color: var(--text-main); font-size: 15px; text-shadow: 0 1px 2px #000; }

    /* TARGET CARD */
    #card-target { min-height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(180deg, #1e2227 0%, #15181c 100%); position: relative; padding-top: 50px !important; /* Make room for the new header */ border-top: 1px solid rgba(var(--gold-old-rgb), 0.2); }
    .enemy-icon { font-size: 80px; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5)); width: 100px; object-fit: contain;  margin:auto; margin-top:0px; align-items: center; justify-content: center; display:flex; transition: all 0.5s; }

    /* BARS (Glossy) */
    .bar-container { width: 100%; margin-bottom: 6px; }
    .bar-track { background: #0f1114; height: 12px; width: 100%; border: 1px solid #2d323a; position: relative; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }
    .bar-fill { height: 100%; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; position: relative; overflow: hidden; background: #c0392b;}
    body.hard-mode #bar-enemy.bar-fill { background: #4cd137;}
    
    /* Add shine to bars */
    .bar-fill::after {
        content: ''; position: absolute; top:0; left:0; right:0; height: 50%;
        background: rgba(255,255,255,0.1);
    }

    #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; 
}
hp-enemy { background: linear-gradient(90deg, #c0392b, #e74c3c); }
    .fill-hp-player { background: linear-gradient(90deg, #27ae60, #2ecc71); }
    .fill-fury { background: linear-gradient(90deg, #d35400, #e67e22); }
    .fill-xp { background: linear-gradient(90deg, #f39c12, var(--gold-sun)); }
    
    @keyframes alarm-pulse {
        0% { background: #c0392b; }
        50% { background: #ff0000; }
        100% { background: #c0392b; }
    }
    .bar-low { animation: alarm-pulse 0.6s infinite ease-in-out; }

    /* CONTROLS (Tactile Buttons) */
    .btn-action {
        padding: 10px; font-size: 13px; font-weight: bold; text-transform: uppercase;
        border-radius: 6px; /* 3D Clicky Effect */
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05), 
                0 4px 10px rgba(0, 0, 0, 0.7) !important;
        font-family: inherit;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
    }
    .btn-action:hover:not(:disabled) { 
        border-color: var(--accent-gold); color: #fff; 
        background: linear-gradient(to bottom, #48505c, #3a404a);
    }
    .btn-action:active:not(:disabled) {
        transform: translateY(4px); box-shadow: 0 0 0 #1e2227; /* Press down */
    }
    .btn-action:disabled { opacity: 0.5; filter: grayscale(1); transform: translateY(2px); box-shadow: none !important; }
    .btn-action small { display: block; font-size: 10px; color: #9fa6b2; margin-top: 5px; font-weight: normal; font-family: var(--font-body); text-transform: none; }

    /* LIMIT BREAK (Glowing) */
    #btn-limit {
        grid-column: span 2; 
        background: linear-gradient(45deg, #4b2c20, #6d3625);
        border-color: var(--fury); color: #ffbcbc; 
        /*visibility: hidden; */
        box-shadow: 0 0 10px rgba(255, 69, 0, 0.3);
        animation: pulse 1.5s infinite;
    }
    /*.limit-ready { visibility: visible !important; }*/
    @keyframes pulse { 50% { border-color: #ffaa00; box-shadow: 0 0 20px rgba(255, 100, 0, 0.5); } }

    /* LOG */
    #log-feed {
        font-size: 13px; color: #dcdde1;
        line-height: 1;
        height: 110px; overflow-y: auto;
        border: 1px solid var(--border-color); 
        background: rgba(0,0,0,0.3);
        padding: 10px; margin: 12px 0;
        display: flex; flex-direction: column; gap: 5px;
        border-radius: 6px;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
        /* Adding a subtle fade effect to the top of the log */
        mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    }
    .c-combo { color: var(--fury); }

    /* HERO STAT BLOCKS */
    .stat-block { background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); padding: 12px; margin-bottom: 8px; border-radius: 6px; }
    .stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .stat-title { color: var(--text-main); font-weight: bold; font-size: 13px; font-family: var(--font-head); }
    
    .stat-val.buffed { color: var(--safe); font-weight: bold; text-shadow: 0 0 5px rgba(76, 209, 55, 0.4); }
    .stat-btn { margin-left:10px; width: 20px; height: 20px; cursor: pointer; transition: background 0.2s; }
    .stat-btn:hover { color: #000; background: var(--gold-amber); }
    
    /* CLASS OVERVIEW */
    .class-moves-summary {
        margin-top: 15px; border: 1px solid var(--accent-gold); 
        background: var(--accent-glow);
        padding: 12px; margin-bottom: 12px; border-radius: 6px;
    }
    .class-moves-summary h4 { color: #fff; font-size: 12px; margin: 0 0 10px 0; text-transform: uppercase; font-family: var(--font-head); letter-spacing: 1px; }
    .move-item { margin-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,0.2); padding-bottom: 8px; }
    .move-item b { color: var(--accent-gold); font-size: 13px; display: block; margin-bottom: 2px; }
    .move-item small { color: #ccc; font-size: 12px; line-height: 1.3; display: block; }

    /* LEGACY STATS */

    /* NAVIGATION */
    #nav-dock {
        box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
        width: 100%; /* Adjust height as needed */
        background-color: #1a1a1a; /* Dark RPG-style background */
        box-sizing: border-box;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 58px;
        background: linear-gradient(to top, #0a0608 0%, #140d10 100%);
        border-top: 1px solid rgba(180, 60, 60, 0.25);
        z-index: 999;
        overflow: visible;
    }
    .dock-item:hover { color: #b2bec3; }
    .dock-item.active { border-top: 2px solid var(--accent-gold); margin-top: -2px; color: var(--gold-nav); background: radial-gradient(circle at bottom, rgba(var(--gold-nav-rgb), 0.06) 0%, transparent 75%); }
    .dock-icon { font-size: 24px; height: 32px; margin-bottom: 2px; }

    /* LOCATIONS */
    .location-card { padding: 0px; cursor: pointer;
        display: flex; justify-content: space-between; align-items: center; border-left-width: 5px; z-index: 2; /* MUST be higher than path (1) to block it */ /* MANDATORY: Solid background to prevent line peeking through */ background: #1e2227 !important; border-radius: 6px; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.3); border: 1px solid #3d3024; transition: all 0.3s ease;
    }
    .location-card:hover { border-color: var(--accent-gold); background: #2c313a; transform: translateX(5px); }
    .location-card.locked { opacity: 0.5; pointer-events: none; filter: grayscale(1); background: #15181c; }

/* In style.css */