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

body{
    background:#0b0b0b;
    color:#9bbc0f;
    font-family:'VT323', monospace;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
}

.screen{
    width:90%;
    max-width:420px;
    text-align:center;
}

.hidden{
    display:none;
}

h1,h2{
    font-family:'Press Start 2P', cursive;
    line-height:1.6;
    margin-bottom:30px;
}

.bigText{
    font-size:30px;
    margin:25px 0;
}

#loadingText,
#percent{
    font-size:28px;
    margin:20px 0;
}

.loadingBar{
    width:100%;
    height:22px;
    border:3px solid #9bbc0f;
    overflow:hidden;
}

#progress{
    width:0%;
    height:100%;
    background:#9bbc0f;
}

button{
    margin-top:25px;
    padding:14px 20px;
    background:#9bbc0f;
    color:#111;
    border:none;
    border-radius:8px;
    font-family:'Press Start 2P', cursive;
    font-size:12px;
}

button:active{
    transform:scale(.96);
}

.dialogBox{
    border:3px solid #9bbc0f;
    padding:20px;
    background:#111;
    border-radius:10px;
    box-shadow:0 0 20px rgba(155,188,15,.35);
}

.speaker{
    font-family:'Press Start 2P', cursive;
    font-size:12px;
    color:#00ffd0;
    margin-bottom:20px;
}

#dialogueText,
#questDescription{
    font-size:28px;
    line-height:1.4;
    min-height:140px;
}

.hud{
    display:flex;
    justify-content:space-between;
    margin-bottom:20px;
    font-size:24px;
}

.campus{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:25px 0;
}

.place{
    height:110px;
    border:3px solid #9bbc0f;
    background:#181818;
    color:#9bbc0f;
    border-radius:10px;
    font-size:18px;
}

.tip{
    font-size:24px;
    margin-top:20px;
}

/* CRT Scanline Effect */
body::after{
    content:"";
    position:fixed;
    inset:0;
    background:repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.02) 0px,
        rgba(255,255,255,.02) 2px,
        transparent 2px,
        transparent 4px
    );
    pointer-events:none;
}

/* Glow */
h1,h2,.bigText{
    text-shadow:0 0 8px rgba(155,188,15,.6);
}
/* Achievement Popup */

.achievement{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

background:#111;

border:3px solid #9bbc0f;

padding:15px;

width:300px;

text-align:center;

border-radius:10px;

box-shadow:0 0 15px #9bbc0f;

animation:popup .4s ease;

z-index:999;

}

.achievement-title{

font-family:'Press Start 2P';

font-size:10px;

margin-bottom:15px;

color:#9bbc0f;

}

#achievementText{

font-size:24px;

}

@keyframes popup{

from{

transform:translate(-50%,-80px);

opacity:0;

}

to{

transform:translate(-50%,0);

opacity:1;

}

}
/* ---------- RPG HUD ---------- */

.hud {

    width: 85%;
    margin: 15px auto;

    padding: 15px;

    border: 3px solid white;

    background: rgba(0,0,0,0.6);

    font-family: 'Press Start 2P';

    text-align: center;

}


.playerName {

    font-size: 12px;

    margin-bottom: 15px;

}


#levelText {

    font-size: 14px;

    margin-bottom: 15px;

}


.xpContainer {

    font-size: 10px;

}


.xpBar {

    width: 90%;

    height: 15px;

    border: 2px solid white;

    margin: 10px auto;

}


#xpFill {

    width: 20%;

    height: 100%;

    background: white;

}


.badge {

    margin-top: 15px;

    font-size: 10px;

}
#xpFill {

    height:100%;

    transition: width 1s ease;

}
@keyframes levelUp {

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.2);
    }

    100%{
        transform:scale(1);
    }

}


.levelEffect{

    animation:levelUp 0.5s;

}
/* ---------- CAMPUS MAP ---------- */

.campusMap {

    position: relative;

    width: 90%;
    height: 350px;

    margin: 20px auto;

    border: 3px solid white;

    background: rgba(0,0,0,0.5);

}


.mapPlayer {

    position: absolute;

    top: 45%;
    left: 45%;

    font-size: 40px;

}


.mapPlace {

    position: absolute;

}


.classroom {

    top: 30px;
    left: 20px;

}


.library {

    top: 30px;
    right: 20px;

}


.auditorium {

    bottom: 30px;
    right: 20px;

}


.canteen {

    bottom: 30px;
    left: 20px;

}


.place {

    padding: 15px;

    cursor:pointer;

    font-family:'Press Start 2P';

}
@keyframes playerIdle {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }

}


.mapPlayer {

    animation: playerIdle 1.5s infinite;

}
/* ---------- LOCATION GLOW ---------- */

.place {

    animation: locationGlow 2s infinite;

}


@keyframes locationGlow {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}
.status{

    display:block;

    margin-top:8px;

    font-size:10px;

}
#playerName{

    font-family:'Press Start 2P';

    font-size:14px;

    padding:12px;

    width:250px;

    text-align:center;

    border:3px solid white;

    background:black;

    color:white;

}