/* css/style.css - CLEAN & STABLE VERSION (Unconditional Nav & Centered Logo) */

body, html {
    margin: 0;
    padding: 0;
    /* FIX: Ensure the body/html width is not constrained to the viewport to allow 3000px content */
    min-width: 3000px; 
    
    /* Allow scrolling on ALL devices */
    overflow: auto; 
    overflow-x: auto; 
    
    font-family: 'Courier New', Courier, monospace;
    background-color: #fdfdfd;
}

header#main-header {
    position: fixed; top: 0; left: 0; width: 100%; height: 90px;
    background-color: #ffffff; border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); z-index: 1000;
    
    /* FIX: Centering the header content */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    
    box-sizing: border-box; cursor: default; user-select: none;
}

.header-content {
    /* FIX: Centering the logo within this container */
    display: flex;
    align-items: center;
    justify-content: center; 
    width: 100%;
    max-width: 1200px;
    height: 100%;
}

.logo { font-weight: bold; font-size: 32px; color: #222; letter-spacing: -2px; }

canvas#drawing-board {
    display: block;
    width: 3000px; 
    height: 6000px; 
    position: absolute; top: 0; left: 0; z-index: 10;
}

#paper-container {
    width: 3000px;
    height: 6000px; 
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 32 32"><path fill="%23002395" d="M0 32 L4 20 L12 12 L20 4 L28 0 L32 4 L28 12 L20 20 L12 28 L0 32 Z M 10 26 L 6 26 L 8 20 L 14 14 L 18 18 L 12 24 L 10 26 Z" /></svg>') 0 32, auto;
}

#footer-safe {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(255, 255, 255, 0.95); border-top: 1px solid #ddd;
    font-size: 11px; color: #888; text-align: center; padding: 8px;
    z-index: 2000; pointer-events: none;
}

/* MOBILE NAVIGATION (The Buttons) - ALWAYS Displayed */
#mobile-nav { 
    display: block; /* Ensure the main wrapper is visible */
    z-index: 3000;
} 

/* Apply fixed positioning globally */
.nav-top, .nav-bottom { 
    /* We don't need to hide these, but they are unnecessary wrappers */
    display: flex; 
    justify-content: space-between;
    width: 100%;
} 

#btn-up    { position: fixed; top: 100px; left: 20px; }  /* Top Left */
#btn-down  { position: fixed; top: 100px; right: 20px; } /* Top Right */
#btn-left  { position: fixed; bottom: 50px; left: 20px; } /* Bottom Left */
#btn-right { position: fixed; bottom: 50px; right: 20px; } /* Bottom Right */

.nav-btn {
    pointer-events: auto; width: 60px; height: 60px;
    background: rgba(255, 255, 255, 0.8); border: 2px solid #ccc;
    border-radius: 50%; font-size: 24px; color: #333;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 3001; 
    /* Stability Fix: Prevents zoom delay/confusion on mobile tap */
    touch-action: manipulation; 
}

.nav-btn:active {
    background: #002395; color: white; border-color: #002395;
}