/* The NutPub: midnight, whisky amber, cream. Poster type (Bebas Neue, SIL OFL). */
@font-face {
  font-family: "Bebas Neue";
  src: url(/fonts/BebasNeue-Regular.ttf) format("truetype");
  font-display: swap;
}
:root {
  --midnight: #0b1426;
  --deep: #050914;
  --amber: #d9953a;
  --cream: #efe3c8;
  --smoke: #8e97ad;
  --poster: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* or a class's own display (.btn, .own) would show it anyway */
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--deep);
  color: var(--cream);
  font: 17px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  text-align: center;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}
main { max-width: 520px; margin: 0 auto; padding: 24px 0; }
.wordmark { font: 400 clamp(44px, 14vw, 72px)/1 var(--poster); letter-spacing: .08em; margin: 8px 0 4px; }
.tag { font: 400 18px/1 var(--poster); letter-spacing: .2em; color: var(--amber); margin: 0 0 32px; }
.checks { list-style: none; padding: 0; margin: 0 auto; text-align: left; display: inline-block; }
.checks li { padding: 6px 0; }
.checks li::before { content: "·"; color: var(--smoke); margin-right: 10px; }
.checks li.ok::before { content: "✓"; color: var(--amber); }
.checks li.bad::before { content: "✕"; color: var(--cream); }
.small { color: var(--smoke); font-size: 14px; }
code { font-family: var(--mono); font-size: .9em; }

/* ---- The setup page: a desk tool, Mac first, works on a phone */
body.setup main { max-width: 640px; text-align: left; padding-bottom: 120px; }
body.setup .wordmark, body.setup .tag { text-align: center; }
.locked { text-align: center; }
.takings .amount { font-size: 20px; margin: 0 0 10px; }
.panel { border: 1px solid rgb(239 227 200 / .14); border-radius: 6px; padding: 18px 18px 8px; margin: 0 0 16px; background: rgb(11 20 38 / .6); }
.panel h2 { font: 400 26px/1 var(--poster); letter-spacing: .1em; color: var(--amber); margin: 0 0 12px; }
.panel label, .panel .label { display: block; margin: 0 0 14px; }
.panel .label { margin-bottom: 6px; color: var(--smoke); font-size: 15px; }
.hint { color: var(--smoke); font-size: 15px; margin: -4px 0 14px; }
.panel input:not([type=checkbox]):not([type=radio]), .panel select, .panel textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; color: var(--cream); background: var(--deep);
  border: 1px solid rgb(239 227 200 / .25); border-radius: 4px;
}
.panel input:focus, .panel select:focus, .panel textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.sats { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--smoke); }
.sats input { width: 7.5em !important; margin-top: 0 !important; display: inline-block !important; }
.choice { display: flex !important; gap: 12px; align-items: flex-start; cursor: pointer; }
.choice input { accent-color: var(--amber); width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.choice.inline { display: inline-flex !important; margin-right: 18px; align-items: center; }
.choice.inline input { margin: 0; }
.indent { margin-left: 32px !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.row input, .row select { flex: 1 1 12em; margin-top: 0 !important; }
.preview { margin: 4px 0 14px; }
.site-host { white-space: nowrap; }
.sats input[data-path="page"] { width: auto !important; flex: 1; }
.share-link { font-size: 20px; margin: 0 0 14px; word-break: break-all; }
.share-link a { color: var(--cream); }
.qr { display: block; border-radius: 4px; margin: 4px 0 14px; }
.photo-preview { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 4px; margin: 0 0 14px; filter: brightness(.6); }
.btn {
  display: inline-block; font: 400 20px/1 var(--poster); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream); background: transparent; border: 1px solid var(--cream); border-radius: 3px;
  padding: 10px 16px 8px; cursor: pointer; text-decoration: none;
}
.btn.quiet { border-color: rgb(239 227 200 / .35); color: var(--cream); } /* cream, not grey: venues are dark rooms */
.btn.primary { background: var(--amber); border-color: var(--amber); color: var(--deep); }
.btn:disabled { opacity: .4; cursor: default; }
.savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: 16px; align-items: center; justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgb(5 9 20 / .94); border-top: 1px solid rgb(239 227 200 / .14);
}
.savebar p { margin: 0; flex: 0 1 480px; font-size: 15px; color: var(--smoke); }
.savebar p.ok { color: var(--cream); }
.savebar p.todo { color: var(--amber); }
.savebar p.bad { color: var(--cream); font-weight: 600; }

