/* Final visual design, implemented 1:1 from the client design file ("!App Assets.svg").
   Target: Galaxy Tab A11 portrait (physical 800×1340). All metrics derive from the
   1600×2560 artboards (÷2 → CSS px at 800w) but are set in fluid units — nothing
   assumes an exact viewport. Touch targets ≥48×48dp throughout. */

* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
  font-family: "Samsung SS Head";
  src: url("assets/fonts/SamsungSSHead-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Samsung SS Head";
  src: url("assets/fonts/SamsungSSHead-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Samsung SS Body";
  src: url("assets/fonts/SamsungSSBody-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Samsung SS Body";
  src: url("assets/fonts/SamsungSSBody-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --ink: #231f20;
  --card-grey: #f4f4f4;
  --hairline: rgba(35, 31, 32, 0.4);
  --head: "Samsung SS Head", "SamsungOne", system-ui, sans-serif;
  --body: "Samsung SS Body", "SamsungOne", system-ui, sans-serif;
  /* 1 design unit (1600-wide artboard) = 0.5px at the tablet's 800px viewport;
     clamps keep other screens sane */
  --u: clamp(0.3px, 0.0625vw, 0.65px);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--body);
  color: var(--ink);
  /* Exact aurora artwork extracted from the design file; gradient fallback beneath. */
  background: url("assets/bg.svg") center / cover no-repeat fixed,
              linear-gradient(160deg, #fccbd5 0%, #dfb3e0 45%, #c39beb 100%);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; cursor: pointer; }

#app {
  max-width: 820px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(90 * var(--u)) calc(145 * var(--u)) calc(40 * var(--u));
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: screen-in 420ms var(--ease-out) both;
}

.screen[hidden] { display: none; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(calc(28 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

h1, h2 { font-family: var(--head); font-weight: 700; }

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

.lang-switch { display: flex; gap: 12px; justify-content: flex-end; min-height: 48px; }

.lang-btn {
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  font-family: var(--head);
  font-size: calc(40 * var(--u));
  min-width: 48px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
}

.lang-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.start-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(56 * var(--u));
  padding-bottom: calc(480 * var(--u));
  /* subtle drift against burn-in on an always-on start screen */
  animation: drift 24s ease-in-out infinite;
}

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-16 * var(--u))); }
}

#screen-start h1 {
  font-size: calc(139 * var(--u));
  line-height: 1.16;
  text-align: center;
  letter-spacing: calc(-1 * var(--u));
}

.subtitle {
  font-size: calc(55 * var(--u));
  line-height: 1.42;
  color: var(--ink);
  text-align: center;
  max-width: 30ch;
  margin: 0 auto;
}

.start-footer { padding-bottom: calc(24 * var(--u)); }

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: calc(1226 * var(--u));
  max-width: 100%;
  margin: 0 auto;
  min-height: max(48px, calc(252 * var(--u)));
  background: #fff;
  border: none;
  border-radius: calc(68 * var(--u));
  padding: calc(20 * var(--u)) calc(130 * var(--u));
  font-family: var(--head);
  font-weight: 700;
  font-size: calc(100 * var(--u));
  white-space: nowrap;
  color: var(--ink);
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(90, 60, 120, 0.14);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(90, 60, 120, 0.18);
}

.btn-primary .arrow {
  flex: 0 0 auto;
  display: inline-flex;
  width: calc(194 * var(--u));
  animation: nudge 2.4s var(--ease-out) infinite;
}

.btn-primary .arrow svg { width: 100%; height: auto; }

@keyframes nudge {
  0%, 55%, 100% { transform: translateX(0); }
  70% { transform: translateX(calc(14 * var(--u))); }
}

.hint {
  text-align: center;
  margin-top: calc(55 * var(--u));
  font-size: calc(55 * var(--u));
}

.btn-secondary {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  min-height: max(48px, calc(199 * var(--u)));
  padding: calc(16 * var(--u)) calc(100 * var(--u));
  font-family: var(--head);
  font-size: calc(75 * var(--u));
  color: var(--ink);
  box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(90, 60, 120, 0.12);
}

.btn-secondary:active { transform: scale(0.97); }

/* ---------- question ---------- */

.qbar {
  display: flex;
  align-items: center;
  gap: calc(130 * var(--u));
  min-height: 48px;
}

.back {
  background: none;
  border: none;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.back svg { width: calc(33 * var(--u)); min-width: 12px; height: auto; }

.progress {
  flex: 1;
  height: calc(55 * var(--u));
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
}

#progressFill {
  height: 100%;
  width: 0;
  background: var(--ink);
  border-radius: 999px;
  transition: width 320ms var(--ease-out);
}

#qCounter {
  font-family: var(--head);
  font-size: calc(65 * var(--u));
  min-width: 3ch;
  text-align: right;
}

#screen-question h2 {
  font-size: calc(144 * var(--u));
  line-height: 1.12;
  text-align: center;
  letter-spacing: calc(-1 * var(--u));
  margin: calc(246 * var(--u)) 0 0;
}

#answers {
  display: flex;
  flex-direction: column;
  gap: calc(152 * var(--u));
  margin-top: auto;
  padding-bottom: calc(150 * var(--u));
}

.answer {
  display: flex;
  align-items: center;
  gap: calc(50 * var(--u));
  background: #fff;
  border: none;
  border-radius: 999px;
  padding: calc(30 * var(--u)) calc(120 * var(--u)) calc(30 * var(--u)) calc(110 * var(--u));
  min-height: max(48px, calc(334 * var(--u)));
  font-size: calc(55 * var(--u));
  line-height: 1.25;
  text-align: left;
  color: var(--ink);
  box-shadow: 0 calc(6 * var(--u)) calc(22 * var(--u)) rgba(90, 60, 120, 0.10);
  transition: transform 140ms var(--ease-out);
  animation: screen-in 420ms var(--ease-out) both;
}

