/* Not My Event: the look of "Now Boarding", the airport-gate Friendsgiving (public/templates/now-boarding.html).
   Night-time terminal: navy glass, amber departure-board letters on black, cream paper boarding passes. The drawings are in /assets/gate-art.js (window.GATE).
   Everything that moves uses transform and opacity only. */
:root {
  --night: #050c1f; --navy: #0b1a33; --navy2: #13294f; --steel: #c9d3e6; --white: #f6f8fc; --amber: #ffb627; --amber-d: #e08e00;
  --paper: #fff6e0; --paper2: #f1e1b8; --ink: #1a2338; --ink-soft: #56617a; --red: #e8503a; --teal: #2fc4b2; --blue: #5aa9ff;
  --head: "Oswald", "Arial Narrow", Impact, system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: var(--night); color: var(--white); }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.locked { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
[hidden] { display: none !important; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.logo-slot { display: inline-flex; flex: none; width: 34px; height: 34px; }
.logo-slot svg { width: 100%; height: 100%; display: block; }
.airline .logo-slot { width: 44px; height: 44px; }
.mp-h .logo-slot { width: 28px; height: 28px; }
.skip-link { position: fixed; left: 12px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 6px; background: var(--amber); color: var(--ink); font-weight: 700; transition: top .15s; }
.skip-link:focus { top: 12px; }
#invite { position: relative; z-index: 2; overflow-x: hidden; overflow-x: clip; }

/* ---------- Behind everything: the window onto the airfield ---------- */
#world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--night); }
#world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 9, 22, .5), rgba(4, 9, 22, .26) 55%, rgba(4, 9, 22, .5)); pointer-events: none; }
#world svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* The airfield does not move when the page scrolls: it is a window, and the guest scrolls past it. */
.w-star { animation: twinkle 3.6s ease-in-out infinite alternate; }
.w-star.s1 { animation-delay: -1.2s; animation-duration: 4.4s; } .w-star.s2 { animation-delay: -2.4s; animation-duration: 3s; }
.w-beacon, .w-orange { animation: beacon 1.6s steps(1) infinite; }
.w-orange { animation-duration: .9s; }
.w-lamps { animation: lamp 2.4s ease-in-out infinite; }
.w-lamps.l1 { animation-delay: -.8s; } .w-lamps.l2 { animation-delay: -1.6s; }
.w-tug { animation: tug 52s linear infinite; animation-delay: -30s; }
.w-take { opacity: 0; }
.w-take.go { animation: takeoff 9s linear both; }
.pl-red { animation: beacon 1.7s steps(1) infinite; } .pl-white { animation: beacon 2.3s steps(1) infinite reverse; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes beacon { 0%, 50% { opacity: 1; } 51%, 100% { opacity: .1; } }
@keyframes lamp { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes tug { from { transform: translateX(1300px); } to { transform: translateX(-360px); } }
/* Seen from behind: the plane starts big at the near end of the runway and rolls away down the centre line toward the horizon (it gets smaller the way the runway does),
   lifts off at the far end (50%), retracts its wheels and climbs up through the sky and out of the top of the window. It does not fade: it flies out of sight. The origin is
   where its wheels touch the ground; the window's top edge is never more than 800 up from there, so -900 is out of it. It is the only plane in the sky. */
@keyframes takeoff {
  0% { opacity: 0; transform: translate(0, -5px) scale(2.62); }
  6% { opacity: 1; transform: translate(0, -30px) scale(2.44); }
  24% { transform: translate(0, -110px) scale(1.77); }
  42% { transform: translate(0, -200px) scale(1); }
  50% { transform: translate(0, -258px) scale(.62); }
  60% { transform: translate(3px, -340px) scale(.6) rotate(1deg); }
  78% { transform: translate(12px, -520px) scale(.54) rotate(3deg); }
  100% { opacity: 1; transform: translate(30px, -900px) scale(.44) rotate(6deg); }
}
.w-take .blast { transform-box: fill-box; transform-origin: 50% 50%; }
.w-take.go .blast { animation: blast .22s ease-in-out infinite alternate; }
.w-take.go .gear { animation: gearup 9s linear both; }
@keyframes blast { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.25); opacity: 1; } }
@keyframes gearup { 0%, 50% { opacity: 1; } 58%, 100% { opacity: 0; } }

/* ---------- In front of everything: travellers. They never take a tap. ---------- */
#front { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.walker { position: absolute; bottom: -6px; left: 0; width: clamp(96px, 17vw, 168px); opacity: .94; animation: walk var(--t, 22s) linear forwards; }
.walker.rtl { animation-name: walkback; }
.walker svg { display: block; width: 100%; height: auto; overflow: visible; }
.walker .wk { animation: bob var(--st, 1.1s) ease-in-out infinite; }
/* A walk, not a shuffle: each leg swings back along the floor while its foot is planted (a straight, even sweep), then lifts, shortens a little and swings forward; the other leg does the same half a cycle later;
   the body rises on each step. --st is one full stride, and the script works out how long the person takes to cross the screen from it, so the feet do not slide. */
.walker .lg { transform-box: fill-box; transform-origin: 50% 0; animation: stride var(--st, 1.1s) linear infinite; }
.walker .lg.b { animation-delay: calc(var(--st, 1.1s) / -2); }
.walker .ar { transform-box: fill-box; transform-origin: 50% 0; animation: swing var(--st, 1.1s) ease-in-out infinite; }
.walker.rtl svg { transform: scaleX(-1); }
@keyframes walk { from { transform: translateX(-24vw); } to { transform: translateX(110vw); } }
@keyframes walkback { from { transform: translateX(110vw); } to { transform: translateX(-24vw); } }
@keyframes bob { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-4px); } }
@keyframes stride {
  0% { transform: translateY(0) rotate(22deg) scaleY(1); }
  50% { transform: translateY(0) rotate(-22deg) scaleY(1); animation-timing-function: ease-in-out; }
  75% { transform: translateY(-3px) rotate(0deg) scaleY(.9); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) rotate(22deg) scaleY(1); }
}
@keyframes swing { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }

/* ---------- Sound button, the opening ---------- */
.mute { position: fixed; z-index: 45; top: calc(12px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--navy2); box-shadow: 0 0 0 2px var(--amber), 0 8px 18px -8px rgba(0, 0, 0, .7); display: grid; place-items: center; font-size: 20px; }
.nme-edit .mute { top: 64px; }
.intro { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 20px max(16px, env(safe-area-inset-left, 0px)); background: radial-gradient(70% 55% at 50% 45%, #14305e, #050c1f 85%); transition: opacity .9s ease, visibility .9s, transform .9s ease; overflow: hidden; }
.intro.gone { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.04); }
.i-top { font: 500 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--steel); display: flex; gap: 10px; align-items: center; justify-content: center; }
.i-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: beacon 1.2s steps(1) infinite; }
.kiosk-top { position: relative; z-index: 2; width: min(86vw, 340px); padding: 14px 14px 22px; border-radius: 18px 18px 8px 8px; background: linear-gradient(180deg, #2b3a5e, #16223f); box-shadow: 0 0 0 2px #0a1020, 0 24px 50px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .15); transition: transform .8s ease .1s; }
.ks-screen { display: grid; place-items: center; min-height: 50px; padding: 8px; border-radius: 8px; background: #04100f; box-shadow: inset 0 0 0 2px #0a1b19; font: 500 13px var(--mono); letter-spacing: .12em; color: #5cf0b8; text-transform: uppercase; }
.ks-slot { position: absolute; left: 14%; right: 14%; bottom: 8px; height: 8px; border-radius: 4px; background: #02060f; box-shadow: 0 1px 0 rgba(255, 255, 255, .18); overflow: hidden; }
.ks-beam { position: absolute; left: 0; top: 3px; height: 2px; width: 100%; background: var(--red); box-shadow: 0 0 8px var(--red); opacity: .85; animation: beam 1.4s ease-in-out infinite alternate; }
.ks-lamp { position: absolute; right: 18px; bottom: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); transition: background .3s, box-shadow .3s; }
.intro.ok .ks-lamp { background: #34e08a; box-shadow: 0 0 12px #34e08a; }
.intro.ok .ks-beam { background: #34e08a; box-shadow: 0 0 8px #34e08a; animation: none; }
@keyframes beam { from { transform: translateX(-30%); } to { transform: translateX(30%); } }
.mini-pass { position: relative; z-index: 1; width: min(88vw, 372px); display: grid; grid-template-columns: 1fr 78px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; transition: transform .9s cubic-bezier(.5, 0, .3, 1); animation: float 3.4s ease-in-out infinite; }
.intro.scan .mini-pass { animation: none; transform-origin: 50% 0; transform: translateY(-16px) scaleY(.03); opacity: 0; transition: transform .9s cubic-bezier(.6, 0, .4, 1), opacity .25s ease .65s; }
.mp-main { display: grid; gap: 10px; align-content: start; min-width: 0; padding: 14px 16px 12px; background: var(--paper); border-radius: 12px 0 0 12px; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .9); transition: border-radius .3s ease .35s; }
/* the stub: on the other side of the dotted line. Tapping the pass tears it off (the .torn class on the pass), then the rest goes into the scanner. */
.mp-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10px 8px; background: var(--paper2); border-left: 2px dashed rgba(26, 35, 56, .4); border-radius: 0 12px 12px 0; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .9); transform-origin: 0 0; }
.mp-stub small { font: 500 8px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.mp-stub b { font: 700 18px var(--head); letter-spacing: .1em; }
.mp-stub .bc { width: 100%; height: 40px; }
.mp-stub .bc svg { width: 100%; height: 100%; display: block; }
.mini-pass.torn .mp-main { border-radius: 12px; }
.mini-pass.torn .mp-stub { z-index: 3; animation: mp-tear .8s cubic-bezier(.45, 0, .85, .55) forwards; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .55); }
@keyframes mp-tear {
  0% { transform: rotate(0); }
  18% { transform: translate(-1px, -3px) rotate(-4deg); }
  38% { transform: translate(5px, 1px) rotate(10deg); }
  100% { transform: translate(70px, 340px) rotate(40deg); opacity: 0; }
}
/* Where the pass was: once it has gone into the kiosk, the scanner's readout takes its place and ticks the lines off one by one. */
.pass-bay { position: relative; display: grid; place-items: center; }
.scan-card { position: absolute; inset: 0; display: grid; align-content: center; gap: 7px; padding: 12px 16px; border-radius: 12px; background: #04100f; box-shadow: inset 0 0 0 2px #0a1b19, 0 24px 50px -22px rgba(0, 0, 0, .9); color: #5cf0b8; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.intro.scan .scan-card { opacity: 1; transition-delay: .5s; }
.sc-laser { position: absolute; left: 0; right: 0; top: 0; height: 200%; background: linear-gradient(180deg, transparent 0 47%, rgba(232, 80, 58, .55) 50%, transparent 53% 100%); animation: sc-sweep 1.1s ease-in-out infinite alternate; }
.intro.ok .sc-laser { opacity: 0; transition: opacity .3s; }
@keyframes sc-sweep { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.sc-head { position: relative; display: flex; justify-content: space-between; font: 500 10px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: #8fe9cb; }
.sc-done { display: none; color: #34e08a; }
.intro.ok .sc-wait { display: none; }
.intro.ok .sc-done { display: inline; }
.sc-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) 16px; gap: 8px; align-items: baseline; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(-8px); transition: opacity .25s ease, transform .25s ease; }
.sc-row b { font-weight: 600; color: #d8fff0; text-align: right; overflow-wrap: anywhere; }
.sc-row i { font-style: normal; color: #34e08a; }
.intro.scan .sc-row { opacity: 1; transform: none; transition-delay: var(--d, .8s); }
.mp-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 2px dashed rgba(26, 35, 56, .28); font: 700 17px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.mp-h small { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .2em; color: var(--ink-soft); }
.mp-f { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.mp-f span { display: block; font: 500 9px var(--mono); letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; }
.mp-f b { display: block; font: 600 17px/1.2 var(--head); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.mp-f .w { grid-column: 1 / -1; }
.mp-bar { height: 30px; }
.mp-bar svg { width: 100%; height: 100%; display: block; }
.i-joke { min-height: 1.6em; font: 600 18px var(--head); letter-spacing: .03em; color: var(--amber); max-width: 32ch; }
.tap-hint { font: 500 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--steel); animation: pulse 1.8s ease-in-out infinite; }
.quiet { border: 0; background: none; min-height: 44px; padding: 10px; color: var(--steel); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; opacity: .85; }
.intro.scan .kiosk-top { transform: translateY(-6px); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- Type and scenes ---------- */
.kick { font: 500 12px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--teal); }
h2 { font-family: var(--head); font-weight: 600; font-size: clamp(38px, 7vw, 70px); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
h2 em { font-style: normal; color: var(--amber); }
.lede { font-size: clamp(17px, 2.1vw, 19px); color: #c4cee2; max-width: 46ch; }
.scene { position: relative; min-height: 100svh; display: grid; align-content: center; padding: 96px max(16px, env(safe-area-inset-right, 0px)) 96px max(16px, env(safe-area-inset-left, 0px)); }
.scene.short { min-height: auto; padding-block: 72px; }
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; display: grid; gap: 34px; }
.split { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } .split.flip > :first-child { order: 2; } }
.stack { display: grid; gap: 18px; align-content: start; }
.center { justify-items: center; text-align: center; }
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--amber); }
.divider span { width: min(120px, 22vw); height: 1px; background: linear-gradient(90deg, transparent, var(--steel)); }
.divider span:last-child { background: linear-gradient(90deg, var(--steel), transparent); }
.divider b { font-size: 20px; }

/* ---------- Marquee bands between scenes ---------- */
.marquee { position: relative; z-index: 1; overflow: hidden; padding-block: 2px; border-block: 2px solid var(--amber); background: rgba(5, 12, 31, .82); }
.marquee.tilt-a { transform: rotate(-2deg); margin-inline: -4vw; }
.marquee.tilt-b { transform: rotate(1.6deg); margin-inline: -4vw; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track span { font: 600 clamp(30px, 6vw, 56px)/1.25 var(--head); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding-right: .6em; color: var(--amber); }
.marquee-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--steel); }

/* ---------- The hero: the departures board ---------- */
.hero { padding-top: 40px; align-content: start; overflow: hidden; }
.signs { position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none; z-index: 1; }
.sign { position: absolute; top: -4px; padding: 16px 14px 10px; border-radius: 6px; background: var(--amber); color: #1a1405; font: 700 15px/1.2 var(--head); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8), inset 0 -3px 0 rgba(0, 0, 0, .18); transform-origin: 50% -10px; animation: swing 5.2s ease-in-out infinite alternate; }
.sign::before, .sign::after { content: ""; position: absolute; top: -24px; width: 2px; height: 26px; background: #8895ad; }
.sign::before { left: 18%; } .sign::after { right: 18%; }
.sign small { display: block; font: 500 10px var(--mono); letter-spacing: .18em; opacity: .75; }
.sign.l { left: 5vw; } .sign.r { right: 5vw; animation-delay: -2.4s; }
@media (max-width: 720px) { .signs { display: none; } }
@keyframes swing { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.hero-inner { justify-items: center; text-align: center; gap: 18px; padding-top: clamp(36px, 8vw, 84px); }
.hero-inner .kick { color: var(--steel); }
.airline { display: inline-flex; align-items: center; gap: 12px; font: 700 clamp(22px, 4vw, 30px) var(--head); letter-spacing: .14em; text-transform: uppercase; }
.title { display: grid; gap: 8px; justify-items: center; user-select: none; -webkit-user-select: none; }
.subtitle { font: 600 clamp(20px, 3.6vw, 30px) var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); overflow-wrap: anywhere; max-width: 24ch; }
.quip { min-height: 1.6em; font: italic 500 19px var(--body); color: var(--steel); max-width: 34ch; }

/* split-flap tiles */
.flaps { display: inline-flex; flex-wrap: nowrap; --tw: 15px; }
.flaps.big { --tw: clamp(34px, 10.4vw, 92px); }
.fl { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--tw); height: calc(var(--tw) * 1.45); margin: 0 1.5px; border-radius: 4px; background: linear-gradient(180deg, #2c3240 0 50%, #1a1e29 50% 100%); color: #f6f1e2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 0 #000; }
.fl b { font: 600 calc(var(--tw) * 1.02)/1 var(--head); text-transform: uppercase; }
.fl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: #04060b; box-shadow: 0 1px 0 rgba(255, 255, 255, .09); }
.fl.f b { animation: flapb .12s ease-in-out; }
.fl.hit { cursor: pointer; }
.amber .fl { color: var(--amber); }
.big .fl { cursor: pointer; }
.big .fl:active { translate: 0 2px; }
@keyframes flapb { 0% { transform: scaleY(1); } 50% { transform: scaleY(.06); } 100% { transform: scaleY(1); } }
.board { width: min(100%, 760px); display: grid; gap: 10px; padding: clamp(14px, 3vw, 24px); border-radius: 14px; background: linear-gradient(180deg, #0e1220, #07090f); box-shadow: 0 0 0 2px #2a3144, 0 0 0 6px #0a0d16, 0 30px 60px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .07); --tw: clamp(14px, 3.9vw, 28px); }
.brow { display: grid; grid-template-columns: clamp(52px, 12vw, 96px) 1fr; gap: 10px; align-items: center; }
.blab { font: 500 clamp(9px, 2.3vw, 11px) var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); text-align: left; }
.brow .flaps { --tw: inherit; }
.brow.status { cursor: pointer; }
.board-cap { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8fa0c0; text-align: center; }
.center-cd { display: grid; gap: 10px; justify-items: center; }
.cd-label { font: 500 12px var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--steel); }
.countdown { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2.4vw, 16px); }
.countdown div { display: grid; justify-items: center; min-width: 68px; padding: 10px 10px 8px; border-radius: 6px; background: linear-gradient(180deg, #2c3240 0 50%, #1a1e29 50% 100%); box-shadow: 0 0 0 2px #0a0d16, 0 8px 16px -8px rgba(0, 0, 0, .8); }
.countdown b { font: 600 clamp(32px, 7vw, 48px)/1 var(--head); font-variant-numeric: tabular-nums; color: var(--amber); }
.countdown span { font: 500 10px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #8fa0c0; margin-top: 6px; }

/* ---------- The boarding pass ---------- */
.pass { position: relative; display: grid; grid-template-columns: 1fr; color: var(--ink); background: var(--paper); border-radius: 16px; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .9); }
@media (min-width: 640px) { .pass { grid-template-columns: 1fr 156px; } }
.pass.stubless { grid-template-columns: 1fr; }
.pass-main { padding: 22px 22px 20px; display: grid; gap: 16px; min-width: 0; }
.pass-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px dashed rgba(26, 35, 56, .26); }
.pass-air { display: flex; align-items: center; gap: 10px; font: 700 20px var(--head); letter-spacing: .1em; text-transform: uppercase; }
.pass-top small { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; text-align: right; }
.pf { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pf div { min-width: 0; }
.pf dt { font: 500 10px var(--mono); letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; }
.pf dd { margin: 2px 0 0; font: 600 21px/1.2 var(--head); letter-spacing: .02em; overflow-wrap: anywhere; text-transform: uppercase; }
.pf .wide { grid-column: 1 / -1; }
.pf dd.small { font-size: 16px; text-transform: none; font-family: var(--body); font-weight: 700; letter-spacing: 0; }
.pass-note { margin: 0; padding: 10px 14px; border-radius: 8px; background: rgba(26, 35, 56, .07); font: italic 500 18px/1.4 var(--body); overflow-wrap: anywhere; }
.pass-note small { display: block; font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); font-style: normal; margin-bottom: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pbtn { border: 2px solid var(--ink); background: transparent; border-radius: 999px; padding: 11px 18px; min-height: 46px; font: 600 14px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); transition: background .2s, color .2s; }
.pbtn:hover { background: var(--ink); color: var(--paper); }
.pass-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 18px 14px; border: 0; border-top: 2px dashed rgba(26, 35, 56, .28); background: var(--paper2); color: var(--ink); text-align: center; border-radius: 0 0 16px 16px; transform-origin: 0 0; }
@media (min-width: 640px) { .pass-stub { border-top: 0; border-left: 2px dashed rgba(26, 35, 56, .28); border-radius: 0 16px 16px 0; } }
.pass-stub .bc { width: 100%; height: 56px; }
.pass-stub .bc svg { width: 100%; height: 100%; display: block; }
.pass-stub b { font: 700 20px var(--head); letter-spacing: .1em; }
.pass-stub small { font: 500 10px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.pass-stub.torn { z-index: 3; animation: tear 1.1s cubic-bezier(.45, 0, .85, .55) forwards; pointer-events: none; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .55); }
/* it is tugged, rips along the dotted line from the top corner, then drops away and turns as it goes */
@keyframes tear {
  0% { transform: rotate(0); }
  14% { transform: translate(-2px, -3px) rotate(-3deg); }
  32% { transform: translate(5px, 2px) rotate(9deg); }
  100% { transform: translate(60px, 300px) rotate(38deg); opacity: 0; }
}

/* ---------- Paper cards (the shared dish and seat boards read these colours) ---------- */
.paper { position: relative; --accent: var(--amber); --accent-d: #9a5a00; --cream: var(--ink); --muted: var(--ink-soft); --line: rgba(26, 35, 56, .28); --f-bg: #fff; --f-ink: var(--ink); --f-shadow: none; --chip-bg: rgba(26, 35, 56, .06); --row-bg: rgba(26, 35, 56, .06); --ok: #1f6b3a; --bad: #a3301f;
  color: var(--ink); background: var(--paper); border-radius: 16px; padding: 26px 20px; box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .9); display: grid; gap: 16px; }
@media (min-width: 600px) { .paper { padding: 34px 32px; } }
.paper h3 { font: 600 clamp(24px, 4vw, 30px) var(--head); letter-spacing: .03em; text-transform: uppercase; }
.paper .db-sr, .paper label { font-family: var(--body); }
.board-note, .sample-note { font-size: 14px; color: var(--ink-soft); text-align: center; }
.seatwrap { --p1: #e8503a; --p2: #b58a1e; --p3: #13294f; --p4: #e4ebf7; --p5: #2fc4b2; }
.winrow { display: flex; justify-content: center; gap: clamp(8px, 3vw, 18px); margin-bottom: 4px; }
.winrow i { width: 34px; height: 46px; border-radius: 50% / 40%; background: linear-gradient(160deg, #1a3b78, #07122b); box-shadow: 0 0 0 5px #dfe5f1, inset 0 0 0 2px rgba(255, 255, 255, .15); position: relative; overflow: hidden; }
.winrow i::after { content: ""; position: absolute; left: 5px; top: 8px; width: 7px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .35); transform: rotate(18deg); }
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #c4cee2; }
.rules li { display: grid; grid-template-columns: 1.8em 1fr; }
.rules li::before { content: "✈"; color: var(--amber); }

/* ---------- Security ---------- */
.xgrid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 880px) { .xgrid { grid-template-columns: 1.1fr .9fr; gap: 44px; } }
.xtable { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: rgba(19, 41, 79, .72); box-shadow: 0 0 0 2px #2a3d66, 0 24px 50px -24px rgba(0, 0, 0, .85); }
.xlab { font: 500 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.xlab small { color: var(--teal); font-size: 11px; letter-spacing: .12em; }
.xitems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.xi { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #243a64, #172a4d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 0 #0a1428; transition: transform .15s; }
.xi:active:not([disabled]) { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #0a1428; }
.xi[disabled] { cursor: default; }
.xi .xi-art { display: block; width: 100%; max-width: 86px; }
.xi .xi-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.xi b { font: 600 13px/1.1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--white); }
.xi-ok { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #34e08a; color: #05241a; font-weight: 800; font-size: 13px; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.xi.done .xi-ok { opacity: 1; transform: none; }
.xi.warn .xi-ok { background: var(--amber); }
.xi.run { z-index: 3; animation: xrun 1.7s ease-in-out both; }
@keyframes xrun {
  0% { translate: 0 0; scale: 1; opacity: 1; }
  45% { translate: var(--dx) var(--dy); scale: .5; opacity: 1; }
  58% { translate: var(--dx) var(--dy); scale: .5; opacity: 0; }
  59% { translate: 0 0; scale: 1; opacity: 0; }
  100% { translate: 0 0; scale: 1; opacity: 1; }
}
.belt { height: 14px; border-radius: 7px; background: repeating-linear-gradient(90deg, #39465f 0 18px, #2a3550 18px 22px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .1); }
.belt.on { animation: slat .35s linear infinite; }
@keyframes slat { to { background-position: 22px 0; } }
.xmach { display: grid; gap: 14px; }
.xmon { padding: 12px; border-radius: 16px; background: linear-gradient(180deg, #2b3a5e, #16223f); box-shadow: 0 0 0 2px #0a1020, 0 24px 50px -22px rgba(0, 0, 0, .9); }
.xscr { position: relative; min-height: 180px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: radial-gradient(120% 120% at 50% 40%, #07251f, #02100d); box-shadow: inset 0 0 0 2px #0b2d26; }
.xscr::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(92, 240, 184, .06) 0 2px, transparent 2px 4px); pointer-events: none; }
.xmsg { position: absolute; top: 8px; left: 10px; font: 500 12px var(--mono); letter-spacing: .14em; color: #5cf0b8; text-transform: uppercase; z-index: 2; }
.xart { width: 130px; opacity: 0; transition: opacity .25s; }
.xart svg { width: 100%; height: auto; display: block; overflow: visible; }
.xart svg * { fill: rgba(255, 150, 40, .22) !important; stroke: #6dffd0 !important; stroke-width: 1.6 !important; stroke-linejoin: round; }
.xart svg text { fill: #6dffd0 !important; stroke: none !important; }
.xscr.show .xart { opacity: 1; }
.xsweep { position: absolute; left: 0; right: 0; top: 0; height: 28px; background: linear-gradient(180deg, transparent, rgba(92, 240, 184, .5), transparent); opacity: 0; }
.xscr.scanning .xsweep { animation: sweep .9s linear 2; }
@keyframes sweep { 0% { transform: translateY(-30px); opacity: .9; } 100% { transform: translateY(210px); opacity: .9; } }
.tunnel { position: relative; height: 70px; border-radius: 14px; background: rgba(2, 8, 18, .6); box-shadow: inset 0 0 0 12px #6b7894, inset 0 0 0 14px #3a4660, 0 14px 24px -14px rgba(0, 0, 0, .8); display: flex; justify-content: space-evenly; align-items: stretch; padding: 12px 22px; overflow: hidden; z-index: 4; pointer-events: none; }
.tunnel i { width: 16%; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, rgba(20, 24, 34, .95), rgba(8, 10, 16, .6)); transform-origin: 50% 0; }
.tunnel.hum i { animation: curtain .5s ease-in-out 3; }
.tunnel i:nth-child(2) { animation-delay: .08s; } .tunnel i:nth-child(3) { animation-delay: .16s; }
@keyframes curtain { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(7deg); } 70% { transform: rotate(-5deg); } }
.slip { position: relative; max-width: 330px; width: 100%; justify-self: center; background: #fbfbf6; color: #1a1a1a; font: 500 13px/1.5 var(--mono); padding: 12px 14px 20px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 94% 100%, 88% calc(100% - 8px), 82% 100%, 76% calc(100% - 8px), 70% 100%, 64% calc(100% - 8px), 58% 100%, 52% calc(100% - 8px), 46% 100%, 40% calc(100% - 8px), 34% 100%, 28% calc(100% - 8px), 22% 100%, 16% calc(100% - 8px), 10% 100%, 4% calc(100% - 8px), 0 100%); transform-origin: 50% 0; }
.slip.print { animation: unroll .7s steps(9) both; }
@keyframes unroll { from { transform: scaleY(.1); opacity: .4; } to { transform: scaleY(1); opacity: 1; } }
.slip-h { text-align: center; font-weight: 600; letter-spacing: .16em; border-bottom: 1px dashed #777; padding-bottom: 6px; margin-bottom: 6px; }
.slip-r { display: grid; grid-template-columns: 6.2em 1fr; gap: 6px; }
.slip-r span { color: #666; }
.slip-r b { font-weight: 600; }
.slip-r b.ok { color: #12663a; } .slip-r b.warn { color: #a34a00; }
.slip-n { margin-top: 6px; font-style: italic; color: #444; }
.cleared { font: 600 14px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); text-align: center; }

/* ---------- Baggage claim ---------- */
.carousel { position: relative; width: 100%; max-width: 1000px; margin-inline: auto; padding-top: 64px; }
.c-sign { position: absolute; top: 0; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: 8px; background: #05080f; box-shadow: 0 0 0 2px #2a3144, 0 10px 20px -10px rgba(0, 0, 0, .8); z-index: 3; white-space: nowrap; }
.c-sign b { font: 600 22px var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.c-sign small { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.c-lamp { width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 12px var(--red); animation: beacon .8s steps(1) infinite; }
.c-lamp.off { animation: none; background: #5b2a24; box-shadow: none; }
.c-view { position: relative; height: 190px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.c-track { position: absolute; left: 0; bottom: 22px; display: flex; width: max-content; animation: bagbelt var(--dur, 38s) linear infinite; }
.c-track.hold { animation-play-state: paused; }
.c-belt { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: repeating-linear-gradient(90deg, #56627b 0 22px, #3e485e 22px 26px); border-top: 4px solid #96a3bb; box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, .6); animation: slat2 var(--dur2, 1.3s) linear infinite; }
@keyframes bagbelt { to { transform: translateX(-50%); } }
@keyframes slat2 { to { background-position: -26px 0; } }
.bag { position: relative; flex: 0 0 150px; display: grid; justify-items: center; padding: 0; border: 0; background: none; }
.bag .b-art { display: block; width: 118px; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 100%; }
.bag .b-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.bag.hop .b-art { animation: hop .7s cubic-bezier(.3, 1.4, .5, 1); }
.bag .tag { position: absolute; top: -2px; right: 14px; z-index: 2; max-width: 92px; padding: 4px 7px 3px; border-radius: 3px; background: #fff6e0; color: var(--ink); font: 600 10px/1.15 var(--mono); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0, 0, 0, .4); transform: rotate(8deg); transform-origin: 50% -6px; overflow-wrap: anywhere; }
.bag .tag::before { content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 8px; background: #fff6e0; }
.bag .tag i { display: block; font-style: normal; font-weight: 500; font-size: 9px; color: var(--ink-soft); text-transform: none; }
.bag.open .tag { background: #3a4660; color: #c9d3e6; }
.c-bubble { position: absolute; z-index: 5; left: 50%; top: 24px; translate: -50% 0; max-width: min(92%, 440px); padding: 10px 16px; border-radius: 14px; background: #fff; color: var(--ink); font: 600 16px/1.35 var(--body); text-align: center; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8); pointer-events: none; animation: pop .3s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-34px) scale(1.06, .94) rotate(-4deg); } 100% { transform: translateY(0) scale(1); } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ---------- The captain ---------- */
.pit { position: relative; display: grid; gap: 14px; }
.pit-win { position: relative; overflow: hidden; border-radius: 160px 160px 22px 22px; padding-top: 24px; background: linear-gradient(180deg, #030816, #12306a 70%, #6b5a8c); box-shadow: 0 0 0 6px #2a3552, 0 0 0 9px #0a1020, 0 34px 60px -26px rgba(0, 0, 0, .9); aspect-ratio: 1 / 1.02; max-width: 440px; width: 100%; justify-self: center; }
.pit-cloud { position: absolute; left: -30%; width: 60%; height: 22px; border-radius: 12px; background: rgba(255, 255, 255, .16); animation: cloud 26s linear infinite; }
.pit-cloud.c2 { top: 22%; width: 40%; animation-duration: 38s; animation-delay: -14s; } .pit-cloud.c1 { top: 40%; }
.pit-moon { position: absolute; right: 16%; top: 12%; width: 44px; height: 44px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 40px rgba(255, 243, 214, .5); }
.pit-cap { position: absolute; left: 50%; bottom: 0; width: 82%; translate: -50% 4%; }
.pit-cap svg { display: block; width: 100%; height: auto; overflow: visible; }
.pit-cap .cap-beak { transform-box: fill-box; transform-origin: 0 0; }
.pit-win.talk .cap-beak { animation: beak .22s ease-in-out infinite alternate; }
.pit-win.talk .pit-cap { animation: nod .5s ease-in-out infinite alternate; }
.pit-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, #1a2540, #0a1020); display: flex; gap: 10px; justify-content: center; align-items: center; z-index: 2; }
.pit-panel i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: lamp 1.6s ease-in-out infinite; }
.pit-panel i:nth-child(2n) { background: var(--amber); animation-delay: -.5s; } .pit-panel i:nth-child(3n) { background: var(--red); animation-delay: -1s; }
@keyframes cloud { to { transform: translateX(260%); } }
@keyframes beak { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes nod { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.pa { padding: 14px 16px; border-radius: 12px; background: #04080f; box-shadow: 0 0 0 2px #2a3144, inset 0 0 0 1px #000; min-height: 7.6em; font: 500 15px/1.5 var(--mono); color: var(--amber); letter-spacing: .02em; }
.pa small { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #8895ad; }
.ptt { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px 14px 18px; min-height: 60px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ff6a50, #c63a22); color: #fff; font: 700 17px var(--head); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 7px 0 #7c1d0e, 0 18px 28px -10px rgba(0, 0, 0, .7); }
.ptt:active { transform: translateY(5px); box-shadow: 0 2px 0 #7c1d0e, 0 8px 14px -8px rgba(0, 0, 0, .7); }
.ptt i { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .28); animation: pulse 1.4s ease-in-out infinite; }
.heard { font: 500 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }

/* ---------- Check-in: the kiosk ---------- */
.kiosk { position: relative; --accent: var(--amber); --cream: #fff; --muted: #9fb0cf; --line: rgba(255, 255, 255, .22); color: var(--white); background: linear-gradient(180deg, #1c2d52, #0e1a35); border-radius: 22px; padding: 22px 20px 26px; box-shadow: 0 0 0 2px #0a1020, 0 34px 60px -26px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .14); display: grid; gap: 16px; }
@media (min-width: 600px) { .kiosk { padding: 28px 30px 32px; } }
.k-screen { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #04100f; box-shadow: inset 0 0 0 2px #0a1b19; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #5cf0b8; }
.k-screen i { width: 8px; height: 8px; border-radius: 50%; background: #34e08a; box-shadow: 0 0 8px #34e08a; }
.reply-head { font: 600 clamp(24px, 4.4vw, 32px)/1.1 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > label, .field legend, .flabel { font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--steel); padding: 0; }
.field input[type="text"] { width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #2f4575; background: #0a1428; color: #fff; font: 600 20px var(--head); letter-spacing: .03em; }
.field input[type="text"]::placeholder { color: #5f7099; }
.field input[type="text"]:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 182, 39, .25); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: grid; place-items: center; text-align: center; min-height: 56px; padding: 8px; border-radius: 10px; border: 1.5px solid #2f4575; background: #0a1428; font: 600 16px var(--head); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.choice input:checked + span { background: var(--amber); border-color: var(--amber); color: #1a1405; box-shadow: 0 8px 18px -10px rgba(255, 182, 39, .8); }
.choice input:focus-visible + span { outline: 3px solid #fff; outline-offset: 3px; }
.stepper { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stepper button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid #2f4575; background: #0a1428; color: #fff; font-size: 22px; line-height: 1; }
.stepper output { font: 600 30px var(--head); min-width: 1.4ch; text-align: center; font-variant-numeric: tabular-nums; }
.plus-joke { font: italic 500 17px var(--body); color: var(--steel); }
.err { margin: -8px 0 0; color: #ff9d8c; font-size: 14px; }
.print-btn { justify-self: center; border: 0; border-radius: 999px; padding: 16px 30px; min-height: 56px; background: linear-gradient(180deg, #ffc947, var(--amber-d)); color: #1a1405; font: 700 16px var(--head); letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 6px 0 #8a5600, 0 18px 28px -10px rgba(0, 0, 0, .7); }
.print-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a5600; }
.reply-done { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; padding-top: 18px; }
.reply-done h3 { font: 600 clamp(30px, 6vw, 42px)/1.05 var(--head); letter-spacing: .03em; text-transform: uppercase; color: var(--amber); }
.reply-done p { color: var(--steel); max-width: 34ch; }
.slot { position: absolute; top: 0; left: 8%; right: 8%; height: 10px; border-radius: 5px; background: #02060f; box-shadow: 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px #000; }
.out-pass { position: relative; z-index: 1; width: min(100%, 300px); margin-top: 6px; display: grid; gap: 6px; padding: 12px 14px 10px; border-radius: 0 0 10px 10px; background: var(--paper); color: var(--ink); text-align: left; transform: translateY(-110%); opacity: 0; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7); }
.reply-done.print .out-pass { opacity: 1; transform: none; transition: transform 1.3s steps(14), opacity .1s; }
.out-pass .mp-f b { font-size: 16px; }
.stamp { position: absolute; right: 8px; top: 30px; padding: 3px 10px; border: 3px solid var(--red); border-radius: 6px; color: var(--red); font: 700 22px var(--head); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-12deg) scale(2.2); opacity: 0; }
.stamp.green { border-color: #1f8f55; color: #1f8f55; }
.reply-done.stamped .stamp { animation: stampin .45s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes stampin { 0% { opacity: 0; transform: rotate(-12deg) scale(2.2); } 70% { opacity: .95; transform: rotate(-12deg) scale(.92); } 100% { opacity: .95; transform: rotate(-12deg) scale(1); } }
.linkish { border: 0; background: none; padding: 10px; min-height: 44px; color: var(--amber); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; }

/* ---------- Who is on board ---------- */
.who { display: grid; gap: 14px; justify-items: center; text-align: center; width: 100%; }
.who .kick { color: var(--teal); }
.who-count { min-width: 2.2ch; padding: 4px 22px 2px; border-radius: 10px; font: 600 clamp(60px, 12vw, 104px)/1 var(--head); font-variant-numeric: tabular-nums; color: var(--amber); background: linear-gradient(180deg, #2c3240 0 50%, #1a1e29 50% 100%); box-shadow: 0 0 0 3px #0a0d16, 0 20px 40px -18px rgba(0, 0, 0, .9); }
.crowd { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; width: 100%; max-width: 940px; }
.gempty { grid-column: 1 / -1; color: var(--steel); font-style: italic; }
.bp { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; text-align: left; padding: 12px 14px 10px; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .8); transform: rotate(var(--r, 0deg)); overflow: hidden; }
.bp::after { content: ""; position: absolute; right: 78px; top: 8px; bottom: 8px; border-left: 2px dashed rgba(26, 35, 56, .22); }
.bp b { font: 600 22px/1.1 var(--head); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.bp .role { grid-column: 1; font: italic 500 14px/1.3 var(--body); color: var(--ink-soft); }
.bp .grp { grid-column: 2; grid-row: 1 / span 2; width: 62px; text-align: center; font: 500 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--ink-soft); }
.bp .grp strong { display: block; font: 700 17px var(--head); letter-spacing: .04em; color: var(--ink); }
.bp.me { background: linear-gradient(#fff6e0, #ffe9b0); box-shadow: 0 0 0 3px var(--amber), 0 18px 30px -14px rgba(255, 182, 39, .5); }
.bp.new { animation: bpin .9s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes bpin { 0% { opacity: 0; transform: translateX(60px) rotate(6deg); } 100% { opacity: 1; transform: rotate(var(--r, 0deg)); } }
.footer-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.gbtn { border: 2px solid var(--amber); background: rgba(5, 12, 31, .6); border-radius: 999px; padding: 12px 22px; min-height: 48px; font: 600 14px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); transition: background .2s, color .2s; }
.gbtn:hover { background: var(--amber); color: #1a1405; }
.foot { text-align: center; font-size: 13px; color: #9fb0cf; max-width: 52ch; }
/* On a phone the list of passengers must not make the whole section wider than the screen. The section's one column is exactly the screen (minmax(0, 1fr), not the width of its widest content), so the count, the list and the footer line stay centered with the rest of the page. */
#who-scene .wrap { grid-template-columns: minmax(0, 1fr); }
.who, .crowd { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  #front { display: none; }
  .w-star, .w-beacon, .w-orange, .w-lamps, .w-tug, .pl-red, .pl-white, .sign, .i-dot, .ks-beam, .mini-pass, .tap-hint, .c-lamp, .c-track, .c-belt, .belt.on, .pit-cloud, .pit-panel i, .ptt i, .pit-win.talk .cap-beak, .pit-win.talk .pit-cap { animation: none; }
  .w-take.go { animation: none; opacity: 0; }
  .sc-laser { display: none; }
  .c-track { flex-wrap: wrap; width: auto; justify-content: center; position: static; }
  .c-view { height: auto; padding-bottom: 30px; }
  .c-belt { position: static; }
  .c-track .dup { display: none; }
  .xi.run { animation: none; }
  .sign, .fl.f b, .slip.print, .bp.new, .hop .b-art { animation: none; }
  .reply-done.print .out-pass { transition: none; }
}

/* People never bob, sway, rock, slide back and forth or run in a loop (the user, 2026-11-09). They stand still; legs that step and a wave are fine. */
.walker .wk { animation: none !important; }