/* Comic Header Variables & Styles - Gogeta Blue Theme */
:root {
    --comic-red: #ef4444;
    --comic-blue: #0284c7;
    --comic-cyan: #00f0ff;
    --comic-yellow: #ffb703;
    --comic-orange: #fb8500;
    --comic-black: #0f172a;
    --comic-white: #ffffff;
    --comic-border: 3.5px solid var(--comic-black);
    --comic-shadow: 4px 4px 0 var(--comic-black);
    --comic-font: "Baloo 2", "Nunito", sans-serif;
}

/* Header Panel */
.header-panel {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 50%, #0284c7 100%);
    padding: 15px 20px;
    margin-bottom: 0;
    border-radius: 20px 20px 0 0;
    border-bottom: 3.5px solid #0f172a;
}

.comic-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.comic-logo img {
    max-height: 85px;
    width: auto;
    filter: drop-shadow(0 6px 12px rgba(2, 132, 199, 0.4));
    transition: transform 0.2s ease;
}

.comic-logo img:hover {
    transform: scale(1.05);
}

.comic-header {
    font-family: var(--comic-font);
    font-size: 2.2rem;
    text-align: center;
    color: #0f172a;
    background: linear-gradient(180deg, #ffe066 0%, #ff9800 60%, #e65100 100%);
    padding: 8px 20px;
    border: 3px solid #0f172a;
    border-radius: 14px;
    box-shadow: 3.5px 3.5px 0 #0f172a;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comic-header-container {
    text-align: center;
    margin-bottom: 20px;
}