/* ==========================================================================
   CATSINO — "Night Carnival in the Forest" theme
   Loaded AFTER style.css / horizontal-roulette.css; re-skins the original
   pixel-art site into a dusk carnival: lantern gold on dark walnut wood,
   fireflies in the air, an arcade marquee over the arena. No selectors used
   by the game JS are renamed — pure visual layer.
   ========================================================================== */

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

/* ------------------------------------------------------------------ tokens */
:root {
    --color-primary-brown: #241309;
    --color-secondary-brown: #120903;
    --color-accent-brown: #4a2c14;
    --color-bg-primary: #3a2412;
    --color-bg-secondary: #2c1a0c;
    --color-bg-tertiary: #442b15;
    --color-gold: #ffc83d;
    --color-orange: #ff9d2e;
    --color-green: #7ede4f;
    --color-red: #ff5f52;
    --color-text-primary: #f3e4c2;
    --color-text-secondary: #cdb489;
    --color-text-muted: #96794e;
    --color-white: #fff8e7;

    --nc-night: #0c1410;
    --nc-lantern: #ffc83d;
    --nc-ember: #ff9d2e;
    --nc-glow: rgba(255, 200, 61, 0.35);

    --font-family-primary: 'VT323', 'Courier New', monospace;
    --font-family-secondary: 'VT323', 'Courier New', monospace;
    --font-pixel: 'Press Start 2P', 'Courier New', monospace;

    --shadow-sm: 0 2px 0 rgba(0, 0, 0, 0.55);
    --shadow-md: 0 3px 0 rgba(0, 0, 0, 0.55), 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 0 rgba(0, 0, 0, 0.6), 0 10px 28px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 5px 0 rgba(0, 0, 0, 0.6), 0 14px 40px rgba(0, 0, 0, 0.55);
    --shadow-inset: inset 0 2px 0 rgba(255, 220, 150, 0.08), inset 0 -3px 0 rgba(0, 0, 0, 0.45);

    --gradient-primary: linear-gradient(180deg, #4a2e17 0%, #33200f 55%, #241407 100%);
    --gradient-gold: linear-gradient(180deg, #ffd76a 0%, #ff9d2e 100%);
    --gradient-green: linear-gradient(180deg, #63c93c 0%, #2e7d1e 100%);
    --gradient-red: linear-gradient(180deg, #e8483c 0%, #96201c 100%);
}

/* ------------------------------------------------------------- atmosphere */
body {
    font-family: var(--font-family-secondary);
    font-size: 1.125rem;
    color: var(--color-text-primary);
    background-color: var(--nc-night);
    position: relative;
    overflow-x: hidden;
}

/* Dusk falls on the forest: cool night wash + vignette over background.png */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 90% at 50% 0%, rgba(12, 20, 16, 0) 30%, rgba(7, 10, 14, 0.78) 100%),
        linear-gradient(180deg, rgba(16, 22, 40, 0.55) 0%, rgba(12, 20, 16, 0.35) 45%, rgba(5, 8, 6, 0.7) 100%);
}

/* Fireflies drifting through the trees */
body::after {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(2px 2px at 12% 78%, rgba(255, 236, 150, 0.9) 45%, transparent 55%),
        radial-gradient(2px 2px at 28% 32%, rgba(214, 255, 140, 0.8) 45%, transparent 55%),
        radial-gradient(3px 3px at 44% 62%, rgba(255, 224, 130, 0.75) 45%, transparent 55%),
        radial-gradient(2px 2px at 63% 25%, rgba(255, 244, 180, 0.85) 45%, transparent 55%),
        radial-gradient(2px 2px at 78% 70%, rgba(222, 255, 160, 0.8) 45%, transparent 55%),
        radial-gradient(3px 3px at 90% 40%, rgba(255, 230, 140, 0.7) 45%, transparent 55%),
        radial-gradient(2px 2px at 52% 88%, rgba(255, 240, 170, 0.75) 45%, transparent 55%);
    animation: nc-fireflies 16s linear infinite alternate,
               nc-firefly-pulse 3.4s ease-in-out infinite;
}

@keyframes nc-fireflies {
    from { transform: translate3d(-1.5%, 0.8%, 0); }
    to   { transform: translate3d(1.8%, -1.4%, 0); }
}

@keyframes nc-firefly-pulse {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.9; }
}

.container { position: relative; z-index: 1; }

::selection { background: var(--nc-ember); color: #1a0e02; }

/* --------------------------------------------------------------- marquee */
.marquee-sign {
    display: block;
    width: fit-content;
    margin: 0.25rem auto 0.6rem;
    text-align: center;
    padding: 0.55rem 1.5rem 0.6rem;
    background: linear-gradient(180deg, #2c1a0c 0%, #1a0f05 100%);
    border: 3px solid #120903;
    border-radius: 10px;
    box-shadow:
        0 0 0 2px rgba(255, 200, 61, 0.25),
        0 6px 0 rgba(0, 0, 0, 0.55),
        0 0 42px var(--nc-glow),
        inset 0 0 22px rgba(0, 0, 0, 0.7);
    position: relative;
    animation: nc-rise 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

/* chasing carnival bulbs */
.marquee-sign::before,
.marquee-sign::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 6px;
    background-image: radial-gradient(circle 3px at 50% 50%, #ffe9a3 55%, rgba(120, 80, 20, 0.9) 62%);
    background-size: 22px 6px;
    animation: nc-bulbs 0.9s steps(2) infinite;
}
.marquee-sign::before { top: 5px; }
.marquee-sign::after  { bottom: 5px; }

@keyframes nc-bulbs {
    from { filter: brightness(1);   background-position-x: 0; }
    to   { filter: brightness(0.55); background-position-x: 22px; }
}

.marquee-title {
    font-family: var(--font-pixel);
    font-size: clamp(0.9rem, 2.6vw, 1.35rem);
    letter-spacing: 0.12em;
    color: var(--nc-lantern);
    text-shadow:
        0 0 6px rgba(255, 200, 61, 0.9),
        0 0 24px rgba(255, 157, 46, 0.55),
        3px 3px 0 #120903;
    animation: nc-neon-flicker 6s linear infinite;
}

.marquee-cat {
    height: 1.15em;
    width: auto;
    image-rendering: pixelated;
    vertical-align: -0.18em;
    filter: drop-shadow(0 0 8px var(--nc-glow));
}

.marquee-cat-left  { margin-right: 0.6em; animation: nc-cat-bob 1.2s ease-in-out infinite; }
.marquee-cat-right { margin-left: 0.6em;  animation: nc-cat-bob 1.2s 0.6s ease-in-out infinite; }

@keyframes nc-cat-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px) scale(1.05); }
}

.marquee-sub {
    display: block;
    margin-top: 0.25rem;
    font-family: var(--font-family-primary);
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

@keyframes nc-neon-flicker {
    0%, 6.5%, 8.5%, 100% { opacity: 1; }
    7%, 8%                { opacity: 0.55; }
    42%, 43.5%            { opacity: 0.8; }
}

/* ---------------------------------------------------------- load stagger */
@keyframes nc-rise {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.canvas-section              { animation: nc-rise 0.7s 0.12s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.leaderboard-section         { animation: nc-rise 0.7s 0.24s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.horizontal-roulette-section { animation: nc-rise 0.7s 0.36s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

@media (prefers-reduced-motion: reduce) {
    body::after,
    .marquee-sign, .marquee-sign::before, .marquee-sign::after, .marquee-title,
    .canvas-section, .leaderboard-section, .horizontal-roulette-section {
        animation: none !important;
    }
}

/* ------------------------------------------------------------ nav banners */
.banner {
    font-family: var(--font-pixel);
    font-size: clamp(0.5rem, 1.6vw, 0.65rem);
    padding: 0.6rem 0.4rem;
    color: var(--color-text-primary);
    text-shadow: 2px 2px 0 #120903;
    background: var(--gradient-primary);
    border: 2px solid #120903;
    box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.2), var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.banner:hover {
    transform: translateY(-3px);
    color: var(--nc-lantern);
    box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.55), 0 5px 0 rgba(0, 0, 0, 0.55), 0 0 24px var(--nc-glow);
}

/* --------------------------------------------------------------- panels */
.border {
    background: linear-gradient(180deg, #33200f, #1a0f05);
    box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.28), 0 0 16px rgba(0, 0, 0, 0.6);
}

.canvas-frame {
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
}

/* the arena reads as a lantern-lit clearing, not a cold white page */
#canvas {
    filter: sepia(0.32) saturate(0.9) brightness(0.93) contrast(1.02);
}

/* soft lantern pool + scanlines over the arena — never intercepts clicks */
.canvas-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.11) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse 75% 65% at 50% 42%, transparent 55%, rgba(8, 6, 2, 0.4) 100%);
    mix-blend-mode: multiply;
}

.holder-counter h3,
.countdown-label,
.countdown-display {
    font-family: var(--font-family-primary);
    color: var(--nc-lantern);
    text-shadow: 0 0 8px rgba(255, 200, 61, 0.6), 2px 2px 0 #120903;
}

.countdown-display {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
}

/* ------------------------------------------------------------ leaderboard */
.leaderboard-frame,
.leaderboard-container {
    background: linear-gradient(180deg, rgba(34, 20, 9, 0.96), rgba(18, 10, 4, 0.96));
}

.recent-winner-header,
.leaderboard-header h2,
.leaderboard-header h2 a {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--nc-lantern);
    text-shadow: 0 0 8px rgba(255, 200, 61, 0.55), 2px 2px 0 #120903;
    letter-spacing: 0.08em;
}

