/* With 애니 — standalone digital photobooth
   Theme-able by design: frame themes live in app.js as data,
   page chrome uses the custom props below. */

:root {
  --ink: #131313;
  --paper: #f4f1ea;
  --accent: #ff4d6d;
  --accent-2: #4d79ff;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* Space Grotesk (Latin) + Gothic A1 (Korean) — paired so caps and Hangul
     blocks sit at a matched height. Both need an explicit heavy weight; see
     --display-weight, applied wherever these are used. */
  --display: "Space Grotesk", system-ui, sans-serif;
  --display-kr: "Gothic A1", system-ui, sans-serif;
  --display-weight: 700;
}

/* the display faces aren't single-weight blacks like before, so opt every
   display element into the heavy weight in one place */
.wordmark, .big-button, .booth-status, .countdown,
.fallback-title, .result-title, .editor-title {
  font-weight: var(--display-weight);
}
.wordmark .kr { font-weight: 900; } /* Gothic A1 black, to hold next to the Latin */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* subtle paper grain */
  background-image: radial-gradient(rgba(19,19,19,.035) 1px, transparent 1px);
  background-size: 4px 4px;
}

.screen { display: none; flex: 1; }
.screen.active { display: block; }

/* ---------------- start screen ---------------- */

.masthead {
  text-align: center;
  padding: clamp(28px, 6vh, 72px) 20px 8px;
}

.kicker {
  font-size: 11px;
  letter-spacing: .28em;
  opacity: .65;
  margin: 0 0 18px;
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(40px, 9vw, 96px);
  line-height: .95;
  margin: 0;
  letter-spacing: -.01em;
}
.wordmark .kr {
  font-family: var(--display-kr);
  display: inline-block;
  color: var(--accent);
  -webkit-text-stroke: 0;
  margin-right: .12em;
  /* Hangul blocks fill more of the em than Latin caps, so trim the Korean a
     touch to land it at the same visual height as "With" */
  font-size: .9em;
}

.tagline {
  max-width: 60ch;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: .8;
}

.setup {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 56px;
}

.setup-label {
  font-size: 11px;
  letter-spacing: .24em;
  opacity: .6;
  margin: 28px 0 10px;
}

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option-card {
  font-family: var(--mono);
  font-size: 12px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 3px 3px 0 rgba(19,19,19,.9);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  color: var(--ink);
}
.option-card:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(19,19,19,.9); }
.option-card.selected {
  background: var(--ink);
  color: #fff;
  transform: translate(1px,1px);
  box-shadow: 1px 1px 0 rgba(19,19,19,.9);
}

.option-row.compact .option-card { padding: 8px 12px; box-shadow: 2px 2px 0 rgba(19,19,19,.9); }

/* grouped backdrop shelves (special / classic) */
.backdrop-groups { display: flex; flex-direction: column; gap: 10px; }
.backdrop-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
  margin: 18px 0 2px;
}
.backdrop-groups > .backdrop-section-label:first-child { margin-top: 4px; }
/* -2px trims the note's trailing line-leading so the gap below it matches the
   card-row → next-section-label gap (≈16px) rather than reading ~2px larger */
.backdrop-section-note { margin-top: 2px; margin-bottom: -2px; }

/* layout pictograms */
.layout-icon { display: grid; gap: 2px; }
.strip-icon { grid-template-rows: repeat(4, 6px); width: 14px; }
.grid-icon  { grid-template-columns: repeat(2, 10px); grid-template-rows: repeat(2, 8px); }
.layout-icon i { background: currentColor; border-radius: 1px; display: block; }

/* theme swatch chip */
.swatch {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  display: inline-block;
  flex: none;
}

.big-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .04em;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(19,19,19,.9);
  padding: 16px 26px;
  margin-top: 34px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.big-button:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 rgba(19,19,19,.9); }
.big-button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(19,19,19,.9); }
.big-button .arrow { transition: transform .15s ease; }
.big-button:hover .arrow { transform: translateX(4px); }
.big-button.secondary { background: var(--accent-2); }
.big-button[disabled] { opacity: .5; cursor: not-allowed; }
/* `display: inline-flex` above overrides the native [hidden] attribute, so
   restore it — otherwise a `hidden` big-button (e.g. SHARE on desktop) shows
   anyway. (Same fix as .editor-overlay[hidden] below.) */
