/* =========================
   INSANE WORLD RECORDS CSS
   NEON GLASSMORPHISM EDITION ✨
========================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Nunito:wght@400;700;800&display=swap');

:root {

    --bg-color:#06060f;
    --card-color:rgba(21,23,44,0.55);
    --text-color:#ffffff;
    --muted:#9aa4cc;
    --accent:#ff3e6c;
    --accent2:#8b5cf6;
    --accent3:#00d4ff;
    --border:rgba(139,92,246,0.35);
    --glow:0 0 25px rgba(139,92,246,0.35);

}


[data-theme="light"] {

    --bg-color:#eef1fb;
    --card-color:rgba(255,255,255,0.7);
    --text-color:#111827;
    --muted:#5b6478;
    --accent:#e91e63;
    --accent2:#6366f1;
    --accent3:#0099cc;
    --border:rgba(99,102,241,0.35);
    --glow:0 0 20px rgba(99,102,241,0.25);

}




* {

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Nunito","Segoe UI",Arial,sans-serif;

}



body {

    min-height:100vh;

    background:
    radial-gradient(circle at 15% 10%, rgba(255,62,108,0.18), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,212,255,0.14), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(139,92,246,0.18), transparent 45%),
    var(--bg-color);

    color:var(--text-color);

    padding:20px;

    transition:.4s;

    position:relative;

    overflow-x:hidden;

}

/* Animated background stars/particles */
body::before {
    content:"";
    position:fixed;
    inset:0;
    background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 80% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 10% 90%, rgba(255,255,255,0.5), transparent);
    background-repeat:repeat;
    opacity:0.4;
    animation:starTwinkle 6s ease-in-out infinite alternate;
    pointer-events:none;
    z-index:0;
}

@keyframes starTwinkle {
    0% { opacity:0.25; }
    100% { opacity:0.6; }
}

/* Subtle gradient border glow sweep */
body::after {
    content:"";
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(255,62,108,0.05) 60deg, transparent 120deg, rgba(0,212,255,0.05) 180deg, transparent 240deg, rgba(139,92,246,0.05) 300deg, transparent 360deg);
    animation:spinSweep 20s linear infinite;
    pointer-events:none;
    z-index:0;
}

@keyframes spinSweep {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}



/* =========================
HEADER
========================= */


header {

    text-align:center;

    max-width:1100px;

    margin:auto;

    padding:50px 20px 30px;

    position:relative;

    z-index:1;

}



header h1 {

    font-size:3.2rem;

    font-family:"Orbitron",sans-serif;

    font-weight:900;

    letter-spacing:0.05em;

    text-transform:uppercase;

    background:
    linear-gradient(
    90deg,
    var(--accent),
    var(--accent2),
    var(--accent3),
    var(--accent2),
    var(--accent)
    );

    background-size:300%;

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    filter:drop-shadow(0 0 25px rgba(139,92,246,0.4));

    animation:
    gradient 6s infinite;

}



header h3 {

    margin-top:12px;

    color:var(--accent3);

    font-weight:800;

    letter-spacing:0.2em;

    text-transform:uppercase;

    font-size:0.95rem;

    text-shadow:0 0 15px rgba(0,212,255,0.4);

}



header p {

    color:var(--muted);

    margin-top:10px;

    font-size:1.15rem;

}



@keyframes gradient {

    0%{
        background-position:0%;
    }

    50%{
        background-position:100%;
    }

    100%{
        background-position:0%;
    }

}




/* =========================
BUTTONS
========================= */


button,
select {

    cursor:pointer;

}



.theme-btn {

    position:absolute;

    right:25px;

    top:25px;

    padding:10px 18px;

    border:1px solid var(--border);

    border-radius:30px;

    background:var(--card-color);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:var(--text-color);

    box-shadow:var(--glow);

    transition:transform .2s, box-shadow .2s;

    z-index:5;

}

.theme-btn:hover {

    transform:translateY(-3px) scale(1.05);

    box-shadow:0 0 35px rgba(139,92,246,0.5);

}




