/* ============================================================
   THE SECOND-AND-A-HALF DATE
   mobile-first. dreamy night concert.
   ============================================================ */

:root{
  --night-0:#07040f;
  --night-1:#120a26;
  --night-2:#231543;
  --night-3:#3a2160;

  --amber:#ffb257;
  --amber-hot:#ff8c42;
  --amber-soft:#ffd9a0;
  --rose:#ff6b9d;
  --rose-deep:#c9457a;

  --cream:#fdf5ea;
  --cream-dim:rgba(253,245,234,.66);
  --cream-faint:rgba(253,245,234,.38);

  --glass:rgba(255,255,255,.055);
  --glass-line:rgba(255,255,255,.12);

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(18px,5.2vw,26px);
}

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

html,body{height:100%}

body{
  margin:0;
  font-family:var(--ui);
  color:var(--cream);
  background:var(--night-0);
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   BACKGROUND / SKY
   ============================================================ */
.sky{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(120% 80% at 50% 108%, #4a2a1a 0%, transparent 58%),
    radial-gradient(90% 60% at 78% 8%, #2c1a52 0%, transparent 60%),
    linear-gradient(178deg, var(--night-0) 0%, var(--night-1) 38%, var(--night-2) 74%, var(--night-3) 100%);
}

.stars{position:absolute;inset:0;overflow:hidden}

.star{
  position:absolute;
  background:#fff;
  border-radius:50%;
  opacity:.5;
  animation:twinkle var(--dur,4s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  will-change:opacity,transform;
}
@keyframes twinkle{
  0%,100%{opacity:.12;transform:scale(.7)}
  50%    {opacity:var(--peak,.85);transform:scale(1)}
}

.shooting-star{
  position:absolute;
  width:90px;height:1.5px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  opacity:0;
  border-radius:2px;
  animation:shoot 1.5s var(--ease) forwards;
}
@keyframes shoot{
  0%  {opacity:0;transform:translate(0,0) rotate(18deg) scaleX(.2)}
  12% {opacity:.9}
  100%{opacity:0;transform:translate(70vw,26vh) rotate(18deg) scaleX(1)}
}

.moon{
  position:absolute;
  top:8vh;right:11vw;
  width:54px;height:54px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #fffaf0, #f5e0b8 58%, #d9bd8a);
  box-shadow:0 0 40px 10px rgba(255,236,200,.16), 0 0 110px 34px rgba(255,220,170,.08);
  animation:moonDrift 26s ease-in-out infinite alternate;
}
@keyframes moonDrift{from{transform:translateY(0)}to{transform:translateY(12px)}}

.haze{
  position:absolute;
  bottom:0;left:-10%;
  width:120%;height:46%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,150,70,.20), transparent 70%);
  filter:blur(14px);
  animation:hazeBreathe 7s ease-in-out infinite alternate;
}
@keyframes hazeBreathe{from{opacity:.65}to{opacity:1}}

/* stage spotlight cone */
.spotlight{
  position:absolute;
  bottom:0;left:50%;
  width:86vw;max-width:520px;height:76vh;
  transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(255,196,120,0) 0%, rgba(255,196,120,.055) 42%, rgba(255,178,87,.16) 100%);
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0% 100%);
  filter:blur(3px);
  transition:opacity .5s ease;
  animation:coneSway 9s ease-in-out infinite alternate;
}
@keyframes coneSway{
  from{transform:translateX(-50%) rotate(-1.6deg)}
  to  {transform:translateX(-50%) rotate(1.6deg)}
}
.spotlight.flare{animation:flare .55s ease-out}
@keyframes flare{
  0%{filter:blur(3px) brightness(1)}
  30%{filter:blur(6px) brightness(2.1)}
  100%{filter:blur(3px) brightness(1)}
}

.stage-glow{
  position:absolute;
  bottom:0;left:0;right:0;
  height:16vh;
  background:linear-gradient(to top, rgba(255,150,70,.28), transparent);
  pointer-events:none;
}

