/* sprite-position-editor.css
 * Styling for the "Adjust position" modal (#posModal in game_uploader.html)
 * that auto-opens after a generated sprite is applied to a slot, letting
 * the player nudge it up/down/left/right so its feet actually land on the
 * ground line instead of floating in the frame. Split out from the main
 * page's <style> block purely to keep game_uploader.html from growing any
 * further — see sprite-position-editor.js for the behavior this styles.
 *
 * Reuses game_uploader.html's existing --retro-* custom properties and
 * .modal-overlay / .modal-box / .retro-btn classes for the outer modal
 * chrome, so this file only needs to cover what's specific to the editor
 * itself: the zoomed sprite frame and the nudge pad.
 */

/* ── toolbar: Move / Paint / Erase / Undo ────────────────────────── */
.pos-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.pos-tool-btn.active {
  border-color: var(--retro-glow); background: var(--retro-hi);
  box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-lo), 0 0 0 2px var(--retro-active, #0e4242);
}
#posUndoBtn:disabled { opacity: .45; cursor: default; }

/* ── facing control: which way the character should face ────────────
   Same "active" look as the tool buttons above, kept as its own rule
   since it's a separate button group (see setFacing() in
   sprite-position-editor.js). */
.pos-facing-row {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
}
.pos-facing-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--retro-text); opacity: .8; margin-right: 2px;
}
.pos-face-btn.active {
  border-color: var(--retro-glow); background: var(--retro-hi);
  box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-lo), 0 0 0 2px var(--retro-active, #0e4242);
}

.pos-editor-frame {
  display: flex; justify-content: center; align-items: center;
  margin-top: 10px; padding: 14px;
  background: var(--retro-slot-bg); border: 2px solid var(--retro-lo);
  box-shadow: inset 2px 2px 0 var(--retro-slot-hi), inset -2px -2px 0 var(--retro-slot-lo);
}

#posEditorCanvas {
  display: block; image-rendering: pixelated; touch-action: none;
  cursor: grab; border: 1px solid var(--retro-border);
}
#posEditorCanvas:active { cursor: grabbing; }
/* Cursor hints per tool — set via a class on the canvas itself (see
   setActiveTool() in sprite-position-editor.js) so the pointer always
   matches what a click will actually do. */
#posEditorCanvas.tool-paint, #posEditorCanvas.tool-erase { cursor: crosshair; }
#posEditorCanvas.tool-paint:active, #posEditorCanvas.tool-erase:active { cursor: crosshair; }

/* ── color palette (Paint tool) ──────────────────────────────────── */
.pos-palette {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px;
  background: var(--retro-bg); border: 2px solid var(--retro-lo);
}
.pos-palette[hidden] { display: none; }
.pos-swatch {
  width: 22px; height: 22px; padding: 0; border-radius: 0; cursor: pointer;
  border: 2px solid var(--retro-border); box-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.pos-swatch.selected { outline: 2px solid var(--retro-active, #0e4242); outline-offset: 2px; }
.pos-swatch-custom {
  width: 26px; height: 26px; padding: 0; border: 2px solid var(--retro-border);
  cursor: pointer; background: none;
}

.pos-editor-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 12px;
}

/* 3×3 grid so the arrows land in a compact "+" pad around a center
   "reset" dot, rather than a loose row of buttons. */
.pos-nudge-pad {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  grid-template-rows: repeat(3, 30px);
  gap: 2px;
}
.pos-nudge-pad button {
  padding: 0 !important; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.pos-nudge-up     { grid-column: 2; grid-row: 1; }
.pos-nudge-left    { grid-column: 1; grid-row: 2; }
.pos-nudge-center  { grid-column: 2; grid-row: 2; opacity: .6; }
.pos-nudge-right   { grid-column: 3; grid-row: 2; }
.pos-nudge-down    { grid-column: 2; grid-row: 3; }

.pos-offset-label {
  margin: 0 !important; min-width: 88px;
  font: 700 12px ui-monospace, Menlo, Consolas, monospace;
  color: var(--retro-text);
}

/* ── bottom action row: OK / Cancel ───────────────────────────────── */
.pos-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 2px solid var(--retro-lo);
}
.pos-actions .retro-btn { min-width: 92px; font-size: 13px; }
.pos-actions .pos-ok-btn {
  background: var(--retro-border); color: var(--retro-glow); border-color: var(--retro-border);
  box-shadow: inset 2px 2px 0 #2c6b6b, inset -2px -2px 0 #072626;
}
.pos-actions .pos-ok-btn:hover:not(:disabled) {
  background: #175c5c; color: var(--retro-glow); border-color: var(--retro-border);
  box-shadow: inset 2px 2px 0 #3a8080, inset -2px -2px 0 #072626;
}

@media (max-width: 480px) {
  .pos-editor-controls { flex-direction: column; gap: 10px; }
}