button:hover {

    transform:translateY(-3px);

}




#random-btn {

    margin-top:20px;

    padding:15px 28px;

    border:none;

    border-radius:30px;

    color:white;

    font-weight:bold;

    font-size:1.05rem;

    letter-spacing:0.05em;

    background:
    linear-gradient(
    45deg,
    var(--accent),
    var(--accent2)
    );

    box-shadow:0 0 25px rgba(255,62,108,0.4), 0 0 40px rgba(139,92,246,0.2);

    transition:transform .2s, box-shadow .2s;

    position:relative;

    overflow:hidden;

}

#random-btn::after {

    content:"";

    position:absolute;

    top:0; left:-100%;

    width:60%; height:100%;

    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);

    transform:skewX(-20deg);

    animation:shimmer 3s infinite;

}

@keyframes shimmer {

    0% { left:-100%; }
    100% { left:200%; }

}

#random-btn:hover {

    transform:translateY(-3px) scale(1.05);

    box-shadow:0 0 40px rgba(255,62,108,0.6), 0 0 60px rgba(139,92,246,0.4);

}




/* =========================
HERO
========================= */


.hero {

    display:flex;

    justify-content:center;

    margin-bottom:30px;

    position:relative;

    z-index:1;

}



.hero-box {

    background:var(--card-color);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    padding:35px;

    border-radius:25px;

    max-width:620px;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    var(--glow);

    position:relative;

    overflow:hidden;

}

.hero-box::before {

    content:"";

    position:absolute;

    top:-50%;

    left:-50%;

    width:200%;

    height:200%;

    background:radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 50%);

    animation:pulseGlow 4s ease-in-out infinite alternate;

}

@keyframes pulseGlow {

    0% { opacity:0.5; transform:scale(1); }
    100% { opacity:1; transform:scale(1.1); }

}

.hero-box h2 {

    position:relative;

    font-family:"Orbitron",sans-serif;

    font-size:1.6rem;

    background:linear-gradient(90deg, var(--accent), var(--accent3));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    margin-bottom:10px;

}





/* =========================
SEARCH + SORT
========================= */


.controls {

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin:30px auto;

    position:relative;

    z-index:1;

}



input,
select {

    background:var(--card-color);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:var(--text-color);

    border:2px solid var(--border);

    padding:14px 18px;

    border-radius:30px;

    font-size:1rem;

    transition:border-color .3s, box-shadow .3s;

    outline:none;

}



select {

    appearance:none;

    -webkit-appearance:none;

    padding-right:40px;

    background-image:linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);

    background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;

    background-size:5px 5px, 5px 5px;

    background-repeat:no-repeat;

}



input {

    width:320px;

}



input:focus,
select:focus {

    border-color:var(--accent);

    box-shadow:0 0 20px rgba(255,62,108,0.3);

}






/* =========================
FILTERS
========================= */


.filter-container {

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:30px;

    position:relative;

    z-index:1;

}



.filter-btn {

    padding:10px 20px;

    border-radius:30px;

    border:1px solid var(--border);

    background:var(--card-color);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    color:var(--text-color);

    transition:transform .2s, box-shadow .3s, background .3s;

}



.filter-btn.active,
.filter-btn:hover {

    background:
    linear-gradient(
    45deg,
    var(--accent),
    var(--accent2)
    );

    color:white;

    border-color:transparent;

    box-shadow:0 0 25px rgba(255,62,108,0.4);

    transform:translateY(-2px);

}




/* =========================
DASHBOARD
========================= */


.dashboard {

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:30px;

    position:relative;

    z-index:1;

}



.stat-box {

    background:var(--card-color);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    padding:20px;

    border-radius:20px;

    min-width:220px;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:var(--glow);

    transition:transform .3s;

}

.stat-box:hover {

    transform:translateY(-4px) scale(1.02);

}

.stat-box h2 {

    font-family:"Orbitron",sans-serif;

    background:linear-gradient(90deg, var(--accent), var(--accent3));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    font-size:1.5rem;

}

