/* LAYOVER · shared styles for the café (/) and the membership card (/card).
   Colours come from the shop itself: chalkboard ground, chalk ink, the robots' phosphor screens as the accent,
   receipt paper as the one light field. Five type sizes: display, heading, lead, body, small. */
/* DotGothic16 (SIL OFL 1.1, see /fonts/OFL.txt), subset to the characters this site uses: scripts/subset-font.py */
@font-face {
  font-family: "DotGothic16";
  src: url("/fonts/dotgothic16-subset.woff2") format("woff2");
  font-display: swap;
}
:root {
  --ground: #26302a;
  --ground-2: #2f3a33;
  --ground-3: #3a473f;
  --ink: #eef2e8;
  --ink-2: #cad3c7;
  --accent: #9fe39a;
  --accent-ink: #14201a;
  --paper: #edede9;
  --paper-2: #e0dfda;
  --paper-ink: #1d1a17;
  --paper-mute: #4f4a44;
  --wood: #6e4630;

  --pixel: "DotGothic16", "PingFang SC", sans-serif;
  --text: -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;

  --fs-display: clamp(40px, 6.4vw, 92px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 13px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  /* spacing: three steps inside things, one between sections */
  --s1: 8px;
  --s2: 16px;
  --s3: 32px;
  --gap-section: clamp(88px, 11vw, 144px);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--ground); color: var(--ink); font: var(--fs-body)/1.6 var(--text); }
main { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2 { font-family: var(--pixel); font-weight: 400; margin: 0; }
h1 { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.01em; }
main p { max-width: 62ch; }
.lead { font-size: var(--fs-lead); line-height: 1.55; margin: 0; max-width: 32em; }
.small { font-size: var(--fs-small); color: var(--ink-2); }
section { margin-top: var(--gap-section); scroll-margin-top: 24px; }

/* ---------- header & footer ---------- */
header { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3) 0 var(--s2); }
.wordmark { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.wordmark svg { display: block; }
.wordmark-cn { font-size: var(--fs-small); color: var(--ink-2); }
/* Navigation is two equal tabs; the page you are on is white with a bar under it. Green is never a nav state. */
nav { display: flex; align-items: center; gap: var(--s3); }
nav .tab { position: relative; padding: 8px 0; text-decoration: none; color: var(--ink-2); transition: color var(--t-hover) ease; }
nav .tab:hover { color: var(--ink); }
nav .action { padding: 10px 18px; }
nav .tab[aria-current="page"] { color: var(--ink); }
nav .tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--ink); }
/* Green (--accent) marks the one thing to do on a page, plus the "open" light in the scene. Nothing else. */
.action {
  display: inline-block; font: var(--fs-body)/1 var(--text); background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 0;
  padding: 14px 22px; cursor: pointer; text-decoration: none;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.action:hover { background: #b6f0b1; }
.action:active { transform: translateY(2px); }
.action:disabled { opacity: .6; cursor: wait; }
footer { margin-top: var(--gap-section); padding-bottom: 32px; }
footer .big svg { width: 100%; height: auto; display: block; }
footer p { margin: var(--s2) 0 0; }

/* One reading direction: every block is heading, then one paragraph, then its content, on the same left edge.
   Only sets of equal things (receipts, steps, agent cards) sit side by side. */
.intro { display: grid; gap: var(--s3); padding: var(--s3) 0; }
.intro .lead { max-width: 36em; }
.intro .small, .sec-head .small { margin: 0; }
.sec-head .lead { color: var(--ink); }
.sec-head { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.sec-head p { margin: 0; color: var(--ink-2); }
section.first { margin-top: var(--s3); }

/* ---------- entrances: the parts of each section arrive in reading order, once ---------- */
html.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
html.js [data-reveal].in > * { opacity: 1; transform: none; }
html.js [data-reveal].in > :nth-child(2) { transition-delay: 80ms; }
html.js [data-reveal].in > :nth-child(3) { transition-delay: 160ms; }
html.js [data-reveal].in > :nth-child(4) { transition-delay: 240ms; }

/* ---------- the scene ---------- */
.stage { position: relative; width: 100%; aspect-ratio: 256 / 144; overflow: hidden; background: #1d1a17; }
.stage canvas { display: block; height: auto; image-rendering: pixelated; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.ov, .hud, .count { position: absolute; font-family: var(--pixel); white-space: nowrap; font-size: var(--fs-small); }
.hud { left: 1.5%; top: 2.5%; background: var(--paper-ink); color: var(--paper); padding: .3em .7em; }
.hud b { color: var(--accent); font-weight: 400; }
.hud b.off { color: var(--ink-2); }
.count { right: 1.5%; bottom: 3%; background: var(--paper-ink); color: var(--paper); padding: .3em .7em; }
.empty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--paper); color: var(--paper-ink);
  padding: .8em 1.2em; font-size: var(--fs-body); text-align: center;
}
.empty a { color: #2f7a3a; }
.tag { transform: translate(-50%, -100%); background: var(--paper-ink); color: var(--paper); padding: 0 .45em; line-height: 1.55; }
.tag i { font-style: normal; color: #ffd34d; }
.tag.top { background: #ffd34d; color: var(--paper-ink); }
.tag.verified { background: var(--paper); color: var(--paper-ink); }
.tag.verified i { color: #8a3b12; }
.bubble {
  transform: translate(-14%, -100%); background: #fff; color: var(--paper-ink); border: 2px solid var(--paper-ink);
  padding: .4em .65em; width: max-content; max-width: 34%; white-space: normal; line-height: 1.35;
  animation: pop 220ms var(--ease-out) both;
}
.bubble::after {
  content: ""; position: absolute; left: 14%; bottom: -7px; width: 8px; height: 8px; background: #fff;
  border-right: 2px solid var(--paper-ink); border-bottom: 2px solid var(--paper-ink); transform: translateX(-50%) rotate(45deg);
}
.bubble small { display: block; color: var(--paper-mute); font-size: inherit; }
.slip {
  transform: translate(-50%, -100%) rotate(-3deg); background: var(--paper); color: var(--paper-ink); padding: .35em .6em;
  width: max-content; max-width: 26%; white-space: normal; line-height: 1.35; animation: drift 6s linear both;
}
.zzz sup { font-size: 100%; }
.zzz { color: #6f86d6; font-size: var(--fs-body); transform: translate(-50%, -100%); animation: zzz 2.4s steps(6) infinite; }
/* on a phone the scene is cropped to the counter; name tags would cover the customers */
.stage.narrow .tag:not(.top) { display: none; }
.stage.narrow .bubble { max-width: 64%; }
.stage.narrow .slip { max-width: 50%; }
@keyframes pop { from { opacity: 0; transform: translate(-14%, -80%) scale(.9); } }
@keyframes drift { 0% { opacity: 0; translate: 0 6px; } 8%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -10px; } }
@keyframes zzz { 0% { translate: 0 4px; opacity: .3; } 50% { opacity: 1; } 100% { translate: 3px -6px; opacity: 0; } }

/* ---------- 同框: the camera ---------- */
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.stage-bar p { margin: 0; }
.soft-btn {
  font: var(--fs-body)/1 var(--text); background: var(--ground-3); color: var(--ink); border: 0; padding: 14px 22px; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.soft-btn:hover { background: #47574d; }
.soft-btn:active { transform: translateY(2px); }
.soft-btn:disabled { opacity: .6; cursor: wait; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 420ms var(--ease-out); }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
dialog.photo { max-width: min(960px, calc(100vw - 32px)); width: 100%; border: 0; padding: var(--s3); background: var(--ground-2); color: var(--ink); box-shadow: 0 24px 64px rgba(0,0,0,.5); }
dialog.photo::backdrop { background: rgba(10, 14, 12, .7); }
dialog.photo img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
dialog.photo .small { margin: var(--s2) 0; }
.photo-actions { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* ---------- the receipt wall ---------- */
.wall { columns: 3 300px; column-gap: var(--s2); }
.receipt {
  break-inside: avoid; margin: 0 0 var(--s2); background: var(--paper); color: var(--paper-ink); padding: var(--s2) var(--s3) var(--s3); line-height: 1.5;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 96% 100%, 92% calc(100% - 8px), 88% 100%, 84% calc(100% - 8px), 80% 100%, 76% calc(100% - 8px), 72% 100%, 68% calc(100% - 8px), 64% 100%, 60% calc(100% - 8px), 56% 100%, 52% calc(100% - 8px), 48% 100%, 44% calc(100% - 8px), 40% 100%, 36% calc(100% - 8px), 32% 100%, 28% calc(100% - 8px), 24% 100%, 20% calc(100% - 8px), 16% 100%, 12% calc(100% - 8px), 8% 100%, 4% calc(100% - 8px), 0 100%);
}
.receipt .row { display: flex; justify-content: space-between; gap: var(--s2); color: var(--paper-mute); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.receipt .who { display: flex; align-items: center; gap: var(--s1); margin: var(--s2) 0 var(--s1); overflow-wrap: anywhere; }
.receipt .who canvas { width: 40px; height: 40px; flex: none; image-rendering: pixelated; background: var(--paper-2); }
.receipt .guest { font-size: var(--fs-small); color: #2f7a3a; text-decoration: none; margin-left: auto; white-space: nowrap; }
.receipt .guest:hover { text-decoration: underline; }
.receipt .reason { margin: var(--s1) 0 var(--s2); overflow-wrap: anywhere; }
.receipt .reason.quiet { color: var(--paper-mute); }
.receipt .cup { background: var(--paper-2); padding: var(--s1) var(--s2); }
.receipt .cup span { color: var(--paper-mute); display: block; font-size: var(--fs-small); }
.receipt.fresh { animation: print 900ms var(--ease-out) both; }
@keyframes print { from { opacity: 0; transform: translateY(-24px); } }
.wall-empty { color: var(--ink-2); font-size: var(--fs-lead); }

/* ---------- join band (café → card) ---------- */
.join { display: grid; gap: var(--s3); justify-items: start; background: var(--ground-2); padding: clamp(28px, 5vw, 64px); }
.join p { margin: var(--s2) 0 0; color: var(--ink-2); }
.join .action { justify-self: start; }

/* ---------- membership card page ---------- */
.pickup { max-width: 760px; }
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s2); }
.settings { display: grid; gap: var(--s2); margin-top: var(--s3); justify-items: start; }
.settings .check { margin: 0 !important; }
.pickup { background: var(--paper); color: var(--paper-ink); padding: var(--s3); }
.pickup h2 { color: var(--paper-ink); margin-bottom: var(--s3); }
.pickup label { display: block; font-size: var(--fs-small); color: var(--paper-mute); margin-bottom: var(--s1); }
select, input[type="text"] {
  width: 100%; font: var(--fs-lead)/1.2 var(--text); color: var(--ink); background: var(--ground-2); border: 0; border-bottom: 4px solid var(--ink-2);
  padding: 14px 16px; border-radius: 0; appearance: none;
}
select:focus-visible { border-bottom-color: var(--accent); }
.pickup select { background: var(--paper-2); color: var(--paper-ink); border-bottom-color: var(--paper-ink); }
.pickup .action { margin-top: var(--s3); background: var(--paper-ink); color: var(--paper); }
.pickup .action:hover { background: #3a332d; }
.check { display: flex !important; align-items: center; gap: var(--s1); margin: var(--s3) 0 var(--s1) !important; font-size: var(--fs-body) !important; color: inherit !important; cursor: pointer; }
.check[hidden] { display: none !important; }
.check input { width: 20px; height: 20px; accent-color: var(--paper-ink); margin: 0; }
.check.dark input { accent-color: var(--ink); }
.fine { color: var(--paper-mute); margin: 0; }
.habit-check { margin: var(--s1) 0 0 !important; font-size: var(--fs-small) !important; color: var(--paper-mute) !important; white-space: nowrap; }
.habit-check input { width: 16px; height: 16px; flex: none; }
@media (max-width: 480px) { .habit-check { white-space: normal; } }
.import { margin-top: var(--s3); padding-top: var(--s2); border-top: 4px solid var(--paper-2); }
.link.dark-on-paper { color: var(--paper-mute); font-size: var(--fs-body); }
#import { margin-top: var(--s2); }
.pickup input[type="text"] { background: var(--paper-2); color: var(--paper-ink); border-bottom-color: var(--paper-ink); font: var(--fs-body)/1.4 var(--text); }
#import .action { margin-top: var(--s2); }
.err { color: #b3261e; min-height: 1.5em; margin: var(--s1) 0 0; }
.issued { margin-top: 0; }
.issued p { margin: 0 0 var(--s2); }
.issued .lead-in { font-weight: 600; }
.issued h3 { font: 600 var(--fs-small)/1.4 var(--text); margin: var(--s2) 0 var(--s1); display: flex; justify-content: space-between; align-items: center; }
.issued h3 button { font: var(--fs-small) var(--text); background: var(--paper-2); border: 0; padding: 6px 12px; cursor: pointer; color: var(--paper-ink); }
.urlbox { display: grid; grid-template-columns: 1fr auto; background: var(--paper-ink); color: var(--paper); }
.urlbox code { padding: var(--s2); font-size: var(--fs-small); word-break: break-all; }
.urlbox button { background: var(--accent); color: var(--accent-ink); border: 0; padding: 0 16px; font: var(--fs-body) var(--text); cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.urlbox button:active { transform: translateY(2px); }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--s3) 0 var(--s2); }
.tabs button { font: var(--fs-small) var(--text); background: var(--paper-2); color: var(--paper-ink); border: 0; padding: 9px 14px; cursor: pointer; transition: background-color var(--t-hover) ease; }
.tabs button[aria-selected="true"] { background: var(--paper-ink); color: var(--paper); }
.panel p { margin: 0 0 var(--s2); }
.way { margin-top: var(--s3); padding-top: var(--s3); border-top: 4px solid var(--paper-2); }
.way > p { margin: 0 0 var(--s2); }
.pickup .way .action { margin-top: 0; }
.pickup .panel .action { margin: 0 0 var(--s2); }
.support { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.support li { background: var(--paper-2); padding: 6px 12px; font-size: var(--fs-small); }
.support li span { color: var(--paper-mute); margin-left: 4px; }
.support li.ok { background: var(--paper-ink); color: var(--paper); }
.support li.ok span { color: var(--accent); }
.support li.ok::before { content: "✓ "; color: var(--accent); }
.support li.half { background: var(--paper-ink); color: var(--paper); opacity: .85; }
.support li.half span { color: #ffd34d; }
.support li.half::before { content: "✓ "; color: #ffd34d; }
.tested { font-size: var(--fs-small); color: #2f7a3a; margin-left: var(--s1); }
.manual summary { cursor: pointer; font: 600 var(--fs-body)/1.4 var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.manual summary::-webkit-details-marker { display: none; }
.manual summary::after { content: "展开"; font: var(--fs-small) var(--text); background: var(--paper-2); padding: 6px 12px; }
.manual[open] summary::after { content: "收起"; }
.manual .tabs { margin-top: var(--s2); }
.habit { margin-top: var(--s3); padding-top: var(--s3); border-top: 4px solid var(--paper-2); }
.habit p { margin: 0 0 var(--s2); }
.issued .sub-title { font: 600 var(--fs-lead)/1.3 var(--text); margin: 0 0 var(--s1); display: block; }
.where { margin: var(--s2) 0 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.where code { font-size: var(--fs-small); background: var(--paper-2); padding: 1px 4px; }
.panel .action { margin: 4px 0 6px; }
.steps { margin: 0 0 var(--s2); padding-left: 1.3em; display: grid; gap: var(--s1); }
.steps code, .aside code { font-size: var(--fs-small); background: var(--paper-2); padding: 1px 4px; word-break: break-all; }
.aside { color: var(--paper-mute); font-size: var(--fs-small); margin-top: var(--s1) !important; }
pre { margin: 0; background: var(--paper-ink); color: var(--paper); padding: var(--s2); overflow-x: auto; font-size: var(--fs-small); line-height: 1.5; white-space: pre-wrap; word-break: break-all; }

.card { background: var(--paper); color: var(--paper-ink); padding: var(--s3); display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); align-items: center; }
.card canvas { width: 96px; height: 96px; image-rendering: pixelated; background: var(--paper-2); transition: transform var(--t-hover) var(--ease-out); }
.card:hover canvas { transform: translateY(-3px); }
.card h3 { font: 600 var(--fs-lead)/1.2 var(--text); margin: 0 0 4px; overflow-wrap: anywhere; }
.card h3 .card-tag { white-space: nowrap; }
.card .lv { color: #2f7a3a; }
.card small { color: var(--paper-mute); font-size: var(--fs-small); display: block; margin-top: var(--s1); }
.card .badges { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--s1) 0 0; }
.badge { --medal: #d9a62e; display: inline-grid; place-items: center; width: 26px; height: 28px; background: #2b2a26;
  box-shadow: inset 0 0 0 1px var(--medal); cursor: help; transition: transform var(--t-hover) var(--ease-out); }
.badge { position: relative; }
.badge:hover, .badge.show { transform: translateY(-2px); }
.badge-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 5; pointer-events: none;
  background: #2b2a26; color: #f3eee2; font-size: var(--fs-small); line-height: 1.4; padding: 6px 9px; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--medal), 0 4px 10px #0004; opacity: 0; transition: opacity 120ms; }
.badge:hover .badge-tip, .badge:focus-visible .badge-tip, .badge.show .badge-tip { opacity: 1; }
.badge svg { flex: none; }
.badge.b-first-cup { --medal: #b8b2a4; }
.badge.b-early-bird, .badge.b-seven-mornings { --medal: #e8b23a; }
.badge.b-night-regular { --medal: #7d8fd6; }
.badge.b-sleepy-ten { --medal: #7fbf8e; }
.badge.b-regular { --medal: #e07a3a; }
.hint { color: var(--ink-2); margin: 0; }
.notice { background: var(--paper); color: var(--paper-ink); padding: var(--s2) var(--s3); margin: 0 0 var(--s3); max-width: 760px; }
.encounters, .verify, .log { margin-top: var(--s3); display: grid; gap: var(--s2); justify-items: start; max-width: 760px; }
.encounters .sub-title, .verify .sub-title, .log .sub-title { font: 600 var(--fs-lead)/1.3 var(--text); margin: 0; }
.verify p { margin: 0; }
#encounters { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); width: 100%; }
#encounters li { background: var(--ground-2); padding: var(--s2); display: flex; flex-wrap: wrap; gap: 0 4px; align-items: baseline; }
#encounters li small { margin-left: auto; color: var(--ink-2); font-size: var(--fs-small); }
.link { background: none; border: 0; color: var(--ink-2); font: var(--fs-small) var(--text); padding: 0; cursor: pointer; text-decoration: underline; justify-self: start; }

/* the visit: one heading with the rules, then three steps in the order an agent takes them */
.steps-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.steps-row li { background: var(--ground-2); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.steps-row h3 { font: 600 var(--fs-lead)/1.3 var(--text); margin: 0; }
.steps-row p { margin: 0; flex: 1; }
.steps-row code { font-size: var(--fs-small); color: var(--ink-2); }

@media (max-width: 860px) {
  .steps-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  main { padding: 0 16px; }
  .wordmark-cn { display: none; }
  .stage-bar { flex-direction: column; align-items: stretch; }
  dialog.photo { padding: var(--s2); }
  nav { gap: var(--s2); }
  .card { grid-template-columns: 72px 1fr; padding: var(--s2); gap: var(--s2); }
  .agents { grid-template-columns: 1fr; }
  .card canvas { width: 72px; height: 72px; }
  .pickup { padding: var(--s2) var(--s2) var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js [data-reveal] > * { opacity: 1; transform: none; }
}

.log-head { display: flex; align-items: baseline; gap: var(--s2); width: 100%; }
.log-head .link { margin-left: auto; }
.log { max-width: none; }
#log { width: 100%; }
.card.opens { cursor: pointer; }
.card.opens .more { display: inline-block; margin-top: 8px; font-size: var(--fs-small); color: var(--paper-mute); text-decoration: underline; }
.card.opens[aria-expanded="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }
.card.opens:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.stage-actions { display: flex; gap: var(--s1); flex: none; }
@media (max-width: 640px) { .stage-actions > * { flex: 1; } }

/* privacy page */
.prose { max-width: 760px; }
.prose h2, .contact h2 { font: 600 var(--fs-lead)/1.3 var(--text); margin: var(--s3) 0 var(--s1); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s1); }
.contact { max-width: 760px; margin-top: var(--s3); }
.feedback { display: grid; gap: var(--s1); margin-top: var(--s2); }
.feedback textarea, .feedback input { font: var(--fs-body) var(--text); padding: var(--s1); background: var(--ground-2); color: var(--ink); border: 1px solid var(--ink-2); border-radius: 4px; }
.feedback .action { justify-self: start; margin-top: var(--s1); }
footer .small a { color: inherit; margin-left: 4px; }
/* report a receipt */
.receipt .flag { background: none; border: 0; padding: 0; font: var(--fs-small) var(--text); color: var(--paper-mute); cursor: pointer; text-decoration: underline; }
.receipt .flag:disabled { text-decoration: none; cursor: default; }
.link.danger { color: #e8a39b; }

/* film mode: nothing but the shop */
.film #hud, .film #count { display: none !important; }
.ov.retry { transform: translate(-50%, -100%); background: rgba(20, 24, 22, .85); color: #ffd34d; font-size: 12px; padding: 2px 8px; border-radius: 3px; white-space: nowrap; pointer-events: none; }