*{

box-sizing:border-box;

}



body{


margin:0;

padding:0;


font-family:

Arial,
Helvetica,
sans-serif;


background:#080b12;


color:white;


}




/* ===============================
   START PAGE
================================ */


#loading-page{


min-height:100vh;


background:

radial-gradient(
circle at top,
#20294a,
#080b12
);


}




.hero{


min-height:90vh;


display:flex;


flex-direction:column;


justify-content:center;


align-items:center;


text-align:center;


padding:30px;


}




.hero h1{


font-size:48px;


margin-bottom:20px;


font-weight:800;


}



.hero p{


font-size:20px;


max-width:600px;


line-height:1.6;


color:#cbd5e1;


}




#start-btn{


margin-top:40px;


padding:

16px 40px;


font-size:20px;


font-weight:bold;


border:none;


border-radius:30px;


cursor:pointer;


background:

linear-gradient(
90deg,
#5b8cff,
#9b6cff
);


color:white;


transition:.3s;


}




#start-btn:hover{


transform:translateY(-3px);


}




.hint{


font-size:14px!important;


margin-top:20px;


color:#94a3b8!important;


}




.hero img{


width:min(520px,90vw);


margin-top:40px;


border-radius:20px;


box-shadow:

0 0 40px rgba(80,120,255,.4);


}




.loading-title{


margin-top:30px;


font-size:28px;


font-weight:bold;


letter-spacing:3px;


}




.loading-text{


max-width:600px;


color:#cbd5e1;


margin-top:15px;


}




/* ===============================
   GAME CONTAINER
================================ */


#game-container{


display:none;


min-height:100vh;


padding:20px;


}




/* ===============================
   STATUS PANEL
================================ */


#stats-panel{


position:fixed;


left:20px;


top:20px;


width:220px;


background:#111827;


padding:20px;


border-radius:15px;


}




/* ===============================
   MAIN STORY AREA
================================ */


#main-view{


max-width:850px;


margin:auto;


text-align:center;


}




#sceneImage{


width:100%;


border-radius:20px;


}




#story{


margin-top:30px;


font-size:20px;


line-height:1.8;


}




#choices button{


display:block;


width:100%;


margin:15px 0;


padding:16px;


border-radius:15px;


background:#1f2937;


color:white;


border:1px solid #374151;


cursor:pointer;


transition:.2s;


}




#choices button:hover{


transform:translateY(-2px);


background:#374151;


}




/* ===============================
   ENDING PANEL
================================ */


#ending-panel{


max-width:850px;


margin:40px auto;


padding:30px;


background:#111827;


border-radius:20px;


text-align:center;


}




#ending-text{


font-size:22px;


line-height:1.8;


margin-bottom:30px;


color:#e5e7eb;


}



/* ===============================
   ENDING FEEDBACK
================================ */


#feedback-input{


width:100%;


min-height:120px;


padding:15px;


border-radius:12px;


border:1px solid #374151;


background:#0f172a;


color:white;


font-size:16px;


resize:none;


margin-bottom:15px;


}




#email-input{


width:100%;


padding:14px;


border-radius:12px;


border:1px solid #374151;


background:#0f172a;


color:white;


font-size:16px;


margin-bottom:15px;


}




#submit-feedback{


padding:14px 35px;


border:none;


border-radius:25px;


background:

linear-gradient(
90deg,
#5b8cff,
#9b6cff
);


color:white;


font-size:16px;


font-weight:bold;


cursor:pointer;


transition:.2s;


}




#submit-feedback:hover{


transform:translateY(-2px);


}





/* ===============================
   FLOATING FEEDBACK BUTTON
================================ */


#floating-feedback{


position:fixed;


right:20px;


bottom:20px;


padding:15px 25px;


border-radius:30px;


border:none;


background:#5865f2;


color:white;


cursor:pointer;


font-size:15px;


z-index:9998;


}




/* ===============================
   FLOATING FEEDBACK MODAL
================================ */


#feedback-modal{


display:none;


position:fixed;


right:20px;


bottom:90px;


width:320px;


background:#111827;


padding:20px;


border-radius:16px;


box-shadow:

0 10px 30px rgba(0,0,0,.4);


z-index:9999;


}




#feedback-modal h3{


margin-top:0;


margin-bottom:15px;


}




#floating-feedback-input{


width:100%;


height:100px;


padding:12px;


border-radius:10px;


border:1px solid #374151;


background:#0f172a;


color:white;


resize:none;


font-size:16px;


}




#send-floating-feedback,
#close-feedback{


margin-top:12px;


padding:10px 18px;


border:none;


border-radius:20px;


cursor:pointer;


}




#send-floating-feedback{


background:#5865f2;


color:white;


}



#close-feedback{


background:#374151;


color:white;


margin-left:10px;


}




#floating-feedback-result{


margin-top:12px;


color:#94a3b8;


font-size:14px;


}



/* ===============================
   MOBILE
================================ */


@media(max-width:768px){


.hero h1{


font-size:36px;


}



#stats-panel{


position:relative;


left:auto;


top:auto;


width:100%;


}



#ending-panel{


margin:20px auto;


padding:20px;


}



#ending-text{


font-size:18px;


}



#feedback-modal{


right:10px;


left:10px;


width:auto;


}



}