:root{
  --ink:#161022;
  --ink-2:#221a33;
  --ink-3:#2e2447;
  --line:#4a3d68;
  --paper:#fffdf4;
  --pink:#ff4d8d;
  --pink-dark:#b52e60;
  --yellow:#ffdf3a;
  --mint:#4de8b8;
  --text:#f4effc;
  --muted:#a99cc4;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Our own display rules would otherwise win over the UA's [hidden] sheet. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--text);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  min-height:100dvh;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
.wrap{
  max-width:540px;margin:0 auto;position:relative;
  padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(40px + env(safe-area-inset-bottom,0px));
}
h1,h2,h3,.btn,.pill,.chip,.tab,.room-tag,.sticker{font-family:"Unbounded",sans-serif}
h1{font-size:clamp(1.9rem,8vw,2.6rem);font-weight:900;line-height:1.05;letter-spacing:-.01em;margin-top:18px}
h1.brand{font-size:clamp(3rem,16vw,4.4rem);letter-spacing:-.04em;margin-top:26px}
.tagline{
  font-family:"Unbounded";font-size:.78rem;font-weight:500;color:var(--mint);
  text-transform:lowercase;letter-spacing:.02em;margin-top:8px;line-height:1.45;
}
h2{font-size:1.15rem;font-weight:700}
p{line-height:1.5}
.pink{color:var(--pink)}
.muted{color:var(--muted);font-size:.92rem}
.lede{margin-top:12px}
.lbl{display:block;margin-top:18px;color:var(--muted);font-size:.85rem}
.hint{color:#8577a8;font-size:.8rem;margin-top:8px;line-height:1.45}
.screen{display:none;animation:pop .25s ease}
.screen.on{display:block}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- HUD ---------- */
header#hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.room-tag{
  display:inline-block;background:var(--ink-2);border:2px solid var(--line);
  border-radius:10px;padding:4px 12px;font-weight:700;letter-spacing:.15em;
  color:var(--yellow);font-size:.85rem;
}
.pill{font-size:.72rem;font-weight:700;background:var(--ink-2);border-radius:999px;padding:6px 12px;color:var(--mint)}
.pill.conn{color:var(--yellow);background:#3a2d57}
.timer{flex:1 0 100%;height:8px;background:var(--ink-2);border-radius:999px;position:relative;margin-top:6px;overflow:hidden}
.timer-fill{height:100%;background:var(--mint);border-radius:999px;transition:width .25s linear}
.timer.low .timer-fill{background:var(--pink)}
.timer-num{position:absolute;right:6px;top:-20px;font-size:.72rem;color:var(--muted)}

/* ---------- controls ---------- */
.btn{
  display:block;width:100%;border:none;cursor:pointer;
  background:var(--pink);color:#fff;font-weight:700;font-size:1rem;
  padding:15px 20px;border-radius:999px;margin-top:14px;
  box-shadow:0 5px 0 var(--pink-dark);transition:transform .08s;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--pink-dark)}
.btn.alt{background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 #bfa300}
.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;border:2px dashed var(--line)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn:focus-visible,input:focus-visible,.chip:focus-visible,.meme:focus-visible,.tab:focus-visible,.gav:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

input[type=text]{
  width:100%;padding:14px 16px;border-radius:var(--radius);
  border:2px solid var(--line);background:var(--ink-2);color:var(--text);
  font-size:1rem;font-family:inherit;margin-top:8px;
}
input[type=text]::placeholder{color:#6f6191}
.code-input{text-transform:uppercase;letter-spacing:.35em;font-family:"Unbounded";font-weight:700;text-align:center;font-size:1.4rem}

.tabs{display:flex;gap:8px;margin-top:22px}
.tab{flex:1;background:transparent;border:2px solid var(--line);color:var(--muted);
  border-radius:999px;padding:10px;font-size:.85rem;font-weight:700;cursor:pointer}
.tab.on{background:var(--ink-3);color:var(--text);border-color:var(--mint)}

.chips{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.chip{
  flex:1 1 auto;background:var(--ink-2);border:2px solid var(--line);color:var(--muted);
  border-radius:999px;padding:10px 12px;font-size:.8rem;font-weight:700;cursor:pointer;
}
.chip.on{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

.switch{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--muted);font-size:.9rem;cursor:pointer}
.switch input{width:20px;height:20px;accent-color:var(--pink)}

.share{
  display:flex;align-items:center;gap:10px;width:100%;margin-top:8px;cursor:pointer;
  background:var(--ink-2);border:2px dashed var(--line);border-radius:var(--radius);
  padding:12px 14px;color:var(--text);font-family:inherit;font-size:.85rem;text-align:left;
}
.share span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.share b{color:var(--mint)}

/* ---------- photo frame ---------- */
/* Half of any camera roll is 9:19.5 screenshots. Contain them in a fixed
   frame over a blurred copy of themselves rather than cropping the joke out. */
.polaroid{
  background:var(--paper);padding:10px 10px 32px;border-radius:4px;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
  transform:rotate(-1.6deg);position:relative;margin:20px auto 10px;max-width:340px;
}
.polaroid .tape{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:90px;height:26px;background:rgba(255,223,58,.75);border-radius:2px;
}
.polaroid .cap{
  position:absolute;bottom:8px;left:12px;right:12px;color:#3a3350;
  font-family:"Unbounded";font-size:.66rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:#ded9cc}
.frame .blur{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(18px) saturate(1.3);opacity:.9}
.frame img{position:relative;width:100%;height:100%;object-fit:contain;display:block}

/* ---------- lobby ---------- */
.plist{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.prow{display:flex;align-items:center;gap:12px;background:var(--ink-2);border-radius:var(--radius);padding:12px 14px}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;flex-shrink:0;background:#3a2d57;font-weight:700}
.prow .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .st{margin-left:auto;font-size:.78rem;color:var(--mint);flex-shrink:0}
.prow.off{opacity:.5}
.prow.off .st{color:var(--muted)}
.crown{font-size:.8rem}
.kick{background:none;border:none;color:#7b6ea0;font-size:1rem;cursor:pointer;padding:4px}

/* ---------- upload ---------- */
.ugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.uslot{
  aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--ink-2);
  border:2px dashed var(--line);display:grid;place-items:center;color:#6f6191;
  font-size:1.6rem;position:relative;
}
.uslot img{width:100%;height:100%;object-fit:cover}
.uslot.err{border-color:var(--pink);color:var(--pink);font-size:.7rem;text-align:center;padding:6px;line-height:1.3}
.uslot .bar{position:absolute;left:0;bottom:0;height:4px;background:var(--mint);transition:width .2s}
.uslot .rm{
  position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:none;font-size:.9rem;cursor:pointer;line-height:1;
}
label.uslot{cursor:pointer;border-color:var(--pink);color:var(--pink)}
.deck-note{margin-top:14px;color:var(--muted);font-size:.85rem;min-height:1.2em}

/* ---------- captions & memes ---------- */
.charcount{text-align:right;font-size:.78rem;color:var(--muted);margin-top:4px}
.memes{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.meme{
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:10px;border:3px solid transparent;cursor:pointer;text-align:left;
  font-family:inherit;width:100%;display:block;
}
.meme .frame{aspect-ratio:4/3}
.meme .txt{font-weight:700;font-size:1.02rem;padding:10px 6px 4px;line-height:1.35}
.meme.sel{border-color:var(--pink)}
.meme.win{border-color:var(--yellow);background:#fff8d6}
.meme.mine{opacity:.72;cursor:default}
.meme .tag{display:block;font-size:.74rem;color:var(--pink-dark);padding:0 6px 4px;font-weight:700}
.meme .who{display:block;font-size:.82rem;color:#6b5f8a;padding:0 6px 6px}
.meme .who b{color:var(--ink)}
.meme .vt{float:right;font-family:"Unbounded";font-size:.8rem;color:var(--pink-dark)}

.guess-box{margin-top:16px;background:var(--ink-2);border-radius:var(--radius);padding:14px}
.guessers{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gav{
  background:var(--ink-3);border:2px solid var(--line);color:var(--text);
  border-radius:999px;padding:8px 12px;font-size:.82rem;cursor:pointer;font-family:inherit;
}
.gav.on{background:var(--mint);color:var(--ink);border-color:var(--mint);font-weight:700}

.reveal-box{margin-top:16px;background:var(--ink-2);border-radius:var(--radius);padding:14px 16px;border-left:5px solid var(--mint)}
.reveal-box b{color:var(--yellow)}

/* ---------- scores ---------- */
.score{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.srow{display:flex;align-items:center;gap:12px;background:var(--ink-2);border-radius:var(--radius);padding:12px 14px}
.srow .pts{margin-left:auto;font-family:"Unbounded";font-weight:700;color:var(--yellow)}
.srow .delta{color:var(--mint);font-size:.78rem;margin-left:6px}
.srow.lead{background:#3a2d57;border:2px solid var(--yellow)}
.awards{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.award{background:var(--ink-2);border-radius:var(--radius);padding:14px 16px}
.award .lbl2{font-family:"Unbounded";font-size:.7rem;color:var(--mint);text-transform:uppercase;letter-spacing:.08em}
.award .nm{font-weight:700;font-size:1.05rem;margin-top:4px}
.award .dt{color:var(--muted);font-size:.85rem;margin-top:2px}

.wait-note{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--muted);font-size:.9rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:blink 1s infinite alternate;flex-shrink:0}
@keyframes blink{to{opacity:.2}}
.footer-note{margin-top:26px;font-size:.78rem;color:#6f6191;line-height:1.5}
.footer-note strong{color:var(--muted)}

/* ---------- toasts ---------- */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;width:min(500px,92vw);z-index:50;pointer-events:none}
.toast{background:var(--ink-3);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:.85rem;animation:pop .2s ease}
.toast.warn{border-color:var(--yellow)}
.toast.error{border-color:var(--pink)}

/* ---------- topic banner ---------- */
.topic{
  background:linear-gradient(90deg,rgba(255,223,58,.16),rgba(77,232,184,.10));
  border:2px solid var(--yellow);border-radius:var(--radius);
  padding:12px 14px;margin-top:12px;font-family:"Unbounded";font-size:.9rem;
  font-weight:700;color:var(--yellow);line-height:1.35;
}

/* ---------- mute ---------- */
.mute{
  margin-left:auto;background:var(--ink-2);border:2px solid var(--line);
  border-radius:999px;width:36px;height:36px;font-size:.95rem;cursor:pointer;
  line-height:1;color:var(--text);
}

/* ---------- reactions ---------- */
.reacts{display:flex;gap:6px;flex-wrap:wrap;padding:6px 4px 2px}
.react{
  background:rgba(22,16,34,.06);border:1px solid rgba(22,16,34,.12);
  border-radius:999px;padding:6px 10px;font-size:1rem;cursor:pointer;line-height:1;
  transition:transform .08s;
}
.react:active{transform:scale(1.25)}
.floater{
  position:fixed;font-size:1.8rem;pointer-events:none;z-index:60;
  animation:floatup 1.8s ease-out forwards;
}
@keyframes floatup{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  15%{opacity:1;transform:translateY(-10px) scale(1.15)}
  100%{opacity:0;transform:translateY(-160px) scale(1)}
}

/* ---------- save ---------- */
.save{
  display:block;width:100%;margin-top:8px;border-radius:10px;cursor:pointer;
  background:var(--ink);color:var(--text);border:none;font-family:inherit;
  font-size:.85rem;font-weight:700;padding:11px;
}
.save.locked{background:transparent;color:#8d80ad;border:1px dashed rgba(22,16,34,.25);cursor:default;font-weight:400}

/* ---------- album ---------- */
.album-head{margin-top:30px}
.switch.consent{align-items:flex-start;background:var(--ink-2);border-radius:var(--radius);padding:14px;margin-top:14px}
.switch.consent b{color:var(--yellow)}
.album{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.album-round{
  font-family:"Unbounded";font-size:.78rem;font-weight:700;color:var(--mint);
  text-transform:uppercase;letter-spacing:.06em;margin-top:14px;
}
/* The album is for scanning the whole night, not for staring at one photo. */
#album .meme .frame{aspect-ratio:auto;height:210px}
#album .meme .txt{font-size:.95rem;padding:8px 6px 2px}

/* ---------- placed caption text ---------- */
/* Legible on a bright sky and a dark room without a panel covering the photo:
   black glyph, white halo around it, and a whisper of shadow for separation.
   paint-order keeps the halo outside the letterforms instead of eating them. */
.mlayer{
  position:absolute;inset:0;container-type:inline-size;pointer-events:none;
}
.frame.editing .mlayer{pointer-events:auto;touch-action:none}
.mtext{
  position:absolute;transform:translate(-50%,-50%);
  width:92%;text-align:center;
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-weight:700;line-height:1.15;
  color:#101010;
  -webkit-text-stroke:0.15em #fff;
  paint-order:stroke fill;
  text-shadow:0 0.03em 0.1em rgba(0,0,0,.28);
  overflow-wrap:break-word;
  user-select:none;
}
@supports not (paint-order: stroke) {
  /* Older engines stroke through the glyph, so fake the halo with shadows. */
  .mtext{
    -webkit-text-stroke:0;
    text-shadow:
      0 0 .12em #fff, .04em 0 .06em #fff, -.04em 0 .06em #fff,
      0 .04em .06em #fff, 0 -.04em .06em #fff;
  }
}
.mtext.editable{cursor:grab}
.mtext.editable:active{cursor:grabbing}
.mtext.sel{outline:2px dashed rgba(255,77,141,.9);outline-offset:6px;border-radius:4px}
.mtext.ghost{opacity:.55;font-style:italic}

/* ---------- editor tools ---------- */
.tools{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
.sizes{display:flex;gap:6px;margin-left:auto}
.tool{
  background:var(--ink-2);border:2px solid var(--line);color:var(--text);
  border-radius:999px;padding:9px 14px;font-family:"Unbounded";font-size:.78rem;
  font-weight:700;cursor:pointer;line-height:1;
}
.tool.on{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.tool.danger{color:var(--pink)}
.tool:disabled{opacity:.35;pointer-events:none}

/* The caption card no longer carries the text, so it only needs a thin strip. */
.meme .txt:empty{display:none}