@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Χρήση ID για να μην επηρεάζει το global body αν γίνει embed */
#hopper-body {
    margin: 0; padding: 0; background: #111; color: white;
    font-family: 'Press Start 2P', cursive;
    display: flex; justify-content: center; align-items: center;
    width: 100vw; height: 100vh; overflow: hidden; touch-action: none;
}

#hopper-container {
    display: flex; flex-direction: row;
    width: 960px; max-width: 100%; 
    height: auto; aspect-ratio: 16/10; max-height: 95vh;
    border: 8px solid #1b5e20; 
    border-radius: 8px;
    background: #000;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    margin: auto;
    position: relative;
}

/* Fullscreen Fix */
#hopper-container:fullscreen {
    width: 100vw; height: 100vh; max-width: none; max-height: none;
    border: none; border-radius: 0;
}

#hopper-wrapper {
    position: relative; flex-grow: 2; height: 100%;
    background: #000;
    display: flex; justify-content: center; align-items: center;
    overflow: hidden;
}

#hopper-canvas { 
    display: block; image-rendering: pixelated; 
    width: 100%; height: 100%; object-fit: contain;
}

/* Sidebar Styling */
#hopper-sidebar {
    width: 180px; background: #222; 
    border-left: 4px solid #1b5e20;
    display: flex; flex-direction: column; 
    padding: 15px; 
    justify-content: center;
    z-index: 10;
    flex-shrink: 0;
}

.hopper-stats-group {
    display: flex; flex-direction: column; gap: 20px; width: 100%;
}

.hopper-panel { text-align: center; width: 100%; }
.hopper-label { color: #81c784; font-size: 10px; margin-bottom: 5px; display: block; }
.hopper-value { color: #fff; font-size: 14px; text-shadow: 2px 2px 0 #000; }

.hopper-time-bar-box { width: 100%; height: 12px; border: 2px solid white; background: #333; }
#hopper-time-bar { width: 100%; height: 100%; background: #0f0; transition: width 0.2s linear; }

/* Overlays */
.hopper-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.92); display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 20; text-align: center;
}
.hidden { display: none !important; }
.hopper-blink { animation: blink 1s infinite; font-size: 12px; color: #ffeb3b; margin-bottom: 20px; }
@keyframes blink { 50% { opacity: 0; } }

.hopper-main-btn {
    background: #4caf50; border: 4px solid #fff; color: #fff;
    padding: 15px 20px; font-family: inherit; cursor: pointer;
    box-shadow: 0 4px #1b5e20; font-size: 14px; margin-top: 20px;
}
.hopper-main-btn:active { transform: translateY(4px); box-shadow: 0 0; }

#hopper-fs-btn { background: none; border: 2px solid #fff; color: #fff; font-size: 20px; cursor: pointer; padding: 8px; border-radius: 4px; }

/* Leaderboard */
.hopper-leaderboard-box {
    background: rgba(255, 255, 255, 0.1); padding: 10px;
    border-radius: 8px; margin: 15px 0; width: 85%; max-width: 280px; border: 2px solid #444;
}
.hopper-leaderboard-box h3 { margin: 0 0 10px 0; color: #81c784; font-size: 12px; text-decoration: underline; }
.hopper-leaderboard-box ul { list-style: none; padding: 0; margin: 0; font-size: 10px; text-align: left; }
.hopper-leaderboard-box li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #555; }

#hopper-player-name {
    background: #333; border: 2px solid #fff; color: #fff;
    padding: 8px; font-family: inherit; font-size: 18px;
    text-align: center; text-transform: uppercase; width: 100px; margin: 15px 0;
}

/* Controls */
#hopper-mobile-controls { display: none; }
.hopper-dpad {
    width: 60px; height: 50px; /* Πιο φαρδιά κουμπιά */
    background: rgba(255,255,255,0.15);
    border: 2px solid #666; color: white; font-size: 24px; border-radius: 8px;
    cursor: pointer; touch-action: manipulation;
    display: flex; align-items: center; justify-content: center;
}
.hopper-dpad:active { background: rgba(76, 175, 80, 0.6); border-color: #4caf50; }

/* --- RESPONSIVE MOBILE LAYOUT --- */
@media (max-width: 800px) {
    #hopper-container { 
        flex-direction: column; 
        height: 100vh; width: 100%; border: none; border-radius: 0; 
        max-height: none; aspect-ratio: auto;
    }
    
    #hopper-wrapper {
        flex-grow: 1; /* Το παιχνίδι πιάνει τον περισσότερο χώρο */
        width: 100%; height: auto;
    }

    /* Sidebar γίνεται κάτω μπάρα */
    #hopper-sidebar { 
        width: 100%; height: auto; 
        border-left: none; border-top: 4px solid #1b5e20; 
        padding: 5px; gap: 5px;
        flex-shrink: 0;
    }

    /* Στατιστικά σε μια γραμμή */
    .hopper-stats-group {
        flex-direction: row; flex-wrap: nowrap;
        justify-content: space-between; align-items: center;
        gap: 5px;
    }
    .hopper-panel { margin: 0; flex: 1; }
    .hopper-label { font-size: 7px; margin-bottom: 2px; }
    .hopper-value { font-size: 10px; }
    .desktop-only { display: none; } /* Κρύβουμε το fullscreen btn στο mobile */

    /* Κουμπιά σε μια σειρά: Πάνω - Κάτω - Αριστερά - Δεξιά */
    #hopper-mobile-controls {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        margin-top: 5px;
        width: 100%;
    }
    .hopper-dpad {
        flex: 1; /* Να πιάνουν όλο το πλάτος ισόποσα */
        height: 55px; /* Μεγάλο ύψος για εύκολο πάτημα */
        font-size: 28px;
    }
}