.big-button[hidden] { display: none; }

.ghost-button {
  font-family: var(--mono);
  font-size: 12px;
  background: none;
  border: none;
  color: var(--ink);
  opacity: .6;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 10px;
}
.ghost-button:hover { opacity: 1; }

.fine-print {
  font-size: 11px;
  line-height: 1.7;
  opacity: .55;
  margin-top: 16px;
  max-width: 52ch;
}
.fine-print a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fine-print a:hover { color: var(--accent); }
.upload-hint { margin-top: 12px; }

/* ---------------- booth screen ---------------- */

#screen-booth.active { display: flex; align-items: center; justify-content: center; }

.booth-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  width: 100%;
}

.booth-status {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .3em;
  margin: 0 0 10px;
}

.cut-dots { display: flex; gap: 8px; margin-bottom: 16px; }
.cut-dots .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: transparent;
  transition: background .2s ease, transform .2s ease;
}
.cut-dots .dot.active { transform: scale(1.35); }
.cut-dots .dot.done { background: var(--accent); }

.viewfinder {
  position: relative;
  width: min(92vw, 560px);
  aspect-ratio: 4 / 3;
  background: #111;
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(19,19,19,.9);
}

#camera, #fx {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror like a real booth screen */
}
#fx { z-index: 1; }

/* backdrop swatches get their gradient inline from JS */
.swatch.backdrop-swatch { border-radius: 50%; }
/* "Plain" swatch is a native colour input styled to match the round chips */
.swatch.backdrop-swatch.plain-color { padding: 0; cursor: pointer; background: none; appearance: none; -webkit-appearance: none; }
.swatch.backdrop-swatch.plain-color::-webkit-color-swatch-wrapper { padding: 0; }
.swatch.backdrop-swatch.plain-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.swatch.backdrop-swatch.plain-color::-moz-color-swatch { border: none; border-radius: 50%; }
/* multi-shot sets render their four scenes as a 2×2 inside the chip — squared
   off (not round) with dividing lines, so "four different scenes" reads even
   when the shots look alike. Bigger than the single-photo chips on purpose. */
.swatch.backdrop-swatch.quad {
  width: 24px; height: 24px;
  border-radius: 5px;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 1.5px;
  overflow: hidden;
  padding: 0;
  background: currentColor; /* shows through the gap as divider lines */
}
.swatch.backdrop-swatch.quad i {
  background-size: cover;
  background-position: center;
  background-color: #d8d4c8; /* fallback tile tint before the webp decodes */
}

/* backdrop preview — so picking isn't blind */
.backdrop-preview {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  margin: 0 0 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(19,19,19,.9);
  overflow: hidden;
  background: #d8d4ca;
}
#backdrop-preview-canvas {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  transform: scaleX(-1); /* match the booth's mirrored #fx canvas */
}
.backdrop-preview-label {
  position: absolute;
  left: 8px; bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: #fff;
  background: rgba(19,19,19,.72);
  padding: 4px 9px;
  border-radius: 999px;
}

.countdown {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: clamp(90px, 24vw, 180px);
  color: #fff;
  text-shadow: 0 4px 28px rgba(0,0,0,.55);
  pointer-events: none;
}
.countdown.tick { animation: pop .45s ease both; }
@keyframes pop {
  0% { transform: scale(1.6); opacity: 0; }
  35% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.92); opacity: .9; }
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.flash.fire { animation: flashfire .5s ease-out both; }
@keyframes flashfire {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.last-shot-peek {
  position: absolute;
  z-index: 4;
  right: 10px; bottom: 10px;
  width: 88px;
  aspect-ratio: 4 / 3;
  border: 2px solid #fff;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) rotate(2deg);
  transition: opacity .3s ease, transform .3s ease;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.last-shot-peek.show { opacity: 1; transform: translateY(0) rotate(2deg); }

.booth-hint { font-size: 12px; opacity: .65; margin-top: 16px; }

.camera-fallback {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px;
}
.fallback-title { font-family: var(--display); font-size: 22px; margin: 0 0 8px; }
.file-button { display: inline-flex; }

/* ---------------- result screen ---------------- */

#screen-result.active { display: block; }

.result-layout {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px 60px;
  max-width: 1100px;
  margin: 0 auto;
}

.print-slot-wrap { position: relative; flex: none; }

.print-slot {
  position: relative;
  width: 100%;
  height: 18px;
  z-index: 3;
}
.slot-lip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 36px);
  height: 16px;
  background: var(--ink);
  border-radius: 8px;
  display: block;
  box-shadow: 0 3px 0 rgba(19,19,19,.25);
}

.strip-holder {
  position: relative;
  overflow: hidden;
  padding: 0 18px 26px;
  margin-top: -2px;
}

#strip-canvas {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 14px 34px rgba(19,19,19,.28);
  border-radius: 4px;
  transform: translateY(-104%);
}
.printing #strip-canvas {
  animation: printout 2.6s cubic-bezier(.22,.9,.3,1) forwards;
}
@keyframes printout {
  0%   { transform: translateY(-104%); }
  12%  { transform: translateY(-96%); }
  18%  { transform: translateY(-97%); } /* the little printer hesitation */
  100% { transform: translateY(0); }
}

.strip-holder.strip-size { width: min(72vw, 280px); }
.strip-holder.grid-size  { width: min(88vw, 430px); }

.result-controls { max-width: 440px; }
.result-title { font-family: var(--display); font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; }
.result-sub { font-size: 13px; line-height: 1.7; opacity: .75; margin: 0 0 8px; }

/* Result-screen control groups (FRAME / FILM LOOK / TOUCH UP) must read as
   distinct top-level sections — not peers of the A·/B· frame sub-sections.
   A divider rule + a heavier, darker heading ranks them above the sub-labels,
   so FILM LOOK no longer looks like "section C" of the frames. */
.result-controls .setup-label {
  font-weight: 700;
  color: var(--ink);
  opacity: 1;
  font-size: 12px;
  letter-spacing: .2em;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(19,19,19,.15);
}
/* keep the A·/B· frame sub-labels visibly subordinate to the section heading */
.result-controls .backdrop-section-label {
  font-size: 10px;
  opacity: .55;
  margin-top: 14px;
}

.retake-row { display: flex; gap: 10px; flex-wrap: wrap; }
.retake-thumb {
  width: 76px;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  position: relative;
  box-shadow: 2px 2px 0 rgba(19,19,19,.9);
  transition: transform .12s ease;
  padding: 0;
}
.retake-thumb:hover { transform: translate(-1px,-1px); }
.retake-thumb::after {
  content: "✎";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: rgba(19,19,19,.45);
  opacity: 0;
  transition: opacity .12s ease;
  border-radius: 6px;
}
.retake-thumb:hover::after { opacity: 1; }

.action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.action-row .big-button { margin-top: 18px; }

/* ---------------- touch-up editor ---------------- */

.editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(19,19,19,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.editor-overlay[hidden] { display: none; }

.editor-panel {
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 8px 8px 0 rgba(19,19,19,.9);
  padding: 20px 22px 22px;
  max-width: 640px;
  width: 100%;
  max-height: 94svh;
  overflow: auto;
}

.editor-title {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .22em;
  margin: 0 0 6px;
}
.editor-sub { font-size: 12px; line-height: 1.6; opacity: .7; margin: 0 0 14px; }

#edit-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
  background: #111;
}

.editor-tools { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.editor-tools.disabled { opacity: .45; pointer-events: none; }

.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .08em;
}
.slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}

.editor-actions { margin-top: 6px; }
.editor-actions .big-button { margin-top: 14px; padding: 12px 20px; font-size: 14px; }

/* ---------------- colophon ---------------- */

.colophon {
  text-align: center;
  font-size: 11px;
  opacity: .5;
  padding: 18px 16px 26px;
}
.colophon p { margin: 0; }

@media (max-width: 640px) {
  .result-layout { flex-direction: column; align-items: center; }
  .result-controls { text-align: center; }
  .option-row { justify-content: center; }
  /* but keep the setup pickers (layout / backdrop / timer) left-aligned, like desktop */
  .setup .option-row { justify-content: flex-start; }
  .retake-row, .action-row { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .printing #strip-canvas { animation-duration: .6s; }
  .countdown.tick { animation: none; }
}