/* A Camera Club With No Cameras — Surface (implementation).
   Darkroom x editorial x Wallet pass. Near-black tonal base, white/silver highlights,
   color only as the per-roll --acc. Canonical: docs/06-design-system.md.
   Reference: docs/brand/mock/. Replaces the retired amber-minimal surface (2026-06-27). */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=Bebas+Neue&display=swap');

:root{
  /* base (colorless) */
  --bg:#09090b;
  --ink:#E8E9EC;                 /* cool off-white, primary text */
  --dim:#80828c;                 /* secondary text / labels */
  --hair:rgba(232,233,236,.12);  /* rules / dividers */
  --surface:linear-gradient(160deg,#1b1c20 0%,#121316 60%,#0e0f11 100%); /* card */
  --surface-peek:#16171b;        /* the card layer stacked behind */
  --glass-bg:rgba(255,255,255,.055);
  --glass-bd:rgba(255,255,255,.11);
  --solid-bg:#E8E9EC;            /* primary button face (white solid) */
  --solid-ink:#0b0b0d;

  /* per-roll accent — the only color. Default White = monochrome. JS overrides --acc per roll. */
  --acc:#c9cdd3;

  /* compatibility aliases so any screen not yet migrated still resolves to the new palette */
  --warm:var(--ink);
  --aim:var(--acc);
  --faint:var(--hair);
  --line:232,233,236;            /* white hairline (was amber) */
  --amber:232,233,236;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--bg);}
body{
  color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* safelight: a soft spot of the roll's color bleeding from the top */
  background:radial-gradient(120% 64% at 50% -8%,
    color-mix(in srgb, var(--acc) 14%, #0c0c0e) 0%, #0a0a0c 46%, #08080a 100%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.hidden,[hidden]{display:none!important;}

/* ---------- type helpers ---------- */
.bebas,h1{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.012em;line-height:.9;text-transform:uppercase;}
h1{font-size:42px;margin-top:30px;}
.lab{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.dim{color:var(--dim);}
.lede{margin-top:14px;font-size:13px;line-height:1.5;color:var(--dim);max-width:300px;}

/* ---------- page wrap ---------- */
.wrap{max-width:440px;margin:0 auto;min-height:100%;
  padding:calc(var(--safe-t) + 40px) 24px calc(var(--safe-b) + 30px);
  display:flex;flex-direction:column;}
.foot{margin-top:auto;padding-top:30px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}

/* ---------- brand / nav ---------- */
.brand{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.logo{font-family:Archivo;font-size:12px;font-weight:600;letter-spacing:.3em;color:var(--ink);white-space:nowrap;}
.sess{font-size:9px;font-weight:500;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%;text-align:right;}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 16px;border-radius:99px;
  background:var(--glass-bg);border:1px solid var(--glass-bd);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,233,236,.92);}
.pill.dot{width:38px;padding:0;justify-content:center;}

/* status chip — the roll's --acc, pill outline */
.chip{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);border-radius:99px;padding:5px 10px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.chip.muted{color:var(--dim);border-color:var(--hair);}

/* ---------- wordmark (liquid Anton) ---------- */
.wm svg{display:block;height:auto;}

/* ---------- buttons / cushions ---------- */
.btn,.cush{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;padding:0 20px;
  border-radius:14px;background:var(--glass-bg);border:1px solid var(--glass-bd);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 26px rgba(0,0,0,.32);
  color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.02em;text-align:center;}
.cush{justify-content:space-between;}            /* console actions: label left, glyph right */
.btn .a,.cush .a{color:rgba(232,233,236,.5);font-weight:400;}
.btn.solid,.cush.primary{background:var(--solid-bg);border-color:var(--solid-bg);color:var(--solid-ink);}
.btn.solid .a,.cush.primary .a{color:rgba(11,11,13,.55);}
.btn.ghost{background:rgba(255,255,255,.045);}
.btn.danger{background:transparent;border-color:color-mix(in srgb,var(--acc) 50%,transparent);color:var(--acc);box-shadow:none;}
.btn:active,.cush:active{transform:translateY(1px);filter:brightness(1.12);}
.btn:disabled,.cush:disabled{opacity:.4;}
.btn.inline{width:auto;padding:0 24px;display:inline-flex;}
.actions,.stack-actions{margin-top:22px;display:flex;flex-direction:column;gap:11px;}
.link{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}

/* ---------- Wallet pass card ---------- */
.stack{position:relative;margin:8px 2px 0;}
.peek{position:absolute;left:14px;right:14px;top:-12px;height:120px;border-radius:24px;
  background:var(--surface-peek);opacity:.6;box-shadow:0 18px 40px rgba(0,0,0,.5);}
.card{position:relative;border-radius:24px;padding:24px;color:var(--ink);background:var(--surface);
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.08) inset;}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 80% -10%, color-mix(in srgb,var(--acc) 24%,transparent), transparent 55%);}
.card>*{position:relative;}
.ctop{display:flex;justify-content:space-between;align-items:flex-start;}
.cname{margin:20px 0 18px;font-family:'Bebas Neue',sans-serif;font-size:36px;font-weight:400;letter-spacing:.012em;
  line-height:.9;text-transform:uppercase;color:var(--ink);}
