/* ============================================================================
   PLAKATIMÄNG — kioskistiil / kiosk styles (portrait)
   Disainikeel mockup'idest: periwinkle taust, kollane aktsent, kreem plakat.
   ========================================================================== */
:root {
  --periwinkle: #5c71ae;
  --periwinkle-dk: #4c5f93;
  --yellow: #f4d920;
  --yellow-dk: #e4c800;
  --cream: #f7f3de;
  --ink: #16202a;
  --white: #ffffff;
  --radius: 22px;
  --pad: clamp(16px, 3vw, 40px);

  /* Liidese fondid — hoia sünkroonis js/data.js `contentFont`-iga.
     UI fonts; keep in sync with DATA.contentFont. */
  --font-content: 'Oswald', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Anton', Impact, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-content);
  background: var(--periwinkle);
  color: var(--white);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Kioski portree-konteiner / portrait kiosk frame ------------------------- */
#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--periwinkle);
}

/* ---------- ühised nupud / shared buttons ---------- */
.cta-yellow {
  background: var(--yellow);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(20px, 3.4vw, 34px);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: clamp(16px, 2.6vh, 28px) clamp(28px, 6vw, 64px);
  cursor: pointer;
  box-shadow: 0 8px 0 var(--yellow-dk);
  transition: transform .08s, box-shadow .08s;
}
.cta-yellow:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--yellow-dk); }
.cta-yellow.small { font-size: clamp(15px, 2vw, 20px); padding: 12px 26px; box-shadow: 0 5px 0 var(--yellow-dk); }
.cta-ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.6);
  border-radius: 999px;
  font-family: inherit; font-weight: 600;
  font-size: clamp(15px, 2.2vw, 22px);
  text-transform: uppercase; letter-spacing: 1px;
  padding: clamp(14px, 2vh, 22px) clamp(24px, 4vw, 44px);
  cursor: pointer;
}
.cta-ghost:active { background: rgba(255,255,255,.12); }

/* ---------- keelevalik / language toggle ---------- */
.lang {
  position: absolute; top: var(--pad); left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 30;
}
.lang-btn {
  background: transparent; border: none; color: rgba(255,255,255,.7);
  font-family: inherit; font-weight: 700; font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: 2px; padding: 6px 12px; border-radius: 10px; cursor: pointer;
}
.lang-btn.on { background: var(--white); color: var(--ink); }

/* ============================ START ============================ */
.screen-start { align-items: center; justify-content: center; padding: var(--pad); }
.start-inner { text-align: center; max-width: 86%; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 36px); }
.start-kicker { letter-spacing: 5px; font-weight: 600; opacity: .75; font-size: clamp(13px, 2vw, 18px); }
.start-title {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; line-height: .96; margin: 0;
  font-size: clamp(48px, 11vw, 110px); letter-spacing: 1px;
}
.start-lead { font-size: clamp(17px, 2.7vw, 26px); line-height: 1.45; max-width: 30ch; opacity: .95; font-weight: 300; }
.start-cta { margin-top: 8px; }
.start-hint { margin-top: 6px; opacity: .7; font-size: clamp(13px, 1.8vw, 18px); letter-spacing: 2px; text-transform: uppercase; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }

/* ============================ EDITOR ============================ */
.screen-editor { padding: 0; }
.ed-top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--pad) + 26px) var(--pad) 10px;
  gap: 10px;
}
.ed-top .ed-left { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 14px; }
.ed-top .lang { position: static; transform: none; }

/* Kodunupp — "Tagasi algusesse". Redaktoris päise vasakus servas, eelvaates
   ujuvalt üleval vasakul. Home button: editor header left / floating top-left. */
.home-btn {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,.14); color: #fff; border: none; border-radius: 50%; cursor: pointer;
}
.home-btn:active { background: rgba(255,255,255,.28); }
.home-btn .ico { width: 26px; height: 26px; }
.home-btn.floating { position: absolute; top: var(--pad); left: var(--pad); z-index: 30; }
.ed-title { grid-column: 2; font-family: var(--font-display); font-size: clamp(20px,3.4vw,34px); letter-spacing:1px; text-transform: uppercase; }
.ed-done { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: .5em; }
/* Ikoonid nuppudel — järgivad teksti suurust ja värvi */
.ico-arrow { width: 1.05em; height: 1.05em; flex: 0 0 auto; display: block; }
.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; display: block; }
.with-ico { display: inline-flex; align-items: center; gap: .6em; }

.stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 6px var(--pad);
  container-type: size;   /* cq-ühikud allpool mõõdavad lava sisuala */
}
/* Kõrgus = väiksem lava kõrgusest ja lava laiusest tuletatud kõrgusest.
   Muidu surub flex kitsal ekraanil kaadri kokku, kuvasuhe läheb katki ja SVG
   jätab üles-alla tühjad ribad.
   Height = the smaller of the stage height and the height implied by its width,
   so the frame keeps its ratio on narrow screens (no letterbox bands).      */
.poster-frame {
  height: min(100cqh, 100cqw * 1130 / 800);
  max-height: 100%; width: auto; max-width: 100%; flex: 0 0 auto;
  aspect-ratio: 800 / 1130;
  display: flex; box-shadow: 0 18px 40px rgba(0,0,0,.3); border-radius: 6px; overflow: hidden;
  background: var(--cream);
}
.poster-svg { width: 100%; height: 100%; display: block; }
/* touch-action: none — väldib brauseri "võtab žesti üle keramiseks" käitumist,
   mis muidu katkestab lohistamise (pointercancel) puuteseadmes / emuleeritud puutes. */
.poster-frame { touch-action: none; }
.el { transition: filter .12s; touch-action: none; }
.poster-frame svg .el.is-selected { filter: drop-shadow(0 0 7px var(--yellow)) drop-shadow(0 0 2px var(--yellow)); }

.ed-hint { text-align: center; font-size: clamp(12px, 1.8vw, 16px); opacity: .8; padding: 4px var(--pad); font-weight: 300; }

/* kategooriad / category bar */
.cat-bar {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px var(--pad);
  scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto; background: rgba(255,255,255,.14); color: #fff; border: none;
  border-radius: 999px; padding: 12px 20px; font-family: inherit; font-weight: 600;
  font-size: clamp(14px, 2vw, 19px); letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
}
.cat.on { background: var(--yellow); color: var(--ink); }

/* Kerimisnooled kategooriaribal: kuvatakse vaid siis, kui sinnapoole saab
   veel kerida; serva alla jääb hajuv vari, mis näitab, et sisu jätkub. Riba
   jääb ka sõrmega keritavaks.
   Scroll arrows on the category bar, shown only when there is more that way;
   edge fade beneath. The bar itself stays swipeable.                        */
.scroller { position: relative; flex: 0 0 auto; --fade: var(--periwinkle); }
.scroller .cat-bar { scroll-padding-inline: 56px; }
.scroller::before, .scroller::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none;
  opacity: 0; transition: opacity .15s; z-index: 1;
}
.scroller::before { left: 0; background: linear-gradient(90deg, var(--fade), transparent); }
.scroller::after { right: 0; background: linear-gradient(270deg, var(--fade), transparent); }
.scroller.can-left::before, .scroller.can-right::after { opacity: 1; }
.scroll-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--yellow); color: var(--ink); box-shadow: 0 3px 0 var(--yellow-dk), 0 5px 14px rgba(0,0,0,.3);
  display: grid; place-items: center; padding: 0;
}
.scroll-btn[hidden] { display: none; }
.scroll-btn:active { transform: translateY(calc(-50% + 2px)); box-shadow: 0 1px 0 var(--yellow-dk); }
.scroll-btn .ico-arrow { width: 22px; height: 22px; }
.scroll-btn.left { left: 8px; }
.scroll-btn.left .ico-arrow { transform: scaleX(-1); }
.scroll-btn.right { right: 8px; }

