/* ============================================================
   TOKENS
   palette encodes mechanics, not mood:
   pink = engagement · mint = time gained · red = time lost
   yellow = sponsored/bait · void = the 2am phone
   ============================================================ */
:root{
  --void:#08080C;
  --surface:#14141B;
  --surface-2:#1C1C25;
  --line:#26262F;
  --text:#F1F1F5;
  --meta:#7C7C88;
  --pink:#FF2D6F;
  --mint:#00E5A0;
  --red:#FF3B3B;
  --yellow:#FFC400;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --phone:430px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:#000;
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================
   PHONE FRAME
   ============================================================ */
#phone{
  position:relative;
  width:100%;max-width:var(--phone);height:100%;
  background:var(--void);
  overflow:hidden;
  box-shadow:0 0 120px rgba(255,45,111,.06);
}
@media(min-width:480px){
  #phone{height:min(100%,900px);border-radius:28px;border:1px solid var(--line)}
}

/* degradation layer — the app corrupting as you scroll */
#phone.chaos{ filter:hue-rotate(calc(var(--chaos,0) * 14deg)) saturate(calc(1 + var(--chaos,0) * .35)); }

/* ============================================================
   HUD — story-progress-bar as timer. native social vocabulary,
   repurposed as a death clock. this is the signature element.
   ============================================================ */
#hud{position:absolute;top:0;left:0;right:0;z-index:40;pointer-events:none;
  padding:env(safe-area-inset-top,0) 0 0;
  background:linear-gradient(to bottom,rgba(8,8,12,.95) 40%,rgba(8,8,12,0));
}
#bartrack{height:3px;margin:8px 10px 0;background:var(--line);border-radius:2px;overflow:hidden}
#bar{height:100%;width:100%;background:var(--mint);transform-origin:left center;
  transition:background-color .25s linear}
#hudrow{display:flex;align-items:baseline;justify-content:space-between;padding:9px 14px 14px}
#brand{font-size:19px;font-weight:800;letter-spacing:-.6px}
#brand em{font-style:normal;color:var(--pink)}
#clock{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
#streak{font-family:var(--mono);font-size:11px;color:var(--meta);letter-spacing:.5px;margin-left:10px}
#streak.hot{color:var(--pink)}

/* ============================================================
   FEED
   ============================================================ */
#feed{
  position:absolute;inset:0;overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-top:64px;
  scrollbar-width:none;
}
#feed::-webkit-scrollbar{display:none}

.post{
  scroll-snap-align:center;
  min-height:74vh;
  padding:0 12px 22px;
  display:flex;flex-direction:column;justify-content:center;
  touch-action:pan-y;
  will-change:transform;
}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .28s;
}
.post.dragging .card{transition:none}

.head{display:flex;align-items:center;gap:10px;padding:12px 14px}
.avatar{width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:rgba(0,0,0,.55)}
.names{min-width:0;flex:1}
.name{font-size:14px;font-weight:650;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handle{font-size:12px;color:var(--meta)}
.badge{font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;flex:none}
.badge.sponsored{background:var(--yellow);color:#000}
.badge.suggested{background:var(--surface-2);color:var(--meta);border:1px solid var(--line)}

.body{padding:0 14px 13px;font-size:15px;line-height:1.42;letter-spacing:-.1px}
.body.loud{font-size:18px;font-weight:650;line-height:1.32}

.media{height:32vh;min-height:190px;position:relative}
.media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.22))}

.actions{display:flex;align-items:center;gap:18px;padding:11px 14px;color:var(--meta);font-size:13px}
.actions .ico{font-size:17px;line-height:1}
.actions .spacer{flex:1}
.count{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums}
.card.liked .heart{color:var(--pink)}

/* dating card */
.post.dating .card{background:var(--surface-2)}
/* square to match the 1:1 generated portraits — no head-cropping */
.dating .photo{aspect-ratio:1;height:auto;min-height:230px;max-height:56vh;
  position:relative;display:flex;align-items:flex-end;padding:16px}
.dating .photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8))}
.dating .who{position:relative;z-index:2}
.dating .who h3{font-size:24px;font-weight:750;letter-spacing:-.6px}
.dating .who p{font-size:13px;color:rgba(255,255,255,.72);margin-top:3px}
.dating .bio{padding:13px 16px 15px;font-size:14px;line-height:1.4;color:var(--text)}
.swipehint{display:flex;justify-content:space-between;padding:0 16px 15px;
  font-family:var(--mono);font-size:11px;letter-spacing:.8px;color:var(--meta)}

