/* The Guest page, tarot dark like the app (plan 45-46, 64; the mockup's tarot.css, bill-flow.css, face-layout.css): the
   starry night as the ground, parchment cards in a navy line and a gold inner frame, the Event's card as the head's
   band, Transfers dealt as cards with a wax seal. Prompt for every word, Chonburi for the wordmark only (plan 78). */
@font-face { font-family: Prompt; font-weight: 400; font-display: swap; src: url(fonts/Prompt-Regular.woff) format("woff") }
@font-face { font-family: Prompt; font-weight: 600; font-display: swap; src: url(fonts/Prompt-SemiBold.woff) format("woff") }
@font-face { font-family: Prompt; font-weight: 700; font-display: swap; src: url(fonts/Prompt-Bold.woff) format("woff") }
@font-face { font-family: Chonburi; font-weight: 400; font-display: swap; src: url(fonts/Chonburi-Regular.woff) format("woff") }
:root {
  --cob: #2D63AE; --navy: #18213D; --gold: #F2B33D; --red: #B93226; --leaf: #3D7A37; --parch: #F3E6C8;
  --font: Prompt, system-ui, -apple-system, "Segoe UI", "Leelawadee UI", sans-serif;
  /* on the night */
  --ground: #121829; --ink: #F2EEE4; --muted: #B9BED0; --rule: #F2B33D;
  /* on parchment */
  --p-ink: #18213D; --p-muted: #4D5570; --p-warn: #A82C20; --p-ok: #2F6A2A; --p-soft: rgba(24, 33, 61, .16);
  --stars: radial-gradient(circle at 20% 30%, var(--gold) 0 1.6px, transparent 2.2px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 80%, #fff6 0 1.2px, transparent 1.8px) 0 0 / 31px 31px;
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body {
  min-height: 100vh; font: 400 1rem/1.5 var(--font); color: var(--ink); -webkit-font-smoothing: antialiased;
  background: var(--stars), radial-gradient(130% 90% at 50% 0%, #24325C 0%, #141B33 60%, #0B1020 100%) fixed, #0B1020;
}
body.held { overflow: hidden }
main { max-width: 480px; margin: 0 auto; padding: 0 16px 96px; display: flex; flex-direction: column; gap: 16px }
button, input, a.btn, label.btn { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation }
button { background: none; border: 0; cursor: pointer }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.num, .tr-amt, .me-amt { font-variant-numeric: tabular-nums }
.muted { color: var(--muted) }
.small { font-size: .9375rem }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
h1, h2, h3 { font-weight: 600; letter-spacing: -.005em }

/* plan 65: the app's own install bar, pinned on top while the page scrolls under it */
.getapp {
  position: sticky; top: 0; z-index: 25; margin: 0 -16px; display: flex; align-items: center; gap: 10px;
  padding: 0 10px 0 12px; padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top));
  background: var(--navy); box-shadow: inset 0 -1.5px 0 rgba(242, 179, 61, .55), 0 6px 14px rgba(0, 0, 0, .3);
}
.ga-mark { flex: none; width: 34px; height: 34px; border-radius: 8px; background: url(art/app-eye.webp) center / 150% no-repeat, #0D1222; box-shadow: inset 0 0 0 1.5px var(--gold) }
.ga-t { flex: 1; min-width: 0; display: grid; line-height: 1.25 }
.ga-t b { font-size: .906rem; font-weight: 600; color: #fff }
.ga-t small { font-size: .781rem; color: #C9CED9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ga-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border-radius: 8px;
  background: var(--gold); color: var(--navy); font-size: .875rem; font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--navy)
}
.ga-btn .ic { width: 18px; height: 18px; stroke-width: 2 }

/* the head: the wordmark, then the Event's card as a wide band (lobby head B, plan 77) */
.top { color: #fff; padding-top: max(16px, env(safe-area-inset-top)) }
.getapp + .top { padding-top: 14px }
.wordmark { display: flex; align-items: baseline; gap: 6px; font-family: Chonburi, var(--font); line-height: 1 }
.wordmark span { font-size: .9375rem; color: var(--gold) }
.wordmark b { font-size: 1.25rem; font-weight: 400 }
.hx {
  position: relative; margin-top: 12px; min-height: 196px; padding: 14px 16px 16px; border-radius: 10px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 2px; overflow: hidden; isolation: isolate;
  background: linear-gradient(to bottom, rgba(11, 16, 32, 0) 28%, rgba(11, 16, 32, .88) 82%), url(art/card-night.webp) center 38% / cover no-repeat, var(--navy);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--navy), inset 0 0 0 6.5px var(--gold), 0 12px 24px rgba(0, 0, 0, .4);
}
.hx-kind { font-size: .875rem; font-weight: 600; color: var(--gold) }
.hx h1 { font-size: 1.75rem; line-height: 1.2; margin-top: 6px; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 8px rgba(0, 0, 0, .5) }
.hx-lead { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: .906rem; font-weight: 600; color: #EEF1F7 }
.sub { margin-top: 10px; color: #EEF1F7 }
.notice { color: #fff; font-size: 1.0625rem; padding: 16px; border: 1.5px solid rgba(242, 179, 61, .7); border-radius: 8px; background: rgba(24, 33, 61, .88) }

/* parchment cards: a navy line, then a gold inner frame (tarot.css .pcard) */
.sheet, .card {
  position: relative; background: var(--parch); color: var(--p-ink); border-radius: 10px; padding: 18px 16px;
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 6px var(--parch), inset 0 0 0 7.5px var(--gold), 0 12px 22px rgba(0, 0, 0, .35);
}
.sheet .muted, .card .muted { color: var(--p-muted) }
h2 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 6px; color: var(--red) }
.on-sky { color: #fff }
h2.on-sky { margin: 6px 2px 0; color: var(--parch) }
p.on-sky { margin: 4px 2px 0; opacity: .9 }
a.on-sky { color: var(--gold); text-underline-offset: 3px; font-weight: 600 }

/* faces: the kit's layers on the circle's colour (FaceView) */
.face { display: inline-block; flex: none; border-radius: 50%; user-select: none }
/* the standing body (BodyView): the kit's layers on the body's head, a 400 x 600 stage scaled down */
.bd { position: relative; display: block; flex: none }
.bd-in { position: absolute; left: 0; top: 0; width: 400px; height: 600px; transform-origin: 0 0 }
.bd-in img { position: absolute; left: 0; top: 0; width: 400px; height: 600px }
.bd-in i { position: absolute; left: 0; top: 0; width: 320px; height: 320px; background: center / cover no-repeat; transform-origin: 0 0 }

/* joining (the mockup's V.join) */
.jn { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 18px 20px }
.jn-art {
  width: 92px; aspect-ratio: 360 / 536; border-radius: 8px; background: url(art/card-night.webp) center / cover; transform: rotate(-3deg);
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--gold), 0 10px 18px rgba(24, 33, 61, .35)
}
.jn-lead { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-weight: 600; font-size: .9375rem }
.jn h2 { font-size: 1.6875rem; line-height: 1.2; margin: 0; overflow-wrap: anywhere }
.jn-faces { display: flex; align-items: center }
.jn-faces .face + .face { margin-left: -8px }
.jn-faces small { padding-left: 8px; font-size: .875rem; font-weight: 600; color: var(--p-muted) }
.jn label { justify-self: stretch; text-align: left; margin: 6px 0 0; color: var(--p-muted); font-size: .875rem }
.jn input {
  justify-self: stretch; min-height: 50px; padding: 0 14px; border: 0; border-radius: 8px; font-size: 1.0625rem;
  background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy)
}
.jn input:focus { outline: none; box-shadow: inset 0 0 0 2.5px var(--cob) }
.jn .btn { justify-self: stretch; margin-top: 8px }

/* who are you (a name the Organizer added) */
.names { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin-top: 14px }
.name { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; text-align: left; font-weight: 600; font-size: 1.0625rem; border-radius: 8px; background: rgba(24, 33, 61, .06); box-shadow: inset 0 0 0 1.5px var(--navy); overflow-wrap: anywhere }
.name:active, .btn:active, .claim:active, .step:active, .chip:active, .fb-tile:active, .ga-btn:active { transform: scale(.97); transition: transform .1s ease-out }

/* me */
.me-top { display: flex; align-items: center; gap: 10px }
.me-top b { flex: 1; min-width: 0; font-size: 1.125rem; font-weight: 600; overflow-wrap: anywhere }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: .9375rem; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--navy) }
.chip .ic { width: 18px; height: 18px }
.link { display: block; margin-top: 6px; min-height: 44px; padding: 0 2px; color: var(--p-muted); text-decoration: underline; text-underline-offset: 3px; font-size: .9375rem; text-align: left }
.me-label { margin-top: 12px; font-weight: 600; color: var(--p-muted) }
.me-amt { font-size: 2.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em }
.me-amt.owe { color: var(--red) }
.me-amt.owed { color: var(--p-ok) }
.warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-weight: 600; color: var(--p-warn); font-size: .9375rem }
.warn .ic { margin-top: 2px }