.cfoot{display:flex;align-items:center;gap:14px;border-top:1px solid var(--hair);padding-top:16px;}
.qrthumb{width:62px;height:62px;border-radius:9px;background:#eef0f3;padding:6px;box-sizing:border-box;flex:none;}
.qrthumb img{width:100%;height:100%;display:block;image-rendering:pixelated;}
.reflines .r1{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,233,236,.95);}
.reflines .r2{margin-top:5px;font-size:11px;letter-spacing:.04em;color:var(--dim);}

/* tagline rulebar */
.tag{margin-top:16px;text-align:center;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(232,233,236,.45);}
.tag b{color:var(--acc);font-weight:600;}

/* ---------- create form ---------- */
.card.form{background:none;border:0;box-shadow:none;padding:0;margin-top:24px;display:flex;flex-direction:column;gap:18px;overflow:visible;}
.card.form::after{display:none;}
label{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:8px;}
input,select{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(232,233,236,.22);color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:500;padding:8px 0;border-radius:0;-webkit-appearance:none;appearance:none;}
input::placeholder{color:rgba(232,233,236,.32);}
input:focus,select:focus{outline:0;border-color:color-mix(in srgb,var(--acc) 70%,var(--ink));}
option{background:#16171b;color:var(--ink);}
.row{display:flex;gap:18px;}
.row>div{flex:1;}

/* accent swatches */
.swatches{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
.sw{width:26px;height:26px;border-radius:50%;position:relative;cursor:pointer;border:0;padding:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);}
.sw.sel{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink);}

.manifesto{margin:30px 0 4px;font-size:12px;line-height:1.7;letter-spacing:.02em;color:var(--dim);max-width:34ch;}

/* ---------- share / manage (console) ---------- */
.qrbox{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:14px;}
.qrbox img{width:210px;height:210px;background:#eef0f3;padding:10px;border-radius:10px;}
.joinlink{font-size:11px;letter-spacing:.04em;color:var(--dim);word-break:break-all;text-align:center;}
.stat{margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,233,236,.85);text-align:center;}
.note{font-size:11px;color:var(--dim);line-height:1.5;text-align:center;margin-top:6px;}

/* ---------- master room (rolls on this device) ---------- */
.rolllist{margin-top:24px;display:flex;flex-direction:column;gap:12px;}
.rollrow{position:relative;border-radius:18px;padding:18px;background:var(--surface);
  border:1px solid rgba(255,255,255,.07);overflow:hidden;}
.rollrow::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 100% 0%, color-mix(in srgb,var(--rc,var(--acc)) 22%,transparent), transparent 60%);}
.rollrow>*{position:relative;}
.rollrow .rr-top{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.rollrow .rr-name{font-family:'Bebas Neue',sans-serif;font-size:24px;font-weight:400;letter-spacing:.01em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rollrow .rr-state{display:inline-flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.rollrow .rr-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rc,var(--acc));box-shadow:0 0 8px var(--rc,var(--acc));}
.rollrow .rr-state.live{color:var(--acc);}
.rollrow .rr-meta{margin-top:8px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);}
.rollrow .rr-actions{margin-top:14px;display:flex;gap:9px;}
.rollrow .rr-actions a{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(232,233,236,.9);
  border:1px solid var(--hair);padding:8px 13px;border-radius:99px;min-height:34px;display:inline-flex;align-items:center;}
.rollrow.gone{opacity:.5;}
.rollrow .rr-forget{background:transparent;border:0;color:var(--dim);font-family:inherit;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;padding:4px 0;min-height:34px;}

/* ---------- gallery ---------- */
.darkroom{margin-top:40px;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:40px 0;justify-content:center;}
.darkroom .dot{width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 16px var(--acc);
  animation:pulse 2.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.darkroom h1{font-size:52px;margin:0;}
.darkroom p{font-size:13px;color:var(--dim);max-width:260px;line-height:1.5;}
.ghead{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--hair);padding-bottom:14px;margin-top:8px;}
.ghead .gname{font-family:'Bebas Neue',sans-serif;font-size:30px;font-weight:400;text-transform:uppercase;letter-spacing:.01em;}
.fade{margin-top:12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:7px;}
.fade::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);}
.grid{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.grid a,.grid .tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#15161a;border-radius:3px;
  opacity:0;transition:opacity .5s ease;}
