/* Giant Black Bird Theme - Epic, Dark & Atmospheric */

/* Base Theme Colors */
body {
    background: #0A0A0C;
    color: #E0E0E0;
    font-family: "Montserrat", serif;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23353535' fill-opacity='0.15' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* Typography - Edgy, Sharp, Dramatic */
h1, h2, h3, h4 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

h1 {
    color: #FF1717;
    font-size: 96px;
    text-shadow:
            0 0 10px rgba(255, 0, 0, 0.5),
            0 0 20px rgba(255, 0, 0, 0.3);
}

h2 {
    color: #D6D6D6;
    border-bottom: 3px solid #550000;
}

h3 {
    color: #9A9A9A;
}

h4 {
    color: #BF0813;
}

p {
    line-height: 1.6;
    color: #C0C0C0;
}

/* Navigation */
.navbar {
    background: rgba(7, 7, 7, 0.85);
    border-bottom: 1px solid #400000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.navbar a {
    color: #DEDEDE;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

.navbar a:hover {
    color: #FF1717;
    opacity: 1;
    transform: scale(1.05);
}

.navbar-container .hamburger-lines .line {
    background: #BF0813;
}

/* Casino Items - Styled as Dungeon Entrances */
.casino-wrapper {
    background-image: linear-gradient(to bottom, rgba(10, 10, 15, 0.8), rgba(30, 10, 15, 0.5));
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    border-radius: 10px;
}

.casino-item {
    background: #141417;
    border: 1px solid #400000;
    box-shadow: inset 0 0 15px rgba(191, 8, 19, 0.15);
    transition: all 0.4s ease;
}

.casino-item:hover {
    transform: translateY(-5px);
    box-shadow:
            inset 0 0 15px rgba(191, 8, 19, 0.4),
            0 10px 20px rgba(0, 0, 0, 0.4);
}

.casino-item h4 {
    font-size: 24px;
    font-weight: 700;
    color: #E0E0E0;
}

.casino-item p {
    font-weight: 300;
    font-style: italic;
    color: #9A9A9A;
}

/* Buttons - Dramatic, Glowing */
.btn {
    font-weight: bold;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    border: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-red {
    background: #BF0813;
    color: white;
    box-shadow: 0 0 15px rgba(191, 8, 19, 0.4);
}

.btn-red:hover {
    background: #FF1717;
    box-shadow: 0 0 25px rgba(191, 8, 19, 0.6);
    transform: scale(1.05);
}

.btn-white {
    background: #E0E0E0;
    color: #0A0A0C;
}

.btn-white:hover {
    background: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.btn-blue {
    background: #1E1E4F;
    color: white;
}

.btn-blue:hover {
    background: #212190;
    box-shadow: 0 0 15px rgba(33, 33, 144, 0.5);
}

.btn-green {
    background: #2C5000;
    color: white;
}

.btn-green:hover {
    background: #4E9800;
    box-shadow: 0 0 15px rgba(78, 152, 0, 0.5);
}

.btn-light-red {
    background: #BF0813;
    color: white;
}

.btn-light-red:hover {
    background: #ED2329;
    box-shadow: 0 0 15px rgba(237, 35, 41, 0.5);
}

/* Footer - Mythical, Stone-like */
footer {
    border: none;
    background: #0F0F14;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23292929' fill-opacity='0.17'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

.footer-info {
    border-top: 1px solid #400000;
    color: #9A9A9A;
}

.footer-age {
    background: #0A0A0C;
    border: 1px solid #400000;
}

.logo-info img {
    filter: grayscale(50%) brightness(1.2);
}

.footer-links a {
    color: #999;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #BF0813;
    text-decoration: none;
}

/* Modal - Mythical Warning */
.modal {
    background: #141417;
    border: 1px solid #400000;
    box-shadow: 0 0 30px rgba(191, 8, 19, 0.4);
    color: #E0E0E0;
}

.modal .age-circle {
    background-color: #BF0813;
    box-shadow: 0 0 15px rgba(191, 8, 19, 0.6);
}

.modal h2 {
    color: #E0E0E0;
    border-bottom: 1px solid #400000;
}

.modal button {
    background-color: #BF0813;
    color: white;
    box-shadow: 0 0 15px rgba(191, 8, 19, 0.4);
    transition: all 0.3s ease;
}

.modal button:hover {
    background-color: #FF1717;
    box-shadow: 0 0 25px rgba(191, 8, 19, 0.6);
    transform: scale(1.05);
}

/* Content Sections */
.flex-cont {
    position: relative;
}

.info {
    background: rgba(10, 10, 15, 0.7);
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-left: 3px solid #BF0813;
}

/* Custom Animation for Bird Theme */
@keyframes featherFloat {
    0% {transform: translateY(0) rotate(0deg);}
    50% {transform: translateY(-15px) rotate(5deg);}
    100% {transform: translateY(0) rotate(0deg);}
}

.logo img {
    animation: featherFloat 6s ease infinite;
}

/* Atmospheric Interactive Effects */
.casino img:hover {
    filter: drop-shadow(0 0 15px rgba(191, 8, 19, 0.6));
    transform: scale(1.05);
}

#choose {
    background: linear-gradient(to bottom, rgba(10, 10, 15, 0), rgba(10, 10, 15, 0.8)),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23350000' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Giant Black Bird Theme - Epic, Dark & Atmospheric */

/* Custom Properties for Theme */
:root {
    --primary-dark: #0A0A0C;
    --secondary-dark: #141417;
    --blood-red: #BF0813;
    --bright-red: #FF1717;
    --ash-gray: #9A9A9A;
    --bone-white: #E0E0E0;
    --claw-black: #000000;
    --mountain-stone: #2A2A2A;
    --dungeon-shadow: rgba(0, 0, 0, 0.8);
    --feather-glow: rgba(255, 0, 0, 0.3);
}

/* Base Theme Colors */
body {
    background: #0A0A0C;
    color: #E0E0E0;
    font-family: "Montserrat", serif;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23353535' fill-opacity='0.15' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* Typography - Edgy, Sharp, Dramatic */
h1, h2, h3, h4 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

h1 {
    color: #FF1717;
    font-size: 96px;
    text-shadow:
            0 0 10px rgba(255, 0, 0, 0.5),
            0 0 20px rgba(255, 0, 0, 0.3);
    position: relative;
}

/* Epic Text Effect for Main Headings */
h1::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 0, 0, 0.3);
    z-index: -1;
    transform: translateX(-5px) translateY(5px);
}

h1:hover {
    animation: textFlicker 2s linear forwards;
}

@keyframes textFlicker {
    0% { text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3); }
    5% { text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3); }
    6% { text-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
    10% { text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3), 0 0 40px rgba(255, 0, 0, 0.2); }
    15% { text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3); }
    25% { text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3), 0 0 30px rgba(255, 0, 0, 0.2); }
    30% { text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3); }
    100% { text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3); }
}