/* plan 65-66: the card after ส่ง */
.app-card { display: grid; gap: 10px; padding: 18px 18px 14px }
.app-card h2 { margin: 0 }
.perks { list-style: none; display: grid; gap: 8px; font-size: .9375rem; font-weight: 600; line-height: 1.4 }
.perks li { display: flex; align-items: flex-start; gap: 10px }
.perks .ic { color: var(--cob) }
.follow { display: flex; align-items: flex-start; gap: 6px; padding-top: 2px; font-size: .844rem; line-height: 1.45; color: var(--p-muted) }
.follow .ic { width: 16px; height: 16px; margin-top: 2px }

/* Settle-up: each Transfer a parchment card, "โอนแล้ว" a wax seal */
.transfers { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 12px }
.tr { position: relative; display: flex; flex-direction: column; gap: 8px }
.tr-card {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 14px;
  background: var(--parch); color: var(--navy); border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 6px var(--parch), inset 0 0 0 7.5px var(--gold), 0 14px 22px rgba(0, 0, 0, .35);
}
.tr:nth-child(odd) .tr-card { transform: rotate(-.8deg) }
.tr:not(.mine) .tr-card { opacity: .88 }
.tr-who { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .9375rem; font-weight: 600; max-width: 84px; text-align: center; overflow-wrap: anywhere }
.tr-arrow { height: 3px; background: var(--red); border-radius: 2px; position: relative; margin: 0 6px 18px }
.tr-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 10px; height: 10px; border: solid var(--red); border-width: 3px 3px 0 0; transform: rotate(45deg); border-radius: 1px }
.tr-amt { font-size: 1.5rem; line-height: 1; font-weight: 700; padding-left: 4px; color: var(--navy) }
.seal {
  position: absolute; right: 6px; top: -14px; padding: 10px 8px; border-radius: 50%; transform: rotate(-12deg);
  background: var(--red); color: #fff; font-size: .875rem; line-height: 1.1; font-weight: 600;
  box-shadow: 0 0 0 2px var(--parch), 0 0 0 4px var(--red), 0 6px 12px rgba(0, 0, 0, .35);
}
.tr.done .seal { background: var(--leaf); box-shadow: 0 0 0 2px var(--parch), 0 0 0 4px var(--leaf), 0 6px 12px rgba(0, 0, 0, .35) }
.tr-note { color: #fff; font-size: .9375rem; padding: 0 6px }

/* buttons: rounded rectangles, never pills (tarot.css .btn-c, .btn-g, .btn-i) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 16px;
  border-radius: 10px; font-weight: 600; font-size: 1.03rem; text-decoration: none; cursor: pointer;
  background: var(--cob); color: #fff; box-shadow: inset 0 0 0 2px var(--navy);
}
.btn.gold { background: var(--gold); color: var(--navy) }
.btn.ghost { background: none; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy) }
.btn:disabled { background: #DCDFE8; color: var(--p-muted); box-shadow: none; cursor: default }
.btn.wide { width: 100% }
.tr .btn { align-self: stretch }

/* my Receiving QR */
label { display: block; font-weight: 600; margin-top: 14px; margin-bottom: 6px }
.row { display: flex; gap: 8px }
.row input {
  flex: 1; min-width: 0; min-height: 50px; padding: 0 12px; border-radius: 8px; font-size: 1.0625rem; letter-spacing: .02em;
  background: #fff; color: var(--navy); border: 1.5px solid var(--navy);
}
.upload { margin-top: 12px; width: 100% }
.qr-note { margin-top: 10px; font-weight: 600 }
.qr-note:empty { display: none }

/* Bills */
.bills { display: flex; flex-direction: column; gap: 18px }
.bills h2 { margin-bottom: 0 }
.bill { border-top: 1.5px solid var(--p-soft); padding-top: 14px }
.bill:first-of-type { border-top: 0; padding-top: 0 }
.bill-top { display: flex; align-items: center; gap: 8px }
.bill-top h3 { flex: 1; min-width: 0; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere }
.bill-top .num { font-size: 1.0625rem }
.tag { font-size: .8125rem; font-weight: 600; padding: 2px 8px; border-radius: 6px }
.tag.open { background: var(--gold); color: var(--navy) }
.tag.closed { color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy) }
.bill > .muted { margin-top: 2px; font-size: .9375rem }
.items { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px }
.item { padding: 12px; border-radius: 8px; border: 1.5px solid var(--p-soft); background: rgba(255, 255, 255, .45) }
.item.unclaimed { border-color: var(--red); box-shadow: 0 0 0 1.5px var(--red) }
.it-top { display: flex; align-items: center; gap: 8px }
.it-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; flex: none; background: var(--navy); color: var(--gold) }
.it-n { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere }
.it-n em { font-style: normal; font-weight: 400; color: var(--p-muted) }
.it-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 44px; flex-wrap: wrap }
.who { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .9375rem; color: var(--p-muted) }
.who-one { display: inline-flex; align-items: center; gap: 4px }
.who-one.me { color: var(--p-ink); font-weight: 600 }
.claim {
  margin-left: auto; min-height: 44px; min-width: 88px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; font-weight: 600; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy);
}
.claim.on { background: var(--navy); color: var(--gold); box-shadow: none }
.stepper { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 600 }
.step { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy) }
.step:disabled { opacity: .35; cursor: default }

