/* Dreezle Draw — Main Stylesheet
   Matches SandboxPix GUIBundle 4-row grid layout.
   Language-agnostic: no text labels, all icons/images. */

:root {
  --bg-main: #f0f4f8;
  --bg-panel: #d0d0d0;
  --bg-toolbar: #c0c0c0;
  --border: #a0a0a0;
  --accent: #4299e1;
  --accent-hover: #3182ce;
  --shadow: 0 2px 8px rgba(0,0,0,0.12);
  --radius: 2px;
}

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

html, body {
  /* Disable pull-to-refresh and rubber-band scrolling on touch devices */
  overscroll-behavior: none;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-main);
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Prevent text/image selection from long-press on touch devices.
     Inputs would need to re-enable this, but we have none. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Canvases need touch-action none so the browser doesn't hijack drags
   for scroll/zoom. Applied individually on each paint surface. */
#paint-canvas,
.mixelator-canvas {
  touch-action: none;
}

/* ─── App Grid: 2 rows ─────────────────────────────────────────── */
/*  Row 0: Top bar (toolbar + option bar + undo + save + erase)     */
/*  Row 1: Color Picker (left) + Canvas (right)                     */

.app-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  flex: 1;
  min-height: 0;
  background: var(--bg-panel);
  gap: 1px;
}

/* Row 0: Top bar spans both columns, flex row with gaps.
   min-height reserves vertical room for a 2-row grid of 44px icons
   (44 + 2 gap + 44 + padding), so the layout doesn't jump when the
   option bar shrinks. Single-row content is centered vertically. */
.grid-topbar {
  grid-row: 1;
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  min-height: 104px;
  background: var(--bg-toolbar);
}

/* Push undo + save + erase to the right edge so option bar resizing
   doesn't jiggle them around. Extra gap before erase guards against
   accidental clicks. */
.grid-topbar #undo-btn {
  margin-left: auto;
}

.grid-topbar .topbar-erase {
  margin-left: 48px;
}

/* Row 1: Color picker in col 1, canvas in col 2 */
.grid-colors {
  grid-row: 2;
  grid-column: 1;
  background: #808080;
  padding: 2px;
  overflow-y: auto;
}

.grid-canvas {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
  min-height: 0;
  padding: 4px;
}

/* ─── Action buttons (undo, erase, save) ─────────────────────────── */

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: white;
  cursor: pointer;
  padding: 2px;
  transition: border-color 0.15s;
}

.action-btn:hover {
  border-color: var(--accent);
}

.action-btn img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

.action-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── ImageSquareDisplay: shared pattern for toolbar + option bar ── */

.image-square-display {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  min-height: 94px;
}

/* The 64x64 enlarged display of the currently selected item */
.isd-current {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: white;
  overflow: hidden;
}

.isd-current img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

/* Container for the 32x32 selectable items */
.isd-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

/* Each clickable image square — larger than the default 32x32 swatch
   but still smaller than the 64x64 current-selection display. */
.isd-item {
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: white;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.isd-item:hover {
  border-color: var(--accent);
}

.isd-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(66,153,225,0.4);
}

.isd-item img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

/* ─── Canvas ─────────────────────────────────────────────────────── */

#paint-canvas {
  background: white;
  box-shadow: var(--shadow);
  cursor: crosshair;
  max-width: 100%;
  max-height: 100%;
  touch-action: none;
}

/* ─── Color Picker ───────────────────────────────────────────────── */

.color-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-display {
  width: 100%;
  height: 32px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 1px;
  /* Center the grid horizontally within the color picker column —
     otherwise `max-content` columns leave it hugging the left edge. */
  align-self: center;
  /* Prevent the browser from hijacking touch drags as scroll, so
     drag-select across swatches keeps receiving pointermove events. */
  touch-action: none;
}

.color-swatch {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 1px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}

.color-swatch:hover {
  transform: scale(1.15);
  z-index: 1;
}

/* ─── Mixelator mini-canvas ──────────────────────────────────────── */

.mixelator {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

.mixelator-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}

.mixelator-current {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: white;
  overflow: hidden;
  margin-right: 2px;
}

.mixelator-current img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}

.mixelator-tool-btn {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: #e0e0e0;
  padding: 1px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}

