/* =========================
   DARK FUTURE VICTORIAN ENGLAND THEME (BROWN-BLACK TONE)
   ========================= */

:root {
    --bg-main: #120e0b;
    --bg-panel: #1b1612;
    --charcoal: #2a2420;
    --aged-silver: #a6a29a;
    --smoke-brown: #3b3128;
    --deep-crimson: #6e1f2a;
    --gaslight: #e6c27a;

    --text-main: #efe7da;
    --text-dim: #b3a896;
}

/* BODY */
.site-body {
    background: radial-gradient(circle at top, #241c16, #0a0705 70%);
    color: var(--text-main);
    font-family: "Georgia", "Times New Roman", serif;
}

/* WRAPPER */
.site-wrapper {
    max-width: 1100px;
    background: linear-gradient(145deg, #211913, #14100d);
    border: 3px solid var(--charcoal);
    border-radius: 10px;
    position: relative;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.85),
        0 0 40px rgba(0,0,0,0.95);
}

.site-wrapper::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    background: linear-gradient(120deg, var(--deep-crimson), var(--smoke-brown));
    z-index: -1;
    opacity: 0.35;
    filter: blur(8px);
}

/* NAVBAR */
.site-navbar {
    background: transparent !important;
    border-bottom: 1px solid var(--charcoal);
}

.site-logo {
    font-weight: bold;
    letter-spacing: 3px;
    color: var(--gaslight) !important;
    text-shadow:
        0 0 8px rgba(230,194,122,0.6),
        0 0 20px rgba(110,31,42,0.35);
}

/* HERO */
.hero-section {
    background: linear-gradient(180deg, rgba(59,49,40,0.25), transparent);
    border: 1px solid var(--charcoal);
    border-radius: 10px;
}

/* =========================
   TITLE FLICKER (MOVED FROM HTML)
   ========================= */

/* Vintage gas-lamp neon glow */
@keyframes titleFlicker {

    /* steady warm glow */
    0%,18%,22%,25%,53%,57%,100% {
        opacity:1;
        text-shadow:
        0 0 6px  rgba(255,220,160,0.9),
        0 0 14px rgba(255,200,120,0.8),
        0 0 28px rgba(255,170,90,0.6),
        0 0 60px rgba(255,150,80,0.35);
    }

    /* lamp dip */
    20%,24%,55% {
        opacity:0.35;
        text-shadow:
        0 0 2px rgba(255,220,170,0.2);
    }

    /* warm flicker recovery */
    21%,56% {
        opacity:0.7;
        text-shadow:
        0 0 8px  rgba(255,210,150,0.45),
        0 0 18px rgba(255,170,100,0.30);
    }
}


.flicker-title { animation: titleFlicker 3.2s infinite steps(60,end); }

/* GAME CARDS */
.game-card {
    background: linear-gradient(160deg, #221a15, #120e0b);
    border: 1px solid var(--charcoal);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.game-card:hover {
    transform: translateY(-4px);
    border-color: var(--smoke-brown);
    box-shadow:
        0 0 20px rgba(59,49,40,0.6),
        0 0 25px rgba(110,31,42,0.35);
}

.game-title {
    color: var(--gaslight);
}

.game-description {
    color: var(--text-dim);
}

.play-button {
    background: linear-gradient(#2a221c, #1a1410);
    border: 1px solid var(--aged-silver);
    color: var(--aged-silver);
}

.play-button:hover {
    background: var(--deep-crimson);
    color: #fff;
    box-shadow: 0 0 12px rgba(110,31,42,0.6);
}

/* FOOTER */
.footer-text {
    color: var(--text-dim);
    font-size: 0.9rem;
    border-top: 1px solid var(--charcoal);
    padding-top: 10px;
    text-shadow: 0 0 4px rgba(59,49,40,0.6);
}

/* =========================
   ROTATING GEAR DECORATION
   ========================= */

.rotating-gear {
    position: fixed;
    top: -300px;
    right: -300px;
    width: 600px;
    height: 600px;
    opacity: 1;
    pointer-events: none;
    animation: rotateGear 20s linear infinite;
    z-index: 0;
}

@keyframes rotateGear {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* extra gears */
.gear-right-small{width:300px;height:300px;top:-260px;right:-220px;animation-duration:14s;}
.gear-top-right-extra{
    position:fixed;
    width:260px;
    height:260px;
    top:-420px;
    right:-420px;
    opacity: 1;
    animation-duration:18s;
    animation-direction:reverse;
}
.gear-left-large{width:500px;height:500px;top:-260px;left:-260px;animation-duration:26s;}
.gear-left-small{width:260px;height:260px;top:-120px;left:-160px;animation-duration:12s;animation-direction:reverse;}