/* CreatureJam — dark plum studio with green accents */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg0: #120d1a; --bg1: #1c1428; --panel: rgba(26, 19, 38, 0.9);
  --line: rgba(168, 140, 210, 0.16);
  --text: #ece6f4; --dim: #9d90b4;
  --accent: #57c14e;                 /* grass green — primary actions */
  --accent-ink: #08260d;             /* dark ink on green */
  --accent2: #9ee06c;                /* bright lime — selection/positive */
  --accent2-ink: #16300a;
  --danger: #ff6b6b;
  font-size: 14px;
}
html, body, #app { height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(120% 90% at 50% 10%, #261a38 0%, #120d1a 58%, #080512 100%);
  user-select: none;
}

/* inlined lucide icons scale with the text around them */
svg.lucide { width: 1.15em; height: 1.15em; vertical-align: -0.22em; }
button svg.lucide { pointer-events: none; }
#sheetbar button, #placeCancel, .archgrid button, #dlgMore .exportlist button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
#viewport, #viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#viewport canvas { touch-action: none; }

/* ---------- chrome ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 10;
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(13,9,20,0.92), rgba(13,9,20,0.55) 80%, transparent);
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.18em; font-size: 15px; margin-right: 10px; }
.logo .mark { width: 22px; height: 22px; flex: none; }
.logo .wordmark span { color: var(--accent); }
.namewrap { display: flex; align-items: center; gap: 4px; }
#name {
  background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 6px 10px; font-size: 14px; width: 190px; outline: none;
}
#name:focus { border-color: var(--accent2); }
.spacer { flex: 1; }
.divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
button {
  background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
button:hover { background: rgba(255,255,255,0.12); border-color: rgba(200,160,230,0.35); }
button:active { transform: translateY(1px); }
button.accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 650; }
button.accent:hover { background: #6fd166; }
#btnRandom { display: inline-flex; align-items: center; gap: 6px; }
/* flex-center the glyph: mobile forces display:flex on .mobileonly buttons, and
   without this the fixed-height SVG pins to the top of a 40px touch target */
button.icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; font-size: 15px; line-height: 1; }
button.danger { color: var(--danger); }
button:disabled { opacity: 0.4; cursor: default; }

#modes {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%); z-index: 10;
  display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; backdrop-filter: blur(8px);
}
#modes button { border: none; background: transparent; padding: 7px 22px; border-radius: 8px; font-weight: 600; }
#modes button.active { background: var(--accent); color: var(--accent-ink); }

/* ---------- side panels ---------- */
aside { position: absolute; top: 62px; bottom: 56px; z-index: 9; width: 252px; display: flex; }
#left { left: 12px; }
#right { right: 12px; width: 258px; }
.panel {
  flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px; overflow-y: auto; backdrop-filter: blur(10px);
  scrollbar-width: thin; scrollbar-color: rgba(170,140,210,0.3) transparent;
}
.panel.hidden, .hidden { display: none !important; }
.panel h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim);
  margin: 14px 0 8px;
}
.panel h3:first-child { margin-top: 0; }

.chainbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.chainbtns button { font-size: 12.5px; padding: 8px 4px; }

#catTabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
#catTabs button { font-size: 11.5px; padding: 5px 9px; border-radius: 999px; }
#catTabs button.active { background: var(--accent2); color: var(--accent2-ink); border-color: transparent; font-weight: 650; }

#palette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.partcell {
  aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); cursor: grab;
  background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 0;
}
.partcell img { width: 100%; height: 100%; object-fit: cover; }
.partcell:hover { border-color: var(--accent); background: rgba(87,193,78,0.10); }
.partcell.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(87,193,78,0.5); }
.partcell .lbl {
  position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; text-align: center;
  padding: 2px; background: rgba(5,8,14,0.72); color: var(--dim); pointer-events: none;
}
.partcell .celltools {
  position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; z-index: 2;
}
.partcell .celltools span {
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; border-radius: 6px; background: rgba(5,8,14,0.75); color: var(--dim); cursor: pointer;
}
.partcell .celltools span:hover { color: var(--accent); background: rgba(5,8,14,0.95); }
.partcell.forge { border-style: dashed; border-color: var(--accent2); flex-direction: column; gap: 2px; }
.partcell.forge .bigicon svg.lucide { width: 26px; height: 26px; color: var(--accent2); }
.partcell.forge:hover { background: rgba(158,224,108,0.1); }

