/* =========================================
   1. GLOBAL RESET & LAYOUT
   ========================================= */

/* Ensure the game takes up the full window */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrolling (the game is fixed) */
    background-color: #000; /* Deep black background */
    color: #eee; /* Light gray text for readability */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overscroll-behavior: none;
}

/* Flexbox layout to center the game canvas vertically and horizontally */
body {
    display: flex;
    flex-direction: column; /* Stack elements: Bar -> Header -> Canvas */
    align-items: center;    /* Center horizontally */
    justify-content: center;/* Center vertically */
    padding-top: 10px;      /* Add padding equal to Top Bar height so nothing is hidden */
    box-sizing: border-box; /* Include padding in width/height calculations */
}

/* =========================================
   2. TOP UI BAR (Container)
   ========================================= */

/* The fixed strip at the top of the screen */
#top-ui-bar {
    position: fixed; /* Stays at the top even if window resizes */
    top: 0;
    left: 0;
    width: 100%;
    height: 55px; /* Fixed height */
    
    background-color: rgba(10, 10, 10, 0.95); /* Nearly opaque dark gray */
    border-bottom: 0px solid #333; /* Subtle border to separate from game */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); /* Drop shadow for depth */
    
    display: flex; /* Flex layout to align Input, Ticker, and Button */
    align-items: center; /* Vertically center items */
    justify-content: space-between; /* Spread items across the width */
    
    padding: 0 15px; /* Spacing on left and right edges */
    box-sizing: border-box;
    z-index: 2000; /* Ensure this is ALWAYS on top of everything */
}

/* =========================================
   3. TOP BAR ELEMENT: CHEAT INPUT (Left)
   ========================================= */

#cheatInput {
    position: static; /* Let Flexbox handle the position */
    width: 200px;     /* Fixed width */
    padding: 8px 12px;
    
    background-color: #222; /* Dark input background */
    color: white;            
    border: 1px solid #555;
    border-radius: 4px;     /* Rounded corners */
    font-size: 14px;
    margin-right: 15px; /* Space between input and ticker */
    transition: border-color 0.2s;
}

/* Highlight border when typing */
#cheatInput:focus {
    outline: none;
    border-color: white;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
}

#cheatInput::placeholder {
    color: #aaa;
    font-style: italic;
    font-family: sans-serif;
}

/* =========================================
   4. TOP BAR ELEMENT: DONOR TICKER (Middle)
   ========================================= */