/* valikud / options */
.options {
  display: flex; gap: 12px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  padding: 12px var(--pad);
  height: clamp(132px, 17vh, 176px);   /* fikseeritud kõrgus — ei hüppa kategooriat vahetades */
  scrollbar-width: none;
  align-items: center;
  background: var(--periwinkle-dk);
}
.options::-webkit-scrollbar { display: none; }
.opt {
  flex: 0 0 auto; background: var(--white); color: var(--ink); border: 3px solid transparent;
  border-radius: 18px; padding: 12px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-width: 76px; min-height: 76px; font-size: 14px; font-weight: 600;
}
.opt.on { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(244,217,32,.35); }
.opt .dot { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); }
.opt .fontprev { font-size: 30px; line-height: 1; }
/* Teksti värv: eraldatud joonega taustavärvidest, näidis praegusel taustal. */
.opt-sep { flex: 0 0 auto; align-self: center; width: 2px; height: 52px; border-radius: 2px; background: rgba(0,0,0,.18); margin: 0 2px; }
.opt .inkprev {
  width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15);
  display: grid; place-items: center; font-weight: 800; font-size: 20px; line-height: 1;
}
/* Kontrastjoon "Aa" ümber: valge tekst heledal taustal (kreem, kollane) ja
   must tumedal (punane) peavad ikka näha olema.
   Contrast halo so white "Aa" stays visible on cream/yellow, black on red. */
.opt .inkprev.ink-white {
  text-shadow: 0 0 1px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.55), 1px 1px 0 rgba(0,0,0,.45), -1px -1px 0 rgba(0,0,0,.45);
}
.opt .inkprev.ink-black {
  text-shadow: 0 0 1px rgba(255,255,255,.7), 0 0 2px rgba(255,255,255,.5);
}
.opt.text {
  max-width: 260px; text-align: center; white-space: normal; line-height: 1.25;
  font-size: clamp(14px, 1.8vw, 17px); padding: 16px 18px; min-height: 64px;
}
.opt.text.empty, .opt.empty { color: #b00; font-weight: 800; min-width: 64px; }
.opt .scenethumb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(0,0,0,.15); }
.opt .scenethumb.none, .opt .charico { color: #999; }
.opt .charico { width: 46px; height: 60px; display: block; }
.opt .charico .charpng { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.opt.char.on { border-color: var(--yellow); }
.opt.char:not(.on) { opacity: .55; }
.mini { width: 60px; }

/* ============================ PREVIEW ============================ */
.screen-preview { align-items: center; justify-content: flex-start; padding: calc(var(--pad) + 56px) var(--pad) var(--pad); }
.pv-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(8px,1.6vh,18px); height: 100%; width: 100%; max-width: 100%; }
.pv-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(26px,4.6vw,46px); margin: 0; text-align:center; }
.pv-lead { opacity: .9; font-weight: 300; text-align: center; font-size: clamp(15px,2.2vw,22px); margin: 0; }
.pv-stage { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; container-type: size; }
.pv-poster { height: min(100cqh, 100cqw * 1130 / 800); max-height: 100%; width: auto; max-width: 100%; flex: 0 0 auto; aspect-ratio: 800/1130; box-shadow: 0 18px 40px rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; }
.pv-poster svg { width: 100%; height: 100%; display: block; }
.pv-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; align-items: stretch; }
/* Kaks võrdset põhinuppu kõrvuti (QR + e-post) — tekst ühel real */
.pv-actions .cta-yellow {
  flex: 1 1 0; min-width: 220px; max-width: 420px; justify-content: center;
  white-space: nowrap; font-size: clamp(16px, 2.5vw, 26px); padding-inline: clamp(18px, 3vw, 40px);
}
.pv-edit { align-self: center; }

/* ============================ QR ============================ */
.screen-qr { align-items: center; justify-content: center; padding: calc(var(--pad) + 56px) var(--pad) var(--pad); }
.qr-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(12px,2vh,24px); text-align: center; }
.qr-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(26px,4.6vw,46px); margin: 0; }
.qr-lead { opacity: .9; font-weight: 300; font-size: clamp(15px,2.2vw,22px); margin: 0; max-width: 30ch; }
/* Kood võtab kastist maksimumi — SVG-l on oma vaikne tsoon (4 moodulit)
   valge taustaga, seega CSS-polsterdust on vaja ainult natuke. */