h2 {
    color: #D6D6D6;
    border-bottom: 3px solid #550000;
}

h3 {
    color: #9A9A9A;
}

h4 {
    color: #BF0813;
}

p {
    line-height: 1.6;
    color: #C0C0C0;
}

/* Navigation */
.navbar {
    background: rgba(7, 7, 7, 0.85);
    border-bottom: 1px solid #400000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.navbar a {
    color: #DEDEDE;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

.navbar a:hover {
    color: #FF1717;
    opacity: 1;
    transform: scale(1.05);
}

.navbar-container .hamburger-lines .line {
    background: #BF0813;
}

/* Casino Items - Styled as Dungeon Entrances */
.casino-wrapper {
    background-image: linear-gradient(to bottom, rgba(10, 10, 15, 0.8), rgba(30, 10, 15, 0.5));
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    border-radius: 10px;
}

.casino-item {
    background: #141417;
    border: 1px solid #400000;
    box-shadow: inset 0 0 15px rgba(191, 8, 19, 0.15);
    transition: all 0.4s ease;
}

.casino-item:hover {
    transform: translateY(-5px);
    box-shadow:
            inset 0 0 15px rgba(191, 8, 19, 0.4),
            0 10px 20px rgba(0, 0, 0, 0.4);
}

.casino-item h4 {
    font-size: 24px;
    font-weight: 700;
    color: #E0E0E0;
}

.casino-item p {
    font-weight: 300;
    font-style: italic;
    color: #9A9A9A;
}

/* Buttons - Dramatic, Glowing */
.btn {
    font-weight: bold;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    border: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-red {
    background: #BF0813;
    color: white;
    box-shadow: 0 0 15px rgba(191, 8, 19, 0.4);
}

.btn-red:hover {
    background: #FF1717;
    box-shadow: 0 0 25px rgba(191, 8, 19, 0.6);
    transform: scale(1.05);
}

.btn-white {
    background: #E0E0E0;
    color: #0A0A0C;
}

.btn-white:hover {
    background: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.btn-blue {
    background: #1E1E4F;
    color: white;
}

.btn-blue:hover {
    background: #212190;
    box-shadow: 0 0 15px rgba(33, 33, 144, 0.5);
}

.btn-green {
    background: #2C5000;
    color: white;
}

.btn-green:hover {
    background: #4E9800;
    box-shadow: 0 0 15px rgba(78, 152, 0, 0.5);
}

.btn-light-red {
    background: #BF0813;
    color: white;
}

.btn-light-red:hover {
    background: #ED2329;
    box-shadow: 0 0 15px rgba(237, 35, 41, 0.5);
}

/* Footer - Mythical, Stone-like */
footer {
    border: none;
    background: #0F0F14;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23292929' fill-opacity='0.17'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3);
}

.footer-info {
    border-top: 1px solid #400000;
    color: #9A9A9A;
}

.footer-age {
    background: #0A0A0C;
    border: 1px solid #400000;
}

.logo-info img {
    filter: grayscale(50%) brightness(1.2);
}

.footer-links a {
    color: #999;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #BF0813;
    text-decoration: none;
}

/* Modal - Mythical Warning */
.modal {
    background: #141417;
    border: 1px solid #400000;
    box-shadow: 0 0 30px rgba(191, 8, 19, 0.4);
    color: #E0E0E0;
}

.modal .age-circle {
    background-color: #BF0813;
    box-shadow: 0 0 15px rgba(191, 8, 19, 0.6);
}

.modal h2 {
    color: #E0E0E0;
    border-bottom: 1px solid #400000;
}

.modal button {
    background-color: #BF0813;
    color: white;
    box-shadow: 0 0 15px rgba(191, 8, 19, 0.4);
    transition: all 0.3s ease;
}

.modal button:hover {
    background-color: #FF1717;
    box-shadow: 0 0 25px rgba(191, 8, 19, 0.6);
    transform: scale(1.05);
}

/* Content Sections */
.flex-cont {
    position: relative;
}

.info {
    background: rgba(10, 10, 15, 0.7);
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border-left: 3px solid #BF0813;
}

/* Custom Animation for Bird Theme */
@keyframes featherFloat {
    0% {transform: translateY(0) rotate(0deg);}
    50% {transform: translateY(-15px) rotate(5deg);}
    100% {transform: translateY(0) rotate(0deg);}
}

.logo img {
    animation: featherFloat 6s ease infinite;
}

/* Atmospheric Interactive Effects */
.casino img:hover {
    filter: drop-shadow(0 0 15px rgba(191, 8, 19, 0.6));
    transform: scale(1.05);
}

#choose {
    background: linear-gradient(to bottom, rgba(10, 10, 15, 0), rgba(10, 10, 15, 0.8)),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23350000' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    position: relative;
    overflow: hidden;
}

/* Advanced Atmospheric Effects */

/* Claw Scratch Effect for Sections */
section {
    position: relative;
}

section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 80px;
    background-image:
            linear-gradient(45deg, transparent 49.5%, #400000 49.5%, #400000 50.5%, transparent 50.5%),
            linear-gradient(45deg, transparent 59.5%, #400000 59.5%, #400000 60.5%, transparent 60.5%),
            linear-gradient(45deg, transparent 69.5%, #400000 69.5%, #400000 70.5%, transparent 70.5%);
    opacity: 0.2;
    pointer-events: none;
}

/* Mountain Ruins Effect */
.container {
    position: relative;
}

.container::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background-image:
            linear-gradient(45deg, transparent 33.333%, #0A0A0C 33.333%, #0A0A0C 66.667%, transparent 66.667%),
            linear-gradient(-45deg, transparent 33.333%, #0A0A0C 33.333%, #0A0A0C 66.667%, transparent 66.667%);
    background-size: 20px 40px;
    opacity: 0.5;
    z-index: -1;
}

/* Glowing Feather Effect for Images */
img {
    transition: all 0.5s ease;
    filter: brightness(0.85) contrast(1.2);
}

img:hover {
    filter: brightness(1.1) contrast(1.3) drop-shadow(0 0 10px rgba(191, 8, 19, 0.4));
}

/* Flying Bird Shadow Effect */
body::before {
    content: '';
    position: fixed;
    top: 50px;
    left: -200px;
    width: 200px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M10,25 C30,5 70,10 90,30 C70,20 30,35 10,25 Z' fill='%23000000' fill-opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: birdShadow 30s linear infinite;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.3;
}

@keyframes birdShadow {
    0% {transform: translateX(-100px) translateY(0) scale(0.5);}
    50% {transform: translateX(calc(100vw + 300px)) translateY(100px) scale(2.5);}
    50.001% {transform: translateX(-100px) translateY(200px) scale(0.5);}
    100% {transform: translateX(calc(100vw + 300px)) translateY(50px) scale(1.5);}
}

/* Feather Fall Animation */
@keyframes featherFall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.1;
    }
    100% {
        transform: translateY(1000%) rotate(720deg);
        opacity: 0;
    }
}

.navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 8px;
    height: 20px;
    background: #400000;
    border-radius: 50% 50% 0 50%;
    transform-origin: center bottom;
    box-shadow: 0 0 5px rgba(191, 8, 19, 0.2);
    animation: featherFall 15s ease-in infinite;
    z-index: -1;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 70%;
    width: 12px;
    height: 30px;
    background: #200000;
    border-radius: 50% 50% 50% 0;
    transform-origin: center bottom;
    box-shadow: 0 0 5px rgba(191, 8, 19, 0.2);
    animation: featherFall 20s 5s ease-in infinite;
    z-index: -1;
}

/* Heartbeat Effect for Call-to-Action Elements */
.btn-red, .casino-item h4 {
    animation: heartbeat 5s ease-in-out infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    3% { transform: scale(1.05); }
    6% { transform: scale(1); }
    9% { transform: scale(1.03); }
    12% { transform: scale(1); }
    100% { transform: scale(1); }
}

/* Magic Particle Effect for Hovered Elements */
.casino-item:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #BF0813 10%, transparent 10.5%),
    radial-gradient(circle, #BF0813 10%, transparent 10.5%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
    animation: particleFade 1s forwards;
    pointer-events: none;
}

@keyframes particleFade {
    0% { opacity: 0.5; }
    100% { opacity: 0; }
}

/* Dungeon Gate Opening Effect */
.casino-wrapper:hover {
    box-shadow:
            0 0 25px rgba(0, 0, 0, 0.8),
            0 0 50px rgba(191, 8, 19, 0.3),
            0 0 100px rgba(191, 8, 19, 0.1);
}

/* Raven Eyes Effect - Glowing Red Dots That Follow Mouse */
body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23BF0813' fill-opacity='0.5'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23FF1717' fill-opacity='0.8'/%3E%3C/svg%3E"), auto;
}