/* Layout: one-screen phone flow, step screens → result cards → final invitation card */
:root{
  --bg-1:#140b19; --bg-2:#1f1024; --bg-3:#2c1328;
  --gold:#e8c07d; --gold-soft:#f5e2bd; --gold-dim:rgba(232,192,125,.32);
  --rose:#e88a9a;
  --ink:#fdf6ef; --ink-dim:rgba(253,246,239,.62); --ink-faint:rgba(253,246,239,.38);
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.09);
  --stroke:rgba(232,192,125,.22); --line:rgba(255,255,255,.12);
  --on-gold:#2a1408; --ok:#86d9ae;
  --f-display:'Amiri','Times New Roman',serif;
  --f-body:'Tajawal',-apple-system,'Segoe UI',Tahoma,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;font-family:var(--f-body);background:var(--bg-1);color:var(--ink);
  overflow:hidden;-webkit-font-smoothing:antialiased;direction:rtl;
}
#bg{position:fixed;inset:0;z-index:0;overflow:hidden}
#bg::before{
  content:'';position:absolute;inset:-30%;
  background:
    radial-gradient(45% 40% at 20% 12%, rgba(200,95,120,.28), transparent 65%),
    radial-gradient(45% 45% at 84% 80%, rgba(232,192,125,.18), transparent 65%),
    radial-gradient(60% 55% at 50% 50%, rgba(92,40,92,.34), transparent 70%),
    linear-gradient(160deg,var(--bg-1),var(--bg-2) 45%,var(--bg-3));
  animation:drift 28s ease-in-out infinite alternate;
}
@keyframes drift{100%{transform:scale(1.12) translate(-3%,2%)}}
#stars,#fx{position:fixed;inset:0;pointer-events:none}
#stars{z-index:1} #fx{z-index:70}

#app{
  position:relative;z-index:10;height:100%;max-width:520px;margin:0 auto;
  padding-inline:16px;display:flex;flex-direction:column;
}
.top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-block:14px 4px;
}
.brand{font-family:var(--f-display);font-size:17px;color:var(--gold);letter-spacing:.02em}
.iconBtn{
  height:34px;min-width:34px;padding:0 12px;border-radius:100px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--gold);
  font:500 13px var(--f-body);display:inline-flex;align-items:center;gap:6px;
}
.iconBtn:focus-visible,.btn:focus-visible,.opt:focus-visible,.pick:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.iconBtn[hidden]{display:none!important}

.screen{
  flex:1;min-height:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:16px;overflow-y:auto;overflow-x:hidden;padding-block:8px 20px;scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none}
.screen.on{display:flex;animation:screenIn .6s var(--ease) both}
.screen.tall{justify-content:flex-start}
@keyframes screenIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.out{animation:screenOut .28s ease forwards}
@keyframes screenOut{to{opacity:0;transform:translateY(-12px)}}

.kicker{font-size:12.5px;letter-spacing:.18em;color:var(--gold);font-weight:500}
h1,h2{margin:0;font-family:var(--f-display);font-weight:700;text-wrap:balance}
h1{line-height:1.35;font-size:clamp(30px,8.6vw,42px)}
h2{line-height:1.4;font-size:clamp(23px,6.4vw,30px)}
p{margin:0}
.sub{color:var(--ink-dim);font-size:15px;line-height:1.8;max-width:34ch;font-weight:300}
.orn{display:flex;align-items:center;gap:10px;color:var(--gold-dim);font-size:11px}
.orn::before,.orn::after{content:'';height:1px;width:50px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}

.steps{display:flex;gap:7px;justify-content:center}
.steps i{width:26px;height:3px;border-radius:3px;background:var(--line);transition:background .5s}
.steps i.done{background:var(--gold);box-shadow:0 0 10px rgba(232,192,125,.5)}

.btn{
  appearance:none;border:0;cursor:pointer;position:relative;overflow:hidden;text-decoration:none;
  font:700 16px var(--f-body);color:var(--on-gold);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 34px;border-radius:100px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold) 55%,#d9a95f);
  box-shadow:0 10px 30px -8px rgba(232,192,125,.55), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .25s var(--ease);
}
.btn:active{transform:scale(.96)}
.btn.shine::after{
  content:'';position:absolute;top:0;bottom:0;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{0%,62%{right:-60%}100%{right:135%}}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--stroke);box-shadow:none;font-weight:500;font-size:14.5px;padding:12px 22px}
.btn.wa{background:transparent;color:var(--ok);border:1px solid rgba(134,217,174,.35);box-shadow:none;font-weight:500;font-size:14.5px;padding:12px 22px}
.btn.small{padding:12px 22px;font-size:14.5px}
.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}

