/* ============================================================================
   Design tokens.

   No webfont anywhere. The screen surface runs on a Smart TV whose connection
   may be poor and whose browser is old; blocking first paint on fonts.google.com
   to gain a typeface nobody reads from a sofa is a bad trade. The system stack
   is made to look chosen rather than defaulted through weight, tracking and
   optical sizing instead.
   ========================================================================= */

:root {
  /* Surfaces, as elevation levels rather than one flat "panel". A page where
     every box has the same background cannot show what matters most. */
  --bg: #0a0c10;
  --surface: #12161e;
  --surface-2: #1a1f2a;
  --line: #232a36;
  --line-soft: #1a1f29;

  --text: #f2f5f9;
  --muted: #8a94a8;
  --dim: #5d6779;

  /* Semantic, not decorative. Blue is the thing to do next, green is money,
     rose is destructive. An earlier palette used green for success, for the
     buy button and for the host badge at once, so the colour said nothing. */
  --brand: #4da3ff;
  --brand-ink: #04121f;
  --brand-soft: rgba(77, 163, 255, .14);
  --money: #3ddc84;
  --money-ink: #04210f;
  --money-soft: rgba(61, 220, 132, .12);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .12);

  /* Kept as aliases so nothing that referenced the old names breaks. */
  --panel: var(--surface);
  --accent: var(--brand);
  --ok: var(--money);
  --err: var(--danger);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, .7);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 50px -20px rgba(77, 163, 255, .35);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, a { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

/* ---------- wordmark ----------
   A product has a name. Its absence was the single loudest signal that this
   was a prototype: every surface was an untitled web page. The mark is drawn
   in CSS, so it costs no request and stays sharp on a 4K panel. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}
.brand-mark {
  position: relative;
  width: 1.1em;
  height: 1.1em;
  border-radius: .28em;
  background: var(--brand);
  flex: none;
}
/* A second plane behind the first: a screen, and something shared onto it. */
.brand-mark::after {
  content: "";
  position: absolute;
  right: -.26em;
  bottom: -.26em;
  width: .72em;
  height: .72em;
  border-radius: .2em;
  background: var(--money);
  box-shadow: -.12em -.12em 0 .12em var(--bg);
}
.brand-sub {
  color: var(--dim);
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- landing ---------- */
.landing {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  gap: 4px;
}
.landing .brand { margin-bottom: 26px; font-size: 19px; }
.landing h1 {
  font-size: clamp(28px, 7vw, 36px);
  font-weight: 650;
  letter-spacing: -.025em;
  margin-bottom: 12px;
}
.landing p {
  color: var(--muted);
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 34ch;
}

.btn {
  display: inline-block;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 16px 38px;
  border: none;
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ============================================================================
   SCREEN  -  the TV surface. Sized in vh so it scales with the panel rather
   than with a phone's idea of a pixel.
   ========================================================================= */

.screen { height: 100%; display: flex; flex-direction: column; }

/* Empty state. The single most-looked-at surface in the product: a room full
   of people face it for minutes. Its only job is getting the QR scanned, so
   nothing competes - but flat black with a code on it reads as a debug page,
   and a code that looks unfinished is a code people hesitate to scan. */
.hero {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  text-align: center;
}
/* Ambient depth so the background is not a void. Pure CSS, no image request. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60vh 60vh at 50% 38%, rgba(77, 163, 255, .10), transparent 70%),
    radial-gradient(50vh 50vh at 50% 100%, rgba(61, 220, 132, .06), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero .brand {
  position: absolute;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.4vh;
}

.hero-qr {
  background: #fff;
  padding: 2.2vh;
  border-radius: 2vh;
  box-shadow: var(--shadow-glow);
}
.hero-qr img { display: block; width: 46vh; height: 46vh; }

.hero-label {
  margin-top: 4vh;
  font-size: 4.4vh;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.hero-url {
  margin-top: 1.6vh;
  font-size: 2.4vh;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.hero-note {
  margin-top: 1.4vh;
  font-size: 2.1vh;
  color: var(--dim);
}

/* Reserved sponsor slot. Empty on purpose - see the product spec. */
.hero-banner {
  margin-top: 4vh;
  width: min(84vw, 96vh);
  height: 11vh;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* End of the party: the screen stops taking photos and starts giving them back. */
.closed .hero-qr { background: #fff; }
.closed::before {
  background: radial-gradient(60vh 60vh at 50% 42%, rgba(61, 220, 132, .10), transparent 70%);
}

/* Populated state: the QR shrinks into a bar so photos get the screen. */
.screen-header {
  display: flex;
  align-items: center;
  gap: 2.4vh;
  padding: 2vh 3vw;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
.header-qr {
  background: #fff;
  padding: .9vh;
  border-radius: 1vh;
  flex: none;
  box-shadow: var(--shadow-1);
}
.header-qr img { display: block; width: 13vh; height: 13vh; }

/* Same code, same size as .header-qr - this is not the place to shrink it and
   find out later it was no longer scannable from across a room. */
.lb-qr {
  position: absolute;
  top: 3vh;
  left: 3vh;
  background: #fff;
  padding: .9vh;
  border-radius: 1vh;
  box-shadow: var(--shadow-1);
  z-index: 1;
}
.lb-qr img { display: block; width: 13vh; height: 13vh; }

.header-text { min-width: 0; }
.join-label {
  font-size: 1.8vh;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
}
.join-url {
  margin-top: .7vh;
  font-size: 3.2vh;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.header-meta {
  margin-left: auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5vh;
}
.counter {
  font-size: 2.6vh;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.new-screen {
  font-size: 1.7vh;
  color: var(--dim);
  text-decoration: none;
}
.new-screen-btn {
  background: none;
  border: none;
  font: inherit;
  color: var(--brand);
  cursor: pointer;
  padding: 0;
}

.wall {
  flex: 1;
  padding: 2vh 2vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-rows: 24vh;
  grid-gap: 1.4vh 1.2vw;
  align-content: start;
  overflow: hidden;
}

/* Tiles are focusable buttons: a TV has no pointer, only a D-pad. */
.tile {
  border: none;
  padding: 0;
  border-radius: 1.2vh;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sized to read from a sofa, not from a desk. */
.tile:focus {
  outline: .5vh solid var(--brand);
  outline-offset: .3vh;
  transform: scale(1.03);
}
.tile.enter { animation: pop .45s cubic-bezier(.2, .9, .3, 1.2); }

@keyframes pop {
  0% { opacity: 0; transform: scale(.86); }
  100% { opacity: 1; transform: scale(1); }
}

.status {
  position: fixed;
  right: 14px;
  bottom: 12px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--dim);
}
.status.bad { color: var(--danger); }

/* ---------- slideshow ----------
   Lays out by shape: one landscape full width, or three portraits abreast.
   A 9:16 photo contained in a 16:9 stage uses a quarter of the display, and
   phone photos are mostly portrait. */
.lightbox {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/* The current photo again, scaled to cover and blurred past recognition, so
   leftover space reads as design rather than as a dead screen. Uses the 800px
   derivative: a second full-size decode would buy nothing. */
.lb-backdrop {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.12);
  filter: blur(40px) brightness(.4) saturate(1.2);
  pointer-events: none;
}
.lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4vw;
  width: 96vw;
  /* 92vh, not 80: the control bar is an absolutely positioned overlay and
     never needed the room that was being reserved for it. */
  height: 92vh;
}
.lb-slot {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: .6vh;
  box-shadow: 0 2vh 6vh -2vh rgba(0, 0, 0, .8);
}
/* 3 x 9:16 = 1.69 against the screen's 1.78, so three fill it almost exactly. */
.lb-stage.triptych .lb-slot { max-width: 31vw; max-height: 88vh; }
.lb-stage.triptych .lb-slot.is-current {
  max-height: 92vh;
  box-shadow: 0 0 0 .4vh rgba(77, 163, 255, .55), 0 2vh 6vh -2vh rgba(0, 0, 0, .8);
}

.lightbox-bar {
  position: absolute;
  bottom: 4vh;
  display: flex;
  align-items: center;
  gap: .4vh;
  background: rgba(12, 15, 20, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-pill);
  padding: 1vh 1.4vh;
}
.lb-btn {
  border: none;
  background: none;
  color: var(--text);
  font-size: 3.4vh;
  line-height: 1;
  width: 6.4vh;
  height: 6.4vh;
  border-radius: 50%;
  cursor: pointer;
  transition: background .12s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, .08); }
.lb-btn:focus { outline: .4vh solid var(--brand); outline-offset: .2vh; }
.lb-count {
  font-size: 2.2vh;
  color: var(--muted);
  padding: 0 1.6vh;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lb-remove { font-size: 2.8vh; }
.lb-close { font-size: 4vh; }

.lightbox-hint {
  position: absolute;
  bottom: 1.2vh;
  color: var(--dim);
  font-size: 1.7vh;
  letter-spacing: .02em;
}

/* ---------- host handover ----------
   Deliberately not the empty state's treatment: this QR is on screen for two
   minutes on purpose and must never be mistaken for the join code. */
.host-panel {
  background: rgba(6, 8, 12, .97);
  gap: 2vh;
}
.host-panel .hero-qr { padding: 2vh; }
.host-panel .hero-qr img { width: 38vh; height: 38vh; display: block; }
.host-panel .hero-label { font-size: 3.2vh; }
.host-panel .lb-close { position: absolute; top: 3vh; right: 3vw; }

/* ============================================================================
   PHONE  -  share, download and claim
   ========================================================================= */

.share {
  min-height: 100%;
  padding: 22px 20px 64px;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* App bar. Gives every phone surface the same head, which is most of what
   separates "a product" from "a page that happens to work". */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 4px;
}
.appbar-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.share h1 {
  font-size: 27px;
  font-weight: 650;
  letter-spacing: -.028em;
  margin-bottom: 7px;
}
.share .sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 26px;
}

/* ---------- primary action ---------- */
.pickers { display: grid; grid-gap: 12px; }
.picker {
  display: block;
  position: relative;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-align: center;
  padding: 20px;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(77, 163, 255, .8);
  transition: transform .12s ease;
}
.picker:active { transform: scale(.985); }
.picker-icon { margin-right: 8px; }
.picker-alt { background: var(--surface-2); color: var(--text); box-shadow: none; }
.picker input { display: none; }

/* ---------- acceptable use ----------
   Framed as information rather than as a legal wall: it has to be read by
   someone standing up at a party, and a grey slab is a slab people tap past. */
.terms {
  margin-bottom: 20px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.terms-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.015em;
  margin-bottom: 10px;
}
.terms-body {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.terms-body strong { color: var(--text); font-weight: 600; }
.terms-btn {
  margin-top: 8px;
  width: 100%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  padding: 15px 14px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
}
.terms-btn:disabled { opacity: .55; }

/* ---------- commerce ----------
   Green is money and only money. Blue is the next thing to do. */
.paywall {
  margin-top: 26px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.paywall-title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.paywall-sub { margin-top: 7px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.paywall-btn {
  margin-top: 18px;
  width: 100%;
  background: var(--money);
  color: var(--money-ink);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  padding: 17px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(61, 220, 132, .8);
  transition: transform .12s ease;
}
.paywall-btn:active { transform: scale(.985); }
.paywall-note { margin-top: 14px; color: var(--dim); font-size: 13px; line-height: 1.5; }

/* Both offers at once rather than one repeated: a second prompt after a top-up
   runs out converts worse and reads as a funnel. Side by side it is a choice. */
.tiers { margin-top: 18px; display: grid; grid-gap: 10px; }
.tier {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 16px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  transition: transform .12s ease;
}
.tier:active { transform: scale(.99); }
.tier-main { font-size: 16.5px; font-weight: 650; letter-spacing: -.012em; }
.tier-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.tier-price { font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tier.tier-lead {
  background: var(--money);
  border-color: var(--money);
  color: var(--money-ink);
  box-shadow: 0 6px 18px -8px rgba(61, 220, 132, .7);
}
.tier.tier-lead .tier-sub { color: rgba(4, 33, 15, .72); }
.tier:disabled { opacity: .55; cursor: default; transform: none; }

/* A tester must never be left believing they were charged. */
.sim-note {
  margin: 14px 0 22px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  background: var(--money-soft);
  border: 1px solid rgba(61, 220, 132, .28);
  color: var(--money);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ---------- feedback ---------- */
.progress { margin-top: 22px; font-size: 16px; min-height: 24px; line-height: 1.45; }
.progress.ok { color: var(--money); font-weight: 600; }
.progress.bad { color: var(--danger); }

.bar {
  margin-top: 14px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
  display: none;
}
.bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--brand);
  transition: width .25s ease;
}
/* The width only moves once per file, and a large photo can sit unchanged for
   several seconds while it's processed server-side - this is what shows the
   wait is alive rather than stuck. */
.bar.busy span { animation: bar-pulse 1.1s ease-in-out infinite; }
@keyframes bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.thumbs { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 8px; }
.thumbs img { width: 100%; height: 76px; object-fit: cover; border-radius: var(--r-sm); opacity: .45; }
.thumbs img.done { opacity: 1; }

/* ---------- section heads ---------- */
.mine { margin-top: 30px; }
.mine-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.mine-head > span:first-child {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.015em;
}
.mine-hint { font-size: 12.5px; color: var(--dim); white-space: nowrap; }
.mine-note { margin-top: 12px; color: var(--dim); font-size: 12.5px; line-height: 1.55; }

.mine-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }
.mine-tile { position: relative; }
.mine-tile img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}
.mine-tile.removing { opacity: .35; }
/* A photo the host takes down is labelled, not vanished: silently disappearing
   reads as "my upload failed". */
.mine-tile.removed img { opacity: .28; filter: grayscale(1); }
.mine-del, .host-del {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(8, 10, 14, .85);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mine-flag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4px 6px;
  background: rgba(8, 10, 14, .82);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: 10.5px;
  color: var(--muted);
  text-align: center;
}

/* ---------- host controls on the phone ----------
   They live here rather than on the TV because picking one tile out of a wall
   with a D-pad is painful, and a phone's storage is not wiped by a television. */
.host-tools { margin-top: 30px; }
.host-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }
.host-tile { position: relative; }
.host-tile img {
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  display: block;
}
.host-tile.removing { opacity: .35; }

.host-end {
  margin-top: 18px;
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  padding: 13px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .12s ease;
}
.host-end.armed {
  background: var(--danger);
  border-color: var(--danger);
  color: #2a0808;
  font-weight: 650;
}
.host-end:disabled { opacity: .5; }

/* Reachable throughout, quiet during the party: someone leaving early still
   wants the photos. */
.share-foot {
  display: block;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 14.5px;
  text-decoration: none;
  text-align: center;
}

/* ---------- taking photos home ----------
   Every photo of the night is shown. Only the full-resolution file is gated,
   so the grid is a browsable set rather than a teaser: three can be taken for
   nothing, and that is how someone finds out the rest is worth buying. */
.dl-all {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 16px;
  padding: 15px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.012em;
  text-decoration: none;
}
.dl-all-size { color: var(--dim); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }

.dl-grid { margin-top: 4px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }
.dl-tile {
  display: block;
  position: relative;
  border: none;
  padding: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  line-height: 0;
  background: none;
  cursor: pointer;
}
.dl-tile img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  display: block;
  transition: opacity .18s ease, filter .18s ease;
}
.dl-tile.is-pickable img { opacity: .82; }
.dl-tile.is-pickable:active img { opacity: 1; }
/* Picks spent. Dimmed rather than hidden - the photo has to stay visible for
   the offer beside it to mean anything. */
.dl-tile.is-locked img { opacity: .34; filter: saturate(.5); }
.dl-tile.is-picked, .dl-tile.is-mine { outline: 2px solid var(--money); outline-offset: -2px; }

.dl-badge {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--money);
  color: var(--money-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
}

/* ---------- what is on the screen, and reporting it ----------
   Every guest sees this, not only the host: a report button a guest cannot
   reach is not a safety control. */
.onscreen { margin-top: 30px; }
.onscreen-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; }
.onscreen-tile {
  position: relative;
  display: block;
  border: none;
  padding: 0;
  background: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
}
.onscreen-tile img { width: 100%; height: 96px; object-fit: cover; display: block; }
.onscreen-tile::after {
  content: "\2691";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(8, 10, 14, .8);
  color: var(--muted);
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}
/* Already taken down. Shown to the host so there is something to review. */
.onscreen-tile.is-hidden img { opacity: .25; filter: grayscale(1); }
.onscreen-tile.is-hidden::after { content: "\2691"; background: var(--danger); color: #2a0808; }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(4, 6, 10, .74);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}
.sheet-card {
  width: 100%;
  max-width: 520px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-2);
}
.sheet-title { font-size: 18px; font-weight: 650; letter-spacing: -.018em; }
.sheet-sub { margin-top: 6px; color: var(--muted); font-size: 13.5px; }
.sheet-options { margin-top: 16px; display: grid; grid-gap: 7px; }
.sheet-opt {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 15px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
/* The reasons that cannot be undone read differently from the ones that can. */
.sheet-opt.is-severe { border-color: rgba(255, 107, 107, .4); color: #ffc2c2; }
.sheet-cancel {
  margin-top: 14px;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  padding: 12px;
  cursor: pointer;
}
.host-restore {
  position: absolute;
  left: 4px;
  bottom: 4px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
}

/* Picking a few rather than taking the night. Off by default: most people who
   have paid want everything, and a grid that opens in selection mode makes the
   common case two taps instead of one. */
/* A full-width secondary action under the primary one. It was a small muted
   pill in the grid header, which is a place nobody looks. */
.dl-select {
  display: block;
  width: 100%;
  margin: -6px 0 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 13px;
  cursor: pointer;
}
.dl-select.is-on { background: none; border-color: transparent; color: var(--muted); font-weight: 400; }

.dl-tile.is-choosable img { opacity: .55; }
.dl-tile.is-chosen img { opacity: 1; }
.dl-tile.is-chosen { outline: 3px solid var(--brand); outline-offset: -3px; }
.dl-check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(8, 10, 14, .55);
  border: 2px solid rgba(255, 255, 255, .55);
  color: var(--brand-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.dl-tile.is-chosen .dl-check { background: var(--brand); border-color: var(--brand); }