/* 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;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
           env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Canvas sizes itself to fit available area while keeping its aspect
   ratio. We pick the limiting dimension via min(): the smaller of
   "all the width we have" and "all the height we have, scaled to width
   via the aspect ratio". */
#game {
  display: block;
  /* Fallback for older Safari (< iOS 15.4) without aspect-ratio:
     give the canvas a real height directly. The 92.5vw width pairs
     with 100vh height on portrait, gives a visibly square-ish view. */
  width:  min(100vw, calc(100vh * 768 / 830));
  height: min(100vh, calc(100vw * 830 / 768));
  /* Modern browsers override with aspect-ratio-driven sizing. */
  aspect-ratio: 768 / 830;
  width:  min(100%, calc(100dvh * 768 / 830));
  height: auto;
  max-width:  100%;
  max-height: 100%;
  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 should not exceed the available pane along
   the layout's main axis. The other-axis dimension is governed by
   aspect-ratio so it auto-shrinks. */
@media (orientation: landscape) {
  body.editor-mode #game {
    /* Reserve 280px on the right for the palette */
    max-width:  calc(100vw - 280px - env(safe-area-inset-left, 0) - env(safe-area-inset-right, 0));
    width:  min(100%, calc(100vh * 768 / 830));   /* fallback */
    width:  min(100%, calc(100dvh * 768 / 830));
  }
}
@media (orientation: portrait) {
  body.editor-mode #game {
    /* Reserve 280px at the bottom for the palette */
    max-height: calc(100vh - 280px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));   /* fallback */
    max-height: calc(100dvh - 280px - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0));
    width: min(100%, calc((100vh - 280px) * 768 / 830));   /* fallback */
    width: min(100%, calc((100dvh - 280px) * 768 / 830));
  }
}

#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 — fixed top-left, doesn't get in the way of the canvas
   center or the palette panel. */
.toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  pointer-events: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 20;
  max-width: calc(100vw - 16px);
}
.toolbar button {
  background: #111;
  border: 1px solid #555;
  color: #eee;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border-radius: 4px;
  min-height: 36px;
  min-width: 36px;
}
.toolbar button:active { background: #333; }

/* Palette panel — anchored opposite the canvas:
   - landscape: right side, full height under the toolbar
   - portrait:  bottom edge, full width */
.palette {
  position: absolute;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid #f0c040;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  overflow: auto;
  z-index: 20;
}
@media (orientation: landscape) {
  .palette {
    top: 60px;
    right: 8px;
    bottom: 8px;
    width: 264px;
  }
}
@media (orientation: portrait) {
  .palette {
    left: 8px;
    right: 8px;
    bottom: 8px;
    height: 264px;
  }
}
.palette button {
  width: 56px;
  height: 56px;
  background: #111;
  border: 1px solid #444;
  color: #eee;
  font: inherit;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
  position: relative;
}
.palette button .key {
  position: absolute;
  top: 2px;
  left: 4px;
  color: #4ec0d0;
  font-size: 10px;
}
.palette button.active {
  background: #443300;
  border-color: #f0c040;
  color: #fff;
}
.palette button .icon {
  width: 28px;
  height: 28px;
}

.hidden-file { display: none; }