/* ============================================================
   THE SINGER
   ============================================================ */
.singer-wrap{
  position:fixed;
  bottom:0;left:50%;
  transform:translateX(-50%);
  z-index:1;
  width:min(215px,50vw);
  pointer-events:none;
  opacity:.92;
  overflow:visible;
}

/* ---- now playing bubble ---- */
.now-playing{
  position:absolute;
  top:19%;
  left:-52%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px 8px 10px;
  border-radius:14px 14px 14px 4px;
  background:rgba(24,14,40,.82);
  border:1px solid rgba(255,178,87,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.85), 0 0 22px -6px rgba(255,178,87,.35);
  animation:npFloat 4.2s ease-in-out infinite;
  white-space:nowrap;
}
/* little tail pointing at him */
.now-playing::after{
  content:'';
  position:absolute;
  right:-6px;bottom:9px;
  width:11px;height:11px;
  background:rgba(24,14,40,.82);
  border-right:1px solid rgba(255,178,87,.42);
  border-bottom:1px solid rgba(255,178,87,.42);
  transform:rotate(-45deg);
  border-radius:0 0 3px 0;
}
@keyframes npFloat{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%    {transform:translateY(-6px) rotate(1.2deg)}
}

.np-text{display:flex;flex-direction:column;line-height:1.25}
.np-text strong{
  font-size:11px;
  font-weight:600;
  color:var(--cream);
  letter-spacing:-.01em;
}
.np-text em{
  font-size:10px;
  font-style:italic;
  color:var(--amber);
  opacity:.95;
}

/* equaliser bars */
.np-bars{display:flex;align-items:flex-end;gap:2px;height:14px;flex:0 0 auto}
.np-bars i{
  display:block;
  width:2.5px;
  border-radius:2px;
  background:linear-gradient(to top,var(--amber-hot),var(--amber-soft));
  animation:eq .9s ease-in-out infinite;
}
.np-bars i:nth-child(1){height:6px; animation-delay:0s}
.np-bars i:nth-child(2){height:13px;animation-delay:.18s}
.np-bars i:nth-child(3){height:8px; animation-delay:.36s}
.np-bars i:nth-child(4){height:11px;animation-delay:.54s}
@keyframes eq{
  0%,100%{transform:scaleY(.35)}
  50%    {transform:scaleY(1)}
}
.singer{width:100%;height:auto;display:block;filter:drop-shadow(0 0 26px rgba(255,170,90,.28))}

#bodyBob{animation:bob 1.45s ease-in-out infinite;transform-origin:120px 250px}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%    {transform:translateY(-4px) rotate(.7deg)}
}

#head{animation:headNod 2.9s ease-in-out infinite;transform-origin:120px 88px}
@keyframes headNod{
  0%,100%{transform:rotate(-3.5deg)}
  50%    {transform:rotate(3.5deg)}
}

#mouth{animation:sing .72s ease-in-out infinite;transform-origin:120px 78px}
@keyframes sing{
  0%,100%{transform:scaleY(.35)}
  40%    {transform:scaleY(1.15)}
  70%    {transform:scaleY(.6)}
}

#strumForearm{
  animation:strum .46s ease-in-out infinite;
  transform-box:view-box;
  transform-origin:89px 145px;
}
@keyframes strum{
  0%,100%{transform:rotate(-11deg)}
  50%    {transform:rotate(13deg)}
}

#tapLeg{animation:tapFoot .96s ease-in-out infinite;transform-origin:126px 176px}
@keyframes tapFoot{
  0%,100%{transform:rotate(0deg)}
  50%    {transform:rotate(-2.2deg)}
}

.mic-stand{
  position:absolute;
  bottom:0;left:14%;
  width:3px;height:52%;
  background:linear-gradient(to top, rgba(255,220,180,.35), rgba(255,220,180,.10));
  border-radius:2px;
}
.mic-stand::before{
  content:'';
  position:absolute;top:-9px;left:-6px;
  width:15px;height:19px;border-radius:8px;
  background:linear-gradient(160deg,#e8d3b4,#8a7660);
  box-shadow:0 0 12px rgba(255,200,140,.4);
}

.scrim{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom, rgba(7,4,15,.42) 0%, rgba(7,4,15,.20) 40%, rgba(7,4,15,.55) 100%);
}