/* ticking your own (the mockup's bill-flow.css .tk-*, round12.css .tz-* without the stage) */
.tag.clock { display: inline-flex; align-items: center; gap: 4px; background: var(--navy); color: var(--gold) }
.tag.clock .ic { width: 14px; height: 14px; stroke-width: 2 }
.tk { display: grid; gap: 12px; margin-top: 12px }
.coin {
  width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(circle at 34% 28%, #33467A, #18213D 68%);
  box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .55), 0 0 0 2px var(--gold), 0 0 0 3.5px #18213D, 0 4px 8px rgba(0, 0, 0, .35)
}
.coin .ic { width: 50%; height: 50% }
.tk-tray { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 8px 10px; border-radius: 12px; background: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .5) }
.tk-tok { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 112px; padding: 8px 2px 6px; border-radius: 10px; color: #fff }
.tk-tok b { font-size: .9375rem; font-weight: 700; line-height: 1.2; padding-top: 4px }
.tk-sum { font-size: .844rem; font-weight: 600; color: var(--gold) }
.tk-tok[aria-pressed=true] { background: rgba(242, 179, 61, .16); box-shadow: inset 0 0 0 2px var(--gold) }
.tk-tok[aria-pressed=false] .coin { opacity: .62 }
.tk-on { position: absolute; top: 6px; right: calc(50% - 36px); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; box-shadow: 0 0 0 2px var(--navy) }
.tk-on .ic { width: 14px; height: 14px; stroke-width: 2.4 }
.tk-menu h4, .tk-wh b { font-family: Chonburi, var(--font); font-weight: 400; font-size: 1.0625rem; color: var(--red) }
.tk-menu h4 { padding-bottom: 4px }
.tk-mc { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; text-align: left; color: var(--navy); border-top: 1px solid var(--p-soft) }
.tk-mc b { font-size: .969rem } .tk-mc small { flex: 1; font-size: .844rem; color: var(--p-muted) }
.tk-mc > .ic:first-child { color: var(--red) }
.tk-mc[aria-expanded=true] > .ic:last-child { rotate: 180deg }
.tk-lines { padding-bottom: 8px }
.tk-l { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 10px 0; color: var(--navy); font-size: .9375rem }
.tk-l + .tk-l { border-top: 1px solid var(--p-soft) }
.tk-l .n { overflow-wrap: anywhere } .tk-l .p { font-weight: 700 }
.tk-seg { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.tk-seg button { min-height: 44px; border-radius: 8px; font-size: .906rem; font-weight: 600; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy) }
.tk-seg button[aria-pressed=true] { background: var(--navy); color: var(--gold) }
.tk-seg button[aria-pressed=true]:last-child { background: transparent; color: var(--p-warn); box-shadow: inset 0 0 0 2px var(--p-warn) }
.tk-solo { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 6px; border-radius: 8px; font-size: .906rem; font-weight: 600; color: var(--navy) }
.tk-solo .box { width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--navy); color: transparent }
.tk-solo .box .ic { width: 14px; height: 14px; stroke-width: 2.4 }
.tk-solo[aria-pressed=true] { color: var(--red) } .tk-solo[aria-pressed=true] .box { background: var(--red); color: #fff; box-shadow: none }
.tk-alone { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--p-warn) }
.tk-wh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .844rem; font-weight: 600; color: var(--p-muted) }
.tk-faces { display: flex; gap: 10px; overflow-x: auto; padding-top: 8px; scrollbar-width: none }
.tk-f { position: relative; flex: none; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .781rem; font-weight: 600; text-align: center }
.tk-f small { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tk-f:not(.done) .face { opacity: .45; filter: grayscale(1) }
.tk-f i { position: absolute; top: 24px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; box-shadow: 0 0 0 2px var(--parch) }
.tk-f i .ic { width: 12px; height: 12px; stroke-width: 2.6 }
.tk-f em { font-style: normal; font-size: .6875rem; font-weight: 700; color: var(--red); line-height: 1.2 }
.tk-send { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; background: var(--navy); box-shadow: inset 0 0 0 1.5px var(--gold) }
.tk-send .btn { min-width: 120px }
.tk-mine { flex: 1; min-width: 0; display: flex; align-items: center; padding-left: 4px }
.tk-mine .coin + .coin { margin-left: -6px }
.tk-mine small { font-size: .875rem; color: #E9ECF3 }
.tk-done { position: relative; display: grid; gap: 12px; padding: 16px 12px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--navy) }
.tk-done .seal { top: -12px; right: 10px }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 64px }
.tk-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 4px; border-radius: 6px; font-size: .875rem; font-weight: 600; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy) }
.tk-chip.plain, .tk-chip.none { padding-left: 10px }
.tk-chip.none { color: var(--p-muted); box-shadow: inset 0 0 0 1.5px rgba(24, 33, 61, .3) }
.tk-opens { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9375rem; color: var(--p-muted) }
.tk-opens .ic { width: 18px; height: 18px }
.tk-tok:active, .tk-seg button:active, .tk-solo:active, .tk-mc:active { transform: scale(.97); transition: transform .1s ease-out }
/* "ส่ง" asks once more (plan 16) */
.tk-ask { text-align: center; align-items: center }
.tk-ask h2 { color: #fff; margin: 0 }
.tk-ask .tk-chips { justify-content: center; padding: 0 }
.tk-ask .tk-chip { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .7) }
.tk-ask .btn { width: 100% }
.tk-ask-seal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--red) }
.tk-ask-seal .ic { width: 26px; height: 26px }

