/* =============================================================
   Tells — visual system
   - black page background
   - centered phone-shaped white viewport (max-width on desktop, full on mobile)
   - Duolingo-style chunky 3D buttons inside
   ============================================================= */

:root{
  --bg:           #FFFFFF;
  --bg-soft:      #F7F7F7;
  --bg-card:      #FFFFFF;
  --ink:          #3C3C3C;
  --ink-strong:   #1F1F22;
  --ink-mute:     #AFAFAF;
  --line:         #E5E5E5;
  --line-strong:  #D6D6D6;

  --truth:        #58CC02;
  --truth-dk:     #58A700;
  --lie:          #FF4B4B;
  --lie-dk:       #CC3838;
  --conflict:     #FFC800;
  --conflict-dk:  #CC9F00;

  --accent:       #1CB0F6;
  --accent-dk:    #1899D6;

  --radius:       16px;
  --radius-lg:    24px;

  /* desktop phone-shape */
  --phone-w:      420px;
  --phone-aspect: 9 / 19.5;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html, body{
  height:100%;
  background:#000;            /* black behind the centered phone shell */
  color:var(--ink);
  font-family:'DM Sans', system-ui, sans-serif;
  font-feature-settings:"ss01","cv11";
  overflow:hidden;
  overscroll-behavior:none;
}

#cam{
  position:fixed; right:8px; bottom:8px; width:1px; height:1px; opacity:0;
  pointer-events:none;
}
#roiCanvas{ display:none; }

/* ============= VIEWPORT (the phone shell) ============= */
#viewport{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
}

#root{
  position:relative;
  width:100%;
  height:100dvh;
  max-width:100vw;
  max-height:100dvh;
  background:var(--bg);
  overflow:hidden;
}

/* On desktop / wide viewports, lock the phone shape. */
@media (min-width: 600px), (min-height: 850px){
  #root{
    width: var(--phone-w);
    height: min(calc(100dvh - 32px), calc(var(--phone-w) * (19.5 / 9)));
    max-height: calc(100dvh - 32px);
    border-radius: 38px;
    box-shadow:
      0 20px 60px rgba(0,0,0,.5),
      0 0 0 8px #1a1a1a,            /* phone bezel */
      0 0 0 9px #2a2a2a;
  }
}

/* ============= screens fill the root ============= */
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:18px 18px 22px;
  animation:rise .42s cubic-bezier(.2,.9,.2,1) both;
  background:var(--bg);
  border-radius:inherit;
  overflow:hidden;
}
.screen[hidden]{ display:none; }

@keyframes rise{
  from{ opacity:0; transform:translateY(10px); }
  to{   opacity:1; transform:none; }
}

/* ============= BUTTONS ============= */
.btn{
  appearance:none; border:0; cursor:pointer;
  font:800 16px/1 'DM Sans', sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  padding:18px 22px;
  border-radius:14px;
  width:100%;
  transition:transform .08s ease, box-shadow .08s ease;
  user-select:none;
}
.btn--primary{
  background:var(--truth);
  color:#fff;
  box-shadow: 0 5px 0 0 var(--truth-dk);
}
.btn--primary:active{
  transform:translateY(4px);
  box-shadow: 0 1px 0 0 var(--truth-dk);
}
.btn--ghost{
  background:transparent;
  color:var(--ink-mute);
  border:2px solid var(--line);
  box-shadow:none;
  margin-top:10px;
  font-weight:700;
}
.btn--ghost:active{ transform:translateY(1px); }

/* ============= HOME ============= */
.brand{
  text-align:center;
  padding:18px 0 22px;
}
.brand__mark{
  display:flex; gap:10px; justify-content:center;
  margin-bottom:14px;
}
.brand__dot{
  width:13px; height:13px; border-radius:50%;
  background:var(--lie);
  animation:pulse 1.6s ease-in-out infinite;
}
.brand__dot--2{ background:var(--conflict); animation-delay:.2s; }
.brand__dot--3{ background:var(--truth);    animation-delay:.4s; }
@keyframes pulse{
  0%,100%{ transform:scale(1);   opacity:.85; }
  50%   { transform:scale(1.35); opacity:1;   }
}
.brand__name{
  font-family:'Fraunces', serif;
  font-weight:900;
  font-size:60px;
  line-height:.9;
  letter-spacing:-.04em;
  color:var(--ink-strong);
  font-variation-settings:"opsz" 144;
}
.brand__tag{
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--ink-mute);
  margin-top:6px;
  font-size:16px;
  font-variation-settings:"opsz" 14;
}

