/* Design tokens (--bg, --fg, --accent, --panel, --border, collision
   palette) + base body + shared `.gb-shell-*` header styles live in
   /shared/shell.css, loaded before this stylesheet. Per-page rules
   here only need to reference the tokens via var(). */

/* The in-page sub-tab toolbar — Map / Portals / Run tabs + the map
   picker. Sits directly below the shared header. */
.maps-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.tab-nav {
  display: flex;
  gap: 4px;
}

.tab-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-bottom: 2px solid transparent;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.tab-btn:hover {
  background: #333;
}

.tab-btn.active {
  background: var(--panel);
  border-bottom-color: var(--accent);
  color: var(--accent);
}

.map-picker-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.map-picker-wrap select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-family: inherit;
  font-size: 13px;
}

/* Anchor banner + portal-related styles moved to /portals/style.css in
   Phase B2b — Maps page no longer hosts portal authoring. */

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.layer-toggles {
  border: 1px solid var(--border);
  padding: 2px 8px;
  display: flex;
  gap: 8px;
}

.layer-toggles legend {
  font-size: 11px;
  color: #999;
  padding: 0 4px;
}

.layer-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  vertical-align: middle;
  margin-right: 2px;
}

.swatch.walkable    { background: var(--collision-walkable); }
.swatch.unwalkable  { background: var(--collision-unwalkable); }
.swatch.ladder      { background: var(--collision-ladder); }
.swatch.ladder-top  { background: var(--collision-ladder-top); }
.swatch.cloud       { background: var(--collision-cloud); }
/* Slope swatches: clip-path produces a triangle matching the canvas
   rendering. up_left = lower-left triangle (solid below a top-left →
   bottom-right surface line); up_right = lower-right triangle (solid
   below a bottom-left → top-right surface line). */
.swatch.slope-up-left {
  background: var(--collision-slope-up-left);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.swatch.slope-up-right {
  background: var(--collision-slope-up-right);
  clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

/* Shared button visual — Edit toggle + Run-tab buttons. Sign in +
   Apply live in the shared shell (/shared/shell.css). Portal panel
   buttons moved to /portals/style.css in B2b. */
#edit-toggle,
#run-build, #run-play, #run-download {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

#edit-toggle:hover,
#run-build:hover:not(:disabled),
#run-play:hover:not(:disabled),
#run-download:hover:not(:disabled) {
  background: #333;
}

#edit-toggle.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

#run-build:disabled,
#run-play:disabled,
#run-download:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Vertical paint palette — left of the canvas in the Map tab. One
   button per row so labels stay readable; the palette only appears
   when edit mode is on (JS toggles the `hidden` attribute). */
.palette {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 12px;
  width: 170px;
  align-self: flex-start;
}

.palette-label {
  color: #999;
  font-size: 11px;
  margin-right: 4px;
}

.palette-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}

.palette-btn:hover {
  background: #333;
}

.palette-btn.selected {
  border-color: var(--accent);
  background: #2a3a25;
}

.palette-btn .swatch {
  margin-right: 0;
}

body.edit-mode #map-canvas {
  cursor: cell;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tab-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.map-body {
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
}

#map-canvas {
  /* The on-disk PNG is 256x256 (32×32 tiles). Scale up 2x for
     comfortable inspection without losing pixel alignment. */
  width: 512px;
  height: 512px;
  image-rendering: pixelated;
  background: #000;
  border: 1px solid var(--border);
  cursor: crosshair;
}

#tile-info {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 12px 16px;
  min-width: 240px;
  font-size: 12px;
  line-height: 1.6;
}

#tile-info dl {
  margin: 0;
}

#tile-info dt {
  color: #999;
  font-size: 11px;
  margin-top: 6px;
}

#tile-info dt:first-child {
  margin-top: 0;
}

#tile-info dd {
  margin: 0 0 0 8px;
}

/* Portal panel + anchor-mode + status-line modifier styles lifted to
   /portals/style.css in Phase B2b — Maps page no longer hosts portal
   authoring. The .run-status modifiers stay below since the Run tab
   uses them. */
.run-status.error   { color: #ff6b6b; }
.run-status.success { color: var(--accent); }
.run-status.working { color: #d4b85a; }

/* ============================================================
   Run tab — emulator embed
   ============================================================ */

.tab-pane[data-tab="run"] {
  padding: 20px;
  align-items: center;
}

.run-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 720px;
}

/* Button visuals (#run-build, #run-play) ride on the shared selector
   list near the top of the file. Modifier colors (.error/.success/
   .working) live in the .run-status block above. */
.run-mute {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}

.run-status {
  flex: 1;
  font-size: 12px;
  color: #aaa;
}

.run-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 720px;
}

#emu-canvas {
  /* Native GB resolution is 160x144. Scale 3x for comfortable viewing
     without losing pixel alignment. image-rendering: pixelated keeps
     each emulator pixel a crisp 3x3 block. */
  width: 480px;
  height: 432px;
  image-rendering: pixelated;
  background: #000;
  border: 1px solid var(--border);
  /* Focus outline doubles as a "click me to capture input" hint —
     binjgb's keyboard listeners are window-scoped but the canvas is
     the visual target. */
  outline: none;
}

.run-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 2px;
  margin: 0;
  font-size: 11px;
  color: #aaa;
  width: 100%;
  max-width: 280px;
}

.run-controls dt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--fg);
  text-align: right;
}

.run-controls dd {
  margin: 0;
}

.run-log-wrap {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 10px;
  font-size: 12px;
}

.run-log-wrap summary {
  cursor: pointer;
  color: var(--fg);
  opacity: 0.85;
  user-select: none;
}

#run-log {
  margin: 8px 0 0 0;
  padding: 8px;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
  border-radius: 2px;
}