.qr-code {
  background: #fff; padding: clamp(8px,1.1vw,12px); border-radius: 16px;
  width: min(86vw, clamp(240px, 44vh, 440px));
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.qr-svg { width: 100%; height: auto; display: block; }

/* Ootamise animatsioon: QR-i kujuline luukere + kerge pulss kogu kastil.
   Loading skeleton — same box size as the real code, so nothing jumps. */
.qr-code.is-loading { animation: qrBox 1.8s ease-in-out infinite; }
.qr-skel { width: 100%; height: auto; display: block; color: var(--ink); }
.qr-skel-eye { opacity: .18; animation: qrEye 1.8s ease-in-out infinite; }
.qr-skel-dots rect { opacity: .12; animation: qrDot 1.2s ease-in-out infinite; }
@keyframes qrBox { 0%, 100% { box-shadow: 0 14px 34px rgba(0,0,0,.35); }
                   50%      { box-shadow: 0 14px 34px rgba(0,0,0,.2); } }
@keyframes qrEye { 0%, 100% { opacity: .18; } 50% { opacity: .45; } }
@keyframes qrDot { 0%, 100% { opacity: .10; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .qr-code.is-loading, .qr-skel-eye, .qr-skel-dots rect { animation: none; }
}
.qr-url {
  font-family: ui-monospace, "Courier New", monospace; font-size: clamp(12px,1.6vw,16px);
  background: rgba(0,0,0,.18); padding: 10px 14px; border-radius: 10px;
  max-width: 90vw; overflow-wrap: anywhere;
}
.qr-hint { opacity: .75; font-size: clamp(13px,1.8vw,17px); font-weight: 300; }
.qr-status { font-size: clamp(16px,2.4vw,22px); font-weight: 600; }
.qr-status.error { color: #ffd7d2; background: #b3261e; padding: 10px 16px; border-radius: 10px; }
.qr-detail { font-size: 13px; opacity: .7; font-family: ui-monospace, monospace; overflow-wrap: anywhere; max-width: 80vw; }
.qr-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ============================ EMAIL ============================ */
.screen-email { padding: calc(var(--pad) + 56px) var(--pad) var(--pad); overflow-y: auto; justify-content: flex-start; }
.em-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 0 auto; width: 100%; max-width: 680px; }
.em-poster { width: clamp(120px, 28vh, 220px); aspect-ratio: 800/1130; box-shadow: 0 12px 30px rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.em-poster svg { width: 100%; height: 100%; }
.em-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.em-form h2 { font-family: var(--font-display); text-transform: uppercase; margin: 0; font-size: clamp(24px,4vw,38px); text-align: center; }
.em-label { font-weight: 600; font-size: 18px; }
.em-input {
  font-family: inherit; font-size: clamp(20px, 3vw, 28px); padding: 16px 18px; border-radius: 14px;
  border: none; outline: 3px solid transparent; background: #fff; color: var(--ink);
}
.em-input:focus { outline-color: var(--yellow); }
.em-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 300; line-height: 1.4; }
.em-consent input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--yellow); }
.em-error { color: #ffd7d2; background: #b3261e; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.em-actions { display: flex; gap: 14px; justify-content: center; margin-top: 4px; }

/* virtuaalklaviatuur / on-screen keyboard */
.keyboard { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.krow { display: flex; gap: 6px; justify-content: center; }
.key {
  flex: 1 1 0; min-width: 0; background: #fff; color: var(--ink); border: none; border-radius: 10px;
  padding: 14px 0; font-family: inherit; font-size: clamp(16px, 2.4vw, 22px); font-weight: 600; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.2);
}
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.key.wide { flex: 2 1 0; font-size: clamp(13px,1.8vw,17px); }
.key.back { flex: 1.2 1 0; background: var(--periwinkle-dk); color: #fff; }

/* ============================ THANKS ============================ */
.screen-thanks { align-items: center; justify-content: center; padding: var(--pad); text-align: center; }
.th-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.th-check { width: 120px; height: 120px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-size: 70px; font-weight: 800; }
.th-inner h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(34px,6vw,56px); margin: 0; }
.th-inner p { opacity: .9; font-weight: 300; font-size: clamp(16px,2.4vw,22px); max-width: 26ch; margin: 0; }