/* what the server said, at the bottom */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: max(20px, env(safe-area-inset-bottom)); max-width: 448px; margin: 0 auto; z-index: 20;
  padding: 12px 14px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 600; border: 1.5px solid var(--gold);
}
.toast:empty { display: none }

/* the face builder (FacePickerSheet, layout B; face-layout.css): full screen */
.fb { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--ground); animation: rise .32s cubic-bezier(.2, .9, .3, 1) }
.fb-head {
  position: relative; display: grid; place-items: center; min-height: 58px; padding: max(14px, env(safe-area-inset-top)) 66px 14px;
  background: var(--stars), var(--navy); border-bottom: 3px solid var(--gold)
}
.fb-head h2 { margin: 0; color: #fff; font-size: 1.25rem; text-align: center }
.fb-head .icon-btn { position: absolute; right: 14px; bottom: 7px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .7) }
.fb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: 480px; width: 100%; margin: 0 auto; padding: 12px 16px 0;
  box-shadow: inset 0 0 0 1.5px var(--rule), inset 0 0 0 5px var(--ground), inset 0 0 0 6px var(--rule) }
/* the sun card (SunCard): gold rays 4 degrees in every 12 from straight up, a glow behind you, darker edges, the stars */
.fb-card {
  --at: 50% 42%; flex: none; display: grid; justify-items: center; gap: calc(8px * (1 - var(--fl-y, 0)));
  padding: 12px 18px calc(14px - 4px * var(--fl-y, 0)); border-radius: 10px;
  background:
    radial-gradient(circle at var(--at), rgba(255, 214, 120, .5) 0, rgba(242, 179, 61, .18) 26%, transparent 52%),
    radial-gradient(circle at var(--at), transparent 38%, rgba(11, 16, 32, .72) 100%),
    repeating-conic-gradient(from 0deg at var(--at), rgba(242, 179, 61, .16) 0deg 4deg, transparent 4deg 12deg),
    var(--stars), linear-gradient(var(--cob), #1E3F78 62%, var(--navy));
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--navy), inset 0 0 0 6.5px var(--gold), 0 10px 22px rgba(0, 0, 0, .45);
}
.fb-me { position: relative; display: flex; align-items: flex-end; justify-content: center; height: calc(168px - 44px * var(--fl-y, 0)) }
.fb-me::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 104px; height: 16px; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(8, 12, 28, .6), transparent) }
.fb-me { isolation: isolate }
.fb-me .bd { transform: scale(calc(1 - .262 * var(--fl-y, 0))); transform-origin: 50% 100%; animation: land .4s cubic-bezier(.3, 1.6, .5, 1) }
.fb-plate { display: grid; justify-items: center; gap: 6px; margin: 0; padding-top: calc(10px * (1 - var(--fl-y, 0))); padding-bottom: 8px;
  max-height: calc(110px * (1 - var(--fl-y, 0))); opacity: calc(1 - 1.6 * var(--fl-y, 0)); overflow: hidden }