.stat-box h3 {

    color:var(--muted);

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:0.1em;

    font-size:0.85rem;

}

.stat-box p {

    line-height:1.8;

    font-size:0.95rem;

}




/* =========================
RECORD CARDS
========================= */


.grid {

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:25px;

    position:relative;

    z-index:1;

}




.card {

    position:relative;

    background:var(--card-color);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    padding:25px;

    border-radius:25px;

    border:1px solid var(--border);

    overflow:hidden;

    transition:transform .3s, box-shadow .3s, border-color .3s;

    animation:
    fade .5s ease;

    box-shadow:var(--glow);

}

.card::after {

    content:"";

    position:absolute;

    top:0; left:-150%;

    width:100%; height:100%;

    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);

    transform:skewX(-25deg);

    animation:cardShimmer 4s ease-in-out infinite;

    pointer-events:none;

}

@keyframes cardShimmer {

    0%, 60% { left:-150%; }
    80%, 100% { left:200%; }

}



.card:hover {

    transform:
    translateY(-10px);

    border-color:var(--accent);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.5),
    0 0 40px rgba(255,62,108,0.25);

}



.card::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    height:5px;

    width:100%;

    background:
    linear-gradient(
    90deg,
    var(--accent),
    var(--accent2),
    var(--accent3)
    );

}



@keyframes fade {

    from{

        opacity:0;

        transform:translateY(20px) scale(0.97);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}




.badge {

    display:inline-block;

    margin-bottom:15px;

    padding:6px 14px;

    border-radius:20px;

    font-size:.75rem;

    background:linear-gradient(90deg, rgba(255,62,108,0.25), rgba(139,92,246,0.25));

    color:var(--accent);

    font-weight:bold;

    letter-spacing:0.08em;

    animation:badgeGlow 3s ease-in-out infinite alternate;

}

@keyframes badgeGlow {

    from { box-shadow:0 0 5px rgba(255,62,108,0.2); }
    to { box-shadow:0 0 15px rgba(255,62,108,0.5); }

}



.card h2 {

    margin-bottom:10px;

    font-size:1.25rem;

    line-height:1.3;

}



.record-holder {

    color:var(--muted);

    font-weight:bold;

}



.year,
.country {

    margin-top:8px;

    color:var(--muted);

}



.card p {

    margin-top:15px;

    color:var(--muted);

    line-height:1.6;

}



/* =========================
FAVORITES
========================= */


.favorite {

    position:absolute;

    right:20px;

    top:20px;

    border:none;

    background:none;

    font-size:1.5rem;

    transition:transform .2s;

    z-index:2;

}

.favorite:hover {

    transform:scale(1.3);

}



.favorite.active {

    animation:pulse .5s;

    filter:drop-shadow(0 0 8px rgba(255,0,0,0.6));

}



@keyframes pulse {

    50%{

        transform:scale(1.4);

    }

}




/* RANDOM HIGHLIGHT */


.highlight {

    animation:

    glow 0.8s infinite alternate;

    border-color:var(--accent) !important;

}



@keyframes glow {

    from{

        box-shadow:
        0 0 15px var(--accent);

    }

    to{

        box-shadow:
        0 0 60px var(--accent2),
        0 0 90px var(--accent3);

    }

}




/* =========================
FOOTER
========================= */


footer {

    text-align:center;

    margin-top:60px;

    padding:30px;

    color:var(--muted);

    position:relative;

    z-index:1;

    border-top:1px solid var(--border);

    max-width:1200px;

    margin-left:auto;

    margin-right:auto;

}




/* =========================
MOBILE
========================= */


@media(max-width:700px){


header h1 {

    font-size:2rem;

}



.theme-btn {

    position:static;

    margin-bottom:20px;

}



input {

    width:100%;

}



.grid {

    grid-template-columns:1fr;

}

.controls {

    flex-direction:column;

    align-items:center;

}

.controls input,

.controls select {

    width:100%;

    max-width:320px;

}


}