/* ============================================
   NEON RUSH PULSE MAX - Custom Styles
   Intensified glow lines, deeper saturation
   ============================================ */

/* CSS Custom Properties */
:root {
    --neon-pink: #ff2d95;
    --neon-cyan: #00f5ff;
    --neon-purple: #b026ff;
    --neon-yellow: #f5ff00;
    --deep-black: #050510;
    --deep-purple: #0d0620;
    --card-dark: #12082a;
    --card-border: #2a1a4a;
}

/* ============================================
   GLOBAL OVERFLOW CONTROL
   ============================================ */
html {
    overflow-x: clip;
    overflow-y: auto;
}

body {
    overflow-x: clip;
}

/* ============================================
   NEON GLOW EFFECTS
   ============================================ */
.neon-text-glow {
    text-shadow: 
        0 0 0.5rem var(--neon-pink),
        0 0 1rem var(--neon-pink),
        0 0 2rem var(--neon-pink),
        0 0 4rem var(--neon-pink);
}

.neon-text-glow-cyan {
    text-shadow: 
        0 0 0.5rem var(--neon-cyan),
        0 0 1rem var(--neon-cyan),
        0 0 2rem var(--neon-cyan),
        0 0 4rem var(--neon-cyan);
}

.neon-glow-box {
    box-shadow: 
        0 0 0.5rem var(--neon-pink),
        0 0 1rem var(--neon-purple),
        0 0 2rem var(--neon-purple);
}

.neon-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.neon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.neon-button:hover::before {
    left: 100%;
}

.neon-button:hover {
    transform: translateY(-0.125rem);
    box-shadow: 
        0 0 1rem var(--neon-pink),
        0 0 2rem var(--neon-purple),
        0 0.5rem 2rem rgba(176, 38, 255, 0.4);
}

/* ============================================
   ANIMATED GLOW LINES
   ============================================ */
.glow-line {
    position: absolute;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-cyan), transparent);
    opacity: 0.6;
}

.glow-line-1 {
    top: 20%;
    left: -100%;
    width: 50%;
    animation: glow-sweep 8s ease-in-out infinite;
}

.glow-line-2 {
    top: 50%;
    right: -100%;
    width: 40%;
    animation: glow-sweep-reverse 10s ease-in-out infinite;
    animation-delay: 2s;
}

.glow-line-3 {
    top: 80%;
    left: -100%;
    width: 60%;
    animation: glow-sweep 12s ease-in-out infinite;
    animation-delay: 4s;
}

@keyframes glow-sweep {
    0%, 100% {
        left: -100%;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        left: 200%;
        opacity: 0;
    }
}

@keyframes glow-sweep-reverse {
    0%, 100% {
        right: -100%;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        right: 200%;
        opacity: 0;
    }
}

/* ============================================
   TILT EFFECT
   ============================================ */
.tilt-box {
    transition: transform 0.3s ease;
}

.tilt-box:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(1.02);
}

/* ============================================
   MARQUEE ANIMATION
   ============================================ */
.marquee-container {
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.marquee-track {
    display: flex;
    gap: 1.5rem;
    animation: marquee 30s linear infinite;
    width: max-content;
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ============================================
   PULSE ANIMATIONS
   ============================================ */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}

/* ============================================
   TABLE RESPONSIVE WRAPPER
   ============================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 100%;
}

/* ============================================
   PROSE STYLING FOR READABILITY
   ============================================ */
.prose {
    color: #d1d5db;
    line-height: 1.75;
    max-width: 100%;
}

/* Headings */
.prose h2 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    color: #ffffff;
    margin-top: 2.5em;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 0.125rem solid var(--neon-purple);
    position: relative;
}

.prose h2::before {
    content: '';
    position: absolute;
    bottom: -0.125rem;
    left: 0;
    width: 4rem;
    height: 0.125rem;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
}

.prose h3 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--neon-cyan);
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.prose h4 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 2.5vw, 1.25rem);
    color: var(--neon-pink);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

/* Paragraphs */
.prose p {
    margin-bottom: 1.5em;
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
}

.prose p:first-of-type {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    color: #e5e7eb;
}

/* Links */
.prose a {
    color: var(--neon-cyan);
    text-decoration: none;
    border-bottom: 0.0625rem solid transparent;
    transition: all 0.3s ease;
}

.prose a:hover {
    color: var(--neon-pink);
    border-bottom-color: var(--neon-pink);
}

/* Strong and Emphasis */
.prose strong {
    color: #ffffff;
    font-weight: 600;
}

.prose em {
    color: var(--neon-yellow);
    font-style: italic;
}

/* Lists - Unordered */
.prose ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5em;
}

.prose ul li {
    position: relative;
    padding-left: 1.75em;
    margin-bottom: 0.75em;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.625em;
    width: 0.5rem;
    height: 0.5rem;
    background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    border-radius: 50%;
    box-shadow: 0 0 0.5rem var(--neon-pink);
}

/* Lists - Ordered */
.prose ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.5em;
    counter-reset: ordered-list;
}

.prose ol li {
    position: relative;
    padding-left: 2.5em;
    margin-bottom: 0.75em;
    counter-increment: ordered-list;
}

.prose ol li::before {
    content: counter(ordered-list);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75em;
    height: 1.75em;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #ffffff;
    box-shadow: 0 0 0.75rem var(--neon-cyan);
}

/* Nested Lists */
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Blockquotes */
.prose blockquote {
    position: relative;
    margin: 2em 0;
    padding: 1.5em 1.5em 1.5em 2em;
    background: linear-gradient(135deg, rgba(176, 38, 255, 0.1), rgba(0, 245, 255, 0.05));
    border-left: 0.25rem solid var(--neon-purple);
    border-radius: 0 1rem 1rem 0;
    font-style: italic;
    color: #e5e7eb;
}