.grid a.in{opacity:1;}
.grid img{width:100%;height:100%;object-fit:cover;display:block;}
.grid .hide{position:absolute;top:5px;right:5px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(9,9,11,.6);color:var(--ink);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.grid .hide:disabled{opacity:.4;}
/* host-only: star a frame into the public club river (top-left, opposite the hide control) */
.grid .star{position:absolute;top:5px;left:5px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(9,9,11,.55);color:rgba(232,233,236,.85);font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.grid .star[aria-pressed="true"]{color:var(--acc);}
.grid .star:disabled{opacity:.4;}
.grid a.starred{outline:2px solid color-mix(in srgb,var(--acc) 70%,transparent);outline-offset:-2px;}
/* review: an auto-moderation flag (dev task #3) — review these first. Bottom-left, clear of hide/star. */
.grid a.flagged{outline:2px solid rgba(214,53,60,.85);outline-offset:-2px;}
.grid .flag{position:absolute;bottom:5px;left:5px;z-index:2;min-width:24px;height:24px;padding:0 7px;border-radius:99px;
  background:rgba(214,53,60,.92);color:#fff;font-size:12px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;}
.grid a.masked img{opacity:.16;filter:grayscale(1);}
.grid a.masked::after{content:"Hidden";position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);pointer-events:none;}
@media (prefers-reduced-motion:reduce){.grid a{transition:none;opacity:1;}}

/* ---------- camera (old optical finder) ---------- */
.cam{position:fixed;inset:0;overflow:hidden;background:#0c0d10;touch-action:manipulation;user-select:none;-webkit-user-select:none;}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.62) contrast(1.02);}
/* safelight: a faint spot of the roll's color, the only tint in the finder */
.cam .glass{position:absolute;inset:0;background:radial-gradient(70% 52% at 50% 42%,
  color-mix(in srgb,var(--acc) 10%,transparent) 0%, transparent 62%);}
.cam .vig{position:absolute;inset:0;background:radial-gradient(116% 86% at 50% 46%, transparent 50%, rgba(0,0,0,.62) 100%);}
.cam .grain{position:absolute;inset:0;opacity:.045;pointer-events:none;mix-blend-mode:screen;}
.cam .top{position:absolute;top:calc(var(--safe-t) + 30px);left:26px;right:26px;}
/* reticle: corner brackets + center rangefinder patch are NEUTRAL WHITE (the colorless base);
   only the aim point inside the patch carries the roll's --acc. Decision 2026-06-27 (Masa). */
.ret{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:min(72vw,290px);aspect-ratio:3/4;max-height:60vh;}
.ret .cn{position:absolute;width:24px;height:24px;}
.ret .cn::before,.ret .cn::after{content:"";position:absolute;background:rgba(232,233,236,.5);}
.ret .cn::before{height:1px;width:24px;}
.ret .cn::after{width:1px;height:24px;}
.ret .cn.tl{top:0;left:0;} .ret .cn.tl::before{top:0;left:0;} .ret .cn.tl::after{top:0;left:0;}
.ret .cn.tr{top:0;right:0;} .ret .cn.tr::before{top:0;right:0;} .ret .cn.tr::after{top:0;right:0;}
.ret .cn.bl{bottom:0;left:0;} .ret .cn.bl::before{bottom:0;left:0;} .ret .cn.bl::after{bottom:0;left:0;}
.ret .cn.br{bottom:0;right:0;} .ret .cn.br::before{bottom:0;right:0;} .ret .cn.br::after{bottom:0;right:0;}
.ret .patch{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border:1px solid rgba(232,233,236,.45);}
.ret .patch::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:3px;border-radius:50%;background:var(--acc);box-shadow:0 0 6px var(--acc);}
@media (prefers-reduced-motion:no-preference){.ret .patch::after{animation:dotbreathe 3.4s ease-in-out infinite;}}
@keyframes dotbreathe{0%,100%{opacity:.74}50%{opacity:1}}
.ret.cap .patch::after{animation:dotcap .24s ease-out;}
.ret.cap .cn{animation:markcap .24s ease-out;}
@keyframes dotcap{
  0%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 6px var(--acc);}
  26%{transform:translate(-50%,-50%) scale(2.4);box-shadow:0 0 16px 3px var(--acc);}
  100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 6px var(--acc);}}
