/* style.css — full-bleed layout that works in landscape and portrait.
   The canvas's internal pixel buffer is fixed (config.js's SCREEN_W ×
   SCREEN_H). CSS scales it to fit the viewport while preserving the
   ~768:830 aspect ratio so the playfield always looks square.

   Layout strategy: body is a flex container. Canvas takes whatever
   space is available, sized with aspect-ratio + max-width/max-height.
   In editor mode, body becomes a row (landscape) or column (portrait)
   that splits its space between the canvas and a palette panel. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width:  100vw;
  height: 100vh;          /* fallback for browsers without dvh */
  height: 100dvh;
  background: #000;
  color: #eee;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Safe-area insets keep the canvas clear of the iPhone notch and
     home indicator. On iOS standalone PWAs the reported insets can
     under-report (sometimes 0 even when there IS a notch), so we
     enforce a generous minimum on the long edges of landscape phones
     where notches sit. The minima below are tuned so the canvas
     never overlaps the dynamic island, the home indicator, or the
     status bar in any orientation. */
  padding-top:    max(20px, env(safe-area-inset-top, 0));
  padding-right:  max(20px, env(safe-area-inset-right, 0));
  padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
  padding-left:   max(20px, env(safe-area-inset-left, 0));
  box-sizing: border-box;
}

/* PWA modes (minimal-ui / standalone / fullscreen) bump the safe-area
   floor a little above the in-Safari default so the canvas never sits
   flush against the screen edge. We rely on env(safe-area-inset-*) for
   actual notch-clearing — minimal-ui keeps a real system-managed status
   bar zone, which means iOS reports accurate insets here (unlike
   standalone/fullscreen where the inset can spuriously be 0). */
@media (display-mode: minimal-ui),
       (display-mode: standalone),
       (display-mode: fullscreen) {
  body {
    padding-top:    max(20px, env(safe-area-inset-top,    0));
    padding-right:  max(20px, env(safe-area-inset-right,  0));
    padding-bottom: max(28px, env(safe-area-inset-bottom, 0));
    padding-left:   max(20px, env(safe-area-inset-left,   0));
  }
}

/* Canvas sizes itself to fit the available viewport while preserving
   its aspect ratio. The aspect-ratio is set INLINE by main.js based on
   orientation (968x768 landscape, 768x968 portrait), so no orientation
   media-queries are needed here. We just make sure both width and
   height are capped to the viewport so it always letterboxes neatly. */
#game {
  display: block;
  /* Width and height are set inline by main.js (px values that
     preserve the orientation-specific aspect ratio while fitting the
     viewport). This CSS rule just provides safe defaults. */
  max-width:  100vw;
  max-height: 100vh;
  max-height: 100dvh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  touch-action: none;
}

/* In editor mode body becomes a row in landscape / column in portrait
   so the palette can claim its own space alongside the canvas. */
body.editor-mode {
  flex-direction: column;
  gap: 6px;
}
@media (orientation: landscape) {
  body.editor-mode { flex-direction: row; }
}

/* In editor mode the canvas keeps its usual aspect-ratio scaling —
   the toolbar floats above the canvas's HUD strip without consuming
   layout space. */

#overlay {
  position: absolute;
  inset: 0;
  /* Always pointer-events:none; only specific children (.palette,
     .toolbar) re-enable pointer-events on themselves. The canvas
     underneath must receive pointerdown for the editor's tile painting
     to work, so the overlay itself must NEVER intercept events. */
  pointer-events: none;
  z-index: 10;
}
#overlay .hidden, .hidden { display: none !important; }

/* Editor toolbar — single horizontal row pinned to the playfield's
   column (NOT the full screen). Holds: Back, File popup, Colour
   cycle, then every tile-paint button inline. Black background with
   yellow keyline matches the game HUD aesthetic.
   Position + size are set inline by editor.js based on the canvas's
   live CSS rect, so the bar stays aligned with the playfield in any
   viewport / letterbox configuration. */
.editor-tools {
  position: fixed;       /* coordinates are in viewport pixels */
  background: transparent;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  padding: 4px;
  pointer-events: auto;
  z-index: 25;
  overflow-x: auto;
  box-sizing: border-box;
}
.editor-tools button {
  background: #1a1a1a;
  border: 1.5px solid #f0dc28;
  color: #f0dc28;
  padding: 4px 14px;
  font: inherit;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  flex: 1 1 auto;
  min-width: 80px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
  white-space: nowrap;
}
.editor-tools .palette-toggle {
  background: #1a1a1a;
}
.editor-tools button:hover  { background: #2a2a2a; }
.editor-tools button:active { background: #3a3a3a; }
.editor-tools button.active {
  background: #443300;
  border-color: #f0c040;
  color: #fff;
}
.editor-tools button .icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.editor-tools button .name {
  font-size: 8px;
  font-weight: 600;
  color: #c0c0c0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.editor-tools .sep {
  width: 2px;
  background: #f0dc2840;
  margin: 4px 2px;
}

/* File-action popup menu (New / Load / Upload / Download / Save as /
   Rename / Playtest), rendered when the user clicks the "File" button. */
.editor-file-menu {
  position: absolute;
  top: 92px;
  background: #101010;
  border: 2px solid #f0dc28;
  border-radius: 4px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
  pointer-events: auto;
  min-width: 180px;
}
.editor-file-menu button {
  background: #1a1a1a;
  border: 1px solid #555;
  color: #eee;
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
}
.editor-file-menu button:hover { background: #2a2a2a; border-color: #f0dc28; }

.hidden-file { display: none; }