/* The container that holds the scrolling text */
.donor-ticker-wrap {
    flex-grow: 1;
    
    /* DESKTOP HEIGHT */
    height: 32px; 
    
    background-color: #111; /* Slightly lighter than bar background */
    border: 1px solid #333;
    border-radius: 4px;
    
    overflow: hidden; /* Hide text that scrolls outside this box */
    position: relative;
    display: flex;
    align-items: center;
    
    /* CSS Mask: Fades the text out at the left and right edges for a premium look */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* The actual moving text element */
.donor-ticker {
    display: flex;
    white-space: nowrap; /* Prevent text wrapping */
    padding-left: 100%;  /* Start animation from off-screen right */
    
    /* Animation definition */
    animation: ticker-scroll 150s linear infinite;  
    
    color: #ccc;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Special styling for the separator dot or star */
.donor-ticker .separator {
    color: #FF424D; /* Patreon Red accent */
    margin: 0 15px; /* Spacing between names */
}

/* Special styling for "Supporters" label */
.donor-ticker .gold-text {
    color: #FFD700; /* Gold */
    text-shadow: 0 0 2px rgba(255, 215, 0, 0.5);
    margin-right: 5px;
}

/* Pause the scrolling when hovering over names (Optional, remove if unwanted) */
.donor-ticker-wrap:hover .donor-ticker {
    animation-play-state: paused;
}

/* --- TICKER INTERACTIVE BUTTONS --- */
.ticker-btn {
    color: white !important;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 10px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.1s, background-color 0.1s;
    pointer-events: auto; /* CRITICAL for clicking */
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
}

.ticker-btn:hover { transform: scale(1.05); filter: brightness(1.2); }
.ticker-btn:active { transform: scale(0.95); }

/* Colors */
.btn-blue    { background-color: #007bff; } /* Help */
.btn-teal    { background-color: #17a2b8; } /* Updates */
.btn-green   { background-color: #28a745; } /* Save */
.btn-orange  { background-color: #fd7e14; } /* Load */
.btn-discord { background-color: #5865F2; } /* Discord Purple */

/* =========================================
   5. TOP BAR ELEMENT: PATREON BUTTON (Right)
   ========================================= */

#patreonBtn {
    position: static; /* Let Flexbox handle position */
    margin-left: 20px; /* Space between ticker and button */
    
    background-color: #850101; /* Official Patreon Red */
    color: #fff;
    
    padding: 8px 20px;
    border-radius: 20px; /* Pill shape */
    border: 2px solid rgba(255,255,255,0.2);
    
    text-decoration: none; 
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap; /* Keep text on one line */
    
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Hover effects */
#patreonBtn:hover {
    background-color: #E0303B;
    transform: scale(1.05); /* Slightly grow */
    border-color: #fff;
    box-shadow: 0 4px 8px rgba(255, 66, 77, 0.4);
}

/* =========================================
   6. NOTIFICATION BAR
   ========================================= */

/* The green popup message box */
#notificationBar {
    position: fixed;
    top: 85px; 
    left: 50%;
     transform: translateX(-50%);
    
    /* ADD THIS LINE TO MAKE \n WORK for easter eggs*/
    white-space: pre-wrap;  /* Center perfectly horizontally */
    
    min-width: 300px;
    max-width: 80%;
    
    /* Scroll support for long messages */
    max-height: 300px;      /* Cap height on desktop */
    overflow-y: auto;       /* Scroll if content overflows */
    overflow-x: hidden;     /* Prevent horizontal scroll */
    
    padding: 10px 20px;
    
    background-color: rgba(26, 74, 26, 1); /* Dark Green */
    color: #e0ffe0; /* Light Green Text */
    border: 1px solid #4f8; /* Bright Green Border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    border-radius: 6px;
    
    z-index: 1900; /* Below Top Bar, Above Game */
    display: none; /* Hidden by default */
}

/* Class added by JS to show the bar */
#notificationBar.show-notification {
    display: block;
    animation: fade-in-down 0.3s ease-out;
}

/* =========================================
   7. GAME CANVAS AREA
   ========================================= */

h1 {
    color: #eee;
    margin: 0 0 10px 0;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.8;
}

canvas {
    display: block;
    background-color: #222; /* Fallback color if game doesn't draw bg */
    border: 2px solid #444; /* Subtle frame */
    
    /* Responsive Sizing Logic */
    /* Ensure canvas fits in width */
    max-width: 100%; 
    
    /* Ensure canvas fits in height (Viewport - Top Bar - Padding) */
    max-height: calc(100vh - 100px); 
    
    box-shadow: 0 0 30px rgba(0, 0, 0, 1); /* Deep shadow behind game */
    flex-shrink: 0; /* Prevent flexbox from squishing the canvas */
}

/* =========================================
   8. ANIMATIONS
   ========================================= */

/* Logic for the scrolling text */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Logic for notification pop-in */
@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* =========================================
   9. MOBILE / PHONE MODE (OPTIMIZED)
   ========================================= */

/* 1. Layout Adjustments for Mobile */
body.is-mobile {
    height: 100dvh !important; 
    width: 100vw !important;
    padding-top: 25px !important; /* Increased slightly for better touch targets */
    box-sizing: border-box; 
    justify-content: flex-start;
    overflow: hidden;
    margin: 0;
    background-color: #000;
}

/* Resize Canvas */
body.is-mobile canvas {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    touch-action: none;  
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
    margin: 0;
}

body.is-mobile h1 { display: none; }

/* 2. Top Bar Adaptation */
body.is-mobile #top-ui-bar {
    display: flex !important;
    height: 25px; 
    padding: 0 5px;
    z-index: 3001; 
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
    gap: 5px; /* Adds consistent space between Left/Middle/Right items */
}

/* Shrink Cheat Input */
body.is-mobile #cheatInput {
    width: 110px;
    font-size: 11px;
    padding: 5px;
    margin-right: 5px;
    height: 5px;
}

/* Shrink Patreon Button */
body.is-mobile #patreonBtn {
    padding: 4px 10px; /* Reduced padding to fit height */
    font-size: 9px;
    margin-left: 5px;
    height: 5px; 
    display: flex;
    align-items: center;
}

/* --- TICKER CONTAINER (Mobile) --- */
body.is-mobile .donor-ticker-wrap {
    height: 20px !important; 
    border: none;
    background: rgba(255,255,255,0.05); /* Subtle bg distinction */
    margin: 0;
}

body.is-mobile .donor-ticker {
    font-size: 10px !important;
    line-height: 22px;
    align-items: center;
}

/* --- TICKER BUTTONS (Mobile Scaling) --- */
body.is-mobile .ticker-btn {
    padding: 0 6px !important;
    font-size: 9px !important;
    height: 15px !important;
    line-height: 16px !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    border-width: 0px !important; /* Remove border to save pixels */
}

/* Make separators smaller on mobile */
body.is-mobile .donor-ticker .separator {
    margin: 0 4px !important;
}

/* 3. Hide Top Bar during Gameplay */
body.is-mobile.state-playing #top-ui-bar {
    display: none !important;
}

