/* Fuego Members on the web. Dark Fuego look: black #1a1a1a, logo gold #f0e2cf, deeper gold #a8975a (lines, focus).
   Sections: tokens · base · layout & tab bar · controls · lists & panels · sheets · welcome · cards · QR screen · scanner. */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #1a1a1a;
  --bg-deep: #0d0c0c;
  --panel: #1c1b19;
  --panel-2: #24221f;
  --line: rgba(220, 215, 186, .16);
  --gold: #f0e2cf;
  --gold-deep: #a8975a;
  --text: #f3efe6;
  --muted: #a7a18b;
  --ok: #8fd16b;
  --wait: #e6c46a;
  --bad: #ec8a78;
  --danger: #b3261e;
  --radius: 16px;
  --tabbar-h: 62px;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tx: 0;
  --ty: 0;
  color-scheme: dark;
}

/* Samsung Internet's dark mode recolours (darkens and inverts) pages that don't declare their own dark styles,
   which turned the cream VIP card dark gold on Android. Declaring a prefers-color-scheme: dark block tells it the
   site already is dark, so it leaves the colours alone. Keep this block. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #1a1a1a; --bg-deep: #0d0c0c; }
  html, body { background: #0d0c0c; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-deep); }
body {
  margin: 0; min-height: 100dvh; background: var(--bg-deep); color: var(--text);
  font: 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--gold); }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 6px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.small, small { font-size: 13px; }
.center { text-align: center; }
.gold { color: var(--gold); }
.ok { color: var(--ok); }
.serif { font-family: var(--serif); font-weight: 600; }
.big { font-size: 24px; }
.pre { white-space: pre-line; }
.error { color: var(--bad); font-size: 14px; }
.eyebrow { display: block; color: var(--gold-deep); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; }

/* ------------------------------------------------------------------ layout & tab bar */
#app { min-height: 100dvh; }
#view { outline: none; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px) max(16px, env(safe-area-inset-left)); }
.screen { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.screen-title { font: 600 15px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); text-align: center; padding: 6px 0 2px; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(16, 16, 15, .92); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
}
.tab {
  height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; min-width: 0;
}
.tab .icon { width: 23px; height: 23px; }
.tab[aria-current="page"] { color: var(--gold); }
.tab:focus-visible { outline-offset: -4px; }

/* ------------------------------------------------------------------ controls */
.btn {
  appearance: none; border: 1px solid transparent; border-radius: 14px; min-height: 48px; width: 100%;
  padding: 10px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gold); color: #1a1a1a; font: 600 16px/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: opacity .15s, background-color .15s, transform .1s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: default; }
