:root {
  --bg: #fff0f6;
  --bg2: #e7f6ff;
  --card: #ffffff;
  --ink: #4a3b52;
  --shadow: 0 6px 18px rgba(150, 80, 130, 0.14);
  --ring: #ff6fa5;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Baloo 2", "Comic Sans MS", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg), var(--bg2));
  display: flex;
  flex-direction: column;
  overflow: hidden; /* whole app fits the screen on desktop */
}

.topbar {
  position: relative;
  text-align: center;
  padding: 10px 16px 2px;
  flex: 0 0 auto;
}
.topbar h1 {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 34px);
  font-weight: 800;
  letter-spacing: 0.5px;
}
.tagline {
  margin: 2px 0 0;
  font-size: clamp(12px, 1.8vw, 15px);
  opacity: 0.7;
}

/* Link to the sister site (donut <-> cakepop). */
.sister-link {
  position: absolute;
  top: 8px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 2px solid #f3c6db;
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.sister-link:hover { transform: translateY(-1px); border-color: var(--ring); }

.layout {
  flex: 1 1 auto;
  min-height: 0; /* lets children shrink to fit instead of scrolling */
  display: grid;
  grid-template-columns: minmax(250px, 360px) 1fr;
  gap: 16px;
  width: 100%;
  max-width: 1180px;
  margin: 8px auto;
  padding: 0 16px;
  align-items: stretch;
}

/* ---- Stage ---- */
.stage-wrap {
  min-height: 0;
  background: var(--card);
  border-radius: 24px;
  padding: 12px;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage svg { height: 100%; width: auto; max-width: 100%; display: block; }

.stage-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.big-btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  background: var(--ring);
  color: #fff;
  box-shadow: 0 4px 0 #d8568b;
  transition: transform 0.08s ease;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d8568b; }
.big-btn.ghost {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 #e7d3df;
  border: 2px solid #f3c6db;
}
/* Save: sunny accent so it reads as "keep this one!" */
.save-btn {
  background: linear-gradient(180deg, #ffd76b, #ffb43f);
  color: #6b3a12;
  box-shadow: 0 4px 0 #e89320;
}
.save-btn:active { box-shadow: 0 1px 0 #e89320; }
.save-btn:disabled {
  cursor: not-allowed;
  background: #f1e7ee;
  color: #b9a7b4;
  box-shadow: 0 4px 0 #e0d2db;
}

/* ---- Saved gallery shelf ---- */
.gallery {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 4px 16px 0;
  min-height: 0;
}
.gallery h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shelf {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}
.saved {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  text-align: center;
}
.saved-thumb {
  width: 88px;
  height: 98px;
  border: 3px solid #f3c6db;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  padding: 4px;
  display: block;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.saved-thumb:hover { transform: translateY(-2px); border-color: var(--ring); }
.saved-thumb svg { width: 100%; height: 100%; display: block; }
.saved-del {
  position: absolute;
  top: -7px;
  right: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #ff6b6b;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.22);
}
.saved-del:active { transform: translateY(1px); }
.saved-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
}

/* ---- Controls: compact 2-column grid, no scroll ---- */
.controls {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto; /* single column; scrolls within itself if tall */
}
#optionGroups { display: contents; }

.group {
  background: var(--card);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
}
.group h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-icon {
  font-size: 22px;
  line-height: 1;
}
.options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.opt {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 3px solid transparent;
  background: #faf4f8;
  border-radius: 14px;
  padding: 5px 11px 5px 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.opt:hover { transform: translateY(-2px); }
.opt.active {
  border-color: var(--ring);
  background: #fff;
  box-shadow: 0 3px 10px rgba(255, 111, 165, 0.25);
}
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
}
/* "None" swatch: white circle with a red diagonal no-slash. */
.swatch-none {
  background:
    linear-gradient(to top right,
      transparent calc(50% - 1.4px),
      #e23b3b calc(50% - 1.4px),
      #e23b3b calc(50% + 1.4px),
      transparent calc(50% + 1.4px)),
    #ffffff;
  box-shadow: inset 0 0 0 2px #e6c7d4;
}

/* ---- Big fun "Take a bite" button below the options ---- */
.bite-btn {
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  border: none;
  border-radius: 18px;
  padding: 14px 18px;
  cursor: pointer;
  color: #6b3a12;
  background: linear-gradient(180deg, #ffd76b, #ffb43f);
  box-shadow: 0 5px 0 #e89320;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.12s ease;
}
.bite-btn:hover:not(:disabled) { filter: brightness(1.04); }
.bite-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #e89320; }
.bite-btn.active {
  background: linear-gradient(180deg, #ffcaca, #ff9d9d);
  box-shadow: 0 5px 0 #e07373;
  color: #7a2727;
}
.bite-btn:disabled {
  cursor: not-allowed;
  background: #f1e7ee;
  color: #b9a7b4;
  box-shadow: 0 5px 0 #e0d2db;
  font-size: 15px;
  font-weight: 700;
}

.footerbar {
  text-align: center;
  padding: 4px 0 8px;
  opacity: 0.55;
  font-size: 13px;
  flex: 0 0 auto;
}

/* ---- On small/portrait screens, stack and allow scrolling ---- */
@media (max-width: 820px) {
  body { overflow: auto; }
  .layout { grid-template-columns: 1fr; }
  .stage svg { max-height: 46vh; }
  /* Sister link sits above the title instead of floating in the corner. */
  .sister-link {
    position: static;
    display: inline-flex;
    margin: 0 auto 8px;
  }
  .topbar { display: flex; flex-direction: column; align-items: center; }
}