.packs{
  flex:1;
  display:flex; flex-direction:column;
  gap:12px;
  overflow-y:auto;
  padding:6px 2px 12px;
}
.pack{
  position:relative;
  text-align:left;
  background:var(--bg-card);
  color:var(--ink);
  cursor:pointer;
  border-radius:var(--radius-lg);
  padding:18px 22px;
  font:inherit;
  display:flex; align-items:center; gap:16px;
  border:2px solid var(--line);
  box-shadow:0 4px 0 0 var(--line);
  transition:transform .08s ease, box-shadow .08s ease;
}
.pack:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 0 var(--line);
}
.pack__emoji{
  font-size:30px;
  width:50px; height:50px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--bg-soft);
  flex-shrink:0;
}
.pack__title{
  font-family:'Fraunces', serif;
  font-weight:800;
  font-size:20px;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  font-variation-settings:"opsz" 32;
}
.pack__sub{
  color:var(--ink-mute);
  font-size:13px;
  margin-top:1px;
}
.pack__count{
  position:absolute;
  top:14px; right:18px;
  font-size:10px;
  letter-spacing:.12em;
  color:var(--ink-mute);
  text-transform:uppercase;
}
.pack--coming{ opacity:.45; pointer-events:none; }
.home__foot{
  text-align: center;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--truth-dk);
  padding-top: 10px;
  font-weight: 900;
}

/* ============= PERMISSION ============= */
.screen--perm{ justify-content:center; align-items:center; }
.perm__card{
  background:var(--bg-card);
  border-radius:var(--radius-lg);
  padding:30px 26px 24px;
  text-align:center;
  width:100%;
  border:2px solid var(--line);
  box-shadow:0 4px 0 0 var(--line);
}
.perm__emoji{ font-size:42px; margin-bottom:10px; }
.perm__card h2{
  font-family:'Fraunces', serif;
  font-weight:800;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink-strong);
  margin-bottom:12px;
}
.perm__card p{
  color:var(--ink-mute);
  font-size:15px;
  line-height:1.5;
  margin-bottom:20px;
}

/* ============= QUESTION + VERDICT + CALIBRATE shared header ============= */
.qhead{
  display:flex; align-items:center; gap:14px;
  padding:4px 2px 6px;
}
.qhead__close{
  appearance:none; border:0; cursor:pointer;
  background:transparent;
  color:var(--ink-mute);
  font-size:20px;
  width:32px; height:32px;
  border-radius:8px;
}
.qhead__close:active{ background:var(--bg-soft); }
.qhead__dots{
  flex:1; display:flex; gap:6px;
}
.qhead__dots span{
  flex:1; height:9px;
  background:var(--line);
  border-radius:99px;
  transition:background .25s;
}
.qhead__dots span.is-current{ background:var(--accent); }
.qhead__dots span.is-done   { background:var(--truth); }
.qhead__dots--ghost span{
  background: linear-gradient(90deg, var(--line) 25%, var(--accent) 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer{
  from{ background-position:  200% 0; }
  to  { background-position: -200% 0; }
}

.qbody__pack{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin:8px 0 8px;
  text-align:center;
}
.qbody__text{
  font-family:'Fraunces', serif;
  font-weight:800;
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 72;
  color:var(--ink-strong);
  text-align:center;
  padding:0 6px;
  margin-bottom:12px;
  animation:wordIn .55s cubic-bezier(.2,.9,.2,1) both;
}
.qbody__text--echo{
  font-size:20px;
  color:var(--ink);
  font-style:italic;
  font-weight:600;
  margin-bottom:10px;
  font-variation-settings:"opsz" 32;
}
@keyframes wordIn{
  from{ opacity:0; transform:translateY(6px); filter:blur(4px); }
  to  { opacity:1; transform:none; filter:none; }
}

/* ============= MIRROR (the 9:16 face frame) ============= */
.mirror{
  position:relative;
  width:100%;
  flex:1;
  min-height:0;
  aspect-ratio: 9 / 16;
  margin: 4px auto 6px;
  border-radius:24px;
  overflow:hidden;
  background:#111;
  border:3px solid var(--line);
  box-shadow:0 4px 0 0 var(--line);
}
.mirror video,
.mirror > canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 25%;
  transform:scaleX(-1);
}
.mirror > canvas{ display:none; }
.mirror--verdict canvas#verdictFreeze{ display:block; filter:grayscale(1) contrast(1.05); }
.mirror--verdict video{ display:none; }
#freezeCanvas{ display:none; }

/* ============= PULSE HUD (top-right of mirror) ============= */
.pulse-hud{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  padding:6px 10px 8px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:10px;
  pointer-events:none;
}
.pulse-hud__bpm{
  display:flex; align-items:baseline; gap:4px;
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  color:#fff;
  letter-spacing:.04em;
}
.pulse-hud__bpm b{
  font-size:18px;
  font-weight:700;
  color:var(--lie);
  text-shadow:0 0 6px rgba(255,75,75,.6);
  font-variant-numeric: tabular-nums;
  animation:hudHeart 1s ease-in-out infinite;
}
.pulse-hud__bpm span{
  font-size:9px;
  letter-spacing:.18em;
  color:#fff;
  opacity:.75;
}
.pulse-hud__wave{
  display:block;
  width:120px; height:32px;
  filter:drop-shadow(0 0 4px rgba(255,75,75,.5));
}
@keyframes hudHeart{
  0%,100%{ transform:scale(1);    opacity:1;   }
  50%   { transform:scale(1.06); opacity:.85; }
}
.pulse-hud--frozen .pulse-hud__bpm b{ animation:none; }

/* ============= MIRROR overlays / stamps ============= */
.mirror__overlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
  z-index:2;
}
.mirror__stamp{
  font-family:'Fraunces', serif;
  font-weight:900;
  font-size:54px;
  line-height:.85;
  letter-spacing:.02em;
  font-variation-settings:"opsz" 144;
  color:#fff;
  padding:14px 28px;
  border:6px solid #fff;
  border-radius:14px;
  text-transform:uppercase;
  background:rgba(0,0,0,.32);
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  opacity:0;
  transform:rotate(-6deg) scale(2);
}

