/* Send a squish owns this panel and stage. Experiment styles remain in site.css. */
html:not([data-view=friend]) .squish-page [data-view-only=friend],
html[data-view=friend] .squish-page [data-view-only=make],
html[data-view=friend] .squish-page .maker,
html[data-view=friend] .squish-page .squish-panel-toggle,
.squish-page[data-renderer=legacy] .new-engine-only{display:none}
.squish-page .legacy-only{display:none}
.squish-page[data-renderer=legacy] .legacy-only{display:inline}

.squish-page .squish-stage{height:min(82svh,800px);min-height:560px;background:#0d0d0d;color:var(--text)}
.squish-page #squish-canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.squish-page[data-renderer=modern] #squish-canvas{translate:var(--grab-x,0px) var(--grab-y,0px);
  scale:var(--grab-s,1);cursor:grab;will-change:translate,scale}
.squish-page #squish-canvas.is-grabbing,.squish-page.is-grabbing #squish-canvas{cursor:grabbing}
.squish-page #squish-canvas[data-gesture=slice]{cursor:crosshair}
.squish-page[data-renderer=legacy] .squish-stage{background:var(--stage-bg);color:var(--stage-ink)}
.squish-page[data-renderer=legacy] #squish-canvas{display:none}
.squish-page #overlay .caps{color:var(--text-muted)}
.squish-page #overlay h2 em{color:var(--text)}
.squish-page #overlay .squish-interaction-hint{margin:14px 0 0;color:var(--text-muted);font-size:12px;line-height:1.5}
.squish-page[data-renderer=legacy] #overlay .caps{color:var(--stage-muted)}
.squish-page[data-renderer=legacy] #overlay h2 em{color:var(--stage-ink)}
.squish-page .stage a{color:var(--cyan)}
.squish-page[data-renderer=legacy] .stage.dead .maker,
.squish-page[data-renderer=legacy] .stage.dead .squish-panel-toggle{display:none}
.squish-page[data-renderer=modern] .stage.dead #fallback{right:372px;bottom:80px;z-index:2}
.squish-page[data-renderer=modern] .stage.dead #fallback p{color:var(--text-muted)}
html[data-view=friend] .squish-page[data-renderer=modern] .stage.dead #fallback{right:0}

/* The existing Send card fits in the same position as the experiments' Tweak panel. */
.squish-page .maker{position:absolute;z-index:6;right:26px;top:50%;width:320px;padding:0;
  height:calc(100% - 28px);max-height:calc(100% - 28px);overflow:hidden;
  color:var(--glass-panel-text);border:1px solid var(--glass-border);border-radius:20px;
  background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--magenta) 10%,transparent),transparent 60%),
    radial-gradient(90% 90% at 100% 100%,color-mix(in srgb,var(--cyan) 7%,transparent),transparent 60%),var(--glass-panel);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:0 24px 70px -36px rgba(0,0,0,.8);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(18px,-50%) scale(.98);
  transition:opacity .2s ease,transform var(--dur-gelatin) var(--spring-gelatin),visibility .2s}
.squish-page.maker-open .maker{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)}
.squish-page .maker-card{display:flex;flex-direction:column;height:100%;min-height:0}
.squish-page .maker-pick{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scroll-padding-block:16px;padding:20px}
.squish-page .maker .kicker{margin-bottom:8px;font-size:12px}
.squish-page .maker h1{font-size:25px;line-height:1.12;margin:0;letter-spacing:-.03em}
.squish-page .mk-field{margin-top:14px}
.squish-page .mk-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 6px;
  font:500 12px/1.5 var(--font-mono);letter-spacing:.025em;text-transform:uppercase;color:var(--glass-panel-muted);overflow-wrap:anywhere}
.squish-page .mk-label .val{flex-shrink:0;font-size:12px;letter-spacing:.02em;color:var(--cyan);font-variant-numeric:tabular-nums}
.squish-page .mk-hint{margin:3px 0 0;font-size:12px;line-height:1.5;color:var(--glass-panel-muted)}

.squish-page .swatches{display:flex;gap:6px}
.squish-page .swatch{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 5px;
  border:1px solid var(--glass-border);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;
  touch-action:manipulation;font:600 14px/1.3 var(--font-sans);letter-spacing:.025em;text-transform:uppercase;
  transition:scale var(--dur-gelatin) var(--spring-gelatin),background-color .2s,border-color .2s,box-shadow .2s}
