/* The unfolded letter's extras: polaroid, doodle, voice-note cassette and stickers. Shared by every page that shows a wish. */
:root { --polaroid-w: 190px; --doodle-w: 250px; --cassette-w: 176px; --stk: 60px; }
@media (max-width: 560px) { :root { --polaroid-w: 150px; --doodle-w: 180px; --cassette-w: 140px; --stk: 46px; } }
.extras {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding: 0;
  margin: 0;
  min-height: 0;
  transition: padding 0.4s var(--ease-out);
}
.extras.has-items { padding: 18px 4px 14px; }
.extras > * { position: relative; }
/* ---------- polaroid ---------- */
.polaroid {
  --tilt: -4deg;
  margin: 0;
  width: var(--polaroid-w);
  padding: 10px 10px 0;
  background: #fffdf8;
  border-radius: 2px;
  box-shadow: 0 14px 26px -12px rgba(30, 14, 50, 0.55), 0 1px 2px rgba(30, 14, 50, 0.2);
  rotate: var(--tilt);
  transition: box-shadow 0.25s;
}
.polaroid:not(:has(.polaroid-cap)) { padding-bottom: 38px; }
.polaroid-frame { aspect-ratio: 1; overflow: hidden; background: #2b2145; cursor: pointer; }
.polaroid-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.polaroid-frame img.developing { animation: develop 2.2s ease-out both; }
@keyframes develop {
  0% { filter: brightness(2.2) saturate(0) contrast(0.5) sepia(0.4); }
  40% { filter: brightness(1.4) saturate(0.4) contrast(0.8) sepia(0.3); }
  100% { filter: none; }
}
.polaroid-cap {
  display: block;
  width: 100%;
  height: 46px;
  border: 0;
  background: transparent;
  text-align: center;
  font: 400 25px/46px var(--f-hand);
  color: var(--paper-ink);
  padding: 0 4px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.polaroid-cap::placeholder { color: rgba(58, 46, 79, 0.35); }
.washi {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  rotate: -5deg;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 6px, transparent 6px 12px),
    color-mix(in srgb, var(--pink) 70%, transparent);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
  opacity: 0.88;
}
/* ---------- doodle on the paper ---------- */
.doodle { cursor: pointer; padding: 4px; border-radius: 10px; transition: background-color 0.2s; }
.doodle:hover { background: rgba(58, 46, 79, 0.05); }
.doodle img { display: block; max-width: 100%; height: auto; }

/* ---------- cassette ---------- */
.cassette { width: var(--cassette-w); rotate: 3deg; filter: drop-shadow(0 10px 12px rgba(30, 14, 50, 0.35)); cursor: pointer; }
.cas-svg { display: block; width: 100%; height: auto; }
.cas-body { fill: color-mix(in srgb, var(--tint) 75%, #fff); stroke: rgba(58, 46, 79, 0.25); stroke-width: 2; }
.cas-stripe { fill: color-mix(in srgb, var(--tint) 85%, #3a2e4f); opacity: 0.55; }
.cas-foot { fill: color-mix(in srgb, var(--tint) 85%, #3a2e4f); opacity: 0.4; }
.cas-screw { fill: rgba(58, 46, 79, 0.35); }
.cas-title { font: 400 22px var(--f-hand); fill: var(--paper-ink); }
.reel { transform-box: fill-box; transform-origin: center; }
.cassette.is-playing .reel { animation: spin 1.6s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.cas-play {
  appearance: none;
  position: absolute;
  right: -14px;
  bottom: -12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lamp);
  color: #3a2410;
  cursor: pointer;
  box-shadow: 0 6px 14px -4px rgba(20, 8, 40, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  transition: transform 0.25s var(--ease-spring);
}
.cas-play:hover { transform: scale(1.1) rotate(-6deg); }
.cas-play:active { transform: scale(0.92); }
.cas-play svg { width: 20px; height: 20px; fill: currentColor; }
.cas-play .i-pause, .is-playing .cas-play .i-play { display: none; }
.is-playing .cas-play .i-pause { display: inline; }
.is-playing .cas-play { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 201, 139, 0.25), 0 6px 14px -4px rgba(20, 8, 40, 0.55); } }
.cas-time { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font: 400 11px var(--f-mono); color: var(--paper-ink); letter-spacing: 0.06em; pointer-events: none; }
.cas-progress { position: absolute; left: 26%; right: 26%; top: 56.5%; height: 3px; border-radius: 3px; overflow: hidden; pointer-events: none; }
.cas-progress::after { content: ''; position: absolute; inset: 0; background: var(--lamp); transform-origin: 0 50%; scale: var(--p, 0) 1; }
.cassette .x-btn { right: auto; left: -11px; }

/* ---------- stickers ---------- */
.stk {
  appearance: none;
  position: absolute;
  width: var(--stk);
  height: var(--stk);
  margin: calc(var(--stk) / -2) 0 0 calc(var(--stk) / -2);
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  rotate: calc(var(--rot, 0deg) + var(--sway, 0deg));
  transition: rotate 0.35s var(--ease-spring), scale 0.3s var(--ease-spring), opacity 0.2s;
}
.stk svg, .sticker-src svg, .stk-ghost svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 3px 3px rgba(30, 14, 50, 0.28));
}
.stk:focus-visible { outline: 2px dashed var(--paper-ink); outline-offset: 2px; border-radius: 50%; }
.stk.lifted { cursor: grabbing; scale: 1.18; z-index: 2; transition: rotate 0.15s, scale 0.3s var(--ease-spring); }
.stk.lifted svg { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 14px 10px rgba(30, 14, 50, 0.3)); }
.stk.peel-warn { opacity: 0.55; scale: 0.9; }
.stk.squish { animation: squish 0.55s var(--ease-out); }
@keyframes squish {
  0% { scale: 1.3 0.6; }
  35% { scale: 0.86 1.16; }
  65% { scale: 1.07 0.95; }
  100% { scale: 1; }
}
.stk.peeling { animation: peel 0.45s var(--ease-out) forwards; pointer-events: none; }
@keyframes peel { 30% { scale: 1.2; } 100% { scale: 0.3; translate: 0 -40px; opacity: 0; rotate: 40deg; } }
/* inside a letter */
.letter-inner { position: relative; }
.letter .sticker-layer { z-index: 3; }
.letter .stk { --stk: 60px; cursor: default; }
.extras--letter { justify-content: center; padding: 22px 4px 8px; margin-bottom: 4px; }
.extras--letter .polaroid-cap { line-height: 46px; height: 46px; }
.extras--letter .cassette { cursor: default; }
.extras--letter .polaroid-frame { cursor: default; }
.arrive { animation: arrive 0.7s var(--ease-spring) both; }
@keyframes arrive { 0% { scale: 0.2; opacity: 0; translate: 0 30px; } 60% { scale: 1.06; opacity: 1; } 100% { scale: 1; translate: 0 0; } }
.arrive-stk { animation: slap 0.5s var(--ease-out) both; }
@keyframes slap {
  0% { scale: 2.4; opacity: 0; }
  45% { scale: 0.82 1.14; opacity: 1; }
  70% { scale: 1.08 0.94; }
  100% { scale: 1; }
}
.doodle img { width: var(--doodle-w); }