/* idle = invisible, no animation */
.mirror__overlay[data-state="idle"] .mirror__stamp{
  opacity:0;
  animation:none;
}

/* ANSWER — gentler, blue, during answer window */
.mirror__overlay[data-state="answer"] .mirror__stamp{
  font-size:42px;
  background:rgba(28,176,246,.55);
  border-color:#fff;
  animation:answerIn .35s cubic-bezier(.2,.9,.2,1) forwards,
            answerPulse 1.4s .35s ease-in-out infinite;
}
@keyframes answerIn{
  from{ opacity:0; transform:rotate(-3deg) scale(.85); }
  to  { opacity:1; transform:rotate(-3deg) scale(1);   }
}
@keyframes answerPulse{
  0%,100%{ transform:rotate(-3deg) scale(1);    }
  50%   { transform:rotate(-3deg) scale(1.05); }
}

/* READING — yellow/amber, during playback */
.mirror__overlay[data-state="reading"] .mirror__stamp{
  font-size:38px;
  background:rgba(255,200,0,.65);
  border-color:#fff;
  color:#1F1F22;
  text-shadow:none;
  animation:answerIn .35s cubic-bezier(.2,.9,.2,1) forwards,
            answerPulse 1.4s .35s ease-in-out infinite;
}

/* CALIBRATE BREATHE — same as reading but greyer */
.screen--calibrate .mirror__overlay[data-state="reading"] .mirror__stamp{
  background:rgba(28,176,246,.55);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  font-size:32px;
}

/* TRUTH / LIE / CONFLICTED / FLAT — slam */
.mirror__overlay[data-state="truth"] .mirror__stamp{
  background:var(--truth); border-color:var(--truth-dk); color:#fff;
  animation:stampSlam .55s cubic-bezier(.2,1.6,.4,1) forwards;
}
.mirror__overlay[data-state="lie"] .mirror__stamp{
  background:var(--lie); border-color:var(--lie-dk); color:#fff;
  animation:stampSlam .55s cubic-bezier(.2,1.6,.4,1) forwards;
}
.mirror__overlay[data-state="conflicted"] .mirror__stamp{
  background:var(--conflict); border-color:var(--conflict-dk); color:#fff;
  font-size:42px;
  animation:stampSlam .55s cubic-bezier(.2,1.6,.4,1) forwards;
}
.mirror__overlay[data-state="flat"] .mirror__stamp{
  background:rgba(60,60,60,.85); border-color:#fff; color:#fff;
  font-size:36px;
  animation:stampSlam .55s cubic-bezier(.2,1.6,.4,1) forwards;
}
@keyframes stampSlam{
  0%  { opacity:0; transform:rotate(-14deg) scale(2.5); }
  60% { opacity:1; transform:rotate(4deg)  scale(.92);  }
  100%{ opacity:1; transform:rotate(-6deg) scale(1);    }
}

