/* onlybrad — Candy Arcade design system */

:root {
  --ink: #3d3250;
  --pink: #f6c1d0;
  --salmon: #f8a5a5;
  --lav: #c3aed6;
  --lilac: #d5b3f0;
  --mint: #b5ead7;
  --sky: #a8d8ea;
  --butter: #ffeaa7;
  --gold: #f5c96b;
  --cream: #fef9f4;
}
/* touch-action: manipulation kills the mobile double-tap-to-zoom gesture
   (which fired on double-tap-to-like) while keeping scroll + pinch-zoom */
* { margin: 0; padding: 0; box-sizing: border-box; touch-action: manipulation; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* no `fixed` attachment: iOS Safari paints fixed backgrounds only ~one
     viewport tall, leaving white below on long pages */
  background: linear-gradient(160deg, #fcdce5, #f0e6ff 55%, #e8f4fd);
  min-height: 100vh;
  color: var(--ink);
}

/* App-frame scrolling (html.app = the main app; legal pages scroll
   normally): the body is PINNED as a fixed viewport-sized box — iOS ignores
   overflow:hidden on a body taller than the screen (min-height:100vh made
   it 100px taller), which let the document pan under the fixed header
   (white-bar scrolling, pull-to-refresh, and pages parked ~100px up).
   position:fixed is the one body lock iOS always honors; <main> is the
   only scroller. */
html.app { height: 100%; overflow: hidden; }
html.app body {
  position: fixed; inset: 0;
  overflow: hidden; min-height: 0;
}
main {
  height: 100%; overflow-y: auto;
  /* no rubber-band bounce: overscroll exposed a raw band beyond the
     content edge; the scroller also paints the gradient itself */
  overscroll-behavior-y: none;
  background: linear-gradient(160deg, #fcdce5, #f0e6ff 55%, #e8f4fd);
  padding-bottom: 80px; /* JS sets padding-top to the header's height */
}

/* ============ NAV ============ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--ink);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  transition: transform .28s ease;
}
/* slim mode while scrolling: the header slides up smoothly until only the
   level-bar row peeks out. It slides via transform — never via `top`, which
   can unstick position:sticky mid-scroll on iOS — so its height and sticky
   anchor never change and the page below never shifts. --hdr-hide is
   measured in JS (0 for guests = no slimming). */
header.slim { transform: translateY(calc(-1 * var(--hdr-hide, 0px))); }
.logo { font-size: 19px; font-weight: 900; letter-spacing: -.5px; margin-right: 12px; }
.logo em { font-style: normal; background: linear-gradient(90deg,#e0708f,#8b6bb5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav button {
  font-family: inherit; font-size: 13px; font-weight: 800; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 99px;
  padding: 6px 14px; cursor: pointer; position: relative;
}
nav button.active { background: var(--butter); box-shadow: 3px 3px 0 var(--ink); }
nav button:hover:not(.active) { background: var(--cream); }
nav button.soon { opacity: .55; }
nav button .dot {
  position: absolute; top: -4px; right: -2px; min-width: 16px; height: 16px;
  background: var(--salmon); border: 2px solid var(--ink); border-radius: 99px;
  font-size: 9px; display: flex; align-items: center; justify-content: center; padding: 0 2px;
}
.nav-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(135deg,var(--salmon),var(--lav)); flex-shrink: 0; }

/* ============ LEVEL PILL ============ */
.lvl-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 12px 4px 5px; }
.lvl-pill .lvl-chip { background: var(--gold); border: 2px solid var(--ink); border-radius: 99px; font-size: 11px; font-weight: 900; padding: 2px 9px; white-space: nowrap; }
.lvl-pill .xp-bar { width: 78px; height: 10px; border: 2px solid var(--ink); border-radius: 99px; background: #f3ecf9; overflow: hidden; }
.lvl-pill .xp-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--salmon),var(--lilac)); transition: width .5s; }
.lvl-pill .xp-text { font-size: 11px; font-weight: 800; color: #6b5b7b; white-space: nowrap; }
.lvl-pill.bump { animation: bump .5s; }
@keyframes bump { 50% { transform: scale(1.12); } }
.nav-pills { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }  /* streak left of level, one row */
.nav-lvl { margin-left: 0; }
/* phones: condense both pills so streak + level + avatar share one row */
@media (max-width: 640px) {
  /* streak pill on the left (under the nav), level pill + avatar on the right */
  .nav-pills { gap: 6px; margin-left: 0; flex: 1 1 0; min-width: 0; justify-content: space-between; }
  header .nav-avatar { margin-left: 0; }
  header #sub-chip { flex-shrink: 0; }
  .nav-pills .lvl-pill .xp-bar { width: 36px; }
  .nav-pills .streak-pill { gap: 5px; padding: 3px 8px 3px 4px; font-size: 10px; }
  .nav-pills .streak-pill .sp-bar { width: 30px; height: 9px; }
  .nav-pills .streak-pill .sp-xp { display: none; }
  .nav-pills .lvl-pill { gap: 6px; padding: 3px 9px 3px 4px; }
  .nav-pills .lvl-pill .lvl-chip { font-size: 10px; padding: 2px 7px; }
  .nav-pills .lvl-pill .xp-bar { width: 44px; height: 9px; }
  .nav-pills .lvl-pill .xp-text { font-size: 10px; }
  /* the level pill gives way first: its bar flexes down before anything can touch the avatar */
  .nav-pills .streak-pill, .nav-pills .candy-pill, header .nav-avatar { flex-shrink: 0; }
  .nav-pills .lvl-pill { flex: 0 1 auto; min-width: 0; }
  .nav-pills .lvl-pill .xp-bar { width: auto; flex: 1 1 44px; min-width: 22px; max-width: 78px; }
  .nav-pills .candy-pill { gap: 3px; padding: 3px 8px; font-size: 10px; }
}
@media (max-width: 430px) {
  /* four things on one row (streak · candy · level · avatar): trim every gap so the level text never spills */
  .nav-pills { gap: 4px; }
  .nav-pills .candy-pill[data-label]::before { display: none; }
  .nav-pills .candy-pill { padding: 3px 7px; }
  .nav-pills .streak-pill { gap: 4px; padding: 3px 7px 3px 3px; }
  .nav-pills .streak-pill .sp-bar { width: 24px; }
  .nav-pills .lvl-pill { gap: 5px; padding: 3px 7px 3px 3px; }
  .nav-pills .lvl-pill .lvl-chip { padding: 2px 6px; }
  .nav-pills .lvl-pill .xp-text { font-size: 9.5px; flex-shrink: 0; }
  .nav-pills .lvl-pill .xp-bar { min-width: 18px; }
  header .nav-avatar { margin-left: 2px; }
}
@media (max-width: 640px) { header #sub-chip .sc-txt { display: none; } header #sub-chip { padding: 3px 7px; } }
@media (max-width: 380px) {
  .nav-pills .streak-pill .sp-bar { width: 22px; }
  .nav-pills .lvl-pill .xp-bar { width: 34px; }
}
#signin-btn { margin-left: auto; }
/* desktop: sign-in sits at the far right end of the header, like the avatar */
@media (min-width: 700px) {
  #signin-btn { order: 99; }
}
.wall-lvl-row { max-width: 720px; margin: 0 auto 10px; display: flex; justify-content: center; }

main { max-width: 1080px; margin: 28px auto; padding: 0 20px; }
.screen { display: none; }
.screen.active { display: block; animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(8px); } }
.screen-title { font-size: 26px; font-weight: 900; margin-bottom: 4px; }
.screen-sub { font-size: 14px; color: #6b5b7b; margin-bottom: 20px; }

/* ============ SHARED ============ */
.card {
  background: #fff; border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--ink); padding: 18px;
}
.btn {
  font-family: inherit; font-size: 13px; font-weight: 800; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 99px; padding: 9px 18px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s;
  background: #fff;
}
.btn:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.pink { background: var(--salmon); } .btn.mint { background: var(--mint); } .btn.lilac { background: var(--lilac); }
.btn.butter { background: var(--butter); } .btn.lav { background: var(--lilac); }
.btn.sky { background: var(--sky); } .btn.white { background: #fff; }
.chip {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  padding: 4px 11px; border-radius: 99px; border: 2px solid var(--ink); color: var(--ink);
}
.r-leg { background: var(--gold); } .r-epic { background: var(--lav); }
.r-rare { background: var(--sky); } .r-unc { background: var(--mint); } .r-com { background: #e3e0e8; }
.pill-toggle { display: inline-flex; gap: 6px; }
.pill-toggle button {
  font-family: inherit; font-size: 12px; font-weight: 800; color: #9b8bab;
  background: #fff; border: 2px solid #d9cde8; border-radius: 99px; padding: 6px 15px; cursor: pointer;
}
.pill-toggle button.on { background: var(--mint); border-color: var(--ink); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* placeholder media gradients (until R2 assets) */
.m1 { background: linear-gradient(135deg,var(--pink),var(--lilac) 55%,var(--sky)); }
.m2 { background: linear-gradient(135deg,var(--butter),var(--salmon) 60%,var(--pink)); }
.m3 { background: linear-gradient(135deg,var(--mint),var(--sky) 55%,var(--lilac)); }

/* ============ WALL ============ */
.wall-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.feed { display: flex; flex-direction: column; gap: 20px; max-width: 560px; margin: 0 auto; }
.post .p-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.p-ava { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(135deg,var(--salmon),var(--lav)); flex-shrink: 0; }
.p-name { font-weight: 800; font-size: 14px; }
.p-time { font-size: 12px; color: #9b8bab; }
.p-cap { font-size: 14px; margin-bottom: 12px; }
.media {
  border: 2px solid var(--ink); border-radius: 14px; height: 300px; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 52px; overflow: hidden;
}
.m-badge { position: absolute; top: 10px; left: 10px; }
.m-lock {
  position: absolute; bottom: 10px; right: 10px; font-size: 12px; font-weight: 800;
  background: var(--ink); color: var(--butter); padding: 6px 13px; border-radius: 99px; cursor: pointer; border: none; font-family: inherit;
}
.m-owned { position: absolute; bottom: 10px; right: 10px; font-size: 12px; font-weight: 800; background: var(--mint); border: 2px solid var(--ink); padding: 4px 11px; border-radius: 99px; }
.m-collab { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; background: #fff; border: 2px solid var(--ink); padding: 3px 10px; border-radius: 99px; }
.p-actions { display: flex; gap: 18px; margin-top: 12px; font-size: 13px; font-weight: 700; align-items: center; }
.p-actions .act { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.p-actions .act svg { width: 22px; height: 22px; display: block; }
.p-actions .act.liked { color: #d6335e; }
.p-actions .tipc { margin-left: auto; color: #6b5b7b; cursor: default; }
.tip-mini {
  font-family: inherit; font-size: 11px; font-weight: 900; color: var(--ink);
  background: var(--butter); border: 2px solid var(--ink); border-radius: 99px;
  padding: 6px 13px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
}
.tip-mini:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
/* locked PPV posts: runtime top-right, big claim button inside the media */
.media .dur-badge { top: 10px; bottom: auto; }
.media:has(.dur-badge) .m-collab { top: 48px; }
/* bottom bar on locked PPV media: button truly centered, count pill pinned
   right, one grid row so they can never overlap at any width */
.lc-bar {
  position: absolute; left: 16px; right: 16px; bottom: 10px; z-index: 4;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
}
.lc-claim { font-size: 14px; padding: 8px 30px; white-space: nowrap; justify-self: center; }
.lc-bar .media-count { position: static; justify-self: end; }
@media (max-width: 480px) {
  .lc-claim { font-size: 13px; padding: 8px 16px; }
}
.lock-ico { width: 46px; height: 46px; position: relative; z-index: 2; filter: drop-shadow(0 2px 8px rgba(30,22,45,.6)); }
.media-count {
  /* mirrors the runtime badge's top/side offsets, bottom corner */
  position: absolute; bottom: 10px; right: 10px; z-index: 3;
  font-size: 11px; font-weight: 800; color: #fff; background: rgba(30,22,45,.82);
  border-radius: 99px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.media-count svg { width: 14px; height: 14px; flex-shrink: 0; }
.lc-claim:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.heart-burst {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 30px; z-index: 6; pointer-events: none;
  animation: heartPop .8s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes heartPop {
  0% { font-size: 20px; opacity: 0; }
  30% { font-size: 96px; opacity: 1; }
  70% { font-size: 84px; opacity: 1; }
  100% { font-size: 90px; opacity: 0; }
}
.comments { border-top: 2px dashed #eee4f6; margin-top: 12px; padding-top: 10px; }
/* IG-style comment rows: username line above the body, heart on the right */
.cmt { font-size: 13px; padding: 8px 44px 8px 0; line-height: 1.4; position: relative; }
.cmt + .cmt { border-top: 1px dashed #eee6f2; }
.cmt-head { display: flex; align-items: center; gap: 7px; margin-bottom: 1px; }
.cmt small { color: #9b8bab; font-size: 10px; }
.cmt-body { color: var(--ink); }
/* like heart pinned right (count under it), admin dots inline by the time */
/* ---- comment replies (IG style) ---- */
.cmt-replies { margin-left: 34px; }
.cmt-replies:empty { display: none; }
.cmt.is-reply { padding-top: 6px; padding-bottom: 6px; }
.cmt.is-reply + .cmt.is-reply { border-top: 0; }
.cmt-reply { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800; color: #8a7a95; cursor: pointer; }
.cmt-more { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: 11px; font-weight: 800; color: #8a7a95; cursor: pointer; }
.cmt-more i { display: inline-block; width: 24px; height: 1px; background: #b3a6c0; }
.cmt-more .less-txt, .cmt-replies.open .cmt-more .more-txt { display: none; }
.cmt-replies.open .cmt-more .less-txt { display: inline; }
.cmt-hidden { display: none; }
.cmt-replies.open .cmt-hidden { display: block; }
.author-tag { font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ink); border-radius: 99px; padding: 1px 6px; }
.by-author { font-size: 10px; color: #8a7a95; font-weight: 700; white-space: nowrap; }
.rep-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #6b5b7b; margin: 6px 0 -4px; }
.rep-chip .rep-x { margin-left: auto; cursor: pointer; font-weight: 900; padding: 2px 6px; }
.rep-chip.dark { color: #cfc3dc; padding: 0 16px; margin: 0 0 4px; }
.cmt-flash { animation: cmt-flash 1.6s ease-out; }
@keyframes cmt-flash { 0%, 40% { background: #fff6cc; } 100% { background: transparent; } }
.rc-cmt .cmt-reply, .rc-cmt .cmt-more, .rc-cmt .by-author { color: #b9a9c9; }
.rc-cmt .cmt-more i { background: #6f6284; }
.rc-cmt .author-tag { background: #fff; color: var(--ink); }
.cmt-like {
  position: absolute; right: 2px; top: 10px; display: flex; flex-direction: column;
  align-items: center; gap: 1px; cursor: pointer; color: #9b8bab;
}
.cmt-like svg { width: 16px; height: 16px; }
.cmt-like.liked { color: #e0506e; }
.cmt-like b { font-size: 10px; line-height: 1.3; }
/* admin comment controls: dots menu (delete now; pin later) */
.cmt-dots {
  cursor: pointer; color: #9b8bab;
  font-weight: 900; font-size: 15px; padding: 0 6px; line-height: 1;
}
.cmt-menu {
  position: absolute; right: 0; top: 22px; z-index: 30; background: #fff;
  border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
}
.cmt-menu button {
  display: block; width: 100%; padding: 9px 22px; background: none; border: none;
  font-family: inherit; font-size: 12px; font-weight: 900; letter-spacing: .5px;
  color: #e0506e; cursor: pointer;
}
.cmt-menu button:hover { background: #fdeef2; }
.cmt-menu button.view { color: var(--ink); border-bottom: 2px solid #eee4f6; }
.cmt-menu button.view:hover { background: var(--cream); }
.a-table tr.au-hit td { background: #fff3c4; transition: background 1.2s ease; }
.cmt-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.g-item { border: 2px solid var(--ink); border-radius: 14px; aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; font-size: 34px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.g-item .chip { position: absolute; top: 8px; left: 8px; font-size: 9px; padding: 2px 8px; }


/* ============ WHEEL ============ */
.wheel-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 800px) { .wheel-layout { grid-template-columns: 1fr; } }
.wheel-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 18px; }
.wheel-outer { position: relative; }
.wheel-pointer { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 26px; }
.wheel-face {
  position: relative; border-radius: 50%; border: 4px solid var(--ink);
  /* segments are painted by renderWheelFace(); this is only the pre-load look */
  background: conic-gradient(var(--gold) 0 18deg, #e3e0e8 18deg 360deg);
  transition: transform 3.2s cubic-bezier(.15,.75,.25,1);
  will-change: transform;
}
/* full wheel: as big as the phone allows, capped on desktop */
#wheel { width: min(300px, calc(100vw - 88px)); height: auto; aspect-ratio: 1; }
.mini-wheel { width: 116px; height: 116px; border-width: 3px; }
/* rare-segment icons ride on the wheel; each spans centre → rim and is rotated to its segment */
.seg-ico { position: absolute; left: 50%; top: 0; width: 18px; height: 50%; margin-left: -9px; transform-origin: 50% 100%; display: flex; justify-content: center; align-items: flex-start; padding-top: 9px; pointer-events: none; }
.seg-ico i { font-style: normal; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(61,50,80,.35)); }
/* icons: no glow of their own (a drop-shadow bloom spills over the segment lines) */
.seg-ico.leg i, .seg-ico.epic i { filter: drop-shadow(0 1px 0 rgba(61,50,80,.35)); animation: none; }
/* rarity glow layers: blurred colour bands over the rare segments, lit toward the rim, pulsing */
.wheel-glow {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  mix-blend-mode: screen; /* no blur: the bloom is shaped inside each segment so the lines stay crisp */
  -webkit-mask-image: radial-gradient(circle, transparent 26%, #000 58%);
  mask-image: radial-gradient(circle, transparent 26%, #000 58%);
}
.wheel-glow.leg { animation: glowPulse 2.2s ease-in-out infinite; }
.wheel-glow.epic { animation: glowPulseSoft 3.4s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes glowPulseSoft { 0%, 100% { opacity: .4; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .wheel-glow, .seg-ico i { animation: none; } }
.wheel-note { font-size: 11px; color: #8a7a95; text-align: center; line-height: 1.45; max-width: 320px; margin-top: -6px; }
.wheel-never { font-size: 12.5px; font-weight: 600; color: #6b5b7b; line-height: 1.45; background: var(--butter); border: 2px solid var(--ink); border-radius: 12px; padding: 9px 12px; margin: -4px 0 14px; box-shadow: 2px 2px 0 var(--ink); max-width: 640px; }
.wheel-never b { color: var(--ink); }
.wheel-hub {
  position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 13px; z-index: 4;
}
.mini-hub { width: 38px; height: 38px; font-size: 9px; border-width: 2px; }
.wheel-banner {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #fffbe8; margin: 0 auto 22px; max-width: 720px;
}
.wb-info { flex: 1; min-width: 200px; }
.wb-info b { font-size: 16px; display: block; }
.wb-info small { font-size: 12px; color: #6b5b7b; display: block; margin: 4px 0 10px; }
.wb-pity { font-size: 11px; font-weight: 800; color: #8a7a95; margin-top: 8px; }
/* one row: SPIN left, Full wheel pushed to the right end */
.wb-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; }
.tier-row { display: flex; gap: 10px; }
.tier-row button {
  font-family: inherit; font-size: 15px; font-weight: 900; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 14px; padding: 10px 22px; cursor: pointer; background: #fff;
}
.tier-row button.on { box-shadow: 4px 4px 0 var(--ink); }
.tier-row button:nth-child(1).on { background: var(--mint); }
.tier-row button:nth-child(2).on { background: var(--sky); }
.tier-row button:nth-child(3).on { background: var(--gold); }
.tier-row.mini button { font-size: 12px; padding: 6px 13px; border-radius: 10px; }
.odds-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.odds-table td { padding: 8px 6px; border-bottom: 2px dashed #eee4f6; font-weight: 700; }
.odds-table td:last-child { text-align: right; font-weight: 900; }
.odds-table td.ex-cell { text-align: center; padding: 6px; }

/* example-content placeholders: one per rarity, border in the rarity colour */
.ex-row { display: flex; gap: 16px; justify-content: center; margin: 2px 0 6px; }
.ex { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; --exc: var(--ink); }
.ex small { font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--exc); }
.ex-box { width: 74px; height: 74px; border-radius: 14px; border: 3px solid var(--exc); background: var(--cream); display: block; overflow: hidden;
          box-shadow: 3px 3px 0 var(--exc); }
.ex-box img, .ex-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ex-box.sm { width: 44px; height: 44px; border-width: 2.5px; border-radius: 10px; box-shadow: 2px 2px 0 var(--exc); }
.ex-leg { --exc: #e0a93a; } .ex-epic { --exc: #9a7bc7; } .ex-rare { --exc: #5fa8c8; } .ex-unc { --exc: #55b593; } .ex-com { --exc: #9a93a6; }
.ex-leg small { color: #c48f22; }
.pity {
  margin-top: 14px; background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; font-size: 13px; font-weight: 700;
}
.pity-bar { height: 10px; background: #fff; border: 2px solid var(--ink); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.pity-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--salmon),var(--lilac)); transition: width .4s; }
.fair-note { font-size: 11px; color: #8a7a95; margin-top: 12px; line-height: 1.5; }

/* z-index 170: the sign-in gate must open ABOVE the reels viewer (140)
   and the lightbox (150) — guests tap lock pills / like from both */
#result-overlay, #gate-overlay {
  position: fixed; inset: 0; background: rgba(61,50,80,.55); z-index: 170;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#result-overlay.show, #gate-overlay.show { display: flex; }
.result-card {
  background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink);
  padding: 32px; text-align: center; max-width: 340px; animation: bounceIn .45s cubic-bezier(.2,1.6,.4,1);
}
@keyframes bounceIn { from { transform: scale(.6); opacity: 0; } }
.result-thumb { width: 140px; height: 140px; border: 2px solid var(--ink); border-radius: 16px; margin: 14px auto; display: flex; align-items: center; justify-content: center; font-size: 52px; }

/* ============ GATE ============ */
.gate-card {
  background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--ink);
  padding: 32px; max-width: 400px; width: 100%; text-align: center;
}
.gate-card h2 { font-size: 22px; margin-bottom: 8px; }
.gate-card p { font-size: 13px; color: #6b5b7b; margin-bottom: 18px; line-height: 1.5; }
.gate-card input {
  /* 16px minimum: below that, mobile browsers auto-zoom on input focus */
  width: 100%; font-family: inherit; font-size: 16px; font-weight: 700;
  border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
  background: var(--cream); color: var(--ink);
}
.gate-legal { font-size: 10px; color: #9b8bab; margin-top: 14px; line-height: 1.5; }
.ac-label { display: block; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: #6b5b7b; margin-bottom: 6px; }

/* ============ COLLECTION ============ */
.coll-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-tile { flex: 1; min-width: 120px; text-align: center; padding: 14px; }
.stat-tile b { font-size: 24px; display: block; }
.stat-tile small { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #8a7a95; }
.tier-block { margin-bottom: 16px; overflow: hidden; cursor: pointer; }
.tier-head { display: flex; align-items: center; gap: 12px; }
.tier-head .count { margin-left: auto; font-size: 13px; font-weight: 800; color: #8a7a95; }
/* collection goal meter (login-streak style bar + "3/10 · +25 XP") */
.goal-meter { display: inline-flex; flex-direction: column; gap: 3px; min-width: 120px; max-width: 170px; flex: 1; }
.goal-meter .gm-bar { display: block; height: 10px; background: #fff; border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; position: relative; }
.goal-meter .gm-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--salmon), var(--lilac)); transition: width .4s; }
.goal-meter small { font-size: 10.5px; font-weight: 800; color: #8a7a95; white-space: nowrap; letter-spacing: .2px; }
.goal-meter small em { font-style: normal; color: #c48f22; }
.goal-meter.done small { color: #3fa27a; }
.goal-meter.done .gm-bar b { background: var(--mint); }
.goal-meter.sm { min-width: 72px; max-width: 96px; gap: 2px; }
.goal-meter.sm .gm-bar { height: 7px; border-width: 1.5px; }
.goal-meter.sm small { font-size: 9px; }
.odds-table .goal-cell { text-align: right; padding-left: 8px; }
.tier-head { flex-wrap: wrap; }
@media (max-width: 480px) { .tier-head .goal-meter { order: 3; flex-basis: 100%; max-width: none; } }
.go-xp { font-size: 30px; font-weight: 900; color: #c48f22; letter-spacing: -.5px; }
.tier-strip { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.t-thumb { width: 84px; height: 84px; border: 2px solid var(--ink); border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.t-thumb.locked { opacity: .35; filter: grayscale(.6); }
.empty-note { font-size: 13px; color: #8a7a95; font-weight: 700; padding: 8px 0; }

/* ============ STORE ============ */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 18px; }
.s-thumb { height: 150px; border: 2px solid var(--ink); border-radius: 12px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 42px; margin-bottom: 12px; overflow: hidden; }
.s-prev { position: absolute; bottom: 8px; left: 8px; font-size: 11px; font-weight: 800; background: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; }
.s-title { font-weight: 800; font-size: 15px; }
.s-cap { font-size: 12px; color: #6b5b7b; margin: 6px 0 12px; line-height: 1.45; }
.s-foot { display: flex; align-items: center; justify-content: center; }
.s-rarity { position: absolute; top: 8px; left: 8px; z-index: 3; }
.s-thumb .s-prev { bottom: 8px; top: auto; }
.store-grid .card { position: relative; }
.s-x { top: -8px; right: -8px; width: 26px; height: 26px; font-size: 12px; z-index: 5; }
.card.s-edit { cursor: grab; }
.card.s-edit:active { cursor: grabbing; }
.card.dragging { opacity: .6; transform: scale(1.03); box-shadow: 8px 8px 0 var(--ink); z-index: 4; }
.s-thumb { position: relative; }

/* ============ LEVEL ============ */
.lvl-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.lvl-badge { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--ink); background: linear-gradient(135deg,var(--gold),var(--salmon)); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); flex-shrink: 0; }
.lvl-badge b { font-size: 30px; }
.lvl-badge small { font-size: 9px; letter-spacing: 1px; }
.lvl-progress { flex: 1; min-width: 240px; }
.lvl-bar { height: 18px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; margin: 8px 0; }
.lvl-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--salmon),var(--lilac)); transition: width .5s; }
.track { display: flex; flex-direction: column; gap: 12px; }
.track-item { display: flex; align-items: center; gap: 14px; padding: 14px; }
.track-item.locked { opacity: .55; }
.track-lvl { width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; }
.track-item b { font-size: 14px; display: block; }
.track-item small { font-size: 12px; color: #6b5b7b; }
.track-item .state { margin-left: auto; }

/* ============ INBOX ============ */
.inbox-list { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.msg { display: flex; gap: 12px; }
.msg .body { flex: 1; }
.msg .meta { font-size: 11px; color: #9b8bab; margin-bottom: 4px; font-weight: 700; }
.msg p { font-size: 14px; line-height: 1.5; }
.noreply { text-align: center; font-size: 12px; font-weight: 700; color: #9b8bab; padding: 14px; border: 2px dashed #d9cde8; border-radius: 12px; margin-top: 18px; max-width: 640px; }
.noreply { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.msg-tip { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ============ ADMIN ============ */
.admin-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
@media (max-width: 800px) { .admin-grid { grid-template-columns: 1fr; } }
.a-head { font-size: 14px; margin-bottom: 10px; }
.a-note { font-size: 11px; color: #8a7a95; margin-bottom: 12px; line-height: 1.5; }
.a-note code { background: var(--cream); border: 1px solid #e5d9f0; border-radius: 6px; padding: 1px 6px; font-size: 10px; }
.input {
  /* 16px minimum: below that, mobile browsers auto-zoom on input focus */
  width: 100%; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--cream);
}
textarea.input { resize: vertical; }
.a-row { display: flex; gap: 8px; }
.emoji-row { display: flex; gap: 4px; flex-wrap: wrap; margin: -4px 0 10px; }
.emoji-row button {
  font-family: inherit; font-size: 18px; background: var(--cream); border: 2px solid #e5d9f0;
  border-radius: 10px; padding: 4px 8px; cursor: pointer; line-height: 1;
}
.emoji-row button:hover { border-color: var(--ink); background: var(--butter); }
.a-row .input { flex: 1; min-width: 0; }
.a-check { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; white-space: nowrap; padding-bottom: 10px; }
.a-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.a-table th { text-align: left; font-size: 10px; letter-spacing: 1px; color: #8a7a95; padding: 6px; border-bottom: 2px solid var(--ink); }
.a-table td { padding: 7px 6px; border-bottom: 2px dashed #eee4f6; font-weight: 600; white-space: nowrap; }

/* ============ VAULT ============ */
.vault-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.vault-layout { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
@media (max-width: 700px) { .vault-layout { grid-template-columns: 1fr; } }
.vault-folders { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.vault-folders button {
  font-family: inherit; text-align: left; font-size: 12px; font-weight: 800; color: var(--ink);
  background: var(--cream); border: 2px solid #e5d9f0; border-radius: 10px; padding: 9px 12px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}
.vault-folders button.on { border-color: var(--ink); background: var(--butter); box-shadow: 2px 2px 0 var(--ink); }
.vault-folders button .n { font-size: 10px; color: #8a7a95; }
.vault-folders .new-folder { border-style: dashed; color: #8a7a95; justify-content: center; }
.vault-folders .wheel-folder { background: #fffbe8; border-color: var(--gold); }
.vault-folders .wheel-folder.on { background: var(--butter); border-color: var(--ink); }
.vault-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
  max-height: 420px; overflow-y: auto;
}
.uv-grid { max-height: none; overflow-y: visible; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.v-item {
  position: relative; border: 2px solid var(--ink); border-radius: 12px; aspect-ratio: 1;
  overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.v-item .mthumb { width: 100%; height: 100%; object-fit: cover; }
.v-item .v-chip { position: absolute; top: 6px; left: 6px; font-size: 8px; padding: 2px 7px; }
.v-kind { position: absolute; bottom: 6px; left: 6px; font-size: 11px; font-weight: 800; color: var(--ink); background: rgba(255,255,255,.85); border-radius: 6px; padding: 1px 5px; z-index: 3; }
.v-item .v-title { position: absolute; bottom: 0; left: 0; right: 0; font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(transparent, rgba(61,50,80,.85)); padding: 12px 6px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-item.sel { outline: 4px solid var(--sky); }
.v-item .v-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); }
.v-item.sel .v-check { background: var(--sky); content: '✓'; }
.v-item.sel .v-check::after { content: '✓'; display: block; text-align: center; font-size: 12px; font-weight: 900; color: var(--ink); line-height: 20px; }
.v-item .v-preview-flag { position: absolute; bottom: 6px; right: 6px; font-size: 12px; background: var(--butter); border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; font-weight: 800; }

.v-item .v-wheel { position: absolute; top: 6px; right: 6px; font-size: 13px; background: var(--butter); border: 2px solid var(--ink); border-radius: 8px; padding: 0 4px; }
/* posted / scheduled / neither — a 10px dot, overlaid, never shifts anything */
.v-item .v-dot { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); z-index: 3; pointer-events: none; }
.v-item .v-dot.under { top: 36px; right: 11px; }
.v-dot.posted { background: #e5484d; }
.v-dot.sched { background: #ffd166; }
.v-dot.fresh { background: #3b82f6; }
.wp-row { margin-bottom: 12px; }
.wp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wp-n { font-size: 12px; font-weight: 800; color: #8a7a95; }
.t-thumb { position: relative; }

.modal-overlay { position: fixed; inset: 0; background: rgba(61,50,80,.55); z-index: 110; display: none; align-items: center; justify-content: center; padding: 18px; }
.modal-overlay.show { display: flex; }
.picker-card {
  background: #fff; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink);
  padding: 18px; width: 100%; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column; gap: 12px;
}
.picker-card .vault-layout { overflow: hidden; }
.picker-head { display: flex; gap: 12px; align-items: center; }
.picker-foot { display: flex; align-items: center; justify-content: space-between; border-top: 2px dashed #eee4f6; padding-top: 12px; }

.sel-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; min-height: 8px; }
.sel-strip .v-item { width: 74px; height: 74px; aspect-ratio: auto; flex-shrink: 0; }
.v-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--salmon); border: 2px solid var(--ink); font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.v-span { grid-column: 1 / -1; }
.v-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.v-grid-note { grid-column: 1 / -1; }
.edit-thumb { height: 140px; border: 2px solid var(--ink); border-radius: 12px; margin-bottom: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.edit-thumb .mthumb { width: 100%; height: 100%; object-fit: cover; }
/* one tap → full-aspect viewport for a quick review; tap ✕ CLOSE to shrink back */
.edit-thumb { position: relative; cursor: pointer; }
.edit-thumb.full { height: auto; max-height: 62vh; background: #14101f; cursor: default; }
.edit-thumb.full video, .edit-thumb.full img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #14101f; }
.me-pv { position: absolute; right: 8px; bottom: 8px; z-index: 2; font-size: 10px; font-weight: 900; letter-spacing: .06em; color: #fff; background: rgba(61,50,80,.82); border: 1.5px solid #fff; border-radius: 99px; padding: 4px 9px; cursor: pointer; }
.edit-thumb.full .me-pv { top: 8px; bottom: auto; }

/* real media in feed/collection/store */
.mthumb { display: block; }
.media .mthumb, .g-item .mthumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* X-style adaptive feed media: full width, height follows the media's own
   aspect ratio — no bars, no crop — capped at 9:16 so only ultra-tall media
   ever gets trimmed (fullscreen shows it whole). */
.media.fit { height: auto; display: block; }
.media.fit .cslide.lead .mthumb {
  position: static; width: 100%; height: auto; display: block;
  max-height: calc(min(560px, 92vw) * 16 / 9);
  object-fit: cover;
}

/* in-post carousel: native scroll-snap = real touch physics on mobile */
.media .carousel {
  display: flex; width: 100%; height: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.media .carousel::-webkit-scrollbar { display: none; }
.cslide {
  flex: 0 0 100%; scroll-snap-align: center; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 52px; overflow: hidden;
}
.cslide:not(.lead) .mthumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* wall video preview: silent loop, no native chrome; play glyph only when
   Safari refused autoplay (Low Power Mode) — a tap opens scroll mode anyway */
.media video.wv { -webkit-touch-callout: none; cursor: pointer; background: #14101f; }
.cslide .wv-play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgba(16,12,26,.45); display: none; align-items: center; justify-content: center; z-index: 3; pointer-events: none;
}
.cslide .wv-play svg { width: 32px; height: 32px; fill: #fff; margin-left: 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.cslide.wv-blocked .wv-play { display: flex; }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255,255,255,.9); border: 2px solid var(--ink);
  font-size: 16px; font-weight: 900; font-family: inherit; cursor: pointer; z-index: 4;
  display: flex; align-items: center; justify-content: center;
}
.car-prev { left: 10px; }
.car-next { right: 10px; }
.car-count {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4;
  font-size: 11px; font-weight: 800; color: #fff; background: rgba(61,50,80,.78);
  border-radius: 99px; padding: 4px 11px;
}
.expand-btn {
  position: absolute; bottom: 10px; right: 10px; width: 34px; height: 34px;
  background: rgba(255,255,255,.9); border: 2px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; z-index: 4;
}

/* fullscreen reels-style swipe viewer: locked viewport, snap up/down between
   posts, left/right between a post's items */
#reels { position: fixed; inset: 0; background: #14101f; z-index: 140; display: none; transition: transform .25s ease; }
#reels.show { display: block; }
#reels-back { top: calc(14px + env(safe-area-inset-top)); left: 14px; font-size: 24px; padding-bottom: 3px; }
#reels-stage {
  position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scrollbar-width: none;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#reels-stage::-webkit-scrollbar { display: none; }
.reel {
  position: relative; width: 100%; height: var(--reelH, 100%);
  scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  background: #14101f;
}
/* reels near the viewport get their own GPU layer so WebKit rasterizes them
   BEFORE a fast fling exposes them (kills the paint flash at the edges) */
.reel.warm { will-change: transform; transform: translateZ(0); }
.reel-car {
  position: absolute; inset: 0; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: none; /* rightward pull at item 1 = dismiss gesture */
}
.reel-car::-webkit-scrollbar { display: none; }
.reel-slide {
  flex: 0 0 100%; height: 100%; scroll-snap-align: center; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.reel-slide img, .reel-slide video { max-width: 100%; max-height: 100%; object-fit: contain; z-index: 2; }
.reel-slide img:not(.blur-prev) { transition: opacity .18s ease; }
.reel-slide img.decoding { opacity: 0; }
/* smart cover: media whose ratio nearly matches the slide's fills it
   edge-to-edge (tiny centered crop) instead of leaving sliver borders */
.reel-slide img.fill, .reel-slide video.fill { width: 100%; height: 100%; object-fit: cover; }
/* Cheap smooth blur for reels: fullscreen gaussian filters rasterize lazily
   on scroll-in and painted black mid-swipe, so instead the blur is drawn on
   a quarter-size element (1/16 the raster cost — always makes the frame)
   and GPU-scaled 4.4x to fill; the overshoot crops the blur's edge fringe. */
.reel-bg {
  position: absolute; left: 0; top: 0; width: 25%; height: 25%;
  background-size: cover; background-position: center;
  transform: scale(4.4); transform-origin: top left;
  filter: blur(5px) brightness(.55); z-index: 1;
}
.reel .blur-prev {
  position: absolute; left: 0; top: 0; width: 25%; height: 25%;
  object-fit: cover; transform: scale(4.4); transform-origin: top left;
  filter: blur(5px) saturate(1.15);
}
.reel .locked-cover { z-index: 3; }
.reel .heart-burst { z-index: 6; }
/* the blurred teaser must fill the reel UNDER the lock pill + badges
   (the generic .reel-slide img rule would otherwise stack it on top) */
.reel-slide img.blur-prev { max-width: none; max-height: none; object-fit: cover; z-index: 1; }
.reel .locked-cover b { z-index: 2; }
/* badges shift to the top-right — the like rail owns the bottom-right */
.reel .locked-cover .dur-badge,
.reel .locked-cover .media-count { bottom: auto; top: calc(20px + env(safe-area-inset-top)); right: 14px; }
.reel .locked-cover:has(.dur-badge) .media-count { top: calc(56px + env(safe-area-inset-top)); }
/* claim button truly centered, just above the caption block */
.reel .lc-bar { left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); }
.reel .m-badge { top: calc(26px + env(safe-area-inset-top)); left: 72px; z-index: 4; }
/* bottom shade behind the name + caption; the scrub bar and the rail sit on top of it */
.reel-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 3; pointer-events: none;
  background: linear-gradient(transparent, rgba(16,12,26,.82));
}
.reel:has(.reel-cap.open) .reel-shade { height: 62%; }
.reel-meta {
  position: absolute; left: 16px; right: 78px; z-index: 4; color: #fff;
  bottom: calc(18px + env(safe-area-inset-bottom));
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 10px rgba(0,0,0,.55);
}
.reel-meta .p-name { font-size: 14px; font-weight: 900; margin-bottom: 4px; }
.reel-meta .p-name small { font-weight: 700; opacity: .75; }
/* caption: 2-line clamp with a TikTok-style "… more" / "less" toggle */
.reel-cap { font-size: 13px; line-height: 1.45; position: relative; }
.reel-cap .cap-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-cap .cap-more, .reel-cap .cap-less { display: none; font-weight: 800; opacity: .8; }
.reel-cap.clamp { cursor: pointer; }
.reel-cap.clamp .cap-text { padding-right: 3.4em; }
.reel-cap.clamp .cap-more { display: block; position: absolute; right: 0; bottom: 0; }
.reel-cap.open { cursor: pointer; }
.reel-cap.open .cap-text { -webkit-line-clamp: unset; max-height: 40vh; overflow-y: auto; }
.reel-cap.open .cap-less { display: block; text-align: right; margin-top: 4px; }
.reel-rail {
  position: absolute; right: 12px; z-index: 4; display: flex; flex-direction: column;
  gap: 20px; align-items: center; bottom: calc(24px + env(safe-area-inset-bottom));
}
.reel-rail .r-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: #fff; cursor: pointer; filter: drop-shadow(0 2px 6px rgba(16,12,26,.7));
}
.reel-rail .r-act svg { width: 30px; height: 30px; }
.reel-rail .r-act.liked svg { color: #ff5c8a; }
.reel-rail .r-act b { font-size: 12px; }
/* ---------- reels video player (own controls, see rvUI in app.js) ---------- */
.reel-slide video.rv { -webkit-touch-callout: none; }
.rv-ui { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.rv-play {
  position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%; background: rgba(16,12,26,.42); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: opacity .18s ease, transform .18s ease;
}
.rv-play svg { width: 42px; height: 42px; fill: #fff; margin-left: 5px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); }
.reel-slide.paused .rv-play { opacity: 1; transform: none; }
.rv-spin {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; opacity: 0; transition: opacity .2s ease .5s;
}
.reel-slide.buffering:not(.paused) .rv-spin { opacity: 1; animation: rvspin .8s linear infinite; }
@keyframes rvspin { to { transform: rotate(360deg); } }
.rv-snd {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); right: 14px; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(61,50,80,.78); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; pointer-events: auto;
}
.rv-snd svg { width: 21px; height: 21px; fill: #fff; }
.rv-snd svg:first-child { display: none; }
#reels-stage.sound .rv-snd svg:first-child { display: block; }
#reels-stage.sound .rv-snd svg:last-child { display: none; }
.rv-bar {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  height: calc(24px + env(safe-area-inset-bottom)); padding-bottom: calc(5px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; pointer-events: auto; touch-action: none; cursor: pointer;
}
.rv-track { position: relative; flex: 1; height: 4px; background: rgba(255,255,255,.55); transition: height .15s ease; box-shadow: 0 0 8px rgba(0,0,0,.5); }
.rv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--rvp, 0%); background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6); }
.rv-knob {
  position: absolute; top: 50%; left: var(--rvp, 0%); width: 14px; height: 14px; margin: -7px 0 0 -7px; box-sizing: border-box;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.5); opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
/* TikTok-style: the knob shows whenever the video is paused */
.reel-slide.paused .rv-knob { opacity: 1; transform: scale(1); }
.rv-time {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom));
  font-size: 13px; font-weight: 800; color: #fff; background: rgba(61,50,80,.82); border-radius: 99px; padding: 4px 11px;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
.reel-slide.scrubbing .rv-track { height: 6px; }
.reel-slide.scrubbing .rv-fill { background: #ff5c8a; box-shadow: none; }
.reel-slide.scrubbing .rv-knob { background: #ff5c8a; border: 2px solid #fff; }
.reel-slide.scrubbing .rv-knob, .reel-slide.scrubbing .rv-time { opacity: 1; }
.reel-slide.scrubbing .rv-knob { transform: scale(1); }
/* everything else steps back while scrubbing so the picture is clear */
.reel-meta, .reel-rail, .reel .m-badge, .reel-count { transition: opacity .15s ease; }
.reel:has(.reel-slide.scrubbing) .reel-meta, .reel:has(.reel-slide.scrubbing) .reel-rail,
.reel:has(.reel-slide.scrubbing) .m-badge, .reel:has(.reel-slide.scrubbing) .reel-count,
.reel:has(.reel-slide.scrubbing) .rv-snd { opacity: 0; }
.reel-count {
  position: absolute; top: calc(20px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 4; font-size: 11px; font-weight: 800; color: #fff;
  background: rgba(61,50,80,.78); border-radius: 99px; padding: 4px 11px;
}
.reel-end { display: flex; align-items: center; justify-content: center; padding: 24px; }
.reel-end .card { max-width: 340px; text-align: center; }

/* reels comment sheet: dark slide-up panel (TikTok style) */
#rc-back { position: fixed; inset: 0; z-index: 144; background: rgba(16,12,26,.25); display: none; }
#rc-back.show { display: block; }
#rc-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; height: 68%;
  background: var(--ink); color: #fff; z-index: 145;
  border-radius: 22px 22px 0 0; display: flex; flex-direction: column;
  transform: translateY(105%); transition: transform .28s ease;
  box-shadow: 0 -6px 30px rgba(16,12,26,.5);
}
#rc-sheet.open { transform: translateY(0); }
#rc-sheet::before {
  content: ''; width: 44px; height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.35); margin: 10px auto 0; flex-shrink: 0;
}
#rc-head {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 8px 48px 12px; font-weight: 900; font-size: 13px; flex-shrink: 0;
}
#rc-x {
  position: absolute; right: 10px; top: 0; background: none; border: none;
  color: #fff; font-size: 16px; font-weight: 900; font-family: inherit;
  cursor: pointer; padding: 6px 10px;
}
#rc-list { flex: 1; overflow-y: auto; padding: 0 16px 8px; overscroll-behavior: contain; }
.rc-empty { color: #b9a9c9; font-size: 13px; padding: 22px 0; text-align: center; }
.rc-cmt + .rc-cmt { border-top: 1px dashed rgba(255,255,255,.14); }
.rc-cmt .cmt-body { color: #fff; }
.rc-cmt small, .rc-cmt .cmt-dots { color: #b9a9c9; }
.rc-cmt .cmt-like { color: #b9a9c9; }
.rc-cmt .cmt-like.liked { color: #ff5c8a; }
#rc-inrow {
  display: flex; gap: 8px; align-items: center; flex-shrink: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.12);
}
#rc-inrow .input {
  margin: 0; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff;
}
#rc-inrow .input::placeholder { color: #b9a9c9; }

/* fullscreen lightbox */
#lightbox {
  position: fixed; inset: 0; background: rgba(24,18,36,.94); z-index: 150;
  display: none; align-items: center; justify-content: center;
}
#lightbox.show { display: flex; }
#lb-stage {
  position: fixed; inset: 0; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  touch-action: pan-x; /* browser owns horizontal drag; we handle vertical */
  transition: transform .18s ease, opacity .18s ease;
}
#lb-stage::-webkit-scrollbar { display: none; }
.lb-slide {
  flex: 0 0 100vw; height: 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
}
.lb-slide img, .lb-slide video { max-width: 94vw; max-height: 90vh; display: block; border-radius: 8px; }
.lb-btn {
  position: fixed; font-family: inherit; font-size: 18px; font-weight: 900; color: var(--ink);
  background: rgba(255,255,255,.92); border: 2px solid var(--ink); border-radius: 50%;
  width: 46px; height: 46px; cursor: pointer; z-index: 152;
  display: flex; align-items: center; justify-content: center;
}
#lb-close { top: 18px; right: 18px; }
#lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
#lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
#lb-count {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 152;
  font-size: 12px; font-weight: 800; color: #fff; background: rgba(61,50,80,.8);
  border: 2px solid rgba(255,255,255,.4); border-radius: 99px; padding: 5px 14px;
}
.s-thumb .mthumb, .t-thumb .mthumb, .result-thumb .mthumb { width: 100%; height: 100%; object-fit: cover; }
.t-thumb, .s-thumb, .result-thumb { overflow: hidden; }
.locked-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: repeating-linear-gradient(45deg, rgba(255,255,255,.25), rgba(255,255,255,.25) 12px, transparent 12px, transparent 24px); overflow: hidden; }
.locked-cover { cursor: pointer; }
.locked-cover b {
  cursor: pointer; user-select: none;
  font-size: 14px; letter-spacing: .3px;
  background: rgba(255,255,255,.94); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 18px; border-radius: 99px; position: relative;
  display: inline-flex; align-items: center; gap: 7px;
}
.locked-cover b svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.locked-cover.lc-clear { background: none; }
.blur-prev {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(18px) saturate(1.15); transform: scale(1.12);
}
.blur-prev.blur-sm { filter: blur(10px) saturate(1.15); }
.lc-shade { position: absolute; inset: 0; background: rgba(30,22,45,.22); }
.dur-badge {
  position: absolute; bottom: 10px; right: 10px; z-index: 3;
  font-size: 11px; font-weight: 800; color: #fff; background: rgba(30,22,45,.82);
  border-radius: 99px; padding: 4px 11px;
}
/* ============ SITE FOOTER (compliance links) ============ */
#site-footer {
  max-width: 720px; margin: 34px auto 0;
  padding: 18px 16px calc(8px + env(safe-area-inset-bottom));
  border-top: 2px dashed #e0d4ea; text-align: center;
  font-size: 12px; color: #6b5b7b;
}
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 12px; }
.foot-links a { color: var(--ink); font-weight: 800; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-contact { line-height: 1.6; }
.foot-contact a { color: #c2557f; font-weight: 700; }
.foot-note { margin-top: 6px; font-size: 11px; color: #9b8bab; }

/* ============ LEGAL PAGES ============ */
.legal { max-width: 760px; margin: 0 auto; padding: 26px 20px 70px; }
.legal .l-home {
  display: inline-block; margin-bottom: 14px; font-weight: 900;
  letter-spacing: .5px; text-decoration: none; color: var(--ink); font-size: 14px;
}
.legal h1 { font-size: 26px; margin-bottom: 4px; }
.legal .l-updated { color: #8a7a95; font-size: 12px; margin-bottom: 22px; }
.legal h2 { font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 14px; line-height: 1.65; color: #4a3f5e; }
.legal p { margin-bottom: 10px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal li { margin-bottom: 5px; }
.legal a { color: #c2557f; font-weight: 700; }

.guest-end { text-align: center; padding: 28px 18px; }
.guest-end b { font-size: 17px; display: block; margin-bottom: 6px; }
.guest-end p { font-size: 13px; color: #6b5b7b; margin-bottom: 14px; }
.more-badge { position: absolute; bottom: 10px; left: 10px; font-size: 11px; font-weight: 800; background: rgba(255,255,255,.9); border: 2px solid var(--ink); border-radius: 99px; padding: 3px 9px; }
.msg-media-big { margin-top: 12px; width: 100%; }
.msg-title { font-size: 16px; font-weight: 800; margin: 2px 0 6px; }
.msg-actions { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; }

/* ============ UPLOAD PANEL ============ */
#upload-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 95; width: 300px; max-width: 92vw;
  background: #fff; border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--ink); padding: 12px 14px;
}
.up-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; }
.up-x { cursor: pointer; font-weight: 900; padding: 2px 6px; }
.up-row { padding: 7px 0; border-top: 2px dashed #eee4f6; }
.up-name { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-bar { height: 10px; border: 2px solid var(--ink); border-radius: 99px; background: #f3ecf9; overflow: hidden; margin: 5px 0 3px; }
.up-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--mint), var(--sky)); transition: width .25s; }
.up-row.failed .up-bar i { background: var(--salmon); }
.up-label { font-size: 10px; font-weight: 800; color: #8a7a95; display: flex; justify-content: space-between; }
.up-label .up-rm { cursor: pointer; color: #b0567a; }

/* ============ TOAST ============ */
#toast {
  /* hidden state slides far enough that even a tall wrapped toast fully
     exits the screen before display:none removes it */
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px);
  background: var(--ink); color: var(--butter); font-size: 13px; font-weight: 800;
  padding: 12px 22px; border-radius: 99px; z-index: 200;
  /* one symmetric curve both ways: identical speed and feel in and out */
  transition: transform .35s ease-in-out;
  border: 2px solid #fff; max-width: 90vw; text-align: center;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* No offered download path for media: no long-press save sheet, no drag-out. */
html.app img, html.app video { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
img, video { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }

/* admin users toolbar + pager */
.au-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.au-bar .au-search { flex: 1 1 220px; min-width: 180px; max-width: 360px; margin: 0; }
.au-bar .au-tiers { flex-wrap: wrap; }
.au-bar .au-tiers button { padding: 5px 12px; }
.au-bar .au-export { margin-left: auto; padding: 8px 14px; font-size: 12px; }
.au-cards { font-family: inherit; font-size: 12px; font-weight: 800; padding: 6px 13px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.au-cards b { font-size: 14px; }
.au-cards.on { background: var(--mint); }
.au-cards:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.au-card { font-size: 10px; padding: 3px 9px; white-space: nowrap; }
.cf-tiles { margin-bottom: 10px; }
.cf-tiles .stat-tile b small { font-size: 12px; color: #6b5b7b; font-weight: 800; }
.cf-tn { display: block; font-size: 10px; color: #8a7a95; margin-top: 2px; }
.cf-errs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cf-err { font-size: 11px; padding: 4px 10px; }
.cf-err i { font-style: normal; font-weight: 600; color: #6b5b7b; margin-left: 4px; }
.cf-table td { vertical-align: top; }
.au-nocard { color: #b9adc2; }
.au-pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.au-pager .au-pg { padding: 4px 14px; font-size: 18px; line-height: 1; }
.au-pager .au-pg:disabled { opacity: .35; cursor: default; box-shadow: none; }

/* media editor: bundle contents strip + scroll when a bundle is long */
#me-bundle .bundle-strip { display: flex; gap: 8px; flex-wrap: wrap; }
#me-bundle .v-item {
  width: 92px; height: 92px; aspect-ratio: auto; flex-shrink: 0;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
#me-bundle .v-item .mthumb { pointer-events: none; }
#me-bundle .v-item.dragging { opacity: .55; transform: scale(1.06); cursor: grabbing; z-index: 2; box-shadow: 4px 4px 0 var(--ink); }
#me-bundle .v-item:first-child::after {
  content: 'COVER'; position: absolute; top: 5px; left: 5px; font-size: 8px; font-weight: 900; letter-spacing: .5px;
  background: var(--butter); border: 2px solid var(--ink); border-radius: 7px; padding: 1px 5px;
}
#edit-overlay .gate-card { max-height: 92vh; overflow-y: auto; }

/* CCbill card sheet */
#pay-overlay { z-index: 172; } /* above the sign-in gate (170) and reels (140) */
.pay-card { max-width: 440px; max-height: 92vh; overflow-y: auto; padding: 24px; }
/* 3-minute card nudge: the sheet drops in with a bounce and a wobble, plus a reminder banner */
#pay-overlay.nudge { animation: nudge-dim .35s ease both; }
#pay-overlay.nudge .pay-card { animation: nudge-in .9s cubic-bezier(.22, 1.5, .36, 1) both; }
@keyframes nudge-dim { from { background: rgba(61,50,80,0); } }
@keyframes nudge-in {
  0%   { opacity: 0; transform: translateY(-70vh) rotate(-8deg) scale(.7); }
  55%  { opacity: 1; transform: translateY(14px) rotate(3deg) scale(1.04); }
  75%  { transform: translateY(-6px) rotate(-2deg) scale(.99); }
  90%  { transform: translateY(2px) rotate(1deg) scale(1); }
  100% { transform: none; }
}
.pay-remind { display: flex; align-items: center; gap: 10px; background: var(--butter); border: 2px solid var(--ink); border-radius: 14px; padding: 10px 12px; margin: -4px 0 14px; font-size: 13px; line-height: 1.35; box-shadow: 3px 3px 0 var(--ink); animation: pop .5s .5s both; }
.pay-remind b { font-size: 14px; }
.pr-wave { font-size: 28px; line-height: 1; display: inline-block; transform-origin: 70% 70%; animation: pr-wave 1.6s .6s ease-in-out 3; }
@keyframes pr-wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(16deg); } 80% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { #pay-overlay.nudge .pay-card, .pr-wave, .pay-remind { animation: none; } }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pay-sub { font-size: 12px; color: #6b5b7b; margin-bottom: 14px; line-height: 1.45; }
.pay-sub.big { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.pay-sub.big small { display: block; font-weight: 500; font-size: 12px; color: #6b5b7b; margin-top: 4px; }
.pay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pay-chips span { font-size: 10px; font-weight: 800; padding: 4px 9px; border: 2px solid var(--ink); border-radius: 99px; background: #fff7dc; white-space: nowrap; }
.pay-note { font-size: 11px; color: #8a7a95; line-height: 1.45; margin: 12px 0 0; }
.pay-field-err { color: #b3324d; font-size: 12px; font-weight: 700; margin: -6px 0 10px 2px; }
.input.bad { border-color: #e0506e; background: #fff5f7; }
.pay-hint { display: block; font-size: 11px; color: #8a7a95; margin: -6px 0 10px 2px; }
.pay-visa { background: #fff7dc; border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; font-size: 12px; margin-bottom: 10px; line-height: 1.4; }
.pay-err { background: #fdeef2; border: 2px solid #e0506e; color: #b3324d; border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
#pay-go[disabled] { opacity: .6; cursor: progress; }

/* account sheet: subscription + purchase history */
.ac-sub { border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; background: var(--cream); }
.ac-sub .st { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-sub .st b { font-size: 14px; }
.ac-sub .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); border: 2px solid var(--ink); }
.ac-sub .dot.off { background: #e3e0e8; } .ac-sub .dot.end { background: var(--butter); }
.ac-sub small { display: block; color: #6b5b7b; font-size: 12px; margin-top: 4px; line-height: 1.45; }
.ac-sub .a-row { margin-top: 10px; }
.ac-sub .btn { padding: 7px 14px; font-size: 12px; }
#cancel-overlay { z-index: 172; }
/* cancel flow: retention list + "it went through" */
.cx-loss { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cx-loss > div { display: flex; gap: 10px; align-items: flex-start; background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 9px 11px; }
.cx-loss > div > span { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.cx-loss b { display: block; font-size: 13px; }
.cx-loss small { display: block; font-size: 11.5px; color: #6b5b7b; line-height: 1.4; margin-top: 1px; }
.cx-anyway { display: block; margin: 10px auto 0; padding: 6px 10px; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 700; color: #8a7a95; text-decoration: underline; cursor: pointer; }
.cxd-face { font-size: 46px; text-align: center; margin-bottom: 4px; line-height: 1.1; }
.cx-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; }
.cx-id b { font-family: monospace; font-size: 13px; letter-spacing: .5px; }
.cx-copy { margin-left: auto; padding: 5px 12px; font-size: 11px; }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 2px dashed #eee4f6; font-size: 12px; }
.ph-row:last-child { border-bottom: none; }
.ph-row .ph-when { color: #8a7a95; width: 78px; flex-shrink: 0; }
.ph-row .ph-what { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-row .ph-amt { font-weight: 900; }
.ph-row.neg .ph-amt { color: #b3324d; }

.bl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bl-back { padding: 6px 12px; font-size: 12px; }

.gate-uname-note { min-height: 0; font-size: 12px; font-weight: 800; text-align: left; margin: -4px 0 8px 4px; }
.gate-uname-note.bad { color: #e0506e; }
.gate-uname-note:empty { display: none; }

/* purchased spins waiting on a tier */
.tier-sel button { position: relative; }
.tier-n { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--salmon); border: 2px solid var(--ink); font-size: 11px; font-weight: 900; color: var(--ink); display: flex; align-items: center; justify-content: center; }

#confirm-overlay { z-index: 172; }
#cf-go[disabled] { opacity: .6; cursor: progress; }

/* card on file chip (OF-style: brand badge · masked number · expiry) */
.cc { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-brand { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 28px; padding: 0 8px; border-radius: 6px; border: 2px solid var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: #6b5b7b; }
.cc-visa { background: #1a1f71; } .cc-mc { background: #eb001b; } .cc-amex { background: #2e77bb; } .cc-disc { background: #f76f20; } .cc-jcb { background: #0e4c96; } .cc-diners { background: #0079be; }
.cc-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.cc-exp { font-size: 12px; font-weight: 700; color: #8a7a95; }
.cf-cardbox { border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; background: var(--cream); margin-bottom: 12px; }

/* level page: how XP works */
.xp-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
@media (min-width: 640px) { .xp-how { grid-template-columns: repeat(4, 1fr); } }
/* phones: two tiles per row, but the three-rarity tile takes the full row so it never squeezes */
@media (max-width: 639px) { .xp-how .xp-wins, .xp-how > div:last-child { grid-column: 1 / -1; } }
.xp-how div { background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; }
.xp-how b { display: block; font-size: 15px; }
.xp-how small { display: block; font-size: 11px; color: #6b5b7b; margin-top: 3px; line-height: 1.4; }

/* level pill after the name — steps up with level */
.lb { display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 900; letter-spacing: .5px; padding: 2px 6px; border-radius: 99px; border: 1.5px solid var(--ink); vertical-align: 1px; line-height: 1.3; color: var(--ink); }
.lb-t1 { background: var(--mint); }
.lb-t2 { background: var(--sky); }
.lb-t3 { background: var(--butter); box-shadow: 1.5px 1.5px 0 var(--ink); }
.lb-t4 { background: linear-gradient(135deg, var(--pink), var(--lilac)); box-shadow: 1.5px 1.5px 0 var(--ink); }
.lb-t5 { background: linear-gradient(135deg, #f5c96b, #ffe9a8 50%, #f5c96b); background-size: 200% 100%; box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(245,201,107,.9); animation: lbShimmer 2.6s linear infinite; }
@keyframes lbShimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.rc-cmt .lb { border-color: #fff; }
/* level-up popup */
#perk-overlay { z-index: 172; }
.pk-card { text-align: center; max-width: 380px; }
.pk-burst { font-size: 44px; line-height: 1; margin-bottom: 6px; animation: pkPop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes pkPop { from { transform: scale(.3); opacity: 0; } }
.pk-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.pk-list li { background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 700; line-height: 1.4; }

/* win-bonus tile: one column per rarity, coloured like the chips */
.xp-how .xp-wins { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 6px 10px; align-items: start; }
.xp-how .xp-wins b { white-space: nowrap; font-size: 14px; }
.xp-how .xp-wins > div { background: none; border: none; padding: 0; text-align: center; }
.xp-how .xp-wins b { font-size: 15px; }
.xp-how .xp-wins small { margin-top: 1px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; font-size: 10px; }
.xp-wins .w-leg b, .xp-wins .w-leg small { color: #c48f22; }
/* wheel page: win-bonus reminder under the odds table */
.win-xp { background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; margin: 12px 0; }
.win-xp-row { display: flex; justify-content: space-around; gap: 8px; text-align: center; }
.win-xp-row b { display: block; font-size: 15px; white-space: nowrap; }
.win-xp-row small { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; margin-top: 1px; }
.win-xp .w-leg b, .win-xp .w-leg small { color: #c48f22; }
.win-xp .w-epic b, .win-xp .w-epic small { color: #8a63c2; }
.win-xp .w-rare b, .win-xp .w-rare small { color: #3f93b8; }
.win-xp p { font-size: 11.5px; color: #6b5b7b; line-height: 1.45; margin: 8px 0 0; text-align: center; }
.win-xp p b { color: var(--ink); }
.xp-wins .w-epic b, .xp-wins .w-epic small { color: #8a63c2; }
.xp-wins .w-rare b, .xp-wins .w-rare small { color: #3f93b8; }
.xp-how .xp-wins em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: #6b5b7b; text-align: center; margin-top: 2px; }

/* streak bar: 9 ticks so the finish line is visible; gold when the bonus spin is next */
.pity-bar { position: relative; }
.pity-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 2px), rgba(61,50,80,.25) calc(100% / 9 - 2px) calc(100% / 9)); pointer-events: none; }
.pity.ready { background: #fff3c4; border-color: #e0a93a; }
.pity.ready .pity-bar i { background: linear-gradient(90deg, #f5c96b, #ffb347); animation: glowPulse 1.6s ease-in-out infinite; }
.wb-pity.ready { color: #c48f22; }

/* admin edit button on wall posts + inbox broadcasts */
.p-head { position: relative; }
.p-edit { margin-left: auto; align-self: flex-start; font: inherit; font-size: 14px; line-height: 1; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 5px 8px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.msg .meta .p-edit { float: right; margin: -4px 0 0 8px; }
#pe-overlay { z-index: 112; }
#pe-strip .v-item { touch-action: none; cursor: grab; }
#picker-overlay { z-index: 116; } /* the vault picker sits above whichever editor opened it */
.up-row.skipped .up-bar i { background: linear-gradient(90deg, var(--butter), var(--gold)); }

/* ---- wheel hidden (body.no-wheel ← /wheel.enabled=false, WHEEL_ENABLED=0) ---- */
.no-wheel #nav button[data-s="wheel"], .no-wheel .wheel-banner, .no-wheel .wb-pity,
.no-wheel .xp-how .xp-wheel, .no-wheel .xp-how .xp-wins, .no-wheel .only-wheel { display: none !important; }
@media (min-width: 640px) { .no-wheel .xp-how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .no-wheel .xp-how .xp-candy { grid-column: auto; } }

/* ---- tip sheet ---- */
.tip-amts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.tip-amts button {
  font-family: inherit; font-weight: 900; font-size: 14px; color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 99px; padding: 8px 16px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
}
.tip-amts button.on { background: var(--butter); }
.tip-amts button:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.tip-custom { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; font-weight: 900; }
.tip-custom input {
  font-family: inherit; font-size: 15px; font-weight: 800; width: 120px; padding: 8px 10px;
  border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink);
}
#tip-go:disabled { opacity: .55; cursor: not-allowed; }

/* ---- tip sent celebration ---- */
.td-card { position: relative; overflow: hidden; text-align: center; max-width: 360px; }
.td-emoji { font-size: 58px; line-height: 1; animation: td-pop .7s cubic-bezier(.2,1.4,.4,1) both; }
.td-amt { font-size: 40px; font-weight: 900; letter-spacing: -1px; color: var(--ink); animation: td-pop .7s .1s cubic-bezier(.2,1.4,.4,1) both; }
.td-xp { font-size: 12px; padding: 5px 12px; animation: td-pop .6s .25s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes td-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.td-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.td-burst i { position: absolute; bottom: -40px; font-style: normal; opacity: 0; animation-name: td-float; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes td-float {
  0%   { transform: translateY(0) rotate(-10deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(-460px) rotate(18deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .td-burst i { animation: none; display: none; } }

/* ---- payments launch countdown ---- */
#launch-bar {
  flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  margin-top: 10px; padding: 12px 16px; background: var(--butter); border: 2px solid var(--ink); border-radius: 14px;
  font-size: 13px; font-weight: 800; color: var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
#launch-bar .lb-rocket { font-size: 22px; line-height: 1; }
#launch-bar .lb-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
#launch-bar .lb-text b { letter-spacing: .6px; }
#launch-bar .lb-timer { font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 900; white-space: nowrap; }
#launch-bar .lb-when { color: #6b5b7b; font-weight: 700; white-space: nowrap; }
#launch-bar .lbar-btn { margin-left: auto; flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 8px 14px; }
#launch-bar .lbar-btn.ready { cursor: default; background: #fff; }
@media (max-width: 640px) {
  #launch-bar { gap: 10px; padding: 10px 12px; }
  #launch-bar .lb-text { flex-direction: column; gap: 1px; }
  #launch-bar .lb-text b { font-size: 11px; }
  #launch-bar .lb-when { display: none; }
  #launch-bar .lbar-btn { font-size: 11px; padding: 7px 11px; }
}
.lo-box { text-align: center; max-width: 380px; }
.lo-rocket { font-size: 52px; line-height: 1; animation: td-pop .7s cubic-bezier(.2,1.4,.4,1) both; }
.lo-timer { font-size: 34px; font-weight: 900; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--ink); animation: td-pop .7s .1s cubic-bezier(.2,1.4,.4,1) both; }
.lo-when { font-size: 13px; font-weight: 800; color: #6b5b7b; margin: 2px 0 14px; }
.lo-card small { display: block; margin-top: 8px; font-size: 12px; color: #8a7a95; }
.lo-ready { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* ---- login streak (mirrors the level pill) ---- */
.streak-pill {
  display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 2px solid var(--ink); border-radius: 99px;
  padding: 4px 10px 4px 5px; font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap; cursor: default;
}
.streak-pill .sp-chip { background: var(--salmon); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 7px; line-height: 1; display: inline-flex; align-items: center; }
.streak-pill .sp-fire { font-size: 13px; line-height: 1.2; }
.streak-pill.hot .sp-fire { animation: sp-flick 1.6s ease-in-out infinite; }
@keyframes sp-flick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.streak-pill .sp-bar { width: 54px; height: 10px; border: 2px solid var(--ink); border-radius: 99px; background: #fdeee6; overflow: hidden; }
.streak-pill .sp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--salmon)); transition: width .5s; }
.streak-pill .sp-text { color: #6b5b7b; }
.streak-pill .sp-xp { background: var(--gold); border: 2px solid var(--ink); border-radius: 99px; font-size: 9px; font-weight: 900; padding: 1px 6px; letter-spacing: .3px; }
.wall-lvl-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sk-head .sk-fire { font-size: 34px; line-height: 1; }
.sk-head b { display: block; font-size: 17px; }
.sk-head small { display: block; font-size: 12px; color: #6b5b7b; }
.sk-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sk-goal { background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 6px; text-align: center; opacity: .6; }
.sk-goal.done { opacity: 1; background: var(--mint); }
.sk-goal b { display: block; font-size: 18px; line-height: 1.1; }
.sk-goal small { display: block; font-size: 10px; color: #6b5b7b; margin-bottom: 5px; }
.sk-goal .chip { font-size: 10px; padding: 2px 6px; white-space: nowrap; letter-spacing: 0; }
@media (max-width: 520px) { .sk-track { grid-template-columns: repeat(3, 1fr); } }

/* tiny legend labels on the header pills — absolutely positioned on the top
   border, so they add no height to the header */
.nav-pills [data-label] { position: relative; }
.nav-pills [data-label]::before {
  content: attr(data-label); position: absolute; top: -7px; left: 10px; z-index: 1;
  font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .7px; text-transform: uppercase;
  color: #8a7a95; background: #fff; padding: 1px 4px; border-radius: 4px; white-space: nowrap;
}

/* ---- subscriber badge: rings on the level pill + avatar (see applySubBadge) ---- */
.tstar { width: 12px; height: 12px; display: block; }
.tstar path { fill: url(#g-star); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.end .tstar path { fill: none; stroke: #b3a6c0; }
.nav-lvl.sub { border-color: #d9a520; box-shadow: 0 0 0 2px #ffe9a8, 0 0 14px rgba(255,209,102,.55); }
.nav-lvl.end { border-color: #b3a6c0; box-shadow: 0 0 0 2px #eee8f3; }
.nav-lvl.end::after {
  content: attr(data-days); position: absolute; top: -7px; right: 10px; z-index: 1;
  font-size: 8px; line-height: 1; font-weight: 900; letter-spacing: .7px; text-transform: uppercase;
  color: #8a7a95; background: #fff; padding: 1px 4px; border-radius: 4px; white-space: nowrap;
}
.nav-avatar { position: relative; }
.nav-avatar.sub { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffd166; }
.nav-avatar.end { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #d9cde8; }
.av-star {
  position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center;
}
.av-star { background: var(--butter); }                  /* butter circle, deep-gold star */
.av-star .tstar { width: 10px; height: 10px; }
.av-star .tstar path { fill: #d9a520; stroke: var(--ink); }
.nav-avatar.end .av-star { background: #fff; }
.nav-avatar.end .av-star .tstar path { fill: none; stroke: #b3a6c0; }

/* ---- "+N XP" corner tag on pay buttons (see xpTag): rides the top-right
   edge so the button itself keeps its size ---- */
.xpb { position: relative; }
.xp-tag {
  position: absolute; top: -9px; right: -6px; z-index: 1; pointer-events: none;
  background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px;
  font-size: 9px; font-weight: 900; letter-spacing: .04em; line-height: 1.2; padding: 2px 6px; white-space: nowrap;
  font-family: inherit; text-transform: none;
}
.btn:disabled .xp-tag { display: none; }

/* ---- level avatars (see avatarSVG) ---- */
.ava { display: block; width: 100%; height: 100%; }
.nav-avatar.has-ava { border: 0; background: none; }
.cmt-ava { width: 26px; height: 26px; flex-shrink: 0; }
.cmt-ava .ava-pfp { width: 26px; height: 26px; border-width: 2px; }
.look-head { display: flex; align-items: center; gap: 14px; }
.look-big { width: 72px; height: 72px; flex-shrink: 0; }
.look-next b { display: block; font-size: 14px; }
.look-next small { display: block; font-size: 12px; color: #6b5b7b; line-height: 1.45; margin-top: 2px; }
.look-next small b { display: inline; font-size: 12px; }
.look-strip { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.look-strip::-webkit-scrollbar { display: none; }
.look-rung { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.look-rung .ava { width: 44px; height: 44px; border-radius: 50%; }
.look-rung.locked .ava { filter: grayscale(1); opacity: .4; }
.look-rung.now .ava { box-shadow: 0 0 0 3px var(--gold); }
.look-rung small { font-size: 9px; font-weight: 900; letter-spacing: .08em; color: #8a7a95; white-space: nowrap; }
.look-rung.now small { color: var(--ink); }
.ac-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lk-prev { width: 96px; height: 96px; margin: 0 auto 10px; }
.lk-lbl { font-size: 10px; font-weight: 900; letter-spacing: .12em; color: #8a7a95; margin: 10px 0 6px; }
.lk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lk-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink); cursor: pointer; padding: 0; }
.lk-dot.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--gold); }
.lk-hair { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; padding: 0; cursor: pointer; }
.lk-hair.on { box-shadow: 0 0 0 3px var(--gold); }
.lk-hair .ava { width: 100%; height: 100%; }
.ac-ava { width: 46px; height: 46px; flex-shrink: 0; }
/* the account avatar opens the look editor: a small "+" badge says it's tappable */
.ac-ava { position: relative; }
.ac-ava::after { content: "+"; position: absolute; right: 1px; bottom: 1px; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; background: var(--butter); border: 2px solid var(--ink); color: var(--ink); display: flex; align-items: center; justify-content: center; padding-bottom: 1px; font: 900 12px/1 -apple-system, BlinkMacSystemFont, sans-serif; } /* centre of the badge sits on the avatar's ring */

/* ---- trusted devices (admin 2FA) ---- */
.dev-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eee6f2; }
.dev-row:last-child { border-bottom: 0; }
.dev-row > div { flex: 1; min-width: 0; }
.dev-row b { display: block; font-size: 13px; }
.dev-row small { display: block; font-size: 11px; color: #6b5b7b; font-weight: 700; }
.dev-cur { font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: var(--mint); border: 1.5px solid var(--ink); border-radius: 99px; padding: 1px 6px; vertical-align: 1px; }
.dev-x { padding: 5px 10px; font-size: 11px; }

/* ---- delete account ---- */
.del-link { font-size: 11px; color: #9b8bab; text-decoration: underline; cursor: pointer; font-weight: 700; }
.del-type { text-align: center; font-size: 20px; letter-spacing: 6px; font-weight: 900; text-transform: uppercase; }
.del-type.ok { border-color: #d6335e; background: #fff0f3; }
.del-going { color: #d6335e; font-weight: 800; margin-top: 8px; }

/* ---- creator profile picture ---- */
.p-ava { background-size: cover; background-position: center; }
.pfp-row { display: flex; align-items: center; gap: 16px; }
.pfp-preview { width: 84px; height: 84px; }
.pfp-info small { display: block; font-size: 12px; color: #6b5b7b; margin-bottom: 10px; }
.pfp-card { text-align: center; max-width: 360px; }
.pfp-stage {
  width: 280px; height: 280px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink);
  background: #eee; position: relative; touch-action: none; cursor: grab; user-select: none;
  box-shadow: 0 0 0 6px rgba(255,255,255,.7), 3px 3px 0 var(--ink);
}
.pfp-stage:active { cursor: grabbing; }
.pfp-stage img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; will-change: transform; }
.pfp-zoom { display: flex; align-items: center; gap: 10px; margin: 14px auto 12px; width: 280px; font-weight: 900; font-size: 18px; }
.pfp-zoom input { flex: 1; accent-color: var(--ink); }

/* ---- wall "Subs only" filter ---- */
.wall-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wf-hidden { display: none !important; }
#sub-filter.on { background: var(--gold); }

/* ---- subscriber hero (guests + non-subs) ---- */
.sub-hero { position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 auto 22px; max-width: 640px; overflow: hidden; padding: 20px;
  background: linear-gradient(135deg, #fff5f7, #f3edff 60%, #fff9e6); }
.sh-previews { position: relative; height: 200px; width: 330px; margin: 0 auto; cursor: pointer; }
.sh-tile { position: absolute; width: 150px; height: 150px; border-radius: 16px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #ddd; transition: transform .25s; }
.sh-tile img, .sh-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-tile .chip { position: absolute; left: 8px; bottom: 8px; font-size: 9px; padding: 3px 8px; }
.sh-rare  { left: 0;    top: 40px; transform: rotate(-8deg); z-index: 1; }
.sh-epic  { left: 70px; top: 18px; transform: rotate(3deg);  z-index: 2; }
.sh-leg   { left: 140px; top: 0;   transform: rotate(9deg);  z-index: 3; box-shadow: 4px 4px 0 var(--ink), 0 0 26px rgba(255,190,60,.55); }
.sh-previews:hover .sh-tile { transform: rotate(0) translateY(-4px); }
.sh-kicker { font-size: 11px; letter-spacing: 1.4px; font-weight: 900; color: #b8862a; margin-bottom: 4px; }
.sh-title { font-size: 26px; line-height: 1.1; margin: 0 0 10px; letter-spacing: -.3px; }
.sh-proof { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #4a3d5c; }
.sh-cta { font-size: 14px; padding: 12px 22px; }
.sh-fine { display: block; margin-top: 8px; font-size: 11px; color: #8a7a95; font-weight: 700; }
@media (max-width: 720px) {
  .sub-hero { gap: 12px; padding: 16px; }
  .sh-previews { height: 150px; width: 270px; }
  .sh-tile { width: 118px; height: 118px; }
  .sh-rare { left: 0; top: 28px; } .sh-epic { left: 76px; top: 12px; } .sh-leg { left: 152px; top: 0; }
  .sh-title { font-size: 22px; }
  .sh-cta { width: 100%; }
}
/* ---- plan picker ---- */
.plans-card { text-align: center; max-width: 560px; }
.plans-cd { margin: -4px 0 12px; padding: 10px 12px 12px; border: 2px dashed var(--ink); border-radius: 16px; background: #fff7dc; }
.plans-cd-top { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #6b5b7b; }
.plans-cd .lo-timer { font-size: 28px; }
.plans-cd .lo-when { margin-bottom: 8px; }
.plans-card-line { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }
.plans-card-line small { font-size: 12px; color: #8a7a95; }
#confetti { position: fixed; inset: 0; z-index: 10000; }
#confetti i { animation-iteration-count: 1; animation-fill-mode: both; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.plan { position: relative; border: 2px solid var(--ink); border-radius: 14px; padding: 16px 8px 12px; background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.plan.on { background: var(--mint); box-shadow: 3px 3px 0 var(--ink); }
.plan.best { border-color: #b8862a; }
.plan-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--gold); border: 2px solid var(--ink); border-radius: 99px; font-size: 8px; font-weight: 900; letter-spacing: .6px; padding: 2px 7px; white-space: nowrap; }
.plan-len { font-size: 13px; }
.plan-mo { font-size: 20px; font-weight: 900; letter-spacing: -.5px; }
.plan-mo small { font-size: 11px; font-weight: 800; color: #6b5b7b; }
.plan-total { font-size: 10px; color: #6b5b7b; font-weight: 700; line-height: 1.2; }
.plan-save { margin-top: 4px; font-size: 9px; font-weight: 900; color: #55b593; letter-spacing: .5px; }
@media (max-width: 520px) { .plans { grid-template-columns: repeat(2, 1fr); } }

@keyframes strip-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* the hidden attribute must beat display:flex/grid on the element's own rule */
[hidden] { display: none !important; }

/* ---- floating mini hero (shows once the big hero scrolls away) ---- */
.sub-strip {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; max-width: 820px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; cursor: pointer;
  background: linear-gradient(135deg, #fff5f7, #f3edff 60%, #fff9e6); border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 3px 3px 0 var(--ink), 0 10px 28px rgba(30,22,45,.28); animation: strip-in .3s ease-out both;
}
.ss-previews { position: relative; width: 108px; height: 60px; flex-shrink: 0; }
.ss-tile { position: absolute; top: 0; width: 60px; height: 60px; object-fit: cover; border-radius: 12px; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: #ddd; display: block; }
.ss-rare { left: 0; transform: rotate(-8deg); z-index: 1; }
.ss-epic { left: 24px; transform: rotate(2deg); z-index: 2; }
.ss-leg  { left: 48px; transform: rotate(8deg); z-index: 3; box-shadow: 2px 2px 0 var(--ink), 0 0 16px rgba(255,190,60,.6); }
.ss-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ss-text b { font-size: 15px; line-height: 1.15; }
.ss-text small { font-size: 11.5px; font-weight: 700; color: #6b5b7b; }
.ss-cta { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 10px 16px; }
.ss-short { display: none; }
main.has-strip { padding-bottom: 100px; }
@media (max-width: 640px) {
  .sub-strip { gap: 10px; padding: 8px 10px; left: 8px; right: 8px; }
  .ss-previews { width: 84px; height: 48px; }
  .ss-tile { width: 48px; height: 48px; border-radius: 10px; }
  .ss-epic { left: 18px; } .ss-leg { left: 36px; }
  .ss-text b { font-size: 13px; }
  .ss-text small { display: none; }
  .ss-cta { font-size: 11px; padding: 9px 12px; }
  .ss-long { display: none; } .ss-short { display: inline; }
  main.has-strip { padding-bottom: 88px; }
}

/* ---- dark mini hero inside the swipe view ---- */
.reel-strip {
  position: absolute; top: calc(64px + env(safe-area-inset-top)); bottom: auto; left: 12px; right: 12px; z-index: 5;
  background: rgba(20,16,31,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 2px solid rgba(255,255,255,.28); color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.45); animation: strip-down .3s ease-out both;
}
.reel-strip .ss-text b { color: #fff; }
.reel-strip .ss-text small { color: #cfc3dc; }
.reel-strip .ss-tile { border-color: rgba(255,255,255,.6); box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.reel-strip .ss-leg { box-shadow: 2px 2px 0 rgba(0,0,0,.5), 0 0 16px rgba(255,190,60,.6); }
@keyframes strip-down { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* subscriber-locked posts: pink SUBSCRIBE pill instead of the white lock pill */
.locked-cover b.sub-pill { background: var(--salmon); color: var(--ink); }

/* ---- scheduler ---- */
.sched-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.sched-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; cursor: pointer; }
.sched-toggle input { width: 16px; height: 16px; accent-color: var(--ink); }
.sched-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sched-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-nav .btn { padding: 4px 12px; font-size: 14px; }
.cal-nav b { font-size: 14px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; font-weight: 900; letter-spacing: .6px; color: #8a7a95; text-align: center; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day { min-height: 58px; border: 2px solid #e8e0f0; border-radius: 10px; padding: 4px 5px; cursor: pointer; background: #fff; font-size: 12px; }
.cal-day.empty { background: transparent; border-color: transparent; cursor: default; }
.cal-day b { display: block; font-size: 12px; }
.cal-day.today b { color: #d6335e; }
.cal-day.on { border-color: var(--ink); background: var(--butter); box-shadow: 2px 2px 0 var(--ink); }
.cal-chip { display: block; margin-top: 3px; border-radius: 6px; font-size: 10px; text-align: center; font-weight: 900; color: #fff; line-height: 16px; }
.cal-chip.post { background: #4f9cf0; }
.cal-chip.msg { background: #5cbf8a; }
.cal-day-panel { border: 2px solid var(--ink); border-radius: 14px; padding: 10px; background: var(--cream); }
.sc-item { border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; background: #fff; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.sc-item.published { opacity: .6; cursor: default; }
.sc-item.failed { border-color: #d6335e; }
.sc-top { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; margin-bottom: 6px; }
.sc-kind.post { color: #4f9cf0; } .sc-kind.msg { color: #3fa370; }
.sc-time { margin-left: auto; font-size: 12px; }
.sc-body { display: flex; align-items: center; gap: 8px; }
.sc-thumbs { display: flex; gap: 3px; flex-shrink: 0; align-items: center; }
.sc-thumb { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); }
.sc-thumb img, .sc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-more { font-size: 10px; font-weight: 900; color: #6b5b7b; }
.sc-cap { font-size: 12px; color: #4a3d5c; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-state { display: block; margin-top: 6px; font-size: 10px; font-weight: 800; }
.sc-state.ok { color: #3fa370; } .sc-state.bad { color: #d6335e; }
@media (max-width: 860px) { .sched-layout { grid-template-columns: 1fr; } }

/* ---- fan email tool ---- */
.em-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.em-pills { flex-wrap: wrap; margin-bottom: 8px; }
.em-pills button { font-size: 11px; padding: 6px 10px; }
.em-count { font-size: 14px; margin: 10px 0; }
.em-uresults .em-u { padding: 6px 8px; border: 2px solid #e8e0f0; border-radius: 8px; margin-top: 4px; font-size: 12px; cursor: pointer; background: #fff; }
.em-uresults .em-u:hover { border-color: var(--ink); }
.em-uchosen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#email-card .sched-toggle { display: flex; margin-top: 6px; }
@media (max-width: 860px) { .em-layout { grid-template-columns: 1fr; } }

/* ---- per-post photo crop ---- */
.crop-stage { margin: 0 auto; border-radius: 14px; overflow: hidden; border: 3px solid var(--ink); background: #eee; position: relative; touch-action: none; cursor: grab; user-select: none; box-shadow: 3px 3px 0 var(--ink); }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; top: 0; left: 0; max-width: none; pointer-events: none; will-change: transform; }
.v-item .v-crop { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; z-index: 3; }
.v-item .v-crop.on { background: var(--butter); }
.media .mthumb[data-crop], .g-item .mthumb[data-crop], .v-item .mthumb[data-crop], .cslide .mthumb[data-crop] { will-change: transform; }

/* ---- next scheduled post countdown (wall) ---- */
.next-post { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; background: linear-gradient(135deg, #fff9e6, #f3edff); }
.next-post .np-icon { font-size: 26px; line-height: 1; }
.next-post .np-text b { display: block; font-size: 15px; }
.next-post .np-cd { font-variant-numeric: tabular-nums; color: #d6335e; }
.next-post .np-text small { font-size: 12px; color: #6b5b7b; font-weight: 700; }
/* tappable countdowns (store → store, subs-only → plans) */
.next-post.np-tap { cursor: pointer; transition: transform .08s, box-shadow .08s; }
.next-post.np-tap:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
/* three looks for the big slot + the small second line */
.next-post.np-store { background: linear-gradient(135deg, #e8f4fb, #efe8ff); }
.next-post.np-sub { background: linear-gradient(135deg, #ffe9a8, #ffd166 55%, #f6c1d0); border-color: #b8862a; box-shadow: 3px 3px 0 var(--ink), 0 0 18px rgba(255,209,102,.55); }
.next-post.np-sub .np-icon { animation: np-star 1.6s ease-in-out infinite; }
.next-post.np-sub .np-cd { color: #8b3a1e; animation: np-pulse 1.2s ease-in-out infinite; display: inline-block; margin-left: 3px; transform-origin: left center; }
.next-post.np-sub .np-text small { color: #5a4530; }
@keyframes np-star { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.18) rotate(8deg); } }
@keyframes np-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.next-post .np-link { text-decoration: underline; cursor: pointer; font-weight: 900; color: var(--ink); white-space: nowrap; }
/* the second upcoming thing: same card, smaller, no animation, sits right under the big one */
.next-post.np-mini { display: inline-flex; width: 78%; min-width: fit-content; max-width: 100%; align-self: center; padding: 7px 16px 7px 12px; margin: 0 0 -10px; gap: 9px; border-radius: 14px; }
.next-post.np-mini .np-icon { font-size: 18px; animation: none; }
.next-post.np-mini .np-text b { font-size: 12.5px; }
.next-post.np-mini .np-cd { animation: none; }
.next-post.np-mini .np-text small { font-size: 11px; }
.next-post.np-mini.np-sub { box-shadow: 3px 3px 0 var(--ink); }
.cal-chip.store { background: #b8862a; }
.sc-kind.store { color: #b8862a; }

/* ---- ONLYBRAD.COM watermark: drawn over the frame, never into the file ----
   (stays put and readable while the photo underneath is pinch-zoomed; not on gallery tiles) */
.media:not(:has(.locked-cover))::after, .lb-wrap::after {
  content: 'ONLYBRAD.COM'; position: absolute; left: 10px; bottom: 10px; z-index: 4; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 900; letter-spacing: 1.2px; color: #fff; opacity: .55;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 8px rgba(0,0,0,.4);
}
.media:has(.lc-bar)::after { bottom: 58px; }               /* clear the UNLOCK bar on PPV posts the viewer owns */
.lb-wrap { position: relative; display: inline-block; }
.lb-wrap::after { left: 12px; bottom: 12px; font-size: 12px; letter-spacing: 1.5px; z-index: 6; }
.reel-wm { position: absolute; display: none; z-index: 4; pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px; font-weight: 900; letter-spacing: 1.4px; color: #fff; opacity: .55; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 8px rgba(0,0,0,.4); }

/* ---- admin "view as" ---- */
#viewas-bar { flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; margin: -12px -20px 10px; padding: 8px 14px;
  background: #d9534f; color: #fff; font-weight: 800; font-size: 13px; }
#viewas-bar .btn { padding: 5px 12px; font-size: 11px; }
#viewas-fab { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 200; background: #d9534f; color: #fff; border: 2px solid var(--ink);
  border-radius: 99px; padding: 10px 16px; font-family: inherit; font-weight: 900; font-size: 12px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
body.viewas .sub-strip { bottom: calc(64px + env(safe-area-inset-bottom)); }
.au-viewas { font-family: inherit; font-size: 10px; font-weight: 900; padding: 3px 8px; margin-left: 6px; border: 2px solid var(--ink); border-radius: 99px; background: var(--butter); cursor: pointer; }
.au-wheel { background: #fff; }
.au-wheel.on { background: var(--pink); }

/* ---- after launch: slim green "payments are live" nudge ---- */
#launch-bar.live { background: var(--mint); padding: 7px 14px; margin-top: 8px; gap: 10px; box-shadow: 2px 2px 0 var(--ink); }
#launch-bar.live .lb-rocket { font-size: 16px; }
#launch-bar.live .lb-live { font-size: 12px; font-weight: 700; color: var(--ink); min-width: 0; }
#launch-bar.live .lbar-btn { font-size: 11px; padding: 6px 12px; }
@media (max-width: 640px) { #launch-bar.live .lb-live { font-size: 11px; } }

/* ---- new-user tour ---- */
#tour { position: fixed; inset: 0; z-index: 180; }
#tour-spot { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(30,22,45,.72); pointer-events: none; transition: left .3s, top .3s, width .3s, height .3s; }
#tour-bubble { position: fixed; left: 50%; transform: translateX(-50%); width: min(92vw, 380px); background: #fff; border: 2px solid var(--ink); border-radius: 18px;
  padding: 14px 16px 12px; box-shadow: 4px 4px 0 var(--ink); transition: top .3s; }
.tb-dots { display: flex; gap: 5px; margin-bottom: 8px; }
.tb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #e4dcee; }
.tb-dots i.done { background: var(--mint); } .tb-dots i.on { background: var(--pink); }
.tb-text { font-size: 14px; line-height: 1.45; font-weight: 600; color: #2b2138; margin-bottom: 12px; }
.tb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tb-count { font-size: 11px; font-weight: 800; color: #8a7a95; }
.tb-next { font-size: 12px; padding: 9px 16px; }
body.touring #reels .lb-btn { z-index: 1; }

/* header progress bars: the fill is the track's own background (sized by --fill).
   Backgrounds always honour the rounded corners, so nothing can poke past the
   curve on Safari's first paint. No inner element, no mask, no transform. */
.lvl-pill .xp-bar { background: linear-gradient(90deg, var(--salmon), var(--lilac)) 0 0 / var(--fill, 0%) 100% no-repeat, #f3ecf9; transition: background-size .5s; }
.streak-pill .sp-bar { background: linear-gradient(90deg, var(--gold), var(--salmon)) 0 0 / var(--fill, 0%) 100% no-repeat, #fdeee6; transition: background-size .5s; }
.lvl-pill .xp-bar i, .streak-pill .sp-bar i { display: none; }

/* ---------- puzzles ---------- */
body:not(.puzzles-on) .only-puzzles { display: none; }
.pz-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pz-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pz-controls .pill-toggle button { padding: 6px 12px; font-size: 11px; }
.pz-stats { font-size: 12px; font-weight: 800; color: #6b5b7b; display: flex; gap: 10px; }
.pz-stats b { color: var(--ink); }
.pz-wrap { position: relative; }
#pz-pager { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
#pz-pager::-webkit-scrollbar { display: none; }
.pz-page { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 4px 4px 10px; gap: 10px; position: relative; }
.pz-page.hidden { display: none; }
.pz-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: #6b5b7b; flex-wrap: wrap; justify-content: center; text-align: center; }
.pz-board { position: relative; border: 3px solid var(--ink); border-radius: 18px; background: var(--ink); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pz-board.solved, .pz-board.locked { touch-action: auto; }
.pz-tile { position: absolute; left: 0; top: 0; transition: transform .2s cubic-bezier(.2,.9,.3,1.2); cursor: grab; background-color: #e9dff5; }
/* same cure as swipe view: boards next to the viewport get their own GPU layer so WebKit rasterizes them
   BEFORE the swipe exposes them (otherwise tile columns paint late and the dark frame shows through) */
.pz-page.warm .pz-board { will-change: transform; transform: translateZ(0); }
.pz-tile::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px rgba(61,50,80,.35); transition: box-shadow .4s; }
.pz-tile.lift { transition: none; z-index: 5; cursor: grabbing; }
.pz-tile.lift::before { box-shadow: inset 0 0 0 3px var(--ink); }
.pz-tile.bump { animation: pz-bump .18s ease; }
@keyframes pz-bump { 50% { transform: var(--tx) scale(.94); } }
.pz-board.solved .pz-tile::before { box-shadow: inset 0 0 0 0 transparent; }
.pz-board.solved .pz-tile { outline: 0.5px solid transparent; background-clip: border-box; } /* belt and braces against sub-pixel seams */
.pz-board.solved .pz-tile { transition: transform .35s ease; }
.pz-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 6; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); background-size: 250% 100%; }
.pz-board.solved .pz-shine { animation: pz-shine 1.1s .15s ease-out both; }
@keyframes pz-shine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -120% 0; } }
/* solved popup ("pill stack"): big XP floating over the photo + two pills, no card */
.pz-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.4); opacity: 0; pointer-events: none; z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pz-badge .pzb-xp { font-size: 40px; font-weight: 900; letter-spacing: -1.5px; color: #fff; text-shadow: 0 2px 0 var(--ink), 0 6px 18px rgba(61,50,80,.45); line-height: 1; }
.pz-badge .pzb-pill { font-size: 12px; font-weight: 800; padding: 7px 16px; border-radius: 99px; background: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; line-height: 1.25; }
.pz-badge .pzb-pill.mint { background: var(--mint); padding: 8px 18px; }
.pz-badge .pzb-pill.mint small { display: block; font-size: 11px; font-weight: 700; color: #4b3f5c; margin-top: 1px; }
.pz-board.solved .pz-badge { animation: pz-pop .6s .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pz-pop { to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.pz-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.pz-burst i { position: absolute; bottom: -40px; font-style: normal; opacity: 0; animation: td-float 2.6s ease-out both; }
.pz-wm { position: absolute; left: 12px; bottom: 10px; font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #fff; opacity: .55; z-index: 4; pointer-events: none; }
.pz-hint { font-size: 12px; font-weight: 800; color: #6b5b7b; text-align: center; min-height: 18px; }
.pz-hint b { color: var(--ink); }
.pz-hint.go { color: var(--ink); animation: pz-pulse 1.4s ease-in-out infinite; }
@keyframes pz-pulse { 50% { opacity: .55; } }
.pz-board.locked .pz-lockbg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(14px) saturate(1.2); transform: scale(1.1); }
.pz-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 6; text-align: center; padding: 20px; }
.pz-lock p { margin: 0; font-weight: 800; font-size: 13px; color: var(--ink); background: #fffd; padding: 6px 12px; border-radius: 99px; }
.pz-lock small { font-weight: 700; color: #fff; text-shadow: 0 1px 6px #0008; }
.pz-reveal { border: 3px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); position: relative; overflow: hidden; background-size: cover; background-position: center; }
.pz-reveal .chip { position: absolute; top: 12px; left: 12px; }
.pz-nav { position: absolute; top: 45%; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; box-shadow: 2px 2px 0 var(--ink); font-size: 20px; font-weight: 900; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 8; }
.pz-nav.l { left: -6px; } .pz-nav.r { right: -6px; }
@media (hover: hover) and (min-width: 700px) { .pz-nav { display: flex; } }
.pz-dots { display: flex; gap: 5px; justify-content: center; padding: 6px 0 2px; flex-wrap: wrap; }
.pz-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9bdd6; }
.pz-dots i.done { background: var(--mint); border: 1.5px solid var(--ink); } .pz-dots i.lock { background: var(--butter); border: 1.5px solid var(--ink); }
.pz-dots i.on, .pz-dots i.on.done, .pz-dots i.on.lock { background: var(--ink); border-color: var(--ink); transform: scale(1.25); }
.pz-dots i { transition: transform .15s ease, background .15s ease; }
.p-actions .act.pz { font-size: 18px; }
.p-actions .act.pz.done { filter: grayscale(0); opacity: .9; }
.v-item .v-puzzle { position: absolute; top: 6px; left: 6px; font-size: 13px; background: var(--lilac); border: 2px solid var(--ink); border-radius: 8px; padding: 0 4px; z-index: 3; }
.v-item .v-chip + .v-puzzle { top: 30px; left: 6px; }
.vault-folders .puzzle-folder { background: #f6f0ff; border-color: var(--lav); }
.vault-folders .puzzle-folder.on { background: var(--lilac); border-color: var(--ink); }
body.on-puzzles #sub-hero, body.on-puzzles #sub-strip { display: none !important; }
@media (max-width: 520px) { #puzzles .screen-sub { display: none; } #puzzles .screen-title { font-size: 20px; } .pz-top { margin-bottom: 4px; } }
/* puzzles full-screen mode: the screen becomes a fixed layer over everything, like swipe view */
.pz-btn { padding: 6px 11px; font-size: 11px; }
.pz-close { display: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; box-shadow: 2px 2px 0 var(--ink); font-size: 22px; line-height: 1; font-weight: 900; color: var(--ink); cursor: pointer; padding: 0 0 3px; font-family: inherit; }
body.pz-full { overflow: hidden; }
body.pz-full #puzzles { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, #fbe4ee, #ece2fb 55%, #dff5ee); padding: calc(10px + env(safe-area-inset-top)) 12px calc(6px + env(safe-area-inset-bottom)); }
body.pz-full #puzzles .screen-title { font-size: 20px; } body.pz-full #puzzles .screen-sub { display: none; }
body.pz-full .pz-top { margin-bottom: 4px; }
body.pz-full .pz-close { display: inline-flex; align-items: center; justify-content: center; }
body.pz-full #pz-fullbtn { display: none; }
body.pz-full .pz-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.pz-full #pz-pager { flex: 1; min-height: 0; }
body.pz-full .pz-page { justify-content: center; }
body.pz-full .pz-nav { top: 50%; }
.pz-done { position: absolute; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px calc(10px + 0px); z-index: 7; background: linear-gradient(transparent, rgba(16,12,26,.55)); }
.pz-board.solved .pz-done { display: flex; }
.pz-board.was .pz-shine, .pz-board.was .pz-badge { animation: none !important; opacity: 0; }
.pz-board.solved .pz-wm { bottom: 54px; }
.pz-stats { width: 100%; justify-content: center; }
.pz-controls { justify-content: center; }
.pz-top { justify-content: center; text-align: center; }
.pz-xp { background: var(--gold); }
.pz-done { justify-content: center; }
.pz-badge { pointer-events: none; cursor: pointer; }
.pz-board.solved:not(.hide-badge) .pz-badge { pointer-events: auto; } /* tappable only while it's actually showing */
.pz-board.solved.hide-badge .pz-badge { animation: pz-pop-out .6s cubic-bezier(.2,1.4,.4,1) both; pointer-events: none; }
@keyframes pz-pop-out { from { opacity: 1; transform: translate(-50%,-50%) scale(1); } to { opacity: 0; transform: translate(-50%,-50%) scale(.4); } }
/* nudge toward full screen: a slow, gentle pulse, always on */
#pz-fullbtn { animation: pz-fullpulse 2.2s ease-in-out infinite; }
@keyframes pz-fullpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { #pz-fullbtn { animation: none; } }
.pay-bin { display: flex; align-items: center; gap: 10px; background: var(--lilac); }
.pay-bin span { flex: 1; }
.pay-fail { background: var(--lilac); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; line-height: 1.4; }
.pay-fail p { margin: 0; font-weight: 700; }
.pay-fail .a-row { gap: 8px; flex-wrap: wrap; }
.pay-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 12px; font-weight: 700; color: #6b5b7b; }
/* password fields: small show / hide eye inside the field */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 48px !important; }
.pw-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; font-size: 17px; line-height: 1; cursor: pointer; opacity: .55; padding: 0; margin: 0; }
.pw-eye:hover, .pw-eye.on { opacity: 1; }
.pw-eye.on { background: var(--butter); }
.gate-card .pw-wrap { margin-bottom: 12px; } .gate-card .pw-wrap input { margin-bottom: 0; }

/* admin card funnel: collapsed by default (header toggles; choice remembered) */
#card-funnel.cf-collapsed .cf-inner, #card-funnel.cf-collapsed #cf-days, #card-funnel.cf-collapsed .au-export { display: none; }
#card-funnel.cf-collapsed .au-bar { margin-bottom: 0 !important; }
.cf-caret { display: inline-block; transition: transform .15s; }
#card-funnel:not(.cf-collapsed) .cf-caret { transform: rotate(90deg); }

/* ---- candy pill in the header (between streak and level) ---- */
.candy-pill { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; font-size: 11px; font-weight: 800; color: var(--ink); white-space: nowrap; cursor: pointer; }
.candy-pill b { font-weight: 900; }
.candy-pill.locked { opacity: .45; }
.candy-pill.bump { animation: bump .5s; }
/* "or pay in candy" next to a PPV unlock */
.candy-btn { font-family: inherit; font-size: 12px; font-weight: 900; color: var(--ink); background: var(--pink); border: 2px solid var(--ink); border-radius: 99px; padding: 8px 12px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; margin-left: 8px; }
.candy-btn.short { opacity: .55; }
.candy-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }