/* ====================================================================
   paint.css — WAFER PAINT chrome. Toolbar matches the #camctl glass
   recipe (same body gradient, border, inset shadows); swatches use the
   joynub glossy-sphere pip. One grey + six titanium blocks — no new colors.
   ==================================================================== */

#paint {
  position: absolute;
  inset: 0;
  z-index: 5;               /* inside #stage: above mask/world, below chrome */
  pointer-events: none;     /* armed mode flips this from JS */
}
#paint.armed { cursor: crosshair; }

/* no visible chrome anywhere — the kit is hidden behind the typed
   word (see paint.js); the toolbar is its only UI */
#paintbar {
  position: fixed;
  left: 14px;
  bottom: 44px;
  z-index: 11;
  display: none;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border-radius: 14px;
  border: 1px solid rgba(146, 133, 133, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, #f4f1f0 55%, #ece8e7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -7px 12px rgba(146, 133, 133, 0.10),
    0 3px 9px rgba(146, 133, 133, 0.25);
}
#paintbar.open { display: flex; }

#paintbar .pb-row { display: flex; gap: 5px; }

#paintbar button {
  appearance: none;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #928585;
}
#paintbar button:hover { border-color: rgba(146, 133, 133, 0.25); }
#paintbar button.on {
  border-color: rgba(146, 133, 133, 0.5);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(146, 133, 133, 0.18);
}

#paintbar .pb-sw {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* six titanium blocks, 2×3 */
  gap: 5px;
  padding: 2px 0;
}

#paintbar button svg { display: block; }

/* the logo stamp wears the actual dot-logo artwork, recolored to the
   brand grey via mask — the real constellation, not an approximation */
#paintbar .pb-logo {
  display: block;
  width: 17px; height: 17px;
  background: #928585;
  -webkit-mask: url('fab2 dot logo.svg') center / contain no-repeat;
  mask: url('fab2 dot logo.svg') center / contain no-repeat;
}

/* brush sizes: three ink dots, S / M / L */
#paintbar .pb-sizes i {
  display: block;
  border-radius: 50%;
  background: currentColor;
}
/* button.swatch outranks the generic #paintbar button.on rule, so the
   SELECTED swatch keeps its sphere instead of going flat white.
   The pip itself is an inline SVG <circle> (built in paint.js) — CSS
   background gradients kept painting square seams into the orbs. */
#paintbar button.swatch {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: none;
  box-shadow: 0 1px 2px rgba(77, 68, 68, 0.25);
}
#paintbar button.swatch svg { display: block; }
#paintbar button.swatch:hover { border: none; }
#paintbar button.swatch.on {
  box-shadow: 0 0 0 2px #928585, 0 1px 2px rgba(77, 68, 68, 0.25);
}

/* mario-paint pop: crouch, hop, land — on tool/undo/stamp use */
#paintbar button.pop { animation: paint-pop 420ms cubic-bezier(0.34, 1.2, 0.4, 1); }
@keyframes paint-pop {
  0%   { transform: none; }
  18%  { transform: translateY(2px) scale(1.12, 0.84); }
  52%  { transform: translateY(-7px) scale(0.94, 1.08); }
  78%  { transform: translateY(0) scale(1.06, 0.92); }
  100% { transform: none; }
}

#painttoast {
  position: fixed;
  left: 14px;
  bottom: 10px;
  z-index: 11;
  padding: 6px 10px;
  border-radius: 8px;
  font: 600 9px 'Fragment Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  color: #fff;
  background: rgba(146, 133, 133, 0.92);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 240ms ease;
  pointer-events: none;
}
#painttoast.show { opacity: 1; transform: none; }

/* the toolbar clears the footer on touch layouts */
@media (pointer: coarse) {
  #paintbar { bottom: 100px; }
}