/* =========================================================
   90s POWER RANGERS FLAMBOYANT THEME (STATIC VHS)
   Tiled background + Ranger card cycling + VHS artifacts
   (NO animation)
   ========================================================= */

/* ---------- GLOBAL RESET ---------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

/* ---------- ROOT PALETTE ---------- */

:root {
    --ink: #120826;                 /* title + main details */
    --ink-soft: rgba(18, 8, 38, 0.78);

    --venue-ink: #2A1A6B;           /* venue */
    --datetime-ink: rgba(18, 8, 38, 0.58);

    /* Ranger card colors */
    --r-red: #FF2D2D;
    --r-blue: #2C7BFF;
    --r-pink: #FF4EDB;
    --r-yellow: #FFF04A;

    --sheen: rgba(255, 255, 255, 0.55);

    --accent-red: #FF1F3D;
    --accent-cyan: #00E6FF;

    --button: #1BFFFD;
    --button-hover: #9BFFFE;

    --shadow: rgba(0, 0, 0, 0.30);
}

/* ---------- BODY / BACKGROUND ---------- */

body {
    font-family: Arial, sans-serif;
    color: var(--ink);

    background:
        linear-gradient(
            135deg,
            rgba(75, 28, 255, 0.78),
            rgba(0, 215, 255, 0.68)
        ),
        url("/mnt/data/efe545c6-dfcc-4e9b-897c-53d1ca6c5851.png");

    background-repeat: repeat;
    background-size: 320px auto;
    background-position: top left;
    background-attachment: scroll;

    filter: saturate(1.05) contrast(1.03);
}

/* =========================================================
   STATIC VHS EFFECT (scanlines + noise + vignette)
   ========================================================= */

/* Scanlines + vignette */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.16) 0px,
            rgba(0,0,0,0.16) 1px,
            rgba(255,255,255,0.02) 2px,
            rgba(255,255,255,0.02) 4px
        ),
        radial-gradient(
            1200px 700px at 50% 40%,
            rgba(255,255,255,0.06),
            rgba(0,0,0,0.24) 70%,
            rgba(0,0,0,0.38) 100%
        );

    mix-blend-mode: multiply;
    opacity: 0.85;
}

/* Noise layer */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 0px,
            rgba(255,255,255,0.02) 1px,
            rgba(0,0,0,0.02) 2px,
            rgba(0,0,0,0.02) 3px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            rgba(0,0,0,0.015) 2px,
            rgba(0,0,0,0.015) 3px
        );

    opacity: 0.22;
    mix-blend-mode: overlay;
}

/* ---------- LAYOUT ---------- */

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    border-radius: 14px;
}

/* ---------- HEADER ---------- */

.page-header {
    padding: 12px 16px 4px 16px;
}

.page-header h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 1000;
    letter-spacing: 0.7px;
    color: rgba(255,255,255,0.98);

    /* static chromatic aberration */
    text-shadow:
        -1px 0 rgba(0,230,255,0.55),
        1px 0 rgba(255,45,45,0.45),
        0 3px 0 rgba(0,0,0,0.25);
}

/* ---------- SEARCH BAR ---------- */

.search-bar {
    display: flex;
    margin-bottom: 20px;
}

#search-input {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    background-color: rgba(255,255,255,0.94);
    color: var(--ink);
    border: 2px solid rgba(18,8,38,0.25);
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: 0 10px 24px var(--shadow);
}

#search-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: var(--button);
    color: var(--ink);
    border: 2px solid rgba(18,8,38,0.25);
    border-left: none;
    border-radius: 0 10px 10px 0;
    font-weight: 900;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 24px var(--shadow);
}

#search-button:hover {
    background-color: var(--button-hover);
}

/* ---------- RESULTS ---------- */

#results {
    display: flex;
    flex-direction: column;
}

/* ---------- CARDS ---------- */

.card {
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;

    --card-base: var(--r-red);

    background:
        radial-gradient(
            420px 220px at 20% 20%,
            var(--sheen),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            var(--card-base) 0%,
            rgba(255,255,255,0.18) 120%
        );

    border-radius: 14px;
    border: 2px solid rgba(18,8,38,0.28);
    box-shadow: 0 14px 34px var(--shadow);

    transition: transform 120ms ease, box-shadow 120ms ease;
}

/* 4-color Ranger cycle */
#results .card:nth-child(4n + 1) { --card-base: var(--r-red); }
#results .card:nth-child(4n + 2) { --card-base: var(--r-blue); }
#results .card:nth-child(4n + 3) { --card-base: var(--r-pink); }
#results .card:nth-child(4n + 4) { --card-base: var(--r-yellow); }

.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.38);
}

/* Text hierarchy */
.card h3 {
    margin: 0 0 10px 0;
    font-weight: 1000;
    color: var(--ink);
}

.card .venue {
    margin-bottom: 10px;
    font-style: italic;
    font-weight: 900;
    color: var(--venue-ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.datetime {
    font-size: 13px;
    margin-bottom: 10px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: var(--datetime-ink);
}

.card p {
    margin: 0;
    font-weight: 650;
    color: var(--ink-soft);
}

/* ---------- SEARCH MATCH HIGHLIGHT ---------- */

.highlight {
    font-weight: 1000;
    color: #000000;
    background: #FFFFFF;
    padding: 0 3px;
    border-radius: 3px;
}

/* ---------- ERROR ---------- */

.error {
    color: var(--accent-red);
    font-weight: 900;
}

/* ---------- HELP TEXT ---------- */

.help-text {
    margin-top: 20px;
    color: rgba(255,255,255,0.95);
}

.help-text p {
    margin-bottom: 10px;
    font-weight: 900;
}

.help-text ul {
    list-style-type: disc;
    padding-left: 20px;
}

.help-text li {
    margin-bottom: 5px;
}

/* ---------- TOGGLE ---------- */

.toggle-more {
    color: #FFFFFF;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 900;
}

/* ---------- FOOTER ---------- */

footer {
    text-align: center;
    padding: 15px 10px;
    margin-top: 40px;
    background: rgba(10,6,22,0.78);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,0.95);
    border-top: 2px solid rgba(255,255,255,0.35);
}

footer a {
    color: var(--accent-cyan);
    text-decoration: none;
    font-weight: 1000;
    font-size: 16px;

    /* static chromatic fringe */
    text-shadow:
        -1px 0 rgba(0,230,255,0.35),
        1px 0 rgba(255,45,45,0.25),
        0 2px 0 rgba(0,0,0,0.18);
}

footer a:hover {
    text-decoration: underline;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 600px) {
    body { background-size: 240px auto; }
    .card { padding: 10px; }
    #search-button { padding: 10px; }
    footer { padding: 10px 5px; }
    footer a { font-size: 14px; }
}