/* --- Force position for Landscape Mobile (Menu & Game) --- */
body.is-mobile #notificationBar {
    top: 35px !important;  /* Moves bar to top of screen. Change to 30px to lower it. */
    width: 60% !important; /* Keeps it from being too wide on short screens */
}

body.is-mobile.state-playing {
    padding-top: 0 !important;
}

body.is-mobile.state-playing #notificationBar {
    top: 5px !important;
}

/* 4. Very Small Screens (e.g. iPhone SE/Mini Portrait) */
@media (max-width: 370px) {
    /* Hide the ticker entirely if screen is too narrow, prioritize Input + Button */
    body.is-mobile .donor-ticker-wrap {
        display: none;
    }
    body.is-mobile #top-ui-bar {
        justify-content: space-between;
    }
    body.is-mobile #cheatInput {
        width: 120px; /* Give input more space since ticker is gone */
    }
}

/* 5. Mobile Controls Overlay (Joystick) */
#mobile-controls {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 3000;
}

body.is-mobile.state-playing #mobile-controls {
    display: block !important;
}

#joystick-zone {
    position: absolute;
    bottom: 20px; left: 20px;
    width: 140px; height: 140px;
    pointer-events: auto;
}

#joystick-base {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90px; height: 90px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

#joystick-stick {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    background: rgba(0, 255, 255, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.8);
    border-radius: 50%;
}

#mobile-actions {
    position: absolute;
    bottom: 30px; right: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: auto;
    align-items: flex-end;
}

.mobile-btn {
    width: 55px; height: 55px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}

#mobile-ability-btn {
    width: 70px; height: 70px;
    background: rgba(0, 150, 255, 0.4);
    border-color: rgba(0, 255, 255, 0.6);
    font-size: 30px;
    margin-right: 0;
}

/* Portrait Tweaks */
body.is-mobile.is-portrait #joystick-zone { bottom: 100px; left: 20px; }
body.is-mobile.is-portrait #mobile-actions { bottom: 100px; right: 20px; }
body.is-mobile.is-portrait #notificationBar { width: 90% !important; top: 30px !important; }

/* =========================================
   10. VERTICAL / PORTRAIT MODE TWEAKS
   ========================================= */

/* Adjust controls when holding phone vertically */
body.is-mobile.is-portrait #joystick-zone {
    /* Move joystick up a bit to be thumb-reachable in portrait */
    bottom: 80px; 
    left: 20px;
    width: 150px;
    height: 150px;
}

body.is-mobile.is-portrait #mobile-actions {
    /* Move buttons up a bit to match joystick height */
    bottom: 80px; 
    right: 20px;
}

/* Stack buttons tighter in portrait to save width */
body.is-mobile.is-portrait #mobile-actions {
    gap: 10px;
}

/* Adjust Notification Bar for Portrait */
body.is-mobile.is-portrait #notificationBar {
    width: 80% !important; /* Take up more width */
    top: 60px !important;  /* Push down slightly */
}

/* Adjust Canvas for Portrait to ensure it fills height logic */
body.is-mobile.is-portrait canvas {
    object-fit: contain; /* Ensures aspect ratio stays correct without stretching */
}

/* Optional: Make the virtual joystick slightly larger in portrait 
   since we have more vertical screen real estate */
body.is-mobile.is-portrait #joystick-base {
    width: 100px;
    height: 100px;
}