/* --- Core Variables & Body Styles (Moved from base.html) --- */
:root {
    --chess-dark: #0f172a;
    --chess-accent: #eab308;
    --chess-gray: #1e293b;
}

body {
    background-color: var(--chess-dark);
    color: white;
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- Components --- */
.glass-panel {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Adjusted to match your original subtle border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Transition effect for static feel (PJAX) */
#main-content {
    transition: opacity 0.2s ease-in-out;
}
#main-content.loading {
    opacity: 0.5;
}

/* Ensure no gaps for the sticky nav */
nav {
    margin-top: 0 !important;
}

/* --- Utilities --- */
/* Link Tailwind class to CSS variable */
.bg-chessAccent {
    background-color: var(--chess-accent) !important;
}

/* Ensure the loading bar has a physical height */
#loading-bar {
    height: 100% !important;
    min-height: 8px;
    display: block;
}

/* --- Scrollbar Customization --- */
.custom-scrollbar::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 6px; /* Matched to your original 6px preference */
}

.custom-scrollbar::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    background: #0f172a;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}



/* --- Pawn Structure Insights Highlights --- */
.pawn-insight-active {
    position: relative;
}

/* Pseudo-element creates the inner highlight without blocking clicks */
.pawn-insight-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through to the board */
    transition: all 0.2s ease-in-out;
}

/* Hierarchy of Highlights (Good to Bad) */
.pawn-unstoppable::after { box-shadow: inset 0 0 0 4px #22c55e; background: rgba(34, 197, 94, 0.4); }
.pawn-protected-passer::after { box-shadow: inset 0 0 0 4px #16a34a; background: rgba(22, 163, 74, 0.3); }
.pawn-passer::after { box-shadow: inset 0 0 0 4px #4ade80; background: rgba(74, 222, 128, 0.2); }
.pawn-isolated::after { box-shadow: inset 0 0 0 4px #ef4444; background: rgba(239, 68, 68, 0.3); }
.pawn-doubled::after { box-shadow: inset 0 0 0 4px #f97316; background: rgba(249, 115, 22, 0.3); }
.pawn-backward::after { box-shadow: inset 0 0 0 4px #eab308; background: rgba(234, 179, 8, 0.3); }
/* Blocked Pawns */
.pawn-ram::after { box-shadow: inset 0 0 0 4px #94a3b8; background: rgba(148, 163, 184, 0.3); } /* Slate */
.pawn-self-blocked::after { box-shadow: inset 0 0 0 4px #a855f7; background: rgba(168, 85, 247, 0.3); } /* Purple */


/* --- King Safety Insights Highlights --- */
.safety-insight-active {
    position: relative;
}

.safety-insight-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    transition: all 0.2s ease-in-out;
}

.safety-king-safe::after { box-shadow: inset 0 0 0 4px #22c55e; background: rgba(34, 197, 94, 0.2); }
.safety-king-danger::after { box-shadow: inset 0 0 0 4px #ef4444; background: rgba(239, 68, 68, 0.4); }
.safety-shield-intact::after { box-shadow: inset 0 0 0 4px #3b82f6; background: rgba(59, 130, 246, 0.3); } /* Blue */
.safety-shield-pushed::after { box-shadow: inset 0 0 0 4px #0ea5e9; background: rgba(14, 165, 233, 0.2); } /* Light Blue */
.safety-zone-danger::after { background: rgba(239, 68, 68, 0.15); border: 1px dashed rgba(239, 68, 68, 0.5); }



    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Montserrat:wght@300;400;600;800&display=swap');
    
    .font-display { font-family: 'Cinzel', serif; }
    
    /* Theme Variables */
    .theme-common { 
        --primary-glow: rgba(59, 130, 246, 0.6); 
        --border-gradient: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #2563eb 100%); 
        --text-accent: #60a5fa; 
        --bg-gradient: linear-gradient(160deg, #1e293b 0%, #0f172a 100%); 
        --hex-border: #3b82f6; 
    }
    
    /* Card Geometry & Aesthetics */
    .royal-shape { clip-path: polygon(25px 0, calc(100% - 25px) 0, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0 calc(100% - 25px), 0 25px); }
    #player-card { width: 100%; max-width: 400px; height: 680px; position: relative; background: var(--border-gradient); padding: 4px; box-shadow: 0 0 50px var(--primary-glow); transition: all 0.5s ease; margin: 0 auto; }
    .card-inner-content { width: 100%; height: 100%; background: var(--bg-gradient); position: relative; overflow: hidden; }
    .bg-pattern { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.5; z-index: 0; }
    
    /* Hexagon Profile Image */
    .hex-wrapper { width: 140px; height: 140px; clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); background: var(--hex-border); padding: 3px; margin: 0 auto; position: relative; z-index: 10; box-shadow: 0 0 30px var(--primary-glow); }
    .hex-inner { width: 100%; height: 100%; background: #000; clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .hex-inner img { width: 100%; height: 100%; object-fit: cover; }
    
    /* Metric Bars */
    .metric-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .metric-name { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.9); width: 40px; text-align: left; padding-right: 4px; font-family: 'Montserrat', sans-serif; font-weight: 700; }
    .metric-bar-bg { flex-grow: 1; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
    .metric-bar-fill { height: 100%; background: var(--text-accent); transition: width 1s ease-out; box-shadow: 0 0 5px var(--text-accent); }
    .metric-value { font-size: 0.7rem; font-weight: 700; color: white; width: 25px; text-align: right; padding-left: 5px; font-family: 'Montserrat', sans-serif; }
    
    /* Card Decorations */
    .royal-decor-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--text-accent), transparent); z-index: 5; }
    .royal-decor-bottom { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 80%; height: 1px; background: linear-gradient(90deg, transparent, var(--text-accent), transparent); z-index: 5; }