* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body 
{
    background-color: #a8f7a8;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    color: #eee;
}

#gameContainer
{
 display: flex;
 height: 100vh;
 position: relative;
 justify-content: center;
 align-items: center;
}

#gameCanvas {
    border: 4px solid #3e303f;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: #336628;
}

/* UI Panels */
.ui-panel
{
    position: absolute;
    background: rgba(46, 46, 62, 1);
    backdrop-filter: blur(10px);
    border: 3px solid #2e2e3e;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 30px rgba(74, 157, 255, 0.3);
    z-index: 1000;
    display: none;
}

#btnScreen
{
    display: none;
    position: absolute;
    top:25px;
    right: 10%;
    padding: 10px;

}

#loadingScreen
{
    padding: 50px;
}
.ui-panel.active
{
    display:block;
}

.ui-panel h1
{
    color: #ffffff;
    margin-bottom:20px;
    font-size: 40px;
    text-shadow: 0 0 20px rgba(74, 157, 255, 0.2);
}

button
{
    background: #2e2e3e;
    color: white;
    border: 2px solid #2e2e3e;
    padding: 12px 24px;
    margin: 8px;
    font-size: 16px;
    cursor: pointer;
    font-family: 'Courier New', monospace;
    border-radius: 8px;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(74, 157, 255, 0.2);
}

button:hover{
    background: #2e2e3e;
    box-shadow: 0 0 25px rgba(74, 157, 255, 0.2);
    transform: translateY(-2px);
}

#hud{
    display: none;
    position: absolute;
    inset:0;
    pointer-events: none;
    z-index: 1000;
}

#healthBarContainer{
    position: absolute;
    top:25px;
    left: 25%;
    background: rgba(0,0,0,0.5);
    border: 3px solid #eee;
    width: 50%;
    height: 25px;
    overflow: hidden;
    transform: skewX(-20deg);
    box-shadow: 6px 6px 0px #2e2e3e;

}

#healthBarFill
{
    width: 100%;
    height: 100%;
    position: relative;
}

#healthBarFill::before, #healthBarFill::after{
    content: '';
    position: absolute;
    inset : 0;
    transform: scaleX(var(--health-pct,1));
    transform-origin:left;
}

#healthBarFill::before{
    background: linear-gradient(90deg,#eb81d9 85%,#ffffff 85%);
    transition: transform 0.6s ease-out 0.5s;
    z-index:1;
}

#healthBarFill::after{
    background: linear-gradient(#eb81d9 50%,#e45dcd 50%);
    transition: transform 0.2s ease-out;
    z-index: 2;
}


#timer
{
    position: absolute;
    top: 70px;
    left: 50%;
    transform:translateX(-50%);
    font-size: 40px;
    color: #2e2e3e;
    font-family: 'Courier New',monospace;
    text-shadow: 0 0 20px rgba(74, 157, 255, 0.2);
    font-weight: 700;
}

a
{
    color:rgb(2, 32, 7);
}