*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    touch-action:none;
    font-family:Arial, Helvetica, sans-serif;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:
    radial-gradient(circle at top,#243B6B,#111827 45%,#05070C 100%);
    
}

#canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:block;
}

/* MENU BUTTON */

#menuBtn{
    position:fixed;
    top:16px;
    right:16px;   /* Changed from left */
    left:auto;    /* Added */

    width:46px;   /* Was 56px */
    height:46px;  /* Was 56px */

    border:none;
    border-radius:14px;

    font-size:24px; /* Was 30px */

    color:white;

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

    backdrop-filter:blur(18px);

    box-shadow:
        0 8px 30px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.08);

    z-index:1001;

    transition:.25s;
}

#menuBtn:active{
    transform:scale(.92);
}

/* SIDE MENU */

#menu{
    position:fixed;

    top:0;
    left:-320px;

    width:290px;
    max-width:82vw;

    height:100%;

    padding:22px;

    background:rgba(18,20,30,.75);

    backdrop-filter:blur(22px);

    box-shadow:
        10px 0 40px rgba(0,0,0,.5);

    transition:left .35s ease;

    z-index:1000;

    overflow-y:auto;
}

#menu.open{
    left:0;
}

#menu h1{
    color:white;
    font-size:24px;
    margin-bottom:25px;
}

/* BUTTONS */

#menu button{

    width:100%;

    padding:15px;

    margin-bottom:14px;

    border:none;

    border-radius:16px;

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

    color:white;

    font-size:17px;

    backdrop-filter:blur(12px);

    transition:
        transform .15s,
        background .25s,
        box-shadow .25s;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.06);
}

#menu button:active{

    transform:scale(.96);

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

    box-shadow:
        0 0 18px rgba(255,255,255,.2);
}

/* TIP */

.tip{

    margin-top:15px;

    color:#bdbdbd;

    line-height:1.5;

    font-size:14px;
}

/* OVERLAY */

#overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;

    pointer-events:none;

    transition:.3s;

    z-index:900;
}

#overlay.show{

    opacity:1;

    pointer-events:auto;
}

/* =====================
   PARTICLE MODE PANEL
===================== */

.modePanel{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:10px;

    padding:16px;

    border-radius:18px;

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

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

}.modePanel h3{

    color:white;

    margin-bottom:14px;

    font-size:18px;

}

.mode{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:10px 12px;

    border:none;

    border-radius:12px;

    background:transparent !important;

    box-shadow:none !important;

    color:white;

    font-size:15px;

    text-align:left;

    transition:.18s;

}

.mode:active{

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

    padding-left:8px;

}

.mode:active{

    background:rgba(255,255,255,.08) !important;

}

.radio{

    width:14px;

    height:14px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.45);

    transition:.2s;

    flex-shrink:0;

}

.mode.active .radio{

    border-color:white;

    background:white;

    box-shadow:
        inset 0 0 0 3px rgba(20,20,20,.9);

}

.mode.active{

    background:rgba(255,255,255,.08) !important;

}

#modeDescription{

    margin-top:10px;

    color:rgba(255,255,255,.6);

    font-size:13px;

    line-height:1.5;

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.04;

    background-image:
    radial-gradient(white .6px,transparent .6px);

    background-size:18px 18px;

}

.section{

    margin-top:22px;

}

.section h3{

    margin-bottom:12px;

    color:rgba(255,255,255,.55);

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.iconGrid{

    display:flex;

    gap:12px;

}

.iconBtn{

    width:58px;

    height:58px;

    border-radius:18px !important;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

}

.section:nth-child(2) h3{
    color:#b388ff;
}

.section:nth-child(3) h3{
    color:#7ec8ff;
}

.section:nth-child(4) h3{
    color:#7cffb2;
}

#menu h1{

    background:linear-gradient(
        90deg,
        #7ec8ff,
        #c084fc
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

#rainbowBtn i{

    background:linear-gradient(
        90deg,
        #ff4d4d,
        #ff9f43,
        #ffe66d,
        #4cd964,
        #5ac8fa,
        #5856d6,
        #af52de
    );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

}

#explodeBtn i{
    color:#ffb347;
}

#clearBtn i{
    color:#7cffb2;
}

.mode.active{

    background:rgba(126,200,255,.12);

    color:#7ec8ff;

}

.iconBtn:active{

    box-shadow:
        0 0 18px rgba(126,200,255,.35);

}

#toast{

    position:fixed;

    left:50%;
    bottom:30px;

    transform:translateX(-50%) translateY(20px);

    padding:14px 18px;

    border-radius:16px;

    background:rgba(25,28,40,.88);

    backdrop-filter:blur(18px);

    color:white;

    font-size:15px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.35);

    opacity:0;

    pointer-events:none;

    transition:
        opacity .25s,
        transform .25s;

    z-index:9999;

}

#toast.show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

}

#retroBtn i{
    color:#d9d9d9;
}

.version{

    margin-top:30px;

    text-align:center;

    color:rgba(255,255,255,.55);

    font-size:13px;

    line-height:1.6;

}

.version span{

    color:rgba(255,255,255,.35);

    font-size:12px;

}