* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: #000; color: #55ff55; font-family: 'Courier New', Courier, monospace; overflow: hidden; height: 100vh; }

/* Init Screen & WarGames */
#init-screen { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; z-index: 1000; position: absolute; width: 100%; }
#start-btn { background: #000; color: #55ff55; border: 2px solid #55ff55; padding: 15px 30px; font-family: 'Courier New', Courier, monospace; font-size: 1.5rem; cursor: pointer; text-transform: uppercase; }
#start-btn:hover { background: #55ff55; color: #000; }
#wargames-screen { padding: 30px; font-size: 1.3rem; height: 100%; display: flex; flex-direction: column; line-height: 1.2; text-shadow: 0 0 5px #55ff55; letter-spacing: 2px; }
#terminal-output { word-break: break-all; margin-bottom: 10px; }
#login-container { display: flex; align-items: center; }
#login-input { background: transparent; border: none; color: transparent; outline: none; width: 1px; caret-color: transparent; }
.cursor { animation: blinkCursor 1s step-end infinite; }
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Main Screen & Bubbles */
#main-screen { position: relative; width: 100%; height: 100%; overflow-y: auto; text-align: center; overflow-x: hidden; }
.bubbles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(45deg, #111, #001133, #330011, #111); background-size: 400% 400%; animation: gradientBg 15s ease infinite; }
@keyframes gradientBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.bubble { position: absolute; bottom: -100px; background: rgba(255,255,255,0.1); border-radius: 50%; animation: float 8s infinite ease-in; box-shadow: inset 0 0 20px rgba(255,255,255,0.5); }
@keyframes float { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-120vh) scale(2); opacity: 0; } }
.content { position: relative; z-index: 10; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; perspective: 1000px; }

/* 3D Gold Logo (Extrem erzwungene Attribute) */
.logo-container { display: flex; justify-content: center; align-items: center; perspective: 1200px; }
.gold-3d-logo {
    width: 300px !important; height: 200px !important; object-fit: contain; transform-style: preserve-3d;
    filter: drop-shadow(1px 1px 0px #9a7b00) drop-shadow(2px 2px 0px #806500) drop-shadow(4px 4px 15px rgba(0,0,0,0.9)) drop-shadow(0px 0px 30px rgba(255, 215, 0, 0.5)) sepia(100%) hue-rotate(-35deg) saturate(500%) brightness(130%) contrast(120%);
    animation: rotateLogo 5s linear infinite;
}
@keyframes rotateLogo { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }

/* Langsames, schwebendes Flatter-Bild */
#fly-img {
    position: fixed; z-index: 999; top: 20%; left: -300px; width: 250px; pointer-events: none;
}
.fly-active {
    animation: flutterFly 20s ease-in-out infinite;
}
@keyframes flutterFly {
    0% { transform: translate(0vw, 0vh) rotate(-15deg) scale(0.8); }
    25% { transform: translate(40vw, 15vh) rotate(10deg) scale(1.1); }
    50% { transform: translate(80vw, -10vh) rotate(-5deg) scale(0.9); }
    75% { transform: translate(40vw, 20vh) rotate(15deg) scale(1.2); }
    100% { transform: translate(120vw, 0vh) rotate(-10deg) scale(0.8); }
}

