/* --- GLOBAL RESET --- */
#kd-body {
    margin: 0; padding: 0;
    background-color: #020005;
    overflow: hidden; touch-action: none;
    font-family: 'Courier New', Courier, monospace;
    width: 100%; height: 100%;
    position: fixed; top: 0; left: 0; bottom: 0; right: 0;
}

/* --- SCOPED ROOT CONTAINER --- */
#kd-app-root {
    all: initial;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    background-color: #020005;
    overflow: hidden;
    position: relative; z-index: 9999;
}

/* Ειδικός κανόνας για όταν το στοιχείο γίνεται Fullscreen */
#kd-app-root:fullscreen {
    width: 100vw; height: 100vh;
    background-color: #020005;
    display: flex; justify-content: center; align-items: center;
}

#kd-app-root * { box-sizing: border-box; font-family: 'Courier New', Courier, monospace; }

/* --- MAIN LAYOUT --- */
#kd-main-layout {
    width: 100%; height: 100%;
    max-width: 600px; /* Περιορισμός για tablets/desktop να μην απλώνει τεράστια */
    display: flex; 
    flex-direction: column; /* Κάθετη διάταξη */
    justify-content: center; /* Κεντράρισμα στον άξονα Υ */
    align-items: center;     /* Κεντράρισμα στον άξονα Χ */
}

/* --- GAME WRAPPER (CONTAIN LOGIC) --- */
#kd-game-wrapper {
    position: relative;
    
    /* Μαγική συνταγή για να μην βγαίνει εκτός και να μην παραμορφώνει: */
    flex: 1;               /* Πιάσε τον διαθέσιμο χώρο... */
    min-height: 0;         /* ...αλλά επίτρεψε τη συρρίκνωση αν δεν χωράει */
    width: 100%;           /* Προσπάθησε να πιάσεις το πλάτος */
    height: auto;
    
    /* Κλειδωμένη αναλογία */
    aspect-ratio: 4 / 5;   
    
    /* Περιορισμοί για να μην ξεφεύγει */
    max-height: 100%;      
    max-width: 100%;

    background-color: #050011;
    background-image: linear-gradient(rgba(199,0,219,0.15) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(199,0,219,0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.2);
    border-bottom: 2px solid #00f2fe;
    
    /* Κεντράρισμα μέσα στο flex item */
    margin: auto; 
}

#kd-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- CONTROLS CONTAINER --- */
#kd-controls-container {
    width: 100%;
    /* Σταθερό ύψος για να μην συμπιέζεται */
    height: 90px; min-height: 90px;
    flex-shrink: 0; /* Απαγορεύεται να μικρύνει */
    
    background-color: #050011;
    background-image: linear-gradient(rgba(199,0,219,0.15) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(199,0,219,0.15) 1px, transparent 1px);
    background-size: 40px 40px;
    display: flex; align-items: center; justify-content: center;
    padding: 10px 15px;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.5);
    z-index: 10000;
}

#kd-touch-slider {
    width: 100%; height: 60px;
    background: rgba(0, 242, 254, 0.05);
    border: 2px solid rgba(0, 242, 254, 0.4);
    border-radius: 12px;
    display: flex; justify-content: center; align-items: center;
    position: relative; overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.1), inset 0 0 10px rgba(0, 242, 254, 0.1);
}

.kd-slider-line {
    position: absolute; width: 90%; height: 2px;
    background: rgba(0, 242, 254, 0.6);
    box-shadow: 0 0 15px #00f2fe, 0 0 5px #fff; border-radius: 50%;
}

.kd-slider-text {
    position: relative; z-index: 2;
    color: rgba(0, 242, 254, 0.9); font-size: 14px; font-weight: bold;
    text-shadow: 0 0 8px #00f2fe; letter-spacing: 1px;
    pointer-events: none; animation: kdPulsateText 2s infinite alternate;
}
@keyframes kdPulsateText { 0% { opacity: 0.7; } 100% { opacity: 1; text-shadow: 0 0 15px #00f2fe; } }

/* --- UI ICONS & SCREENS (Ίδια με πριν) --- */
.kd-ui-icon {
    position: absolute; top: 10px; width: 36px; height: 36px;
    background: rgba(0,0,0,0.6); border: 1px solid #00f2fe; color: #00f2fe;
    border-radius: 50%; cursor: pointer; display: flex; justify-content: center;
    align-items: center; z-index: 100; font-size: 18px; transition: 0.2s;
}
.kd-ui-icon:active { background: #00f2fe; color: black; box-shadow: 0 0 15px #00f2fe; }

.kd-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5,0,17,0.95);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 20; backdrop-filter: blur(5px); text-align: center;
}
.kd-hidden { display: none !important; }

#kd-game-wrapper h1 { font-size: 32px; margin-bottom: 20px; color: #fff; text-shadow: 0 0 10px #00f2fe, 0 0 20px #00f2fe; text-transform: uppercase; }
.kd-pulsate { animation: kdPulsate 1.5s infinite alternate; }
@keyframes kdPulsate { 0% { text-shadow: 0 0 10px #00f2fe; } 100% { text-shadow: 0 0 30px #00f2fe, 0 0 50px #fff; } }

.kd-info-box { border: 1px solid #00f2fe; padding: 10px 20px; background: rgba(0,0,0,0.5); border-radius: 10px; margin-bottom: 20px; box-shadow: 0 0 15px rgba(0,242,254,0.2); }
.kd-info-box p { color: #ddd; margin: 5px 0; font-size: 15px; font-weight: bold; }

.kd-btn {
    background: transparent; border: 2px solid #ff00de; color: #ff00de;
    padding: 10px 30px; font-size: 18px; font-weight: bold; border-radius: 50px;
    margin-top: 15px; font-family: inherit; transition: 0.2s; box-shadow: 0 0 10px rgba(255,0,222,0.3); cursor: pointer;
}
.kd-btn:active { background: #ff00de; color: #fff; transform: scale(0.95); box-shadow: 0 0 25px #ff00de; }
.kd-start-main-btn { border-color: #2ed573; color: #2ed573; font-size: 22px; padding: 15px 40px; box-shadow: 0 0 15px rgba(46, 213, 115, 0.3); }
.kd-start-main-btn:active { background: #2ed573; color: black; box-shadow: 0 0 30px #2ed573; }

#kd-game-wrapper input[type="text"] { background: rgba(255,255,255,0.1); border: 2px solid #fff; color: #fff; padding: 10px; font-size: 24px; text-align: center; width: 100px; border-radius: 8px; margin: 15px; outline: none; font-family: inherit; }
#kd-game-wrapper ul { list-style: none; padding: 0; width: 80%; max-width: 280px; margin-bottom: 20px; }
#kd-game-wrapper li { background: linear-gradient(90deg, rgba(255,0,222,0.1), rgba(0,242,254,0.1)); margin: 5px 0; padding: 8px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; color: white; font-size: 14px; }
#kd-game-wrapper li:nth-child(1) { color: #ffd700; border: 1px solid #ffd700; box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }

/* Desktop Adjustment: Hide controls only on very large screens, ensure centering */
@media (min-width: 1025px) {
    #kd-controls-container { display: none; }
    #kd-game-wrapper { border-bottom: none; border: 2px solid #00f2fe; border-radius: 12px; }
}