:root{
  --paper:#f5f1e8;
  --ink:#101010;
  --muted:#7b776f;
  --rule:#c9c4ba;
  --cyan:#a8edf1;
  --cyan-ink:#2cbfd0;
  --yellow:#ffe21a;
  --red:#ff5a50;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit}
.app-shell{width:min(100%,820px);margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 64px) 34px calc(env(safe-area-inset-bottom,0px) + 90px)}
.masthead{padding-bottom:36px;border-bottom:1px solid var(--rule)}
.masthead-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.95fr);align-items:start;gap:40px}
.brand{font-size:58px;line-height:.92;font-weight:950;letter-spacing:-3.4px;transform:translateX(-4px) rotate(-.15deg)}
.tagline{justify-self:end;max-width:340px;color:var(--muted);font:800 18px/1.18 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.09em;transform:translate(2px,2px) rotate(.15deg)}
.dayline{margin-top:34px;max-width:740px;font-size:40px;line-height:1.08;font-weight:930;letter-spacing:-1.35px;transform:translateX(-1px)}
.date-highlight{display:inline;padding:0 2px;background:linear-gradient(transparent 49%,var(--yellow) 49%,var(--yellow) 91%,transparent 91%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.slashes{margin:0 4px 0 2px}
.story{position:relative;padding:48px 10px 52px;border-bottom:1px solid var(--rule)}
.story:nth-child(3n+1){transform:translateX(-2px) rotate(-.035deg)}
.story:nth-child(3n+2){transform:translateX(2px) rotate(.025deg)}
.story:nth-child(3n){transform:translateX(-1px) rotate(.02deg)}
.meta{margin-bottom:18px;color:var(--muted);font:800 18px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.11em}
.headline{margin:0;max-width:90%;font-size:54px;line-height:.93;font-weight:950;letter-spacing:-3px}
.story:nth-child(even) .headline{transform:translateX(2px)}
.deck{margin-top:26px;max-width:88%;font-size:31px;line-height:1.2;letter-spacing:-.6px}
.editor-note{display:inline-block;margin-top:16px;padding:3px 10px 5px;background:var(--cyan);font:800 20px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;transform:translateX(0px) rotate(-.35deg)}
.story:nth-child(3n+2) .editor-note{transform:translateX(3px) rotate(.28deg)}
.lore-toggle{display:inline-flex;align-items:center;gap:12px;margin-top:28px;color:var(--muted);font-size:23px;line-height:1;cursor:pointer;user-select:none;transform:translateX(1px) rotate(.05deg)}
.lore-toggle::before{content:"—";font-size:26px}
.lore{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .28s ease,opacity .22s ease,margin-top .28s ease}
.lore-inner{overflow:hidden}
.story.open .lore{grid-template-rows:1fr;opacity:1;margin-top:22px}
.lore-copy{padding:2px 0 0 16px;border-left:3px solid var(--cyan-ink);font-size:20px;line-height:1.5;max-width:92%}
.sources{margin-top:12px;color:var(--muted);font:700 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.verdict-row{display:grid;grid-template-columns:1fr 1fr;margin-top:38px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.verdict-btn{position:relative;overflow:hidden;border:0;background:transparent;color:var(--ink);padding:18px 8px;cursor:pointer;font:900 19px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.015em}
.verdict-btn + .verdict-btn{border-left:1px solid rgba(16,16,16,.12)}
.verdict-label{position:relative;z-index:2}
.verdict-fill{position:absolute;z-index:1;left:0;top:0;bottom:0;width:0;pointer-events:none;transition:width .5s cubic-bezier(.2,.85,.2,1)}
.verdict-btn.l .verdict-fill{background:var(--red)}
.verdict-btn.w .verdict-fill{background:var(--cyan)}
.verdict-btn.selected .verdict-fill{width:100%}
.handwritten{position:absolute;right:8px;top:56px;opacity:0;font:900 54px/1 "Comic Sans MS","Bradley Hand",cursive;transform:rotate(10deg) scale(.72);transition:opacity .18s ease .18s,transform .25s cubic-bezier(.2,.9,.25,1.35) .16s;pointer-events:none}
.handwritten.show{opacity:1;transform:rotate(10deg) scale(1)}
.handwritten.l{color:var(--red)}
.handwritten.w{color:var(--cyan-ink)}
.reveal{min-height:0;margin-top:0;opacity:0;transform:translateY(-2px);transition:opacity .22s ease,transform .22s ease,margin-top .22s ease}
.reveal.show{margin-top:18px;opacity:1;transform:translateY(0)}
.reveal-main{display:inline;font:900 20px/1.18 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.01em}
.reveal-main.l{background:linear-gradient(transparent 42%,rgba(255,90,80,.45) 42%,rgba(255,90,80,.45) 92%,transparent 92%)}
.reveal-main.w{background:linear-gradient(transparent 42%,rgba(168,237,241,.78) 42%,rgba(168,237,241,.78) 92%,transparent 92%)}
.reveal-tag{margin-top:10px;font:900 17px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.055em}
.reveal-joke{margin-top:5px;color:var(--muted);font-size:17px;line-height:1.35;font-style:italic}
@media(max-width:700px){
  .app-shell{padding:calc(env(safe-area-inset-top,0px) + 46px) 32px calc(env(safe-area-inset-bottom,0px) + 82px)}
  .masthead-row{grid-template-columns:1fr 1.08fr;gap:26px}
  .brand{font-size:39px;letter-spacing:-2.1px}
  .tagline{font-size:12px;line-height:1.22;max-width:220px}
  .dayline{margin-top:28px;font-size:29px;line-height:1.13}
  .story{padding:46px 12px 50px}
  .meta{font-size:13px;margin-bottom:18px}
  .headline{font-size:39px;letter-spacing:-2.1px;max-width:91%}
  .deck{font-size:22px;max-width:92%}
  .editor-note{font-size:15px}
  .lore-toggle{font-size:18px}
  .lore-copy{font-size:17px}
  .verdict-btn{font-size:15px;padding:17px 6px}
  .handwritten{top:51px;font-size:48px}
  .reveal-main{font-size:16px}
  .reveal-tag{font-size:14px}
  .reveal-joke{font-size:15px}
}


/* ===== V19: FULL-SCREEN STORY EXPERIENCE ===== */
html{
  scroll-snap-type:y mandatory;
}

body{
  overflow-x:hidden;
}

.masthead{
  min-height:92vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  scroll-snap-align:start;
}

.story{
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:64px;
  padding-bottom:64px;
}

.story .verdict-row{
  margin-top:auto;
}

.story .reveal{
  margin-bottom:6px;
}

/* Give each story a slightly poster-like composition without turning it into a card */
.story:nth-child(odd) .headline{max-width:88%;}
.story:nth-child(even) .headline{max-width:92%;}
.story:nth-child(3n+2) .deck{transform:translateX(5px);}
.story:nth-child(3n) .lore-toggle{transform:translateX(-2px) rotate(-.15deg);}

/* ===== INTERACTIVE REVEAL STATES ===== */
.reveal{
  position:relative;
  overflow:visible;
}

.reveal-tag{
  display:inline-block;
  position:relative;
  padding:2px 4px;
  transform-origin:center;
}

.reveal-joke{
  transition:transform .25s ease, opacity .25s ease;
}

/* Controversial: little alarm/shake + red underline that draws in */
.reveal.controversial .reveal-tag{
  color:#d92f28;
  animation:controShake .42s ease both;
}
.reveal.controversial .reveal-tag::after{
  content:"";
  position:absolute;
  left:-2px; right:-4px; bottom:-3px;
  height:4px;
  background:#ff5a50;
  transform:scaleX(0) rotate(-1deg);
  transform-origin:left;
  animation:drawLine .38s ease .22s forwards;
}
.reveal.controversial .reveal-joke{
  animation:popIn .3s ease .34s both;
}

/* Civil war: split the tag visually in half */
.reveal.civil-war .reveal-tag{
  color:#111;
  animation:warPulse .5s ease both;
}
.reveal.civil-war .reveal-tag::before,
.reveal.civil-war .reveal-tag::after{
  content:"";
  position:absolute;
  top:50%;
  width:34px;
  height:3px;
  background:#111;
}
.reveal.civil-war .reveal-tag::before{
  right:100%;
  margin-right:8px;
  transform:translateX(14px);
  animation:splitLeft .42s ease forwards;
}
.reveal.civil-war .reveal-tag::after{
  left:100%;
  margin-left:8px;
  transform:translateX(-14px);
  animation:splitRight .42s ease forwards;
}

/* Herd mentality: stamp-like cyan swipe */
.reveal.herd .reveal-tag{
  background:linear-gradient(
    transparent 32%,
    rgba(168,237,241,.92) 32%,
    rgba(168,237,241,.92) 90%,
    transparent 90%
  );
  animation:herdStamp .38s cubic-bezier(.2,.9,.2,1.15) both;
}

/* Alone: exaggerated lonely spacing */
.reveal.alone .reveal-tag{
  letter-spacing:.18em;
  animation:lonelyDrift .65s ease both;
}
.reveal.alone .reveal-joke{
  transform:translateX(8px);
}

/* Common take: intentionally boring */
.reveal.common .reveal-tag{
  opacity:.78;
}
.reveal.common .reveal-joke{
  animation:tinyShrug .4s ease both;
}

/* Minority report */
.reveal.minority .reveal-tag{
  transform:rotate(-1.2deg);
  background:linear-gradient(transparent 45%,rgba(255,226,26,.7) 45%,rgba(255,226,26,.7) 91%,transparent 91%);
}

/* People have spoken */
.reveal.people .reveal-tag{
  animation:stampDown .32s ease both;
}

@keyframes controShake{
  0%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-4px) rotate(-1deg)}
  50%{transform:translateX(4px) rotate(1deg)}
  75%{transform:translateX(-2px) rotate(-.5deg)}
  100%{transform:translateX(0)}
}
@keyframes drawLine{to{transform:scaleX(1) rotate(-1deg)}}
@keyframes popIn{
  from{opacity:0;transform:translateY(6px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes warPulse{
  0%{transform:scale(.92)}
  55%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@keyframes splitLeft{to{transform:translateX(0)}}
@keyframes splitRight{to{transform:translateX(0)}}
@keyframes herdStamp{
  from{opacity:0;transform:scale(1.35) rotate(-3deg)}
  to{opacity:1;transform:scale(1) rotate(-.5deg)}
}
@keyframes lonelyDrift{
  0%{opacity:0;transform:translateX(18px)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes tinyShrug{
  0%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}
@keyframes stampDown{
  from{opacity:0;transform:translateY(-10px) scale(1.08)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Tiny "next" hint only after a verdict is revealed */
.next-hint{
  display:none;
  margin-top:18px;
  color:var(--muted);
  font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
  text-align:center;
  animation:hintFloat 1.5s ease-in-out infinite;
}
.story.judged .next-hint{display:block;}
@keyframes hintFloat{
  0%,100%{transform:translateY(0);opacity:.55}
  50%{transform:translateY(-4px);opacity:1}
}

@media(max-width:700px){
  .masthead{min-height:88svh;}
  .story{
    min-height:100svh;
    padding-top:54px;
    padding-bottom:42px;
  }
}


/* ===== V20 VARIABLE REWARD ENGINE ===== */

.reward-stage{
  position:relative;
  min-height:54px;
  margin-top:10px;
  overflow:visible;
}

.reward-fx{
  position:relative;
  min-height:30px;
  margin-top:9px;
  font:800 13px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--muted);
}

/* reusable little tokens */
.fx-token{
  display:inline-block;
  margin:2px 5px 2px 0;
  font-weight:900;
}
.fx-token.l{color:var(--red)}
.fx-token.w{color:var(--cyan-ink)}

/* originality meter */
.originality{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
}
.originality-track{
  height:7px;
  background:rgba(16,16,16,.1);
  overflow:hidden;
}
.originality-fill{
  display:block;
  height:100%;
  width:0;
  background:#111;
  animation:origFill .7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes origFill{to{width:var(--orig)}}

/* achievement */
.achievement{
  display:inline-block;
  border:1px solid #111;
  padding:5px 8px;
  transform:rotate(-.5deg);
  animation:stampDown .3s ease both;
}
.achievement strong{display:block;font-size:14px;color:#111}

/* queue */
.queue{
  letter-spacing:.06em;
  white-space:nowrap;
  animation:queueIn .45s ease both;
}
.queue .you{
  display:inline-block;
  padding:1px 4px;
  background:var(--yellow);
  color:#111;
}
@keyframes queueIn{
  from{opacity:0;transform:translateX(15px)}
  to{opacity:1;transform:translateX(0)}
}

/* same cascade */
.same-cloud span{
  display:inline-block;
  margin-right:7px;
  opacity:0;
  animation:samePop .25s ease forwards;
}
.same-cloud span:nth-child(2){animation-delay:.05s}
.same-cloud span:nth-child(3){animation-delay:.10s}
.same-cloud span:nth-child(4){animation-delay:.15s}
.same-cloud span:nth-child(5){animation-delay:.20s}
@keyframes samePop{
  from{opacity:0;transform:translateY(5px) rotate(-3deg)}
  to{opacity:.8;transform:translateY(0)}
}

/* controversial warning */
.fake-warning{
  display:inline-block;
  border:1px solid var(--red);
  padding:5px 8px;
  color:#b62923;
  animation:controShake .42s ease both;
}
.ratio{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
}
.ratio-track{
  height:8px;
  display:flex;
  overflow:hidden;
  background:rgba(16,16,16,.08);
}
.ratio-you{height:100%;background:var(--red)}
.ratio-net{height:100%;background:#111;opacity:.22}

/* civil war split */
.war-split{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  color:#111;
  animation:warPulse .5s ease both;
}
.war-side{
  height:8px;
  background:#111;
  transform:scaleX(0);
}
.war-side.left{transform-origin:right;animation:warBar .45s ease forwards}
.war-side.right{transform-origin:left;animation:warBar .45s ease forwards}
@keyframes warBar{to{transform:scaleX(1)}}

.comment-count{
  font-size:15px;
  color:#111;
  animation:popIn .3s ease both;
}

/* herd */
.herd-cloud{
  white-space:normal;
}
.herd-cloud span{
  display:inline-block;
  margin:1px 5px 1px 0;
  opacity:0;
  animation:herdOne .28s ease forwards;
}
.herd-cloud span:nth-child(2){animation-delay:.04s}
.herd-cloud span:nth-child(3){animation-delay:.08s}
.herd-cloud span:nth-child(4){animation-delay:.12s}
.herd-cloud span:nth-child(5){animation-delay:.16s}
.herd-cloud span:nth-child(6){animation-delay:.20s}
.herd-cloud span:nth-child(7){animation-delay:.24s}
@keyframes herdOne{
  from{opacity:0;transform:scale(.6)}
  to{opacity:.75;transform:scale(1)}
}
.assimilated{
  display:inline-block;
  background:var(--cyan);
  color:#111;
  padding:4px 7px;
  animation:herdStamp .38s cubic-bezier(.2,.9,.2,1.15) both;
}

/* alone */
.lonely-field{
  min-height:54px;
  position:relative;
  border-top:1px solid rgba(16,16,16,.08);
}
.lonely-you{
  position:absolute;
  right:8%;
  top:22px;
  font-weight:900;
  color:var(--red);
  animation:lonelyDrift .65s ease both;
}
.vision{
  letter-spacing:.12em;
  animation:lonelyDrift .65s ease both;
}

/* rare reward */
.rare-reward{
  display:inline-block;
  padding:4px 8px;
  background:var(--yellow);
  color:#111;
  font-weight:950;
  transform:rotate(-.7deg);
  animation:stampDown .32s ease both;
}
.rare-label{
  margin-bottom:4px;
  font-size:10px;
  letter-spacing:.15em;
  color:var(--muted);
}

/* history roast */
.history-roast{
  display:none;
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed rgba(16,16,16,.28);
  font:900 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#111;
}
.history-roast.show{
  display:block;
  animation:popIn .32s ease both;
}
.history-roast .pattern{
  display:inline;
  background:linear-gradient(transparent 45%,rgba(255,226,26,.7) 45%,rgba(255,226,26,.7) 91%,transparent 91%);
}

@media(max-width:700px){
  .reward-fx{font-size:12px}
  .history-roast{font-size:12px}
}


/* ===== V21 PROFILE + DAILY ISSUE ===== */

.top-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:12px;
}

.profile-button{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:1px solid rgba(16,16,16,.28);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font:900 19px/1 Arial,sans-serif;
  cursor:pointer;
  transform:rotate(2deg);
}

.profile-button:active{
  transform:rotate(2deg) scale(.94);
}

.profile-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  align-items:end;
  background:rgba(16,16,16,.32);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.profile-overlay.open{
  opacity:1;
  pointer-events:auto;
}

.profile-sheet{
  width:min(100%,820px);
  margin:0 auto;
  max-height:88svh;
  overflow:auto;
  background:var(--paper);
  border-top:2px solid var(--ink);
  padding:26px 30px calc(env(safe-area-inset-bottom,0px) + 38px);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.2,.82,.2,1);
}

.profile-overlay.open .profile-sheet{
  transform:translateY(0);
}

.profile-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.profile-word{
  font:900 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.18em;
  color:var(--muted);
}

.profile-close{
  border:0;
  background:transparent;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  color:var(--ink);
}

.profile-handle-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:28px;
}

.avatar-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  background:var(--cyan);
  font-size:30px;
  font-weight:950;
  transform:rotate(-2deg);
}

.profile-handle{
  font-size:29px;
  font-weight:950;
  letter-spacing:-1px;
}

.edit-handle{
  margin-top:3px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  cursor:pointer;
}

.alignment{
  display:inline-block;
  margin-top:26px;
  padding:4px 8px 5px;
  background:var(--yellow);
  font:950 30px/.95 Arial,Helvetica,sans-serif;
  letter-spacing:-1.5px;
  transform:rotate(-.5deg);
}

.profile-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:28px;
}

.profile-stats div{
  padding:14px 8px 12px;
  border-top:1px solid var(--rule);
}

.profile-stats strong{
  display:block;
  font-size:26px;
}

.profile-stats span{
  color:var(--muted);
  font:800 10px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.profile-divider{
  height:1px;
  background:var(--rule);
  margin:26px 0;
}

.friend-card{
  position:relative;
  padding:18px 16px;
  border:1px solid var(--ink);
  transform:rotate(.15deg);
}

.friend-kicker{
  font:950 18px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.04em;
}

.friend-row{
  display:flex;
  gap:10px;
  margin-top:12px;
  font-size:18px;
  font-weight:900;
}

.friend-score{
  margin-top:7px;
  color:var(--muted);
  font:800 11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.profile-note{
  margin-top:22px;
  color:var(--muted);
  font-size:14px;
  font-style:italic;
}

/* Forbidden story appears without an explanation */
.story.forbidden{
  background:#111;
  color:var(--paper);
  margin-left:-34px;
  margin-right:-34px;
  padding-left:44px;
  padding-right:44px;
  border-bottom-color:#333;
}

.story.forbidden .meta,
.story.forbidden .lore-toggle,
.story.forbidden .sources{
  color:#aaa69f;
}

.story.forbidden .editor-note{
  background:var(--yellow);
  color:#111;
}

.story.forbidden .verdict-row{
  border-top-color:var(--paper);
  border-bottom-color:var(--paper);
}

.story.forbidden .verdict-btn{
  color:var(--paper);
}

.story.forbidden .verdict-btn + .verdict-btn{
  border-left-color:rgba(245,241,232,.25);
}

.story.forbidden .lore-copy{
  border-left-color:var(--yellow);
}

.story.forbidden .handwritten.w{
  color:var(--cyan);
}

.story.forbidden .handwritten.l{
  color:#ff6d64;
}

/* Roulette story has a subtle different composition */
.story.roulette::before{
  content:"LAST ONE.";
  position:absolute;
  right:8px;
  top:22px;
  color:var(--muted);
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.15em;
  transform:rotate(2deg);
}

/* End */
.end-screen{
  min-height:100svh;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:54px 10px 70px;
}

.end-kicker{
  color:var(--muted);
  font:900 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.14em;
}

.end-title{
  margin-top:16px;
  font-size:72px;
  line-height:.82;
  font-weight:950;
  letter-spacing:-5px;
}

.end-small{
  margin-top:24px;
  color:var(--muted);
  font:800 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media(max-width:700px){
  .top-actions{gap:8px}
  .profile-button{width:30px;height:30px;font-size:16px}
  .profile-sheet{padding:22px 28px calc(env(safe-area-inset-bottom,0px) + 34px)}
  .profile-handle{font-size:25px}
  .alignment{font-size:26px}
  .story.forbidden{
    margin-left:-32px;
    margin-right:-32px;
    padding-left:44px;
    padding-right:44px;
  }
  .end-title{
    font-size:56px;
    letter-spacing:-4px;
  }
}


/* ===== V22 AUTH ===== */
.auth-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  align-items:end;
  background:rgba(16,16,16,.34);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.auth-overlay.open{
  opacity:1;
  pointer-events:auto;
}
.auth-sheet{
  width:min(100%,820px);
  margin:0 auto;
  background:var(--paper);
  border-top:2px solid var(--ink);
  padding:24px 28px calc(env(safe-area-inset-bottom,0px) + 34px);
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.2,.82,.2,1);
}
.auth-overlay.open .auth-sheet{transform:translateY(0)}
.auth-close{
  float:right;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:34px;
  cursor:pointer;
}
.auth-logo{
  margin-top:6px;
  font-size:34px;
  font-weight:950;
  letter-spacing:-2px;
}
.auth-title{
  margin-top:28px;
  font-size:34px;
  font-weight:950;
  letter-spacing:-1.7px;
}
.auth-sub{
  margin-top:8px;
  max-width:520px;
  color:var(--muted);
  font-size:16px;
  line-height:1.4;
}
.oauth-btn{
  width:100%;
  min-height:52px;
  margin-top:14px;
  border:1.5px solid var(--ink);
  background:transparent;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  cursor:pointer;
}
.oauth-btn.apple{
  background:#111;
  color:#fff;
}
.oauth-btn.google{
  background:#fff;
}
.oauth-icon{
  font-size:20px;
  font-weight:950;
}
.guest-btn{
  width:100%;
  margin-top:16px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  cursor:pointer;
}
.auth-status{
  min-height:18px;
  margin-top:14px;
  color:var(--muted);
  font:800 11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.profile-auth-badge{
  display:inline-block;
  margin-left:7px;
  padding:2px 5px;
  background:var(--cyan);
  font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  transform:rotate(-.8deg);
}
.profile-signout{
  margin-top:16px;
  border:0;
  padding:0;
  background:transparent;
  color:var(--muted);
  font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  cursor:pointer;
}