/* drag verdict stamps */
.stamp{position:absolute;top:18px;font-family:var(--mono);font-size:15px;font-weight:700;
  letter-spacing:2px;padding:6px 11px;border:2px solid;border-radius:7px;opacity:0;z-index:5}
.stamp.yes{left:16px;color:var(--mint);border-color:var(--mint);transform:rotate(-11deg)}
.stamp.no{right:16px;color:var(--red);border-color:var(--red);transform:rotate(11deg)}

/* the fake "all caught up" — loads 40 more posts */
.caughtup{min-height:40vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;scroll-snap-align:center;text-align:center;padding:0 40px}
.caughtup .tick{width:42px;height:42px;border-radius:50%;border:2px solid var(--mint);
  display:flex;align-items:center;justify-content:center;color:var(--mint);font-size:19px}
.caughtup h4{font-size:16px;font-weight:650;letter-spacing:-.2px}
.caughtup p{font-size:13px;color:var(--meta)}

/* ============================================================
   JUICE
   ============================================================ */
#fx{position:absolute;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.float{position:absolute;font-family:var(--mono);font-size:26px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-1px;
  animation:float 900ms cubic-bezier(.2,.7,.3,1) forwards;text-shadow:0 2px 14px rgba(0,0,0,.6)}
@keyframes float{
  0%{opacity:0;transform:translate(-50%,0) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-14px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-78px) scale(.95)}
}
.spark{position:absolute;font-size:20px;animation:spark 720ms ease-out forwards}
@keyframes spark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.1) rotate(var(--rot))}
}
#flash{position:absolute;inset:0;pointer-events:none;z-index:45;opacity:0;
  transition:opacity .32s ease-out}
#flash.gain{box-shadow:inset 0 0 90px rgba(0,229,160,.5);opacity:1;transition-duration:.06s}
#flash.lose{box-shadow:inset 0 0 110px rgba(255,59,59,.65);opacity:1;transition-duration:.05s}

#phone.shake{animation:shake .3s 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)}
}

/* notification toasts — occlude, then move. never hide the live post. */
#toasts{position:absolute;top:58px;left:10px;right:10px;z-index:44;pointer-events:none;
  display:flex;flex-direction:column;gap:7px}
.toast{background:rgba(34,34,44,.94);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:13px;padding:9px 12px;display:flex;gap:9px;align-items:center;
  animation:toast 3s cubic-bezier(.2,.8,.3,1) forwards;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast .dot{width:26px;height:26px;border-radius:7px;flex:none;display:flex;
  align-items:center;justify-content:center;font-size:14px}
.toast .txt{font-size:12.5px;line-height:1.3;min-width:0}
.toast .txt b{font-weight:650}
.toast .txt span{color:var(--meta)}
@keyframes toast{
  0%{opacity:0;transform:translateY(-24px) scale(.95)}
  9%{opacity:1;transform:translateY(0) scale(1)}
  82%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(-16px) scale(.97)}
}

/* ============================================================
   INTERRUPTS — 🟡 overlays that lock the feed. weather, not tests.
   the cookie sheet is deliberately foreign — light, corporate,
   not of this app. "still scrolling" is the platform itself.
   ============================================================ */
#interrupt{position:absolute;inset:0;z-index:52;display:flex;flex-direction:column;
  justify-content:flex-end;background:rgba(8,8,12,.45);opacity:0;transition:opacity .28s}
