/* ==========================================================
   AI Detective Game
   Day 25 - 30 Days 30 AI Websites Challenge
   style.css
========================================================== */

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

:root{

    --bg:#07111f;
    --bg2:#0e1d34;

    --glass:rgba(255,255,255,.08);
    --glassBorder:rgba(255,255,255,.18);

    --primary:#4fc3ff;
    --secondary:#8d7dff;

    --text:#f5f8ff;
    --muted:#b6c2d8;

    --success:#2ecc71;
    --danger:#ff5d5d;
    --warning:#ffd166;

    --radius:18px;
    --shadow:0 18px 45px rgba(0,0,0,.35);

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Poppins",sans-serif;
    color:var(--text);

    background:
        radial-gradient(circle at top left,#17335e 0%,transparent 35%),
        radial-gradient(circle at bottom right,#13233d 0%,transparent 40%),
        linear-gradient(135deg,var(--bg),var(--bg2));

    min-height:100vh;

    overflow-x:hidden;

    position:relative;

}

/* ==========================================================
BACKGROUND
========================================================== */

.bg{

    position:fixed;
    inset:0;

    overflow:hidden;

    z-index:-2;

}

.bg::before,
.bg::after{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    filter:blur(100px);

    opacity:.18;

    animation:floatBlob 18s infinite ease-in-out;

}

.bg::before{

    background:#00bfff;

    top:-180px;
    left:-140px;

}

.bg::after{

    background:#7c5cff;

    right:-150px;
    bottom:-170px;

    animation-delay:7s;

}

@keyframes floatBlob{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(60px,-45px);

    }

}

/* small glowing particles */

body::before{

    content:"";

    position:fixed;
    inset:0;

    pointer-events:none;

    background-image:

    radial-gradient(circle,#ffffff55 1px,transparent 1px);

    background-size:70px 70px;

    opacity:.15;

    animation:starsMove 25s linear infinite;

}

@keyframes starsMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-70px);

    }

}

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

header{

    width:min(1200px,92%);
    margin:auto;

    padding:45px 0 25px;

    text-align:center;

}

header h1{

    font-size:clamp(2rem,4vw,3.5rem);

    font-weight:800;

    letter-spacing:.5px;

}

header p{

    margin-top:12px;

    color:var(--muted);

    font-size:1.02rem;

    line-height:1.7;

}

/* ==========================================================
LAYOUT
========================================================== */

main{

    width:min(1200px,92%);
    margin:auto;

    display:grid;

    gap:25px;

    padding-bottom:45px;

}

/* ==========================================================
GLASS
========================================================== */

.glass{

    background:var(--glass);

    backdrop-filter:blur(18px);

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

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:28px;

    animation:fadeUp .6s ease;

    transition:.35s;

}

.glass:hover{

    transform:translateY(-4px);

    border-color:rgba(79,195,255,.35);

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ==========================================================
SECTION TITLES
========================================================== */

.glass h2{

    margin-bottom:18px;

    font-size:1.3rem;

    font-weight:700;

}

.title-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

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

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

    padding:13px 22px;

    border-radius:12px;

    color:white;

    font-size:.95rem;

    font-weight:600;

    transition:.25s;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    box-shadow:0 10px 25px rgba(79,195,255,.25);

}

button:hover{

    transform:translateY(-2px) scale(1.03);

    box-shadow:0 15px 30px rgba(79,195,255,.35);

}

button:active{

    transform:scale(.96);

}

/* ==========================================================
CASE
========================================================== */

#caseArea{

    margin-top:18px;

}

#caseTitle{

    margin-bottom:15px;

    font-size:1.5rem;

    color:var(--primary);

}

#caseStory{

    color:var(--muted);

    line-height:1.9;

}

/* ==========================================================
GRID
========================================================== */

.card-grid{

    display:grid;

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

    gap:20px;

}

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

.card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:20px;

    transition:.3s;

    position:relative;

    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,transparent,rgba(255,255,255,.05),transparent);

    transform:translateX(-100%);

    transition:.7s;

}

.card:hover::before{

    transform:translateX(100%);

}

.card:hover{

    transform:translateY(-6px);

    border-color:rgba(79,195,255,.35);

}

.card h3{

    margin-bottom:12px;

    color:var(--primary);

    font-size:1.08rem;

}

.card p{

    color:var(--muted);

    line-height:1.7;

    font-size:.95rem;

}

/* ==========================================================
TEXTAREA
========================================================== */

textarea{

    width:100%;

    height:190px;

    resize:vertical;

    border:none;

    outline:none;

    border-radius:14px;

    padding:18px;

    background:rgba(255,255,255,.05);

    color:white;

    font-size:15px;

    line-height:1.8;

    border:1px solid rgba(255,255,255,.1);

}

textarea::placeholder{

    color:#9eb1cf;

}

/* ==========================================================
SELECT
========================================================== */

select{

    width:100%;

    margin:18px 0;

    padding:15px;

    border-radius:12px;

    outline:none;

    border:1px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.05);

    color:white;

    font-family:inherit;

    font-size:15px;

}

select option{

    color:#111;

}

/* ==========================================================
RESULT
========================================================== */

#resultContent{

    margin-top:15px;

    line-height:1.9;

    color:var(--muted);

}

.hidden{

    display:none;

}

.success{

    color:var(--success);

    font-weight:700;

}

.failure{

    color:var(--danger);

    font-weight:700;

}

.highlight{

    color:var(--warning);

    font-weight:600;

}

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

footer{

    width:min(1200px,92%);
    margin:auto;

    text-align:center;

    color:var(--muted);

    padding:10px 0 45px;

    font-size:.95rem;

}

/* ==========================================================
SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#09111d;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(var(--primary),var(--secondary));

    border-radius:30px;

}

/* ==========================================================
RESPONSIVE
========================================================== */

@media(max-width:900px){

    .title-row{

        flex-direction:column;
        align-items:flex-start;

    }

}

@media(max-width:768px){

    header{

        padding-top:35px;

    }

    .glass{

        padding:22px;

    }

    .card-grid{

        grid-template-columns:1fr;

    }

    button{

        width:100%;

    }

}

@media(max-width:480px){

    header h1{

        font-size:2rem;

    }

    header p{

        font-size:.92rem;

    }

    .glass{

        padding:18px;

    }

    #caseTitle{

        font-size:1.25rem;

    }

}