:root{
  --bg:#0b0c10; --card:#11131a; --muted:#6b7280; --text:#e5e7eb;
  --accent:#8b5cf6; --accent2:#22d3ee; --danger:#ef4444;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -20%,rgba(34,211,238,.12),transparent 60%),var(--bg);color:#e5e7eb;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
.app{display:grid;grid-template-columns:320px 1fr 400px;gap:18px;height:100vh;padding:18px;align-items:start}
.panel{display:flex;flex-direction:column;gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(6px);}
h3{margin:0 0 10px 0;font-weight:700;letter-spacing:.2px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 0}
.logo{font-size:20px;background:#151725;border:1px solid rgba(255,255,255,.06);width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.title{font-weight:800;letter-spacing:.3px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{font-size:12px;color:#9ca3af}
textarea,input[type=file],input[type=url],input[type=text],input[type=number],select{appearance:none;background:#0f1117;color:#e5e7eb;border:1px solid rgba(255,255,255,.07);padding:10px 12px;border-radius:10px;outline:none;width:100%}
input[type=range]{width:100%}
.btn{border:1px solid rgba(255,255,255,.08);background:#141827;color:#e5e7eb;border-radius:10px;padding:10px 12px;cursor:pointer;transition:.15s transform,.15s background,.15s border}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18)}
.btn.primary{background:linear-gradient(90deg,var(--accent) 0%, var(--accent2) 100%); border:none; font-weight:700}
.btn.ghost{background:#0f1117}.btn.danger{background:linear-gradient(180deg,#2a0f0f,#1a0a0b);border-color:rgba(239,68,68,.4);color:#fecaca}
.row{display:flex;gap:10px;align-items:center}.row.tight{gap:8px}.wrap{flex-wrap:wrap}.divider{display:grid;place-items:center;color:#9ca3af;font-size:12px;margin:4px 0}.spacer{flex:1}
.pill{display:inline-block;padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#0f1117;min-width:52px;text-align:center}
.muted{color:#9ca3af;font-size:12px}
.stage{align-self:start}
.canvas-wrap{background:repeating-conic-gradient(#151726 0% 25%,#0f1117 0% 50%) 50%/16px 16px;border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:100%;overflow:auto}
#c{display:block;background:transparent}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.grid.compact img{height:70px}.grid.scroll{max-height:260px;overflow:auto;padding-right:4px}
.grid .tile{position:relative}.grid img{width:100%;object-fit:contain;background:#0f1117;border:1px solid rgba(255,255,255,.06);border-radius:10px;cursor:pointer;transition:.15s transform,.15s border}
.grid img:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.grid .x{position:absolute;top:6px;right:6px;font-size:11px;background:#1f2937;color:#e5e7eb;border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:2px 6px;cursor:pointer;z-index:2}
.grid .perm .x{display:none}
.dropzone{border:2px dashed rgba(255,255,255,.2);border-radius:12px;min-height:80px;display:grid;place-items:center;background:#0f1117;cursor:pointer}
.dropzone.drag{border-color:#22d3ee;background:rgba(34,211,238,.06)}
.hidden{display:none}
@media (max-width:1100px){.app{grid-template-columns:1fr;height:auto}.panel.right{order:3}.stage{order:2}.panel.left{order:1}.canvas-wrap{max-width:100%;overflow:auto}}
/* Collection row (placed under Token ID) */
.ra-collection-row{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px;
}
.ra-collection-row .ra-mini{opacity:.75; font-size:12px}
.ra-collection-row select{min-width:200px}
.ra-collection-row #ra-col-using{flex-basis:100%; font-size:12px; opacity:.7}

/* =========================================================
   MOBILE UX — Real Canvas Resize (no CSS transform)
   - Square, centered canvas + checkerboard that matches the canvas
   - Footer centered inside the square (DOM)
   - Quick‑Actions Dock + Sticky helpers
   - Portrait & short-height landscape support
   ========================================================= */

/* Touch hint for all buttons */
button, .btn { touch-action: manipulation; }

/* Narrow portrait OR short-height landscape */
@media (pointer: coarse) and (max-width: 768px), (pointer: coarse) and (max-height: 500px) {

  /* Neutralize any sticky history row on mobile */
  #raHistoryRow {
    position: static !important;
    background: transparent !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Center the canvas section on mobile */
  .stage { display: flex; justify-content: center; }

  /* Checkerboard frame — width/height set by JS to match the canvas square */
  .canvas-wrap {
    position: relative;     /* anchor for DOM footer */
    display: inline-block;  /* shrink-wrap to explicit width/height from JS */
    margin: 0 auto;
    /* keep whatever padding you like here — JS reads it live via getComputedStyle */
    /* padding: 12px; */
    max-width: 100vw;
    overflow: visible;
  }

  /* IMPORTANT: remove transform scaling on mobile (we resize the real canvas) */
  .canvas-container {
    transform: none !important;
    will-change: auto !important;
  }

  /* Footer (DOM) — centered inside the visible square */
  #raFooterBarFinal {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 12px;
    width: max-content;
    max-width: calc(100% - 24px);
    text-align: center;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
  }

  /* Bigger tap targets */
  #exportPng, #openNewTab, #clearCanvas, #baseUpload, #clearUpload,
  #zoomIn, #zoomOut, #zoomReset, #canvasSize {
    min-height: 44px;
    font-size: 14px;
  }

  /* Overlay grid responsive reflow */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
  }
  .grid .tile { min-height: 96px; }

  /* --- Quick‑Actions Dock --- */
  .ra-mobile-dock {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding: 10px 12px;
    background: rgba(11,12,16,0.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.06);
    z-index: 10000;
  }
  .ra-mobile-dock button {
    appearance: none;
    border: 1px solid rgba(255,255,255,.12);
    background: #141827;
    color: #e5e7eb;
    border-radius: 10px;
    min-height: 44px;
    font-size: 12px;
    line-height: 1.1;
    padding: 8px 6px;
  }

  /* Sticky helpers above the dock */
  .ra-back-to-canvas,
  .ra-del-overlay {
    position: fixed;
    z-index: 10001;
    display: none;  /* toggled by JS */
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(20,24,39,.92);
    color: #e5e7eb;
    font-size: 12px;
  }
  .ra-back-to-canvas.show,
  .ra-del-overlay.show { display: block; }

  .ra-back-to-canvas {
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 10px);
  }
  .ra-del-overlay {
    left: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 10px);
  }

  /* Reserve space so the dock doesn’t cover content */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* Ultra‑small phones */
@media (max-width: 420px) {
  .ra-mobile-dock { gap: 6px; padding: 8px 10px; }
  .ra-mobile-dock button { min-height: 42px; font-size: 12px; }
}

/* =========================================================
   RA BLUE BUTTONS v3  —  smaller, consistent across devices
   Scopes to the right panel only (no bleed into other UI).
   ========================================================= */

/* ---- TWEAK HERE (size & theme knobs) ------------------- */
:root {
  /* size (smaller than before) */
  --raBtnH:        34px;       /* height of action buttons        */
  --raPadY:         6px;       /* vertical padding                 */
  --raPadX:        12px;       /* horizontal padding               */
  --raFontSize:   12.5px;      /* label size                       */
  --raRadius:      10px;       /* rounded corners                  */

  /* theme */
  --raBlue0:  #1f3b86;
  --raBlue1:  #2563eb;
  --raBlue2:  #1f7ae5;
  --raBlueText:     #eaf1ff;
  --raBlueTextDim:  #d6e6ff;

  /* shadow */
  --raShadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Scope styling to the right panel (desktop, iPad, mobile) */
aside.panel.right .ra-blue-action,
aside.panel.right .ra-blue-ghost {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--raBtnH);
  padding: var(--raPadY) var(--raPadX);
  border-radius: var(--raRadius);
  font-size: var(--raFontSize);
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  box-shadow: var(--raShadow);
  border: 1px solid rgba(255,255,255,.18);
}

/* Primary blue (Undo, Redo, Save, Restore) */
aside.panel.right .ra-blue-action {
  color: var(--raBlueText);
  background: linear-gradient(135deg, var(--raBlue0), var(--raBlue1) 45%, var(--raBlue2));
}
aside.panel.right .ra-blue-action:hover {
  filter: brightness(1.1);
}
aside.panel.right .ra-blue-action:active {
  transform: translateY(1px);
}

/* Subtle ghost (the small “x” close) */
aside.panel.right .ra-blue-ghost {
  color: var(--raBlueTextDim);
  background: rgba(255,255,255,.06);
}
aside.panel.right .ra-blue-ghost:hover { background: rgba(255,255,255,.10); }
aside.panel.right .ra-blue-ghost:active { transform: translateY(1px); }

/* Disabled state (mirrors native feel) */
aside.panel.right .ra-blue-action[disabled],
aside.panel.right .ra-blue-ghost[disabled] {
  opacity: .55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* Compact on narrower screens (keeps proportions) */
@media (max-width: 980px) {
  :root {
    --raBtnH: 32px;
    --raPadY: 5px;
    --raPadX: 10px;
    --raFontSize: 12px;
  }
}

/* =========================================================
   RA GREEN TOKEN BUTTONS v1
   Styles for: "Delete Token ID" & "Load Token ID"
   Scope: left panel only (no bleed elsewhere)
   ========================================================= */

/* ---- TWEAK HERE (size & colors) ------------------------ */
:root{
  /* compact sizing to match your UI */
  --raGHeight:   34px;
  --raGPadY:       6px;
  --raGPadX:      12px;
  --raGFont:    12.5px;
  --raGRadius:    10px;

  /* cool green gradient */
  --raG0: #065f46;   /* deep teal */
  --raG1: #059669;   /* emerald */
  --raG2: #10b981;   /* mint/green */
  --raGText: #eafff7;

  --raGShadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Primary green style */
aside.panel.left .ra-green-action,
aside.panel.left button.ra-green-action{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--raGHeight);
  padding: var(--raGPadY) var(--raGPadX);
  border-radius: var(--raGRadius);
  font-size: var(--raGFont);
  font-weight: 600;
  line-height: 1;
  color: var(--raGText) !important;
  background: linear-gradient(135deg, var(--raG0), var(--raG1) 45%, var(--raG2)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: var(--raGShadow);
  cursor: pointer;
  white-space: nowrap;
}

aside.panel.left .ra-green-action:hover{ filter: brightness(1.06); }
aside.panel.left .ra-green-action:active{ transform: translateY(1px); }
aside.panel.left .ra-green-action[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* Slightly tighter on smaller screens */
@media (max-width: 980px){
  :root{ --raGHeight:32px; --raGPadY:5px; --raGPadX:10px; --raGFont:12px; }
}

/* ===== Mobile dock: keep last button visible & allow scroll ===== */
@media (max-width: 820px) {
  .ra-mobile-dock {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)); /* avoid iOS edge clipping */
    scroll-padding-right: 16px;
  }
  .ra-mobile-dock::-webkit-scrollbar { display: none; }

  /* If your dock uses a fixed grid, let it flow horizontally when our button is present */
  .ra-mobile-dock.ra-has-contest {
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, auto);
  }
}

/* Compact contest action row at the bottom of Export card */
.ra-contest-actions{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;  /* bottom-right alignment */
}

/* Shared button look (compact, no full width) */
.ra-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  white-space: nowrap;
  width: auto;          /* ensure not full width */
  min-width: 0;
  max-width: 240px;
}

/* Visual variants */
.ra-btn.ra-primary{
  background: linear-gradient(135deg,#1f3b86,#2563eb);
  color: #eaf1ff;
}

.ra-btn.ra-ghost{
  background: #1b2230;
  color: #cfe0ff;
}

/* Mobile: allow wrapping neatly while staying right-aligned */
@media (max-width: 720px){
  .ra-contest-actions{ justify-content: flex-end; }
}

/* --- Mobile dock overlap fix (add scroll room below content) --- */
@media (max-width: 900px), (max-height: 640px) {
  :root { --ra-dock-h: 72px; } /* adjust if your dock is taller/shorter */

  /* 1) Global spacer so bottom content isn't hidden behind the dock */
  body::after {
    content: "";
    display: block;
    height: calc(var(--ra-dock-h) + env(safe-area-inset-bottom, 0px));
  }

  /* 2) Ensure the right panel itself has enough room at the bottom */
  aside.panel.right {
    margin-bottom: calc(var(--ra-dock-h) + 12px) !important;
    padding-bottom: 8px;
  }

  /* 3) Keep the new contest buttons compact on mobile */
  #raOpenContestBtn,
  #raSubmitToContest {
    max-width: 220px;
    width: auto;
    font-size: 12px;
    padding: 8px 12px;
  }

  /* If your buttons sit inside a wrapper we created */
  .contest-actions {
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* Published Overlays shelf: make it scroll if tall */
[aria-label="Published Overlays"],
.published-overlays {
  max-height: 360px;        /* adjust to taste */
  overflow-y: auto;
}

/* Tiny thumbnail styling if we use the fallback renderer */
.published-overlays .ov,
[aria-label="Published Overlays"] .ov {
  display: flex; flex-direction: column; gap: 6px;
}
.published-overlays .ov img,
[aria-label="Published Overlays"] .ov img {
  width: 100%; height: auto; display: block;
}
.published-overlays .ov .t,
[aria-label="Published Overlays"] .ov .t {
  font-size: 12px; opacity: .8;
}

/* ===== Rebel Ants footer strip ===== */
:root{ --footer-z: 30; }  /* safe below modals & above page content */

.ra-site-footer{
  position: fixed;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(255,255,255,.75);

  background: linear-gradient(180deg, rgba(8,12,18,0) 0%, rgba(8,12,18,.75) 50%, rgba(8,12,18,.9) 100%);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);

  z-index: var(--footer-z);
}

/* links */
.ra-site-footer a{
  color: #c7d2fe;
  text-decoration: none;
}
.ra-site-footer a:hover{ text-decoration: underline; }
.ra-site-footer .sep{ opacity:.45; margin: 0 4px; }

/* Builder-specific: lift the footer above the mobile dock on small screens. 
   We'll set --dock-offset from JS on the builder. */
@media (max-width: 900px){
  .ra-site-footer{
    bottom: calc(var(--dock-offset, 0px) + env(safe-area-inset-bottom, 0px));
  }
}