/* choice options */
.opts{display:flex;flex-direction:column;gap:10px;width:100%}
.opt{
  display:grid;grid-template-columns:44px 1fr;align-items:center;gap:12px;text-align:right;
  font-family:inherit;color:var(--ink);cursor:pointer;width:100%;
  background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px 16px;
  transition:background .25s,border-color .25s,transform .2s var(--ease);
}
.opt:hover{background:rgba(232,192,125,.1);border-color:var(--gold-dim)}
.opt:active{transform:scale(.97)}
.opt .em{font-size:26px;width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(0,0,0,.25)}
.opt b{display:block;font-size:17px;font-weight:700}
.opt small{display:block;font-size:13.5px;color:var(--ink-dim);margin-top:2px;font-weight:300}
.opt.picked{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:var(--on-gold);border-color:var(--gold)}
.opt.picked small{color:rgba(42,20,8,.7)}

/* results */
.recap{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip{
  font-size:12.5px;padding:5px 11px;border-radius:100px;white-space:nowrap;
  background:rgba(0,0,0,.28);border:1px solid var(--line);color:var(--ink-dim);
}
.chip.gold{color:var(--gold);border-color:var(--stroke)}
.chip.rose{color:var(--rose);border-color:rgba(232,138,154,.35)}
.note{font-size:13px;color:var(--ink-faint);max-width:36ch}
.cards{display:flex;flex-direction:column;gap:12px;width:100%}
.rcard{
  width:100%;text-align:right;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;
  background:var(--glass);border:1px solid var(--stroke);border-radius:20px;padding:16px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.7);
  animation:cardIn .5s var(--ease) both;
}
.rcard:nth-child(2){animation-delay:.07s}.rcard:nth-child(3){animation-delay:.14s}
@keyframes cardIn{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:none}}
.rcard .em{font-size:30px;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:rgba(0,0,0,.28)}
.rcard .body{min-width:0;display:flex;flex-direction:column;gap:7px}
.rcard h3{margin:0;font-family:var(--f-display);font-size:21px;line-height:1.35}
.rcard p{font-size:14.5px;line-height:1.75;color:var(--ink-dim)}
.rcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:2px}
.rcard .chips{display:flex;gap:6px;flex-wrap:wrap}
.pick{
  font:700 14px var(--f-body);cursor:pointer;color:var(--on-gold);border:0;border-radius:100px;padding:9px 18px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
}

/* final */
.winCard{
  width:100%;border-radius:24px;padding:26px 20px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(232,192,125,.4);
  box-shadow:0 26px 70px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.14), 0 0 55px -22px rgba(232,192,125,.5);
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.winCard::before{
  content:'';position:absolute;inset:-50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent,rgba(232,192,125,.13),transparent 30%);
  animation:spin 9s linear infinite;
}
.winCard > *{position:relative;z-index:2}
@keyframes spin{to{transform:rotate(360deg)}}
.bigEm{font-size:46px;line-height:1}
.bigName{
  font-family:var(--f-display);font-size:clamp(28px,8vw,38px);font-weight:700;line-height:1.3;text-wrap:balance;
  background:linear-gradient(120deg,var(--gold-soft),#fff 40%,var(--gold) 75%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.meta{display:flex;flex-direction:column;gap:7px;width:100%}
.metaRow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:15px;padding:12px 15px;border-radius:14px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);
}
.metaRow b{color:var(--gold);font-weight:500;font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
.metaRow span{text-align:left;min-width:0}
.finalLine{font-family:var(--f-display);font-style:italic;font-size:18px;line-height:1.8;color:var(--gold-soft);max-width:30ch}
.sign{font-size:12.5px;color:var(--ink-faint)}
.saveMsg{font-size:13px;color:var(--ink-dim);min-height:18px}

/* history */
.hist{display:flex;flex-direction:column;gap:9px;width:100%}
.hrow{
  display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;text-align:right;
  background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:12px 14px;
}
.hrow .em{font-size:24px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(0,0,0,.25)}
.hrow .tx{min-width:0}
.hrow b{display:block;font-size:15.5px;font-weight:700;overflow-wrap:anywhere}
.hrow small{display:block;font-size:12.5px;color:var(--ink-faint);margin-top:3px}
.hrow.done{border-color:rgba(134,217,174,.3)}
.hrow.done b{color:var(--ok)}
.tog{
  font:500 12.5px var(--f-body);cursor:pointer;border-radius:100px;padding:7px 12px;white-space:nowrap;
  background:transparent;border:1px solid var(--stroke);color:var(--gold);
}
.hrow.done .tog{border-color:rgba(134,217,174,.35);color:var(--ok)}
.empty{
  width:100%;padding:26px 18px;border-radius:18px;border:1px dashed var(--stroke);
  color:var(--ink-dim);font-size:14.5px;line-height:1.8;
}
.stats{display:flex;gap:8px;width:100%}
.stat{flex:1;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:14px;padding:10px 6px}
.stat .n{font-size:22px;font-weight:800;color:var(--gold-soft);font-variant-numeric:tabular-nums}
.stat .l{font-size:11.5px;color:var(--ink-dim)}

@media (max-height:680px){.screen{gap:12px}.opt{padding:11px 14px}.winCard{padding:20px 16px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}