/* ============================================================
   Spike & Splat paint cannon.
   Direct port of C:\claude\tape-paint\index.html, scaled down to sit
   in a side section instead of owning a page. Identical on all five
   Laughs & Locks concepts, tape frame included.

   Everything is expressed against --pcs, the scale factor. The
   reference build is --pcs:1 at a 780px frame; here it runs 0.6 at
   a 470px frame. paintcannon.js reads the same variable, so the
   barrel length, splat size and throw arc scale with it.

   Consumes from the host page: --ink, --paper, --accent.
   ============================================================ */

.pc {
  --pcs: 0.6;
  --pc-ground: var(--paper, #ffffff);
  --pc-tape-col: #e6d7a6;
  --pc-gaffer: var(--ink, #2b2a24);
  position: relative;
  max-width: 470px;
}

/* ---------- the taped rectangle ---------- */

.pc-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.pc-canvas {
  position: absolute;
  inset: 0;
  background: var(--pc-ground);
  overflow: hidden;
  cursor: crosshair;
  touch-action: manipulation;
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .55);
}

.pc-canvas:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* masking tape: translucent, fibrous, a touch glossy, sitting on top */
.pc-tape {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-color: var(--pc-tape-col);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 calc(1px * var(--pcs)), rgba(255,255,255,0) calc(1px * var(--pcs)) calc(5px * var(--pcs)), rgba(120,96,40,.05) calc(5px * var(--pcs)) calc(7px * var(--pcs))),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10) 30%, rgba(255,255,255,0) 55%, rgba(107,84,30,.16) 88%, rgba(107,84,30,.28));
  opacity: .93;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(120,96,40,.35),
    0 3px 7px -3px rgba(60,45,10,.55),
    0 10px 18px -14px rgba(0,0,0,.6);
  clip-path: polygon(0 7%,5% 0,13% 6%,24% 1%,35% 7%,47% 1%,58% 7%,70% 2%,81% 7%,91% 1%,97% 6%,100% 2%,100% 95%,93% 100%,83% 94%,72% 100%,61% 95%,49% 100%,37% 94%,26% 100%,15% 95%,6% 100%,0 96%);
}

.pc-tape::after {                     /* sheen where the light catches it */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(178deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 52%);
}

.pc-tape.top {
  top: calc(-15px * var(--pcs));
  left: calc(-30px * var(--pcs));
  right: calc(-30px * var(--pcs));
  height: calc(50px * var(--pcs));
  transform: rotate(-.55deg);
}
.pc-tape.bottom {
  bottom: calc(-15px * var(--pcs));
  left: calc(-30px * var(--pcs));
  right: calc(-30px * var(--pcs));
  height: calc(50px * var(--pcs));
  transform: rotate(.45deg);
}

.pc-tape.left,
.pc-tape.right {
  top: calc(-26px * var(--pcs));
  bottom: calc(-26px * var(--pcs));
  width: calc(48px * var(--pcs));
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 calc(1px * var(--pcs)), rgba(255,255,255,0) calc(1px * var(--pcs)) calc(5px * var(--pcs)), rgba(120,96,40,.05) calc(5px * var(--pcs)) calc(7px * var(--pcs))),
    linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,.10) 30%, rgba(255,255,255,0) 55%, rgba(107,84,30,.16) 88%, rgba(107,84,30,.28));
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.55),
    inset -1px 0 0 rgba(120,96,40,.35),
    3px 0 7px -3px rgba(60,45,10,.55);
  clip-path: polygon(7% 0,0 5%,6% 13%,1% 24%,7% 35%,1% 47%,7% 58%,2% 70%,7% 81%,1% 91%,6% 97%,2% 100%,95% 100%,100% 93%,94% 83%,100% 72%,95% 61%,100% 49%,94% 37%,100% 26%,95% 15%,100% 6%,96% 0);
}
.pc-tape.left::after,
.pc-tape.right::after {
  background: linear-gradient(88deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 52%);
}
.pc-tape.left  { left:  calc(-15px * var(--pcs)); transform: rotate(.6deg); }
.pc-tape.right { right: calc(-15px * var(--pcs)); transform: rotate(-.5deg); }

/* ---------- the spout ---------- */

