html {
    scroll-behavior: smooth; /* For smooth scrolling on link clicks */
    scroll-padding-top: 80px; /* Adjust based on navbar height */
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #100000; /* Deep, dark blood red / near black */
    color: #F3E5AB; /* Pale gold / parchment */
    overflow-x: hidden; /* Prevent horizontal scroll */
}
.font-cinzel {
    font-family: 'Cinzel Decorative', cursive;
}
/* User's Enhanced Satin Background */
.satin-red-bg {
    background-image: url(screenshots/bg.png); /* User's path */
    background-size: cover; /* Ensure it covers the area */
    background-position: center; /* Center the background */
    background-blend-mode: multiply;
}
/* User's Enhanced Leather Background */
.leather-bg {
    background:url(leather.jpg); /* User's path */
    background-color: rgba(46, 18, 18, 0.925);
    background-blend-mode: color;
    background-size: cover; /* Ensure it covers the area */
    background-position: center; /* Center the background */
    border: 2px solid #4a3a3a;
    position: relative;
    z-index: 0;
}
.leather-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}

.gold-text {
    color: #FFD700;
}
.pale-gold-text {
    color: #F3E5AB;
}

/* User's Enhanced Buttons */
.btn-primary {
    /* @apply satin-red-bg text-white font-cinzel text-xl py-4 px-8 rounded-lg shadow-xl transform transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-50; */
    /* Tailwind classes for base styling, overridden by direct properties below */
    /* Consider re-adding Tailwind classes if direct styles cause issues or for better maintainability */
    color: white; /* From @apply text-white */
    font-family: 'Cinzel Decorative', cursive; /* From @apply font-cinzel */
    font-size: 1.25rem; /* From @apply text-xl (approx) */
    line-height: 1.75rem; /* From @apply text-xl (approx) */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* From @apply shadow-xl */
    transform: scale(1); /* Base for transition */
    transition-property: all; /* From @apply transition-all */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* From @apply ease-in-out */
    transition-duration: 300ms; /* From @apply duration-300 */
    /* focus:outline-none and focus:ring related styles are harder to replicate without Tailwind's JS or more complex CSS */

    border: 2px solid #FFE299;
    background-blend-mode: unset;
    background:linear-gradient(0deg,rgba(255, 226, 153, 1) 0%, rgba(212, 162, 36, 1) 7%, rgba(121, 63, 9, 0.747) 14%, rgba(255, 225, 128, 1) 95%, rgba(255, 212, 102, 1) 100%), url(button.png); /* User's path */
    padding:25px;
    border-radius: 25px;
    background-size: contain;
    background-repeat: no-repeat; /* Added for better control */
    background-position: center; /* Added for better control */
    display: inline-block; /* Ensure padding and other box model properties work as expected */
    text-align: center; /* Ensure text is centered */
}
.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(212,0,0,0.7), 0 0 15px #FFD700;
    border-color: #FFF700;
}
.btn-secondary {
    /* @apply leather-bg text-pale-gold-text font-cinzel py-3 px-6 rounded-md shadow-lg transform transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50; */
    /* Applying base styles directly if Tailwind @apply is not processed in pure CSS */
    color: #F3E5AB; /* text-pale-gold-text */
    font-family: 'Cinzel Decorative', cursive; /* font-cinzel */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 1.5rem; /* px-6 */
    padding-right: 1.5rem; /* px-6 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* shadow-lg */
    transform: scale(1);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    /* The leather-bg class itself adds background properties */
    border: 1px solid #FFD700;
    display: inline-block;
    text-align: center;
}
.btn-secondary.leather-bg { /* Ensure leather-bg styles apply correctly */
    background:url(leather.jpg);
    background-color: rgba(46, 18, 18, 0.925);
    background-blend-mode: color;
    background-size: cover;
    background-position: center;
}
.btn-secondary:hover {
    background-color: #3a2a2a; /* This will override the leather-bg image if not handled carefully. Consider blending or a different approach if image should persist */
    box-shadow: 0 0 15px rgba(0,0,0,0.5), 0 0 8px #FFD700;
}
.btn-secondary.leather-bg:hover {
    background: #3a2a2a url(leather.jpg); /* Attempt to keep leather texture on hover */
    background-blend-mode: color;
    background-size: cover;
    background-position: center;
}