.fb-plate-h { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: .8125rem; font-weight: 600 }
.fb-plate-h::before, .fb-plate-h::after { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: .7 }
.fb-ribbon { position: relative; display: block; width: min(220px, 70vw); margin: 0 20px 7px }
/* the ribbon's folded tails, notched on their outer ends */
.fb-ribbon::before, .fb-ribbon::after { content: ""; position: absolute; top: 9px; bottom: -7px; width: 30px; z-index: -1; background: #B9852A }
.fb-ribbon::before { left: -20px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%) }
.fb-ribbon::after { right: -20px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%) }
.fb-ribbon { isolation: isolate }
.fb-ribbon input {
  width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 4px; text-align: center; font-size: 1.25rem; font-weight: 600;
  background: var(--parch); color: var(--red);
  box-shadow: inset 0 0 0 1.5px var(--navy), inset 0 0 0 4px var(--parch), inset 0 0 0 5.5px var(--gold), 0 3px 8px rgba(0, 0, 0, .35)
}
.fb-ribbon input:focus { outline: 2.5px solid var(--gold); outline-offset: 2px }
.fb-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain }
/* always room to fold the card all the way, or a short list (a cat's) would rock at its end */
.fb-rows { min-height: calc(100% + 140px); padding-bottom: 16px }
.fb-row { display: flex; align-items: center; gap: 6px; padding-top: 12px }
.fb-row h3 { flex: none; width: 70px; font-size: 1rem; color: var(--ink) }
.fb-tiles { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; padding: 6px; margin: -6px; scrollbar-width: none }
.fb-tiles::-webkit-scrollbar { display: none }
.fb-tile { position: relative; flex: none; padding: 4px; border-radius: 12px }
.fb-tile .face, .fb-sw, .fb-fig { display: block; outline: 2.5px solid transparent; outline-offset: 1px; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), outline-color .15s }
.fb-tile .face, .fb-sw { border-radius: 50% }
.fb-sw { width: 38px; height: 38px; margin: 2px; box-shadow: inset 0 0 0 2px rgba(24, 33, 61, .5) }
.fb-fig { width: 42px; height: 58px; display: flex; align-items: flex-end; justify-content: center; border-radius: 10px }
.fb-tile[aria-pressed=true] .face, .fb-tile[aria-pressed=true] .fb-sw, .fb-tile[aria-pressed=true] .fb-fig { outline-color: var(--gold) }
.fb-tile[aria-pressed=true] .face { transform: scale(1.05) }
.fb-pick { position: absolute; top: 0; right: 0; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--leaf); color: #fff;
  box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--leaf) }
