/* BBQCoin - Theme Matched to Official Logo */
/* Bronze Coin + Flame Aesthetic */

:root {
    /* Logo Colors - Bronze Coin Theme */
    --bronze-light: #D4A574;
    --bronze-mid: #B87333;
    --bronze-dark: #8B4513;
    --bronze-deep: #5C3317;

    /* Flame Colors from Logo */
    --flame-white: #FFFFFF;
    --flame-yellow: #FFF176;
    --flame-orange: #FF8C00;
    --flame-red: #E53935;
    --flame-dark-red: #B71C1C;

    /* Background gradient from logo */
    --bg-dark: #1A0A00;
    --bg-mid: #3D1F0D;
    --bg-glow: #5C2E0E;

    /* Text colors */
    --text-gold: #FFD54F;
    --text-bright: #FFECB3;
    --text-white: #FFFFFF;
}

body {
    font-family: "Comic Sans MS", "Comic Neue", cursive;
    background: radial-gradient(ellipse at center top, var(--bg-glow) 0%, var(--bg-mid) 30%, var(--bg-dark) 70%, #000000 100%);
    background-attachment: fixed;
    color: var(--text-gold);
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Add subtle texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Classic link styles - bronze/gold theme */
a:link {
    color: var(--text-gold);
    text-decoration: underline;
}

a:visited {
    color: var(--bronze-mid);
    text-decoration: underline;
}

a:hover {
    color: var(--flame-yellow);
    text-decoration: none;
    background-color: var(--flame-dark-red);
    text-shadow: 0 0 10px var(--flame-orange);
}

a:active {
    color: var(--text-white);
}

/* Navigation buttons - Bronze coin beveled style */
.navbtn {
    display: inline-block;
    padding: 8px 15px;
    background: linear-gradient(180deg,
            var(--bronze-light) 0%,
            var(--bronze-mid) 30%,
            var(--bronze-dark) 70%,
            var(--bronze-deep) 100%);
    border: 3px outset var(--bronze-light);
    color: #1A0A00 !important;
    text-decoration: none !important;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 0 var(--bronze-light);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.15s ease;
}

.navbtn:hover {
    background: linear-gradient(180deg,
            var(--flame-yellow) 0%,
            var(--flame-orange) 50%,
            var(--flame-red) 100%);
    border-style: inset;
    cursor: pointer;
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 20px var(--flame-orange);
}

/* Link buttons - Flame style */
.linkbtn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(180deg,
            var(--flame-orange) 0%,
            var(--flame-red) 50%,
            var(--flame-dark-red) 100%);
    border: 3px outset var(--flame-orange);
    color: var(--text-white) !important;
    text-decoration: none !important;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 3px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
}

.linkbtn:hover {
    background: linear-gradient(180deg,
            var(--flame-yellow) 0%,
            var(--flame-orange) 50%,
            var(--flame-red) 100%);
    border-style: inset;
    box-shadow:
        0 0 25px var(--flame-orange),
        0 0 50px rgba(255, 140, 0, 0.3);
    transform: scale(1.02);
}

/* Blink animation - the classic! */
blink {
    animation: blink-animation 1s steps(2, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* Make tables look more retro with bronze borders */
table {
    border-collapse: separate;
}

/* Scrollbar styling - Bronze coin theme */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, var(--bg-dark), #000);
    border: 1px solid var(--bronze-dark);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            var(--bronze-light),
            var(--bronze-mid),
            var(--bronze-dark));
    border: 2px outset var(--bronze-light);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            var(--flame-yellow),
            var(--flame-orange),
            var(--flame-red));
}

/* HR styling - Bronze gradient */
hr {
    border: none;
    height: 3px;
    background: linear-gradient(90deg,
            transparent,
            var(--bronze-dark),
            var(--bronze-light),
            var(--bronze-mid),
            var(--bronze-dark),
            transparent);
    box-shadow: 0 0 10px rgba(184, 115, 51, 0.3);
}

/* Fire flicker animation */
@keyframes fire-flicker {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
    }

    25% {
        opacity: 0.9;
        transform: scale(1.05);
        filter: brightness(1.2);
    }

    50% {
        opacity: 0.95;
        transform: scale(1.02);
        filter: brightness(1.1);
    }

    75% {
        opacity: 0.85;
        transform: scale(1.08);
        filter: brightness(1.3);
    }
}

/* Glow animation for important elements */
@keyframes bronze-glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(184, 115, 51, 0.3);
    }

    50% {
        box-shadow: 0 0 25px rgba(184, 115, 51, 0.6), 0 0 40px rgba(255, 140, 0, 0.2);
    }
}

/* Selection colors - Bronze theme */
::selection {
    background: var(--bronze-mid);
    color: var(--text-white);
}

/* Glow effect class */
.glow {
    text-shadow:
        0 0 10px var(--flame-orange),
        0 0 20px var(--flame-red),
        0 0 30px var(--flame-dark-red),
        0 0 40px rgba(255, 140, 0, 0.5);
}

/* Bronze glow for headers */
.bronze-glow {
    text-shadow:
        0 0 5px var(--bronze-light),
        0 0 15px var(--bronze-mid),
        0 0 25px rgba(184, 115, 51, 0.5);
}

/* Marquee enhancements */
marquee {
    padding: 8px 0;
    font-family: "Arial Black", Arial, sans-serif;
    background: linear-gradient(90deg,
            var(--flame-dark-red),
            var(--flame-red) 20%,
            var(--flame-orange) 50%,
            var(--flame-red) 80%,
            var(--flame-dark-red));
    border-top: 2px solid var(--bronze-light);
    border-bottom: 2px solid var(--bronze-dark);
}

/* Center tag support */
center {
    display: block;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

/* Main wrapper table centering */
body>center>table {
    margin: 0 auto !important;
}

/* Enhanced table styling for main wrapper */
body>center>table {
    box-shadow:
        0 0 30px rgba(184, 115, 51, 0.3),
        0 0 60px rgba(139, 69, 19, 0.2),
        inset 0 0 100px rgba(0, 0, 0, 0.5);
    border-color: var(--bronze-mid) !important;
}

/* Coin-style circular logo placeholder */
.logo-coin {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
            var(--flame-orange) 0%,
            var(--flame-red) 40%,
            var(--bronze-dark) 70%,
            var(--bronze-deep) 100%);
    border: 8px solid;
    border-color: var(--bronze-light) var(--bronze-dark) var(--bronze-deep) var(--bronze-mid);
    box-shadow:
        inset 0 -20px 40px rgba(0, 0, 0, 0.4),
        inset 0 20px 40px rgba(255, 255, 255, 0.1),
        0 5px 20px rgba(0, 0, 0, 0.5);
    animation: bronze-glow 3s ease-in-out infinite;
}

/* Flame border animation */
@keyframes flame-border {

    0%,
    100% {
        border-color: var(--flame-orange);
        box-shadow: 0 0 10px var(--flame-orange);
    }

    33% {
        border-color: var(--flame-red);
        box-shadow: 0 0 15px var(--flame-red);
    }

    66% {
        border-color: var(--flame-yellow);
        box-shadow: 0 0 20px var(--flame-yellow);
    }
}

/* Apply flame animation to important borders */
table[bordercolor="#FF6600"],
table[bordercolor="#ff6600"] {
    animation: flame-border 4s ease-in-out infinite;
}