/* LA PELEA DEL CHIVO — game-page styles.
   Everything scoped under #game-root: site style.css has a global
   `* { background-color: #211a1e; }` that would otherwise paint every
   element; we re-override with transparent/explicit backgrounds here. */

#game-root,
#game-root * {
  background-color: transparent;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game-root {
  position: relative;
  width: 100%;
  touch-action: none;
  overscroll-behavior: none;
}

#game-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 28px; /* breathing room between page top / header and the screen */
  background-color: #000;
}

#game-canvas {
  display: block;
  background-color: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Touch controls: a bar that overlays the bottom of the stage in
   landscape/desktop, and sits below the canvas (Game Boy style) in
   portrait. Buttons populated by input.js only on touch devices. */
#touch-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 12px;
  pointer-events: none; /* touches hit-tested in JS via coordinates */
  z-index: 10;
}

#touch-left,
#touch-right {
  display: none;
}

/* d-pad cross */
#touch-left.touch-active {
  display: grid;
  grid-template-areas:
    '.    up    .'
    'left .     right'
    '.    down  .';
  gap: 6px;
}

/* action buttons 2x2 */
#touch-right.touch-active {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
}

#touch-left .touch-btn {
  width: 54px;
  height: 54px;
  font-size: 18px;
}

#touch-right .touch-btn {
  font-size: 28px; /* emoji buttons */
}

#game-root .touch-btn {
  width: 64px;
  height: 64px;
  border: 2px solid #E86A92;
  border-radius: 50%;
  background-color: rgba(33, 26, 30, 0.5);
  color: #ffedfb;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* hit-testing is done in JS via coordinates */
}

#game-root .touch-btn.active {
  background-color: rgba(255, 29, 66, 0.55);
  border-color: #edf060;
}

/* ---- Phone-ish screens: game takes the full viewport ---- */
@media (max-height: 580px), (max-width: 700px) {
  #game-stage {
    height: 100dvh;
  }
}

/* Collapse the site header on short landscape screens so the arena
   gets the vertical space (phones in landscape). */
@media (max-height: 580px) and (orientation: landscape) {
  body:has(#game-root) h1.title,
  body:has(#game-root) #ascii-border-top,
  body:has(#game-root) nav,
  body:has(#game-root) .content {
    display: none;
  }
}

/* Portrait phones: Game Boy layout — screen on top, controls below */
@media (orientation: portrait) and (max-width: 700px) {
  body:has(#game-root) h1.title,
  body:has(#game-root) #ascii-border-top,
  body:has(#game-root) nav,
  body:has(#game-root) .content {
    display: none;
  }
  #game-stage {
    flex-direction: column;
    justify-content: flex-start;
    height: 100dvh;
  }
  #touch-bar {
    position: static;
    flex: 1;
    align-items: center;
    width: 100%;
    padding: 16px 16px 0; /* nudge controls down a bit from the screen */
  }
  #touch-left .touch-btn {
    width: 58px;
    height: 58px;
  }
}