.squish-page .swatch i{flex:0 0 13px;height:13px;border-radius:50%;background:var(--sw);
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.35)}
.squish-page .swatch[aria-pressed=true]{border-color:var(--sw);background:color-mix(in srgb,var(--sw) 18%,transparent);
  box-shadow:0 0 0 1px var(--sw),0 0 24px -6px var(--sw)}

.squish-page .namer{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:5px;align-items:center}
.squish-page .namer button{min-height:44px;padding:0;border:1px solid var(--glass-border);border-radius:12px;
  background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;touch-action:manipulation;
  font:400 24px/1 var(--font-sans);transition:scale var(--dur-gelatin) var(--spring-gelatin),background-color .2s,color .2s}
.squish-page .namer .namer-shuffle{grid-column:1/-1;min-height:44px;font:600 14px/1.3 var(--font-sans);letter-spacing:.025em;text-transform:uppercase;
  color:var(--amber);border-color:color-mix(in srgb,var(--amber) 55%,transparent)}
.squish-page .namer output{display:block;text-align:center;font:700 17px/1.2 var(--font-sans);letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.squish-page .sliceable-option{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;
  font:500 14px/1.5 var(--font-sans)}
.squish-page .sliceable-option input{width:19px;height:19px;margin:0;accent-color:var(--cyan);cursor:pointer}
.squish-page .bonus-next{display:block;min-height:44px;padding:0 12px;margin:4px 0 0;border:1px solid var(--glass-border);
  border-radius:10px;background:rgba(255,255,255,.04);color:var(--amber);cursor:pointer;touch-action:manipulation;
  font:600 14px/1.3 var(--font-sans);letter-spacing:.025em;text-transform:uppercase;
  transition:scale var(--dur-gelatin) var(--spring-gelatin),background-color .2s}

.squish-page .maker-send{position:sticky;bottom:0;z-index:1;flex:none;display:flex;flex-direction:column;
  padding:12px 20px 14px;border-top:1px solid var(--glass-border);background:var(--pink-soft,#ffdde8)}
.squish-page .send-row{display:flex;margin-top:2px}
.squish-page .send-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;
  border:0;border-radius:999px;background:var(--magenta);color:var(--bg);cursor:pointer;touch-action:manipulation;
  font:700 14px/1.3 var(--font-sans);letter-spacing:.025em;text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(255,42,109,.35),0 14px 34px -14px rgba(255,42,109,.9);
  transition:scale var(--dur-gelatin) var(--spring-gelatin),background-color .2s,color .2s}
.squish-page .send-status{min-height:1.5em;max-height:4.5em;overflow-y:auto;margin:6px 0 0;overflow-wrap:anywhere;
  font:500 12px/1.5 var(--font-mono);color:var(--amber)}
.squish-page .peek{margin:5px 0 0;font-size:12.5px}
.squish-page h2.first{margin-top:0}
.squish-page .measure code{overflow-wrap:anywhere}

.squish-page .squish-panel-toggle{position:absolute;z-index:7;right:26px;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;min-width:44px;min-height:120px;padding:16px 12px;border:1px solid var(--glass-border);
  border-radius:14px;background:var(--glass-panel);color:var(--glass-panel-text);cursor:pointer;touch-action:manipulation;
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  font:600 14px/1.3 var(--font-sans);letter-spacing:.025em;text-transform:uppercase}
.squish-page.maker-open .squish-panel-toggle{opacity:0;pointer-events:none;visibility:hidden}
.squish-page .squish-sound{position:absolute;z-index:7;left:clamp(14px,3vw,26px);bottom:14px;min-height:44px;
  min-width:44px;padding:0 14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--glass-panel);
  color:var(--glass-panel-text);cursor:pointer;touch-action:manipulation;font:600 14px/1.3 var(--font-sans);
  letter-spacing:.025em;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.squish-page .gesture-modes{position:absolute;z-index:7;left:120px;bottom:14px;display:flex;gap:6px}
.squish-page .gesture-modes[hidden]{display:none}
.squish-page .gesture-modes button{width:74px;min-height:44px;padding:0 8px;border:1px solid var(--glass-border);
  border-radius:12px;background:var(--glass-panel);color:var(--glass-panel-text);cursor:pointer;touch-action:manipulation;
  font:600 14px/1.3 var(--font-sans);letter-spacing:.025em;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.squish-page .gesture-modes button[aria-pressed=true]{border-color:var(--cyan);color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 12%,var(--glass-panel))}

/* Only the greeting moves. Stage and controls retain their layout. */
.squish-page .squish-back{position:absolute;z-index:6;left:50%;bottom:70px;min-height:48px;padding:0 26px;
  border:0;border-radius:999px;background:var(--magenta);color:var(--bg);cursor:pointer;touch-action:manipulation;
  font:700 14px/1.3 var(--font-sans);letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,42,109,.35),0 14px 34px -12px rgba(255,42,109,.9);
  opacity:0;transform:translate(-50%,12px) scale(.94);
  transition:opacity .45s ease,transform var(--dur-gelatin) var(--spring-gelatin),scale var(--dur-gelatin) var(--spring-gelatin)}
.squish-page .squish-back.show{opacity:1;transform:translate(-50%,0)}
html:not([data-view=friend]) .squish-page .squish-back{display:none}
.squish-page #squish-canvas.hello-enter{animation:squish-hello 2.8s cubic-bezier(.16,.7,.18,1) both}
@keyframes squish-hello{0%{opacity:0;transform:translateY(-18%) scale(.88)}
  35%{opacity:1;transform:translateY(1%) scale(1.03,.97)}65%{transform:scale(.99,1.01)}100%{opacity:1;transform:none}}

@media(min-width:721px){
  html:not([data-view=friend]) .squish-page:not([data-renderer=legacy]) #squish-canvas{width:calc(100% - 372px)}
  html:not([data-view=friend]) .squish-page #overlay .row{padding-right:352px}
}
@media(hover:hover){
  .squish-page .swatch:hover,.squish-page .namer button:hover,.squish-page .bonus-next:hover,
  .squish-page .send-btn:hover,.squish-page .squish-back:hover{scale:1.04 .96}
}
.squish-page .swatch:active,.squish-page .namer button:active,.squish-page .bonus-next:active,
.squish-page .send-btn:active,.squish-page .squish-back:active{scale:.94 1.06}

@media(max-width:720px){
  .squish-page[data-renderer=modern] .stage.dead #fallback{right:0;bottom:80px}
  .squish-page[data-renderer=modern].maker-open #squish-canvas{height:30%}
  .squish-page[data-renderer=modern].maker-open #headline,
  .squish-page[data-renderer=modern].maker-open #overlay .squish-interaction-hint{display:none}
  .squish-page .squish-stage{height:min(84svh,760px);min-height:540px}
  .squish-page #overlay h2{font-size:clamp(30px,7vw,42px)}
  .squish-page .maker{left:14px;right:14px;top:auto;bottom:70px;width:auto;height:calc(70% - 70px);max-height:calc(70% - 70px);
    border-radius:20px;transform:translateY(22px) scale(.98)}
  .squish-page.slice-controls .maker{bottom:126px;height:calc(70% - 126px);max-height:calc(70% - 126px)}
  .squish-page .gesture-modes{bottom:70px}
  .squish-page.maker-open .maker{transform:none}
  .squish-page .maker-pick{padding:16px}
  .squish-page .maker-send{padding:10px 16px 12px}
  .squish-page .maker h1{font-size:24px}
  .squish-page .maker .kicker{margin-bottom:8px}
  .squish-page .squish-panel-toggle{top:auto;bottom:14px;right:14px;min-height:44px;min-width:148px;
    padding:0 14px;transform:none;writing-mode:horizontal-tb}
  .squish-page.maker-open .squish-panel-toggle{opacity:1;visibility:visible;pointer-events:auto}
  .squish-page .squish-back{bottom:70px;max-width:calc(100% - 28px);font-size:14px}
  .squish-page.slice-controls .squish-back{bottom:126px}
}
@media(prefers-reduced-motion:reduce){
  .squish-page .maker,.squish-page .squish-back{transition:none}
  .squish-page #squish-canvas.hello-enter{animation:none}
  .squish-page .swatch:hover,.squish-page .namer button:hover,.squish-page .bonus-next:hover,
  .squish-page .send-btn:hover,.squish-page .squish-back:hover,
  .squish-page .swatch:active,.squish-page .namer button:active,.squish-page .bonus-next:active,
  .squish-page .send-btn:active,.squish-page .squish-back:active{scale:none}
}