.card {
    /* @apply leather-bg p-6 rounded-xl border-2 border-yellow-600; */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    border-width: 2px; /* border-2 */
    border-color: #FFD700; /* border-yellow-600 - Tailwind uses a slightly different yellow, this is #FFD700 */
    /* leather-bg class applies background */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0px 5px 20px rgba(0,0,0,0.4);
}
.card.leather-bg { /* Ensure leather-bg styles apply correctly */
    background:url(leather.jpg);
    background-color: rgba(46, 18, 18, 0.925);
    background-blend-mode: color;
    background-size: cover;
    background-position: center;
}

.player-card {
    /* @apply bg-gradient-to-br from-gray-800 via-gray-900 to-black p-4 rounded-lg shadow-lg border border-red-700 text-center transition-all duration-300; */
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); /* bg-gradient-to-br */
    --tw-gradient-from: #374151 var(--tw-gradient-from-position); /* from-gray-800 (approx) */
    --tw-gradient-to: rgb(55 65 81 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to); /* via-gray-900 (approx) */
    --tw-gradient-to: #000 var(--tw-gradient-to-position); /* to-black */
    padding: 1rem; /* p-4 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* shadow-lg */
    border-width: 1px; /* border */
    border-color: #B91C1C; /* border-red-700 (approx) */
    text-align: center; /* text-center */
    transition-property: all; /* transition-all */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms; /* duration-300 */
}
.player-card:hover {
    box-shadow: 0 0 15px rgba(200, 50, 50, 0.6), 0 0 10px #FFD700;
    border-color: #FF8080;
    transform: translateY(-5px);
}
.player-head {
    /* @apply w-24 h-24 md:w-32 md:h-32 mx-auto rounded-full object-cover border-4 border-red-600 shadow-md mb-3; */
    width: 6rem; /* w-24 */
    height: 6rem; /* h-24 */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
    border-radius: 9999px; /* rounded-full */
    object-fit: cover; /* object-cover */
    border-width: 4px; /* border-4 */
    border-color: #DC2626; /* border-red-600 (approx) */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* shadow-md */
    margin-bottom: 0.75rem; /* mb-3 */
}
@media (min-width: 768px) { /* md: breakpoint */
    .player-head {
        width: 8rem; /* md:w-32 */
        height: 8rem; /* md:h-32 */
    }
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 1s ease-out forwards;
}
.fade-in-delay-1 { animation-delay: 0.2s; opacity:0; }
.fade-in-delay-2 { animation-delay: 0.4s; opacity:0; }
.fade-in-delay-3 { animation-delay: 0.6s; opacity:0; }
.fade-in-delay-4 { animation-delay: 0.8s; opacity:0; }

.decorative-divider {
    height: 2px;
    background: #FFD700;
    margin: 3.5rem auto;
    width: 25%;
    position: relative;
    box-shadow: 0 0 8px #FFD700;
}
.decorative-divider span {
    display: block;
    position: relative;
}
.decorative-divider span::before,
.decorative-divider span::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    background-color: #FFD700;
    border: 1px solid #F3E5AB;
    transform: translateY(-50%) rotate(45deg);
    box-shadow: 0 0 5px #FFD700;
}
.decorative-divider span::before { left: -20px; }
.decorative-divider span::after { right: -20px; }
.decorative-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background-color: #100000;
    border: 2px solid #FFD700;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 8px #FFD700;
}

.section-title {
    /* @apply font-cinzel text-4xl md:text-5xl gold-text mb-4 text-center fade-in; */
    font-family: 'Cinzel Decorative', cursive;
    font-size: 2.25rem; /* text-4xl */
    line-height: 2.5rem;
    color: #FFD700; /* gold-text */
    margin-bottom: 1rem; /* mb-4 */
    text-align: center; /* text-center */
    /* fade-in class handles animation */
    text-shadow: 2px 2px 0px #6A4F00,
                 3px 3px 5px rgba(0,0,0,0.7),
                 0 0 10px rgba(255,215,0,0.3);
}
@media (min-width: 768px) { /* md: breakpoint */
    .section-title {
        font-size: 3rem; /* md:text-5xl */
        line-height: 1;
    }
}
.section-subtitle {
    /* @apply font-cinzel text-2xl md:text-3xl text-red-400 mb-8 text-center fade-in fade-in-delay-1; */
    font-family: 'Cinzel Decorative', cursive;
    font-size: 1.5rem; /* text-2xl */
    line-height: 2rem;
    color: #F87171; /* text-red-400 (approx) */
    margin-bottom: 2rem; /* mb-8 */
    text-align: center;
    /* fade-in and fade-in-delay-1 classes handle animation */
    text-shadow: 1px 1px 0px #800000,
                 2px 2px 4px rgba(0,0,0,0.6);
}
@media (min-width: 768px) { /* md: breakpoint */
    .section-subtitle {
        font-size: 1.875rem; /* md:text-3xl */
        line-height: 2.25rem;
    }
}