.prose blockquote::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: 0.5rem;
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--neon-purple);
    opacity: 0.3;
    line-height: 1;
}

.prose blockquote p {
    margin-bottom: 0;
}

/* Tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 2em 0;
    font-size: 0.9375rem;
}

.prose .table-responsive {
    overflow-x: auto;
    margin: 2em 0;
    border-radius: 0.75rem;
    border: 0.0625rem solid var(--card-border);
}

.prose .table-responsive table {
    margin: 0;
    min-width: 37.5rem;
}

.prose thead {
    background: linear-gradient(135deg, var(--deep-purple), var(--card-dark));
}

.prose th {
    padding: 1em;
    text-align: left;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    color: var(--neon-cyan);
    border-bottom: 0.125rem solid var(--neon-purple);
    white-space: nowrap;
}

.prose td {
    padding: 1em;
    border-bottom: 0.0625rem solid var(--card-border);
    color: #d1d5db;
}

.prose tbody tr {
    transition: background-color 0.3s ease;
}

.prose tbody tr:hover {
    background-color: rgba(176, 38, 255, 0.1);
}

.prose tbody tr:last-child td {
    border-bottom: none;
}

/* Code */
.prose code {
    background: var(--card-dark);
    padding: 0.2em 0.5em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: var(--neon-yellow);
    border: 0.0625rem solid var(--card-border);
}

.prose pre {
    background: var(--card-dark);
    padding: 1.5em;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 2em 0;
    border: 0.0625rem solid var(--card-border);
}

.prose pre code {
    background: transparent;
    padding: 0;
    border: none;
    color: #d1d5db;
}

/* Horizontal Rule */
.prose hr {
    border: none;
    height: 0.0625rem;
    background: linear-gradient(90deg, transparent, var(--neon-purple), var(--neon-pink), var(--neon-cyan), transparent);
    margin: 3em 0;
}

/* Images */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 2em auto;
    display: block;
    box-shadow: 
        0 0 1.5rem rgba(176, 38, 255, 0.2),
        0 0.5rem 2rem rgba(0, 0, 0, 0.4);
    border: 0.125rem solid var(--card-border);
}

/* Figure and Figcaption */
.prose figure {
    margin: 2em 0;
}

.prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 0.75em;
    font-style: italic;
}

/* Details/Summary (Accordions) */
.prose details {
    background: var(--card-dark);
    border: 0.0625rem solid var(--card-border);
    border-radius: 0.75rem;
    margin: 1em 0;
    overflow: hidden;
}

.prose summary {
    padding: 1em 1.5em;
    cursor: pointer;
    font-weight: 600;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.prose summary:hover {
    background: rgba(176, 38, 255, 0.1);
}

.prose details[open] summary {
    border-bottom: 0.0625rem solid var(--card-border);
}

.prose details > *:not(summary) {
    padding: 0 1.5em;
}

.prose details > *:last-child {
    padding-bottom: 1em;
}

/* First paragraph special styling */
.prose > p:first-of-type::first-letter {
    font-size: 3em;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    float: left;
    line-height: 1;
    margin-right: 0.5rem;
    color: var(--neon-pink);
    text-shadow: 0 0 1rem var(--neon-pink);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 48rem) {
    .prose h2 {
        margin-top: 2em;
    }
    
    .prose h3 {
        margin-top: 1.5em;
    }
    
    .prose blockquote {
        padding: 1em 1em 1em 1.5em;
    }
    
    .prose blockquote::before {
        font-size: 3rem;
        top: -0.25rem;
        left: 0.25rem;
    }
    
    .prose table {
        font-size: 0.875rem;
    }
    
    .prose th,
    .prose td {
        padding: 0.75em;
    }
    
    .prose > p:first-of-type::first-letter {
        font-size: 2.5em;
    }
}

@media (max-width: 30rem) {
    .prose > p:first-of-type::first-letter {
        font-size: 2em;
        margin-right: 0.25rem;
    }
    
    .prose ol li {
        padding-left: 2.25em;
    }
    
    .prose ol li::before {
        width: 1.5em;
        height: 1.5em;
        font-size: 0.625rem;
    }
}

/* ============================================
   GAME CARD HOVER EFFECTS
   ============================================ */
.game-card {
    transition: transform 0.3s ease;
}

.game-card:hover {
    transform: translateY(-0.5rem);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: var(--deep-black);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--neon-purple), var(--neon-pink));
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--neon-pink), var(--neon-cyan));
}

/* ============================================
   SELECTION STYLING
   ============================================ */
::selection {
    background: var(--neon-purple);
    color: #ffffff;
}

::-moz-selection {
    background: var(--neon-purple);
    color: #ffffff;
}

/* ============================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 0.125rem solid var(--neon-cyan);
    outline-offset: 0.125rem;
}

/* ============================================
   SKIP LINK FOR ACCESSIBILITY
   ============================================ */
.skip-link {
    position: absolute;
    top: -2.5rem;
    left: 0;
    background: var(--neon-pink);
    color: #ffffff;
    padding: 0.5rem 1rem;
    z-index: 100;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body {
        background: #ffffff;
        color: #000000;
    }
    
    .prose {
        color: #000000;
    }
    
    .prose a {
        color: #000000;
        text-decoration: underline;
    }
    
    .neon-text-glow,
    .neon-text-glow-cyan {
        text-shadow: none;
    }
}