/* TableClaim demo: the app's colours, letters and receipt, for two phones that talk to each other. */
@font-face { font-family: IS; src: url(/assets/InstrumentSerif_400Regular_Italic.ttf); font-style: italic; font-display: swap; }
@font-face { font-family: Outfit; font-weight: 600; src: url(/assets/Outfit_600SemiBold.ttf); font-display: swap; }
@font-face { font-family: Outfit; font-weight: 700; src: url(/assets/Outfit_700Bold.ttf); font-display: swap; }
@font-face { font-family: Outfit; font-weight: 800; src: url(/assets/Outfit_800ExtraBold.ttf); font-display: swap; }
@font-face { font-family: Mono; font-weight: 400; src: url(/assets/IBMPlexMono_400Regular.woff2); font-display: swap; }
@font-face { font-family: Mono; font-weight: 600; src: url(/assets/IBMPlexMono_600SemiBold.woff2); font-display: swap; }

:root {
  --navy: #1C2840; --navy-deep: #121C30; --cherry: #8E1825; --cherry-deep: #5E0F17; --blush: #F2D6CE;
  --paper: #FBF6F2; --ink: #3D2722; --muted: rgba(61,39,34,.68); --live: #2E9E5B; --slip: #FFFCFA;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Outfit, -apple-system, system-ui, sans-serif; font-weight: 600; color: var(--ink);
  background: radial-gradient(120% 70% at 50% 0%, #2C3E60 0%, var(--navy) 50%, var(--navy-deep) 100%) fixed;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body::before { content: ""; position: fixed; inset: -120px; background: url(/assets/tafelpatroon.svg) 0 0/420px repeat; opacity: .06; transform: rotate(-4deg); pointer-events: none; }
.band { position: sticky; top: 0; z-index: 5; text-align: center; padding: 7px 12px; background: #F2B544; color: #2B1B16; font: 600 12px/1.2 Mono; letter-spacing: 3px; }
.wrap { position: relative; max-width: 460px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 16px; }
.top { display: flex; align-items: center; justify-content: space-between; color: var(--blush); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.brand span { font: 400 30px/1 IS; font-style: italic; }
.pill { border-radius: 999px; background: rgba(242,214,206,.14); color: var(--blush); padding: 8px 14px; font-size: 14px; }
.head { color: var(--blush); }
.head h1 { font: 400 46px/1 IS; font-style: italic; margin: 6px 0 4px; letter-spacing: -.5px; }
.head p { margin: 0; color: rgba(242,214,206,.75); font-size: 15px; }
.sheet { background: var(--paper); border-radius: 28px; padding: 22px; display: grid; gap: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.sheet h2 { font: 400 34px/1.05 IS; font-style: italic; margin: 0; }
.label { font-size: 13px; color: var(--muted); letter-spacing: .3px; }
.field { border-radius: 16px; background: #F1E9E5; padding: 16px 18px; font-size: 17px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.field i { width: 10px; height: 10px; border-radius: 50%; background: var(--cherry); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-width: 52px; height: 52px; padding: 0 14px; border-radius: 26px; border: 0; background: #F1E9E5; color: var(--ink); font: 800 18px Outfit; cursor: pointer; }
.chip.on { background: var(--navy); color: var(--blush); }
.btn { display: block; width: 100%; border: 0; border-radius: 999px; padding: 18px; background: var(--cherry); color: var(--blush); font: 800 17px Outfit; letter-spacing: .4px; box-shadow: 0 5px 0 var(--cherry-deep); cursor: pointer; text-align: center; text-decoration: none; }
.btn:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--cherry-deep); }
.btn.green { background: var(--live); box-shadow: 0 5px 0 #1F6E3F; color: #fff; }
.btn.navy { background: var(--navy); box-shadow: 0 5px 0 #0E1626; }
.link { background: none; border: 0; color: var(--muted); font: 700 14px Outfit; text-decoration: underline; cursor: pointer; justify-self: center; padding: 6px; }
.status { display: flex; align-items: center; gap: 10px; color: var(--blush); font-size: 15px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(242,214,206,.35); flex: none; }
.dot.live { background: var(--live); box-shadow: 0 0 0 0 rgba(46,158,91,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 12px rgba(46,158,91,0); } }

/* Radar while live */
.radar { position: relative; height: 260px; display: grid; place-items: center; overflow: hidden; border-radius: 24px; background: radial-gradient(circle, rgba(242,214,206,.07), transparent 70%); }
.radar .ring { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(242,214,206,.5); animation: ring 2.4s cubic-bezier(.2,.7,.3,1) infinite; opacity: 0; }
.radar .ring:nth-child(2) { animation-delay: .6s; } .radar .ring:nth-child(3) { animation-delay: 1.2s; } .radar .ring:nth-child(4) { animation-delay: 1.8s; }
@keyframes ring { from { transform: scale(.1); opacity: .7; } to { transform: scale(1.4); opacity: 0; } }
.radar .sweep { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 300deg, rgba(242,214,206,.22) 360deg); animation: spin 2.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.radar .me { width: 22px; height: 22px; border-radius: 50%; background: var(--live); border: 4px solid #FFF8F5; z-index: 1; }

/* The receipt, as in the app */
.slip { background: var(--slip); padding: 18px 18px 16px; font-family: Mono; color: #2B1B16; transform: rotate(-.6deg); box-shadow: 0 6px 16px rgba(0,0,0,.12); border: 1px solid rgba(43,27,22,.1); }
.slip .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: #6B5650; margin-top: 8px; }
.slip .row b { color: #2B1B16; font-weight: 600; font-size: 16px; }
.slip .lg b { font-size: 26px; }
.slip .h { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; letter-spacing: 3px; }
.slip .stamp { color: var(--cherry); border: 3px solid var(--cherry); padding: 4px 8px; font-size: 12px; letter-spacing: 2px; }
.slip .dash { border-top: 2px dashed rgba(61,39,34,.22); margin: 12px 0 4px; }
.slip .name { font: 800 22px Outfit; margin-top: 8px; }
.slip .sub { font-size: 13px; color: #6B5650; }

.offer { background: var(--paper); border-radius: 28px; padding: 18px; display: grid; gap: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: rise .45s cubic-bezier(.2,.9,.3,1.15); }
@keyframes rise { from { transform: translateY(80px); opacity: 0; } }
.offer .photo { height: 150px; border-radius: 18px; background: url(/assets/avond-brasserie.jpg) center/cover; }
.note { font-size: 13px; color: var(--muted); text-align: center; }
.done { color: var(--live); font-weight: 800; }
.card { background: var(--paper); border-radius: 24px; padding: 20px; display: grid; gap: 10px; }
.card.claimed { border: 3px solid var(--live); }
.card .big { font: 400 32px/1.05 IS; font-style: italic; }
.qr { display: grid; place-items: center; background: #fff; border-radius: 18px; padding: 14px; }
.qr img, .qr svg { width: 170px; height: 170px; }
.copy { font: 600 13px Mono; color: var(--muted); word-break: break-all; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: var(--blush); padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.on { opacity: 1; }