#interrupt.show{opacity:1}
#interrupt[hidden]{display:none}
.isheet{border-radius:18px 18px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 -18px 60px rgba(0,0,0,.55)}
#interrupt.show .isheet{transform:translateY(0)}
.isheet h4{font-size:17px;font-weight:750;letter-spacing:-.3px;margin-bottom:7px}
.isheet p{font-size:13px;line-height:1.45;margin-bottom:16px}
.isheet.cookie{background:#F2F2F6;color:#15151A}
.isheet.cookie p{color:#5A5A64}
.ibtn{display:block;width:100%;font-size:14px;font-weight:650;padding:13px;
  border-radius:11px;letter-spacing:.2px}
.ibtn.dark{background:#15151A;color:#fff;margin-bottom:6px}
/* "Reject all" — deprioritized on purpose. that's the joke. */
.ibtn.ghost{background:none;color:#9A9AA2;font-size:11px;font-weight:500;
  text-decoration:underline;padding:7px;width:auto;margin:0 auto}
.prefs{border-top:1px solid #DDDDE3;margin-bottom:16px}
.pref{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 2px;border-bottom:1px solid #DDDDE3;font-size:13px}
.pref b{font-size:11px;font-weight:600;color:#8A8A92;white-space:nowrap}
.isheet.still{background:var(--surface-2);color:var(--text);border-top:1px solid var(--line)}
.isheet.still p{color:var(--meta)}
.ibtn.engage{background:var(--pink);color:#fff}

/* ============================================================
   SCREENS
   ============================================================ */
.screen{position:absolute;inset:0;z-index:60;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:34px 30px;text-align:center;gap:18px}
.screen[hidden]{display:none}

#start h1{font-size:52px;font-weight:850;letter-spacing:-2.6px;line-height:.94}
#start h1 em{font-style:normal;color:var(--pink)}
#start .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--meta)}
.rules{text-align:left;display:flex;flex-direction:column;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 17px;width:100%}
.rule{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.38}
.rule .g{font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;color:var(--void);
  background:var(--text);border-radius:4px;padding:3px 6px;flex:none;margin-top:1px;font-weight:700}
.rule .g.bad{background:var(--red);color:#fff}
.rule span{color:var(--meta)}

button{font-family:inherit;cursor:pointer;border:none}
.cta{background:var(--pink);color:#fff;font-size:15px;font-weight:700;letter-spacing:.3px;
  padding:15px 46px;border-radius:100px;transition:transform .12s,filter .12s}
.cta:hover{filter:brightness(1.1)}
.cta:active{transform:scale(.96)}
.cta:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

/* screen time report */
#over{justify-content:center;gap:0}
.report{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:20px 20px 8px;text-align:left}
.report .rlabel{font-size:12px;color:var(--meta);letter-spacing:.2px}
.report .rtitle{font-size:15px;font-weight:650;margin:1px 0 14px;letter-spacing:-.2px}
.bigrow{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.bigrow .app{font-size:15px;font-weight:600}
.bigrow .amt{font-family:var(--mono);font-size:31px;font-weight:700;letter-spacing:-1.4px;
  font-variant-numeric:tabular-nums}
.delta{font-family:var(--mono);font-size:12px;color:var(--red);margin:9px 0 4px}
.stat{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.stat:last-child{border-bottom:none}
.stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.stat .v.warn{color:var(--yellow)}
.stat .v.bad{color:var(--red)}
.stat .k{color:var(--meta)}
#verdict{font-size:13px;color:var(--meta);line-height:1.45;margin:16px 0 18px;max-width:300px}

/* ============================================================
   TUNING PANEL — the point of a prototype is the numbers
   ============================================================ */
#gear{position:absolute;bottom:14px;right:14px;z-index:55;width:34px;height:34px;
  border-radius:50%;background:rgba(28,28,37,.85);backdrop-filter:blur(10px);
  border:1px solid var(--line);color:var(--meta);font-size:15px;
  display:flex;align-items:center;justify-content:center}
#gear:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
#tuner{position:absolute;inset:auto 0 0 0;z-index:56;background:rgba(12,12,17,.97);
  backdrop-filter:blur(20px);border-top:1px solid var(--line);
  padding:14px 16px 18px;max-height:72%;overflow-y:auto}
#tuner[hidden]{display:none}
#tuner h5{font-family:var(--mono);font-size:11px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--meta);margin-bottom:12px;display:flex;justify-content:space-between}
.knob{margin-bottom:11px}
.knob label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.knob label b{font-family:var(--mono);font-weight:600;color:var(--mint)}
.knob input{width:100%;height:22px;-webkit-appearance:none;background:transparent}
.knob input::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:2px}
.knob input::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--pink);margin-top:-7px}
.knob input::-moz-range-track{height:3px;background:var(--line);border-radius:2px}
.knob input::-moz-range-thumb{width:17px;height:17px;border:none;border-radius:50%;background:var(--pink)}
#tuner .note{font-size:11px;color:var(--meta);line-height:1.4;margin-top:12px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #phone.shake{animation:none}
}