body.paint-open, body.music-open { overflow: hidden; }

.paint {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #ffffff;
  transform-origin: 50% 100%;
  animation: paintIn 0.32s ease both;
}
.paint.closing { animation: paintOut 0.26s ease forwards; }
@keyframes paintIn {
  from { opacity: 0; transform: scale(0.992); }
  to { opacity: 1; transform: none; }
}
@keyframes paintOut {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.992); }
}
#paint-canvas {
  position: absolute;
  inset: 0;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* Opening flourish — inspiring words fade through the centre */
.paint-intro[hidden] { display: none; }
.paint-intro {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.paint-intro .intro-word {
  font-family: "Caveat", cursive;
  font-size: clamp(56px, 12vw, 132px);
  font-weight: 700;
  line-height: 1.24;
  color: #1b1bf5;
  white-space: nowrap;
  padding: 0.06em 0.22em; /* room for the handwriting tail so the last letter never clips */
  animation: introWord 0.72s ease both;
}
.paint-intro .intro-word svg { width: clamp(56px, 12vw, 128px); height: auto; display: block; }
@keyframes introWord {
  0% { opacity: 0; transform: translateY(12px) scale(0.94); }
  22% { opacity: 1; transform: none; }
  74% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-10px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .paint-intro { display: none; }
}
/* One refined floating control bar */
.paint-bar {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 14px;
  background: rgba(18, 18, 20, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

/* Size control wrapper — transparent on desktop, its own row on mobile */
.size-ctl { display: contents; }

/* Live brush-size indicator + slider — fixed footprint so the bar never
   reflows; the dot scales via transform to show the current brush size */
.size-dot {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  transform: scale(0.44);
  transition: transform 0.12s ease, background 0.15s ease;
}
.paint-size {
  -webkit-appearance: none;
  appearance: none;
  width: 108px;
  height: 4px;
  margin: 0 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.paint-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.paint-size::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.paint-divider { width: 1px; height: 20px; margin: 0 4px; background: rgba(255, 255, 255, 0.14); }

.paint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.paint-icon svg { width: 20px; height: 20px; }
.paint-icon:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.paint-icon.active { background: var(--accent); color: #fff; }
.paint-icon.open { background: rgba(255, 255, 255, 0.14); color: #fff; }
.paint-icon:disabled { opacity: 0.3; cursor: default; }
.paint-icon:disabled:hover { background: transparent; color: rgba(255, 255, 255, 0.82); }

/* Brush button mirrors the active tool's tip */
#paint-brush svg { width: auto; height: 27px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }

/* Collapse control — a slim chevron that tucks the bar away to the right */

/* Collapse / expand: the bar and the circle cross-fade in place so you can keep
   drawing with the whole canvas while the tools sit out of the way. */
.paint-bar { transition: opacity 0.24s ease, transform 0.24s ease; }
.paint-fab {
  position: absolute;
  right: 22px;
  bottom: 28px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  background: rgba(18, 18, 20, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease, background 0.15s ease;
}
.paint-fab svg { width: 22px; height: 22px; }
.paint-fab:hover { background: rgba(30, 30, 34, 0.82); }
.paint-fab-dot {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(18, 18, 20, 0.9);
}
.paint.collapsed .paint-bar {
  opacity: 0;
  transform: translateX(-50%) scale(0.9);
  pointer-events: none;
}
.paint.collapsed .paint-fab {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .paint-bar, .paint-fab { transition: none; }
}

/* Brush-style picker popover */
.brush-menu[hidden] { display: none; }
.brush-menu {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 8px;
  background: rgba(18, 18, 20, 0.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.5);
  z-index: 4;
  animation: menuIn 0.18s ease;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.brush-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 52px;
  padding: 6px 4px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}
.brush-opt:hover { background: rgba(255, 255, 255, 0.06); }



/* ── Draw: colour palette ──────────────────────────────────────── */
.paint-color .color-swatch {
  display: block;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.color-menu[hidden] { display: none; }