@font-face{font-family:'NotoThai';src:url('../fonts/NotoSansThai-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'NotoThai';src:url('../fonts/NotoSansThai-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --ink:#0d1017;
  --ink-2:#161c27;
  --ink-3:#222a39;
  --fog:#8f9bb0;
  --paper:#f6f1e6;
  --cream:#fefeef;
  --navy:#102952;
  --red:#ff5546;
  --salmon:#f8cfc6;
  --gold:#e7c46b;
  --plum:#6b1a6e;
  --magenta:#e8175d;

}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior:none}
body{
  background:var(--ink);
  color:#eef2f8;
  font-family:'NotoThai',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input{font:inherit}
ul{list-style:none}

/* Vignette only. An animated noise layer used to live here; on a phone it
   repainted the whole viewport several times a second, which read as the screen
   shaking and made every bit of text look soft. */
#grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 40%,transparent 58%,rgba(0,0,0,.5));
}

/* screens */
.screen{
  position:fixed;top:0;left:0;right:0;z-index:1;
  height:100%;
  height:100svh;              /* stable across the iOS address-bar collapse */
  height:var(--app-h,100svh); /* JS narrows this while the keyboard is open */
  display:none;place-items:center;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain; /* no rubber-band chaining to the page */
}
.screen.is-active{display:grid;align-content:safe center;animation:fade .5s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.btn{
  display:block;width:100%;padding:15px 20px;border-radius:999px;
  font-weight:700;font-size:1.02rem;letter-spacing:.02em;
  transition:transform .15s,box-shadow .15s,opacity .15s;
}
.btn:active{transform:scale(.975)}
.btn-go{background:var(--red);color:#fff;box-shadow:0 10px 30px -10px var(--red)}
.btn-go[disabled]{opacity:.35;box-shadow:none;cursor:not-allowed}
.btn-save{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px rgba(16,41,82,.3)}
.tiny{margin-top:14px;text-align:center;font-size:.78rem;color:var(--fog)}

.sound{
  position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:50;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.10);
  color:#fff;font-size:.95rem;line-height:1;
}
.sound .off{display:none}
.sound.muted .on{display:none}
.sound.muted .off{display:block}

/* ───────── envelope ───────── */
.env-wrap{text-align:center;perspective:1200px}
.env-hint{color:var(--fog);font-size:.9rem;letter-spacing:.14em;margin-bottom:26px;text-transform:uppercase}
.env-tap{margin-top:30px;color:var(--fog);font-size:.85rem;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

.envelope{
  position:relative;width:min(300px,74vw);aspect-ratio:1.55;
  transform-style:preserve-3d;display:block;
  animation:float 4s ease-in-out infinite;
  will-change:transform;
}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}

.env-back,.env-front,.env-flap,.env-letter{position:absolute;inset:0;border-radius:6px}
.env-back{background:linear-gradient(160deg,#f3ded6,#e3bfb3);box-shadow:0 24px 40px rgba(0,0,0,.6)}
.env-front{
  background:linear-gradient(160deg,#f8cfc6,#eab8ac);
  clip-path:polygon(0 100%,50% 46%,100% 100%);
  z-index:3;
}
.env-front::before,.env-front::after{
  content:'';position:absolute;bottom:0;width:52%;height:100%;
  background:linear-gradient(140deg,#f4c6bc,#e0a89c);
}
.env-front::before{left:0;clip-path:polygon(0 0,0 100%,68% 100%)}
.env-front::after{right:0;clip-path:polygon(100% 0,100% 100%,32% 100%)}
.env-flap{
  background:linear-gradient(180deg,#f9d6ce,#eec0b5);
  clip-path:polygon(0 0,100% 0,50% 62%);
  transform-origin:top center;z-index:4;
  transition:transform .8s cubic-bezier(.6,-0.2,.3,1.3);
}
.env-letter{
  z-index:2;background:var(--paper);border-radius:4px;
  transform:translateY(0) scale(.9);opacity:0;
  transition:transform .7s cubic-bezier(.2,.9,.3,1) .35s,opacity .3s .35s;
}
.env-seal{
  position:absolute;top:52%;left:50%;translate:-50% -50%;z-index:5;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--red);color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.06em;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  transition:transform .35s,opacity .35s;
}
.envelope.open .env-flap{transform:rotateX(-172deg)}
.envelope.open .env-seal{transform:translate(-50%,-50%) scale(0) rotate(90deg);opacity:0}
.envelope.open .env-letter{transform:translateY(-42%) scale(1);opacity:1}

/* ───────── letter ───────── */
.letter{
  width:min(520px,100%);
  background:var(--paper);color:#1a1a1a;
  border-radius:8px;padding:34px 26px 30px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
  animation:unfold .7s cubic-bezier(.2,.9,.3,1) both;
  transform-origin:top center;
}
@keyframes unfold{from{transform:translate3d(0,-16px,0) scale(.975);opacity:0}to{transform:none;opacity:1}}

.letter-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.lh-brand{font-size:.72rem;letter-spacing:.28em;color:var(--red);font-weight:700}
.lh-rule{flex:1;height:1px;background:rgba(0,0,0,.15)}
.letter-title{font-size:1.12rem;line-height:1.55;margin-bottom:14px}
.letter-body{font-size:.96rem;line-height:1.85;color:#3d3d3d}

.type-caret::after{content:'▌';animation:blink .9s steps(1) infinite;color:var(--red)}
@keyframes blink{50%{opacity:0}}

.intake{margin-top:28px;border-top:1px dashed rgba(0,0,0,.18);padding-top:22px}
.field{display:block;margin-bottom:18px;border:0}
.field-label{display:block;font-size:.82rem;font-weight:700;margin-bottom:9px;color:#2a2a2a}
.field-label em{font-style:normal;font-weight:400;color:#8a8a8a}
#nickname{
  width:100%;padding:13px 15px;border-radius:10px;
  border:1.5px solid rgba(0,0,0,.16);background:#fffdf7;color:#1a1a1a;
}
#nickname:focus{outline:0;border-color:var(--red)}
.ages{display:flex;flex-wrap:wrap;gap:8px}
.age{
  padding:9px 15px;border-radius:999px;font-size:.88rem;
  background:#fffdf7;border:1.5px solid rgba(0,0,0,.14);color:#3a3a3a;
}
.age.sel{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.intake .tiny{color:#9a9a9a}

/* ───────── scene ───────── */
#s-scene{align-content:start;padding-top:0}
.hud{
  /* deliberately not position:sticky — sticky inside an overflow container
     jitters during momentum scrolling on iOS, which reads as the header shaking */
  position:relative;z-index:5;
  width:min(560px,100%);margin:0 auto;
  display:flex;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 4px 14px;
  background:linear-gradient(var(--ink) 72%,transparent);
}
.hud-scene{font-size:.68rem;letter-spacing:.2em;color:var(--gold);font-weight:700}
.hud-count{font-size:.72rem;color:var(--fog);font-variant-numeric:tabular-nums}
.hud-bar{flex:1;height:3px;border-radius:2px;background:var(--ink-3);overflow:hidden}
.hud-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .45s cubic-bezier(.2,.9,.3,1)}

.stage{width:min(560px,100%);margin:0 auto;padding-bottom:40px}
.slug{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fog);margin-bottom:12px;
}
.slug::before{content:'● ';color:var(--red)}
.prompt{
  font-size:1.24rem;line-height:1.72;font-weight:700;margin-bottom:26px;
  text-wrap:pretty;
}
.opts{display:grid;gap:10px}
.opt{
  width:100%;text-align:left;display:flex;gap:13px;align-items:flex-start;
  padding:15px 17px;border-radius:14px;
  background:var(--ink-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:.98rem;line-height:1.62;
  transition:transform .16s,background .16s,box-shadow .16s;
}
.opt:hover{background:var(--ink-3)}
.opt:active{transform:scale(.985)}
.opt.picked{background:var(--red);box-shadow:inset 0 0 0 1px var(--red);color:#fff}
.opt.dim{opacity:.28}
.opt-n{
  flex:none;width:23px;height:23px;border-radius:6px;margin-top:1px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.09);color:var(--fog);
  font-size:.72rem;font-weight:700;
}
.opt.picked .opt-n{background:rgba(0,0,0,.22);color:#fff}

.stage.enter{animation:stagein .55s cubic-bezier(.2,.9,.3,1) both;backface-visibility:hidden}
@keyframes stagein{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

/* ───────── slate transition ───────── */
.slate{
  position:fixed;inset:0;z-index:40;display:none;
  background:var(--ink);
  place-content:center;justify-items:center;
}
.slate.run{display:grid;animation:slateout .25s ease .95s both}
@keyframes slateout{to{opacity:0;visibility:hidden}}
.slate-top{
  width:min(320px,78vw);height:34px;display:flex;gap:0;overflow:hidden;
  transform-origin:left bottom;
  animation:clap .5s cubic-bezier(.3,-0.4,.4,1.4) both;
  border-radius:3px 3px 0 0;
}
.slate-top i{flex:1;background:#f2f2f2}
.slate-top i:nth-child(odd){background:#111}
.slate-top i{transform:skewX(-18deg)}
@keyframes clap{0%{transform:rotate(-26deg)}55%{transform:rotate(2deg)}100%{transform:rotate(0)}}
.slate-body{
  width:min(320px,78vw);height:132px;background:#15181f;
  box-shadow:inset 0 0 0 2px #2b303c;border-radius:0 0 3px 3px;
  display:grid;place-items:center;
}
.slate-body span{
  font-size:1.1rem;letter-spacing:.24em;color:var(--gold);font-weight:700;
}

/* rain overlay */
.rain{position:fixed;inset:0;z-index:6;pointer-events:none;display:none;overflow:hidden;contain:strict}
.rain.on{display:block}
.rain i{
  position:absolute;top:-14%;width:1px;height:78px;
  background:linear-gradient(transparent,rgba(190,215,255,.55));
  animation:drop linear infinite;
}
@keyframes drop{to{transform:translate3d(0,128vh,0)}}

/* ───────── call ───────── */
#s-call{background:radial-gradient(120% 90% at 50% 0%,#1b2436,#080a0f)}
.call{text-align:center;animation:fade .6s both}
.call-label{font-size:.76rem;letter-spacing:.24em;color:var(--fog);text-transform:uppercase}
.call-from{font-size:1.5rem;font-weight:700;margin:10px 0 34px}
.call-avatar{
  width:120px;height:120px;border-radius:50%;margin:0 auto 46px;
  display:grid;place-items:center;font-size:2.6rem;color:#fff;
  background:linear-gradient(150deg,#33405c,#1d2534);
  position:relative;
}
.call-avatar::before,.call-avatar::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,85,70,.45);
  animation:ring 1.9s ease-out infinite;
}
.call-avatar::after{animation-delay:.95s}
@keyframes ring{
  from{transform:scale(1);opacity:.7}
  to{transform:scale(1.85);opacity:0}
}
.call-actions{display:flex;gap:56px;justify-content:center}
.call-btn{
  width:68px;height:68px;border-radius:50%;font-size:1.6rem;color:#fff;
  display:grid;place-items:center;
}
.call-btn.decline{background:#3a4152}
.call-btn.accept{background:#25c065;animation:jiggle 1.2s ease-in-out infinite}
@keyframes jiggle{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
.call-hint{margin-top:26px;font-size:.82rem;color:var(--fog)}

/* ───────── sms ───────── */
#s-sms{align-content:center}
.sms{width:min(430px,100%)}
.sms-head{
  font-size:.72rem;letter-spacing:.2em;color:var(--fog);
  text-transform:uppercase;margin-bottom:18px;text-align:center;
}
.sms-thread{display:grid;gap:10px}
.bubble.hold{visibility:hidden}
.bubble{
  max-width:82%;padding:13px 17px;border-radius:20px 20px 20px 5px;
  background:var(--ink-2);font-size:1rem;line-height:1.6;
  animation:pop .4s cubic-bezier(.2,.9,.3,1.4) both;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.bubble.hot{background:var(--red);color:#fff;font-weight:700}
@keyframes pop{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
.dots{display:flex;gap:5px;padding:16px 18px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--fog);animation:bounce 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translate3d(0,0,0);opacity:.4}30%{transform:translate3d(0,-6px,0);opacity:1}}

/* ───────── result ───────── */
#s-result{background:#08090d;align-content:start}
.result-scroll{width:min(520px,100%);margin:0 auto;padding:22px 0 60px}
.result-kicker{
  text-align:center;font-size:.92rem;color:var(--fog);
  letter-spacing:.06em;margin-bottom:16px;
}
.result-kicker b{color:var(--gold);font-weight:700}

.dossier{
  position:relative;overflow:hidden;
  border-radius:18px;padding:26px 22px 28px;
  background:
    radial-gradient(120% 62% at 50% 8%,rgba(200,164,77,.20),transparent 62%),
    linear-gradient(180deg,#191712,#0e0f13 58%);
  box-shadow:inset 0 0 0 1px rgba(200,164,77,.18),0 30px 70px -34px #000;
  animation:rise .7s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

.pos-no{
  text-align:center;font-size:.66rem;letter-spacing:.34em;
  color:var(--gold);font-weight:700;margin-bottom:6px;
}

.hero{display:grid;place-items:center;padding:6px 0 14px;position:relative}
.hero::before{
  content:'';position:absolute;width:74%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(215,180,100,.22),transparent 66%);
}
.hero img{position:relative;height:250px;width:auto;max-width:88%;object-fit:contain;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}

.d-en{
  text-align:center;font-size:clamp(1.35rem,5.6vw,1.72rem);
  font-weight:700;line-height:1.25;color:#fff;
}
.d-th{text-align:center;color:var(--gold);font-size:.95rem;margin-top:2px}

.quote-box{
  margin:20px 0 18px;padding:13px 16px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,rgba(200,164,77,.13),rgba(200,164,77,.05));
  box-shadow:inset 0 0 0 1px rgba(200,164,77,.34);
}
.qb-label{font-size:.66rem;letter-spacing:.2em;color:var(--gold);margin-bottom:6px}
.qb-text{font-size:1.05rem;font-weight:700;color:#fff;line-height:1.5}
.qb-text::before{content:'“'}
.qb-text::after{content:'”'}

.d-desc{font-size:.94rem;line-height:1.85;color:#c8cfdb;margin-bottom:6px}
.d-desc b{color:var(--gold);font-weight:700}

.d-row{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:15px 0;border-top:1px solid rgba(255,255,255,.09);
}
.d-key{font-size:.82rem;color:var(--fog);flex:none}
.d-val{font-size:.92rem;color:#eef2f8;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.chip{
  padding:6px 13px;border-radius:999px;font-size:.79rem;color:#e9edf4;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}

.d-mates{padding-top:16px;border-top:1px solid rgba(255,255,255,.09)}
.d-mates .d-key{display:block;margin-bottom:12px}
.mates{display:flex;gap:16px}
.mate{width:80px;text-align:center}
.mate img{
  width:66px;height:66px;border-radius:50%;display:block;margin:0 auto 7px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(200,164,77,.35);
}
.mate span{display:block;font-size:.68rem;line-height:1.35;color:var(--fog)}

/* dna profile */
.profile{margin-top:30px}
.profile h3{
  font-size:.66rem;letter-spacing:.28em;color:var(--fog);
  font-weight:400;margin-bottom:14px;
}
.pb{display:grid;grid-template-columns:1fr 92px 34px;gap:11px;align-items:center;padding:6px 0}
.pb-name{font-size:.85rem;color:#7d879a}
.pb-track{height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.pb-fill{display:block;height:100%;background:#5a6273;border-radius:2px;
  width:0;transition:width .9s cubic-bezier(.2,.9,.3,1)}
.pb-pct{font-size:.74rem;color:#7d879a;text-align:right;font-variant-numeric:tabular-nums}
.pb.top .pb-name{color:var(--gold);font-weight:700}
.pb.top .pb-fill{background:var(--gold)}
.pb.top .pb-pct{color:var(--gold)}

.result-actions{display:grid;gap:10px;margin-top:30px}
.btn-save{
  background:linear-gradient(180deg,#c9a34a,#a8863a);color:#1a1508;
  box-shadow:0 12px 30px -14px rgba(200,164,77,.8);
}
.btn-ghost{background:transparent;color:var(--fog);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
#result-count{color:var(--fog)}

@media (max-width:420px){
  .mates{gap:10px}
  .mate{width:70px}
  .mate img{width:58px;height:58px}
  .hero img{height:210px}
  .d-row{flex-wrap:wrap;gap:8px}
  .d-val,.chips{text-align:left;justify-content:flex-start}
}

@media (max-width:380px){
  .prompt{font-size:1.1rem}
  .opt{font-size:.92rem;padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}