/* ---------- controls ---------- */
.ctl { margin-bottom: 10px; }
.ctl label { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-bottom: 3px; }
.ctl label b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctl input[type=range] { width: 100%; accent-color: var(--accent2); height: 20px; }
.ctl input[type=color] {
  width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 8px;
  background: transparent; padding: 2px; cursor: pointer;
}
.ctl select {
  width: 100%; background: #211833; color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px; font-family: inherit;
}
.ctl .pair { display: flex; gap: 6px; }
.ctl .pair > * { flex: 1; }
.checkrow { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; cursor: pointer; }
.checkrow input { accent-color: var(--accent2); width: 15px; height: 15px; }
.btnrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.btnrow button { flex: 1; font-size: 12px; }
.inspTitle { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.inspTitle.small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--dim); margin: 14px 0 8px; }
.inspSub { font-size: 11.5px; color: var(--dim); margin-bottom: 12px; }
.memrow .memlabel { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; margin: 8px 0 4px; }
button.tiny { padding: 2px 7px; font-size: 11px; border-radius: 6px; }

/* ---------- footer ---------- */
#status {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 10;
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
  background: linear-gradient(0deg, rgba(10,7,16,0.92), transparent);
}
#hint { color: var(--dim); font-size: 12.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#statbars { display: flex; gap: 12px; align-items: center; }
.stat { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.stat .bar { width: 46px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.09); overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--accent2); border-radius: 3px; }

/* ---------- dialogs ---------- */
dialog {
  background: #191225; color: var(--text); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px; width: min(560px, 92vw); max-height: 88vh; overflow-y: auto;
}
dialog::backdrop { background: rgba(4,6,10,0.65); backdrop-filter: blur(3px); }
dialog h2 { font-size: 16px; margin-bottom: 6px; }
dialog .dim { color: var(--dim); font-size: 12.5px; margin-bottom: 12px; }
dialog textarea {
  width: 100%; background: #120c1c; color: #cdeeb5; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; font: 12px/1.45 ui-monospace, Consolas, monospace; resize: vertical; margin-bottom: 8px;
  word-break: break-all;
}
dialog .row { display: flex; gap: 8px; margin: 10px 0 4px; align-items: center; }
dialog .row .close { margin-left: auto; }
#cardPreview { width: 100%; max-width: 320px; display: block; margin: 8px auto; border-radius: 10px; }

#gardenGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
#gardenGrid .cell {
  aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  cursor: pointer; position: relative; background: #120c1c; padding: 0;
}
#gardenGrid .cell img { width: 100%; height: 100%; object-fit: cover; }
#gardenGrid .cell.center { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(87,193,78,0.45); cursor: default; }
#gardenGrid .cell:hover:not(.center) { border-color: var(--accent2); }
.gardenctl label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); flex: 1; }
.gardenctl input { flex: 1; accent-color: var(--accent2); }