.recent-winner-section {
    background: rgba(255, 200, 61, 0.07);
    border: 1px solid rgba(255, 200, 61, 0.3);
    border-radius: 6px;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.5);
}

.winner-text { color: var(--color-text-secondary); }

.leaderboard-entry {
    background: rgba(255, 226, 170, 0.045);
    border: 1px solid rgba(255, 200, 61, 0.14);
    border-radius: 6px;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.leaderboard-entry:hover {
    transform: translateX(4px);
    background: rgba(255, 200, 61, 0.1);
    border-color: rgba(255, 200, 61, 0.5);
}

.holder-tier {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------- roulette */
.roulette-strip-container {
    background: linear-gradient(180deg, #1c1008 0%, #120903 100%);
    border: 3px solid #120903;
    box-shadow:
        0 0 0 1px rgba(255, 200, 61, 0.3),
        inset 0 0 28px rgba(0, 0, 0, 0.85),
        0 6px 0 rgba(0, 0, 0, 0.5);
}

.strip-segment { filter: saturate(0.92) brightness(0.95); }

.strip-yellow {
    background: linear-gradient(180deg, #e8b83a 0%, #a9741c 100%);
}

.percentage-text {
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
}

.roulette-pointer {
    filter: drop-shadow(0 0 6px var(--nc-lantern));
    animation: nc-pointer 1.6s ease-in-out infinite;
}

@keyframes nc-pointer {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 3px); }
}

.roulette-controls-section {
    background: var(--gradient-primary);
    border: 3px solid #120903;
    box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.25), var(--shadow-md);
}

/* LED-style balance readout */
.balance-display,
#simple-balance {
    font-family: var(--font-family-primary);
    color: #ffe08a;
    text-shadow: 0 0 10px rgba(255, 200, 61, 0.75);
}

