/* --- GLOBAL --- */
* { box-sizing: border-box; user-select: none; }

body {
    margin: 0; min-height: 100vh;
    display: flex; justify-content: center;
    
    align-items: flex-start; 
    padding-top: 50px;       

    background-color: #ffeef5;
    background-image: url(https://file.garden/aXUfWdPgtglShqRb/backgorund/1.png);
    background-size: cover;
    font-family: 'Press Start 2P', cursive;
}

/* --- BACK BUTTON --- */
.back-btn {
    position: fixed; top: 20px; left: 20px;
    background-color: rgba(255, 255, 255, 0.8);
    color: #ffc1e3; padding: 10px 20px; border-radius: 25px;
    text-decoration: none; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13px;
    border: 2px solid #ffc1e3;
    box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);
    transition: all 0.2s ease; z-index: 100; backdrop-filter: blur(5px);
}
.back-btn:hover { transform: translateY(-2px); background-color: rgba(255, 105, 180, 0.3); color: white; }

/* --- SCENE --- */
.scene-container {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
}

/* --- TAMAGOTCHI CONTAINER --- */
.tamagotchi-container {
    position: relative;
    width: 300px; 
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(189, 143, 163, 0.6));
}

.tama-bg {
    width: 100%; display: block; height: auto;
}

/* --- SCREEN OVERLAY --- */
.screen-overlay {
    position: absolute;
    top: 32%;       
    left: 33%;      
    width: 37.4%;     
    height: 34.2%;    
    background: #e0f0e0; 
    opacity: 0.8; 
    border-radius: 4px;
    overflow: hidden;
    display: flex; justify-content: center; align-items: center;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* Pixel Grid Effect */
.screen-overlay::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: 
        linear-gradient(rgba(0,0,0,0.05) 50%, transparent 50%),
        linear-gradient(90deg, rgba(0,0,0,0.05) 50%, transparent 50%);
    background-size: 2px 2px;
    pointer-events: none; z-index: 10;
}

.pixel-display {
    width: 100%; height: 100%; padding: 8px; 
    color: #333;
    display: flex; flex-direction: column; justify-content: space-between;
}

.pixel-header {
    display: flex; justify-content: space-between; font-size: 8px; opacity: 0.6;
}

.result-container {
    flex-grow: 1; display: flex; align-items: center; gap: 8px;
}

.pixel-icon {
    font-size: 24px; animation: bounce 1s infinite;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.text-content { display: flex; flex-direction: column; gap: 4px; }

.quiz-label { font-size: 6px; text-transform: uppercase; color: #555; }
.quiz-result { font-size: 7px; font-weight: bold; line-height: 1.4; color: #000; }

/* --- BUTTON HITBOXES --- */
.hitbox {
    position: absolute;
    width: 12%; height: 9%; 
    border-radius: 50%;
    cursor: pointer;
}
.hitbox:active {
    background: rgba(255, 255, 255, 0.3); 
}

/* Left Button (A) */
.btn-a {
    top: 71%; left: 30%;
background: rgba(0, 0, 0, 0)}

/* Middle Button (B) */
.btn-b {
    top: 75%; left: 44%;
background: rgba(0, 0, 0, 0)}

/* Right Button (C) */
.btn-c {
    top: 71%; left: 60%;
background: rgba(0, 0, 0, 0)}