.mixelator-tool-btn img {
  display: block;
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

.mixelator-tool-btn.active {
  opacity: 1;
  border-color: var(--accent);
}

.mixelator-tool-btn:hover { opacity: 0.8; }

.mixelator-canvas {
  display: block;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: crosshair;
  touch-action: none;
  background: white;
}

.mixelator-clear {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: #e0e0e0;
  padding: 1px;
  cursor: pointer;
}

.mixelator-clear img {
  display: block;
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}

.mixelator-clear:hover { background: #d0d0d0; }

/* ─── Option bar pen/stamp grid (inside ImageSquareDisplay) ──────── */

.pen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

/* ─── Ad containers ──────────────────────────────────────────────── */

.ad-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8ecf1;
  flex-shrink: 0;
}

.ad-leaderboard {
  width: 100%;
  min-height: 90px;
  padding: 4px 0;
}

.ad-leaderboard .ad-slot {
  width: 728px;
  height: 90px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-placeholder {
  font-size: 0.7rem;
  color: #a0aec0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── Footer ─────────────────────────────────────────────────────── */

.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #2d3748;
  color: #a0aec0;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.footer-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-logo {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  background: white;
  border-radius: 4px;
}

.footer-links {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.app-footer a {
  color: #90cdf4;
  text-decoration: none;
}
.app-footer a:hover {
  text-decoration: underline;
}

/* ─── Responsive: phones (< 500px) ───────────────────────────────── */
/* Same stacked layout as portrait tablet but with smaller controls.
   Everything visible — no hidden menus. */

/* ─── Rotate-to-portrait overlay (phones in landscape) ───────────── */

.rotate-overlay {
  display: none;
}

@media (max-height: 499px) and (orientation: landscape) {
  .rotate-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #2d3748;
  }

  .rotate-icon {
    width: 120px;
    height: 120px;
    animation: rotate-hint 2s ease-in-out infinite;
  }

  @keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
  }
}

@media (max-width: 499px) {

  body {
    overflow: auto;
    height: auto;
  }

  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0;
  }

  /* ── Topbar: 3 rows via flex order + forced wraps ──
       Row 1: action buttons (undo, save, erase) — right-aligned
       Row 2: toolbar — left-aligned
       Row 3: option bar — left-aligned */
  .grid-topbar {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    padding: 3px 4px;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }

  /* Action buttons first (right-aligned via justify-content: flex-end).
     Extra gaps between them to reduce accidental taps in tight space. */
  .grid-topbar #undo-btn  { order: -1; margin-left: 0; }
  .grid-topbar #save-btn  { order: -1; margin-left: 10px; }
  .grid-topbar #erase-btn { order: -1; margin-left: 16px; }

  .grid-topbar .action-btn {
    width: 38px;
    height: 38px;
  }

  /* Toolbar on its own row, left-aligned */
  .grid-topbar #toolbar-container {
    order: 0;
    flex-basis: 100%;
  }

  /* Option bar on its own row, left-aligned.
     Min-height reserves space even when the tool has no options. */
  .grid-topbar #option-bar-container {
    order: 10;
    flex-basis: 100%;
    min-height: 42px;
  }

  /* Constrain all rows to screen width */
  .grid-topbar,
  .grid-colors,
  .grid-canvas {
    max-width: 100vw;
    overflow: hidden;
  }

  .image-square-display {
    min-height: 0;
    padding: 1px;
    flex-shrink: 0;
    max-width: 100%;
  }

  .isd-items {
    flex-wrap: wrap;
  }

  .isd-current {
    width: 38px;
    height: 38px;
  }

  .isd-item {
    width: 34px;
    height: 34px;
  }

  /* ── Row 2: Color picker (horizontal) ── */
  .grid-colors {
    grid-column: 1;
    grid-row: 2;
    overflow-y: visible;
    overflow-x: auto;
    padding: 3px;
  }

  .color-picker {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .color-picker .color-display {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  /* Palette: 10 columns × 2 rows */
  .color-picker .color-grid {
    grid-template-columns: repeat(10, max-content);
  }

  /* Related: 8 columns × 2 rows */
  .color-picker .color-grid:last-child {
    grid-template-columns: repeat(8, max-content);
  }

  .color-picker .color-swatch {
    width: 24px;
    height: 24px;
  }

  /* Hide mixer */
  .mixelator {
    display: none;
  }

  /* ── Row 3: Canvas (full width) ── */
  .grid-canvas {
    grid-column: 1;
    grid-row: 3;
    padding: 1px;
  }

  #paint-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
  }

  /* Hide the ad on phones — not enough room */
  .ad-leaderboard { display: none; }

  /* Compact footer */
  .app-footer {
    padding: 2px 8px;
    font-size: 0.6rem;
    gap: 8px;
  }
}