.roulette-controls-section .balance-display {
    background: #0d0a04;
    border: 2px solid #120903;
    border-radius: 6px;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 200, 61, 0.28);
    padding: 0.45rem 0.9rem;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
}

/* chunky arcade buttons */
.simple-button {
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    color: #2a1503;
    background: var(--gradient-gold);
    border: 2px solid #120903;
    border-radius: 8px;
    padding: 0.8rem 0.9rem;
    text-shadow: 0 1px 0 rgba(255, 240, 190, 0.65);
    box-shadow:
        0 5px 0 #7a4a10,
        0 8px 14px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 245, 200, 0.6);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
    cursor: pointer;
}

.simple-button:hover:not(:disabled) {
    filter: brightness(1.12);
    box-shadow:
        0 5px 0 #7a4a10,
        0 8px 22px rgba(255, 157, 46, 0.4),
        inset 0 2px 0 rgba(255, 245, 200, 0.6);
}

.simple-button:active:not(:disabled) {
    transform: translateY(5px);
    box-shadow:
        0 0 0 #7a4a10,
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 245, 200, 0.6);
}

.simple-button:disabled {
    filter: grayscale(0.7) brightness(0.6);
    cursor: not-allowed;
}

.claim-button:not(:disabled) {
    background: var(--gradient-green);
    color: #06230a;
    box-shadow:
        0 5px 0 #1d4a12,
        0 8px 14px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(220, 255, 190, 0.55);
}

.rewards-label,
.rewards-inline #user-rewards-amount {
    font-family: var(--font-family-primary);
    font-size: 1.15rem;
    color: var(--color-text-secondary);
}