.answer:nth-child(2) { animation-delay: 70ms; }
.answer:nth-child(3) { animation-delay: 140ms; }

.answer:active { transform: scale(0.98); }
.answer.selected { outline: calc(5 * var(--u)) solid var(--ink); outline-offset: calc(-5 * var(--u)); }

.answer-icon {
  flex: 0 0 auto;
  width: calc(215 * var(--u));
  height: calc(215 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(140 * var(--u)); /* emoji fallback if content ships one */
}

.answer-icon img {
  max-width: 100%;
  max-height: 100%;
}

.answer-text { flex: 1; }

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

#screen-result { gap: calc(22 * var(--u)); }

#screen-result h1 {
  font-size: calc(132 * var(--u));
  line-height: 1.08;
  text-align: center;
  letter-spacing: calc(-1 * var(--u));
  margin-top: calc(-20 * var(--u));
}

.tagline {
  font-family: var(--body);
  font-weight: 700;
  font-size: calc(58 * var(--u));
  text-align: center;
  margin-top: calc(-8 * var(--u));
}

.device-card {
  position: relative;
  width: calc(1340 * var(--u));
  max-width: calc(100% + calc(99 * var(--u)));
  align-self: flex-end;
  margin-right: calc(-99 * var(--u));
  aspect-ratio: 1401 / 999;
  background: var(--card-grey);
  border: 1px solid var(--hairline);
  border-radius: calc(44 * var(--u));
  overflow: hidden;
  animation: card-in 560ms 120ms var(--ease-out) both;
}

@keyframes card-in {
  from { opacity: 0; transform: scale(0.96) translateY(calc(20 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

.device-card img {
  position: absolute;
  left: calc(48 * var(--u));
  top: calc(38 * var(--u));
  width: calc(1150 * var(--u));
  height: calc(891 * var(--u));
}

/* Device name sits in the photo's negative space; side depends on the shot. */
.device-name {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-family: var(--head);
  font-weight: 700;
  font-size: calc(122 * var(--u));
  line-height: 1.12;
  max-width: 45%;
}

.device-name { right: calc(40 * var(--u)); left: 50%; }           /* fold8_ultra, flip8 */
.device-card.name-left .device-name { left: calc(110 * var(--u)); right: 52%; } /* fold8 */

.result-desc {
  font-size: calc(44 * var(--u));
  line-height: 1.3;
  padding: 0 calc(48 * var(--u));
}

.cta-pill {
  background: #000;
  color: #fff;
  border-radius: 999px;
  min-height: max(48px, calc(120 * var(--u)));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16 * var(--u)) calc(40 * var(--u));
  margin: 0 calc(48 * var(--u));
  font-family: var(--head);
  font-size: calc(54 * var(--u));
  text-align: center;
}

.subscribe-card {
  background: #fff;
  margin: 0 calc(52 * var(--u));
  border-radius: calc(44 * var(--u));
  padding: calc(48 * var(--u)) calc(90 * var(--u)) calc(32 * var(--u));
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(26 * var(--u)) rgba(90, 60, 120, 0.10);
}

.subscribe-card h3 {
  font-family: var(--head);
  font-weight: 400;
  font-size: calc(82 * var(--u));
  line-height: 1.1;
}

.subscribe-card p { font-size: calc(43 * var(--u)); line-height: 1.32; }

#subForm { display: flex; flex-direction: column; gap: calc(24 * var(--u)); align-items: center; }

#subEmail {
  width: calc(1097 * var(--u));
  max-width: 100%;
  min-height: max(48px, calc(95 * var(--u)));
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: calc(12 * var(--u)) calc(44 * var(--u));
  font-family: var(--body);
  font-size: calc(48 * var(--u));
  text-align: center;
  background: #fff;
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
}

#subEmail::placeholder { color: #9a93a8; }
#subEmail:focus { outline: calc(4 * var(--u)) solid #c4b0f7; outline-offset: calc(-2 * var(--u)); }

.btn-sub {
  width: calc(600 * var(--u));
  min-height: max(48px, calc(100 * var(--u)));
  justify-content: center;
  font-family: var(--head);
  font-weight: 400;
  font-size: calc(55 * var(--u));
  padding: calc(12 * var(--u)) calc(40 * var(--u));
  background: linear-gradient(90deg, #f9f0ff 0%, #ded0fb 38%, #c4b0f7 100%);
  box-shadow: none;
  border-radius: 999px;
}

.sub-error { color: #b3261e; font-size: calc(42 * var(--u)); }

.disclaimer { color: #9a93a8; font-size: calc(30 * var(--u)); }

/* ---------- success / error ---------- */

.center-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(60 * var(--u));
  text-align: center;
  padding-bottom: calc(560 * var(--u));
}

#screen-success h1 { font-size: calc(239 * var(--u)); line-height: 1; }

.success-count { font-size: calc(68 * var(--u)); }

#screen-error h1 { font-size: calc(120 * var(--u)); }
#errorMsg { font-size: calc(52 * var(--u)); max-width: 40ch; line-height: 1.4; }

/* ---------- focus & motion ---------- */

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .screen, .answer, .device-card { animation: none; }
  .btn-primary .arrow { animation: none; }
  .start-body { animation: none; }
  #progressFill { transition: none; }
}