/* Vamp Booth — Haunted Edition
   Layout is authored on the 402×874 Figma frame and scaled to fit the screen (see --s in app.js). */

:root {
  --wine: #220b11;
  --red-top: #9f0a10;
  --red-bottom: #390406;
  --lipstick: #e0101c;
  --tile: #d9d9d9;
  --ring: #dadada;
  --font-script: 'Pinyon Script', 'Prompt', cursive;   /* Prompt = Thai glyphs for every stack */
  --font-serif: 'Cormorant Garamond', 'Prompt', serif;
  --font-fell: 'IM Fell Great Primer', 'Cormorant Garamond', 'Prompt', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Prompt', system-ui, sans-serif;
  --font-dm: 'DM Sans', 'Prompt', var(--font-ui);
  --s: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--wine) url(assets/bg-roses.webp) center / cover;
  color: #fff;
  font-family: var(--font-ui);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}
body.is-booth { background: #000; }
body.is-black { background: #0f0f0f url(assets/bg-damask.webp) center / cover; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }
.reload-fallback {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99;
  padding: 12px 22px; border-radius: 30px; border: 1px solid #fff;
  background: #9f0a10; color: #fff; font: 15px var(--font-ui);
}

#viewport {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#stage {
  position: relative;
  width: 402px; height: var(--h, 874px);
  flex: none;
  transform: scale(var(--s));
  overflow: hidden;
}

/* ---------- screens ---------- */
.screen {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.screen[data-active] { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.screen > * { position: absolute; }
/* short screens (see fit() in app.js): header up a little, bottom controls up all the way, middle moved/scaled */
.mid { position: absolute; left: 0; top: 0; width: 402px; height: 0;   /* no height: never blocks taps */
  transform-origin: 0 0; z-index: 2; }
.mid > * { position: absolute; }
.mid-hunt { z-index: 4; }
.lift-head { translate: 0 var(--dh, 0px); }
.lift-foot { translate: 0 var(--df, 0px); }
body.dim::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.55); }
body.dim #viewport { z-index: 1; }

.bg-roses { background: var(--wine) url(assets/bg-roses.webp) center / cover no-repeat; }

.sticker { pointer-events: none; }
.handprint { width: 89px; height: 91px; object-fit: cover; }
.wanna { width: 128.55px; height: 105.72px; }
.wanna > span {
  position: absolute; left: 6.7px; top: 9.38px;
  width: 115.142px; height: 86.956px;
  overflow: hidden; transform: rotate(10.05deg);
}
.wanna img { position: absolute; width: 117.19%; height: 275.86%; left: -17.19%; top: -71.26%; max-width: none; }
.lips { left: 288px; top: 122px; width: 96.83px; height: 101.38px; }
.lips > span { position: absolute; left: 8.42px; top: 7.69px; width: 80px; height: 86px; transform: rotate(-12.6deg); }
.lace { left: 18px; top: 222px; width: 347.92px; height: 361.64px; }
.lace > span { position: absolute; left: 25.46px; top: 23.82px; width: 297px; height: 314px; transform: rotate(-10.2deg); }
.kiss { left: 288.54px; top: 192.7px; width: 86.99px; height: 86.99px; }
.kiss > span { position: absolute; left: 5.3px; top: 5.3px; width: 76.4px; height: 76.4px; transform: rotate(8.62deg); }
.lips img, .lace img, .kiss img, .arm img { width: 100%; height: 100%; object-fit: contain; }
.arm { width: 190px; height: 324px; }
.arm img { object-position: top; }
.drip { left: -14px; top: -6px; width: 250px; height: 329px; object-fit: contain; object-position: top; }
.mirror-silver { left: 44px; top: 160px; width: 303px; height: 520px; object-fit: contain; }

.byline {
  left: 0; right: 0; top: 831px; text-align: center;
  font: 200 12px var(--font-dm);
}
.privacy {
  left: 0; right: 0; top: 849px; padding: 3px 0; text-align: center;
  font: 200 10px var(--font-dm); opacity: .6;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 2px;
}
.title-fell {
  left: 0; right: 0; text-align: center; white-space: nowrap;
  font-family: var(--font-fell); font-weight: 400; line-height: normal; z-index: 1;
}
.spaced {
  left: 0; right: 0; text-align: center; white-space: nowrap;
  font: 300 12px var(--font-dm); letter-spacing: 3.6px;
}

.back {
  left: 14px; top: 50px; width: 40px; height: 40px; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; padding-bottom: 4px;
  font: 300 34px/1 var(--font-ui);
  transition: opacity .3s, background-color .2s;
}
.back:active { background: rgba(255,255,255,.12); }
.booth .back { background: rgba(0,0,0,.35); }

.btn-dark {
  width: 263px; padding: 13px 14px; border-radius: 38px;
  border: 1px solid #4b0e15;
  background: linear-gradient(to bottom, #4b0e15, #2b0a0c);
  font-size: 16px; line-height: 19px; text-align: center; white-space: nowrap;
  z-index: 2; transition: transform .15s, filter .15s;
}
.btn-dark:active { transform: scale(.97); filter: brightness(1.3); }

.sound-toggle {
  position: absolute; left: 360px; top: 50px; width: 30px; height: 30px; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  border: .5px solid #fff; border-radius: 50%; background: rgba(0,0,0,.25);
  transition: opacity .2s, transform .15s;
}
.sound-toggle:active { transform: scale(.92); }
.sound-toggle .snd-off { display: none; }
.sound-toggle[data-muted] .snd-on { display: none; }
.sound-toggle[data-muted] .snd-off { display: block; }
.sound-toggle[data-muted] { opacity: .7; }

/* ---------- 1 · landing (V2_1) ---------- */
.mirror-gold { left: 13px; top: 168px; width: 376px; height: 564px; object-fit: contain; }
.logo-vamp { left: 0; right: 0; top: 66px; text-align: center; font: 64px var(--font-script); }
.logo-booth  { left: 0; right: 0; top: 116px; text-align: center; font: 32px var(--font-serif); }
.edition { left: 1px; right: 0; top: 161px; text-align: center; font: 300 12px var(--font-dm); letter-spacing: 3.6px; }
.mock-strip {
  display: flex; flex-direction: column; gap: 5.36px;
  width: 106.19px; height: 339px; padding: 16.08px 8.58px 30.82px;
  background: #fff;
}
.mock-strip i { height: 93.79px; }
.mock-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4.88px;
  width: 175.96px; height: 231.36px; padding: 8.15px 8.15px 9.77px;
  background: #fff;
}
.mock-strip i, .mock-grid i { display: block; background: var(--tile); }
.hero-strip {
  left: 95.33px; top: 280.38px; width: 133.064px; height: 340.051px;
  padding: 16.19px 10.75px 30.97px; gap: 5.33px; transform: rotate(-12.54deg);
}
.hero-strip i { height: 94.085px; }
.hero-grid {
  left: 154.34px; top: 320.54px; width: 170.336px; height: 223.961px;
  padding: 7.9px 7.9px 9.47px; gap: 4.72px; transform: rotate(4.39deg);
}
.duo-title.hero-duo { top: 678px; left: -18px; gap: 8px; }
.hero-duo .duo-a { font-size: 32px; }
.hero-duo .duo-b { font-size: 46px; }
.hero-loupe { left: 201px; top: 456.5px; width: 219.2px; height: 214px; }
/* sample photos in the landing frames (normal); the haunted versions only show inside the sweeping loupe */
.hero-strip i, .hero-grid i { background-size: cover; background-position: center 30%; }
.hero-lens { left: 209.6px; top: 463.8px; width: 125px; height: 125px; border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity .35s; }
.hero-lens.on { opacity: 1; }
.hero-world { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0; }
.hero-world > * { position: absolute; }
.hero-world .bg { inset: 0; background: var(--wine) url(assets/bg-roses.webp) center / cover; }
#screen-landing .wanna { transition: opacity .3s; }
#screen-landing .wanna.away { opacity: 0; }
.lang {
  left: 292px; top: 54px; width: 58px; height: 23px; z-index: 2;
  border: .5px solid #fff; border-radius: 26px;
  font: 200 12px var(--font-dm); white-space: nowrap;
}
.lang span { opacity: .55; transition: opacity .2s; }
.lang span[data-on] { opacity: 1; }

/* ---------- 2 · layout (V2_2) ---------- */
.pick { height: 440px; top: 193px; border-radius: 11px; }
.pick-strip { left: 17px; width: 155px; }
.pick-grid  { left: 177px; width: 206px; }
.pick > * { position: absolute; }
.pick-strip .mock-strip { left: 25px; top: 28px; }
.pick-grid  .mock-grid  { left: 15px; top: 82px; }
.pick-label { left: 0; right: 0; top: 394px; text-align: center; font-size: 14px; }
.pick-strip .pick-label { left: 2px; }
.pick-ring {
  left: 17px; top: 193px; width: 155px; height: 440px;
  border: 1px solid var(--ring); border-radius: 11px;
  transition: left .28s cubic-bezier(.3,.7,.2,1), width .28s cubic-bezier(.3,.7,.2,1);
  pointer-events: none;
}
.pick-ring[data-grid] { left: 177px; width: 206px; }

/* ---------- 2b · source (camera or upload) ---------- */
.duo-title {
  left: 0; right: 0; top: 58px; z-index: 1; pointer-events: none;
  display: flex; justify-content: center; align-items: baseline; gap: 10px; white-space: nowrap;
}
.duo-a { font: 34px var(--font-fell); }   /* titles stay modest: the photos are the show */
.duo-b { font: 46px var(--font-script); }
.source-card {
  left: 37px; width: 328px; height: 196px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--ring); border-radius: 11px;
  background: rgba(20, 3, 7, .45);
  transition: transform .15s, background-color .2s;
}
.source-card:active { transform: scale(.98); background: rgba(80, 8, 16, .55); }
.source-name { font: 30px var(--font-fell); margin-top: 4px; }
.source-desc { font: 300 12px var(--font-dm); letter-spacing: 2.4px; opacity: .85; }
.source-or { left: 0; right: 0; top: 404px; text-align: center; font: italic 18px var(--font-serif); opacity: .8; }