.dlghint { color: var(--muted, #8b949e); font-size: 12.5px; margin: 4px 0 0; }
.archgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.archgrid button { padding: 16px 8px; font-size: 13px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.archgrid button { flex-direction: column; }
.archgrid button .archic svg.lucide { width: 30px; height: 30px; color: var(--accent2); }

.exportlist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.exportlist button { text-align: left; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.exportlist button small { display: block; color: var(--dim); font-weight: 400; font-size: 12px; margin-top: 2px; }

/* ---------- toasts / splash / misc ---------- */
#toasts { position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.toast {
  background: rgba(30, 21, 44, 0.95); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 9px 16px; font-size: 13px; animation: toastIn 0.18s ease-out;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.toast.err { border-color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

#drop {
  position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
  background: rgba(8,12,20,0.8); border: 3px dashed var(--accent2); border-radius: 18px;
  font-size: 20px; color: var(--accent2); font-weight: 700; pointer-events: none;
}
#drop.show { display: flex; }

#splash {
  position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; background: var(--bg0); color: var(--dim); font-size: 14px;
  transition: opacity 0.4s; letter-spacing: 0.08em;
}
#splash.done { opacity: 0; pointer-events: none; }
#splash .pulse { font-size: 52px; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }

#fatal {
  position: absolute; inset: auto 12px 60px 12px; z-index: 90; background: #2a1215; color: #ffb0b0;
  border: 1px solid var(--danger); border-radius: 10px; padding: 12px 16px;
  font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; max-height: 40vh; overflow: auto;
}

@media (max-width: 980px) and (min-width: 701px) {
  aside { width: 210px; }
  #right { width: 220px; }
}

/* ---------- placement cancel chip ---------- */
#placeCancel {
  position: absolute; top: 108px; left: 50%; transform: translateX(-50%); z-index: 30;
  background: rgba(30, 21, 44, 0.95); border-color: var(--danger); color: var(--danger);
  padding: 9px 18px; border-radius: 999px; font-weight: 600;
}

/* mobile-only chrome stays hidden on desktop */
.mobileonly { display: none !important; }

/* =====================================================================
   PHONE LAYOUT: full-screen viewport, panels as a bottom sheet.
   Triggers on narrow screens (portrait) OR short ones (phone landscape).
   ===================================================================== */
@media (max-width: 700px), (max-height: 500px) {
  :root { font-size: 15px; }
  html, body { overscroll-behavior: none; }
  .mobileonly { display: flex !important; }

  /* top bar: name + undo/redo + menu; big actions live in the ☰ dialog */
  #topbar {
    height: 50px; gap: 6px;
    padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  }
  /* keep the mark on phones, retire the wordmark — the row is tight */
  .logo .wordmark { display: none; }
  .logo { margin-right: 4px; }
  /* name owns the row's slack — the lone spacer would otherwise split it in half
     and crush the field to ~60px */
  .spacer { display: none; }
  .namewrap { flex: 1; min-width: 0; }
  #name { width: 100%; min-width: 60px; }
  #topbar .divider,
  #btnNew, #btnGarden, #btnDNA, #btnCard, #btnExport { display: none; }
  button { min-height: 40px; }
  button.icon { min-width: 40px; }
  /* Surprise me joins the top bar as an accent icon button — label retires */
  #btnRandom { min-width: 40px; padding: 6px 9px; gap: 0; }
  #btnRandom .txt { display: none; }

  #modes { top: 56px; }
  #modes button { padding: 9px 18px; }

  /* the 3D stage owns the screen; hint/stat footer retires */
  #status { display: none; }
  #toasts { bottom: auto; top: 104px; }
  #placeCancel { top: auto; bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* bottom-sheet tab bar */
  #sheetbar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 12;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    gap: 6px; background: rgba(14, 10, 22, 0.94); border-top: 1px solid var(--line);
  }
  #sheetbar button { flex: 1; border-radius: 10px; font-weight: 600; }
  #sheetbar #sheetHide { flex: 0 0 52px; }
  #sheetbar button.active { background: var(--accent2); color: var(--accent2-ink); border-color: transparent; }

  /* panels become a bottom sheet above the tab bar; body classes pick which */
  aside, #left, #right {
    left: env(safe-area-inset-left); right: env(safe-area-inset-right);
    width: auto; top: auto;
    bottom: calc(52px + env(safe-area-inset-bottom));
    height: clamp(190px, 44dvh, 45vh); z-index: 11; display: none;
  }
  aside .panel { border-radius: 16px 16px 0 0; border-bottom: none; }
  body.m-tools #left { display: flex; }
  body.m-inspect #right { display: flex; }

  /* roomier touch targets inside the sheet */
  #palette { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  #catTabs button { padding: 8px 12px; min-height: 36px; }
  .chainbtns button { padding: 11px 4px; }
  .ctl input[type=range] { height: 30px; }
  .ctl input[type=color] { height: 38px; }
  .ctl select { padding: 10px; }
  .checkrow input { width: 19px; height: 19px; }
}