.pc-nozzle {
  position: absolute;
  z-index: 4;
  width: calc(30px * var(--pcs));
  height: calc(74px * var(--pcs));
  margin-left: calc(-15px * var(--pcs));
  margin-top: calc(-74px * var(--pcs));
  transform-origin: 50% 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.pc-nozzle.live { opacity: 1; }

.pc-barrel {
  position: absolute;
  inset: 0;
  border-radius: calc(14px * var(--pcs)) calc(14px * var(--pcs)) calc(4px * var(--pcs)) calc(4px * var(--pcs));
  background: linear-gradient(90deg,#0b0b08,#3a3a31 42%,#4a4a40 52%,#16160f 78%,#000);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 8px 18px -10px rgba(0,0,0,.9);
}
.pc-barrel::after {                   /* muzzle ring, loaded with the current colour */
  content: '';
  position: absolute;
  left: 50%;
  top: calc(5px * var(--pcs));
  width: calc(16px * var(--pcs));
  height: calc(16px * var(--pcs));
  margin-left: calc(-8px * var(--pcs));
  border-radius: 50%;
  background: var(--load, #ff1500);
  box-shadow: 0 0 0 calc(3px * var(--pcs)) rgba(0,0,0,.55), 0 0 14px -2px var(--load, #ff1500);
}
.pc-nozzle.fire .pc-barrel { animation: pc-recoil .3s cubic-bezier(.2,.9,.3,1); }
@keyframes pc-recoil {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(calc(14px * var(--pcs))); }
  100% { transform: translateY(0); }
}

/* touch never hovers, so the spout rests visible there */
@media (hover: none) { .pc-nozzle { opacity: 1; } }

/* ---------- flight + splat ---------- */

.pc-flying {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.pc-splat {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transform-origin: center;
  animation: pc-land .26s cubic-bezier(.15,1.5,.4,1) both;
}
@keyframes pc-land {
  from { opacity: .6; transform: scale(.42) rotate(var(--r)); }
  to   { opacity: 1;  transform: scale(1)   rotate(var(--r)); }
}
.pc-splat.out { animation: pc-lift .45s cubic-bezier(.4,0,.7,0) forwards; }
@keyframes pc-lift {
  to { opacity: 0; transform: scale(.55) rotate(var(--r)); }
}

/* ---------- swatches ---------- */

.pc-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(20px * var(--pcs));
  margin-top: calc(34px * var(--pcs));
}
.pc-tray {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--pcs));
  flex-wrap: wrap;
}
.pc-swatch {
  width: calc(48px * var(--pcs));
  height: calc(48px * var(--pcs));
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 3px rgba(0,0,0,.22), 0 10px 18px -12px rgba(0,0,0,.7);
  transition: transform .3s cubic-bezier(.2,1.35,.5,1), box-shadow .3s ease;
}
.pc-swatch:hover { transform: translateY(calc(-5px * var(--pcs))); }
.pc-swatch[aria-pressed="true"] {
  transform: translateY(calc(-11px * var(--pcs)));
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 6px var(--pc-gaffer),
    0 14px 22px -12px rgba(0,0,0,.7);
}
.pc-swatch:focus-visible { outline: 3px solid var(--pc-gaffer); outline-offset: 5px; }

.pc-swatch.custom {
  background:
    radial-gradient(circle at 50% 50%, var(--picked,#8a2be2) 0 34%, rgba(255,255,255,0) 35%),
    conic-gradient(#ff1500,#ff7a00,#ffd400,#00b83f,#00c8d7,#0044ff,#8a2be2,#ff007f,#ff1500);
}

.pc-picker {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--pcs));
  flex-wrap: wrap;
  animation: pc-reveal .42s cubic-bezier(.2,.9,.3,1) both;
}
.pc-picker[hidden] { display: none; }
.pc-picker.closing { animation: pc-conceal .34s ease forwards; }
@keyframes pc-reveal  { from { opacity: 0; transform: translateY(-10px) scaleY(.86); } to { opacity: 1; transform: none; } }
@keyframes pc-conceal { to   { opacity: 0; transform: translateY(-8px) scaleY(.9); } }

.pc-ramp {
  position: relative;
  width: calc(190px * var(--pcs));
  height: calc(26px * var(--pcs));
  border-radius: calc(13px * var(--pcs));
  cursor: crosshair;
  box-shadow: inset 0 0 0 2px var(--pc-gaffer), 0 3px 8px -6px rgba(0,0,0,.7);
  touch-action: none;
}
.pc-ramp.hue {
  background: linear-gradient(90deg,
    hsl(0 100% 50%), hsl(45 100% 50%), hsl(90 100% 40%), hsl(150 100% 38%),
    hsl(195 100% 45%), hsl(240 100% 52%), hsl(285 100% 50%), hsl(330 100% 50%), hsl(360 100% 50%));
}
.pc-ramp i {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(20px * var(--pcs));
  height: calc(20px * var(--pcs));
  margin: calc(-10px * var(--pcs)) 0 0 calc(-10px * var(--pcs));
  border-radius: 50%;
  background: var(--picked, #8a2be2);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pc-gaffer);
  transition: left .12s linear;
  pointer-events: none;
}
.pc-ramp:focus-visible { outline: 3px solid var(--pc-gaffer); outline-offset: 5px; }

.pc-clear {
  border: 2px solid var(--pc-gaffer);
  background: transparent;
  color: var(--pc-gaffer);
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.pc-clear:hover { background: var(--pc-gaffer); color: var(--pc-ground); }
.pc-clear:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pc-splat { animation-duration: .01ms; }
  .pc-swatch { transition-duration: .01ms; }
  .pc-nozzle.fire .pc-barrel { animation: none; }
}