/* Viewport Styling */
/* Responsibilities: Global canvas centering, responsive scaling, and background asset management. */

/* 1. GLOBAL RESET & VIEWPORT CONFIGURATION */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevents scrollbars during state transitions */
  background-color: #111; /* Fallback deep-tone color */
  
  /* LAYER: BROWSER BACKGROUND (The "Underlay") */
  /* Contributor: Aesthetic Designer (Lucca) */
  background-image: url('assets/background/bbg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* LAYOUT: CENTRAL ALIGNMENT */
  /* Using Flexbox to ensure the game stays centered regardless of window resizing */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  font-family: sans-serif; /* Fallback font for system logs */
}

/* 2. CANVAS CONTAINER: THE "INNER FRAME" */
/* Acts as a constraint to reveal the background image beneath */
#canvas-container {
  /* Dynamic constraints based on viewport percentage */
  max-width: 75vw;  
  max-height: 75vh; 
  
  /* ASPECT RATIO: Enforces the 16:9 standard used in GLOBAL_CONFIG */
  aspect-ratio: 16 / 9;
  
  /* Logical centering for the child <canvas> element */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Visual depth for the game border */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  background-color: #000; /* Prevents flickering during scene load */
}

/* 3. P5.JS CANVAS ELEMENT */
/* Forces the p5.js renderer to respect the parent container's dimensions */
canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 100%;
  object-fit: contain; /* Prevents pixel stretching or aspect ratio distortion */
  border-radius: 4px;  /* Slight rounding for a polished UI finish */
}

/* 4. DOM OVERLAYS (Legacy or Hidden Elements) */
.game-title, .game-info {
  display: none;
}

/* 5. HTML LOADING SCREEN (shown before p5.js initialises) */
#html-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  /* Own copy of bbg.png so the overlay blocks the canvas until the rAF-controlled
     fade actually fires. Browser caches the image so no extra network cost. */
  background: url('assets/background/bbg.png') center / cover no-repeat, rgb(20, 10, 35);
  z-index: 999;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}

#html-loading .hl-logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 16px;
  animation: html-breathe 2s ease-in-out infinite;
}

/* Progress bar row: track + percentage label */
/* margin-top reserves vertical space for the iris sprite (64px) above the bar */
#html-loading .hl-bar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(820px, 78vw);
  margin-top: 50px;
}

/* Track is a flex row of 25 segments; iris is absolute on top */
#html-loading .hl-bar-track {
  flex: 1;
  height: 22px;
  display: flex;
  gap: 5px;
  position: relative;
  overflow: visible;
}

/* Individual pixel segment — matches p5.js drawLoadingProgressBar style */
#html-loading .hl-seg {
  flex: 1;
  height: 100%;
  background: rgba(255, 216, 0, 0.1);
  border: 1px solid rgba(255, 216, 0, 0.18);
  border-radius: 2px;
}

#html-loading .hl-seg.filled {
  background: rgba(255, 216, 0, 0.9);
  border: none;
}

/* White highlight strip on top of filled segments, like the p5.js version */
#html-loading .hl-seg.filled::after {
  content: '';
  display: block;
  height: 3px;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 1px;
}

/* Iris sprite running at the leading edge of the bar */
#html-loading .hl-iris {
  position: absolute;
  width: 64px;
  height: 64px;
  bottom: 100%;  /* sits directly above the bar, not inside it */
  left: 0%;
  transform: translateX(-32px); /* centre sprite on the leading edge pixel */
  background-image: url('assets/characters/sprite_frames/sprite_sheets/spritesheet_east.png');
  background-size: 320px 64px;  /* 1280×256 → 320×64  (5 frames × 64 px) */
  animation: hl-iris-run 0.48s steps(5) infinite;
  image-rendering: pixelated;
}

#html-loading .hl-pct {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(10px, 1.1vw, 15px);
  color: rgba(255, 216, 0, 0.85);
  white-space: nowrap;
  min-width: 44px;
  text-align: right;
}

@keyframes hl-iris-run {
  from { background-position: 0 0; }
  to   { background-position: -320px 0; }
}

@keyframes html-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1.0); }
  50%       { opacity: 1.0; transform: scale(1.05); }
}