/* ─── Responsive: portrait tablet ────────────────────────────────── */
/* Single-column stacked layout: toolbar → option bar → colors → canvas.
   Triggers on narrow-ish widths in portrait orientation. The min-width
   guard prevents this from firing on phones (which need their own layout). */

@media (min-width: 500px) and (max-width: 899px) and (orientation: portrait) {

  body {
    overflow: auto;
    height: auto;
  }

  .app-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0;
  }

  /* ── Row 0: Toolbar + action buttons (top), option bar (below) ── */
  .grid-topbar {
    grid-column: 1;  /* override desktop's 1 / 3 span */
    grid-row: 1;
    min-height: 0;
    padding: 6px 8px;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }

  /* Action buttons stay on the first line, pushed right */
  .grid-topbar #undo-btn {
    margin-left: auto;
  }

  .grid-topbar .action-btn {
    width: 48px;
    height: 48px;
  }

  .grid-topbar .topbar-erase {
    margin-left: 24px;
  }

  /* Option bar drops to its own line, left-aligned.
     100% width forces the wrap; the option bar's internal flex handles the rest. */
  .grid-topbar #option-bar-container {
    order: 10;  /* push after action buttons in flex order */
    flex-basis: 100%;
  }

  /* Shrink the ISD display squares */
  .image-square-display {
    min-height: 0;
    padding: 2px;
  }

  .isd-current {
    width: 48px;
    height: 48px;
  }

  .isd-item {
    width: 38px;
    height: 38px;
  }

  /* ── Row 2: Color picker (horizontal orientation) ── */
  .grid-colors {
    grid-column: 1;
    grid-row: 2;
    overflow-y: visible;
    overflow-x: auto;
    padding: 4px;
  }

  .color-picker {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Current color swatch: small square inline */
  .color-picker .color-display {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  /* Palette: 10 columns × 2 rows, related: 8 columns × 2 rows */
  .color-picker .color-grid {
    grid-template-columns: repeat(10, max-content);
  }

  .color-picker .color-grid:last-child {
    grid-template-columns: repeat(8, max-content);
  }

  /* Slightly smaller swatches to fit */
  .color-picker .color-swatch {
    width: 28px;
    height: 28px;
  }

  /* Hide the mixer canvas in portrait — not enough room */
  .mixelator {
    display: none;
  }

  /* ── Row 3: Canvas (full width) ── */
  .grid-canvas {
    grid-column: 1;
    grid-row: 3;
    padding: 2px;
  }

  #paint-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
  }

  /* Smaller ad for portrait tablets */
  .ad-leaderboard { min-height: 50px; }
  .ad-leaderboard .ad-slot { width: 320px; height: 50px; }

  /* Compact footer */
  .app-footer { padding: 2px 8px; }
}

/* ─── Responsive: landscape tablet ───────────────────────────────── */
/* Landscape tablets have enough width for the normal 2-column layout,
   but vertical space is tighter. Shrink UI chrome to give the canvas
   more room. */

@media (min-width: 769px) and (max-width: 1100px) and (orientation: landscape) {

  body {
    overflow: auto;
    height: auto;
  }

  .grid-topbar {
    min-height: 0;
    padding: 2px 6px;
    gap: 6px;
  }

  .image-square-display {
    min-height: 0;
    padding: 1px;
  }

  .isd-current {
    width: 48px;
    height: 48px;
  }

  .isd-item {
    width: 38px;
    height: 38px;
  }

  .action-btn {
    width: 48px;
    height: 48px;
  }

  .grid-topbar .topbar-erase {
    margin-left: 24px;
  }

  .color-swatch {
    width: 28px;
    height: 28px;
  }

  .color-display {
    height: 28px;
  }

  .ad-leaderboard { min-height: 50px; }
  .ad-leaderboard .ad-slot { width: 320px; height: 50px; }
}