/* ---- Wallet */
.big { font: 400 clamp(64px, 22vw, 112px)/1 var(--poster); color: var(--amber); margin: 8px 0 4px; }
.big small { font-size: .35em; color: var(--cream); letter-spacing: .1em; }
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 20px 0; }
body.wallet .buttons { gap: 10px; }
body.wallet .buttons .btn { padding-left: 12px; padding-right: 12px; }
/* Cream, not grey: venues are dark rooms. */
.notes { text-align: left; color: var(--cream); font-size: 16px; padding-left: 1.2em; margin: 28px 0 0; }
.notes li + li { margin-top: 14px; }
.paste { margin: 0 0 18px; }
.paste textarea { margin: 0 0 10px; }
body.wallet textarea {
  width: 100%; font: 12px/1.4 var(--mono); color: var(--cream); background: var(--deep);
  border: 1px solid rgb(239 227 200 / .25); border-radius: 4px; padding: 10px; word-break: break-all;
}
.status { min-height: 1.5em; color: var(--cream); }

/* ---- The TEST banner: on every page while the show runs on the test mint (added by the server) */
.test-banner {
  margin: 0 -16px; padding: 6px 16px calc(5px);
  padding-top: calc(6px + env(safe-area-inset-top));
  font: 400 15px/1.2 var(--poster); letter-spacing: .22em; text-transform: uppercase;
  color: var(--deep); background: var(--amber); text-align: center;
}

