/* Enthält alle Styles für Canvas, Buttons, Overlays und Touch-Steuerung.
   Nutze die IDs und Klassen, um das Aussehen anzupassen.
   Für mobile Geräte werden Touch-Buttons per Media Query eingeblendet.
*/
#gameCanvas {
    border: 1px solid black;
    display: block;
    margin: 20px auto;

    background-color: lightblue;
}

#healthCanvas {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 4px solid antiquewhite;
    border-left: 1px solid black;
    display: block;
    margin: 20px auto 0px auto;

    background-color: antiquewhite;
}

#xpCanvas {
    border-top: 4px solid antiquewhite;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    display: block;
    margin: 0px auto;

    background-color: antiquewhite;
}
img {
    
    display: block;
    margin: 0 auto;
    max-width: 100%;
    
}
#debugUnlockWueste {
    display: block;
    margin: 20px auto;
    padding: 10px 24px;
    font-size: 1.1em;
    cursor: pointer;
}
#MapSelectScreen {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
#MapSelectScreen > div {
    
    box-shadow: 0 0 32px #0008;
}
#MapSelectScreen button {
    margin: 8px;
    padding: 12px 24px;
    font-size: 1.1em;
    cursor: pointer;
}
#Einstellung {
    display: block;
    margin: 20px auto;
    padding: 10px 24px;
    font-size: 1.1em;
    cursor: pointer;
}
/* Standard: Touch-Buttons ausblenden */
#touchControls, #touchControlsLeft, #touchControlsRight {
    display: none;
}

/* Auf Geräten mit max. 900px Breite (Handy/Tablet): Touch-Buttons anzeigen */
@media (max-width: 990px) {
    #touchControls,
    #touchControlsLeft,
    #touchControlsRight {
        display: flex !important;
    }
}
@keyframes buttonBlink {
    0%   { background: #ff0000; color: #fff; }
    20%  { background: #fff; color: #ff0000; }
    40%  { background: #ff0000; color: #fff; }
    60%  { background: #fff; color: #ff0000; }
    80%  { background: #ff0000; color: #fff; }
    100% { background: #fff700; color: #222; }
}
.wueste-blink {
    animation: buttonBlink 6.5s linear 9;
    box-shadow: 0 0 24px 8px #ff0000;
    font-weight: bold;}
    .paused-blink {
    color: #d00;
    font-size: 2em;
    font-weight: bold;
    animation: pausedBlink 0.7s linear infinite;
    margin-bottom: 18px;
}
@keyframes pausedBlink {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
}
.paused-blink {
    color: #d00;
    font-size: 2em;
    font-weight: bold;
    animation: pausedBlink 0.7s linear infinite;
    margin-bottom: 18px;
}
@keyframes pausedBlink {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
}