.fb-pick .ic { width: 12px; height: 12px; stroke-width: 2.4 }
.fb-foot { flex: none; width: 100%; max-width: 480px; margin: 0 auto; padding: 10px 16px max(8px, env(safe-area-inset-bottom)); border-top: 1.5px solid var(--rule); background: var(--ground) }
.fb-foot .btn:disabled { background: #2A3352; color: var(--muted) }
.fb-said { color: #FF9B8A; font-weight: 600; text-align: center; padding-bottom: 8px }
.fb-said:empty { display: none }

/* the QR card sheet */
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .5); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease-out }
.qr-sheet {
  width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto; padding: 14px 20px max(24px, env(safe-area-inset-bottom));
  background: var(--navy); color: #fff; border-radius: 22px 22px 0 0; border-top: 3px solid var(--gold);
  display: flex; flex-direction: column; gap: 12px; animation: rise .32s cubic-bezier(.2, .9, .3, 1);
}
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 1.0625rem }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; flex: none }
.card-wrap { display: flex; flex-direction: column; gap: 10px }
img.qr-card { width: 100%; max-width: 320px; align-self: center; border-radius: 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, .35) }
.sheet-msg { color: #C9CEDB; text-align: center }
.qr-sheet .btn:not(.gold) { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .7) }
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { transform: translateY(40px); opacity: 0 } }
@keyframes land { from { scale: .92 } }
/* v2 ticket 11: a Guest adds a Bill (the mockup's tarot.css .snap, round12.css .wc and .py, bill-flow.css .pg .rd .su) */
.snap {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 16px; border-radius: 12px; text-align: left;
  background: var(--gold); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy), 0 12px 22px rgba(0, 0, 0, .4)
}
.snap .ring { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--gold); box-shadow: 0 0 0 2px var(--parch) }
.snap .ring .ic { width: 26px; height: 26px }
.snap .grow { flex: 1; min-width: 0 }
.snap b { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.2 }
.snap small { display: block; margin-top: 3px; font-size: .875rem; font-weight: 600; line-height: 1.35 }
.snap:active { transform: scale(.98); transition: transform .1s ease-out }
.sn .fb-head .back { right: auto; left: 14px }
.sn .fb-scroll { padding: 4px 0 20px }
.wc { display: grid; justify-items: center; gap: 12px; margin-top: 14px; padding: 28px 18px 18px }
.wc-ghost {
  position: relative; width: 132px; height: 170px; margin-bottom: 10px; padding: 18px 16px; display: grid; align-content: start; gap: 9px;
  border-radius: 4px; transform: rotate(-3deg); background: #FBF6EA; box-shadow: 0 0 0 2px var(--navy), 0 10px 18px rgba(24, 33, 61, .3)
}
.wc-ghost i { display: block; height: 6px; border-radius: 3px; background: rgba(24, 33, 61, .22) }
.wc-ghost i.s { width: 60% }
.wc-ghost b { position: absolute; inset: -14px; border: 2.5px dashed var(--gold); border-radius: 12px }
.wc .btn { width: 100%; margin: 0 }
.wc .btn.gold { min-height: 56px; font-size: 1.0625rem }
.sn-deal { display: grid; place-items: center; padding: 22px 0 10px }
.sn-shot {
  grid-area: 1 / 1; position: relative; width: 210px; height: 290px; padding: 8px; border-radius: 12px; overflow: hidden; background: var(--parch);
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 5px var(--gold), 0 24px 36px rgba(0, 0, 0, .5);
  transform: translate(calc(var(--i) * -14px), calc(var(--i) * 6px)) rotate(calc(-2deg - var(--i) * 5deg))
}
.sn-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1.5px var(--navy) }
.sn-scan { position: absolute; left: 8px; right: 8px; height: 3px; background: var(--gold); box-shadow: 0 0 14px 4px rgba(242, 179, 61, .6); animation: scan 1.7s cubic-bezier(.45, 0, .55, 1) infinite alternate }
@keyframes scan { from { top: 4% } to { top: 94% } }
.pg { margin-top: 14px; padding: 14px 16px 12px; border-radius: 12px; background: rgba(7, 11, 24, .45); box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .45) }
.pg-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px }
.pg-row b { font-size: 1.125rem; font-weight: 600; color: #fff }
.pg-num { font-size: 1.625rem; font-weight: 700; line-height: 1; color: var(--gold); min-width: 64px; text-align: right }
.pg-bar { margin-top: 10px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .14); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) }
.pg-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #E39A1C, var(--gold) 70%, #FFE3A3) }
.pg p { padding-top: 8px; font-size: .875rem; color: #E9ECF3 }
.rd { margin-top: 10px; padding: 18px 16px 16px }
.rd-top { display: flex; gap: 14px; align-items: center }
.rd-top h3 { font-size: 1.125rem; line-height: 1.3; color: var(--red); overflow-wrap: anywhere }
.rd-top small { font-size: .875rem }
.rd-thumbs { position: relative; display: grid; flex: none; width: 54px; height: 72px }
.rd-thumbs img {
  grid-area: 1 / 1; width: 46px; height: 64px; object-fit: cover; border-radius: 5px; border: 3px solid var(--parch);
  box-shadow: 0 0 0 1.5px var(--navy), 0 4px 8px rgba(0, 0, 0, .3); transform: translate(calc(var(--i) * 3px), calc(var(--i) * -3px)) rotate(calc(var(--i) * 4deg - 3deg))
}
.rd-note { padding-top: 10px; font-size: .875rem; line-height: 1.45 }
.rd-cat { padding-top: 14px }
.rd-h { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 3px double var(--navy) }
.rd-h b { flex: 1; font-size: 1.0625rem; font-weight: 600; color: var(--red) }
.rd-h span { font-weight: 700 }
.rd-l {
  width: 100%; display: grid; grid-template-columns: 24px 1fr auto 18px; gap: 8px; align-items: center; min-height: 44px; text-align: left;
  font-size: .9375rem; color: var(--navy); border-bottom: 1px solid var(--p-soft)
}
.rd-l .q { color: var(--p-muted); font-weight: 600 }
.rd-l .n { overflow-wrap: anywhere }
.rd-l .p { font-weight: 600 }
.rd-l .ic { width: 18px; height: 18px; color: var(--p-muted) }
.rd-l.flag { color: var(--p-warn); background: rgba(185, 50, 38, .1) }
.rd-l.flag .ic { color: var(--p-warn) }
.rd-add { margin-top: 14px }
.rd-x { display: flex; justify-content: space-between; padding-top: 8px; font-size: .906rem; color: var(--p-muted) }
.rd-check { display: flex; gap: 8px; align-items: flex-start; padding-top: 12px; font-size: .9375rem; font-weight: 600 }
.rd-check.ok { color: var(--p-ok) }
.rd-check.warn { color: var(--p-warn) }
.rd-check .ic { margin-top: 2px }
.py-h { margin: 14px 0 2px; text-align: center; font-size: 1.6875rem; line-height: 1.25; color: #fff }
.py-sum { text-align: center; font-size: .9375rem; font-weight: 600; color: #E9ECF3 }
/* v2 ticket 17: each person a tarot card (numeral, arched art window, name plate, star corners), the mockup's game-snap.css */
.py-grid {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 18px 14px 8px; /* room for the seal over a right-hand card */
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 7 13 9 20 10C13 11 11 13 10 20C9 13 7 11 0 10C7 9 9 7 10 0Z' fill='%23F2B33D' stroke='%2318213D' stroke-width='1.3'/%3E%3C/svg%3E")
}
.py-t {
  position: relative; aspect-ratio: 5 / 8; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px;
  padding: 12px 10px 11px; border-radius: 9px; color: var(--navy); background: radial-gradient(120% 70% at 50% 0%, #FBF1D8, var(--parch) 55%, #E7D2A6);
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 5px var(--parch), inset 0 0 0 6.5px var(--gold), 0 10px 16px rgba(0, 0, 0, .42)
}
.py-t::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  background: var(--star) left top / 9px no-repeat, var(--star) right top / 9px no-repeat, var(--star) left bottom / 9px no-repeat, var(--star) right bottom / 9px no-repeat
}
.py-no { font-size: .781rem; font-weight: 600; line-height: 1; letter-spacing: .14em; padding-top: 1px }
.py-art {
  width: 100%; display: grid; place-items: center; border-radius: 999px 999px 5px 5px; overflow: hidden;
  background: repeating-conic-gradient(from 0deg at 50% 58%, rgba(242, 179, 61, .45) 0 5deg, transparent 5deg 15deg), radial-gradient(circle at 50% 58%, #3B77C4, var(--navy) 78%);
  box-shadow: inset 0 0 0 1.5px var(--navy), inset 0 0 0 3.5px var(--parch), inset 0 0 0 4.5px var(--gold)
}
.py-art .face { margin-top: 14% }
.py-nm {
  max-width: calc(100% - 20px); padding: 3px 8px 4px; border-radius: 3px; background: var(--navy); color: var(--parch); font-size: .875rem; font-weight: 600;
  line-height: 1.25; box-shadow: 0 0 0 1px var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.py-t[aria-checked=true] {
  background: radial-gradient(120% 70% at 50% 0%, #FFF7E0, #F8EACB 55%, #EBD3A0);
  box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 5px #F8EACB, inset 0 0 0 6.5px var(--gold), 0 0 0 2.5px var(--gold), 0 0 22px rgba(242, 179, 61, .35), 0 14px 22px rgba(0, 0, 0, .5)
}
/* the seal, option B ตรายาง: over its card's top corner so the face stays seen; flown and pressed by app.ts */
.py-seal {
  position: relative; z-index: 2; align-self: start; justify-self: end; width: 96px; height: 52px; margin: 2px -8px 0 0; rotate: 14deg; translate: 0px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.py-seal::before { content: ""; position: absolute; inset: 0; border-radius: 7px; background: rgba(251, 241, 216, .8) } /* the paper under the ink, so the word reads over a face */
.py-seal i { position: absolute; font-style: normal }
.py-seal .disc { inset: 0; display: grid; place-items: center; border: 3.5px solid #E2453A; border-radius: 7px; -webkit-mask: var(--grain); mask: var(--grain) }
.py-seal .disc::before { content: ""; position: absolute; inset: 3px; border: 1.5px solid #E2453A; border-radius: 3px }
.py-seal b { font-size: 1.1875rem; font-weight: 700; line-height: 1; letter-spacing: .02em; color: #D23A2F }
.py-seal .splat { inset: -9px; border-radius: 16px; opacity: .45; background: radial-gradient(closest-side, rgba(226, 69, 58, .55), rgba(226, 69, 58, .18) 70%, transparent); filter: blur(2px) }
/* what a finger drags: no text selection, no browser drag, no scroll under it */
.py-seal, .dial, .fader, .rail, .sn-shot.toy { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: grab }
.py-seal, .dial, .fader, .sn-shot.toy { touch-action: none }
.sn-shot.toy img { pointer-events: none }
/* the hours, option C กงล้อทาโรต์: the Wheel of Fortune turns under a fixed gold pointer whose flap ticks over the pegs; --h is
   the hours, a float while it turns */
.dial { position: relative; width: max-content; margin: 10px auto 2px; display: grid; justify-items: center; border-radius: 14px; outline-offset: 6px }
.dial:focus-visible, .fader:focus-visible { outline: 2.5px solid var(--cob) }
.dl-win {
  position: relative; width: 300px; height: 200px; overflow: hidden; border-radius: 150px 150px 12px 12px; background: radial-gradient(circle at 50% 80%, #24325C, var(--navy) 70%);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--navy), 0 10px 18px rgba(24, 33, 61, .35)
}
.dl-wheel {
  position: absolute; left: 5px; top: 16px; width: 290px; height: 290px; border-radius: 50%; rotate: calc((1 - var(--h)) * 15deg);
  background: repeating-conic-gradient(from -7.5deg, #2D63AE 0 15deg, #1E3F78 15deg 30deg); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 6px var(--navy), 0 0 0 2px var(--navy)
}
.dl-marks { position: absolute; inset: 0; pointer-events: none }
.dl-marks i { position: absolute; left: 50%; top: 0; width: 0; height: 50%; transform-origin: 50% 100%; rotate: calc((var(--t) - 1) * 15deg) }
.dl-marks i::before {
  content: ""; position: absolute; left: -3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px var(--navy);
  transform-origin: 3px 137px; rotate: 7.5deg
}
.dl-marks b { position: absolute; left: 0; top: 20px; translate: -50% 0; font-size: .875rem; font-weight: 700; line-height: 1; color: var(--parch) }
.dl-marks i:nth-child(6n) b { color: var(--gold) }
.dl-hub {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px; border-radius: 50%; pointer-events: none;
  background: url(art/app-eye.webp) center / 118% no-repeat, var(--parch); box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--navy)
}
.dl-flap { position: absolute; left: 50%; top: 0; width: 24px; height: 32px; margin-left: -12px; transform-origin: 50% 0; background: linear-gradient(#FFD76E, #C98B1E); clip-path: polygon(0 0, 100% 0, 50% 100%) }
.dl-win::after {
  content: ""; position: absolute; left: 50%; top: 14px; width: 44px; height: 70px; margin-left: -22px; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 215, 110, .38), transparent 70%)
}
.dl-read { display: flex; align-items: baseline; gap: 5px; margin-top: 10px; pointer-events: none }
.dl-v { font-size: 1.875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--navy) }
.dl-read small { font-size: .9375rem; font-weight: 600; color: var(--p-muted) }
@media (max-width: 374px) { .dial { zoom: .88 } } /* the wheel's 300 px inside a 360 px phone's card */
/* what the payer covers: a fader with four stops (the rack's fader cap) */
.su-cover { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-top: 6px }
.fader { position: relative; width: 112px; padding: 4px 0; border-radius: 8px; outline-offset: 4px }
.fd-track { position: relative; display: block; height: 154px }
.fd-slot { position: absolute; left: 21px; top: 7px; bottom: 7px; width: 8px; border-radius: 4px; background: #0B0D12; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 0 0 1px rgba(24, 33, 61, .35) }
.fd-stop { position: absolute; left: 0; right: 0; bottom: calc(11px + var(--k) / 3 * 132px); height: 0; display: flex; align-items: center }
.fd-stop::before { content: ""; flex: none; width: 42px; height: 2px; margin-left: 4px; background: var(--navy) }
.fd-stop small { padding-left: 7px; font-size: .875rem; font-weight: 600; line-height: 1.1; color: var(--navy) }
.fd-cap {
  position: absolute; left: 4px; bottom: 0; width: 42px; height: 22px; border-radius: 4px; translate: 0 calc(var(--f) / -3 * 132px);
  background: linear-gradient(#41475A, #15181F 55%, #2A2E38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 8px rgba(0, 0, 0, .45)
}
.fd-cap::after { content: ""; position: absolute; left: 4px; right: 4px; top: 10px; height: 2px; background: #fff }
.fader:active .fd-cap { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 2px var(--gold), 0 6px 12px rgba(0, 0, 0, .5) }
.fd-read { display: grid; gap: 6px; align-content: center }
.fd-v { font-size: 1.875rem; font-weight: 700; line-height: 1.1; color: var(--navy) }
.su-note:empty { display: none }
/* the slide rail (list, payer, open for ticking): the card or the payer's face slid to the end */
.rail {
  position: relative; height: 64px; display: grid; align-items: center; border-radius: 12px; container-type: inline-size; touch-action: pan-y;
  background: rgba(7, 11, 24, .62); box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 3px 10px rgba(0, 0, 0, .6)
}
.rail::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: clamp(52px, 52px + var(--r) * (100cqw - 64px), 100cqw - 12px); border-radius: 9px;
  background: rgba(242, 179, 61, .22)
}
.rail:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px }
.rail-l {
  justify-self: center; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 10px 0 66px; font-size: 1.03rem; font-weight: 600;
  line-height: 1.2; color: #fff; opacity: calc(1 - var(--r) * 1.8); pointer-events: none
}
.rail-l span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rail-l .ic { color: var(--gold) }
.rail-k {
  position: absolute; left: 6px; top: 6px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 9px; background: var(--gold);
  box-shadow: inset 0 0 0 2px var(--navy), 0 4px 10px rgba(0, 0, 0, .45); translate: clamp(-12px, var(--r) * (100cqw - 64px), 100cqw - 52px) 0; transition: scale .12s
}
.rail:active .rail-k { scale: .95 }
.rail-card { width: 30px; height: 44px; border-radius: 4px; background: url(art/card-back.webp) center / cover; box-shadow: 0 0 0 1.5px var(--navy) }
.su { margin-top: 10px; display: grid; gap: 6px }
.su h3 { font-size: 1.0625rem; line-height: 1.3; color: var(--red); overflow-wrap: anywhere }
.su-amt { font-size: 1.875rem; font-weight: 700; line-height: 1.1 }
.su-payer {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 6px; padding: 0 12px 0 6px; border-radius: 10px; text-align: left;
  color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy)
}
.su-payer b { flex: 1; min-width: 0; font-size: .969rem; overflow-wrap: anywhere }
.su h4 { padding-top: 14px; font-size: 1.0625rem; font-weight: 600; color: var(--red) }
.su-note { font-size: .844rem; line-height: 1.45; color: var(--p-muted) }
.choices { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px }
.choice { min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: .969rem; font-weight: 600; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy) }
.choice[aria-pressed=true] { background: var(--navy); color: var(--gold); box-shadow: inset 0 0 0 2px var(--navy) }
.scrim.over { z-index: 50 }
.fx h2 { margin: 0; color: #fff }
.fx label { margin: 4px 0 -6px; color: #E9ECF3 }
.fx input { min-height: 50px; padding: 0 12px; border: 0; border-radius: 8px; font-size: 1.0625rem; background: #fff; color: var(--navy) }
.fx input:focus { outline: 2.5px solid var(--gold); outline-offset: 2px }
.fx .choice { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .7) }
.fx .choice[aria-pressed=true] { background: var(--gold); color: var(--navy); box-shadow: none }
.fx .warn { color: #FF9B8A; margin: 0 }
.fx .warn:empty { display: none }
/* v2 ticket 20: the Guest's slip on the QR card, slid in with โอนแล้ว and read */
.pay, .sl-read { display: flex; flex-direction: column; gap: 10px }
img.sl-shot { align-self: center; max-width: 150px; max-height: 210px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 2px var(--gold), 0 10px 18px rgba(0, 0, 0, .4) }
.rail-slip { width: 34px; height: 44px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1.5px var(--navy) }
.rail.locked { cursor: not-allowed }
.rail.locked .rail-l { color: #C9CEDB; padding-right: 10px }
.rail.locked .rail-k { background: #2A3557; color: #C9CEDB; box-shadow: inset 0 0 0 1.5px rgba(242, 179, 61, .5) }
.sl-amt { display: grid; justify-items: center; gap: 2px }
.sl-amt small { color: #C9CEDB; font-size: .875rem }
.sl-amt b { font-size: 1.875rem; line-height: 1.1 }
.sl-v { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; color: #C9CEDB }
.sl-v.ok { color: #8FD18A }
.sl-v.short { color: #FF9B8A }
.sl-v.over { color: var(--gold) }
.ai-note { font-size: .8125rem; line-height: 1.45; text-align: center }

@media (prefers-reduced-motion: reduce) {
  .sn-scan { animation: none; top: 50% }
  .rail-k { transition: none }
  .snap:active { transform: none }
}
@media (prefers-reduced-motion: reduce) {
  .scrim, .qr-sheet, .fb, .fb-me .bd { animation: none }
  .tr:nth-child(odd) .tr-card { transform: none }
  .name:active, .btn:active, .claim:active, .step:active, .chip:active, .fb-tile:active, .ga-btn:active { transform: none }
  .fb-tile .face, .fb-sw, .fb-fig { transition: none }
}