.logo-h1 { 
    line-height: 1.1; 
}

.image-modal-overlay {
    /* @apply fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center p-4 z-[100] transition-opacity duration-300 ease-in-out opacity-0 pointer-events-none; */
    position: fixed;
    inset: 0px;
    background-color: rgba(0,0,0,0.8); /* bg-black bg-opacity-80 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* p-4 */
    z-index: 100; /* z-[100] */
    transition-property: opacity; /* transition-opacity */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    transition-duration: 300ms; /* duration-300 */
    opacity: 0; /* opacity-0 */
    pointer-events: none; /* pointer-events-none */
}
.image-modal-overlay.active {
    /* @apply opacity-100 pointer-events-auto; */
    opacity: 1;
    pointer-events: auto;
}
.image-modal-content {
    /* @apply relative bg-transparent p-0 rounded-lg shadow-2xl max-w-4xl max-h-[90vh] w-auto; */
    position: relative;
    background-color: transparent;
    padding: 0px;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
    max-width: 56rem; /* max-w-4xl */
    max-height: 90vh;
    width: auto;
}
.image-modal-content img {
    /* @apply block max-w-full max-h-[85vh] h-auto w-auto object-contain rounded-md border-4 border-yellow-600; */
    display: block;
    max-width: 100%;
    max-height: 85vh;
    height: auto;
    width: auto;
    object-fit: contain;
    border-radius: 0.375rem; /* rounded-md */
    border-width: 4px;
    border-color: #FFD700; /* border-yellow-600 (using gold-text color) */
    box-shadow: 0 0 20px rgba(255,215,0,0.5);
}
.image-modal-close-btn {
    /* @apply absolute -top-4 -right-4 text-white bg-red-700 hover:bg-red-600 rounded-full h-10 w-10 flex items-center justify-center text-2xl font-bold cursor-pointer shadow-lg; */
    position: absolute;
    top: -1rem; /* -top-4 */
    right: -1rem; /* -right-4 */
    color: white;
    background-color: #B91C1C; /* bg-red-700 (approx) */
    border-radius: 9999px; /* rounded-full */
    height: 2.5rem; /* h-10 */
    width: 2.5rem; /* w-10 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* text-2xl */
    line-height: 2rem;
    font-weight: 700; /* font-bold */
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* shadow-lg */
    z-index: 110; 
}
.image-modal-close-btn:hover {
    background-color: #991B1B; /* hover:bg-red-600 (approx) */
}
.screenshot-thumbnail {
    /* @apply cursor-pointer rounded-lg shadow-xl border-2 border-red-700 hover:scale-105 transform transition-transform duration-300; */
    cursor: pointer;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);/* shadow-xl */
    border-width: 2px;
    border-color: #B91C1C; /* border-red-700 (approx) */
    transition-property: transform; /* transition-transform */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.screenshot-thumbnail:hover {
    transform: scale(1.05); /* hover:scale-105 */
}

.rules-card {
    /* @apply leather-bg p-6 md:p-8 rounded-xl shadow-2xl border-2 border-yellow-700 text-left; */
    /* leather-bg class applies background */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* shadow-2xl */
    border-width: 2px;
    border-color: #FFD700; /* border-yellow-700 (using gold-text) */
    text-align: left;
}
@media (min-width: 768px) { /* md: breakpoint */
    .rules-card {
        padding: 2rem; /* md:p-8 */
    }
}
.rules-card.leather-bg { /* Ensure leather-bg styles apply correctly */
    background:url(leather.jpg);
    background-color: rgba(46, 18, 18, 0.925);
    background-blend-mode: color;
    background-size: cover;
    background-position: center;
}

