/* =================================================================== */
/*                     SOUL ESCAPE GAME – FULL CSS                     */
/*                             Fully commented                         */
/* =================================================================== */

/* SLIDER LABELS WITH ICONS */
.slider-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #0ff;
    text-shadow: 0 0 14px #0ff;
    font-weight: bold;
    font-size: 15px;
}

.slider-group label i {
    font-size: 18px;
    filter: drop-shadow(0 0 8px #0ff);
}

/* TOOLTIP ON ICON HOVER */
.icon-tooltip {
    position: relative;
    cursor: help;
}
.icon-tooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    background: rgba(0, 15, 30, 0.97);
    color: #0ff;
    text-align: center;
    border-radius: 10px;
    padding: 9px 12px;
    position: absolute;
    z-index: 500;
    bottom: 130%;              /* appears above the icon */
    left: 50%;
    margin-left: -120px;
    opacity: 0;
    transition: opacity 0.25s ease;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid #0ff;
    box-shadow: 0 0 20px #0ff;
    text-shadow: 0 0 8px #0ff;
    backdrop-filter: blur(4px);
}
.icon-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* TOP-LEFT ANIMATED LOGO */
#hailp-logo {
    position: fixed;
    left: 6%;
    top: 8px;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 8px;
    color: #0ff;
    text-shadow: 0 0 20px #0ff,0 0 40px #0ff,0 0 60px #0ff,0 0 80px #0ff,0 0 100px #0ff,0 0 120px cyan,0 0 140px cyan,0 0 180px cyan;
    z-index: 9999;
    pointer-events: none;
    animation: pulse 2.8s infinite alternate;
    user-select: none;
}
@keyframes pulse {
    0%   { text-shadow: 0 0 20px #0ff, 0 0 40px #0ff, 0 0 60px #0ff, 0 0 80px #0ff; }
    100% { text-shadow: 0 0 40px #0ff, 0 0 80px #0ff, 0 0 120px #0ff, 0 0 160px cyan, 0 0 220px cyan, 0 0 280px cyan; }
}

#stats          { top: 94px;  }
#topButtons     { top: 148px; }

/* Clickable controls stay on top */
#leftControls,#rightControls,#gravityPanel,#topButtons{z-index:200!important;pointer-events:all!important;}
#tempThrottle{pointer-events:none;z-index:99;}
#temperature{pointer-events:all!important;z-index:201;}
#temperature::-webkit-slider-thumb,#temperature::-moz-range-thumb{pointer-events:all!important;z-index:202;}

/* GLOBAL LAYOUT */
body{
    margin:0;background:#000;overflow:hidden;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Arial;
    background-image: url('images/grim_reaper.jpg');background-size: cover;background-position: center;background-attachment: fixed;
}
body::before{content: "";position: fixed;top: 0; left: 0; right: 0; bottom: 0;background: rgba(0, 0, 0, 0.78);pointer-events: none;z-index: 0;}

/* MAIN CANVAS */
canvas{
    border-radius:50%;
    box-shadow:0 0 150px #0ff;
    position:relative;
    z-index:1;
    background: url('images/plasma_ball.jpg') center/cover no-repeat;
}

/* STATS BAR */
#stats{
    position:fixed;top:14px;left:50%;transform:translateX(-50%);color:#0ff;font:22px Arial;text-shadow:0 0 35px #0ff;pointer-events:none;z-index:10;
    display:flex;gap:40px;background:rgba(0,255,255,0.1);padding:10px 30px;border-radius:35px;border:2px solid rgba(0,255,255,0.4);backdrop-filter:blur(5px);
}

/* ACTION BUTTONS */
#topButtons{position:fixed;top:68px;left:50%;transform:translateX(-50%);display:flex;gap:28px;z-index:200;}
#clearBtn,#spawnBtn{padding:14px 36px;border-radius:40px;background:rgba(0,255,255,0.15);border:3px solid #0ff;color:#0ff;font-size:23px;font-weight:bold;
    cursor:pointer;box-shadow:0 0 45px #0ff;transition:all .3s;user-select:none;min-width:140px;text-align:center;}
#clearBtn:hover,#spawnBtn:hover{transform:scale(1.1);box-shadow:0 0 65px #0ff}
#clearBtn:active{background:#f00;border-color:#f00;box-shadow:0 0 80px #f00;transform:scale(1.15)}

/* LEFT & RIGHT PANELS */
#leftControls,#rightControls{
    position:fixed;top:50%;transform:translateY(-50%);background:rgba(0,255,255,0.13);padding:22px 20px;border-radius:32px;
    border:3px solid #0ff;z-index:200;display:flex;flex-direction:column;gap:22px;box-shadow:0 0 55px #0ff;width:210px;}
#leftControls{left:22px} #rightControls{right:22px}
.slider-group{display:flex;flex-direction:column;align-items:center;gap:7px}
label{color:#0ff;text-shadow:0 0 14px #0ff;font-weight:bold;font-size:15px}
input[type=range]{width:170px;height:9px;border-radius:5px;background:#033;outline:none}
input[type=range]::-webkit-slider-thumb{background:#0ff;box-shadow:0 0 22px #0ff;height:26px;width:26px;border-radius:50%}
.value{color:#0ff;font-size:14px;text-shadow:0 0 10px #0ff}

/* GRAVITY PANEL */
#gravityPanel{
    position:fixed;bottom:15%;left:50%;transform:translateX(-50%);
    background:rgba(0,255,255,0.15);padding:14px 38px;border-radius:38px;border:4px solid #0ff;
    box-shadow:0 0 70px #0ff;z-index:200;display:flex;flex-direction:column;align-items:center;gap:10px;width:370px;
}
#gravityPanel label{font-size:18px;margin-bottom:6px;}
#gravity{display:block;width:310px;height:11px;background:#001;padding:5px;border-radius:8px;}
#gravity::-webkit-slider-thumb{height:32px;width:32px;}
#weightIcons{font-size:34px;letter-spacing:9px;filter:drop-shadow(0 0 14px #0ff);}

/* ABOUT TEXT */
#about{
    position:fixed;bottom:1%;left:50%;transform:translateX(-50%);
    background:rgba(0,255,255,0.12);padding:10px 26px;border-radius:24px;border:2px solid rgba(0,255,255,0.5);
    color:#0ff;font-size:14px;line-height:1.6;max-width:90%;text-align:center;
    box-shadow:0 0 35px #0ff;backdrop-filter:blur(6px);text-shadow:0 0 12px #0ff;z-index:200;width:55%;
}

/* TEMPERATURE THROTTLE – VERTICAL RED BAR */
#tempThrottle{
    position:fixed;right:280px;top:50%;transform:translateY(-50%);
    width:86px;height:600px;background:rgba(120,0,0,0.5);padding:22px 10px;
    border-radius:50px;border:5px solid #f33;box-shadow:0 0 100px #f66, inset 0 0 50px rgba(255,50,50,0.4);
    z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
}
#tempThrottle label{color:#f88;text-shadow:0 0 22px #f66;font-size:20px;font-weight:bold;
    writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:5px;}
#tempContainer{height:360px;position:relative;display:flex;align-items:center;justify-content:center;}
#temperature{
    -webkit-appearance:none;appearance:none;width:360px;height:24px;
    background:linear-gradient(to right,
        #001133 0%,#003366 15%,#0066cc 30%,#004400 45%,#008800 55%,
        #ff8800 70%,#ff4400 85%,#ff1100 100%);
    border-radius:14px;outline:none;transform:rotate(-90deg);
    box-shadow:0 0 50px #f00,inset 0 0 25px #800;
}
#temperature::-webkit-slider-thumb{
    -webkit-appearance:none;width:76px;height:56px;background:#ff2200;
    border:4px solid #fff;border-radius:16px;cursor:pointer;
    box-shadow:0 0 60px #f00, 0 0 90px #ff4400, 0 0 120px #ff0000;
}
#temperature::-moz-range-thumb{
    width:76px;height:56px;background:#ff2200;border:4px solid #fff;border-radius:16px;
    box-shadow:0 0 60px #f00, 0 0 90px #ff4400;
}
#tempValue{
    color:#f88;text-shadow:0 0 18px #f66;font-weight:bold;font-size:18px;
    writing-mode:vertical-rl;transform:rotate(180deg);
}