@keyframes markcap{0%{opacity:1}26%{opacity:.2}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .ret.cap .patch::after{animation:markcap .2s ease-out;}
  .ret.cap .cn{animation:markcap .2s ease-out;}
}
.readout{position:absolute;bottom:calc(var(--safe-b) + 150px);left:0;right:0;text-align:center;}
.readout .n{font-size:15px;font-weight:600;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;display:inline-block;}
.readout .n.wind{animation:wind .28s ease-out;}
@keyframes wind{0%{transform:translateY(-7px);opacity:0;}55%{opacity:1;}100%{transform:translateY(0);opacity:1;}}
@media (prefers-reduced-motion:reduce){.readout .n.wind{animation:none;}}
.readout .u{font-size:11px;letter-spacing:.22em;color:rgba(232,233,236,.5);text-transform:uppercase;margin-left:6px;}
.shutterbar{position:absolute;bottom:calc(var(--safe-b) + 52px);left:0;right:0;display:flex;justify-content:center;}
.shutter{width:74px;height:74px;border-radius:50%;border:1.5px solid rgba(232,233,236,.9);background:transparent;
  display:flex;align-items:center;justify-content:center;transition:transform .06s ease;}
.shutter::after{content:"";width:58px;height:58px;border-radius:50%;background:var(--ink);transition:width .07s,height .07s;}
.shutter:active{transform:scale(.96);}
.shutter:disabled{opacity:.3;}
.shutter.fire::after{width:46px;height:46px;}
.flash{position:absolute;bottom:calc(var(--safe-b) + 64px);right:18px;display:flex;align-items:center;justify-content:flex-end;gap:5px;
  min-width:44px;min-height:44px;padding:8px;background:transparent;border:0;font-size:9px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;}
.flash .b{font-size:13px;color:rgba(232,233,236,.62);}
.flash[aria-pressed="true"] .b{color:var(--acc);}
.sound{position:absolute;bottom:calc(var(--safe-b) + 64px);left:18px;display:flex;align-items:center;justify-content:flex-start;gap:5px;
  min-width:44px;min-height:44px;padding:8px;background:transparent;border:0;font-size:9px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;}
.sound .b{font-size:12px;color:rgba(232,233,236,.62);}
.sound[aria-pressed="true"] .b{color:var(--acc);}
.burst{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}
.burst.go{animation:burst .14s ease-out;}
@keyframes burst{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.burst.go{animation:none;}}
.cam .shutclose{position:absolute;inset:0;background:#050403;opacity:0;pointer-events:none;}
.cam .shutclose.go{animation:shutclose .17s ease-out;}
@keyframes shutclose{0%{opacity:0}26%{opacity:.94}48%{opacity:.5}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cam .shutclose.go{animation:shutclose-rm .14s linear;}}
@keyframes shutclose-rm{0%{opacity:0}45%{opacity:.55}100%{opacity:0}}

/* camera lock / "that's your roll" states */
.lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 40px;gap:14px;background:linear-gradient(rgba(9,9,11,.55),rgba(9,9,11,.82));}
.lock h2,.lock h1{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:46px;letter-spacing:.012em;line-height:.92;text-transform:uppercase;}
.lock p{font-size:13px;color:var(--dim);line-height:1.5;max-width:260px;}
.lock .cta{margin-top:12px;width:auto;padding:0 26px;}
.hostexit{position:absolute;z-index:5;top:calc(var(--safe-t) + 56px);left:14px;
  display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,233,236,.82);}

/* ---------- public club river (curated frames, time flows sideways) ---------- */
body.club{height:100%;overflow:hidden;display:flex;flex-direction:column;}
.river-head{padding:calc(var(--safe-t) + 24px) 24px 12px;display:flex;flex-direction:column;gap:8px;}
.river-head .wm svg{width:148px;height:auto;}
.river-head .sub{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.river{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(3,1fr);
  gap:8px;padding:10px 24px calc(var(--safe-b) + 22px);overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.river::-webkit-scrollbar{height:0;}
/* frames render as background images with pointer-events off: no right-click-save, no full-size
   click-through. Curated + ephemeral (they fade with the roll). True no-extraction is a later step. */
.rframe{position:relative;height:100%;aspect-ratio:3/4;border-radius:4px;flex:none;
  background:#15161a center/cover no-repeat;scroll-snap-align:start;pointer-events:none;
  user-select:none;-webkit-user-select:none;box-shadow:0 8px 24px rgba(0,0,0,.42);transition:opacity .6s ease;}
.river-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--dim);
  font-size:13px;line-height:1.6;padding:40px;max-width:320px;margin:auto;}