.rules-card h4 {
    /* @apply font-cinzel text-2xl gold-text mt-6 mb-3; */
    font-family: 'Cinzel Decorative', cursive;
    font-size: 1.5rem; /* text-2xl */
    line-height: 2rem;
    color: #FFD700; /* gold-text */
    margin-top: 1.5rem; /* mt-6 */
    margin-bottom: 0.75rem; /* mb-3 */
    text-shadow: 1px 1px 0px #6A4F00, 2px 2px 3px rgba(0,0,0,0.5);
}
.rules-card ul { 
    /* @apply list-disc list-inside space-y-2 pl-4 pale-gold-text; */
    list-style-type: disc; /* list-disc */
    list-style-position: inside; /* list-inside */
    padding-left: 1rem; /* pl-4 */
    color: #F3E5AB; /* pale-gold-text */
}
.rules-card ul > li + li { /* space-y-2 */
    margin-top: 0.5rem;
}
.rules-card li { 
    /* @apply mb-1; */
    margin-bottom: 0.25rem;
}
.rules-card p { 
    /* @apply pale-gold-text mb-3 leading-relaxed; */
    color: #F3E5AB;
    margin-bottom: 0.75rem;
    line-height: 1.625; /* leading-relaxed */
}
.rules-card strong { 
    /* @apply gold-text;  */
    color: #FFD700;
}
.rules-card .note { 
    /* @apply text-sm italic text-red-300 mt-2;  */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    font-style: italic;
    color: #FCA5A5; /* text-red-300 (approx) */
    margin-top: 0.5rem;
}
.rules-card a { 
    /* @apply text-red-400 hover:text-red-300 underline; */
    color: #F87171; /* text-red-400 (approx) */
    text-decoration-line: underline;
}
.rules-card a:hover {
    color: #FCA5A5; /* hover:text-red-300 (approx) */
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #1a1111; border-left: 1px solid #4a3a3a; }
::-webkit-scrollbar-thumb { background: #8B0000; border-radius: 6px; border: 2px solid #4a3a3a; }
::-webkit-scrollbar-thumb:hover { background: #A00000; }
.gimmespace { margin: 50px; } /* User's class */

/* Navbar Styles */
#page-navbar {
    /* @apply fixed top-0 left-0 right-0 leather-bg py-2 transition-all duration-300 ease-in-out shadow-lg; */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    /* leather-bg class applies background */
    padding-top: 0.5rem; /* py-2 */
    padding-bottom: 0.5rem; /* py-2 */
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* shadow-lg */
    z-index: 90;
}
#page-navbar.leather-bg { /* Ensure leather-bg styles apply correctly */
    background:url(leather.jpg);
    background-color: rgba(46, 18, 18, 0.925);
    background-blend-mode: color;
    background-size: cover;
    background-position: center;
}

#page-navbar.scrolled { 
    /* @apply py-1; */
    padding-top: 0.25rem; /* py-1 */
    padding-bottom: 0.25rem; /* py-1 */
    background-color: rgba(30,10,10,0.95); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
#page-navbar.scrolled.leather-bg { /* Ensure leather-bg styles apply correctly when scrolled */
    background: rgba(30,10,10,0.95) url(leather.jpg);
    background-blend-mode: color; /* Or multiply/overlay depending on desired effect */
    background-size: cover;
    background-position: center;
}
.navbar-link {
    /* @apply font-cinzel text-pale-gold-text px-3 py-1 rounded-md text-sm hover:text-gold-text hover:bg-red-900 hover:bg-opacity-50 transition-colors duration-200; */
    font-family: 'Cinzel Decorative', cursive;
    color: #F3E5AB; /* text-pale-gold-text */
    padding-left: 0.75rem; /* px-3 */
    padding-right: 0.75rem; /* px-3 */
    padding-top: 0.25rem; /* py-1 */
    padding-bottom: 0.25rem; /* py-1 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
    transition-property: color, background-color; /* transition-colors */
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms; /* duration-200 */
}
.navbar-link:hover {
    color: #FFD700; /* hover:text-gold-text */
    background-color: rgba(127, 29, 29, 0.5); /* hover:bg-red-900 hover:bg-opacity-50 (red-900 is #7f1d1d) */
}
.navbar-link.active {
    /* @apply gold-text font-bold; */
    color: #FFD700;
    font-weight: 700;
    text-shadow: 0 0 5px #FFD700;
}