/* --- GLOBAL TYPOGRAPHY & TRANSITIONS --- */
/* === REGISTRO DE FUENTES === */
@font-face {
    font-family: 'New Rocker Descargada';
    src: url('./assets/fonts/NewRocker-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Courier New', Courier, monospace;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === APLICAR SOLO AL TÍTULO === */
h1 {
    font-family: 'New Rocker Descargada', cursive;
    font-weight: normal;
    letter-spacing: 1px; 
}

/* === LIGHT MODE (Default: Bone Paper) === */
[data-bs-theme="light"] {
    --bs-body-bg: #f4f1ea;    
    --bs-body-color: #1a1a1a;  
    --border-color: #1a1a1a;
    --game-accent-color: #0088cc;
}

/* === DARK MODE (E-Ink Night) === */
[data-bs-theme="dark"] {
    --bs-body-bg: #151617;    
    --bs-body-color: #e3e4e5;  
    --border-color: #3a3d40;
    --game-accent-color: #00ffcc;
}

/* --- CANVAS CONTAINER CONTAINER --- */
#canvas-container {
    width: 90vw;     /* Ocupará el 90% del ancho de la pantalla */
    max-width: 1400px; /* Un límite máximo para monitores gigantes */
    height: 75vh;    /* Ocupará el 75% del alto de la pantalla en escritorio */
    background-color: var(--bs-body-bg);
    border: 3px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transition: border-color 0.3s ease;
    position: relative; /* 📱 Necesario para posicionar la UI y el botón fullscreen dentro */
    overflow: hidden;
}

/* 📱 Ajuste automático a pantalla completa real en móviles */
#canvas-container:fullscreen,
#canvas-container:-webkit-full-screen,
#canvas-container:-moz-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    border: none !important;
}

/* --- INK BUTTON STYLE --- */
.btn-ink {
    background-color: transparent;
    color: var(--bs-body-color);
    border: 2px solid var(--bs-body-color);
    border-radius: 0px;
    font-weight: bold;
    transition: all 0.2s ease;
}

.btn-ink:hover {
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg);
}