/* ============================================================
   Crash Bandicoot — Edición Web · minimalista
   Solo el juego. Nada más en pantalla.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
   margin: 0;
   height: 100%;
   background: #000;
   overflow: hidden;                 /* sin scroll: solo el juego */
   font-family: system-ui, "Segoe UI", Roboto, sans-serif;
}

/* El juego ocupa la ventana manteniendo el 4:3 original de PS1 */
#canvas {
   position: fixed;
   inset: 0;
   margin: auto;                                  /* centrado */
   width: min(100vw, calc(100vh * 4 / 3));        /* letterbox automático */
   height: min(100vh, calc(100vw * 3 / 4));
   image-rendering: pixelated;       /* píxeles nítidos, como la PS1 */
   background: #000;
   outline: none;
   display: block;
}

/* Único añadido: la carga mientras arranca */
.boot {
   position: fixed;
   inset: 0;
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   background: #000;
   transition: opacity 0.5s ease;
}
.boot.done { opacity: 0; pointer-events: none; }

.boot-bar {
   width: min(300px, 70vw);
   height: 3px;
   background: #1c1c22;
   border-radius: 99px;
   overflow: hidden;
}
.boot-bar-fill {
   height: 100%;
   width: 0%;
   background: #f2b90d;
   border-radius: 99px;
   transition: width 0.25s ease;
}
.boot-status {
   color: #8a8a96;
   font-size: 12px;
   letter-spacing: 0.1em;
}
.boot-actions { margin-top: 4px; }

/* Botón (solo aparece si falta el juego) */
.btn {
   appearance: none;
   cursor: pointer;
   background: #2a2550;
   color: #fff;
   border: 1px solid #453d80;
   border-radius: 8px;
   padding: 9px 16px;
   font-size: 13px;
   font-weight: 600;
}
.btn:hover { filter: brightness(1.2); }