/* floating music notes */
.note{
  position:fixed;
  z-index:3;
  font-size:20px;
  pointer-events:none;
  color:var(--amber-soft);
  text-shadow:0 0 12px rgba(255,190,110,.7);
  animation:floatUp 1.5s var(--ease) forwards;
  will-change:transform,opacity;
}
@keyframes floatUp{
  0%  {opacity:0;transform:translate(0,0) scale(.5) rotate(0deg)}
  18% {opacity:1}
  100%{opacity:0;transform:translate(var(--dx,20px),-110px) scale(1.25) rotate(var(--rot,22deg))}
}

/* ============================================================
   LAYOUT / SCREENS
   ============================================================ */
#app{
  position:relative;
  z-index:4;
  min-height:100dvh;
  display:grid;
  align-items:start;
  justify-items:center;
  padding:
    calc(env(safe-area-inset-top) + 40px)
    var(--pad)
    calc(env(safe-area-inset-bottom) + 20px);
}

.screen{
  grid-area:1/1;
  width:100%;
  max-width:460px;
  opacity:0;
  visibility:hidden;
  transform:translateY(22px) scale(.98);
  transition:opacity .48s var(--ease), transform .48s var(--ease), visibility .48s;
  pointer-events:none;
}
.screen.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.screen.is-leaving{
  opacity:0;
  transform:translateY(-16px) scale(.985);
}

/* ============================================================
   CARD
   ============================================================ */
.card{
  position:relative;
  background:linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border:1px solid var(--glass-line);
  border-radius:22px;
  padding:clamp(22px,6vw,30px);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:
    0 22px 60px -18px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.16);
  animation:cardIn .55s var(--ease) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card--intro{text-align:center;padding-top:34px}

.ticket-stub{
  position:absolute;
  top:0;left:50%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:10px;
  padding:5px 14px;
  border-radius:99px;
  background:linear-gradient(100deg,var(--amber-hot),var(--amber));
  color:#3a1c00;
  font-size:9.5px;font-weight:600;letter-spacing:.16em;
  box-shadow:0 6px 20px -4px rgba(255,140,66,.6);
  white-space:nowrap;
}
.stub-num{opacity:.72}

/* ============================================================
   TYPE
   ============================================================ */
.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 12px;
  font-size:clamp(28px,7.6vw,38px);
}
.display em{
  font-style:italic;
  color:var(--amber);
  font-weight:400;
}
.intro-title{font-size:clamp(34px,10vw,46px);line-height:1.04;margin-bottom:18px}
.intro-sub{margin-bottom:26px}

.highlight{
  position:relative;
  white-space:nowrap;
  color:var(--amber);
}
.highlight::after{
  content:'';
  position:absolute;
  left:-2px;right:-2px;bottom:.05em;
  height:.42em;
  background:linear-gradient(90deg, rgba(255,107,157,.32), rgba(255,178,87,.32));
  border-radius:4px;
  z-index:-1;
}

.eyebrow{
  margin:0 0 12px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--amber);
  opacity:.85;
}

.muted{
  margin:0 0 18px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--cream-dim);
}
.muted.small{font-size:13px}
.ask-note{font-size:13.5px;font-style:italic}

.fineprint{
  margin:14px 0 0;
  font-size:11.5px;
  line-height:1.5;
  color:var(--cream-faint);
  text-align:center;
  min-height:1.2em;
}
.fineprint--left{
  text-align:left;
  margin:-6px 0 16px;
  font-style:italic;
  line-height:1.55;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--ui);
  font-size:16px;
  font-weight:600;
  border:0;
  border-radius:14px;
  padding:16px 22px;
  cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), opacity .22s, filter .22s;
  touch-action:manipulation;
  user-select:none;
}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.32;cursor:not-allowed}
.btn:disabled:active{transform:none}
.arrow{display:inline-block;transition:transform .22s var(--ease)}
.btn:not(:disabled):active .arrow{transform:translateX(4px)}

