:root {
    --bg-color: #000000;
    --text-color: #ff0000;
    --font-size: 20vh;
    --speed: 10s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--bg-color);
    overflow-x: hidden;
    overflow-y: auto; /* Allow vertical scroll for content */
    width: 100vw;
}

#app-wrapper {
    position: relative;
    width: 100%;
    height: 100vh; /* Fallback */
    height: 100dvh; /* Dynamic Viewport Height for mobile */
    overflow: hidden;
}

#scroller-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 10; /* Ensure it stays above content initially */
}

/* Content Section below the fold */
#seo-content {
    position: relative;
    background: #111;
    color: #eee;
    padding: 40px 20px;
    z-index: 20; /* Ensure it's clickable */
    min-height: 100vh;
    line-height: 1.6;
}

#seo-content h1, #seo-content h2, #seo-content h3 {
    color: #fff;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

#seo-content h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 0;
}

#seo-content p, #seo-content li {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 1rem;
}

#seo-content ul {
    margin-left: 20px;
}

.content-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}

.faq-question {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 10px;
}

/* Scroll indicator */
.scroll-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    animation: bounce 2s infinite;
    z-index: 15;
    pointer-events: none;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
    40% {transform: translateX(-50%) translateY(-10px);}
    60% {transform: translateX(-50%) translateY(-5px);}
}

footer {
    text-align: center;
    padding: 30px 20px;
    background: #0a0a0a;
    border-top: 1px solid #222;
    margin-top: 0; /* content section has padding */
    color: #777;
    font-size: 0.9rem;
    position: relative;
    z-index: 20;
}

footer a {
    color: #aaa;
    text-decoration: none;
    margin: 0 15px;
    display: inline-block;
}

footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Legal / Content Pages */
.legal-page {
    background-color: #0a0a0a;
    color: #e0e0e0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.legal-header {
    padding: 20px 40px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111;
    position: sticky;
    top: 0;
    z-index: 100;
}

.legal-header .brand {
    font-weight: 900;
    font-size: 1.2rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.legal-header .back-btn {
    background: #333;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
    border: 1px solid #444;
}

.legal-header .back-btn:hover {
    background: #555;
    border-color: #666;
}

.legal-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    flex: 1;
}

.legal-container h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
    margin-top: 0;
}

.legal-container .last-updated {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    display: block;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}

.legal-container h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #fff;
    border-left: 4px solid #007bff;
    padding-left: 15px;
}

.legal-container p, .legal-container li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 1rem;
}

.legal-container ul {
    margin-left: 20px;
}

.legal-container a {
    color: #4da3ff;
    text-decoration: none;
    border-bottom: 1px dashed #4da3ff;
}

.legal-container a:hover {
    border-bottom-style: solid;
}



@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Font Styles */
.font-normal {
    text-shadow: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.font-glow {
    text-shadow: 0 0 10px var(--text-color), 0 0 20px var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.font-matrix {
    font-family: 'VT323', monospace;
    letter-spacing: 5px;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}

.font-rainbow {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: rainbow-anim 5s linear infinite, scroll-left linear infinite;
    /* Note: Animation duration for rainbow needs to be separate or combined carefully */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 900;
}

@keyframes rainbow-anim {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Background Patterns */
.bg-solid {
    background-color: var(--bg-color);
}

.bg-matrix {
    background-color: var(--bg-color);
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 10px 10px;
}

/* Scroll Animation needs to handle the rainbow animation conflict if present */
/* We will handle class application in JS to ensure scroll-left is always applied */

#scrolling-text {
    color: var(--text-color);
    font-size: var(--font-size);
    font-weight: 900;
    white-space: nowrap;
    text-transform: uppercase;
    /* Initial position: off-screen right */
    transform: translateX(100vw);
    will-change: transform;
}

/* Select Styling */
select {
    width: 100%;
    padding: 10px;
    background: #333;
    border: 1px solid #444;
    color: white;
    border-radius: 8px;
    font-size: 16px;
    appearance: none; /* Remove default arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
    background-size: .65em auto;
}

/* Animation class to be added by JS */
.animate {
    animation: scroll-left linear infinite;
    animation-duration: var(--speed);
}

@keyframes scroll-left {
    from {
        transform: translateX(100vw);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Blinking Effect */
.blink {
    animation: blink-animation 0.5s steps(2, start) infinite, scroll-left linear infinite;
    animation-duration: 0.5s, var(--speed);
}

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

/* Mirror Effect */
.mirror {
    transform: scaleX(-1); /* Flips the container */
}
/* We apply mirror to the container or the text? 
   If we apply to text, it flips the letters but the scroll direction might look weird if not handled.
   Let's apply to the text element itself, but we need to ensure scrolling still makes sense.
   Actually, usually mirror mode just flips the whole canvas or the text element. 
   If I flip the text element with scaleX(-1), it will read backwards.
   The scroll direction: normal is Right -> Left.
   Mirrored: should still move visually "across" but the text is backwards.
*/

#toggle-settings {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    backdrop-filter: blur(5px);
}

#settings-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(20, 20, 20, 0.95);
    color: white;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 101;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}

#settings-panel.visible {
    transform: translateY(0);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#close-settings {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.control-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #ccc;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    background: #333;
    border: 1px solid #444;
    color: white;
    border-radius: 8px;
    font-size: 16px;
}

input[type="range"] {
    width: 100%;
    height: 6px;
    background: #444;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

.row {
    display: flex;
    gap: 15px;
}

.half {
    flex: 1;
}

input[type="color"] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.checkbox-group {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: white;
}

#fullscreen-btn {
    width: 100%;
    padding: 15px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    cursor: pointer;
}

#fullscreen-btn:active {
    transform: scale(0.98);
}