/* ============= calibration progress bar ============= */
.calibrate__bar{
  width:100%;
  height:8px;
  background:var(--line);
  border-radius:99px;
  overflow:hidden;
  margin-top:10px;
}
.calibrate__bar > div{
  height:100%;
  width:0%;
  background:var(--accent);
  border-radius:inherit;
  transition:width .2s linear;
}

/* ============= QUESTION foot ============= */
.qfoot{
  padding:6px 0 0;
  text-align:center;
}
.qhint{
  color:var(--ink-mute);
  font-size:13px;
}
.qhint b{ color:var(--ink-strong); font-weight:700; }

.mic-debug{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--ink-mute);
  margin-top:4px;
  opacity:.5;
}
.mic-debug b{ color:var(--accent); font-weight:700; }

/* ============= VERDICT bottom ============= */
.verdict__line{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:17px;
  line-height:1.3;
  text-align:center;
  color:var(--ink-strong);
  padding:0 8px;
  margin:8px 0 8px;
  font-variation-settings:"opsz" 24;
  animation:rise .5s .1s cubic-bezier(.2,.9,.2,1) both;
}
.verdict__readout{
  display:flex; gap:14px; justify-content:center;
  font-family:'DM Sans', sans-serif;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:12px;
  animation:rise .5s .2s cubic-bezier(.2,.9,.2,1) both;
}
.verdict__readout div{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.verdict__readout b{ color:var(--ink-strong); font-size:13px; font-weight:700; letter-spacing:.04em; }
.verdict__debug{
  font-family:ui-monospace, monospace;
  font-size:10px;
  color:var(--ink-mute);
  text-align:center;
  margin-bottom:10px;
  line-height:1.5;
}

/* ============= END / SHARE ============= */
.screen--end{ justify-content:flex-start; align-items:stretch; }
.card-share{
  background:#000;
  color:#fff;
  border-radius:24px;
  padding:32px 24px 26px;
  margin:6px 0 22px;
  position:relative;
  overflow:hidden;
}
.card-share::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 0% 0%, rgba(28,176,246,.18), transparent 60%);
  pointer-events:none;
}
.card-share__pack{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#888;
  margin-bottom:14px;
}
.card-share__big{
  font-family:'Fraunces', serif;
  font-weight:900;
  font-size:36px;
  line-height:1;
  letter-spacing:-.03em;
  font-variation-settings:"opsz" 96;
  margin-bottom:14px;
}
.card-share__line{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:16px;
  line-height:1.35;
  white-space:pre-line;
}
.card-share__mark{
  position:absolute;
  bottom:14px; right:18px;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:13px;
  color:#888;
  letter-spacing:.04em;
}
.end__wellbeing{
  background:#F0F8FF;
  border:2px solid var(--accent);
  border-radius:14px;
  padding:14px 18px;
  margin-bottom:14px;
  text-align:center;
  font-size:14px;
}
.end__wellbeing p{ color:var(--ink); margin-bottom:6px; }
.end__wellbeing a{ color:var(--accent-dk); text-decoration:none; font-weight:700; }

  /* ── Pixel-shader spiral background ── */
  html, body {
    background: #f4f4f4 !important;
  }
  #spiral-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    filter: none;
    pointer-events: none;
  }

  /* ── Lift everything above the spiral ── */
  #viewport {
    position: relative;
    z-index: 1;
  }

  /* ── Square mirror: crop video to 1:1, face centered ── */
  .mirror {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    background: #111 !important;
    flex-shrink: 0 !important;
  }
  .mirror video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }
  .mirror--verdict #verdictFreeze {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }

  /* ── Tighter vertical layout ── */
  .screen--question .qbody__text,
  .screen--calibrate .qbody__text,
  .screen--verdict .qbody__text {
    margin-top: 4px !important;
    margin-bottom: 8px !important;
  }
  .qfoot {
    margin-top: 10px !important;
  }