.btn--primary{
  background:linear-gradient(100deg,var(--amber-hot),var(--amber));
  color:#3a1c00;
  box-shadow:0 12px 30px -10px rgba(255,140,66,.65);
}
.btn--wide{width:100%;margin-top:6px}

.btn--pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 12px 30px -10px rgba(255,140,66,.55)}
  50%    {box-shadow:0 12px 42px -6px rgba(255,140,66,.95)}
}

.choice-row{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:12px;
  margin-top:22px;
  align-items:stretch;
}

.btn--yes{
  background:linear-gradient(100deg,var(--rose),var(--amber-hot));
  color:#fff;
  font-size:19px;
  letter-spacing:.06em;
  box-shadow:0 14px 34px -10px rgba(255,107,157,.7);
  transform-origin:center;
}
.btn--yes:not(:disabled):hover{filter:brightness(1.08)}

.btn--no{
  background:rgba(255,255,255,.07);
  color:var(--cream-dim);
  border:1px solid var(--glass-line);
}
.btn--no.is-dead{
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:var(--rose);
  opacity:.7;
  color:var(--cream-dim);
}
.shake{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}

/* ============================================================
   SLOTS
   ============================================================ */
.slots{display:flex;flex-direction:column;gap:9px;margin:20px 0}

.slot{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  text-align:left;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-line);
  color:var(--cream);
  font-family:var(--ui);
  cursor:pointer;
  transition:all .25s var(--ease);
  touch-action:manipulation;
}
.slot:active{transform:scale(.985)}
.slot.is-picked{
  background:linear-gradient(100deg, rgba(255,140,66,.22), rgba(255,107,157,.16));
  border-color:var(--amber);
  box-shadow:0 10px 28px -12px rgba(255,140,66,.7);
}

.slot-icon{font-size:20px;flex:0 0 auto;filter:grayscale(.3);transition:filter .25s}
.slot.is-picked .slot-icon{filter:none}

.slot-text{flex:1;min-width:0}
.slot-day{
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
}
.slot-time{
  display:block;
  font-size:12.5px;
  color:var(--cream-dim);
  margin-top:2px;
}
.slot-tag{
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:99px;
  background:rgba(255,255,255,.09);
  color:var(--cream-faint);
  white-space:nowrap;
}
.slot.is-picked .slot-tag{
  background:var(--amber);
  color:#3a1c00;
}

/* ============================================================
   PLAN
   ============================================================ */
.plan-block{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-top:1px solid var(--glass-line);
}
.plan-block:first-of-type{margin-top:4px}
.plan-time{
  flex:0 0 78px;
  white-space:nowrap;
  font-size:10px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--amber);
  padding-top:4px;
}
.plan-body h3{
  margin:0 0 5px;
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
}
.plan-body .muted{margin:0;font-size:13.5px}

/* ============================================================
   GENRES
   ============================================================ */
.genres{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  margin:20px 0 18px;
  padding-top:18px;
  border-top:1px solid var(--glass-line);
}
.genre{
  padding:16px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-line);
  color:var(--cream);
  font-family:var(--ui);
  font-size:13.5px;
  font-weight:500;
  line-height:1.35;
  cursor:pointer;
  transition:all .25s var(--ease);
  touch-action:manipulation;
}
.genre:active{transform:scale(.96)}
.genre .g-emoji{display:block;font-size:22px;margin-bottom:6px;filter:grayscale(.35);transition:filter .25s}
.genre .g-sub{display:block;font-size:10.5px;color:var(--cream-faint);margin-top:3px}
.genre.is-picked{
  background:linear-gradient(100deg, rgba(255,140,66,.22), rgba(255,107,157,.16));
  border-color:var(--amber);
  box-shadow:0 10px 28px -12px rgba(255,140,66,.7);
}
.genre.is-picked .g-emoji{filter:none;transform:scale(1.12)}