/* ---------- 2c · upload ---------- */
.up-paper { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.45); z-index: 2; }
.up-paper button {
  position: absolute; overflow: hidden;
  background: var(--tile) center / cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #6b6b6b; font: 300 30px/1 var(--font-ui);
}
.up-paper button small { font: 400 11px var(--font-dm); letter-spacing: 1.5px; }
.up-paper button[data-filled] { color: transparent; }
.up-paper button[data-filled] small { display: none; }
.up-paper button[data-filled]::after {
  content: '×'; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font: 300 18px/24px var(--font-ui);
}
.up-paper .stamp { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 16px var(--font-script); color: #222; opacity: .8; }
.upload-note { left: 24px; right: 24px; top: 712px; text-align: center; font: 300 12px var(--font-dm); opacity: .8; }
#develop-btn:disabled { opacity: .55; cursor: default; filter: none; transform: none; }
#develop-btn.ready { background: linear-gradient(to bottom, var(--red-top), var(--red-bottom)); border-color: var(--red-top); }

/* ---------- 3 · booth ---------- */
.booth { background: #000; }
/* full-screen camera, blurred + dark, just for atmosphere around the real preview frame */
#video {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scaleX(-1) scale(1.08);
  filter: grayscale(1) contrast(1.15) blur(10px) brightness(.35);
}
/* the live preview: same 7:8 crop as the photo (centre "cover" crop, like cropToPhoto) */
.cam-frame {
  left: 0; top: 96px; width: 402px; height: 459px; z-index: 1;   /* edge to edge, 7:8 like the photo */
  overflow: hidden; background: #000;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.cam-frame video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.booth-shade { inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.timer {
  top: 52px; height: 36px; min-width: 36px; padding: 0 10px;
  border-radius: 18px; background: rgba(0,0,0,.35);
  font-size: 15px; z-index: 3;
}
.timer { left: 62px; top: 52px; font-size: 13px; letter-spacing: .04em; }
/* the shots taken so far, in a row under the camera: empty slots are just outlines until a photo lands */
/* the shots taken so far: a column of little prints on the right edge of the camera, filling from the bottom */
.thumbs { left: 340px; top: 96px; height: 449px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; z-index: 2; }
.thumbs > div {
  width: 52px; height: 59px; border: 1px dashed rgba(255,255,255,.35); border-radius: 3px;
  background-size: cover; background-position: center;
}
.thumbs > div[data-taken] { border: 2px solid #fff; border-radius: 2px; box-shadow: 0 4px 14px rgba(0,0,0,.5); animation: thumb-in .35s cubic-bezier(.2,.9,.3,1.3); }
@keyframes thumb-in { from { transform: scale(1.8) translateX(-60px); opacity: 0; } }
/* light colours: a column on the left edge of the camera view */
.filters { left: 14px; top: 207px; display: flex; flex-direction: column; gap: 19px; z-index: 3; }
.filters button { filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.filters button { width: 32px; height: 32px; border-radius: 50%; position: relative; transition: transform .2s; }
.dot-normal { display: block; width: 32px; height: 32px; border-radius: 50%; background: conic-gradient(#ff3b30, #ffcc00, #34c759, #346eff, #af52de, #ff3b30); }
.dot-green { display: block; width: 32px; height: 32px; border-radius: 50%; background: #2f8a45; }
/* the same light choices on the upload screen, as a row */
.filter-row { left: 0; right: 0; top: 142px; display: flex; justify-content: center; gap: 14px; z-index: 3; }
.filter-row button { position: relative; width: 26px; height: 26px; border-radius: 50%; transition: transform .2s; }
.filter-row img, .filter-row span { width: 26px; height: 26px; }
.filter-row button[data-active] { transform: scale(1.12); }
.filter-row button[data-active]::after { content: ''; position: absolute; inset: -4px; border: 1px solid #fff; border-radius: 50%; }
.filters button[data-active] { transform: scale(1.12); }
.filters button[data-active]::after {
  content: ''; position: absolute; inset: -5px; border: 1px solid #fff; border-radius: 50%;
}
.filter-name {
  left: 56px; text-shadow: 0 1px 6px rgba(0,0,0,.8); top: 0; font: italic 15px var(--font-serif);
  opacity: 0; transition: opacity .3s, top .3s; z-index: 2; pointer-events: none;
}
.filter-name[data-show] { opacity: 1; }
.countdown {
  left: 0; width: 402px; top: 245px; text-align: center;
  font: 160px/1 var(--font-fell); text-shadow: 0 4px 40px rgba(0,0,0,.6);
  pointer-events: none; z-index: 3;
}
.countdown:empty { display: none; }
.countdown.tick { animation: tick 1s ease-out; }
@keyframes tick { from { transform: scale(1.5); opacity: 0; } 25% { opacity: 1; } to { transform: scale(.9); opacity: .85; } }
.pose {
  left: 56px; right: 70px; top: 478px; text-align: center;
  font: italic 22px/1.15 var(--font-serif); text-shadow: 0 2px 20px #000;
  pointer-events: none; z-index: 3; transition: opacity .3s;
}
.flash { inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.flash.go { animation: flash .5s ease-out; }
/* flash on: the whole screen turns warm white just before the photo, to light the face like a ring light */
.flash { background: #fff8ec; }
.flash.on { opacity: 1; animation: none; }
.flash.off { transition: opacity .45s ease-out; }
body.flashing { background: #fff8ec; }
.flash-btn {
  left: 108px; top: 52px; width: 36px; height: 36px; border-radius: 50%; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #ffd84d;
}
.flash-btn[aria-pressed="false"] { color: rgba(255,255,255,.55); }
.flash-btn[aria-pressed="false"]::after { content: ''; position: absolute; width: 22px; height: 1.5px; background: currentColor; transform: rotate(-45deg); }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.shutter { left: 155px; top: 726px; width: 92px; height: 92px; z-index: 2; transition: transform .15s, opacity .3s; }
.shutter:active { transform: scale(.94); }
.booth[data-busy] .shutter, .booth[data-busy] .filters, .booth[data-busy] .timer, .booth[data-busy] .flash-btn, .booth[data-busy] .back { opacity: 0; pointer-events: none; }
/* review: shots done — print now (auto after a few seconds) or retake the set */
.review { left: 0; right: 0; top: 722px; display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 5;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.booth[data-review] .review { opacity: 1; visibility: visible; transition: opacity .3s; }
.booth[data-review] .shutter, .booth[data-review] .timer, .booth[data-review] .flash-btn { opacity: 0; pointer-events: none; }
/* on review the colour dots pulse twice so people notice they can still change the colour */
.booth[data-review] .filters button { animation: dot-hint .7s ease-in-out .4s 2; }
.booth[data-review] .filters button:nth-child(2) { animation-delay: .5s; }
.booth[data-review] .filters button:nth-child(3) { animation-delay: .6s; }
.booth[data-review] .filters button:nth-child(4) { animation-delay: .7s; }
.booth[data-review] .filters button:nth-child(5) { animation-delay: .8s; }
@keyframes dot-hint { 50% { transform: scale(1.35); } }
.review-retake { font: 400 14px var(--font-dm); opacity: .85; text-decoration: underline; text-underline-offset: 3px; padding: 4px 12px; }
.booth[data-review] .thumbs > div[data-taken] { width: 60px; height: 68px; transition: width .3s, height .3s; }
.cam-error {
  inset: 0; z-index: 6; padding: 0 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--wine) url(assets/bg-roses.webp) center / cover no-repeat;
  text-align: center;
}
.cam-error[hidden] { display: none; }
.cam-msg { font-size: 15px; line-height: 1.45; opacity: .9; margin-bottom: 12px; }

/* ---------- buttons ---------- */
.btn-primary, .btn-ghost {
  display: flex; align-items: center; justify-content: center;
  width: 233px; padding: 13px 14px; border-radius: 38px;
  font-size: 16px; line-height: 19px; color: #fff; white-space: nowrap;
  transition: transform .15s, filter .15s;
}
.btn-primary { background: linear-gradient(to bottom, var(--red-top), var(--red-bottom)); }
.btn-ghost { border: 1px solid #fff; padding: 13px 14px; height: 47px; }
.btn-primary:active, .btn-ghost:active { transform: scale(.97); filter: brightness(1.2); }

/* ---------- 4/5 · hunt (V2_4A red / V2_B black / V2_5 summary) ---------- */
.hunt[data-theme="red"]   { background: var(--wine) url(assets/bg-roses.webp) center / cover no-repeat; }
.hunt[data-theme="black"] { background: #0f0f0f url(assets/bg-damask.webp) center / cover no-repeat; }
.hunt[data-theme="red"] .theme-black, .hunt[data-theme="black"] .theme-red { display: none; }
.duo-title.hunt-duo { top: 58px; gap: 8px; transition: opacity .4s; }
.hunt-duo .duo-a { font-size: 28px; }
.hunt-duo .duo-b { font-size: 40px; }
.duo-title span:empty { display: none; }
.hunt-sub { top: 104px; transition: opacity .4s; }
.name-input, .caption-input {
  background: none; border: 0; outline: 0; color: #fff; margin: 0 auto; width: 340px;
  z-index: 2; display: none;
}
.name-input { left: 0; right: 0; top: 60px; width: 280px; text-align: center; font: 52px/1.15 var(--font-script); }   /* stays between the back and speaker buttons */
.name-input::placeholder { color: #fff; opacity: .45; }
/* Fake blinking caret before the empty name field, so it's obvious you can type (no keyboard pop-up). */
.name-caret {
  display: none; left: 0; top: 74px; width: 2px; height: 38px; z-index: 2; pointer-events: none;
  background: #fff; animation: caret-blink 1.06s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
#screen-hunt[data-phase="done"] .name-caret { display: block; }
#screen-hunt .name-input:focus + .name-caret,
#screen-hunt .name-input:not(:placeholder-shown) + .name-caret { display: none; }
.caption-input::placeholder { color: #fff; opacity: .45; }
.name-input:focus::placeholder, .caption-input:focus::placeholder { opacity: .25; }
/* 16px stops iOS zooming on focus; scaled back down to the 12px design size */
.caption-input { font-size: 16px; letter-spacing: 4.8px; width: 453px; left: -25.5px; top: 120px; transform: scale(.75); }
#screen-hunt[data-phase="done"] #hunt-title, #screen-hunt[data-phase="done"] #hunt-sub { display: none; }
#screen-hunt[data-phase="done"] .name-input, #screen-hunt[data-phase="done"] .caption-input { display: block; }

.progress {
  left: 0; right: 0; top: 124px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 400 11px var(--font-dm); letter-spacing: .06em; opacity: .9;
  transition: opacity .4s;
}
.progress i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #fff; transition: background .3s, border-color .3s; }
.progress i[data-found] { background: var(--lipstick); border-color: var(--lipstick); }
.progress i[data-missed] { background: rgba(255,255,255,.3); }
.progress span { margin-right: 4px; }
#screen-hunt[data-phase="done"] .progress { opacity: 0; }

/* colour choice: a small column on the left edge, beside the strip, so the strip gets the height
   (the loupe rests on the right) */
.themes { left: 14px; top: 640px; display: flex; flex-direction: column; gap: 14px; z-index: 5; transition: opacity .3s; }
.themes button { position: relative; width: 46px; height: 46px; border-radius: 50%; }
.themes img { position: absolute; left: 0; top: 0; }
.themes [data-theme="red"] img { left: -4px; }
.themes button[data-on]::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; }
#screen-hunt:not([data-phase="hunt"]):not([data-phase="done"]) .themes { opacity: 0; pointer-events: none; }

.paper {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transform: rotate(3.51deg);
  /* after printing it drops out of the slot and settles at its tilt, with a small bounce */
  transition: transform .7s cubic-bezier(.34,1.45,.55,1), opacity .4s;
}
/* while printing: straight, pushed out of the slot step by step (transform + clip move together) */
.paper.printing { transition: transform .26s cubic-bezier(.25,.7,.3,1), clip-path .26s cubic-bezier(.25,.7,.3,1); box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.paper.hold { visibility: hidden; }

.print-slot {
  z-index: 3; height: 20px; border-radius: 10px;
  background: linear-gradient(to bottom, #fafafa 0%, #b9b9b9 30%, #f1f1f1 52%, #7b7b7b 78%, #3c3c3c 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.print-slot i { position: absolute; left: 16px; right: 16px; bottom: 3px; height: 5px; border-radius: 3px; background: #050505; box-shadow: inset 0 2px 3px rgba(0,0,0,.9); }
.print-slot[data-show] { opacity: 1; transform: none; }
.print-slot[data-working] { animation: slot-hum .09s linear infinite; }
@keyframes slot-hum { 50% { transform: translateY(.6px); } }
.paper .tile { position: absolute; background: var(--tile); overflow: hidden; }
.paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.paper .base { opacity: 0; transition: opacity 2.6s ease; }
.paper.developed .base { opacity: 1; }
.paper .layer { opacity: 0; transition: opacity 1.4s ease; }
.paper .layer[data-on] { opacity: 1; }
.paper .layer[data-missed] { opacity: .45; }
.paper .stamp {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font: 15px var(--font-script); color: #222; opacity: .8;
}

.loupe {
  left: 0; top: 0; width: 298px; height: 291px;
  z-index: 4; touch-action: none; cursor: grab;
  transition: opacity .5s;
}
.loupe img { position: absolute; inset: 0; width: 298px; height: 291px; pointer-events: none; }
.lens {
  position: absolute; left: 11.6px; top: 9.9px; width: 170px; height: 170px;
  border-radius: 50%; overflow: hidden;
  background: rgba(20, 4, 8, .25);
  box-shadow: inset 0 0 18px rgba(0,0,0,.6);
}
.lens::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), transparent 38%);
  pointer-events: none;
}
.lens-world {
  position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0;
  background: var(--wine) url(assets/bg-roses.webp) center / cover no-repeat;
}
.hunt[data-theme="black"] .lens-world { background: #0f0f0f url(assets/bg-damask.webp) center / cover no-repeat; }
.lens-world > * { position: absolute; }
.lens-world .paper { transition: none; }

/* save chooser */
.save-sheet { inset: 0; z-index: 9; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.save-card {
  position: relative; margin: 0 14px 22px; width: 100%;
  padding: 18px 16px 10px; border-radius: 20px;
  background: #1c070b; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -6px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 10px;
  animation: sheet-up .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
.save-title { text-align: center; font: 30px var(--font-script); margin-bottom: 2px; }
.save-opt {
  display: flex; align-items: center; gap: 14px; padding: 12px; text-align: left;
  border: 1px solid var(--ring); border-radius: 12px; background: rgba(255,255,255,.03);
  transition: background-color .15s, transform .15s;
}
.save-opt:active { background: rgba(159,10,16,.35); transform: scale(.98); }
.save-text { display: flex; flex-direction: column; gap: 3px; }
.save-text b { font: 400 16px var(--font-ui); }
.save-text small { font: 300 12px/1.35 var(--font-dm); opacity: .75; }
.save-thumb { position: relative; flex: none; width: 46px; height: 62px; border-radius: 4px; }
.thumb-strip { display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: flex-start; padding-top: 4px; width: 22px; margin: 0 12px; background: #fff; }
.thumb-strip i { width: 16px; height: 14px; background: #bdbdbd; }
.thumb-template { background: var(--wine) url(assets/bg-roses.webp) center / cover; border: 1px solid rgba(255,255,255,.25); }
.mini-strip { position: absolute; left: 17px; top: 9px; width: 12px; height: 40px; background: #fff; transform: rotate(4deg); }
.mini-loupe { position: absolute; left: 22px; top: 32px; width: 16px; height: 16px; border: 2px solid #ddd; border-radius: 50%; }
.mini-loupe::after { content: ''; position: absolute; left: 12px; top: 12px; width: 8px; height: 3px; background: #ddd; transform: rotate(45deg); transform-origin: left; }
.save-tip { text-align: center; font: 300 11px/1.4 var(--font-dm); opacity: .7; padding: 0 8px; }
.privacy-item { font: 300 13px/1.5 var(--font-dm); opacity: .85; padding: 0 6px; }
.privacy-item::before { content: '·'; margin-right: 6px; opacity: .6; }
.save-cancel { align-self: center; padding: 8px 18px; font: 400 14px var(--font-ui); opacity: .8; }

.toast {
  left: 50%; top: 706px; z-index: 6;
  transform: translate(-50%, 12px); opacity: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px; border-radius: 30px;
  background: rgba(10, 2, 4, .82); border: 1px solid rgba(255,255,255,.18);
  font-size: 14px; white-space: nowrap;
  transition: opacity .35s, transform .35s;
  pointer-events: none;
}
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-weight: 600; }
.chip {
  font: 600 9px var(--font-dm); letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 10px; background: #555;
}
.chip.rare { background: var(--red-top); }
.chip.ultra { background: linear-gradient(90deg, #c8a24a, #f2e2a6, #c8a24a); color: #2a1206; }

.give-up {
  right: 22px; top: 121px; z-index: 7;   /* on the progress row, clear of the title */
  font: 400 12px var(--font-dm); opacity: .75; text-decoration: underline; text-underline-offset: 3px;
  transition: opacity .3s;
}
.theme-hint {
  left: 10px; top: 612px; z-index: 5; pointer-events: none; white-space: nowrap;
  font: 400 12px var(--font-dm); letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .4s;
}
/* once everything is found, a little nudge that the backdrop can change; gone after the first pick */
#screen-hunt[data-phase="done"] .theme-hint:not([data-picked]) { opacity: .95; animation: hint-bob 1.6s ease-in-out .6s infinite; }
@keyframes hint-bob { 50% { transform: translateY(-3px); } }
.final-actions {
  left: 22px; top: 770px; z-index: 5;   /* one row, so the strip above gets the height */
  display: flex; gap: 10px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .5s, transform .5s, visibility 0s linear .5s;
}
.final-actions .btn-primary, .final-actions .btn-ghost { width: 174px; font-size: 15px; padding: 13px 10px; }
#screen-hunt[data-phase="done"] .final-actions { opacity: 1; visibility: visible; transform: none; transition: opacity .5s, transform .5s; }
#screen-hunt[data-phase="done"] .give-up,
#screen-hunt:not([data-phase="hunt"]) .give-up { opacity: 0; pointer-events: none; }
#screen-hunt:not([data-phase="hunt"]):not([data-phase="done"]) .loupe { opacity: 0; pointer-events: none; }

/* ---------- Thai: one clean sans (Prompt), smaller titles, no letter-spacing ---------- */
html[lang="th"] .duo-title { gap: 8px; }
html[lang="th"] .duo-a { font-size: 24px; font-weight: 300; }
html[lang="th"] .duo-b { font-size: 32px; font-weight: 500; }
html[lang="th"] .hero-duo .duo-a { font-size: 22px; }
html[lang="th"] .hero-duo .duo-b { font-size: 30px; }
html[lang="th"] .hunt-duo .duo-a { font-size: 20px; }
html[lang="th"] .hunt-duo .duo-b { font-size: 28px; }
html[lang="th"] .spaced,
html[lang="th"] .source-desc,
html[lang="th"] .caption-input { letter-spacing: 0; }
html[lang="th"] .spaced { font-size: 13px; }
html[lang="th"] .caption-input { font-size: 18px; }
html[lang="th"] .source-name { font-size: 24px; font-weight: 400; }
html[lang="th"] .source-or { font-style: normal; font-size: 15px; }
html[lang="th"] .pose { font-style: normal; font-size: 21px; font-weight: 300; }
html[lang="th"] .save-title { font-size: 24px; font-weight: 500; }
html[lang="th"] .title-fell { font-weight: 300; }