/* Flachbildfernseher */
.tv-monitor { position: relative; width: 90%; max-width: 800px; background: #1a1a1a; border: 3px solid #333; border-radius: 10px; padding: 15px 15px 35px 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.9), inset 0 0 5px rgba(255,255,255,0.2); margin: 0 auto; }
.tv-screen { background: #000; width: 100%; border-radius: 3px; overflow: hidden; position: relative; border: 2px solid #0a0a0a; box-shadow: inset 0 0 20px #000; }
.tv-screen video { width: 100%; height: auto; display: block; filter: contrast(1.1) brightness(1.1); }
.tv-brand { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: #666; font-family: Arial; font-size: 10px; letter-spacing: 2px; }
.tv-power-led { position: absolute; bottom: 12px; right: 20px; width: 6px; height: 6px; background: red; border-radius: 50%; box-shadow: 0 0 5px red; }
.tv-stand-neck { width: 60px; height: 30px; background: linear-gradient(to right, #111, #333, #111); margin: 0 auto; border-left: 2px solid #000; border-right: 2px solid #000; }
.tv-stand-base { width: 250px; height: 15px; background: linear-gradient(to bottom, #444, #111); margin: 0 auto; border-radius: 10px 10px 0 0; box-shadow: 0 5px 15px rgba(0,0,0,0.8); }

/* Pi Link */
.admin-link { position: fixed; bottom: 15px; right: 15px; color: #fff; font-size: 28px; text-decoration: none; z-index: 1000; font-weight: bold; font-family: Arial; animation: shimmerPi 4s infinite alternate, sparklePi 1.5s infinite ease-in-out; }
@keyframes shimmerPi { 0% { color: #ffffff; text-shadow: 0 0 10px #fff, 0 0 20px #fff; } 50% { color: #fff0f5; text-shadow: 0 0 10px #fff0f5, 0 0 30px #ffb6c1; } 100% { color: #ffffff; text-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 60px #e0e0ff; } }
@keyframes sparklePi { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(3deg); } }

/* =========================================
   UPGRADE V5: RIESIGES FLATTER-BILD (640px)
   ========================================= */
#fly-img {
    width: 640px !important;
}

/* =========================================
   UPGRADE V7: C64 PIXEL & CRT RÖHRENEFFEKT
   ========================================= */
#crt-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999;
    pointer-events: none; /* Klicks gehen durch! */
    background: 
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
        linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

/* Der Wargames Bildschirm bekommt einen leichten Glow und fette Pixel-Schrift */
#wargames-screen {
    font-weight: bold;
    text-shadow: 0 0 3px #55ff55, 0 0 8px #55ff55;
    image-rendering: pixelated; /* Macht Ränder hart / pixelig */
}
/* =========================================
   UPGRADE V9: HANGMAN LAYOUT & GAME CSS
   ========================================= */
#wargames-screen {
    flex-direction: row !important; /* Spalten statt untereinander */
    justify-content: space-between;
}
#terminal-section {
    flex: 1;
    max-width: 60%;
}
#hangman-section {
    width: 350px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 50px;
}
#hangman-canvas {
    background: rgba(0, 50, 0, 0.2);
    border: 2px solid #33aa33;
    box-shadow: inset 0 0 10px #000;
}

/* =========================================
   UPGRADE V10: HANGMAN FIX & MOBILE DESIGN
   ========================================= */
#hangman-canvas {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Mobile Touch Buttons */
.mbtn {
    background: rgba(85, 255, 85, 0.2);
    border: 2px solid #55ff55;
    color: #55ff55;
    font-size: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.mbtn:active { background: #55ff55; color: #000; }
.btn-action { border-radius: 10px; width: 80px; }
.btn-esc { background: rgba(255, 0, 0, 0.2); border-color: red; color: red; border-radius: 10px; width: 80px; }
.btn-esc:active { background: red; color: #fff; }

/* Responsive Media Queries */
@media (max-width: 900px) {
    #wargames-screen { flex-direction: column !important; justify-content: flex-start; overflow-y: auto; }
    #terminal-section { max-width: 100%; width: 100%; min-height: 50vh; }
    #hangman-section { width: 100%; padding-top: 20px; }
    .desktop-hint { display: none !important; }
    #mobile-controls { display: flex !important; }
    
    #game-title { font-size: 1.5rem !important; margin-top: 20px; }
    .logo-container { width: 100% !important; height: auto !important; }
    .gold-3d-logo { width: 80% !important; height: auto !important; }
    .tv-monitor { width: 95%; padding: 5px 5px 20px 5px; }
}