/* ============================================================
   REWARD + RECEIPT
   ============================================================ */
.reward{
  position:relative;
  text-align:center;
  padding:22px 18px 18px;
  margin:6px 0 20px;
  border-radius:16px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,178,87,.14), rgba(255,255,255,.03));
  border:1px dashed rgba(255,178,87,.4);
}
.reward p{margin:0 0 8px;font-size:14.5px;line-height:1.6}
.reward p:last-child{margin-bottom:0}
.reward-seal{
  font-size:34px;
  margin-bottom:10px;
  animation:sealFloat 3.2s ease-in-out infinite;
  filter:drop-shadow(0 6px 14px rgba(255,140,66,.5));
}
@keyframes sealFloat{
  0%,100%{transform:translateY(0) rotate(-5deg)}
  50%    {transform:translateY(-7px) rotate(5deg)}
}

.receipt{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  background:rgba(0,0,0,.28);
  border:1px solid var(--glass-line);
  border-radius:12px;
  padding:15px 16px;
  margin-bottom:18px;
}
.receipt-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:9.5px;
  letter-spacing:.08em;
  color:var(--amber);
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px dashed var(--glass-line);
}
.receipt dl{margin:0;display:flex;flex-direction:column;gap:7px}
.receipt dl > div{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.receipt dt{color:var(--cream-faint);flex:0 0 auto}
.receipt dd{margin:0;text-align:right;color:var(--cream)}
.receipt dd.pending{color:var(--amber)}

/* ============================================================
   DONE
   ============================================================ */
.card--done{text-align:center}
.done-mark{
  width:62px;height:62px;
  margin:0 auto 16px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:30px;
  color:#3a1c00;
  background:linear-gradient(100deg,var(--amber-hot),var(--amber));
  box-shadow:0 12px 34px -8px rgba(255,140,66,.8);
  animation:popIn .6s var(--ease) both;
}
@keyframes popIn{
  0%{transform:scale(0) rotate(-90deg);opacity:0}
  60%{transform:scale(1.15) rotate(8deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.big-quote{
  font-family:var(--display);
  font-style:italic;
  font-size:26px;
  color:var(--amber);
  margin:0 0 20px;
}
.receipt--final{text-align:left}

/* ============================================================
   CONFETTI
   ============================================================ */
.confetti{
  position:fixed;
  z-index:10;
  width:9px;height:14px;
  pointer-events:none;
  will-change:transform,opacity;
  animation:fall var(--fdur,2.6s) linear forwards;
}
@keyframes fall{
  0%  {opacity:1;transform:translate3d(0,0,0) rotate(0deg)}
  100%{opacity:0;transform:translate3d(var(--fdx,0px),105vh,0) rotate(var(--frot,720deg))}
}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom) + 24px);
  transform:translate(-50%,140%);
  z-index:20;
  max-width:min(360px,90vw);
  padding:13px 18px;
  border-radius:14px;
  background:rgba(28,10,10,.92);
  border:1px solid rgba(255,107,107,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#ffd9d9;
  font-size:13.5px;
  line-height:1.45;
  text-align:center;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.8);
  transition:transform .45s var(--ease), opacity .3s;
  opacity:0;
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast .code{
  display:block;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(255,150,150,.7);
  margin-top:5px;
}
.toast.good{
  background:rgba(12,26,14,.92);
  border-color:rgba(120,230,150,.4);
  color:#d9ffe3;
}

/* ============================================================
   MOTION / A11Y
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .screen{transform:none}
}

/* short phones */
@media (max-height:700px){
  .singer-wrap{width:min(170px,40vw);opacity:.7}
  .intro-title{font-size:clamp(28px,8.5vw,36px)}
  .card{padding:20px}
  .moon{width:40px;height:40px}
}

/* wider screens: keep it phone-shaped, it was designed that way */
@media (min-width:640px){
  .singer-wrap{width:230px}
  #app{align-items:center}
}