/* Snaparazzi Cam
   Host pages: "film box" - yellow cardboard, heavy black type, hard shadows.
   Guest page: "darkroom" - warm black, glowing LED counter, prints that develop. */

:root {
  --ink: #15120d;
  --char: #221d16;
  --yellow: #ffc21a;
  --yellow-hi: #ffd84a;
  --yellow-lo: #e9a400;
  --red: #e2321b;
  --red-lo: #9e1c0d;
  --cream: #f6eedb;
  --paper: #fffaf0;
  --led: #ff8a1f;
  --muted: #8f8571;
  --display: "Bowlby One", "Arial Black", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --mono: "VT323", "Courier New", monospace;
}

/* Every phone sees our designed colors: no "dark mode for web pages" inverting them (Chrome's auto dark
   mode, Samsung Internet's dark mode). The guest camera page is dark by design. Samsung Internet only
   leaves pages alone that answer prefers-color-scheme themselves, hence the (identical) dark rule. */
:root { color-scheme: only light; }
@media (prefers-color-scheme: dark) { :root { color-scheme: only light; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); line-height: 1.45; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ================================================================ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border: 3px solid var(--ink); border-radius: 12px;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: var(--paper); color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ink { background: var(--ink); color: var(--yellow); }
.btn-red { background: var(--red); color: #fff; }
.btn-ghost { background: transparent; }
.btn-xl { font-family: var(--display); font-weight: 400; font-size: 1.15rem; padding: 16px 26px; letter-spacing: .02em; }

/* ================================================================ host pages (film box) */
body.box-page {
  min-height: 100vh; color: var(--ink);
  background:
    repeating-linear-gradient(-45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 14px),
    radial-gradient(ellipse at 20% 0%, var(--yellow-hi), var(--yellow) 45%, var(--yellow-lo));
  background-attachment: fixed;
  padding: 20px 16px 60px;
}
.wrap { max-width: 620px; margin: 0 auto; }
.wrap.wide { max-width: 940px; }
.wrap.center { text-align: center; padding-top: 12vh; }
.back { display: inline-block; font-weight: 700; color: var(--ink); text-decoration: none; margin-bottom: 18px; }
.kicker { font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; margin: 0 0 6px; }
.title { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1; margin: 0 0 8px; }
.sub { margin: 0 0 22px; font-size: 1.05rem; }
.alert { background: var(--red); color: #fff; font-weight: 700; padding: 12px 16px; border-radius: 10px; border: 3px solid var(--ink); }
.alert.ok { background: var(--paper); color: var(--ink); }

.box {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px;
  padding: 22px; margin: 0 0 22px; box-shadow: 7px 7px 0 var(--ink);
  display: flex; flex-direction: column; gap: 16px;
}
.box h2 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; margin: 0; }
.box p { margin: 0; }
.hint { font-size: .9rem; color: #5b5242; }

/* form fields */
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field legend { font-weight: 700; font-size: .95rem; padding: 0; }
.field em { color: var(--red); font-style: normal; }
.field small { font-weight: 400; color: #6b6150; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 3px solid var(--ink); border-radius: 10px; background: #fff;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--red); outline-offset: 2px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; left: 0; top: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block; padding: 9px 16px; border: 3px solid var(--ink); border-radius: 999px;
  font-weight: 700; cursor: pointer; background: #fff; transition: transform .1s;
}
.chip input:checked + span { background: var(--ink); color: var(--yellow); transform: rotate(-2deg); }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.toggle { display: flex; align-items: center; gap: 12px; font-weight: 700; cursor: pointer; }
.toggle { position: relative; }
.toggle input { position: absolute; opacity: 0; left: 0; top: 0; width: 1px; height: 1px; }
.toggle-ui { flex: none; width: 52px; height: 30px; border-radius: 999px; border: 3px solid var(--ink); background: #fff; position: relative; transition: background .15s; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .15s; }
.toggle input:checked + .toggle-ui { background: var(--led); }
.toggle input:checked + .toggle-ui::after { transform: translateX(22px); }
.toggle input:focus-visible + .toggle-ui { outline: 3px solid var(--red); outline-offset: 2px; }
.toggle small { font-weight: 400; }

/* home */
.home { max-width: 980px; margin: 0 auto; padding-top: 6vh; }
.hero { position: relative; }
.mega {
  font-family: var(--display); font-weight: 400; margin: 0 0 18px;
  font-size: clamp(4.2rem, 20vw, 10rem); line-height: .82; letter-spacing: -.02em;
  color: var(--ink); text-shadow: 6px 6px 0 var(--red);
  animation: rise .7s cubic-bezier(.2,.9,.3,1.2) both;
}
.lead { max-width: 30em; font-size: 1.15rem; margin: 0 0 28px; animation: rise .7s .1s both; }
.hero .btn { animation: rise .7s .2s both; }
.how { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.how li { background: var(--ink); color: var(--cream); border-radius: 16px; padding: 22px; animation: rise .6s both; }
.how li:nth-child(1) { animation-delay: .3s; transform: rotate(-1deg); }
.how li:nth-child(2) { animation-delay: .4s; transform: rotate(.8deg); }
.how li:nth-child(3) { animation-delay: .5s; transform: rotate(-.5deg); }
.how b { font-family: var(--mono); font-size: 2.6rem; color: var(--led); line-height: 1; text-shadow: 0 0 10px rgba(255,120,20,.6); }
.how h3 { font-family: var(--display); font-weight: 400; margin: 6px 0; color: var(--yellow); }
.how p { margin: 0; color: #d9cfb9; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* host dashboard */
.secret { background: var(--ink); color: var(--cream); }
.secret h2 { color: var(--yellow); }
.secret .btn-ink { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 4px 4px 0 var(--red); }
.secret .btn-ghost { color: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 var(--red); }
.secret .hint { color: #d9cfb9; }
.secret.pulse { animation: pulse 1.2s 3; }
@keyframes pulse { 50% { box-shadow: 7px 7px 0 var(--ink), 0 0 0 8px rgba(226,50,27,.45); } }
.copy-row { display: flex; gap: 10px; }
.copy-row input {
  flex: 1; min-width: 0; font: 600 .9rem var(--body); padding: 12px; border-radius: 10px;
  border: 3px solid var(--ink); background: #fff; color: var(--ink);
}
.host-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 760px) { .host-grid { grid-template-columns: 1fr; } }
.host-grid .box { margin: 0; }
.qr-box .qr { width: 100%; max-width: 280px; align-self: center; background: #fff; border-radius: 10px; }
.btn-stack { display: flex; flex-direction: column; gap: 12px; }
.stats { display: flex; gap: 14px; }
.stats div { flex: 1; background: var(--ink); color: var(--cream); border-radius: 12px; padding: 14px; }
.stats b { display: block; font-family: var(--mono); font-size: 3rem; line-height: 1; color: var(--led); text-shadow: 0 0 10px rgba(255,120,20,.6); }
.stats span { font-size: .85rem; }

/* host dashboard: sections, sticky section links, grouped settings, sticky save bar */
.host-page .pulse { animation: pulse 1.2s 3; }
.alert-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.host-nav {
  position: sticky; top: 8px; z-index: 40; display: flex; gap: 4px; margin: 0 0 8px; padding: 5px;
  background: var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 rgba(21,18,13,.3);
  overflow-x: auto; scrollbar-width: none;
}
.host-nav::-webkit-scrollbar { display: none; }
.host-nav a {
  flex: 1 0 auto; text-align: center; padding: 9px 12px; border-radius: 999px; white-space: nowrap;
  color: var(--yellow); font-weight: 700; font-size: .92rem; text-decoration: none;
}
.host-nav a:hover, .host-nav a:focus-visible, .host-nav a.is-on { background: var(--yellow); color: var(--ink); outline: none; }
.host-nav .badge { font-size: .7rem; padding: 1px 7px; }
@media (max-width: 440px) { .host-nav .nav-ico { display: none; } .host-nav a { padding: 9px 8px; } }
.host-page .hint a { color: inherit; font-weight: 700; }
.host-section { scroll-margin-top: 72px; padding-top: 22px; }
.host-section > .box, .host-section > .host-grid, .host-section > .host-panels { margin-bottom: 22px; }
.section-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--display); font-weight: 400; font-size: clamp(1.45rem, 5vw, 1.8rem); line-height: 1.05;
}
.section-head b {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--yellow); font-family: var(--mono); font-weight: 400; font-size: 1.6rem;
}
.host-grid.one { grid-template-columns: 1fr; }
.host-panels > .box { margin: 0 0 22px; }
.host-panels > .box:last-child { margin-bottom: 0; }
.host-panels:empty { display: none; }
.all-set { background: var(--ink); color: var(--cream); animation: rise .5s both; }
.all-set h2 { color: var(--yellow); font-size: 1.5rem; }
.all-set .hint { color: #d9cfb9; }
.all-set-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.all-set-btns .btn { flex: 1 1 180px; }
.all-set .btn-ink { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 4px 4px 0 var(--red); }
.all-set .btn:not(.btn-ink):not(.btn-red) { border-color: var(--cream); box-shadow: 4px 4px 0 var(--red); }

.set-group { border: 3px solid var(--ink); border-radius: 14px; background: #fff; scroll-margin-top: 72px; }
.set-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 11px; -webkit-tap-highlight-color: transparent;
}
.set-group > summary::-webkit-details-marker { display: none; }
.set-group > summary::after {
  content: "+"; flex: none; margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 50%; font-weight: 700; font-size: 1.2rem; line-height: 1;
}
.set-group[open] > summary::after { content: "–"; background: var(--ink); color: var(--yellow); }
.set-group[open] > summary { border-bottom: 2px dashed #d8ccb1; border-radius: 11px 11px 0 0; }
.set-group > summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.setg-icon {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.35rem;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 10px;
}
.setg-title { display: flex; flex-direction: column; min-width: 0; }
.setg-title b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.15; }
.setg-title small { font-size: .85rem; color: #6b6150; overflow: hidden; text-overflow: ellipsis; }
.setg-body { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 16px; }
.set-group .games-fields > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.settings-box { padding-bottom: 0; }
.save-bar {
  position: sticky; bottom: 0; z-index: 30; margin: 0 -22px; padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  background: var(--paper); border-top: 3px solid var(--ink); border-radius: 0 0 15px 15px;
}
.save-bar .hint { margin-right: auto; }
@media (max-width: 520px) {
  .save-bar .hint { display: none; }
  .save-bar .btn { flex: 1; }
  .box { padding: 18px; }
  .save-bar { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
}

/* new-event flow: step dots, occasion cards, "ready to go" summary, advanced settings */
.step-dots { list-style: none; display: flex; gap: 8px; margin: 4px 0 16px; padding: 0; font-weight: 700; font-size: .9rem; }
.step-dots li { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 2px solid var(--ink); background: rgba(255,250,240,.6); }
.step-dots b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); font-size: .8rem; }
.step-dots .is-on { background: var(--ink); color: var(--yellow); }
.step-dots .is-on b { border-color: var(--yellow); }
.step-dots .is-done b { background: var(--ink); color: var(--yellow); }
.step-q { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.occasion-field { gap: 10px; }
.occasions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 2px; }
@media (min-width: 560px) { .occasions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.occasion { position: relative; }
.occasion input { position: absolute; opacity: 0; width: 1px; height: 1px; bottom: 0; left: 50%; }
.occasion span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px;
  padding: 14px 8px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; cursor: pointer;
  font-weight: 700; text-align: center; box-shadow: 4px 4px 0 var(--ink); transition: transform .1s, box-shadow .1s;
}
.occasion b { font-size: 2.1rem; line-height: 1; font-weight: 400; }
.occasion span:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.occasion input:checked + span { background: var(--ink); color: var(--yellow); transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--red); }
.occasion input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
.ready-head { display: flex; align-items: center; gap: 14px; }
.ready-emoji {
  flex: none; width: 64px; height: 64px; display: grid; place-items: center; font-size: 2.2rem;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 16px; transform: rotate(-4deg);
}
.ready-head h2 { font-size: 1.45rem; line-height: 1.1; }
.ready-name { margin-top: 4px !important; overflow-wrap: anywhere; }
.ready-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ready-list li { padding: 10px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; font-weight: 600; overflow-wrap: anywhere; }
.advanced { border-top: 2px dashed #d8ccb1; padding-top: 14px; }
.advanced > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 10px 16px; border: 3px solid var(--ink); border-radius: 999px; font-weight: 700; background: #fff;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary small { font-weight: 400; color: #6b6150; }
.advanced[open] > summary { background: var(--ink); color: var(--yellow); }
.advanced[open] > summary small { color: var(--cream); }
.advanced-body { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

/* ================================================================ printable table card */
body.card-page { margin: 0; background: #e9e4d8; padding: 20px; font-family: var(--body); color: var(--ink); }
.card-toolbar { display: flex; gap: 14px; align-items: center; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.table-card {
  width: min(100%, 4.6in); margin: 0 auto 24px; background: #fff; text-align: center;
  border: 4px solid var(--ink); border-radius: 20px; padding: 0 22px 18px; overflow: hidden;
  break-inside: avoid;
}
.tc-band {
  margin: 0 -22px 16px; padding: 10px 22px; background: var(--yellow); border-bottom: 4px solid var(--ink);
  display: flex; justify-content: space-between; font-family: var(--display); letter-spacing: .05em;
}
.tc-iso { background: var(--red); color: #fff; padding: 0 8px; border-radius: 4px; }
.table-card h1 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; margin: 0 0 4px; }
.tc-date { margin: 0; font-weight: 600; }
.tc-cta { font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin: 14px 0 6px; }
.tc-qr { width: 2.3in; height: 2.3in; }
.tc-steps { text-align: start; margin: 10px auto 8px; padding-inline-start: 1.4em; max-width: 3.4in; font-size: .95rem; }
.tc-steps li { margin: 3px 0; }
/* bilingual cards: the event's language under each English line, a smaller QR so it still fits */
.tc-cta-2 { margin: -4px 0 6px; font-size: .78rem; font-weight: 600; color: #4b4334; }
.tc-2 { display: block; font-size: .8rem; line-height: 1.25; color: #5b5242; }
.tc-2 b { font-weight: 700; }
.table-card.bilingual .tc-qr { width: 1.9in; height: 1.9in; }
.table-card.bilingual .tc-steps { font-size: .88rem; margin-top: 6px; max-width: 3.7in; }
.table-card.bilingual .tc-steps li { margin: 4px 0; }
.tc-url { font-size: .7rem; color: #6b6150; word-break: break-all; margin: 6px 0 0; }
@media print {
  /* Two cards must fit one Letter/A4 sheet: each card stays under ~5in tall. */
  @page { margin: .3in; }
  body.card-page { background: #fff; padding: 0; }
  .no-print { display: none !important; }
  .table-card { margin: 0 auto .2in; padding-bottom: 12px; break-inside: avoid; }
  .tc-qr { width: 1.85in; height: 1.85in; }
  .table-card.bilingual .tc-qr { width: 1.6in; height: 1.6in; }
  .tc-cta { margin: 8px 0 4px; }
  .tc-steps { margin: 6px auto 4px; }
  .table-card + .table-card { border-top-style: dashed; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ================================================================ guest page (darkroom) */
body.dark-page {
  /* lifted a little for dim screens; muted text stays above WCAG AA (4.5:1) on every part of it */
  --muted: #b8ad96;
  min-height: 100vh; color: var(--cream);
  background: radial-gradient(ellipse 120% 70% at 50% 0%, #3f3223 0%, #241d15 45%, #15110c 100%) fixed;
  padding: max(14px, env(safe-area-inset-top)) 16px 60px;
  overflow-x: hidden;
}
body.vf-open { overflow: hidden; }
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
.topbar, .cam-stage, .album { position: relative; z-index: 1; }

.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto 6px; }
.topbar h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.05; margin: 0; color: var(--yellow); }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.help-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 2px solid #4a4031; background: #221d16; color: var(--yellow); font-weight: 700; font-size: 1.1rem;
}
.topbar-btns { flex: none; display: flex; gap: 8px; }
/* language picker: a round button with the phone's own picker (a real <select>) laid invisibly on top */
.lang-btn {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid #4a4031; background: #221d16; font-size: 1.15rem; cursor: pointer; box-sizing: border-box;
}
.lang-btn select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.lang-btn:focus-within { outline: 2px solid var(--yellow); outline-offset: 2px; }

/* ---------- the disposable camera ---------- */
.cam-stage { max-width: 420px; margin: 0 auto 34px; }
.cam { position: relative; margin: 26px 6px 0; transform: rotate(-2.5deg); animation: camIn .8s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes camIn { from { opacity: 0; transform: translateY(40px) rotate(-10deg); } }
.cam-wheel {
  position: absolute; top: -13px; right: 30px; width: 64px; height: 18px; border-radius: 7px 7px 2px 2px;
  background: repeating-linear-gradient(90deg, #1a1612 0 3px, #4b4237 3px 6px);
  box-shadow: inset 0 3px 3px rgba(255,255,255,.12);
}
.cam-body {
  position: relative; border-radius: 28px; padding: 14px;
  background: linear-gradient(180deg, #2a241d, #17130f);
  box-shadow: inset 0 2px 0 #4a4136, inset 0 -3px 0 #0a0806, 0 0 0 2px #0a0806, 0 30px 50px -14px rgba(0,0,0,.85), 0 0 80px -20px rgba(255,194,26,.25);
}
.cam-top { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; }
.cam-vf {
  flex: none; width: 60px; height: 42px; border-radius: 9px;
  background: radial-gradient(circle at 30% 28%, #6c7f93 0, #26313d 30%, #07090c 72%);
  box-shadow: inset 0 0 0 3px #000, 0 0 0 3px #3e362c;
}
.cam-flash {
  flex: 1; height: 42px; border-radius: 7px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, #f3f4f2 0 3px, #c9ccd0 3px 6px);
  box-shadow: inset 0 0 0 3px #000, 0 0 0 3px #3e362c;
}
.cam-flash i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%); transform: translateX(-120%); animation: glint 5s 1.2s infinite; }
@keyframes glint { 12%, 100% { transform: translateX(120%); } }
.cam-counter {
  flex: none; width: 66px; height: 48px; border-radius: 50% / 46%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #1d1712, #050403);
  box-shadow: inset 0 3px 8px #000, 0 0 0 3px #3e362c;
}
.cam-counter b { font-family: var(--mono); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--led); text-shadow: 0 0 6px rgba(255,120,20,.9), 0 0 16px rgba(255,90,0,.5); }
.out-of-film .cam-counter b { color: var(--red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

.cam-wrap {
  position: relative; overflow: hidden; border-radius: 18px; padding: 14px 14px 12px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--yellow-hi), var(--yellow) 40%, var(--yellow-lo));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -4px 10px rgba(120,70,0,.3);
}
.cam-band {
  position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center;
  background: var(--ink); color: var(--yellow); border-radius: 9px; padding: 8px 12px;
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em;
}
.cam-iso { background: var(--red); color: #fff; padding: 0 9px; border-radius: 5px; font-size: .95rem; }
.cam-stripes {
  position: absolute; left: 0; right: 0; top: 50%; height: 34px; z-index: 0; transform: translateY(10px) skewY(-4deg);
  background: linear-gradient(var(--red) 0 30%, transparent 30% 45%, var(--ink) 45% 75%, transparent 75% 85%, var(--red) 85%);
}
.cam-lens {
  position: relative; z-index: 1; width: 138px; aspect-ratio: 1; margin: 18px auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle, #3b3b3b 0 28%, #101010 29% 60%, #2c2c2c 61% 65%, #090909 66%);
  box-shadow: 0 0 0 9px #15120d, 0 0 0 12px #3e362c, 0 12px 22px rgba(0,0,0,.45);
}
.cam-lens i {
  width: 56px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.9) 0 6%, #76a8ff 13%, #1c2a52 46%, #000 76%);
  box-shadow: 0 0 18px rgba(80,140,255,.35);
}
.cam-meta { position: relative; z-index: 2; margin: 0; text-align: center; color: var(--ink); font-weight: 700; font-size: .72rem; letter-spacing: .16em; }

/* ---------- actions under the camera ---------- */
.cam-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; }
.btn-shutter {
  width: 100%; border: 0; cursor: pointer; border-radius: 18px; padding: 16px 20px 14px;
  background: linear-gradient(180deg, #f2452c, var(--red)); color: #fff;
  box-shadow: 0 7px 0 var(--red-lo), 0 16px 28px -8px rgba(226,50,27,.6);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .08s, box-shadow .08s;
}
.btn-shutter:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--red-lo); }
.btn-shutter-main { font-family: var(--display); font-size: 1.45rem; letter-spacing: .02em; }
.btn-shutter-sub { font-size: .8rem; opacity: .85; letter-spacing: .08em; text-transform: uppercase; }
.btn-shutter.wide { margin-top: 6px; }
.rotate-hint { margin: 4px 0 0; color: var(--muted); font-size: .92rem; display: flex; align-items: center; gap: 8px; }
.rot-icon { display: inline-block; animation: tip 2.6s ease-in-out infinite; }
@keyframes tip { 0%, 40%, 100% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } }
.btn-reload {
  width: 100%; cursor: pointer; border-radius: 16px; padding: 16px; font-weight: 700; font-size: 1.1rem;
  background: var(--yellow); color: var(--ink); border: 0; box-shadow: 0 6px 0 var(--yellow-lo);
}
.status { min-height: 1.4em; margin: 0; text-align: center; font-weight: 600; color: var(--cream); }

/* ---------- album ---------- */
.album { max-width: 1100px; margin: 0 auto; }
.album-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-top: 1px dashed #4a4031; padding-top: 22px; }
.album-head h2 { font-family: var(--display); font-weight: 400; color: var(--yellow); margin: 0; font-size: clamp(1.2rem, 5vw, 1.5rem); white-space: nowrap; }
.album-head h2 span { font-family: var(--mono); color: var(--led); font-size: 1.6rem; }
.dl-all { color: var(--ink); background: var(--cream); text-decoration: none; font-weight: 700; padding: 9px 14px; border-radius: 999px; white-space: nowrap; }
.prints { columns: 2 150px; column-gap: 14px; }
@media (min-width: 700px) { .prints { columns: 4 200px; column-gap: 18px; } }
.print {
  break-inside: avoid; margin: 0 0 16px; padding: 7px 7px 4px; background: var(--paper); border-radius: 3px; cursor: pointer;
  transform: rotate(var(--tilt, 0deg)); box-shadow: 0 2px 0 #d8ccb1, 0 12px 22px -8px rgba(0,0,0,.7);
  transition: transform .2s;
}
.print:hover { transform: rotate(0) scale(1.03); }
.print img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #2a241d; }
.print.landscape img { aspect-ratio: 3 / 2; }
.print figcaption { color: #6b6150; font-size: .74rem; padding: 5px 2px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.print.developing img { animation: develop 3.5s ease-out both; }
@keyframes develop { 0% { filter: brightness(.15) sepia(1) contrast(.6); } 60% { filter: brightness(.8) sepia(.5); } 100% { filter: none; } }
.empty { text-align: center; color: var(--muted); padding: 30px 0; }

/* ---------- viewfinder (looking through the hole) ---------- */
.vf {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px;
  background: radial-gradient(ellipse at center, #17130f 0%, #050403 70%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.vf-hole {
  position: relative; overflow: hidden; background: #000;
  aspect-ratio: 2 / 3; width: min(86vw, calc((100dvh - 190px) * 2 / 3));
  border-radius: 22px / 26px;
  box-shadow: 0 0 0 4px #000, 0 0 0 12px #1d1813, 0 0 0 14px #3a3128, 0 0 60px 20px rgba(0,0,0,.9);
}
.vf-hole video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-hole video.mirror { transform: scaleX(-1); }
.vf-glass {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  /* plastic viewfinder: dark falloff, soft edge blur feel, a faint reflection */
  background:
    linear-gradient(125deg, rgba(255,255,255,.07) 0%, transparent 28%),
    radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 85%, rgba(0,0,0,.9) 100%);
  box-shadow: inset 0 0 30px 10px rgba(0,0,0,.75), inset 0 0 4px 2px rgba(0,0,0,.9);
}
.vf-marks { position: absolute; inset: 9%; pointer-events: none; }
.vf-marks i { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,248,230,.75); }
.vf-marks i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vf-marks i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vf-marks i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vf-marks i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.vf-stamp { position: absolute; right: 7%; bottom: 5%; font-family: var(--mono); font-size: 1.4rem; color: #ffa53a; text-shadow: 0 0 6px rgba(255,80,0,.9); white-space: pre; opacity: .9; }

.vf-controls { display: flex; align-items: center; justify-content: center; gap: 22px; width: min(92vw, 420px); }
.vf-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid #4a4031; background: rgba(34,29,22,.9);
  color: var(--cream); font-size: 1.2rem; cursor: pointer; flex: none;
}
.vf-led { min-width: 64px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: #050403; box-shadow: inset 0 2px 6px #000, 0 0 0 2px #3a3128; }
.vf-led b { font-family: var(--mono); font-weight: 400; font-size: 2.1rem; color: var(--led); text-shadow: 0 0 8px rgba(255,120,20,.9); }
.vf-shutter {
  width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--cream); background: transparent; padding: 5px; cursor: pointer; flex: none;
}
.vf-shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--red); box-shadow: inset 0 -4px 0 var(--red-lo); transition: transform .08s; }
.vf-shutter:active span { transform: scale(.88); }
.vf-shutter.locked { display: none; }
.vf-wind {
  /* takes the shutter's place until the film is wound */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 78px; height: 78px; border-radius: 50%; cursor: pointer; flex: none;
  background: var(--yellow); color: var(--ink); border: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem;
  box-shadow: 0 0 0 4px var(--cream), 0 0 24px rgba(255,194,26,.5);
}
.vf-wind-wheel { width: 34px; height: 34px; border-radius: 50%; background: repeating-conic-gradient(#15120d 0 10deg, #5a5042 10deg 20deg); }
.vf-wind-wheel.spin { animation: spin .35s ease-out; }
@keyframes spin { to { transform: rotate(-200deg); } }
.vf-wind.nudge { animation: nudge .4s; }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.vf-msg { position: absolute; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); text-align: center; color: var(--cream); margin: 0; }
.vf-msg button { margin-top: 8px; padding: 10px 14px; border-radius: 999px; border: 0; background: var(--yellow); color: var(--ink); font-weight: 700; cursor: pointer; }

/* Sideways: wide frame, controls run down the right edge. */
@media (orientation: landscape) {
  .vf { flex-direction: row; gap: 26px; }
  .vf-hole { aspect-ratio: 3 / 2; width: min(calc(100vw - 170px), calc((100dvh - 40px) * 3 / 2)); }
  .vf-controls { flex-direction: column; width: auto; gap: 14px; }
  .vf-stamp { font-size: 1.6rem; }
}

/* ---------- quick instructions sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(5,4,3,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto;
  background: linear-gradient(180deg, #2a231a, #1a1510); color: var(--cream);
  border-radius: 26px 26px 0 0; padding: 26px 22px max(22px, env(safe-area-inset-bottom));
  border-top: 3px solid var(--yellow); animation: sheetUp .45s cubic-bezier(.2,.9,.3,1) both;
}
@media (min-width: 600px) { .sheet-backdrop { align-items: center; } .sheet { border-radius: 26px; border: 3px solid var(--yellow); } }
@keyframes sheetUp { from { transform: translateY(100%); } }
.sheet .kicker { color: var(--led); }
.sheet h2 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; margin: 0 0 12px; color: var(--yellow); }
.welcome { font-size: 1.05rem; font-style: italic; margin: 0 0 16px; padding-inline-start: 12px; border-inline-start: 3px solid var(--led); }
.welcome span { display: block; font-style: normal; color: var(--muted); font-size: .9rem; margin-top: 4px; }
.steps { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps b { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ink); font-size: 1.3rem; box-shadow: 0 0 0 2px #4a4031; }
.steps h3 { margin: 0 0 2px; font-size: 1rem; color: var(--yellow); }
.steps p { margin: 0; color: #d4caB4; font-size: .93rem; }
.field.dark > span { color: var(--cream); }
.field.dark small { color: var(--muted); }
.field.dark input { background: #0f0c09; color: var(--cream); border: 2px solid #4a4031; }
.fine { text-align: center; color: var(--muted); font-size: .82rem; margin: 10px 0 0; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 35; background: rgba(5,4,3,.96); display: flex; align-items: center; justify-content: center; padding: 60px 12px 90px; }
.lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lb-figure img { max-width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; border: 8px solid var(--paper); border-bottom-width: 28px; border-radius: 3px; box-shadow: 0 20px 50px rgba(0,0,0,.8); }
.lb-figure figcaption { color: var(--muted); margin-top: -24px; font-size: .85rem; position: relative; color: #6b6150; }
.lb-btn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #4a4031; background: rgba(34,29,22,.9); color: var(--cream); font-size: 1.4rem; cursor: pointer; }
.lb-btn:disabled { opacity: .25; }
.lb-close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-actions { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.btn-pill { border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 700; background: var(--yellow); color: var(--ink); cursor: pointer; font-size: 1rem; }
.btn-pill.danger { background: transparent; color: #ff8a7a; border: 2px solid #ff8a7a; }

/* ---------- shutter flash ---------- */
.flash-overlay { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; }
.flash-overlay.go { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ================================================================ brand color shades + shared bits */
:root {
  --yellow-hi: color-mix(in srgb, var(--yellow) 70%, #fff);
  --yellow-lo: color-mix(in srgb, var(--yellow) 82%, #000);
}
.flashes { position: relative; z-index: 60; max-width: 940px; margin: 0 auto 14px; display: flex; flex-direction: column; gap: 8px; }
.flash { margin: 0; padding: 12px 16px; border-radius: 10px; border: 3px solid var(--ink); font-weight: 700; background: var(--paper); color: var(--ink); }
.flash-error { background: var(--red); color: #fff; }
.topnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 940px; margin: 0 auto 18px; }
.topnav .logo { font-family: var(--display); color: var(--ink); text-decoration: none; font-size: 1.2rem; }
.topnav nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.topnav nav a, .linklike { color: var(--ink); font-weight: 700; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--ink); color: var(--yellow); vertical-align: middle; }
.badge.free { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.badge.warn { background: var(--red); color: #fff; }
.inline-form { display: inline; margin: 0; }

/* ---------- pricing cards ---------- */
.section-title { font-family: var(--display); font-weight: 400; font-size: 1.5rem; margin: 34px 0 12px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 0 0 18px; }
.plan-card {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; padding: 18px;
  box-shadow: 5px 5px 0 var(--ink); display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.plan-card h3 { font-family: var(--display); font-weight: 400; margin: 0; font-size: 1.2rem; }
.plan-price { font-family: var(--mono); font-size: 2.6rem; line-height: 1; margin: 0; }
.plan-price small { font-family: var(--body); font-size: .85rem; font-weight: 600; }
.plan-card ul { margin: 0; padding-left: 1.1em; font-size: .92rem; }
.plan-card .btn { margin-top: auto; }
.plan-card .btn:disabled { opacity: .45; cursor: not-allowed; }
.plan-desc { font-size: .85rem; color: #5b5242; margin: 0; }
.home-pricing { margin-top: 56px; }
.reseller-pitch { margin-top: 28px; background: var(--ink); color: var(--cream); }
.reseller-pitch h2 { color: var(--yellow); }
.reseller-pitch .btn-ink { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 4px 4px 0 var(--red); }
.center-cta { text-align: center; margin-top: 30px; }
.stack-col { display: flex; flex-direction: column; gap: 22px; }
.stack-col .box { margin: 0; }
.upgrade { border-color: var(--red); }
.danger-zone { text-align: right; margin-top: -6px; }
.tc-by { font-weight: 700; margin: 4px 0 0; font-size: .85rem; }
.cam-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 75%; }

/* footer */
.site-footer { max-width: 940px; margin: 40px auto 0; padding: 18px 0 8px; text-align: center; font-size: .85rem; color: #5b5242; position: relative; z-index: 1; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.site-footer a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.site-footer p { margin: 6px 0 0; }
.dark-page .site-footer { color: var(--muted); border-top: 1px solid #2c261c; margin-top: 30px; }
.dark-page .site-footer a { color: var(--cream); }
.dark-page .site-footer a:hover { color: var(--yellow); }

/* legal pages */
.legal h2 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; margin: 26px 0 6px; }
.legal p, .legal li { line-height: 1.55; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 0 0 10px; padding-left: 1.2em; }
.legal li { margin-bottom: 4px; }
.legal .updated { color: #5b5242; font-size: .9rem; margin: 0 0 4px; }
.legal .box { display: block; padding: 22px 24px; }
.legal .box > h2:first-child { margin-top: 0; }

/* ================================================================ TV slideshow */
body.show-page {
  margin: 0; height: 100vh; overflow: hidden; color: var(--cream);
  background: radial-gradient(ellipse 100% 80% at 50% 40%, #2a2117 0%, #120e0a 55%, #070504 100%);
}
body.show-page .flashes { display: none; }
body.idle { cursor: none; }
.show { position: relative; z-index: 1; height: 100vh; display: grid; grid-template-rows: auto 1fr; padding: 3vh 4vw; box-sizing: border-box; }
.show-head { text-align: center; }
.show-label { margin: 0; font-family: var(--mono); color: var(--led); font-size: clamp(1rem, 2.2vh, 1.6rem); letter-spacing: .3em; text-shadow: 0 0 10px rgba(255,120,20,.7); }
.show-head h1 { margin: .2em 0 0; font-family: var(--display); font-weight: 400; color: var(--yellow); font-size: clamp(1.6rem, 5vh, 3.6rem); line-height: 1; }
.show-stage { position: relative; min-height: 0; }
.show-print {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  max-width: 100%; max-height: 100%;
  background: var(--paper); padding: 1.4vh 1.4vh 0; border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.2);
  opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(.96); transition: opacity 1.2s ease, transform 1.2s ease;
}
.show-print.on { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1); }
.show-print img { display: block; max-height: 68vh; max-width: 62vw; object-fit: contain; }
.show-print.on img { animation: kenburns 7s ease-out both; }
.show-print.developing img { animation: develop 3.5s ease-out both; }
.show-print figcaption { color: #6b6150; font-size: clamp(.9rem, 2vh, 1.3rem); text-align: center; padding: .8vh 0 1.2vh; }
@keyframes kenburns { from { transform: scale(1.0); } to { transform: scale(1.04); } }
.show-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); font-size: clamp(1rem, 2.4vh, 1.6rem); }
.show-empty-big { font-family: var(--display); color: var(--cream); font-size: clamp(1.6rem, 5vh, 3.2rem); margin: 0 0 .3em; }
.show-join {
  position: absolute; right: 3vw; bottom: 3vh; display: flex; align-items: center; gap: 1.4vw;
  background: rgba(18,14,10,.82); border: 2px solid #4a4031; border-radius: 18px; padding: 1.4vh 1.4vw;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.show-join img { width: clamp(90px, 16vh, 170px); height: auto; background: #fff; border-radius: 10px; padding: 6px; }
.show-join p { margin: 0; }
.show-join-title { font-family: var(--display); color: var(--yellow); font-size: clamp(1rem, 2.6vh, 1.8rem); }
.show-join-sub { color: #d4cab4; font-size: clamp(.8rem, 1.7vh, 1.1rem); }
.show-count { margin-top: .6vh !important; color: var(--muted); }
.show-count b { font-family: var(--mono); font-weight: 400; color: var(--led); font-size: clamp(1.4rem, 3.4vh, 2.4rem); text-shadow: 0 0 8px rgba(255,120,20,.8); }
.show-new {
  position: absolute; left: 3vw; bottom: 4vh; margin: 0; padding: .6em 1.1em; border-radius: 999px;
  background: var(--red); color: #fff; font-family: var(--display); font-size: clamp(1rem, 2.6vh, 1.8rem);
}
.show-new.pop { animation: pop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.show-fs { position: absolute; top: 2vh; right: 2vw; border: 2px solid #4a4031; background: rgba(34,29,22,.9); color: var(--cream); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: opacity .3s; }
body.idle .show-fs { opacity: 0; }
@media (orientation: portrait) { .show-print img { max-width: 86vw; max-height: 56vh; } .show-join { left: 3vw; right: 3vw; justify-content: center; } }
.vf-torch.on { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 0 0 18px rgba(255,194,26,.6); }

/* reseller logos */
.cam-brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; margin-right: 8px; }
.cam-brand .cam-label { max-width: none; min-width: 0; }
.cam-logo { flex: none; height: 22px; width: auto; max-width: 70px; object-fit: contain; box-sizing: border-box; padding: 2px 4px; background: rgba(255,255,255,.92); border-radius: 5px; }
.sheet-logo-wrap { text-align: center; margin: 0 0 12px; }
.sheet-logo { height: 44px; width: auto; max-width: 60%; object-fit: contain; box-sizing: border-box; padding: 4px 8px; background: rgba(255,255,255,.92); border-radius: 8px; }
.tc-by { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tc-logo { height: .45in; width: auto; max-width: 2.4in; object-fit: contain; }
.show-logo { display: block; margin: .6vh auto 0; height: 6vh; width: auto; max-width: 20vw; object-fit: contain; box-sizing: border-box; padding: .5vh 1vh; background: rgba(255,255,255,.92); border-radius: 1vh; }
.logo-current { display: inline-block; align-self: flex-start; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 12px; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 14px 14px; }
.logo-current img, .owner-logo-thumb { display: block; max-height: 80px; max-width: 240px; width: auto; height: auto; }
.owner-logo-thumb { padding: 6px; border: 2px solid var(--ink); border-radius: 8px; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 14px 14px; }

/* video clips */
.vf-mode {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(10,8,6,.72); border: 1px solid #4a4031;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vf-mode button {
  border: 0; background: transparent; color: var(--cream); font: 700 .72rem/1 var(--body, inherit); letter-spacing: .12em;
  text-transform: uppercase; padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 30px;
}
.vf-mode button.on { background: var(--yellow); color: var(--ink); }
.vf-mode button:disabled { opacity: .5; }
.vf.recording .vf-mode { opacity: 0; pointer-events: none; }
.vf-rec {
  position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px; background: rgba(10,8,6,.72); color: #fff;
  font: 700 .72rem/1 var(--body, inherit); letter-spacing: .14em;
}
.vf-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff2a1a; animation: recblink 1s steps(2, start) infinite; }
.vf-rec b { font-family: var(--mono); font-weight: 400; font-size: 1.25rem; letter-spacing: .04em; color: var(--led); line-height: 1; }
@keyframes recblink { to { visibility: hidden; } }
.vf-shutter.video span { background: #ff2a1a; box-shadow: inset 0 0 0 5px rgba(255,255,255,.22), inset 0 -4px 0 #a31208; }
/* while recording: the ring fills clockwise over 10 seconds and the button becomes a stop square */
.vf-shutter.recording {
  border-color: transparent; padding: 9px;
  background: conic-gradient(#ff2a1a var(--p, 0%), rgba(255,248,230,.28) 0);
}
.vf-shutter.recording span { transform: scale(.62); border-radius: 22%; box-shadow: none; }
.vf-shutter.recording:active span { transform: scale(.55); }
.vf.recording .vf-flip, .vf.recording .vf-led { opacity: .35; pointer-events: none; }

.print .vid-thumb { position: relative; background: #1d1813; }
.print video { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: #2a241d; pointer-events: none; }
.print.landscape video { aspect-ratio: 3 / 2; }
.play-badge {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 3px; box-sizing: border-box;
  background: rgba(10,8,6,.62); color: #fff; font-size: 1.1rem; border: 2px solid rgba(255,248,230,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.5); pointer-events: none;
}
.lb-figure video {
  max-width: 100%; max-height: calc(100dvh - 180px); background: #000;
  border: 8px solid var(--paper); border-bottom-width: 28px; border-radius: 3px; box-shadow: 0 20px 50px rgba(0,0,0,.8);
}
.show-print video { display: block; max-height: 68vh; max-width: 62vw; object-fit: contain; background: #000; }
@media (orientation: portrait) { .show-print video { max-width: 86vw; max-height: 56vh; } }

/* reporting */
.lb-report {
  align-self: center; background: transparent; border: 0; color: #9b8f78; font: inherit; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 10px 8px;
}
.lb-report:hover { color: var(--cream); }
.lb-banner {
  position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 70px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--red); color: #fff; font-weight: 700; font-size: .9rem; padding: 8px 12px; border-radius: 12px;
}
.lb-banner .btn-pill { padding: 7px 16px; font-size: .9rem; background: #fff; }
.report-backdrop { z-index: 50; }
.report-sheet h2 { font-size: 1.5rem; }
.report-sheet fieldset { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.report-sheet fieldset label {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: #0f0c09; border: 2px solid #4a4031; cursor: pointer; min-height: 44px; box-sizing: border-box;
}
.report-sheet fieldset input { width: 20px; height: 20px; accent-color: var(--yellow); flex: none; }
.report-sheet textarea {
  width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border-radius: 10px; resize: vertical;
  background: #0f0c09; color: var(--cream); border: 2px solid #4a4031;
}
.report-err { color: #ff8a7a; min-height: 1.2em; margin: 8px 0 0; font-size: .9rem; }
.report-btns { display: flex; gap: 12px; justify-content: center; margin-top: 10px; }
.report-thanks { text-align: center; font-size: 1.1rem; margin: 12px 0; }

/* host + owner review lists */
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.report-item { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.report-list .report-item { padding: 12px; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.report-item.is-me { border-color: var(--red); }
.report-thumb img, .report-thumb video { display: block; width: 100%; border-radius: 8px; border: 2px solid var(--ink); background: #222; }
.report-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.report-me { background: var(--red); color: #fff; font-weight: 700; padding: 8px 10px; border-radius: 8px; }
.report-reasons { margin: 0; padding-left: 18px; }
.report-note { font-style: italic; overflow-wrap: anywhere; }
.report-info .btn-row form { margin: 0; }
@media (max-width: 480px) { .report-item { grid-template-columns: 96px 1fr; gap: 12px; } }

/* camera games */
/* LED digits: orange like the film counter; red + a gentle pulse when it's urgent (< 10 s). Always ltr. */
.g-led, .sp-cam-time, .sg-led {
  font-family: var(--mono); font-weight: 400; line-height: 1; color: var(--led);
  text-shadow: 0 0 6px rgba(255,120,20,.85); direction: ltr; unicode-bidi: isolate; display: inline-block;
}
.g-led { font-size: 1.35em; }
.urgent .g-led, .sp-cam-time.urgent, .sg-led.urgent, .cam-timer.urgent b, .vf-timer.urgent b, .tg-ring.urgent b {
  color: #ff4a2e; text-shadow: 0 0 8px rgba(255,60,30,.9); animation: gpulse 1s ease-in-out infinite;
}
@keyframes gpulse { 50% { opacity: .55; } }

/* banner above the camera: opening time / closed / paused / time limit */
.games-banner {
  display: flex; align-items: center; gap: 12px; margin: 14px 6px 0; padding: 12px 14px;
  border-radius: 16px; background: #0f0c09; border: 2px solid #4a4031; color: var(--cream);
  box-shadow: inset 0 2px 8px #000;
}
.games-banner.wait { border-color: var(--yellow); }
.games-banner.paused { border-color: var(--led); }
.games-banner.closed { border-color: #6b2a20; }
.games-banner.urgent { border-color: var(--red); }
.gb-icon { flex: none; font-size: 1.6rem; line-height: 1; }
.gb-text { flex: 1; min-width: 0; }
.gb-main { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--yellow); overflow-wrap: anywhere; }
.games-banner.closed .gb-main { color: var(--cream); }
.gb-sub { margin: 3px 0 0; color: #d4cab4; font-size: .9rem; overflow-wrap: anywhere; }

/* timer plate on the camera body */
.cam-timer {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: max-content; margin: 8px auto 0; padding: 3px 12px; border-radius: 8px; direction: ltr;
  background: #050403; box-shadow: inset 0 2px 6px #000, 0 0 0 2px #3a3128; color: var(--led); font-size: .95rem;
}
.cam-timer b { font-family: var(--mono); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--led); text-shadow: 0 0 6px rgba(255,120,20,.9), 0 0 14px rgba(255,90,0,.45); }
.btn-shutter:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; transform: none; }

/* Pass the camera: the panel under the camera */
.share-panel {
  width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px;
  background: rgba(15,12,9,.88); border: 2px solid #4a4031; box-shadow: inset 0 2px 8px #000;
}
.sp-status { margin: 0; text-align: center; font-family: var(--display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--yellow); overflow-wrap: anywhere; }
.sp-sub { margin: -4px 0 0; text-align: center; color: #d4cab4; font-size: .9rem; }
.sp-cams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-cam {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 12px;
  background: #1b1610; border: 1px solid #3a3128; font-size: .92rem;
}
.sp-cam-name { flex: none; font-weight: 700; color: var(--cream); white-space: nowrap; }
.sp-cam-who { flex: 1; min-width: 0; color: #d4cab4; overflow-wrap: anywhere; }
.sp-cam-time { flex: none; font-size: 1.45rem; }
.sp-cam.mine { border-color: var(--yellow); background: #2a2214; }
.sp-cam.mine .sp-cam-who { color: var(--yellow); font-weight: 700; }
.sp-cam.free .sp-cam-who { font-style: italic; color: var(--muted); }
.sp-cam.out { opacity: .55; }
.share-panel .btn-reload { margin-top: 2px; }
.sp-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.sp-link {
  background: transparent; border: 0; color: #c9bea6; font: inherit; font-size: .92rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 8px 6px; min-height: 40px;
}
.sp-link:hover { color: var(--cream); }

/* viewfinder: timer (bottom-left of the window), "can't shoot" card, Pass it on */
.vf-timer {
  position: absolute; left: 14px; bottom: 5%; z-index: 3; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; background: rgba(10,8,6,.72); color: var(--cream); font-size: .9rem;
}
.vf-timer b { font-family: var(--mono); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--led); text-shadow: 0 0 6px rgba(255,120,20,.9); }
.vf-timer.urgent { box-shadow: 0 0 0 2px rgba(255,74,46,.75); }
.vf-block { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 14px; background: rgba(5,4,3,.78); text-align: center; overflow-y: auto; }
.vf-block-card {
  width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 14px 8px; border-radius: 18px; background: #1b1610; border: 2px solid var(--yellow);
  box-shadow: 0 12px 30px rgba(0,0,0,.6); animation: pop .35s cubic-bezier(.2,.9,.3,1.3);
}
.vf-block-icon { font-size: 2.3rem; line-height: 1; }
.vf-block h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 6vw, 1.6rem); line-height: 1.1; color: var(--yellow); overflow-wrap: anywhere; }
.vf-block p { margin: 0; color: var(--cream); font-weight: 700; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.vf-block .vf-block-sub { color: #d4cab4; font-weight: 600; font-size: .92rem; }
.vf-block .btn-reload { margin-top: 6px; padding: 12px; font-size: 1rem; }
.vf-block .sp-link { color: #d4cab4; }
.vf-block.nudge .vf-block-card { animation: nudge .4s; }
html[dir="rtl"] .vf-block h3 { font-family: var(--body); font-weight: 700; }
.vf-shutter:disabled { opacity: .35; cursor: not-allowed; }
.vf-pass {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 5; max-width: calc(100vw - 24px);
  border: 2px solid #4a4031; background: rgba(34,29,22,.92); color: var(--cream); border-radius: 999px;
  padding: 8px 14px; font-weight: 700; font-size: .85rem; cursor: pointer;
}

/* "It's your turn!" takeover */
.turn-go {
  position: fixed; inset: 0; z-index: 45; display: flex; overflow: hidden auto;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 42%, rgba(255,194,26,.32), rgba(5,4,3,.95) 62%), #050403;
}
.turn-go::before {
  content: ""; position: fixed; inset: -60%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,194,26,.09) 0 9deg, transparent 9deg 18deg);
  animation: tgspin 24s linear infinite;
}
@keyframes tgspin { to { transform: rotate(360deg); } }
.tg-card { position: relative; margin: auto; width: min(100%, 420px); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: pop .5s cubic-bezier(.2,.9,.3,1.4); }
.tg-cam { margin: 0; font-family: var(--mono); font-size: 1.5rem; letter-spacing: .1em; color: var(--led); text-shadow: 0 0 8px rgba(255,120,20,.8); }
.tg-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 11vw, 3.2rem); line-height: 1.02; color: var(--yellow); text-shadow: 0 4px 0 #000; overflow-wrap: anywhere; }
.tg-sub { margin: 0; font-weight: 700; font-size: 1.15rem; color: var(--cream); }
.tg-ring { position: relative; width: min(54vw, 210px); aspect-ratio: 1; margin: 6px 0; direction: ltr; }
.tg-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.tg-track { fill: #0f0c09; stroke: #3a3128; stroke-width: 10; }
.tg-prog {
  fill: none; stroke: var(--yellow); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.73;
  transition: stroke-dashoffset .25s linear, stroke .3s;
}
.tg-ring::before { content: ""; position: absolute; inset: 3%; border-radius: 50%; box-shadow: 0 0 26px rgba(255,194,26,.45); pointer-events: none; }
.tg-ring.urgent::before { box-shadow: 0 0 26px rgba(255,74,46,.5); }
.tg-ring.urgent .tg-prog { stroke: #ff4a2e; }
.tg-ring b {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 5rem); color: var(--led); text-shadow: 0 0 10px rgba(255,120,20,.9), 0 0 24px rgba(255,90,0,.5);
}
.tg-shoot { max-width: 340px; }
/* Arabic: the pixel font has no Arabic letters and the monospace fallback pulls them apart */
html[dir="rtl"] .tg-cam { font-family: var(--body); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; }
@media (max-height: 520px) {
  .tg-card { gap: 6px; }
  .tg-card h2 { font-size: 2rem; }
  .tg-ring { width: min(34vh, 150px); margin: 0; }
  .tg-ring b { font-size: 3rem; }
}
.tg-shoot .btn-shutter-main { font-size: 1.7rem; }
body.turn-go-open { overflow: hidden; }

/* little message that drops in from the top */
.games-toast {
  position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); z-index: 60; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 28px); padding: 12px 18px; border-radius: 14px; text-align: center;
  background: var(--yellow); color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); animation: toastIn .35s cubic-bezier(.2,.9,.3,1.3);
}
.games-toast.slow { background: var(--led); }
.games-toast.bad { background: var(--red); color: #fff; }
@keyframes toastIn { from { transform: translate(-50%, -30px); opacity: 0; } }

/* welcome sheet line about tonight's game */
.intro-games {
  display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; padding: 12px; border-radius: 14px;
  border: 2px dashed var(--yellow); background: rgba(255,194,26,.07);
}
.intro-games > b { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ink); font-size: 1.3rem; box-shadow: 0 0 0 2px #4a4031; }
.intro-games h3 { margin: 0 0 2px; font-size: 1rem; color: var(--yellow); }
.intro-games p { margin: 0; color: #d4caB4; font-size: .93rem; }

/* TV slideshow ticker */
.show-games {
  position: absolute; left: 3vw; bottom: 3vh; z-index: 2; max-width: min(36vw, 600px);
  display: flex; flex-direction: column; gap: 1vh; padding: 1.6vh 1.4vw; border-radius: 18px;
  background: rgba(18,14,10,.86); border: 2px solid #4a4031; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sg-title { margin: 0; font-family: var(--display); color: var(--yellow); font-size: clamp(1rem, 2.6vh, 1.8rem); }
.sg-banner { margin: 0; font-weight: 700; color: var(--cream); font-size: clamp(1rem, 2.6vh, 1.8rem); }
.sg-cams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6vh; }
.sg-cams:empty { display: none; }
.sg-cams li { display: flex; align-items: baseline; gap: .5vw; white-space: nowrap; color: var(--cream); font-size: clamp(.95rem, 2.3vh, 1.6rem); }
.sg-cams li.out { opacity: .55; }
.sg-num { flex: none; font-weight: 700; }
.sg-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sg-who.free { color: var(--muted); font-style: italic; }
.sg-led { font-size: 1.35em; }
.sg-waiting { margin: 0; color: var(--muted); font-size: clamp(.9rem, 2vh, 1.3rem); }
.show.has-games .show-new { bottom: auto; top: 3vh; }
@media (orientation: portrait) { .show-games { bottom: auto; top: 16vh; max-width: 70vw; } }

@media (prefers-reduced-motion: reduce) {
  .tg-prog { transition: none; }
  .turn-go::before { animation: none; }
}

/* ================================================================ shot feedback, lock, roll finished, camera name */
/* the name sticker: a strip of paper tape ("Ana's camera") */
.cam-tape {
  display: inline-block; max-width: 100%; padding: 4px 13px; box-sizing: border-box;
  font: 700 .82rem/1.25 var(--body); color: var(--ink); letter-spacing: .01em;
  background: linear-gradient(90deg, rgba(255,255,255,.5) 0 6px, transparent 6px calc(100% - 6px), rgba(255,255,255,.5) calc(100% - 6px)), #f4e9cc;
  box-shadow: 0 1px 2px rgba(0,0,0,.35); transform: rotate(-2deg); border-radius: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cam-tape:not(.named) { color: #5b5242; font-style: italic; }
.cam-name { position: relative; z-index: 2; margin: 9px 0 -6px; text-align: center; line-height: 1; }
.cam-name .cam-tape { max-width: 82%; }
.name-preview { margin: 10px 0 2px; text-align: center; line-height: 1; }
.vf-name {
  position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; z-index: 5; margin: 0;
  max-width: calc(100vw - 170px); pointer-events: none; line-height: 1;
}
.vf-name .cam-tape { font-size: .74rem; padding: 3px 10px; }
.vf.recording .vf-name { opacity: .4; }

/* the just-taken print parks at the right edge of the window */
.vf-shots {
  position: absolute; right: 10px; top: 27%; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.vf-print {
  position: relative; padding: 3px 3px 10px; background: var(--paper); border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0,0,0,.6); transform: rotate(4deg);
}
.vf-print canvas { display: block; width: 46px; height: 69px; object-fit: cover; background: #2a241d; }
.vf-print.landscape canvas { width: 66px; height: 44px; }
.vf-print.clip:not(:has(canvas)) { width: 52px; height: 79px; }
.vf-print-clip { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 1.1rem; text-shadow: 0 1px 4px #000; }
.vf-print.pop { animation: printPop .9s cubic-bezier(.3,.8,.3,1) both; }
@keyframes printPop {
  0% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(3.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  38% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(3) rotate(-5deg); opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotate(4deg); opacity: 1; }
}
.vf-print.gone { animation: printGone .45s ease-in forwards; }
@keyframes printGone { to { opacity: 0; transform: translateX(26px) rotate(12deg); } }
.vf-print-dot {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  display: grid; place-items: center; font: 900 .72rem/1 var(--body); font-style: normal; color: #fff;
  border: 3px solid rgba(255,248,230,.35); border-top-color: var(--paper); background: rgba(10,8,6,.85);
  animation: spin360 .8s linear infinite;
}
@keyframes spin360 { to { transform: rotate(360deg); } }
.vf-print.retry .vf-print-dot { border-color: rgba(255,138,31,.35); border-top-color: var(--led); }
.vf-print.ok .vf-print-dot, .vf-print.bad .vf-print-dot { animation: pop .3s cubic-bezier(.2,.9,.3,1.4); border: 2px solid #fff; }
.vf-print.ok .vf-print-dot { background: #1f9d55; }
.vf-print.ok .vf-print-dot::after { content: "✓"; }
.vf-print.bad .vf-print-dot { background: var(--red); }
.vf-print.bad .vf-print-dot::after { content: "✕"; }
.vf-print.bad { outline: 3px solid var(--red); }

.vf-pending {
  position: absolute; right: 10px; top: calc(27% - 36px); z-index: 5; margin: 0; max-width: 60%;
  padding: 4px 10px; border-radius: 999px; background: rgba(10,8,6,.8); color: var(--cream);
  font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.vf-pending.nudge { animation: nudge .4s; }

/* "✓ Saved" / "✗ Not saved — why" inside the window */
.vf-result {
  position: absolute; left: 50%; bottom: calc(5% + 58px); z-index: 6; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 28px); display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 16px; border-radius: 14px; text-align: center; pointer-events: none;
  background: #1f9d55; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.55);
  animation: resultIn .3s cubic-bezier(.2,.9,.3,1.3);
}
.vf-result b { font-size: 1.05rem; line-height: 1.2; }
.vf-result span { font-size: .9rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.vf-result.bad { background: var(--red); padding: 12px 16px; border: 2px solid #fff; }
.vf-result.bad b { font-size: 1.2rem; }
.vf-result.retry { background: var(--led); color: var(--ink); }
.vf-result.turn { background: var(--yellow); color: var(--ink); }
.vf-result.turn b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; }
.vf-result.wait { background: var(--led); color: var(--ink); }
@keyframes resultIn { from { transform: translate(-50%, 14px) scale(.85); opacity: 0; } }

/* Pass the camera, while I hold it: "2 left this turn · 0:12" */
.vf-turn {
  position: absolute; left: 50%; bottom: 5%; z-index: 3; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 999px; background: rgba(10,8,6,.84); border: 2px solid var(--yellow);
  color: var(--cream); font-weight: 700; font-size: .95rem; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.vf-turn > b:first-child { overflow: hidden; text-overflow: ellipsis; }
.vf-turn-n { font-family: var(--mono); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--led); text-shadow: 0 0 8px rgba(255,120,20,.9); vertical-align: -3px; }
.vf-turn-time { font-family: var(--mono); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--led); text-shadow: 0 0 6px rgba(255,120,20,.9); }
.vf-turn.urgent { border-color: #ff4a2e; }
.vf-turn.urgent .vf-turn-time { color: #ff4a2e; animation: gpulse 1s ease-in-out infinite; }
.vf.has-turn .vf-timer, .vf.has-turn .vf-stamp { display: none; }
.vf.locked .vf-shutter { filter: grayscale(1); }

/* the same answer as a card at the bottom of the page when the viewfinder is closed */
.shot-toast {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 55; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 28px); display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 16px; background: #1f9d55; color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.6); animation: resultIn .3s cubic-bezier(.2,.9,.3,1.3);
}
.shot-toast.bad { background: var(--red); border: 2px solid #fff; }
.shot-toast.retry { background: var(--led); color: var(--ink); }
.st-thumb { flex: none; display: grid; place-items: center; min-width: 40px; font-size: 1.6rem; }
.st-thumb canvas { display: block; height: 56px; width: auto; border: 3px solid var(--paper); border-bottom-width: 8px; border-radius: 2px; transform: rotate(-3deg); }
.st-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-body b { font-size: 1.05rem; }
.st-body span { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }

/* Roll finished! */
.roll-done {
  position: fixed; inset: 0; z-index: 48; display: flex; overflow: hidden auto;
  padding: max(20px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 36%, rgba(255,138,31,.34), rgba(5,4,3,.96) 62%), #050403;
}
.roll-done::before {
  content: ""; position: fixed; inset: -60%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255,138,31,.08) 0 9deg, transparent 9deg 18deg);
  animation: tgspin 30s linear infinite;
}
.rd-card { position: relative; margin: auto; width: min(100%, 420px); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; animation: pop .5s cubic-bezier(.2,.9,.3,1.4); }
.rd-art { position: relative; width: 150px; height: 118px; }
.rd-cam { position: absolute; left: 10px; top: 14px; font-size: 5rem; line-height: 1; animation: rdBob 2.4s ease-in-out infinite; }
.rd-film { position: absolute; right: 4px; top: 0; font-size: 2.2rem; line-height: 1; animation: rdSpin 3.5s linear infinite; }
@keyframes rdBob { 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes rdSpin { to { transform: rotate(360deg); } }
.rd-card.loading .rd-cam { animation: rdLoad .45s ease-in-out infinite; }
.rd-card.loading .rd-film { animation: rdSpin .5s linear infinite; }
@keyframes rdLoad { 25% { transform: translateX(-7px) rotate(-8deg); } 75% { transform: translateX(7px) rotate(8deg); } }
.rd-card.loaded .rd-cam { animation: rdLoaded .6s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes rdLoaded { 0% { transform: scale(.4) rotate(-30deg); } 100% { transform: scale(1.15) rotate(0); } }
.rd-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(2.1rem, 11vw, 3.1rem); line-height: 1.02; color: var(--yellow); text-shadow: 0 4px 0 #000; overflow-wrap: anywhere; }
html[dir="rtl"] .rd-card h2 { font-family: var(--body); font-weight: 700; }
.rd-text { margin: 0; font-weight: 700; font-size: 1.15rem; line-height: 1.35; color: var(--cream); }
.rd-how { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 340px; text-align: start; color: #d4cab4; font-weight: 600; }
.rd-phone { display: inline-block; font-size: 1.8rem; animation: rdFlip 2.6s ease-in-out infinite; }
@keyframes rdFlip { 0%, 25% { transform: rotateX(0); } 45%, 60% { transform: rotateX(180deg); } 80%, 100% { transform: rotateX(360deg); } }
.rd-card .btn-reload, .rd-card .btn-shutter { max-width: 340px; }
.rd-card .btn-reload:disabled { opacity: .6; }
.rd-album { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
body.roll-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .vf-print.pop { animation-duration: .01ms; }
  .roll-done::before { animation: none; }
}

/* Pass the camera: "all yours" card, put the camera down, take a break */
.alone-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 16px;
  background: #2a2214; border: 2px solid var(--yellow); text-align: center;
}
.alone-card p { margin: 0; font-weight: 700; color: var(--yellow); line-height: 1.3; overflow-wrap: anywhere; }
.alone-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.alone-btns .btn-pill { padding: 10px 16px; font-size: .92rem; }
.btn-pill.ghost { background: transparent; color: var(--cream); border: 2px solid #6b5d45; }
.vf-alone {
  position: absolute; left: 50%; top: 64px; z-index: 5; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: 340px; background: rgba(27,22,16,.94); box-shadow: 0 12px 30px rgba(0,0,0,.6);
  animation: pop .35s cubic-bezier(.2,.9,.3,1.3);
}
.vf-turn.alone { border-color: #1f9d55; }
.vf-turn.alone > span { display: none; }
.vf-game-btns {
  position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100vw - 24px);
}
.vf-game-btns .vf-pass { position: static; max-width: 100%; }