/* desk-v2.css */
.stage .etch { width:112%; max-width:285px; transform:rotate(-3deg); }
@media(max-width:650px) {
.stage .etch { grid-column:3 / span 2; }
}

/* toys.css */
.etch-shell { position:relative; display:block; width:100%; }
.etch-hardware { position:relative; z-index:2; display:block; width:100%; height:auto; pointer-events:none; }
.etch-screen-art { position:absolute; z-index:3; left:15.4%; top:14.8%; width:69%; height:61.3%; object-fit:cover; border-radius:2.5%/4%; filter:saturate(.72) contrast(.92) grayscale(.15); box-shadow:inset 0 0 18px #2b2c2a88; }
.etch-shell-preview { aspect-ratio:3 / 2; }
.etch-shell-preview .etch-hardware { aspect-ratio:3 / 2; object-fit:contain; }
.etch-shell-preview .etch-screen-art { border-radius:2%; }
.object-dialog[data-room="etch"] { width:min(960px,calc(100vw - 28px)); border:0; border-radius:18px; background:transparent; box-shadow:none; overflow:visible; }
[data-room="etch"] .dialog-inner { padding:0; }
[data-room="etch"] .dialog-head { position:absolute; z-index:5; right:8%; top:4%; margin:0; }
[data-room="etch"] .dialog-head > div { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
[data-room="etch"] .dialog-close { background:#f3ead5df; }
.etch-gallery { text-align:center; }
.etch-shell-large { filter:drop-shadow(0 25px 22px #10201d6b); }
.etch-shell-large .etch-screen-art { z-index:3; }
.etch-controls { display:flex; justify-content:center; align-items:center; gap:22px; margin:-4px auto 0; color:#fff; text-shadow:0 2px 5px #000; font:13px var(--digital); }
.etch-controls button { width:42px; height:42px; min-height:42px; border:1px solid #d9d3c5; border-radius:50%; background:#f2eee4; color:#7e1b18; box-shadow:0 5px 10px #0004; cursor:pointer; }
@media(max-width:700px) {
.object-dialog[data-room="etch"] { width:calc(100vw - 24px); }
[data-room="etch"] .dialog-head { right:4%; top:2%; }
}

.etch-drawing { position:absolute; z-index:3; left:15.4%; top:14.8%; width:69%; height:61.3%; border-radius:2.5%/4%; overflow:hidden; background:#b8b9ab; box-shadow:inset 0 0 24px #343a3260; }
.etch-drawing canvas { display:block; width:100%; height:100%; background:transparent; }
.etch-drawing canvas:focus-visible { outline:2px solid #575c4e; outline-offset:-4px; }
.etch-tip { position:absolute; width:5px; height:5px; border-radius:50%; background:#343730; transform:translate(-50%,-50%); pointer-events:none; }
/* The hardware photo supplies the knobs; these transparent targets handle dragging. */
.etch-knob { position:absolute; z-index:4; bottom:6.2%; width:12%; aspect-ratio:1; padding:0; border:0; border-radius:50%; background:transparent; cursor:grab; touch-action:none; }
.etch-knob:active { cursor:grabbing; }
.etch-knob:focus-visible { outline:3px solid #fff8d8; outline-offset:-8px; }
.etch-knob-left { left:5%; }
.etch-knob-right { right:5%; }
.etch-controls .etch-text-button { width:auto; border-radius:5px; padding:0 17px; font:14px Georgia,serif; }
.etch-controls [hidden], .etch-gallery [hidden] { display:none; }
#etch-play-controls { flex-wrap:wrap; }
.etch-palette { display:flex; align-items:center; gap:5px; padding:6px 8px; border-radius:5px; background:#f2eee4; box-shadow:0 5px 10px #0004; }
.etch-controls .etch-color-option { width:26px; height:26px; min-height:26px; padding:0; background:var(--ink); border:1px solid #0004; box-shadow:none; }
.etch-color-option[aria-pressed="true"] { outline:2px solid #45463f; outline-offset:2px; }
.etch-color-option:focus-visible { outline:3px solid #205bb3; outline-offset:2px; }
#etch-export-status { margin:8px 0 0; color:#fff; text-shadow:0 2px 5px #000; font:13px Georgia,serif; }
#etch-export-status:empty { display:none; }
@media(max-width:700px) {
  .etch-controls { gap:12px; }
}
@media(max-height:650px) and (min-width:701px) {
  .object-dialog[data-room="etch"] { width:min(960px,calc((100dvh - 90px) * 1.5)); }
}

.etch-shell-large.is-shaking { animation:etch-shake 760ms ease-in-out; transform-origin:50% 55%; }
.is-shaking #etch-canvas { animation:etch-dust-clear 760ms linear forwards; }
.is-shaking .etch-tip { opacity:0; }
#etch-play-controls button:disabled { opacity:.5; cursor:default; }
@keyframes etch-shake {
  0%,100% { transform:translate(0,0) rotate(0); }
  12% { transform:translate(-9px,3px) rotate(-2deg); }
  25% { transform:translate(12px,-4px) rotate(2.5deg); }
  38% { transform:translate(-13px,4px) rotate(-3deg); }
  51% { transform:translate(11px,-3px) rotate(2.5deg); }
  64% { transform:translate(-8px,2px) rotate(-1.8deg); }
  77% { transform:translate(5px,-1px) rotate(1deg); }
  90% { transform:translate(-2px,0) rotate(-.4deg); }
}
@keyframes etch-dust-clear {
  0%,12% { opacity:1; filter:blur(0); }
  28% { opacity:.85; }
  48% { opacity:.55; filter:blur(.4px); }
  68% { opacity:.2; }
  86%,100% { opacity:0; filter:blur(1px); }
}
@media(prefers-reduced-motion:reduce) {
  .etch-shell-large.is-shaking,.is-shaking #etch-canvas { animation:none; }
}

/* Mount the shake control on the lower red frame between the drawing knobs. */
.etch-shell .etch-shake-knob { position:absolute; z-index:4; left:50%; top:85%; transform:translate(-50%,-50%); width:clamp(44px,8vw,82px)!important; min-width:44px!important; height:auto!important; min-height:44px!important; aspect-ratio:1; }

/* Flat round transport controls (replaces the glossy sprite play button). */
.etch-controls #etch-start { font-size:15px; line-height:1; color:#7e1b18; }

/* Ghost grip hint: a hands-only layer over the untouched toy photo. Fades in
   when play starts, breathes gently, fades out on first knob touch. */
.etch-hands-hint { position:absolute; z-index:5; top:0; left:-36%; width:174.8%; height:123.05%; pointer-events:none; opacity:0; transition:opacity .9s ease; }
.etch-hands-hint.is-visible { opacity:.6; animation:etch-hands-breathe 3.4s ease-in-out 1s infinite; }
@keyframes etch-hands-breathe {
  0%,100% { opacity:.6; }
  50% { opacity:.82; }
}
@media(prefers-reduced-motion:reduce) {
  .etch-hands-hint { transition:opacity .2s linear; }
  .etch-hands-hint.is-visible { animation:none; }
}

/* Desktop counterpart to the ghost hands: two little key caps floating over
   each knob, gone on the first arrow press. Never shown on touch screens. */
.etch-keys-hint { position:absolute; inset:0; z-index:5; pointer-events:none; }
.etch-keys-cluster { position:absolute; bottom:20%; display:flex; justify-content:center; gap:6px; width:12%; opacity:0; transition:opacity .9s ease; }
.etch-keys-left { left:5%; }
.etch-keys-right { right:5%; }
.etch-keys-hint.is-visible .etch-keys-cluster { opacity:.85; }
.etch-keys-cluster kbd { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:28px; padding:0 5px; border:1px solid #d9d3c5; border-radius:6px; background:#f2eee4e6; color:#7e1b18; font:16px/1 var(--digital); box-shadow:0 3px 6px #0006, inset 0 -2px 0 #d9d3c5; }
@media(pointer:coarse) {
  .etch-keys-hint { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .etch-keys-cluster { transition:opacity .2s linear; }
}

/* Handwritten flick call-to-action tucked against the screen's bottom-right corner; fades after the first flick. */
.etch-shell-large { touch-action:pan-y; user-select:none; }
.etch-shell-large img { -webkit-user-drag:none; }
.etch-flick-hint { position:absolute; z-index:4; right:14.5%; bottom:21.5%; display:inline-flex; align-items:flex-end; gap:3px; color:#fffdf6e0; font:20px/1 var(--hand); letter-spacing:.02em; transform:rotate(-4deg); transition:opacity .45s ease; pointer-events:none; text-shadow:0 1px 4px #4c1310; }
.etch-flick-hint.is-gone { opacity:0; }
.etch-shell-large:has(.etch-drawing:not([hidden])) .etch-flick-hint { display:none; }

.object-dialog[data-room="etch"]:has(#etch-play-controls:not([hidden])) > .keyboard-shuffle { display:none; }

/* The single cover picture shakes away without erasing the saved canvas. */
.etch-shell-large.is-revealing { animation:etch-shake 760ms ease-in-out; transform-origin:50% 55%; }
.is-revealing .etch-screen-art { animation:etch-dust-clear 760ms linear forwards; }
.object-dialog[data-room="etch"] > .keyboard-shuffle { display:none; }
#etch-keys-hint .etch-keys-left { left:50%; bottom:2%; transform:translateX(-50%); }
@media(prefers-reduced-motion:reduce) {
 .etch-shell-large.is-revealing,.is-revealing .etch-screen-art { animation:none; }
}

@keyframes etch-shake { 0%,100% { transform:perspective(1000px) rotateX(0deg); } 15% { transform:perspective(1000px) translateX(-10px) rotateY(-7deg) rotateZ(-3deg); } 35% { transform:perspective(1000px) translateX(12px) rotateX(6deg) rotateZ(3deg); } 55% { transform:perspective(1000px) translateX(-9px) rotateY(6deg) rotateZ(-2deg); } 78% { transform:perspective(1000px) translateX(5px) rotateX(-4deg); } }
@keyframes etch-dust-clear { 0% { opacity:1; mask-image:linear-gradient(165deg,#000 0%,#000 100%); } 30% { opacity:.85; mask-image:linear-gradient(165deg,transparent 0%,#000 35%,#000 100%); } 65% { opacity:.4; mask-image:linear-gradient(165deg,transparent 25%,#000 75%); } 100% { opacity:0; mask-image:linear-gradient(165deg,transparent 90%,#000); } }