/* beats style.css's .rewards-inline #user-rewards-amount (near-black on dark) */
.rewards-display .rewards-label { color: var(--color-text-secondary); }
.rewards-inline .rewards-display #user-rewards-amount { color: var(--nc-lantern); }

/* dark-on-amber for the yellow segments; light-on-color elsewhere */
.strip-yellow .percentage-text {
    color: #2a1503;
    text-shadow: 0 1px 0 rgba(255, 235, 180, 0.55);
}

/* footer blessings on rules/roadmap pages were near-black on dark wood */
.footer-text p {
    color: var(--color-text-secondary);
    font-family: var(--font-family-primary);
    font-size: 1.1rem;
}

/* ------------------------------------------------------- winner overlay */
.winner-popup {
    background: linear-gradient(180deg, #33200f, #1a0f05);
    border: 3px solid var(--nc-lantern);
    box-shadow: 0 0 0 3px #120903, 0 0 60px var(--nc-glow);
}

.winner-title {
    font-family: var(--font-pixel);
    color: var(--nc-lantern);
    text-shadow: 0 0 12px rgba(255, 200, 61, 0.8), 3px 3px 0 #120903;
}

/* X share button in the win card — arcade take on the X brand */
.share-x-btn {
    background: linear-gradient(180deg, #2b2f36 0%, #101317 100%);
    color: #fff8e7;
    text-shadow: 1px 1px 0 #000;
    padding: 0.85rem 1.4rem;
    box-shadow:
        0 5px 0 #000,
        0 8px 14px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.14);
}

.share-x-btn:hover:not(:disabled) {
    filter: brightness(1.25);
    box-shadow:
        0 5px 0 #000,
        0 8px 22px rgba(255, 200, 61, 0.35),
        inset 0 2px 0 rgba(255, 255, 255, 0.14);
}

.share-x-btn:active:not(:disabled) {
    transform: translateY(5px);
    box-shadow:
        0 0 0 #000,
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------- spin result overlay */
/* the card is built with inline styles in SimpleRouletteUI — override */
#dynamic-result-overlay {
    backdrop-filter: blur(3px);
}

#dynamic-result-overlay > div {
    border: 3px solid #120903 !important;
    border-radius: 12px !important;
    box-shadow:
        0 0 0 3px rgba(255, 200, 61, 0.5),
        0 8px 0 rgba(0, 0, 0, 0.55),
        0 0 70px var(--nc-glow) !important;
}

#dynamic-result-overlay div {
    font-family: var(--font-pixel) !important;
    letter-spacing: 0.04em;
}

#dynamic-result-overlay img {
    image-rendering: pixelated;
}

/* --------------------------------------------------------------- pixels */
.cat-image,
.winner-cat-display,
.result-cat-img {
    image-rendering: pixelated;
}

/* ------------------------------------------- rules / tokenomics / roadmap */
.rules-header h1,
.tokenomics-header h1,
.roadmap-header h1 {
    font-family: var(--font-pixel);
    font-size: clamp(1.1rem, 3.5vw, 1.8rem);
    color: var(--nc-lantern);
    text-shadow: 0 0 10px rgba(255, 200, 61, 0.7), 3px 3px 0 #120903;
}

.section-title h2 {
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    color: var(--color-text-primary);
    text-shadow: 2px 2px 0 #120903;
}

.rules-card,
.tokenomics-card,
.roadmap-card {
    background: linear-gradient(180deg, rgba(40, 25, 12, 0.97), rgba(22, 13, 5, 0.97));
    border: 2px solid #120903;
    box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.28), var(--shadow-md);
}

.rules-card:hover,
.tokenomics-card:hover,
.roadmap-card:hover {
    box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.6), var(--shadow-lg), 0 0 30px var(--nc-glow);
}

.rules-card h3,
.tokenomics-card h3,
.roadmap-card h3 {
    color: var(--nc-lantern);
    text-shadow: 0 0 8px rgba(255, 200, 61, 0.5), 2px 2px 0 #120903;
}

.rules-card p,
.tokenomics-card p,
.roadmap-card p,
.card-content p,
.card-content li {
    color: var(--color-text-secondary);
}

.rules-card p strong,
.tokenomics-card p strong,
.roadmap-card p strong,
.card-content strong {
    color: var(--color-text-primary);
}

/* --------------------------------------------------------------- scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #120903; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4a2e17, #2c1a0c);
    border: 2px solid #120903;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #5d3a1d; }