/* ---- The viewer page */
/* The background photo: dimmed, with a little grain, behind everything. */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--deep); }
.backdrop i { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.5s; filter: brightness(.85) saturate(.9); }
.backdrop i.on { opacity: 1; }
.backdrop::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgb(5 9 20 / .05), rgb(5 9 20 / .3)); }
.backdrop::after {
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: .16; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.viewer { background: transparent; }
/* Brighter photo (Tue 6: ~70% less dim): everything over it gets a dark backing or a shadow, to stay readable. */
body.viewer .wordmark, body.viewer .tag, body.viewer .about, body.viewer .status { text-shadow: 0 1px 3px rgb(5 9 20 / .9), 0 0 18px rgb(5 9 20 / .7); }
body.viewer .purse { background: rgb(5 9 20 / .72); border-color: rgb(239 227 200 / .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.viewer .money .btn, body.viewer .own .btn:not(.primary) { background: rgb(5 9 20 / .6); }
html:has(body.viewer) { background: var(--deep); }
.about { max-width: 34em; margin: -8px auto 16px; font-size: 16px; color: var(--cream); }
.optional { color: var(--smoke); font-size: 14px; }
.small-mark { font-size: clamp(36px, 11vw, 56px); margin-top: 16px; }
body.viewer .tag { margin-bottom: 18px; }
/* The player: give it a width of its own (its children are all positioned, so it has none otherwise). */
.player { position: relative; width: 100%; aspect-ratio: 1280 / 676; background: #000; border-radius: 4px; overflow: hidden; }
/* Phones: the picture runs edge to edge. */
@media (max-width: 600px) { body.viewer .player { width: auto; margin: 0 -16px; border-radius: 0; } }
/* Video shape (setup page): 16:9, or 9:16 for a phone filming upright, kept within the screen's height. */
body[data-shape="16:9"] .player { aspect-ratio: 16 / 9; }
body[data-shape="9:16"] .player { aspect-ratio: 9 / 16; width: min(100%, calc(78svh * 9 / 16)); margin: 0 auto; border-radius: 4px; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.player video.on { opacity: 1; }
/* Before the set plays, the player is see-through: the photo (and the artist's face) shows, only the controls sit on it. */
body.viewer:not(.playing) .player { background: rgb(5 9 20 / .15); box-shadow: inset 0 0 0 1px rgb(239 227 200 / .14); }
body.viewer:not(.playing) .bar { background: none; }
.big-play {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--amber); background: rgb(5 9 20 / .55); color: var(--amber);
}
.big-play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
body.playing .big-play { display: none; }

/* Controls on the picture, like a video site's: play/stop and the meter left, full screen right. */
.bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
  padding: 20px 6px 4px; background: linear-gradient(transparent, rgb(5 9 20 / .85));
}
/* Amber, not cream: the controls must be found in a dark room. */
.icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--amber); cursor: pointer; }
.icon:disabled { opacity: .4; cursor: default; }
.icon svg { width: 26px; height: 26px; fill: currentColor; }
#full svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-stop, body.playing .i-play, .i-exit, body.full .i-full { display: none; }
body.playing .i-stop, body.full .i-exit { display: block; }
body.sideways #full { visibility: hidden; } /* turning the phone back is the way out */
.spacer { flex: 1; }
#ov-tip { display: none; flex: none; font-size: 17px; padding: 8px 12px 6px; background: rgb(5 9 20 / .6); }
body.full #ov-tip { display: inline-block; }

/* Below the picture: what just happened, then the money buttons, compact. */
body.viewer .status { margin: 12px 0 0; }
.money { gap: 10px; margin: 12px 0; }
.money .btn { font-size: 17px; letter-spacing: .08em; padding: 9px 10px 7px; }
/* The wallet, big and amber, above the money buttons. */
/* Quiet: a hairline and a faint fill, so the eye stays on the picture. */
.purse {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin: 14px 0 4px;
  padding: 12px 14px 10px; border: 1px solid rgb(239 227 200 / .1); border-radius: 8px; background: rgb(239 227 200 / .03);
}
.purse-sum { flex: none; display: flex; flex-direction: column; align-items: flex-start; color: var(--cream); text-decoration: none; text-align: left; }
.purse-sum b { font: 400 40px/1 var(--poster); color: var(--amber); letter-spacing: .04em; }
.purse-meter {
  flex: 1 0 100%; display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-top: 8px;
  border-top: 1px solid rgb(239 227 200 / .08); font-size: 14px; color: var(--cream); opacity: .85;
}
.purse-sum span { font-size: 14px; white-space: nowrap; }
.purse-actions .btn { white-space: nowrap; }
/* No test top-up (a real mint): Wallet takes the right side, a bigger target. */
.purse-actions.solo { align-self: stretch; }
.purse-actions.solo #wallet-page { flex: 1; display: grid; place-items: center; font-size: 22px; max-width: 220px; }
.purse-actions { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.btn.quiet { font-size: 16px; padding: 7px 12px 5px; }
.own { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin: 0 0 12px; }
.own .btn { white-space: nowrap; }
.own input {
  width: 6em; padding: 8px 10px; -moz-appearance: textfield; appearance: textfield; font: inherit; color: var(--cream); background: var(--deep);
  border: 1px solid rgb(239 227 200 / .25); border-radius: 4px; text-align: center;
}
.own input::-webkit-inner-spin-button, .own input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.own input:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }

/* Full screen (the button, or a phone turned sideways): the picture fills the screen, the tip joins the controls. */
body.viewer.full { padding: 0; overflow: hidden; }
body.viewer.full main { max-width: none; padding: 0; }
body.viewer.full .player { position: fixed; inset: 0; width: auto; margin: 0; border-radius: 0; aspect-ratio: auto; z-index: 2; }
body.viewer.full .player video { object-fit: contain; }
body.viewer.full .bar {
  padding: 28px max(10px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
/* What just happened ("wallet's empty"), over the picture at the top. */
body.viewer.full .status {
  position: fixed; z-index: 3; top: calc(44px + env(safe-area-inset-top)); left: 0; right: 0; margin: 0 auto; width: fit-content;
  max-width: 80%; min-height: 0; padding: 6px 12px; border-radius: 4px; background: rgb(5 9 20 / .75);
}
body.viewer.full .status:empty { display: none; }
/* The TEST strip shrinks to a small corner tag, so it stops covering the picture. */
body.viewer.full .test-banner {
  position: fixed; z-index: 3; top: calc(8px + env(safe-area-inset-top)); left: calc(8px + env(safe-area-inset-left));
  margin: 0; padding: 4px 8px 3px; font-size: 12px; letter-spacing: .16em; border-radius: 3px; opacity: .9;
}

/* ---- The night (Thu 29 Oct): door, welcome, free drink, chat, stage lights, closing time. */
.masthead .when { margin: -10px 0 16px; font-size: 15px; color: var(--cream); }
.card { border: 1px solid rgb(239 227 200 / .14); border-radius: 8px; padding: 16px; background: rgb(5 9 20 / .78); text-align: left; margin: 0 0 14px; }
.card-title { font: 400 26px/1.05 var(--poster); letter-spacing: .06em; margin: 0; }
.card-title #ticket-price { color: var(--amber); }
.card .hint { margin: 4px 0 12px; font-size: 14px; color: var(--smoke); }
.btn.wide { display: block; width: 100%; margin: 0 0 8px; text-align: center; }
.youre-in { font: 400 44px/1 var(--poster); letter-spacing: .08em; color: var(--amber); margin: 0 0 12px; }
.welcome { position: relative; margin: 0 -16px 14px; }
.welcome img { display: block; width: 100%; height: 220px; object-fit: cover; }
.welcome figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 12px; text-align: left; font-size: 15px; background: linear-gradient(transparent, rgb(5 9 20 / .92)); }
.welcome figcaption:empty { display: none; }
.drink { display: flex; gap: 14px; align-items: center; border-color: rgb(217 149 58 / .6); }
.drink img { flex: none; border-radius: 3px; background: var(--cream); }
.doors-sign { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; font: 400 30px/1 var(--poster); letter-spacing: .14em; color: var(--cream); background: rgb(5 9 20 / .55); z-index: 1; }
body[data-as="room"][data-stage="doors"] .big-play, body[data-as="room"][data-stage="doors"] .bar { display: none; }
.soon { font: 400 13px/1 var(--poster); letter-spacing: .14em; padding: 3px 6px 2px; border: 1px solid rgb(239 227 200 / .4); border-radius: 3px; }

/* The chat: newest at the bottom, like a live stream's. */
.chat { text-align: left; margin: 12px 0 0; }
.feed { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.feed li { font-size: 14px; line-height: 1.35; padding: 4px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.feed .from { color: var(--smoke); font-weight: 600; }
.feed li.tipped { background: rgb(217 149 58 / .16); }
.feed .amt { font: 400 14px/1 var(--poster); letter-spacing: .1em; color: var(--deep); background: var(--amber); border-radius: 3px; padding: 3px 6px 2px; }
.say { display: flex; gap: 8px; margin: 8px 0 0; }
.say input { flex: 1; min-width: 0; padding: 9px 10px; font: 15px var(--body); color: var(--cream); background: var(--deep); border: 1px solid rgb(239 227 200 / .25); border-radius: 4px; }
.nostr { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nostr .btn { font-size: 14px; padding: 5px 8px 3px; }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 13px; margin: 0 0 8px; }
.goal #goal-sum { color: var(--amber); }
.goal i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgb(239 227 200 / .12); overflow: hidden; }
.goal b { display: block; height: 100%; width: 0; background: var(--amber); transition: width .6s; }
#card-tip { font-size: 15px; }

/* In the room, once the set plays: the phone is the stage. Picture fills the screen upright (Insta Live, TikTok);
   the chat rises on the right from the bottom, see-through, just above the message box and the money. One column
   stacked at the bottom, so nothing floats in between and nothing covers the play button. */
body.immersive .masthead, body.immersive .nostr { display: none; }
body.immersive main { position: fixed; inset: 0; max-width: none; padding: 0 12px 10px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
body.immersive main > * { pointer-events: auto; }
body.immersive .player { position: fixed; inset: 0; width: auto; margin: 0; aspect-ratio: auto; border-radius: 0; z-index: 0; }
body.immersive .player video { object-fit: cover; }
body.immersive .player .bar { top: 30px; bottom: auto; background: none; }
body.immersive .chat { position: relative; z-index: 2; margin: 0; align-self: flex-end; width: min(100%, 420px); pointer-events: none; }
body.immersive .chat .say, body.immersive .chat .goal { pointer-events: auto; }
body.immersive .feed { max-height: 34vh; align-items: flex-end; text-align: right; -webkit-mask-image: linear-gradient(transparent, #000 30%); mask-image: linear-gradient(transparent, #000 30%); }
body.immersive .feed li { background: none; text-shadow: 0 1px 3px rgb(0 0 0 / .9); padding: 2px 4px; }
body.immersive .feed li.tipped { background: rgb(5 9 20 / .45); }
body.immersive .say input { background: rgb(5 9 20 / .55); }
body.immersive .bottom { position: relative; z-index: 2; margin: 6px -12px -10px; padding: 18px 12px 10px; background: linear-gradient(transparent, rgb(5 9 20 / .92) 35%); }
body.immersive .money { margin: 4px 0; }
body.immersive .status { position: fixed; top: 60px; left: 0; right: 0; z-index: 2; }
body.immersive .purse { margin: 4px 0 0; padding: 6px 10px; }
body.immersive .purse-sum b { font-size: 26px; }
body.immersive .purse-meter { display: none; }
.back-link { display: inline-block; margin: 12px 0 0; font-size: 15px; color: var(--cream); text-decoration: none; opacity: .85; }
.back-link:hover { color: var(--amber); }
body.viewer:not(.immersive) main { position: relative; }
.back-row { margin: 0 0 8px; text-align: left; }

/* At home: the same full-picture view, with the title top left and the ticket above the money. */
body.immersive[data-as="home"] .masthead { display: block; position: fixed; top: 84px; left: 16px; text-align: left; z-index: 2; pointer-events: none; }
body.immersive[data-as="home"] .masthead .wordmark { font-size: 36px; margin: 0; text-shadow: 0 2px 10px rgb(5 9 20 / .8); }
body.immersive[data-as="home"] .masthead .tag { margin: 4px 0 0; text-align: left; }
body.immersive[data-as="home"] .when { margin: 4px 0 0; text-shadow: 0 1px 4px rgb(5 9 20 / .9); }
body.immersive[data-as="home"] .door { position: relative; z-index: 2; align-self: flex-start; width: min(100%, 420px); margin: 0 0 8px; }
body.immersive[data-as="home"] .doors-sign { background: rgb(5 9 20 / .35); }
body.immersive .back-link { position: fixed; top: 42px; left: 64px; z-index: 3; }

/* Stage lights: three, one by one, then they fade and the set is there. */
.lights { position: fixed; inset: 0; z-index: 9; background: #000; display: flex; justify-content: center; align-items: flex-start; gap: 18%; padding-top: 12%; }
.lights i { width: 46px; height: 46px; border-radius: 50%; background: #2a2010; box-shadow: none; }
.lights.go i { animation: lamp .4s ease-out forwards; }
.lights.go i:nth-child(2) { animation-delay: .7s; }
.lights.go i:nth-child(3) { animation-delay: 1.4s; }
.lights.go { animation: lights-out .8s 2.6s ease-in forwards; }
@keyframes lamp { to { background: #ffd27a; box-shadow: 0 0 40px 18px rgb(255 190 90 / .55), 0 260px 160px -40px rgb(255 190 90 / .18); } }
@keyframes lights-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lights.go, .lights.go i { animation-duration: .01s; animation-delay: 0s; } }

/* Closing time. */
.closing { position: fixed; inset: 0; z-index: 5; display: flex; align-items: flex-end; text-align: center; }
.closing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.closing div { position: relative; width: 100%; padding: 0 24px 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cheers { font: 400 72px/.9 var(--poster); color: var(--amber); margin: 0; letter-spacing: .04em; }
.zero { font: 400 24px/1 var(--poster); letter-spacing: .12em; margin: 0; padding: 8px 14px 6px; border: 1px solid var(--cream); border-radius: 3px; background: rgb(5 9 20 / .6); }

/* ---- The bar: its drinks, and the pint (from the hackathon's Pint Signal). */
.drinks { list-style: none; padding: 0; margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.drinks li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.bar textarea { width: 100%; font: 12px/1.4 var(--mono); color: var(--cream); background: var(--deep); border: 1px solid rgb(239 227 200 / .25); border-radius: 4px; padding: 8px; word-break: break-all; }
.pint-screen { position: fixed; inset: 0; z-index: 10; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 16px; }
.pint-screen p { margin: 0; }
#pint-line { font: 400 44px/1 var(--poster); letter-spacing: .06em; color: var(--amber); }
.pint-screen .pint { width: min(52vw, 40vh, 240px); height: auto; overflow: visible; }
.pint-screen .fill { animation: pour 2.6s cubic-bezier(.3,.7,.4,1) forwards; transform: translateY(250px); }
.pint-screen .bubbles circle { animation: rise 2.2s linear infinite; }
.pint-screen .head { transform-origin: 100px 48px; transform: scaleY(0); animation: head .5s 2.4s ease-out forwards; }
.pint-screen.again .fill, .pint-screen.again .head { animation: none; transform: none; } /* already full: it was poured */
.pint-screen .ipa { font: 400 52px var(--poster); fill: none; stroke: #1a0f00; stroke-width: 1.6; letter-spacing: 4px; }
.pint-screen .ipa-small { font: 600 8.5px var(--body); fill: #1a0f00; letter-spacing: .6px; }
@keyframes pour { to { transform: translateY(0); } }
@keyframes rise { to { transform: translateY(-200px); opacity: 0; } }
@keyframes head { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .pint-screen .fill, .pint-screen .head { animation: none; transform: none; } }

/* ---- The setup page, desktop first (Thu 29 Oct): two columns of panels, saved as you type. */
body.setup.wide main { max-width: 1180px; padding-top: 20px; }
.setup-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 18px; }
.setup-title { font: 400 52px/1 var(--poster); letter-spacing: .06em; margin: 0; text-align: left; }
.setup-head .hint { margin: 6px 0 0; }
.who { display: flex; border: 1px solid rgb(239 227 200 / .35); border-radius: 4px; overflow: hidden; }
.who button { font: 400 18px/1 var(--poster); letter-spacing: .12em; padding: 10px 14px 8px; background: transparent; color: var(--cream); border: 0; border-left: 1px solid rgb(239 227 200 / .35); }
.who button:first-child { border-left: 0; }
.who button.on { background: var(--amber); color: var(--deep); }
.who button:disabled { color: var(--smoke); cursor: default; }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 820px) { .panels { grid-template-columns: minmax(0, 1fr); } }
.panel h2 .works, .panel h2 .soon, .panel label .soon { vertical-align: middle; }
.works { font: 400 13px/1 var(--poster); letter-spacing: .14em; padding: 4px 7px 3px; border-radius: 3px; color: var(--deep); background: var(--amber); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.goal-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 12px; }
.split { border: 1px dashed rgb(217 149 58 / .6); border-radius: 4px; padding: 10px 12px; font-size: 15px; margin: 4px 0 14px; }
.split:empty { display: none; }
.poster-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.poster-row > div { flex: 1 1 260px; }
.poster-row .qr { margin: 0; background: var(--cream); }
.panel input.inline-sats { display: inline-block !important; width: 5em !important; margin: 0 4px !important; padding: 4px 6px !important; }
.panel input:disabled { opacity: .55; }
body.viewer .money .btn.primary { background: var(--amber); color: var(--deep); }
.signin { max-width: 560px; margin: 24px auto; text-align: left; }
.signin input { display: block; width: 100%; padding: 10px 12px; font: 15px var(--body); color: var(--cream); background: var(--deep); border: 1px solid rgb(239 227 200 / .25); border-radius: 4px; }

/* The setup page's phone: the real show page beside the form, on screens wide enough for both. */
body.setup.wide main { max-width: 1600px; }
.setup-split { display: flex; gap: 24px; align-items: flex-start; }
.setup-split > form { flex: 1; min-width: 0; }
.preview-phone { flex: none; width: 390px; position: sticky; top: 16px; }
.preview-phone .label { text-align: center; }
.phone-frame { width: 390px; height: 780px; box-sizing: border-box; border: 10px solid #1b2131; border-radius: 48px; overflow: hidden; background: var(--deep); box-shadow: 0 30px 80px rgb(0 0 0 / .55); }
.phone-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1500px) { .setup-split .panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .preview-phone { display: none; } }
.door-wallet { margin: -4px 0 12px; font-size: 16px; }
.door-wallet b { font: 400 24px/1 var(--poster); color: var(--amber); letter-spacing: .04em; }

/* The date line: in the poster face, like the rest of the brand, small enough to leave the photo alone. */
.when { font: 400 17px/1.2 var(--poster); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); margin: 2px 0 14px; }
/* The wallet: what it is first, then how much. */
.purse-sum { gap: 2px; }
.purse-sum span:first-child { font: 400 15px/1 var(--poster); letter-spacing: .16em; text-transform: uppercase; }

/* Watching at home on a wide screen: a video site's page. The picture top left, the title under it, the ticket and
   the money below; the live chat in its own column on the right, full height. */
@media (min-width: 900px) {
  body[data-as="home"] main { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px 20px; align-items: start; text-align: left; padding-top: 12px; }
  body[data-as="home"] .back-link { grid-column: 1 / -1; order: 0; margin: 0; }
  body[data-as="home"] .player { grid-column: 1; order: 1; border-radius: 8px; }
  body[data-as="home"] .masthead { grid-column: 1; order: 2; }
  body[data-as="home"] .masthead .wordmark { font-size: 30px; margin: 0; text-align: left; }
  body[data-as="home"] .masthead .tag { text-align: left; margin: 4px 0 0; font-size: 20px; }
  body[data-as="home"] .when { grid-column: 1; order: 2; text-align: left; margin: -8px 0 0; }
  body[data-as="home"] .door { grid-column: 1; order: 3; margin: 0; }
  body[data-as="home"] .status { grid-column: 1; order: 4; margin: 0; }
  body[data-as="home"] .bottom { grid-column: 1; order: 5; }
  body[data-as="home"] .bottom .money { justify-content: flex-start; }
  body[data-as="home"] .chat { grid-column: 2; grid-row: 2 / span 5; margin: 0; padding: 12px; border: 1px solid rgb(239 227 200 / .14); border-radius: 8px; background: rgb(5 9 20 / .78); display: flex; flex-direction: column; min-height: 520px; }
  body[data-as="home"] .feed { flex: 1; max-height: 560px; }
}

/* The setup page's top right: the role (Artist; the others coming soon) and Doors open, the next step. */
.head-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.who-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.coming { margin: 0; font-size: 13px; color: var(--smoke); }
.who button:disabled { color: rgb(142 151 173 / .55); background: rgb(239 227 200 / .03); }
.btn.doors { font-size: 22px; padding: 12px 20px 10px; }
/* The poster, standing under the phone. */
.preview-phone .panel { margin-top: 16px; }
.poster-col { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.poster-col .qr { margin: 0; background: var(--cream); }
.poster-col .row { justify-content: center; }
.poster-col .share-link { font-size: 15px; margin: 0 0 10px; }

/* The room's phone before the set: the photo and the drink at the top, the goal and the tips at the very bottom,
   so the drink's QR gets the room. No wallet buttons: test sats arrive by themselves, and the ticket box says so. */
body.viewer[data-as="room"]:not(.immersive) main { min-height: calc(100dvh - 40px); display: flex; flex-direction: column; padding-bottom: 8px; }
body.viewer[data-as="room"]:not(.immersive) .chat { margin-top: auto; }
body.viewer[data-as="room"]:not(.immersive) .door ~ .status:empty { display: none; }
body[data-as="room"][data-stage="doors"] .feed, body[data-as="room"][data-stage="doors"] .say, body[data-as="room"][data-stage="doors"] .nostr { display: none; }
body[data-as="room"] .purse-actions, body[data-as="room"] .purse-meter { display: none; }
body[data-as="room"] .purse { justify-content: center; padding: 6px 10px; margin: 4px 0 0; border: 0; background: none; }
body[data-as="room"] .purse-sum { flex-direction: row; align-items: baseline; gap: 6px; }
body[data-as="room"] .purse-sum b { font-size: 22px; }
body[data-as="room"]:not(.immersive) .bottom:has(#money[hidden]) .purse { display: none; } /* at the door, the ticket box shows the wallet */
.drink { flex-direction: column; text-align: center; }
.drink img { width: 200px; height: 200px; }
.linkish { background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; font-size: 14px; color: var(--amber); text-decoration: underline; cursor: pointer; }
body[data-as="room"] .welcome img { height: 150px; }
.drink img { width: 170px; height: 170px; }

/* The room's phone at the door: the artist's face in the top half (the photo behind), the date and the ticket below. */
body.viewer.at-door .when { margin-top: auto; text-shadow: 0 1px 4px rgb(5 9 20 / .9); }
body.viewer.at-door .door { margin-bottom: 0; }
@media (min-width: 900px) { body.framed[data-as="home"] .chat { grid-row: 1 / span 5; } }

/* ---- Watching at home inside page 2 (board 2): black, the video and its title left, the live chat right. */
.live-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font: 400 15px/1 var(--poster); letter-spacing: .14em; color: #fff; background: #c0392b; padding: 5px 8px 4px; border-radius: 3px; }
.chat-head, .say-buttons #say-tip, #whole { display: none; }
body[data-as="home"] .chat-head { display: flex; justify-content: space-between; align-items: center; margin: -12px -12px 8px; padding: 12px 14px; border-bottom: 1px solid rgb(239 227 200 / .14); font: 400 22px/1 var(--poster); letter-spacing: .12em; }
body[data-as="home"] #whole:not([hidden]) { display: inline-block; }
body[data-as="home"] .say { flex-wrap: wrap; }
body[data-as="home"] .say input { flex: 1 1 100%; }
body[data-as="home"] .say-buttons { display: flex; gap: 8px; flex: 1 1 100%; }
body[data-as="home"] .say-buttons .btn { flex: 1; font-size: 17px; }
body[data-as="home"] .say-buttons #say-tip { display: inline-block; }
body[data-as="home"] > main > .bottom .goal, body[data-as="home"] .bottom .goal { padding: 14px; border: 1px solid rgb(239 227 200 / .14); border-radius: 6px; margin: 14px 0 0; font-size: 15px; }
body.framed[data-as="home"] { background: #050914; padding: 0 16px; }
body.framed[data-as="home"] .backdrop { display: none; }
body.framed[data-as="home"] main { max-width: none; padding-top: 16px; }
body.framed[data-as="home"] .masthead .wordmark { display: none; }
body.framed[data-as="home"] .masthead .tag { font: 600 22px/1.25 var(--body); letter-spacing: 0; text-transform: none; color: var(--cream); margin: 0; }
body.framed[data-as="home"] .when { font: 15px/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--smoke); margin: 2px 0 0; }
body.framed[data-as="home"] .door, body.framed[data-as="home"] .purse, body.framed[data-as="home"] .nostr .soon { }
body.framed[data-as="home"] .door, body.framed[data-as="home"] .purse { display: none; }
@media (min-width: 900px) {
  body.framed[data-as="home"] main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  body.framed[data-as="home"] .chat { min-height: 0; max-height: 640px; }
}
@media (min-width: 900px) { body.framed[data-as="home"] .chat { min-height: 520px; } body.framed[data-as="home"] .feed { min-height: 300px; } }
body.framed[data-as="home"] .status:empty { display: none; }
/* Inside the room at doors: one picture (the artist's welcome), on black. */
body.inside-doors .backdrop { display: none; }
body.inside-doors { background: var(--deep); }
/* The room's phone: the clip is landscape, so the upright crop shifts right of centre, where Longy stands. */
body.immersive .player video { object-position: 62% 30%; }
body.framed.takings { padding-top: 0; }
body.framed.takings .wordmark, body.framed.takings .tag + .locked ~ * .btn.quiet[href="/setup.html"], body.framed.takings p:has(> a[href="/setup.html"]) { display: none; }
body.framed.takings .tag { margin: 12px 0 14px; font-size: 22px; }
body.framed.takings main { padding-top: 0; }

/* Mute and volume on the picture. Phones show mute only: their own buttons set the level. */
.i-muted, body.muted .i-sound { display: none; }
body.muted .i-muted { display: block; }
#vol { width: 90px; accent-color: var(--amber); }
@media (max-width: 600px) { #vol { display: none; } }
body.immersive #vol { display: none; }
/* The phone's status line sat over the play/stop button at the top: lower it, and let taps through. */
body.immersive .status { top: 84px; pointer-events: none; }
body.immersive .player .bar { z-index: 3; }
/* The upright crop: show more of the left of the clip. */
body.immersive .player video { object-position: 25% 30%; }

/* In the room at doors: the artist's photo fills the phone between the date and the tips (it shares the space with
   the drink's QR when the free drink is on), so there's no empty gap. */
body.inside-doors .inside { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
body.inside-doors .welcome { flex: 1 1 240px; min-height: 200px; display: flex; margin-bottom: 12px; }
body.inside-doors .welcome img { flex: 1; width: 100%; height: auto; min-height: 0; object-fit: cover; object-position: 30% 30%; }
body.inside-doors .chat { margin-top: 0; }
/* Small wins (29 Oct): tags sit on their line; the live chat's head aligns; buttons show where focus is. */
.soon, .works { vertical-align: 2px; }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.btn:not(:disabled):hover { filter: brightness(1.1); }
/* The phone shows the card button once, by the tips; the Nostr line stays on one line. */
body[data-as="room"] #card { display: none; }
.nostr { flex-wrap: nowrap; white-space: nowrap; font-size: 12px; }
.nostr .btn { font-size: 13px; padding: 4px 7px 2px; }