/* Everything sits in the night with the pumpkins: no side panel, no cards. Printed labels, ink and kraft, one loud
   orange. One thing on screen at a time. */

/* a toy, not a document: no double-tap zoom or page bounce anywhere, and the 3D view keeps every touch for itself */
html, body { touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#view { position: fixed; inset: 0; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; opacity: 0; transition: opacity 0.6s; }
/* the title paints straight from the HTML; the gourds fade in on the first frame */
body.drawn #gl { opacity: 1; }
#gl:active { cursor: grabbing; }
body[data-step=choose] #gl, body[data-step=stencil] #gl { cursor: default; }
body[data-step=carve] #gl { cursor: crosshair; }

.quiet {
  padding: 6px 4px; background: none; border: 0; color: var(--bone); cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.quiet:hover, .quiet:focus-visible { border-bottom-color: var(--orange); outline: none; }
.btn {
  padding: 7px 14px;
  background: var(--bone); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-body); font-weight: 600; cursor: pointer;
}
.btn:active { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.hot { background: var(--orange); box-shadow: 3px 3px 0 var(--orange-deep); }
.btn.wide { width: 100%; margin-top: 8px; }
.btn.small { padding: 2px 8px; margin-left: 10px; font-size: 12px; }

/* ---- the step line */
.top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 18px 0; pointer-events: none;
}
.top > * { pointer-events: auto; }

/* ---- step 1 */
@font-face { font-family: "Creepster"; src: url(fonts/creepster.woff2) format("woff2"); font-display: swap; }
.hello { position: absolute; inset: 0; pointer-events: none; }
.arch {
  position: absolute; left: 0; right: 0; top: 7vh; margin: 0; text-align: center; white-space: nowrap;
  font-family: "Creepster", var(--font-display); font-weight: 400; font-size: clamp(44px, 8.4vw, 112px); line-height: 1; color: var(--orange);
}
/* chunky letters: a stack of darker copies under each one, so they stand off the night like cut card */
.arch-l {
  display: inline-block;
  transform: translateY(var(--y)) rotate(var(--r));
  /* always dancing: each letter bobs on its own beat */
  animation: bob var(--bt, 1.3s) ease-in-out var(--bd, 0s) infinite alternate;
  text-shadow: 1px 1px 0 #c85a10, 2px 2px 0 #b8480c, 3px 3px 0 #a33f0a, 4px 4px 0 #8a3408, 5px 6px 0 #5e2304, 7px 10px 14px rgba(0, 0, 0, 0.7);
}
.arch-l.sp { width: 0.3em; }
@keyframes bob { from { translate: 0 0.05em; rotate: -3deg; } to { translate: 0 -0.09em; rotate: 3deg; } }
@media (prefers-reduced-motion: reduce) { .arch-l { animation: none; } }
.hh {
  position: absolute; left: 0; right: 0; bottom: 9vh; margin: 0; text-align: center;
  font-family: "Creepster", var(--font-display); font-size: clamp(26px, 3.6vw, 46px); letter-spacing: 0.08em; color: var(--wax);
  text-shadow: 2px 3px 0 #6b4a10, 0 0 24px rgba(255, 180, 60, 0.25); transform: rotate(-1.5deg);
}
.side-b {
  position: absolute; top: 50%; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 112px; padding: 12px 6px; background: rgba(11, 10, 16, 0.5); color: var(--bone);
  border: 1.5px dashed rgba(239, 228, 204, 0.45); font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.15; cursor: pointer;
}
.side-b:hover { color: var(--wax); border-color: var(--orange); }
.rand-b {
  position: absolute; right: 4vw; top: 50%; translate: 0 -50%; width: 140px; height: auto; padding: 0; background: none; border: 0;
  pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
/* a white die with purple spots, turning slowly; a click throws it */
.die-cam { perspective: 560px; width: 86px; height: 86px; filter: drop-shadow(5px 9px 8px rgba(0, 0, 0, 0.6)); }
.die { position: relative; display: block; width: 86px; height: 86px; transform-style: preserve-3d; animation: die-idle 14s linear infinite; }
.rand-b:hover .die-cam, .rand-b:focus-visible .die-cam { scale: 1.08; }
.rand-b:focus-visible { outline: 2px dashed var(--wax); outline-offset: 4px; border-radius: 12px; }
/* the idle turn takes up again after the throw under another name: the same name would carry on from where it was and win over the roll */
.rand-b.roll .die { animation: die-roll 1.8s cubic-bezier(.1, .75, .25, 1), die-idle-2 14s linear 1.8s infinite; }
.die-f {
  position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 11px; gap: 4px; box-sizing: border-box;
  background: radial-gradient(120% 120% at 25% 20%, #ffffff, #e9e3f0 70%, #cfc4dc); border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(80, 40, 120, 0.12), inset -4px -5px 8px rgba(70, 30, 110, 0.18); backface-visibility: hidden;
}
.die-f i { display: block; }
.die-f .pip { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #a865e6, #6a2fa3 60%, #3d1466); box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.45); }
.die-core { position: absolute; inset: 1px; background: #d8cfe3; }
.c1 { transform: translateZ(41.5px); } .c6 { transform: rotateY(180deg) translateZ(41.5px); }
.c2 { transform: rotateY(90deg) translateZ(41.5px); } .c5 { transform: rotateY(-90deg) translateZ(41.5px); }
.c3 { transform: rotateX(90deg) translateZ(41.5px); } .c4 { transform: rotateX(-90deg) translateZ(41.5px); }
.rand-l { display: block; margin-top: 16px; font-family: var(--font-display); font-size: 22px; color: var(--bone); text-shadow: 2px 2px 0 #000; }
.rand-b:hover .rand-l { color: var(--wax); }
.f1 { transform: translateZ(43px); }
.f6 { transform: rotateY(180deg) translateZ(43px); }
.f2 { transform: rotateY(90deg) translateZ(43px); }
.f5 { transform: rotateY(-90deg) translateZ(43px); }
.f3 { transform: rotateX(90deg) translateZ(43px); }
.f4 { transform: rotateX(-90deg) translateZ(43px); }
@keyframes die-idle { from { transform: rotateX(-24deg) rotateY(0deg) rotateZ(8deg); } to { transform: rotateX(-24deg) rotateY(360deg) rotateZ(8deg); } }
@keyframes die-idle-2 { from { transform: rotateX(-24deg) rotateY(0deg) rotateZ(8deg); } to { transform: rotateX(-24deg) rotateY(360deg) rotateZ(8deg); } }
@keyframes die-roll {
  from { transform: rotateX(-24deg) rotateY(0deg) rotateZ(8deg); }
  to { transform: rotateX(-24deg) rotateY(1800deg) rotateZ(8deg); }
}
@media (prefers-reduced-motion: reduce) { .die, .rand-b.roll .die { animation: none; transform: rotateX(-24deg) rotateY(-30deg); } }
.ico { display: inline-flex; }
.pick-b {
  position: absolute; left: 50%; top: calc(7vh + clamp(44px, 8.4vw, 112px) * 1.2); translate: -50% 0; pointer-events: auto; padding: 4px 8px; background: none; border: 0;
  color: var(--bone); font-family: var(--font-display); font-size: 32px; text-decoration: underline dashed rgba(239, 228, 204, 0.5); text-underline-offset: 5px; cursor: pointer;
}
.pick-b:hover, .pick-b:focus-visible { color: var(--wax); text-decoration-color: var(--orange); outline: none; }
.picker {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 6; pointer-events: auto;
  width: min(700px, 92vw); max-height: 80vh; max-height: 80dvh; overflow: auto; padding: 16px 20px 20px;
}
.picker[hidden] { display: none; }
.picker-h { margin: 0 0 12px; font-weight: 400; font-size: 34px; color: #ffd36a; text-shadow: 2px 2px 0 #1d0a33; }
.picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pick-row {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 10px; text-align: center; background: rgba(29, 10, 51, 0.45); color: #f3e6ff;
  border: 1.5px solid rgba(243, 230, 255, 0.25); border-radius: 10px 14px 9px 13px; font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.15; cursor: pointer;
}
.pick-row:hover, .pick-row:focus-visible { background: rgba(255, 211, 106, 0.18); border-color: #ffd36a; outline: none; }
/* public/gourds.webp: a row per variety, 24 frames of 112px; --s is the drawn size of one frame */
.pick-spin {
  --s: min(104px, 11vh); flex: none; width: var(--s); height: var(--s); border-radius: 12px 16px 10px 14px; background: #08070b url(gourds.webp) no-repeat;
  background-size: calc(var(--s) * 24) calc(var(--s) * 16); background-position: 0 calc(var(--row) * var(--s) * -1);
  animation: gourd-turn 2.6s steps(24) infinite;
}
@keyframes gourd-turn { to { background-position-x: calc(var(--s) * -24); } }
@media (prefers-reduced-motion: reduce) { .pick-spin { animation: none; } }
body:not([data-step=choose]) .hello { display: none; }

.marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.marks > *, .labels > * { pointer-events: auto; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.gourd-label { position: absolute; left: 0; top: 0; padding: 0; background: none; border: 0; cursor: pointer; perspective: 600px; }
/* a sticky label: paper, a gloss, a lifted corner; it slaps on with a wobble and peels away from one corner */
.sticker {
  position: relative; display: block; white-space: nowrap; padding: 0.3em 0.75em 0.36em; rotate: var(--tilt, -3deg);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%), #f4ecd7;
  color: #2a1d0e; border-radius: 12px; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.5);
  font-family: var(--font-display); font-size: clamp(24px, 2.9vw, 44px); letter-spacing: 0.01em;
  transform-origin: 0% 0%; animation: stick 0.6s cubic-bezier(.25, 1.5, .45, 1) both;
}
.sticker::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 0.6em; height: 0.6em; border-radius: 0 0 12px 0;
  background: linear-gradient(315deg, transparent 48%, #d9cdb0 50%, #fff8e4 75%);
  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2);
}
.gourd-label:hover .sticker, .gourd-label.hot .sticker, .gourd-label:focus-visible .sticker { background: linear-gradient(170deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%), #ffe7a8; }
.gourd-label:focus-visible { outline: none; }
.gourd-label:focus-visible .sticker { outline: 2px dashed var(--wax); outline-offset: 3px; }
@keyframes stick {
  0% { opacity: 0; transform: rotateX(-70deg) rotateY(30deg) translateY(-14px) scale(1.15); }
  55% { opacity: 1; transform: rotateX(8deg) rotateY(-4deg) scale(0.97); }
  100% { transform: none; }
}
.gourd-label.peel .sticker { animation: peel 0.55s var(--pd, 0s) ease-in forwards; transform-origin: 100% 100%; }
@keyframes peel {
  0% { transform: none; clip-path: none; }
  40% { transform: rotate3d(1, -1, 0, 55deg) translateY(-4px); opacity: 1; }
  100% { transform: rotate3d(1, -1, 0, 110deg) translate(-12px, -60px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sticker, .gourd-label.peel .sticker { animation: none; } }

/* ---- the house action button: one blob of green goo whose edge drips (an SVG, the drips merged into the body by a blur and threshold) */
.goo {
  position: relative; display: inline-block; padding: 14px 48px 18px; border: 0; background: none; cursor: pointer;
  font-family: "Creepster", var(--font-display); font-size: 34px; line-height: 1; letter-spacing: 0.06em; color: #f6ffdc;
  text-shadow: 0 2px 0 #1b5a0a, 0 0 12px rgba(190, 255, 120, 0.55);
  filter: drop-shadow(0 6px 10px rgba(90, 255, 60, 0.28));
  transition: transform 0.12s, filter 0.2s;
}
.goo > span { position: relative; z-index: 1; }
.goo-svg { position: absolute; left: -3%; top: -4%; width: 106%; height: 150%; overflow: visible; pointer-events: none; }
.goo:hover, .goo:focus-visible { filter: brightness(1.12) saturate(1.1) drop-shadow(0 6px 10px rgba(90, 255, 60, 0.4)); outline: none; transform: scale(1.03) rotate(-1deg); }
.goo:active { transform: translateY(3px); }
.gd-stalk { transform-box: fill-box; transform-origin: 50% 0; animation: gd-stalk var(--t) ease-in-out var(--d) infinite; }
.gd-drop { animation: gd-drop var(--t) ease-in var(--d) infinite; }
.gd-sag { transform-box: fill-box; transform-origin: 50% 0; animation: gd-sag var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes gd-stalk {
  0% { transform: scaleY(0.08); }
  66% { transform: scaleY(1); }
  74% { transform: scaleY(1.05); }
  84%, 100% { transform: scaleY(0.08); }
}
@keyframes gd-drop {
  0% { transform: translateY(0); opacity: 1; }
  66% { transform: translateY(var(--l)); opacity: 1; }
  74% { transform: translateY(calc(var(--l) + 3px)); opacity: 1; }
  100% { transform: translateY(calc(var(--l) + 95px)); opacity: 0; }
}
@keyframes gd-sag { from { transform: scaleY(0.85); } to { transform: scaleY(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .gd-stalk, .gd-drop, .gd-sag { animation: none; }
  .gd-stalk { transform: scaleY(0.5); }
  .gd-drop { transform: translateY(calc(var(--l) * 0.5)); }
  .goo, .goo:hover { transition: none; transform: none; }
}

/* ---- step 2: the paper */
.sheet-host { position: absolute; top: 52px; right: 3vw; bottom: 16px; width: min(56vw, 760px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sheet { pointer-events: auto; display: flex; flex-direction: column; gap: 10px; perspective: 1400px; }
.sheet-h { margin: 0 0 0 136px; font-family: var(--font-display); font-size: 26px; color: var(--bone); transform: rotate(-1deg); }
.sheet-desk { display: flex; gap: 12px; align-items: flex-start; }
.sheet-tools { display: flex; flex-direction: column; gap: 20px; width: 124px; flex: none; }
.sheet-act {
  padding: 6px 4px; background: rgba(11, 10, 16, 0.55); color: var(--bone); border: 1.5px solid rgba(239, 228, 204, 0.35);
  font-family: var(--font-body); font-size: 12px; cursor: pointer;
}
/* chunks of pumpkin: rind along the bottom edge, a flesh face with fibres, a seed or two; each its own colour. The carve tools wear the same */
.piece {
  --c: #ff8a1f; --rind: color-mix(in srgb, var(--c) 40%, #3a5a12); --cd: color-mix(in srgb, var(--c) 60%, #000);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px 20px; min-height: 76px; cursor: pointer;
  color: #1a1209; border: 0; border-radius: 10px 14px 46% 54% / 10px 12px 70% 64%;
  background:
    repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 11px),
    radial-gradient(120% 100% at 30% 0%, color-mix(in srgb, var(--c) 72%, #fff), var(--c) 60%, var(--cd));
  box-shadow: inset 0 -11px 0 var(--rind), inset 0 -13px 0 rgba(0, 0, 0, 0.18), inset 0 2px 2px rgba(255, 255, 255, 0.5), 3px 4px 0 rgba(0, 0, 0, 0.6);
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1;
  transform: rotate(var(--r, 0deg)); transition: transform 0.15s, filter 0.15s;
}
.piece::before, .piece::after {
  content: ""; position: absolute; width: 11px; height: 6px; border-radius: 50%; background: #fff4c9; border: 1px solid rgba(90, 50, 0, 0.55); pointer-events: none;
}
.piece::before { right: 14%; top: 14%; transform: rotate(-28deg); }
.piece::after { left: 12%; bottom: 30%; transform: rotate(24deg); width: 9px; height: 5px; }
.piece:nth-child(odd) { --r: -1.6deg; }
.piece:nth-child(even) { --r: 1.3deg; }
.piece:nth-child(3n)::before { right: auto; left: 16%; top: 18%; }
.piece:hover, .piece:focus-visible { filter: brightness(1.1); outline: none; transform: rotate(var(--r)) translateY(-2px); }
.piece.on { filter: brightness(1.15) drop-shadow(0 0 0.5px #fff); transform: rotate(0deg) scale(1.05); z-index: 1; }
/* the piece in hand: a thick white ghost round it, wobbling, little blobs rising off its top */
.shape-held { position: fixed; left: -36px; top: -36px; width: 72px; height: 72px; z-index: 40; pointer-events: none; opacity: 0.85; filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.5)); }
.shape-held svg { width: 100%; height: 100%; }
.ghost { position: absolute; inset: 0; pointer-events: none; }
.piece .ghost svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ghost path { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)); }
.ghost .blob { position: absolute; top: -14px; left: 24%; width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: 0; animation: rise 2.4s ease-out infinite; }
.ghost .blob:nth-of-type(2) { left: 55%; width: 7px; height: 7px; animation-delay: 0.8s; }
.ghost .blob:nth-of-type(3) { left: 78%; width: 11px; height: 11px; animation-delay: 1.6s; }
@keyframes rise {
  0% { opacity: 0.95; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.3); }
}
@media (prefers-reduced-motion: reduce) { .ghost .blob { animation: none; } }
.piece[data-tool=pen] { --c: #ff8a1f; }
.piece[data-tool=ruler] { --c: #f2c230; }
.piece[data-tool=shapes] { --c: #34c6a8; }
.piece[data-tool=move] { --c: #ee5a9a; }
.piece[data-tool=eraser] { --c: #5aa6ff; }
.sheet-tool svg { width: 34px; height: 34px; }
.sheet-tool { width: 124px; }
.sheet-hint { margin: -4px 0 0 136px; max-width: 46%; font-family: var(--font-body); font-size: 14px; color: var(--bone); opacity: 0.8; min-height: 2.6em; contain: inline-size; }
.sheet-size { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: 13px; color: var(--ink); background: rgba(238, 231, 214, 0.85); border: 1px solid rgba(21, 17, 13, 0.3); }
.sheet-size input { width: 90px; accent-color: var(--orange); }
.sheet-mirror-cb {
  position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 6px; cursor: pointer;
  font-size: 13px; color: var(--ink); background: rgba(238, 231, 214, 0.85); border: 1px solid rgba(21, 17, 13, 0.3);
}
.sheet-mirror-cb input { width: 18px; height: 18px; margin: 0; accent-color: #3c9646; cursor: pointer; }
.sheet-paper[data-tool=ruler] .sheet-size, .sheet-paper[data-tool=move] .sheet-size, .sheet-paper[data-tool=shapes] .sheet-size { display: none; }
.sheet-paper {
  position: relative; flex: none;
  width: min(calc(56vw - 70px), calc(100vh - 290px), 640px); aspect-ratio: 1;
  transform-origin: 50% 0; box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.55);
}
.sheet.in .sheet-paper { animation: flap 1.3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes flap {
  0% { transform: translateY(-40px) rotateX(-75deg) rotate(-4deg); opacity: 0; }
  35% { transform: translateY(0) rotateX(18deg) rotate(1.2deg); opacity: 1; }
  55% { transform: rotateX(-9deg) rotate(-0.8deg); }
  72% { transform: rotateX(5deg) rotate(-0.2deg); }
  86% { transform: rotateX(-2deg) rotate(-0.6deg); }
  100% { transform: rotateX(0) rotate(-0.6deg); }
}
.sheet-paper canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.sheet-paper[data-tool=ruler] canvas { cursor: cell; }
.sheet-paper[data-tool=move] canvas, .sheet-paper[data-tool=shapes] canvas { cursor: move; }
/* the ruler's rubber band: black ants marching over a white line */
.sheet-band { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sheet-band line { vector-effect: non-scaling-stroke; stroke-width: 2px; fill: none; }
.sheet-band .under { stroke: #fff; }
.sheet-band .ants { stroke: #15110d; stroke-dasharray: 6 6; animation: ants 0.5s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -12; } }
/* the move tool's box, corners and turn handle */
.sheet-handles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sheet-handles .hb { fill: none; stroke: #15110d; stroke-width: 1.5px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.sheet-handles .hs { fill: var(--wax); stroke: #15110d; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.sheet-brush .nib { fill: rgba(21, 17, 13, 0.08); stroke: #15110d; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sheet-brush .nib-rim { fill: none; stroke: rgba(255, 250, 240, 0.85); stroke-width: 4px; vector-effect: non-scaling-stroke; }
.sheet-brush .nib.rub { fill: rgba(255, 255, 255, 0.35); stroke-dasharray: 4 3; }
/* the mirror: a glass pane hinged on the centre line, tilted so its top corner rises over the paper's edge */
.sheet-mirror {
  position: absolute; top: -9%; bottom: 0; left: 50%; width: 50%; pointer-events: none; opacity: 0;
  --tilt: -7deg;
  clip-path: polygon(0 8.3%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.34) 41%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(160deg, rgba(150, 255, 170, 0.12), rgba(90, 210, 130, 0.04) 55%, rgba(120, 255, 160, 0.1));
  box-shadow: inset 4px 0 0 rgba(190, 240, 205, 0.85), inset 0 0 0 1px rgba(200, 255, 220, 0.4), inset 0 0 40px rgba(130, 255, 170, 0.14);
  transform-origin: 0 50%; transform: perspective(1100px) rotateY(var(--tilt));
}
.sheet.mirrored .sheet-mirror { opacity: 1; }
.sheet-mirror.fly-off { animation: fly-off 0.9s cubic-bezier(.5, 0, .7, .4) both; }
.sheet-mirror.fly-in { animation: fly-in 0.9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes fly-off {
  0% { transform: perspective(1100px) rotateY(-7deg); opacity: 1; }
  30% { transform: perspective(1100px) rotateY(-30deg) translateY(-3%); opacity: 1; }
  100% { transform: perspective(1100px) translate(160%, -90%) rotateY(-80deg) rotate(25deg); opacity: 0; }
}
@keyframes fly-in {
  0% { transform: perspective(1100px) translate(160%, -90%) rotateY(-80deg) rotate(25deg); opacity: 0; }
  62% { transform: perspective(1100px) rotateY(-22deg); opacity: 1; }
  80% { transform: perspective(1100px) rotateY(-4deg); opacity: 1; }
  100% { transform: perspective(1100px) rotateY(-7deg); opacity: 1; }
}
/* a paper sticker on the raised corner, one edge curling */
@keyframes pop-in { from { opacity: 0; transform: translate(120%, -80%) rotate(30deg); } to { opacity: 1; transform: rotate(-2deg); } }
.sheet-foot { display: flex; justify-content: center; align-items: flex-start; padding: 4px 0 18px 74px; min-height: 76px; }
.sheet-carve { padding: 10px 34px 13px; font-family: "Creepster", var(--font-display); font-size: 32px; letter-spacing: 0.05em; }
.sheet.leaving .sheet-h, .sheet.leaving .sheet-hint, .sheet.leaving .sheet-size, .sheet.leaving .sheet-tools, .sheet.leaving .sheet-foot, .sheet.leaving .sheet-mirror-cb, .sheet-ui.leaving { opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.sheet.leaving .sheet-paper { animation: none; transform: rotate(-0.6deg); }
.sheet.leaving .sheet-mirror { opacity: 0; transition: opacity 0.2s; }

/* the table of symbols, in the gourd's place */
.shapes {
  position: absolute; left: 3vw; top: 70px; bottom: 90px; width: min(44vw, 560px); padding: 12px 14px; overflow: auto;
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.6);
}
.shapes[hidden] { display: none; }
.shapes-h { margin: 0 0 8px; font-family: "Creepster", var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: 0.05em; }
.shapes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.shape-b {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 6px; background: none; color: var(--ink);
  border: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: 14px; cursor: pointer;
}
.shape-b svg { width: 58px; height: 58px; transition: transform 0.15s; }
.shape-b:hover, .shape-b:focus-visible { background: var(--wax); outline: none; }
.shape-b:hover svg { transform: rotate(-6deg) scale(1.08); }
.sheet-ui.shapes-on .faces, .sheet-ui.shapes-on .sheet-files { display: none; }

/* purple and wobbly: the house box for modals and information, a hand-cut card that never quite sits still */
.purple {
  background: linear-gradient(160deg, #6a2fa3, #43186f); color: #f3e6ff; border: 3px solid #1d0a33;
  border-radius: 16px 26px 14px 28px / 26px 14px 24px 16px; box-shadow: 4px 5px 0 #1d0a33, inset 0 2px 0 rgba(255, 255, 255, 0.18);
  font-family: "Creepster", var(--font-display); letter-spacing: 0.04em; animation: wobble 5s ease-in-out infinite;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-0.7deg) skewX(0.4deg); border-radius: 16px 26px 14px 28px / 26px 14px 24px 16px; }
  33% { transform: rotate(0.6deg) skewX(-0.5deg); border-radius: 20px 22px 18px 24px / 22px 18px 26px 14px; }
  66% { transform: rotate(-0.3deg) skewX(0.3deg); border-radius: 14px 28px 16px 24px / 24px 16px 22px 20px; }
}
@media (prefers-reduced-motion: reduce) { .purple, .purple::after { animation: none !important; } }
/* the secondary button: purple, white text, no drips, the edge never quite still. Green goo stays the main action */
.purp {
  padding: 8px 20px 9px; background: linear-gradient(160deg, #7b37ba, #4b1a7a); color: #fff; border: 3px solid #1d0a33;
  border-radius: 14px 22px 12px 24px / 22px 12px 20px 14px; box-shadow: 3px 4px 0 #1d0a33, inset 0 2px 0 rgba(255, 255, 255, 0.22);
  font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: 0.01em; text-shadow: 1px 1px 0 #1d0a33; cursor: pointer;
  animation: wibble 3.4s ease-in-out infinite; transition: filter 0.15s, scale 0.15s;
}
.purp:nth-of-type(2n) { animation-delay: -1.3s; }
.purp:hover, .purp:focus-visible { filter: brightness(1.18); scale: 1.04; outline: none; }
.purp:focus-visible { box-shadow: 3px 4px 0 #1d0a33, 0 0 0 3px #ffd36a; }
.purp:active { scale: 0.97; }
/* on a purple card it takes a lighter purple and a pale rim */
.purple .purp { background: linear-gradient(160deg, #9a55d8, #6a2fa3); border-color: #f3e6ff; }
@keyframes wibble {
  0%, 100% { border-radius: 14px 22px 12px 24px / 22px 12px 20px 14px; rotate: -0.6deg; }
  25% { border-radius: 20px 14px 22px 12px / 14px 22px 12px 20px; rotate: 0.4deg; }
  50% { border-radius: 12px 24px 16px 18px / 20px 16px 22px 12px; rotate: -0.2deg; }
  75% { border-radius: 22px 16px 20px 14px / 12px 20px 16px 22px; rotate: 0.6deg; }
}
.purp.round, .sheet-ib.purp { border-radius: 50%; padding: 0; animation-name: wibble-round; }
@keyframes wibble-round {
  0%, 100% { border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%; rotate: -2deg; }
  50% { border-radius: 47% 53% 46% 54% / 53% 47% 54% 46%; rotate: 2deg; }
}
@media (prefers-reduced-motion: reduce) { .purp { animation: none; } }

/* the controls round the gourd */
.sheet-ui { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.sheet-ui > * { pointer-events: auto; }
/* the top bar, top left of the column: Back (stencil and carve), Quality, and on the porch Edit scene and Clear scene */
.topbar {
  position: absolute; left: calc(var(--side, 0px) + max(14px, env(safe-area-inset-left))); top: max(12px, env(safe-area-inset-top));
  z-index: 6; display: flex; align-items: flex-start; gap: 10px;
}
.top-b { display: flex; align-items: center; gap: 8px; padding: 6px 14px 7px 9px; font-size: 16px; white-space: nowrap; }
.top-b .ico, .top-b .ico svg { display: block; width: 20px; height: 20px; }
body:not([data-step=stencil]):not([data-step=carve]):not(.photo-on) .back-b, body[data-flying] .back-b { display: none; }
body:not([data-step=porch]) :is(.scene-b, .clear-b), body.viewing :is(.back-b, .scene-b, .clear-b) { display: none; }
body.photo-on :is(.scene-b, .clear-b, .porch-ui, .marks) { display: none; }
.quality { position: relative; }
.quality-m { position: absolute; left: 0; top: calc(100% + 10px); display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 8px; }
.quality-m[hidden] { display: none; }
.q-item {
  display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #fff; text-align: left;
  font-family: var(--font-body); font-size: 17px; text-shadow: 1px 1px 0 #1d0a33; cursor: pointer;
}
.q-item small { opacity: 0.75; font-size: 0.8em; }
.q-item:hover, .q-item:focus-visible { background: rgba(255, 255, 255, 0.14); outline: none; }
.q-item.on { background: rgba(255, 255, 255, 0.24); box-shadow: inset 0 0 0 2px #f3e6ff; }
.carve-undo { display: flex; align-items: center; gap: 8px; padding: 9px 18px 10px 13px; font-size: 20px; }
.carve-undo svg { width: 22px; height: 22px; }
/* the face select sits in the middle, over the top of the screen */
.faces { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); width: min(300px, 38vw); translate: -50% 0; z-index: 5; }
/* drop-downs are spooky white, bone with an inky rim; buttons stay purple */
.faces-b {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 16px 11px; text-align: left; cursor: pointer;
  background: linear-gradient(170deg, #fbf6e9, #e4dcc6); color: #1d0a33; border: 3px solid #1d0a33; border-radius: 14px 22px 12px 24px / 22px 12px 20px 14px;
  box-shadow: 3px 4px 0 #1d0a33, inset 0 -3px 0 rgba(29, 10, 51, 0.12), 0 0 14px rgba(240, 235, 255, 0.25);
  font-family: var(--font-body); font-size: 19px; font-weight: 600; animation: wibble 3.4s ease-in-out infinite;
}
.faces-b:hover, .faces-b:focus-visible { filter: brightness(1.05); outline: none; box-shadow: 3px 4px 0 #1d0a33, 0 0 0 3px #ffd36a; }
.faces-b > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faces-caret { flex: none; width: 0; height: 0; border: 7px solid transparent; border-top-color: #1d0a33; border-bottom: 0; }
.faces-b[aria-expanded=true] .faces-caret { transform: rotate(180deg); }
.faces-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 3; max-height: min(52vh, 420px); overflow: auto;
  background: var(--bone); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--orange-deep);
}
.faces-list[hidden] { display: none; }
.faces-o { display: block; width: 100%; min-height: 44px; padding: 9px 14px; text-align: left; background: none; border: 0; border-bottom: 1px dashed rgba(21, 17, 13, 0.3); color: var(--ink); font-size: 16px; cursor: pointer; }
.faces-o:hover, .faces-o:focus-visible { background: var(--wax); outline: none; }
.sheet-files { position: absolute; left: 3vw; bottom: 84px; display: flex; gap: 8px; }
.sheet-files { gap: 14px; }
.sheet-files .purp { padding: 7px 16px 8px; font-size: 15px; }
.sheet-edit { position: absolute; left: 96px; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.sheet-ib {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: rgba(11, 10, 16, 0.6); color: var(--bone); border: 1.5px solid rgba(239, 228, 204, 0.45); cursor: pointer;
}
.sheet-ib svg { width: 26px; height: 26px; }
.sheet-ib:hover, .sheet-ib:focus-visible { color: var(--wax); border-color: var(--orange); outline: none; }
.sheet-ib.purp { background: linear-gradient(160deg, #7b37ba, #4b1a7a); color: #fff; border: 3px solid #1d0a33; }
.sheet-ib.purp:hover, .sheet-ib.purp:focus-visible { color: #ffd36a; border-color: #1d0a33; }
.sheet-ib::after {
  content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; translate: 0 -50%; padding: 4px 12px 5px; opacity: 0; pointer-events: none;
  background: linear-gradient(160deg, #6a2fa3, #43186f); color: #f3e6ff; border: 2px solid #1d0a33; border-radius: 10px 16px 9px 15px / 15px 9px 14px 10px;
  box-shadow: 2px 3px 0 #1d0a33; font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
.sheet-ib:hover::after, .sheet-ib:focus-visible::after { opacity: 1; animation: tip-shake 0.45s ease-out; }
@keyframes tip-shake {
  0% { transform: translateX(10px) rotate(0); opacity: 0; }
  25% { transform: translateX(-4px) rotate(-3deg); opacity: 1; }
  45% { transform: translateX(3px) rotate(2.5deg); }
  65% { transform: translateX(-2px) rotate(-1.5deg); }
  85% { transform: translateX(1px) rotate(0.8deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet-ib:hover::after, .sheet-ib:focus-visible::after { animation: none; } .sheet-band .ants { animation: none; } }
.print-dlg { width: min(92vw, 480px); }
.print-dlg { padding: 20px 24px 22px; box-shadow: 6px 7px 0 #1d0a33; overflow: visible; }
.print-dlg::backdrop { background: rgba(8, 2, 16, 0.7); }
.print-h { margin: 0 0 10px; font-weight: 400; font-size: 34px; line-height: 1.05; color: #ffd36a; text-shadow: 2px 2px 0 #1d0a33; }
.print-p { margin: 0 0 6px; font-family: var(--font-body); font-size: 17px; line-height: 1.4; }
.print-dlg .row { align-items: center; gap: 12px; margin-top: 16px; }
.print-dlg .btn { font-family: var(--font-body); font-weight: 700; font-size: 15px; background: #f3e6ff; box-shadow: 2px 2px 0 #1d0a33; border-color: #1d0a33; }
.goo.small { font-size: 26px; padding: 8px 32px 12px; }

/* ---- step 3: carving */
/* the questions are purple wobbly cards; their main answer is the green goo */
.carve-cards { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.carve-card {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: auto; text-align: center;
  padding: 20px 28px 38px; max-width: calc(100vw - 24px); width: max-content;
}
.carve-card.review, .carve-card.ask { top: auto; bottom: max(40px, env(safe-area-inset-bottom)); translate: -50% 0; }
/* the cards at the foot pop up from below and hop, so they can't be missed */
.carve-card.review { padding: 26px 40px 44px; animation: wobble 5s ease-in-out 0.9s infinite, popjump 0.9s cubic-bezier(.3, 1.4, .5, 1) both; }
.carve-card.review .card-q { font-size: 52px; margin-bottom: 24px; }
.carve-card.review .goo { font-size: 38px; padding: 10px 48px 16px; }
@keyframes popjump {
  0% { scale: 0.3; translate: -50% 120%; opacity: 0; }
  40% { scale: 1.06; translate: -50% -18px; opacity: 1; }
  60% { scale: 0.97; translate: -50% 0; }
  78% { scale: 1.02; translate: -50% -8px; }
  100% { scale: 1; translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) { .carve-card.review { animation: none; } }
/* the porch's remove question still uses this */
.ask-q { margin: 0 0 14px; font-family: "Creepster", var(--font-display); font-size: 30px; color: var(--wax); letter-spacing: 0.04em; }
.card-q { margin: 0 0 20px; font-size: 34px; line-height: 1.05; color: #ffd36a; text-shadow: 2px 2px 0 #1d0a33; }
.ask-row { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* the quiet answer beside a goo button, as on the remove card */
.card-b {
  padding: 7px 22px; background: transparent; color: #f3e6ff; border: 2px solid rgba(243, 230, 255, 0.55); border-radius: 999px;
  font-family: var(--font-body); font-size: 17px; cursor: pointer;
}
.card-b:hover, .card-b:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: #f3e6ff; outline: none; }
.card-b.small { margin: 4px 0 0; padding: 4px 14px; font-size: 13px; }
.carve-card .goo { font-size: 30px; padding: 10px 40px 14px; }

/* the tools are chunks of pumpkin, as on the paper */
.carve-tools {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 22px; width: 124px;
}
.hand { width: 124px; min-height: 66px; }
.hand svg { width: 30px; height: 30px; }
.piece[data-hand=knife] { --c: #f0563a; }
.piece[data-hand=scraper] { --c: #f2c230; }
.piece[data-hand=fill] { --c: #7ac943; }
.piece[data-hand=select] { --c: #ee5a9a; }
.piece[data-hand=spin] { --c: #7e8bff; }
/* size and depth for the tool in hand: a purple card in the gap right of the column, so nothing moves */
.tool-ctl {
  position: absolute; left: 172px; top: 50%; translate: 0 -50%; width: 240px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 14px; padding: 16px 22px 20px;
  background: linear-gradient(160deg, #7b37ba, #4b1a7a); color: #fff; border: 3px solid #1d0a33;
  border-radius: 14px 22px 12px 24px / 22px 12px 20px 14px; box-shadow: 3px 4px 0 #1d0a33, inset 0 2px 0 rgba(255, 255, 255, 0.22);
  font-family: var(--font-body); font-size: 24px; text-shadow: 1px 1px 0 #1d0a33; animation: wibble 4.2s ease-in-out infinite;
}
@media (max-width: 1500px) { .tool-ctl { zoom: 0.85; left: calc(166px / 0.85); } }
.tc { display: grid; grid-template-columns: 1fr; gap: 2px; }
.tc input { width: 100%; min-width: 0; margin: 0; height: 40px; accent-color: var(--orange); }

/* the hand-made sign for Stay within the lines: chalk on a board, a chalk box that takes a tick */
.lines {
  position: absolute; right: 22px; top: 50%; translate: 0 -50%; rotate: 2deg; display: block; width: 214px; cursor: pointer;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.55)); transition: rotate 0.2s;
}
.lines:hover { rotate: -1deg; }
.lines input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sign {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 14px 20px 20px;
  background:
    repeating-linear-gradient(177deg, rgba(0, 0, 0, 0.13) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, #70502e, #4b321a);
  border: 3px solid #24160a; border-radius: 5px 11px 6px 13px; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.14);
}
.sign::before, .sign::after { content: ""; position: absolute; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #c9c3b3; box-shadow: inset -1px -1px 0 #6c675b; }
.sign::before { left: 7px; }
.sign::after { right: 7px; }
.sign-t { font-family: "Creepster", var(--font-display); font-size: 27px; line-height: 0.98; letter-spacing: 0.05em; color: #f3f0e4; text-shadow: 0 0 3px rgba(255, 255, 255, 0.45), 1px 2px 0 rgba(0, 0, 0, 0.35); text-align: left; }
.chalk { flex: none; width: 60px; height: 60px; overflow: visible; }
.chalk-box { fill: rgba(255, 255, 255, 0.06); stroke: #f3f0e4; stroke-width: 3.6; stroke-linejoin: round; stroke-linecap: round; }
.chalk-tick { fill: none; stroke: #ffd36a; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 0.35s ease-out; }
.lines input:checked + .sign .chalk-tick { stroke-dashoffset: 0; }
.lines input:focus-visible + .sign { outline: 3px solid var(--wax); outline-offset: 3px; }

.carve-bar {
  position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
}
.carve-bar .sheet-ib { width: 52px; height: 52px; }
.sel-handles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sel-handles .hb { fill: none; stroke: #15110d; stroke-width: 2.5px; stroke-dasharray: 6 5; paint-order: stroke; }
.sel-handles .hs { fill: var(--wax); stroke: #15110d; stroke-width: 2.5px; }
.tip {
  position: fixed; z-index: 8; width: max-content; max-width: 250px; translate: 0 -50%; padding: 10px 14px 12px; text-align: left;
  font-family: var(--font-body); letter-spacing: 0;
}
.tip.under { translate: none; }
.tip p { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.tip::before { content: ""; position: absolute; left: -12px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-right-color: #1d0a33; border-left: 0; }
.tip.left::before { left: auto; right: -12px; border-right: 0; border-left: 8px solid #1d0a33; }
.tip.under::before { display: none; }
/* the first scrape: a curl of skin spins off the pumpkin and past the viewer */
.peel { position: fixed; z-index: 9; width: 90px; height: 90px; margin: -45px 0 0 -45px; pointer-events: none;
  animation: peel-off 1.5s cubic-bezier(.3, .1, .5, 1) forwards; }
.peel svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.peel path { stroke-width: 0.8px; stroke-linejoin: round; }
.peel .pe-in path { fill: #f6b85c; stroke: #f6b85c; }
.peel .pe-out path { fill: #d8670f; stroke: #d8670f; }
@media (prefers-reduced-motion: reduce) { .peel { display: none; } }
@keyframes peel-off {
  0% { transform: translate(0, 0) scale(0.25) rotate(0deg); opacity: 0; }
  12% { transform: translate(0, -24px) scale(0.55) rotate(-25deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(5.5) rotate(-110deg); opacity: 0; }
}
  position: fixed; z-index: 8; left: 50%; bottom: 110px; width: min(440px, 86vw); padding: 14px 20px 15px; text-align: center;
  font-family: var(--font-body); letter-spacing: 0; animation: wobble 5s .9s infinite, popjump 0.9s 0.9s backwards; transition: opacity .5s;
  translate: -50% 0;
}
@media (prefers-reduced-motion: reduce) { .badge, .leds i { animation: none; } }

/* ---- the porch */
body:not([data-step=porch]) .porch-ui { display: none; }
/* a wooden sign with a ring of little bulbs, hung on the right-hand railing (placed from main.ts); low on the left on a phone */
.add {
  position: absolute; left: 18px; bottom: calc(30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center;
  padding: 0; background: none; border: 0; color: #ffe2a8; cursor: pointer; transform-origin: 50% 0;
  font-family: "Creepster", var(--font-display); font-size: 26px; letter-spacing: 0.04em; text-shadow: 0 0 8px rgba(255, 170, 60, 0.7), 2px 2px 0 #1a0d04;
  transition: opacity 0.3s;
}
.add.hung { left: 0; top: 0; bottom: auto; }
.add.shy { opacity: 0.28; pointer-events: none; }
.badge-cord { display: none; width: 62%; height: 22px; border: 2px solid #8a8178; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; margin-bottom: -4px; }
.add.hung .badge-cord { display: block; }
.badge {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 26px 18px 18px; animation: sway 5s ease-in-out infinite; transform-origin: 50% -20px;
  background:
    repeating-linear-gradient(2deg, rgba(0, 0, 0, 0.13) 0 2px, transparent 2px 9px, rgba(255, 220, 160, 0.06) 9px 11px, transparent 11px 17px),
    linear-gradient(180deg, #7a4a26, #5a3218 55%, #43230f);
  border: 3px solid #2a1607; border-radius: 9px 12px 10px 14px; box-shadow: inset 0 2px 0 rgba(255, 210, 150, 0.25), inset 0 -4px 0 rgba(0, 0, 0, 0.3), 4px 6px 0 rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 150, 40, 0.25);
}
@keyframes sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.4deg; } }
.leds { position: absolute; inset: 5px; pointer-events: none; }
.leds i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 5px 2px rgba(255, 200, 90, 0.85), 0 0 12px rgba(255, 140, 30, 0.6); animation: led 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.23s); }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.add .jack svg { width: 64px; height: 58px; filter: drop-shadow(0 0 10px rgba(255, 140, 30, 0.6)) drop-shadow(2px 3px 0 #000); transition: transform 0.2s; }
.add:hover .jack svg { transform: rotate(-8deg) scale(1.08); }
.share-b {
  position: absolute; right: 18px; bottom: calc(26px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; background: var(--orange); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--orange-deep);
  font-family: "Creepster", var(--font-display); font-size: 28px; letter-spacing: 0.05em; cursor: pointer; transform: rotate(1deg);
}
.share-b svg { width: 28px; height: 28px; }
.share-b:active { transform: translate(2px, 2px) rotate(1deg); box-shadow: none; }
.place {
  position: absolute; left: 50%; bottom: calc(34px + env(safe-area-inset-bottom)); translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 30px 22px; width: min(440px, calc(100vw - 24px));
  text-align: center;
}
.place-q { margin: 0; font-family: "Creepster", var(--font-display); font-size: 40px; line-height: 1.05; letter-spacing: 0.03em; color: #ffd36a; text-shadow: 2px 2px 0 #1d0a33; }
.place-sub { margin: -6px 0 0; font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: #f3e6ff; text-shadow: 1px 1px 0 #1d0a33; }
body[data-placing] .add, body[data-placing] .share-b, body[data-asking] .add, body[data-asking] .share-b { display: none; }
/* the house's own colour buttons stay away until asked for */
.scene-b[aria-pressed=true] { background: linear-gradient(160deg, #9a55d8, #6a2fa3); border-color: #f3e6ff; }
body[data-placing] :is(.scene-b, .clear-b), body[data-asking] :is(.scene-b, .clear-b) { display: none; }
.place[hidden] { display: none; }

.ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none !important; overflow: visible; }
.ring path { fill: none; }
.ring > path:first-child { stroke: var(--wax); stroke-width: 2; stroke-dasharray: 6 5; opacity: 0; }
.ring.on > path:first-child { opacity: 0.85; }
.ring-hit { stroke: transparent; stroke-width: 26; pointer-events: none; cursor: grab; }
.ring.on .ring-hit { pointer-events: stroke; }
.knob, .turner {
  position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--orange); touch-action: none;
}
.knob { cursor: nesw-resize; }
.turner { cursor: grab; }
.knob svg, .turner svg { width: 20px; height: 20px; }
.knob[hidden], .turner[hidden] { display: none; }
/* Robin asked for rounded orange buttons here, on a half-black backing */
.pmenu { position: absolute; z-index: 4; left: 0; top: 0; translate: -50% calc(-100% - 14px); }
.pmenu[hidden] { display: none; }
.pmenu-row { display: flex; gap: 8px; padding: 8px; background: rgba(0, 0, 0, 0.5); border-radius: 22px; }
.pmenu-row button {
  padding: 7px 16px; background: var(--orange); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  font-family: "Creepster", var(--font-display); font-size: 21px; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer;
  box-shadow: 0 3px 0 var(--orange-deep);
}
.pmenu-row button:hover { background: var(--wax); }
.pmenu-row button:active { transform: translateY(2px); box-shadow: none; }
.pop { position: absolute; z-index: 6; width: 250px; padding: 12px 14px 14px; background: rgba(8, 7, 11, 0.94); color: #f1e8d6; border: 2px solid #000; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 140, 30, 0.25); }
.pop[hidden] { display: none; }
.house-b {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 8px; cursor: pointer;
  background: rgba(8, 7, 11, 0.82); color: #f1e8d6; border: 1px solid rgba(255, 140, 30, 0.55); border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
}
.house-b[hidden] { display: none; }
.house-b:hover { background: #1b1424; border-color: var(--orange); }
.house-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.house-b.pulse { animation: house-pulse 1.4s ease-in-out 3; }
.house-b.pulse .house-dot { animation: house-dot 1.4s ease-in-out 3; }
@keyframes house-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 30, 0); } 50% { box-shadow: 0 0 0 9px rgba(255, 140, 30, 0.35), 0 0 22px rgba(255, 140, 30, 0.6); } }
@keyframes house-dot { 50% { transform: scale(1.7); } }
.pop-h { margin: 0 0 10px; font-family: "Creepster", var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: 0.05em; color: var(--orange); text-shadow: 2px 2px 0 #3a1500; }
.pop-l { margin: 8px 0 4px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.pop-sel { width: 100%; padding: 6px 8px; background: #17141d; color: inherit; border: 1px solid #4a4256; border-radius: 6px; font: inherit; font-size: 14px; }
.pop-ends { display: flex; justify-content: space-between; margin-top: -4px; font-size: 11px; opacity: 0.6; }
.pop-again { margin-top: 12px; width: 100%; font-size: 22px; white-space: nowrap; }
.pop .ctl-name { font-size: 13px; }
.pop .ctl input[type=range] { accent-color: var(--orange); }
.swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.sw { width: 28px; height: 28px; padding: 0; border: 2px solid #000; border-radius: 50%; cursor: pointer; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25); }
.sw.on { outline: 3px solid var(--orange); outline-offset: 2px; }

.ctl { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; margin: 6px 0; }
.ctl-name { font-size: 13px; }
.ctl-val { font-size: 12px; font-variant-numeric: tabular-nums; }
.ctl input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--orange-deep); height: 26px; margin: 0; }
.ctl-colour input { width: 54px; height: 28px; padding: 0; border: 2px solid var(--ink); background: none; }
.ctl-toggle { grid-template-columns: auto 1fr; }
.ctl-toggle input { width: 20px; height: 20px; accent-color: var(--orange-deep); }
.ctl-choice { display: block; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg-b { flex: 1 0 auto; padding: 5px 7px; background: var(--kraft); border: 2px solid var(--ink); color: var(--ink); cursor: pointer; font-size: 12px; }
.seg-b.on { background: var(--ink); color: var(--wax); }
.hint { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-word; }
.row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card-h { margin: 0 0 8px; font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }

.hud {
  position: absolute; left: 10px; bottom: max(10px, env(safe-area-inset-bottom));
  padding: 2px 6px; background: none; color: rgba(201, 166, 107, 0.6);
  border: 0; font-size: 11px; letter-spacing: 0.08em; pointer-events: none;
}
body[data-step=porch] .hud { left: auto; right: 10px; bottom: auto; top: max(8px, env(safe-area-inset-top)); }

/* someone else's porch: nothing but the porch and one button */
.viewing-bar { display: none; }
body.viewing .viewing-bar {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  position: absolute; inset: 0; pointer-events: none;
  padding: max(18px, env(safe-area-inset-top)) 72px max(26px, calc(env(safe-area-inset-bottom) + 18px));
}
.view-title {
  margin: 0; max-width: 900px; text-align: center; font-family: "Creepster", var(--font-display); font-weight: 400;
  font-size: clamp(34px, 6vw, 64px); line-height: 1.05; letter-spacing: 0.04em; color: var(--orange);
  text-shadow: 0 3px 0 #3a1500, 0 0 24px rgba(255, 130, 20, 0.45);
}
.view-acts { display: flex; align-items: center; gap: 18px; pointer-events: auto; }
.view-edit { background: rgba(0, 0, 0, 0.45); color: #f1e8d6; border: 2px solid rgba(241, 232, 214, 0.5); border-radius: 999px; padding: 6px 20px; font: inherit; font-size: 17px; cursor: pointer; }
.view-edit:hover, .view-edit:focus-visible { border-color: var(--orange); outline: none; }
.view-edit[hidden] { display: none; }
@media (max-aspect-ratio: 10/11) {
  body.viewing .viewing-bar { padding-left: 16px; padding-right: 16px; padding-top: calc(max(8px, env(safe-area-inset-top)) + 84px); }
  .socials { grid-template-columns: repeat(2, 1fr); }
  .view-acts .goo { font-size: 24px; padding: 10px 26px 14px; white-space: nowrap; }
}
body.viewing .top, body.viewing .porch-ui { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 160%);
  max-width: min(92vw, 520px); padding: 10px 14px;
  background: linear-gradient(160deg, #6a2fa3, #43186f); color: #f3e6ff; border: 3px solid #1d0a33;
  border-radius: 14px 22px 12px 24px / 22px 12px 20px 14px; box-shadow: 4px 5px 0 #1d0a33, inset 0 2px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.2s; z-index: 20;
}
.toast.show { transform: translate(-50%, 0); }

/* the share and edit boxes: the house purple card, still (no wobble under a form), small text in the clear face */
.dlg {
  max-width: min(92vw, 460px); padding: 18px 20px 20px; color: #f3e6ff;
  background: linear-gradient(160deg, #6a2fa3, #43186f); border: 3px solid #1d0a33;
  border-radius: 16px 26px 14px 28px / 26px 14px 24px 16px; box-shadow: 4px 5px 0 #1d0a33, 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
.dlg::backdrop { background: rgba(5, 3, 10, 0.55); }
.dlg input[readonly] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 2px solid #1d0a33; border-radius: 8px; background: #2a0f47; color: #f3e6ff; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.dlg .btn { border-radius: 999px; padding: 7px 20px; box-shadow: none; }
.dlg .btn.hot { background: var(--orange); color: #1d0a33; border-color: #1d0a33; }
.dlg .hint { color: rgba(243, 230, 255, 0.8); font-size: 14px; }
.dlg .row { align-items: center; }
.dlg .goo { font-size: 26px; padding: 6px 28px 12px; margin-right: 12px; }
.dlg .row input + .goo { margin: 0 0 0 10px; font-size: 22px; padding: 4px 20px 10px; }
.lbl { display: block; margin: 12px 0 6px; font-family: var(--font-body); font-weight: 600; font-size: 15px; }
.dlg input:not([readonly]) { flex: 1; min-width: 0; padding: 8px 10px; border: 2px solid #1d0a33; border-radius: 8px; background: #f7f0ff; color: #1d0a33; font-size: 15px; }
.share-dlg { width: min(92vw, 520px); }
.share-img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border: 2px solid #1d0a33; border-radius: 8px; background: #000; }
.share-img[hidden] { display: none; }
.socials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 8px; }
.soc { padding: 8px 6px; white-space: nowrap; text-align: center; background: #1d0a33; color: #f3e6ff; border: 2px solid #1d0a33; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
.soc:hover { background: var(--orange); color: #1d0a33; }
.mail-f { margin-top: 10px; padding-top: 4px; border-top: 2px dashed rgba(243, 230, 255, 0.3); }
.dlg.purple { background: linear-gradient(160deg, #6a2fa3, #43186f); color: #f3e6ff; border: 3px solid #1d0a33; }
.ask-dlg { margin: auto; translate: 0 20vh; padding: 22px 30px 26px; width: min(92vw, 460px); max-width: none; box-shadow: 4px 5px 0 #1d0a33, 0 10px 40px rgba(0, 0, 0, 0.6); }
.ask-dlg::backdrop { background: rgba(5, 3, 10, 0.35); }
.ask-dlg .ask-q { margin: 0 0 18px; color: #ffd36a; text-shadow: 2px 2px 0 #1d0a33; font-family: "Creepster", var(--font-display); font-size: 32px; line-height: 1.05; text-align: center; }
.ask-dlg .row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.ask-dlg .goo { font-size: 28px; padding: 6px 34px 12px; }
.ask-dlg .no { padding: 8px 26px 9px; font-size: 19px; }
.linkish { margin-top: 14px; padding: 0; background: none; border: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: 12px; }

.nogl { position: fixed; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; background: var(--night); z-index: 30; }
.nogl[hidden] { display: none; }

/* phones and tall windows: the paper under the gourd, the tools along the edges */
@media (max-aspect-ratio: 10/11) {
  .top { padding-left: 12px; padding-right: 12px; }
  .arch { top: 9vh; font-size: 12vw; }
  .hh { bottom: calc(20vh + env(safe-area-inset-bottom)); font-size: 8vw; }
  .side-b { top: auto; bottom: calc(5vh + env(safe-area-inset-bottom)); width: auto; flex-direction: row; padding: 9px 12px; font-size: 14px; }
  .pick-b { top: calc(9vh + 12vw * 1.25); font-size: 22px; }
  .rand-b { right: 50%; top: auto; bottom: calc(3vh + env(safe-area-inset-bottom)); translate: 50% 0; width: 110px; height: auto; }
  .rand-b .die-cam { scale: 0.74; }
  .rand-b:hover .die-cam { scale: 0.8; }
  .rand-l { margin-top: 2px; font-size: 17px; }
  .picker { left: 10px; right: 10px; width: auto; translate: 0 -50%; padding: 12px 12px 14px; }
  .picker-h { font-size: 28px; }
  .picker-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pick-row { font-size: 13px; padding: 7px 6px 8px; gap: 5px; }
  .pick-spin { --s: 84px; }
  .sticker { white-space: normal; max-width: 31vw; text-align: center; font-size: 19px; line-height: 1.1; padding: 5px 9px 6px; border-radius: 9px; }
  /* no gourd above the paper on a phone (main.ts stows it): the paper takes all but the face select, files and shapes */
  .sheet-host { --sh: calc(100dvh - 116px - env(safe-area-inset-top)); top: auto; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: auto; height: var(--sh); align-items: center; }
  /* printing and loading a file are for a desk, not a phone */
  .sheet-files { display: none; }
  .sheet { gap: 6px; width: 100%; align-items: center; }
  .sheet-h, .sheet-hint { display: none; }
  .sheet-desk { flex-direction: column; gap: 16px; align-items: center; width: 100%; }
  .sheet-tools { flex-direction: row; gap: 4px; width: auto; align-self: flex-start; }
  .sheet-tool { width: 66px; min-height: 58px; padding: 3px 2px 14px; font-size: 14.5px; letter-spacing: 0; }
  .sheet-tool svg { width: 22px; height: 22px; }
  .piece { box-shadow: inset 0 -8px 0 var(--rind), inset 0 2px 2px rgba(255, 255, 255, 0.5), 2px 3px 0 rgba(0, 0, 0, 0.6); }
  .piece::before, .piece::after { width: 7px; height: 4px; }
  .shapes { left: 12px; right: 12px; top: 56px; bottom: auto; width: auto; height: auto; padding: 6px 8px; }
  .shapes-h { display: none; }
  .shapes-grid { grid-template-columns: repeat(7, 1fr); }
  .shape-b { padding: 4px 0 3px; font-size: 11px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; }
  .shape-b svg { width: 34px; height: 34px; }
  .sheet-paper { width: min(calc(100vw - 24px), calc(100dvh - 340px)); }
  .sheet-foot { padding: 0; min-height: 0; }
  .goo { font-size: 28px; padding: 8px 36px 12px; }
  .faces { top: calc(58px + env(safe-area-inset-top)); width: max(56vw, 236px); max-width: calc(100vw - 24px); }
  .faces-b { padding: 6px 12px 7px; font-size: 16px; white-space: nowrap; }
  .sheet-carve { padding: 6px 26px 9px; font-size: 26px; }
  .sheet-files .sheet-act { padding: 6px 12px; font-size: 13px; }
  .sheet-edit { left: auto; right: 12px; bottom: auto; top: max(10px, env(safe-area-inset-top)); }
  .sheet-ib { width: 42px; height: 42px; }
  .carve-card { padding: 16px 20px 32px; }
  .card-q { font-size: 28px; margin-bottom: 16px; }
  .carve-card.review { padding: 18px 22px 34px; }
  .carve-card.review .card-q { font-size: 34px; margin-bottom: 16px; }
  .carve-card.review .goo { font-size: 30px; padding: 8px 36px 12px; }
  .ask-row { gap: 14px; }
  .ask-q { font-size: 26px; }
  .carve-tools { left: 8px; right: 8px; top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); transform: none; width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 5px; }
  .hand { width: 66px; min-height: 56px; padding: 3px 2px 14px; font-size: 14.5px; letter-spacing: 0; }
  .hand svg { width: 22px; height: 22px; }
  .tool-ctl { left: 12px; right: 12px; top: auto; bottom: calc(166px + env(safe-area-inset-bottom)); width: auto; translate: none; flex-direction: row; gap: 12px; padding: 7px 12px 8px; font-size: 17px; }
  .tool-ctl .tc { flex: 1; grid-template-columns: auto 1fr; align-items: center; gap: 6px; }
  .tool-ctl .tc input { height: 32px; }
  .lines { right: 8px; top: max(10px, env(safe-area-inset-top)); translate: none; width: 170px; }
  /* the top bar goes to icons on a phone (the words stay for screen readers); Edit scene keeps its word */
  .top-b { min-width: 44px; min-height: 44px; justify-content: center; padding: 6px 10px 7px; }
  .top-b .ico, .top-b .ico svg { width: 24px; height: 24px; }
  :is(.back-b, .quality-b, .clear-b) > span:not(.ico) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sign { padding: 12px 10px 12px 14px; }
  .sign-t { font-size: 21px; }
  .chalk { width: 42px; height: 42px; }
  .carve-bar { gap: 14px; }
  .carve-bar .goo { font-size: 26px; padding: 6px 32px 10px; }
  .carve-bar .sheet-ib { width: 44px; height: 44px; }
  .carve-card.review, .carve-card.ask { bottom: calc(30px + env(safe-area-inset-bottom)); }
  .tip { max-width: min(250px, calc(100vw - 16px)); }
  .add { left: 8px; bottom: calc(20px + env(safe-area-inset-bottom)); font-size: 16px; }
  .badge { gap: 6px; padding: 10px 14px 10px 10px; }
  .add .jack svg { width: 36px; height: 33px; }
  .share-b { right: 10px; bottom: calc(20px + env(safe-area-inset-bottom)); padding: 9px 14px; font-size: 22px; }
  /* the Edit panel takes the bottom of a phone; Add and Share come back when it closes */
  body:has(.pop[data-part=edit]:not([hidden])) :is(.add, .share-b) { display: none; }
  .place { padding: 14px 18px 16px; bottom: calc(20px + env(safe-area-inset-bottom)); }
  .place-q { font-size: 32px; }
  .place-sub { font-size: 20px; }
  .pmenu-row { gap: 5px; padding: 6px; }
  .pmenu-row button { padding: 5px 10px; font-size: 16px; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

#share-name, #share-msg { width: 100%; box-sizing: border-box; }

/* a big monitor: everything sits in a central column, and the paper, tools and buttons grow to fill it */
@media (min-width: 1700px) and (min-height: 950px) {
  :root { --col: min(100vw, 1800px); --side: calc((100vw - var(--col)) / 2); }
  .sheet-host { right: calc(var(--side) + 1.5vw); width: calc(var(--col) * 0.62); top: 70px; bottom: 24px; }
  .sheet-paper { width: min(calc(var(--col) * 0.62 - 260px), calc(100vh - 400px), 960px); }
  .sheet-tools { zoom: 1.75; }
  .sheet-h { margin-left: 230px; font-size: 40px; }
  .sheet-hint { margin-left: 230px; font-size: 18px; }
  .sheet-size, .sheet-mirror-cb { zoom: 1.5; }
  .sheet-carve { zoom: 1.7; }
  .topbar { zoom: 1.5; left: calc((var(--side) + 14px) / 1.5); top: calc(12px / 1.5); }
  .faces { zoom: 1.45; }
  .sheet-files { zoom: 1.6; left: calc((var(--side) + 3vw) / 1.6); bottom: calc(150px / 1.6); }
  .sheet-edit { zoom: 1.6; left: calc((var(--side) + 3vw) / 1.6); bottom: calc(28px / 1.6); }
  .carve-tools { zoom: 1.6; left: calc((var(--side) + 22px) / 1.6); }
  .tool-ctl { zoom: 1.3; left: calc((var(--side) + 250px) / 1.3); }
  .lines { zoom: 1.5; right: calc((var(--side) + 22px) / 1.5); }
  .carve-bar, .carve-card, .place { zoom: 1.5; }
  .share-b { zoom: 1.5; }
  .add { font-size: 36px; }
  .badge { gap: 16px; padding: 24px 36px 24px 24px; }
  .add .jack svg { width: 88px; height: 80px; }
}

/* fingers: every porch chip, swatch and dialog button at least about 44px to hit */
@media (pointer: coarse) {
  .house-b { padding: 11px 16px 11px 12px; font-size: 15px; min-height: 44px; }
  .purp { min-height: 44px; }
  .swatches { gap: 8px; }
  .sw { width: 40px; height: 40px; }
  .dlg .btn { min-height: 44px; padding: 10px 22px; }
  .dlg input:not([readonly]), .dlg input[readonly] { padding: 12px; font-size: 16px; }
  .soc { padding: 12px 6px; }
  .dlg .purp { min-height: 46px; }
  .dlg .row input + .goo { padding: 10px 20px 14px; }
  .pick-b { padding: 8px 12px; }
  .pmenu-row { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 16px); box-sizing: border-box; }
  .pmenu-row button { min-height: 44px; }
  .view-edit { min-height: 44px; }
}
/* narrow phones: Carve another pumpkin over two lines, so it stays clear of Share */
@media (max-aspect-ratio: 10/11) and (max-width: 420px) {
  #add-label { white-space: normal; max-width: 6.5em; line-height: 1.05; text-align: left; }
}
/* a phone on its side has no room for the paper or the carve tools: ask for it upright on those two steps */
.turn { display: none; }
/* a phone on its side: three gourds across a short screen, the names smaller so they keep apart */
@media (orientation: landscape) and (max-height: 500px) {
  .sticker { font-size: 17px; white-space: normal; max-width: 22vw; text-align: center; line-height: 1.1; padding: 4px 9px 5px; border-radius: 9px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  body:is([data-step=stencil], [data-step=carve]) .turn {
    display: grid; place-content: center; gap: 6px; position: fixed; inset: 0; z-index: 40; padding: 24px; text-align: center;
    background: rgba(5, 3, 10, 0.92);
  }
}
.turn-q { margin: 0; font-family: "Creepster", var(--font-display); font-size: 40px; letter-spacing: 0.04em; color: var(--orange); text-shadow: 2px 2px 0 #3a1500; }
/* the smallest phones: five stencil tools across 320px */
@media (max-aspect-ratio: 10/11) and (max-width: 359px) {
  .sheet-tool { width: 57px; font-size: 13px; }
  .carve-tools { gap: 3px; }
  .hand { width: 56px; font-size: 13px; }
  .carve-card .goo, .carve-card.review .goo { font-size: 24px; padding: 8px 24px 12px; white-space: nowrap; }
  .card-q, .carve-card.review .card-q { font-size: 26px; }
  /* too narrow for both side by side: Pen size goes under Mirror mode */
  .sheet-size { top: 44px; right: auto; left: 8px; }
  /* seven columns of 42px: the names would be cut, the shapes say what they are */
  .shape-b span { display: none; }
  .shape-b { padding: 6px 0; }
}
/* short phones: Happy Halloween kept above the die */
@media (max-aspect-ratio: 10/11) and (max-height: 700px) {
  .hh { bottom: calc(max(20vh, 128px) + env(safe-area-inset-bottom)); }
}
/* while the symbols are out on a phone they take the top, so the paper sits low */
@media (max-aspect-ratio: 10/11) {
  body:has(.sheet-ui.shapes-on) .sheet-host { align-items: flex-end; }
}

/* the carving how-to: three little films in the purple box, shown once */
.howto { width: min(92vw, 380px); padding: 16px 18px 14px; text-align: center; }
.howto-h { margin: 0; font-family: "Creepster", var(--font-display); font-size: 32px; letter-spacing: 0.05em; color: var(--orange); text-shadow: 2px 2px 0 #1d0a33; }
.howto-t { margin: 4px 0 10px; font-family: var(--font-body); font-size: 17px; line-height: 1.3; }
.howto-film { position: relative; overflow: hidden; border: 3px solid #1d0a33; border-radius: 14px 20px 12px 22px / 20px 12px 18px 14px; background: #07050a; }
.howto-film canvas { display: block; width: 100%; aspect-ratio: 280 / 180; }
.howto-hand { position: absolute; left: 0; top: 0; width: 36px; height: 36px; color: #fff; pointer-events: none; filter: drop-shadow(1px 2px 0 #1d0a33) drop-shadow(0 0 3px rgba(0, 0, 0, 0.6)); transition: opacity 0.2s; }
.howto-hand svg { width: 36px; height: 36px; stroke-width: 2.2; }
.howto-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.howto-dots { display: flex; gap: 8px; padding-left: 4px; }
.howto-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(243, 230, 255, 0.3); }
.howto-dots i.on { background: var(--orange); }
.howto .goo { font-size: 24px; padding: 6px 26px 12px; margin: 0; }

/* photo mode: a 1200x630 frame on the porch, the rest dimmed; the controls in a purple card under it */
.photo { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.photo[hidden] { display: none; }
.finder {
  position: absolute; border: 2px solid rgba(255, 246, 230, 0.8); border-radius: 3px;
  box-shadow: 0 0 0 200vmax rgba(4, 2, 8, 0.6);
}
.finder::before, .finder::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255, 246, 230, 0.55); }
.finder::before { width: 22px; height: 2px; margin: -1px 0 0 -11px; }
.finder::after { width: 2px; height: 22px; margin: -11px 0 0 -1px; }
.photo-ui {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0; pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; box-sizing: border-box;
  width: min(1180px, calc(100vw - 20px)); padding: 14px 22px 16px;
}
.ph-s { display: grid; gap: 0; flex: 1 1 130px; max-width: 200px; font-family: var(--font-body); font-size: 17px; color: #fff; text-shadow: 1px 1px 0 #1d0a33; }
.ph-s input { width: 100%; min-width: 0; margin: 0; height: 34px; accent-color: var(--orange); }
.ph-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ph-fb { padding: 6px 13px 7px; font-size: 16px; min-height: 40px; }
.ph-fb.on { background: linear-gradient(160deg, #ffb347, #e8690c); color: var(--ink); border-color: #fff3c4; text-shadow: none; }
.ph-take { font-size: 30px; }
body[data-tier=low] .ph-look { display: none; }
.flash { position: fixed; inset: 0; z-index: 30; background: #fff; pointer-events: none; animation: flash 0.5s ease-out forwards; }
@keyframes flash { from { opacity: 0.9; } to { opacity: 0; } }
@media (max-aspect-ratio: 10/11) {
  .photo-ui { gap: 4px 14px; padding: 10px 14px 12px; }
  .ph-s { flex-basis: 40%; max-width: none; font-size: 15px; }
  .ph-take { font-size: 24px; }
}
@media (min-width: 2200px) { .photo-ui { zoom: 1.4; } }