.btn[aria-busy="true"] { opacity: .6; }
.btn.ghost { background: transparent; color: var(--gold); border-color: rgba(220, 215, 186, .5); }
.btn.link { background: transparent; color: var(--gold); min-height: 40px; border: 0; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(220, 215, 186, .4); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger.ghost { background: transparent; color: var(--bad); border-color: rgba(236, 138, 120, .55); }
.btn.small { min-height: 36px; width: auto; padding: 6px 14px; font-size: 14px; border-radius: 11px; }
.btn.dark { background: #1a1a1a; color: #fff; }
.btn.dark.ghost { background: transparent; color: #1a1a1a; border-color: rgba(0, 0, 0, .35); }
.btn-col { display: flex; flex-direction: column; gap: 10px; }
.row-btns { display: flex; gap: 10px; align-items: center; }
.row-btns > * { flex: 1; }
.icon-btn { appearance: none; background: transparent; border: 0; color: var(--muted); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; flex: none; }
.icon-btn:hover { color: var(--text); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > .label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
input, select, textarea {
  width: 100%; font: 16px/1.3 var(--sans); color: var(--text); background: var(--bg-deep);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-height: 48px;
}
textarea { resize: vertical; min-height: 64px; }
input:disabled, select:disabled { opacity: .55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(168, 151, 90, .25); }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--gold-deep); flex: none; }
select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.code-input { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; font-size: 18px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack-form { display: flex; flex-direction: column; gap: 14px; }

.stepper { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.step-btn { appearance: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(220, 215, 186, .45); background: transparent; color: var(--gold); font-size: 20px; line-height: 1; cursor: pointer; }
.step-btn:disabled { opacity: .3; cursor: default; }
.step-n { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.segmented { display: flex; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.segmented button { flex: 1; appearance: none; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 14px var(--sans); min-height: 36px; cursor: pointer; }
.segmented button[aria-checked="true"] { background: var(--panel-2); color: var(--gold); }

.pill { display: inline-block; flex: none; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(220, 215, 186, .1); color: var(--gold); white-space: nowrap; }
.pill.ok { background: rgba(143, 209, 107, .14); color: var(--ok); }
.pill.wait { background: rgba(230, 196, 106, .14); color: var(--wait); }
.pill.bad { background: rgba(236, 138, 120, .14); color: var(--bad); }

.spinner { width: 28px; height: 28px; margin: 30px auto; border-radius: 50%; border: 2.5px solid rgba(220, 215, 186, .2); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-card { aspect-ratio: 85.6 / 53.98; border-radius: 18px; background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; margin-top: 30px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.banner { background: #3a2e14; color: #f2d78a; padding: 12px 14px; border-radius: 12px; font-weight: 600; text-align: center; }
.banner.ok { background: rgba(143, 209, 107, .12); color: var(--ok); }
.notice { background: rgba(230, 196, 106, .1); border: 1px solid rgba(230, 196, 106, .25); color: #f0dca4; border-radius: 12px; padding: 10px 12px; font-size: 14px; }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); z-index: 1000;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: min(92vw, 480px);
  background: #26241f; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-size: 15px; transition: opacity .2s, transform .2s; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.ok { border-color: rgba(143, 209, 107, .4); }
#toast.bad { border-color: rgba(236, 138, 120, .5); color: #ffd5cc; }
body:not(.signed-in) #toast { bottom: calc(env(safe-area-inset-bottom) + 20px); }

/* ------------------------------------------------------------------ lists & panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.panel.highlight { border-color: rgba(220, 215, 186, .45); background: linear-gradient(180deg, #26231b, var(--panel)); }
.section-title { font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.list > li.empty { color: var(--muted); padding: 6px 0; border: 0; }
.row { appearance: none; width: 100%; background: transparent; border: 0; color: var(--text); text-align: left; padding: 12px 0; display: flex; align-items: center; gap: 12px; cursor: pointer; font: inherit; }
.row > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row .chev { color: var(--muted); width: 16px; height: 16px; }
.row.event b.serif { font-size: 21px; line-height: 1.15; }
.menu-item, .guest { display: flex; align-items: center; gap: 12px; padding: 10px 0; justify-content: space-between; }
.menu-item > div:not(.stepper):not(.segmented) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.menu-group { display: flex; flex-direction: column; gap: 4px; }
b.in, .in { color: var(--ok); }
.order { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px 0; }
.order > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order.ready b { color: var(--ok); }
.total { font-weight: 700; color: var(--gold); text-align: right; }
.where { display: flex; gap: 8px; align-items: center; color: var(--gold); font-weight: 600; font-size: 17px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; text-align: right; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.add-guest { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.bill-out { display: flex; flex-direction: column; gap: 8px; }
.each { font-size: 18px; text-align: center; }
.each b { color: var(--gold); font-size: 24px; }
.tx { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.tx-icon { color: var(--gold); padding-top: 2px; }
.tx-icon.in { color: var(--ok); }
.tx-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tx-amt { text-align: right; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 12px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.stat b { font: 600 22px/1.2 var(--sans); color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.stat span { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; color: var(--muted); }
.points-hero { text-align: center; display: flex; flex-direction: column; }
.points-hero b { font: 600 52px/1.05 var(--sans); color: var(--gold); font-variant-numeric: lining-nums; }
.points-hero span { font-size: 11px; font-weight: 600; letter-spacing: .2em; color: var(--muted); }
.ticket-order { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.ticket-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ticket-head > div { display: flex; flex-direction: column; gap: 2px; }
.ticket-head b.serif { font-size: 21px; line-height: 1.15; }
.profile-head { align-items: center; text-align: center; gap: 4px; }
.credit { text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.6; padding: 8px 0; }
.install-hint { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 10px 14px; font-size: 14px; color: var(--muted); }
.install-hint .icon { color: var(--gold); }
.install-hint p { flex: 1; }
.install-hint b { color: var(--text); }

/* ------------------------------------------------------------------ sheets (dialogs) */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.sheet {
  border: 1px solid var(--line); border-bottom: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px;
  max-height: 92dvh; border-radius: 22px 22px 0 0; background: var(--panel); overflow: hidden; display: flex; flex-direction: column;
}
dialog.sheet:not([open]) { display: none; }
dialog.sheet[open] { animation: up .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 10px 6px 20px; flex: none; }
.sheet-head h2 { font: 600 19px/1.2 var(--serif); letter-spacing: .02em; color: var(--gold); font-size: 22px; }
.sheet-body { overflow-y: auto; padding: 6px 20px calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; }
@media (min-width: 640px) {
  dialog.sheet { margin: auto; border-radius: 22px; border-bottom: 1px solid var(--line); max-height: 86dvh; }
}

/* ------------------------------------------------------------------ welcome */
.welcome, .boot { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: max(40px, calc(env(safe-area-inset-top) + 24px)) 20px calc(env(safe-area-inset-bottom) + 24px);
  background: radial-gradient(120% 60% at 50% 0%, #26231a 0%, var(--bg-deep) 60%); }
.boot { justify-content: center; }
.welcome-logo { width: min(220px, 60vw); height: auto; }
.welcome-eyebrow { font: 600 13px var(--display); letter-spacing: .5em; color: var(--gold-deep); margin-top: -6px; }
.welcome-panel { width: 100%; max-width: 420px; }
.welcome-form { display: flex; flex-direction: column; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 20px; }
.welcome-form h2 { font: 600 24px var(--serif); color: var(--gold); text-align: center; }
.welcome .install-hint { max-width: 420px; width: 100%; }
.welcome-links { display: flex; gap: 22px; font-size: 14px; }
.welcome > .notice { max-width: 420px; width: 100%; text-align: center; }

/* ------------------------------------------------------------------ cards */
.card-face { position: relative; width: 100%; aspect-ratio: 85.6 / 53.98; border-radius: 4.5cqw; overflow: hidden; container-type: inline-size; isolation: isolate; }
.single-card { container-type: inline-size; max-width: 430px; width: 100%; margin: 0 auto; }

/* Samsung Internet: each face is also drawn on this canvas (undark.js), which its dark mode leaves alone. */
.card-face > canvas.undark { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; z-index: 50 !important; pointer-events: none; border-radius: inherit; }

/* Stack (Card tab): the front card full size, the other one peeking out behind it. Horizontal swipe or the dots switch;
   tapping the card behind brings it forward. No vertical drag (it would fight scrolling). */
.stack { position: relative; width: 100%; max-width: 430px; margin: 0 auto; touch-action: pan-y; }
.stack-card { container-type: inline-size; position: absolute; left: 0; right: 0; bottom: 0; transform-origin: 50% 0; border-radius: 4.5cqw;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s; }
.stack-card.is-behind { transform: translateY(calc(-1 * var(--peek) * var(--d, 1))) scale(calc(1 - .045 * var(--d, 1))); filter: brightness(calc(.95 - .12 * var(--d, 1))); cursor: pointer; }
.stack-card.is-behind .flip-card { pointer-events: none; }
.stack-card .flip-card { box-shadow: 0 12px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4); }
.stack-card:focus-visible { outline-offset: 4px; }
.stack.dragging .stack-card.is-front { transition: none; }
.stack-hint { min-height: 1.4em; }
.dots { display: flex; justify-content: center; gap: 4px; margin-top: -6px; }
.dot { appearance: none; border: 0; background: transparent; width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(220, 215, 186, .3); transition: background .2s, transform .2s; }
.dot[aria-current="true"]::after { background: var(--gold); transform: scale(1.15); }

/* Membership card: the iPhone app's in-app card (cream VIP / white Member), finished like the wallet card */
.mc { --ink: #1a1815; background: #fbfaf6; color: var(--ink); padding: 5.6cqw 6.2cqw 5.4cqw; display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.mc.vip { background: #f0e4c3; }
.mc > .mc-paper, .mc > .mc-emboss, .mc > .mc-frame, .mc > .mc-sheen { position: absolute; pointer-events: none; }
.mc-paper { inset: 0; z-index: 0;
  background:
    repeating-radial-gradient(circle at 84% 76%, transparent 0 calc(3cqw - .6px), rgba(120, 104, 70, .09) calc(3cqw - .6px) 3cqw),
    repeating-radial-gradient(circle at 87% 72%, transparent 0 calc(3cqw - .5px), rgba(120, 104, 70, .05) calc(3cqw - .5px) 3cqw),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px),
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, .7), transparent 55%),
    radial-gradient(100% 120% at 100% 100%, rgba(0, 0, 0, .06), transparent 60%); }
.mc.member .mc-paper { background:
    repeating-radial-gradient(circle at 84% 76%, transparent 0 calc(3cqw - .6px), rgba(90, 96, 104, .08) calc(3cqw - .6px) 3cqw),
    repeating-radial-gradient(circle at 87% 72%, transparent 0 calc(3cqw - .5px), rgba(90, 96, 104, .045) calc(3cqw - .5px) 3cqw),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .01) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 0% 0%, #fff, transparent 55%),
    radial-gradient(100% 120% at 100% 100%, rgba(0, 0, 0, .05), transparent 60%); }
.mc.front .mc-paper { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 60%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 60%); }
.mc-emboss { right: 5cqw; top: 9cqw; width: 34cqw; height: auto; opacity: .085; z-index: 0;
  filter: grayscale(1) brightness(.35) drop-shadow(.25cqw .25cqw 0 rgba(255, 255, 255, .9)); user-select: none; -webkit-user-drag: none; }
.mc.back .mc-emboss { right: auto; left: 30cqw; top: 14cqw; width: 26cqw; opacity: .06; }
.mc-frame { inset: 2cqw; border-radius: 3cqw; padding: .3cqw; z-index: 1;
  background: linear-gradient(135deg, #a8822f, #f2d98f 28%, #c69a45 52%, #fbe9b4 74%, #9c7a30);
  background-size: 160% 160%; background-position: calc(50% + var(--tx) * 25%) calc(50% + var(--ty) * 15%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.mc.member .mc-frame { background: linear-gradient(135deg, #8d9096, #f4f5f7 30%, #a6a9af 55%, #e8eaed 75%, #7b7e84); background-size: 160% 160%;
  background-position: calc(50% + var(--tx) * 25%) calc(50% + var(--ty) * 15%); }
.mc-sheen { inset: 0; z-index: 3; mix-blend-mode: soft-light;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
  background-size: 220% 100%; background-position: calc(60% - var(--tx) * 40%) 0; }
.mc > :not(.mc-paper):not(.mc-emboss):not(.mc-frame):not(.mc-sheen) { position: relative; z-index: 2; }
.mc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw; }
.mc-brand { display: flex; flex-direction: column; gap: .7cqw; }
.mc-brand b { font: 700 3.3cqw/1.1 var(--display); letter-spacing: .2em; }
.mc-brand span { font: 600 2.3cqw/1.1 var(--sans); letter-spacing: .36em; opacity: .65; }
.mc-grade { font: 700 5cqw/1 var(--display); letter-spacing: .16em; }
.mc.vip .mc-grade { font-size: 8.4cqw; letter-spacing: .1em; background: linear-gradient(135deg, #6e5420, #a8822f 40%, #4a3815 70%, #8a6b2a);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
/* letterpress: ink pressed into the paper */
.mc-brand, .mc-name, .mc-field, .mc-door, .mc.member .mc-grade { text-shadow: 0 .18cqw 0 rgba(255, 255, 255, .75), 0 -.06cqw 0 rgba(0, 0, 0, .12); }
.mc.vip .mc-grade { filter: drop-shadow(0 .18cqw 0 rgba(255, 255, 255, .7)); }
.mc-name { margin-top: auto; font: italic 600 8cqw/1.1 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-fields { display: flex; align-items: flex-end; gap: 5.5cqw; margin-top: 2.4cqw; }
.mc-field { display: flex; flex-direction: column; }
.mc-field span { font: 600 2.2cqw/1.25 var(--sans); letter-spacing: .12em; opacity: .62; }
.mc-field b { font: 600 4cqw/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.mc-state { margin-left: auto; font: 800 2.9cqw var(--sans); color: #b3261e; letter-spacing: .06em; }
.mc-state.soft { color: rgba(20, 20, 20, .55); }
.mc-backgrid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 46cqw; gap: 3.6cqw; min-height: 0; }
.mc-backleft { display: flex; flex-direction: column; min-width: 0; }
.mc-backleft .mc-name { font-size: 6cqw; white-space: normal; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 2.4cqw 0 2cqw; }
.mc-backfields { display: flex; flex-direction: column; gap: 1.1cqw; }
.mc-backfields .mc-field { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 2cqw; }
.mc-backfields .mc-field b { font-size: 3.3cqw; }
.mc-door { margin-top: auto; font: 600 2.3cqw/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.mc-qrbox { width: 46cqw; height: 46cqw; align-self: center; box-sizing: border-box; background: #fff; border-radius: 2.2cqw; padding: 1.4cqw; display: grid; place-items: center;
  box-shadow: 0 0 0 .25cqw rgba(168, 130, 47, .55), 0 .4cqw 1.2cqw rgba(0, 0, 0, .12); }
.mc.member .mc-qrbox { box-shadow: 0 0 0 .25cqw rgba(123, 126, 132, .55), 0 .4cqw 1.2cqw rgba(0, 0, 0, .12); }
.mc-qrbox .qr { width: 100%; height: 100%; }
.mc-qrbox p { font-size: 2.4cqw; text-align: center; color: rgba(0, 0, 0, .6); padding: 2cqw; }

/* Fuego wallet card */
.flip-card { position: relative; width: 100%; perspective: 1400px; cursor: pointer; border-radius: 4.5cqw; container-type: inline-size; }
.flip-inner { position: relative; transition: transform .6s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; transform: rotateY(calc(var(--tx) * 5deg)) rotateX(calc(var(--ty) * -4deg)); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-inner > .card-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-inner > .back { position: absolute; inset: 0; transform: rotateY(180deg); }
.wc { color: #ede6d0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.wc.vip { box-shadow: inset 0 0 0 1px rgba(242, 217, 143, .3); }
.wc > div { position: absolute; inset: 0; }
.wc-art { z-index: -3; }
.wc.member .wc-art {
  background:
    radial-gradient(70% 90% at 5% 0%, rgba(31, 138, 115, .42), transparent 70%),
    radial-gradient(35% 50% at 55% 0%, rgba(47, 107, 255, .2), transparent 75%),
    linear-gradient(135deg, #0f4c41 0%, #0a3530 33%, #061b18 66%, #030706 100%);
}
.wc.vip .wc-art {
  background:
    radial-gradient(farthest-corner at 50% 50%, transparent 45%, rgba(0, 0, 0, .45)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 2.2px, rgba(0, 0, 0, .16) 2.2px 3px, transparent 3px 4.3px, rgba(255, 255, 255, .02) 4.3px 5px, transparent 5px 6.4px),
    linear-gradient(135deg, #2b2219 0%, #17120d 35%, #0c0907 65%, #1b150f 100%);
}
.wc-rings { z-index: -2; }
.wc.member .wc-rings {
  background:
    repeating-radial-gradient(circle at 82% 74%, transparent 0 calc(3.2cqw - .7px), rgba(237, 230, 208, .11) calc(3.2cqw - .7px) 3.2cqw),
    repeating-radial-gradient(circle at 86% 70%, transparent 0 calc(3.2cqw - .5px), rgba(237, 230, 208, .06) calc(3.2cqw - .5px) 3.2cqw);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 72%); mask-image: linear-gradient(90deg, transparent 35%, #000 72%);
}
.wc-glow { z-index: -1; mix-blend-mode: screen; pointer-events: none; }
.wc.member .wc-glow {
  background: linear-gradient(90deg, transparent 0%, #7b5cff 15%, #2fa4ff 30%, #2fe0b0 45%, #f7d46b 60%, #ff7a59 75%, #e65cc8 88%, transparent 100%);
  background-size: 150% 100%; background-position: calc(50% + var(--tx) * 30%) 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .5) 80%, #000);
  mask-image: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .5) 80%, #000); opacity: .32;
}
.wc.vip .wc-glow {
  background: linear-gradient(115deg, transparent 18%, rgba(198, 154, 69, .1) 34%, rgba(243, 216, 154, .3) 46%, rgba(198, 154, 69, .1) 58%, transparent 80%);
  transform: translateX(calc(var(--tx) * 12%));
}
.wc-sheen { z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .1) 50%, transparent 70%);
  background-size: 220% 100%; background-position: calc(60% - var(--tx) * 40%) 0; }
.wc.vip .wc-sheen { opacity: .7; }
.wc-content { display: flex; flex-direction: column; padding: 5.4cqw 6.2cqw 4.8cqw; }
.wc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.wc-word { display: flex; flex-direction: column; font: 600 5.6cqw/1 var(--display); letter-spacing: .12em; }
.wc-tier { display: flex; flex-direction: column; align-items: flex-end; gap: .8cqw; font: 600 2.9cqw/1 var(--sans); letter-spacing: .17em; color: #d9c48c; }
.wc-chiprow { display: flex; align-items: center; gap: 3cqw; margin-top: 2.8cqw; }
.wc-contactless .icon { width: 4.6cqw; height: 4.6cqw; stroke-width: 1.5; opacity: .75; }
.wc-chip { width: 9.5cqw; height: 7.2cqw; border-radius: 1.2cqw; position: relative; display: block;
  background: linear-gradient(135deg, #8d9096, #f4f5f7 30%, #a6a9af 55%, #e8eaed 75%, #7b7e84);
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .35); }
.wc-chip.gold { background: linear-gradient(135deg, #a8822f, #f2d98f 30%, #c69a45 55%, #fbe9b4 75%, #9c7a30); }
.wc-chip i { position: absolute; background: rgba(0, 0, 0, .28); }
.wc-chip i:nth-child(1) { left: 33%; top: 0; bottom: 0; width: .6px; }
.wc-chip i:nth-child(2) { left: 67%; top: 0; bottom: 0; width: .6px; }
.wc-chip i:nth-child(3) { left: 33%; right: 33%; top: 26%; bottom: 26%; background: transparent; border: .6px solid rgba(0, 0, 0, .3); border-radius: 1px; }
.wc-spacer { flex: 1; }
.wc-label { font: 500 2.6cqw/1 var(--sans); letter-spacing: .27em; opacity: .7; }
.wc-balance { display: flex; align-items: baseline; gap: 1.6cqw; margin-top: 1cqw; text-shadow: .5px .8px 1px rgba(0, 0, 0, .45); white-space: nowrap; }
.wc-balance .cur { font: 600 4.2cqw/1 var(--sans); letter-spacing: .08em; }
.wc-balance .amt { font: 600 8.8cqw/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wc-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 3.2cqw; gap: 3cqw; }
.wc-bottom > div { min-width: 0; }
.wc-name { font: 700 3.8cqw/1.15 var(--sans); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-number { font: 500 3cqw/1.2 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .1em; opacity: .72; margin-top: 1.6cqw; }
.wc-pill { flex: none; font: 700 2.7cqw/1 var(--sans); letter-spacing: .2em; color: #d9c48c; border: 1px solid rgba(217, 196, 140, .85); border-radius: 999px; padding: 1.3cqw 2.6cqw; }
.wc-pill.vip { color: #1a140e; border-color: rgba(251, 233, 180, .6); padding: 1.4cqw 3.2cqw; font-size: 3cqw;
  background: linear-gradient(135deg, #a8822f, #f2d98f 30%, #c69a45 55%, #fbe9b4 75%, #9c7a30); }
/* VIP gold foil text */
.wc.vip .ink, .wc.vip .ink2 {
  background: linear-gradient(135deg, #a8822f 0%, #f2d98f 28%, #c69a45 52%, #fbe9b4 74%, #9c7a30 100%);
  background-size: 160% 160%; background-position: calc(50% + var(--tx) * 25%) calc(50% + var(--ty) * 15%);
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.wc.vip .ink .icon { stroke: #e9cf8a; }
.wc.vip .wc-balance { filter: drop-shadow(.5px .8px .6px rgba(0, 0, 0, .55)); }
.wc.vip .wc-label { opacity: .85; }

/* Back */
.wc.back .wc-art { transform: scaleX(-1); }
.wc-stripe { top: 7.5% !important; bottom: auto !important; height: 16%; background: linear-gradient(180deg, #050505, #1b1b1b 55%, #080808); }
.wc-back { top: 28% !important; display: grid; grid-template-columns: 1fr auto; gap: 4cqw; padding: 0 5cqw 4.4cqw; }
.wc-back-left { display: flex; flex-direction: column; gap: 2.4cqw; min-width: 0; }
.wc-sign { height: 8.4cqw; border-radius: .6cqw; display: flex; align-items: center; padding: 0 2cqw; overflow: hidden;
  background: repeating-linear-gradient(-45deg, rgba(185, 174, 142, .35) 0 .5px, transparent .5px 4px), #f3eedf; }
.wc-sign span { font: 600 5.2cqw/1 'Snell Roundhand', 'Savoye LET', 'Brush Script MT', 'Segoe Script', cursive; color: #1f2a6b; white-space: nowrap; }
.wc-facts { display: flex; gap: 3.4cqw; align-items: flex-start; }
.wc-facts > div { display: flex; flex-direction: column; gap: .6cqw; }
.wc-facts small { white-space: nowrap; font: 600 1.9cqw/1 var(--sans); letter-spacing: .2em; color: rgba(217, 196, 140, .75); }
.wc.vip .wc-facts small { color: rgba(233, 207, 138, .8); }
.wc-facts b { font: 500 2.6cqw/1.1 ui-monospace, 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, .9); white-space: nowrap; }
.wc-print { font: 400 1.95cqw/1.35 var(--sans); color: rgba(255, 255, 255, .6); margin-top: auto; }
.wc-qr { width: 36cqw; height: 36cqw; align-self: end; background: #fff; border-radius: 2.2cqw; padding: 1.6cqw; display: grid; place-items: center; }
.wc-qr .qr { width: 100%; height: 100%; }
.wc-qr p { color: rgba(0, 0, 0, .55); font-size: 2.4cqw; text-align: center; }

/* Rewards card (loyalty points): Member = bronze-copper metal + rose-gold foil, VIP = oxblood + gold foil */
.rc { --foil: linear-gradient(135deg, #9c5a4e 0%, #f4c7b8 28%, #c98a78 52%, #fde3d6 74%, #8e4f43 100%); --foil-flat: #f0c2b0;
  color: var(--foil-flat); box-shadow: inset 0 0 0 1px rgba(244, 199, 184, .3); }
.rc.vip { --foil: linear-gradient(135deg, #a8822f 0%, #f2d98f 28%, #c69a45 52%, #fbe9b4 74%, #9c7a30 100%); --foil-flat: #ecd290;
  box-shadow: inset 0 0 0 1px rgba(242, 217, 143, .3); }
.rc > div { position: absolute; inset: 0; }
.rc-art { z-index: -3; }
.rc.member .rc-art { background:
    radial-gradient(80% 90% at 0% 0%, rgba(232, 160, 110, .38), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 2.6px, rgba(0, 0, 0, .12) 2.6px 3.4px, transparent 3.4px 5px),
    linear-gradient(135deg, #8a5232 0%, #5e331d 32%, #351b0f 66%, #1b0d07 100%); }
.rc.vip .rc-art { background:
    radial-gradient(80% 90% at 0% 0%, rgba(176, 52, 66, .45), transparent 65%),
    radial-gradient(farthest-corner at 50% 50%, transparent 45%, rgba(0, 0, 0, .45)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 2.6px, rgba(0, 0, 0, .14) 2.6px 3.4px, transparent 3.4px 5px),
    linear-gradient(135deg, #6b1725 0%, #47101a 32%, #2a080f 66%, #150307 100%); }
.rc-rings { z-index: -2;
  background:
    repeating-radial-gradient(circle at 80% 30%, transparent 0 calc(2.8cqw - .6px), rgba(244, 199, 184, .1) calc(2.8cqw - .6px) 2.8cqw),
    repeating-radial-gradient(circle at 84% 34%, transparent 0 calc(2.8cqw - .5px), rgba(244, 199, 184, .055) calc(2.8cqw - .5px) 2.8cqw);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%); mask-image: linear-gradient(90deg, transparent 30%, #000 75%); }
.rc.vip .rc-rings { filter: hue-rotate(20deg) saturate(.8); }
.rc-sheen { z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 230, 220, .12) 50%, transparent 70%);
  background-size: 220% 100%; background-position: calc(60% - var(--tx) * 40%) 0; }
.rc .foil { background: var(--foil); background-size: 160% 160%; background-position: calc(50% + var(--tx) * 25%) calc(50% + var(--ty) * 15%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.rc-content { display: flex; flex-direction: column; padding: 5.4cqw 6.2cqw 4.8cqw; }
.rc .wc-tier { color: var(--foil-flat); }
.rc-label { font: 500 2.6cqw/1 var(--sans); letter-spacing: .27em; opacity: .85; }
.rc-points { display: flex; align-items: baseline; gap: 1.8cqw; margin-top: 1cqw; white-space: nowrap; filter: drop-shadow(.5px .8px .6px rgba(0, 0, 0, .55)); }
.rc-points .amt { font: 600 10cqw/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rc-points .unit { font: 600 4.2cqw/1 var(--sans); letter-spacing: .12em; }
.rc-goal { display: flex; flex-direction: column; gap: 1.1cqw; margin-top: 2.2cqw; font: 500 2.5cqw/1.2 var(--sans); color: rgba(255, 240, 232, .78); }
.rc-goal span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-bar { height: .9cqw; border-radius: 1cqw; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); overflow: hidden; width: 62%; }
.rc-bar i { display: block; height: 100%; border-radius: inherit; background: var(--foil); min-width: 2%; }
.rc .wc-bottom { margin-top: 2.6cqw; }
.rc .wc-number { font-family: var(--sans); font-weight: 600; color: rgba(255, 240, 232, .7); opacity: 1; letter-spacing: .14em; font-size: 2.7cqw; }
.rc-pill { flex: none; font: 700 2.7cqw/1 var(--sans); letter-spacing: .2em; color: #2a0f0a; border-radius: 999px; padding: 1.4cqw 2.8cqw; background: var(--foil);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .4); }
.rc-back { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4cqw; padding: 6cqw 6cqw 5cqw; }
.rc-col { display: flex; flex-direction: column; gap: 2cqw; min-width: 0; }
.rc-head { font: 700 2.5cqw/1 var(--sans); letter-spacing: .26em; }
.rc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6cqw; }
.rc-list li { display: flex; gap: 2cqw; align-items: baseline; font: 500 2.7cqw/1.25 var(--sans); color: rgba(255, 240, 232, .82); min-width: 0; }
.rc-list b { flex: none; min-width: 8cqw; font: 700 3.1cqw/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--foil-flat); }
.rc-list li span { overflow: hidden; text-overflow: ellipsis; }
.rc-empty { font: 500 2.6cqw/1.3 var(--sans); color: rgba(255, 240, 232, .7); }
.rc-link { margin-top: auto; align-self: flex-start; font: 700 2.9cqw/1 var(--sans); letter-spacing: .08em; color: #2a0f0a; text-decoration: none;
  background: var(--foil); border-radius: 999px; padding: 1.8cqw 3.4cqw; }
.rc-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ------------------------------------------------------------------ QR screen (door / tickets) */
dialog.qr-screen { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: #1a1a1a; }
dialog.qr-screen::backdrop { background: #fff; }
.qr-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 24px); }
.qr-wrap .qr { width: min(78vw, 340px, 46dvh); height: auto; aspect-ratio: 1; }
.qr-name { font: italic 500 28px/1.15 var(--serif); text-align: center; }
.qr-sub { font-size: 15px; color: rgba(0, 0, 0, .6); text-align: center; }
.qr-sub.ok { color: #2e6b1f; font-weight: 600; }
.qr-code { font: 600 15px ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .12em; }
.qr-wrap .btn { max-width: 320px; }
.qr-wrap .row-btns { width: 100%; max-width: 360px; }
.qr-wrap .row-btns span { flex: 1.2; }
.qr-wrap :focus-visible { outline-color: #1a1a1a; }

/* ------------------------------------------------------------------ scanner */
dialog.scanner .sheet-body { gap: 12px; }
.scan-view { position: relative; width: 100%; aspect-ratio: 1; max-height: 52dvh; background: #000; border-radius: 16px; overflow: hidden; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; inset: 16%; border: 2px solid rgba(220, 215, 186, .9); border-radius: 18px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
.scan-status { text-align: center; color: var(--wait); font-size: 14px; min-height: 1em; }
.scan-status:empty { display: none; }
.manual { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .flip-inner { transform: none !important; transform-style: flat; }
  .flip-inner > .card-face { -webkit-backface-visibility: visible; backface-visibility: visible; }
  .flip-inner > .back { transform: none; opacity: 0; }
  .flip-card.flipped .back { opacity: 1; }
  .flip-card.flipped .front { opacity: 0; }
  .wc-sheen, .mc-sheen, .rc-sheen { display: none; }
}
@media (max-width: 360px) {
  .tab { font-size: 9.5px; }
  .tab .icon { width: 21px; height: 21px; }
}

/* Fuego Members on the web: added after app.css when the server runs for Fuego (main.py serves it with app.css).
   Fuego's colours: logo red #e10f1a, cream #fbf8f0, taupe #b49a82 (the monogram pattern), ink #1a1a1a.
   Screens stay dark (ink) with cream text accents and red buttons; the cards are cream with the FF monogram pattern. */
:root {
  --bg: #1a1a1a;
  --bg-deep: #120f0e;
  --panel: #231e1c;
  --panel-2: #2d2623;
  --line: rgba(240, 226, 207, .16);
  --gold: #f0e2cf;          /* accents and headings: warm cream */
  --gold-deep: #b49a82;     /* lines, focus: taupe */
  --red: #e10f1a;
  --muted: #b3a597;
  /* a bold geometric sans like the FUEGO wordmark instead of TBG's serif and Cinzel (fonts already on the device) */
  --serif: 'Avenir Next', 'Avenir', 'Futura', 'Century Gothic', 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Avenir Next', 'Avenir', 'Futura', 'Century Gothic', 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.screen-title, .sheet-head h2, .welcome-form h2 { font-weight: 700; letter-spacing: .02em; }
.screen-title { letter-spacing: .24em; }
.mc-name { font-style: normal; font-weight: 700; letter-spacing: -.01em; }
.mc-paper, .mc.member .mc-paper { background:
    linear-gradient(rgba(251, 248, 240, .72), rgba(251, 248, 240, .72)),
    url('pattern.webp') 0 0 / 44cqw auto repeat !important; }
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --bg-deep: #120f0e; } html, body { background: #120f0e; } }

.btn { background: var(--red); color: #fff; }
.btn.ghost { background: transparent; color: var(--gold); border-color: rgba(240, 226, 207, .5); }
.tab[aria-current="page"] { color: #ff4b52; }
.screen-title { color: var(--gold); }
.welcome-logo, img[src$="logo-gold.svg"]:not(.mc-emboss) { filter: none !important; }

/* Membership card: cream with the monogram pattern, a red frame (VIP: ink and red) */
.mc { --ink: #1a1a1a; background: #fbf8f0; }
.mc.vip { background: #fbf8f0; }
.mc-paper, .mc.member .mc-paper { background:
    linear-gradient(rgba(251, 248, 240, .55), rgba(251, 248, 240, .55)),
    url('pattern.webp') 0 0 / 44cqw auto repeat; }
.mc.front .mc-paper { -webkit-mask-image: none; mask-image: none; }
.mc-emboss { opacity: 0 !important; }
.mc-frame { background: linear-gradient(135deg, #8f0a12, #e10f1a 30%, #ff5a5f 52%, #e10f1a 74%, #8f0a12) !important; background-size: 160% 160%; }
.mc.member .mc-frame { background: linear-gradient(135deg, #8b735d, #d9c5ad 30%, #b49a82 55%, #ecdcc6 75%, #8b735d) !important; }
.mc-brand b { color: #e10f1a; letter-spacing: .32em; }
.mc.vip .mc-grade { background: linear-gradient(135deg, #8f0a12, #e10f1a 45%, #6b070d 70%, #c40d17); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-qrbox { box-shadow: 0 0 0 .25cqw rgba(225, 15, 26, .55), 0 .4cqw 1.2cqw rgba(0, 0, 0, .12); }
.mc.member .mc-qrbox { box-shadow: 0 0 0 .25cqw rgba(180, 154, 130, .7), 0 .4cqw 1.2cqw rgba(0, 0, 0, .12); }

/* Fuego wallet card: Member = chilli red to black, VIP = ink with a red beam and cream foil */
.wc { color: #fbf1e6; }
.wc.member .wc-art { background:
    radial-gradient(70% 90% at 5% 0%, rgba(255, 90, 95, .45), transparent 70%),
    linear-gradient(135deg, #c40d17 0%, #8f0a12 33%, #4a0509 66%, #150203 100%); }
.wc.member .wc-glow { opacity: .14; }
.wc.vip .wc-art { background:
    radial-gradient(farthest-corner at 50% 50%, transparent 45%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 2.2px, rgba(0, 0, 0, .16) 2.2px 3px, transparent 3px 4.3px),
    linear-gradient(135deg, #2a2523 0%, #1a1a1a 35%, #0e0c0b 65%, #221d1b 100%); }
.wc.vip .wc-glow { background: linear-gradient(115deg, transparent 18%, rgba(225, 15, 26, .12) 34%, rgba(255, 90, 95, .32) 46%, rgba(225, 15, 26, .12) 58%, transparent 80%); }
.wc.vip .ink, .wc.vip .ink2, .wc-pill.vip { background: linear-gradient(135deg, #b49a82 0%, #fbf1e6 30%, #d9c5ad 55%, #fffaf2 75%, #a18670 100%); }
.wc.vip .ink, .wc.vip .ink2 { -webkit-background-clip: text; background-clip: text; color: transparent; }
.wc-tier, .wc-pill { color: #f0e2cf; border-color: rgba(240, 226, 207, .8); }
.wc-chip.gold { background: linear-gradient(135deg, #b49a82, #fbf1e6 30%, #d9c5ad 55%, #fffaf2 75%, #a18670); }

/* Rewards card: Member = taupe metal with red, VIP = deep red with cream foil */
.rc { --foil: linear-gradient(135deg, #8b735d 0%, #fbf1e6 28%, #b49a82 52%, #fffaf2 74%, #8b735d 100%); --foil-flat: #f0e2cf; }
.rc.vip { --foil: linear-gradient(135deg, #b49a82 0%, #fbf1e6 28%, #d9c5ad 52%, #fffaf2 74%, #a18670 100%); --foil-flat: #fbf1e6; }
.rc.member .rc-art { background:
    radial-gradient(80% 90% at 0% 0%, rgba(225, 15, 26, .35), transparent 65%),
    linear-gradient(135deg, #5e4a3c 0%, #3b2e25 40%, #1c1512 100%); }
.rc.vip .rc-art { background:
    radial-gradient(80% 90% at 0% 0%, rgba(255, 90, 95, .4), transparent 65%),
    linear-gradient(135deg, #a00b14 0%, #6b070d 40%, #2a0306 100%); }