:root {
  --gold:      #ffd27a;
  --gold-soft: #ffe6a8;
  --gold-deep: #d99a3f;
  --rose:      #ff9ec4;
  --cyan:      #8fdcff;
  --ink:       #f2ecff;
  --ink-dim:   #b9b1e0;
  --paper:     #fbf3e2;   /* boarding-pass paper */
  --paper-2:   #f3e6cc;
  --paper-ink: #2a2140;
  --night-top: #3a2568;
  --night-mid: #201653;
  --night-bot: #090823;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Mulish', system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 42%, var(--night-bot) 100%);
  min-height: 100vh; overflow-x: hidden;
}

/* ---------------- night sky ---------------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow {
  position: absolute; left: 50%; bottom: 0; width: min(1300px, 130vw); height: 70vh; transform: translateX(-50%);
  background: radial-gradient(58% 80% at 50% 100%, rgba(255,170,120,.34), rgba(255,120,180,.16) 45%, transparent 74%);
  filter: blur(8px);
}
/* ===== rich sky scene (stars / moon / mist / bokeh / pixie dust) ===== */
#sky-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.stars { position: absolute; inset: 0; }
.stars--far { --star-color: rgba(255,255,255,.55); }
.stars--mid { --star-color: rgba(255,255,255,.75); }
.stars--near { --star-color: rgba(255,255,255,.95); }

.stars--far::before, .stars--far::after,
.stars--mid::before, .stars--mid::after,
.stars--near::before, .stars--near::after {
  content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  background: transparent; border-radius: 50%;
}
.stars--far::before {
  box-shadow:
    4% 6% var(--star-color), 9% 22% var(--star-color), 14% 11% var(--star-color),
    18% 34% var(--star-color), 23% 8% var(--star-color), 27% 41% var(--star-color),
    31% 18% var(--star-color), 36% 29% var(--star-color), 41% 6% var(--star-color),
    46% 37% var(--star-color), 52% 14% var(--star-color), 58% 25% var(--star-color),
    63% 9% var(--star-color), 68% 32% var(--star-color), 72% 19% var(--star-color),
    77% 44% var(--star-color), 82% 12% var(--star-color), 86% 27% var(--star-color),
    91% 7% var(--star-color), 96% 35% var(--star-color), 6% 52% var(--star-color),
    12% 61% var(--star-color), 21% 55% var(--star-color), 29% 66% var(--star-color),
    35% 58% var(--star-color), 44% 71% var(--star-color), 49% 63% var(--star-color),
    57% 68% var(--star-color), 64% 59% var(--star-color), 71% 74% var(--star-color),
    79% 62% var(--star-color), 88% 69% var(--star-color), 94% 58% var(--star-color),
    3% 78% var(--star-color), 17% 82% var(--star-color), 33% 79% var(--star-color),
    48% 86% var(--star-color), 62% 81% var(--star-color), 76% 88% var(--star-color),
    89% 83% var(--star-color);
  animation: twinkle-slow 6s ease-in-out infinite;
}
.stars--far::after {
  box-shadow:
    2% 15% var(--star-color), 11% 4% var(--star-color), 19% 26% var(--star-color),
    26% 48% var(--star-color), 34% 12% var(--star-color), 39% 21% var(--star-color),
    47% 46% var(--star-color), 55% 5% var(--star-color), 61% 38% var(--star-color),
    69% 15% var(--star-color), 74% 27% var(--star-color), 83% 41% var(--star-color),
    90% 20% var(--star-color), 8% 45% var(--star-color), 24% 60% var(--star-color),
    41% 54% var(--star-color), 53% 60% var(--star-color), 66% 50% var(--star-color),
    81% 55% var(--star-color), 95% 47% var(--star-color), 14% 73% var(--star-color),
    38% 92% var(--star-color), 58% 76% var(--star-color), 72% 95% var(--star-color),
    85% 74% var(--star-color);
  animation: twinkle-slow 7.5s ease-in-out infinite 2.4s;
}
.stars--mid::before {
  width: 2px; height: 2px;
  box-shadow:
    7% 18% var(--star-color), 16% 39% var(--star-color), 24% 9% var(--star-color),
    33% 52% var(--star-color), 42% 24% var(--star-color), 51% 44% var(--star-color),
    59% 12% var(--star-color), 67% 58% var(--star-color), 76% 30% var(--star-color),
    84% 16% var(--star-color), 91% 46% var(--star-color), 12% 68% var(--star-color),
    28% 77% var(--star-color), 46% 66% var(--star-color), 63% 72% var(--star-color),
    79% 63% var(--star-color), 94% 71% var(--star-color), 20% 86% var(--star-color),
    54% 89% var(--star-color), 88% 84% var(--star-color);
  animation: twinkle-med 4s ease-in-out infinite;
}
.stars--mid::after {
  width: 2px; height: 2px;
  box-shadow:
    3% 33% var(--star-color), 21% 15% var(--star-color), 39% 41% var(--star-color),
    57% 20% var(--star-color), 71% 45% var(--star-color), 87% 27% var(--star-color),
    10% 55% var(--star-color), 35% 62% var(--star-color), 49% 78% var(--star-color),
    65% 82% var(--star-color), 82% 68% var(--star-color), 95% 58% var(--star-color);
  animation: twinkle-med 5.2s ease-in-out infinite 1.6s;
}
.stars--near::before {
  width: 3px; height: 3px;
  box-shadow:
    13% 21% var(--star-color), 30% 46% var(--star-color), 48% 14% var(--star-color),
    64% 37% var(--star-color), 80% 22% var(--star-color), 22% 63% var(--star-color),
    58% 68% var(--star-color), 86% 55% var(--star-color), 40% 82% var(--star-color),
    72% 88% var(--star-color);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
  animation: twinkle-fast 2.6s ease-in-out infinite;
}
.stars--near::after {
  width: 3px; height: 3px;
  box-shadow:
    6% 40% var(--star-color), 34% 27% var(--star-color), 55% 52% var(--star-color),
    77% 41% var(--star-color), 92% 61% var(--star-color), 18% 76% var(--star-color),
    62% 79% var(--star-color);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.6));
  animation: twinkle-fast 3.4s ease-in-out infinite 1.1s;
}
@keyframes twinkle-slow { 0%,100% { opacity:.35 } 50% { opacity:.9 } }
@keyframes twinkle-med  { 0%,100% { opacity:.4  } 50% { opacity:1  } }
@keyframes twinkle-fast { 0%,100% { opacity:.5  } 50% { opacity:1  } }

.moon-wrap { position: absolute; top: 8%; right: 14%; width: 84px; height: 84px; }
.moon-halo {
  position: absolute; inset: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,190,.35) 0%, rgba(255,220,160,.16) 35%, rgba(255,210,140,0) 70%);
  animation: halo-breathe 8s ease-in-out infinite;
}
.moon {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, #fffaf0 0%, #ffe9b3 55%, #ffd27a 100%);
  box-shadow: -22px -9px 0 0 rgba(9, 8, 35, 0.92) inset, 0 0 24px 4px rgba(255, 236, 200, .6), 0 0 60px 16px rgba(255, 210, 150, .3);
}
@keyframes halo-breathe { 0%,100% { opacity:.85; transform: scale(1); } 50% { opacity:1; transform: scale(1.06); } }

.bokeh { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .35; will-change: transform, opacity; }
.bokeh--rose { width: 220px; height: 220px; left: -40px; bottom: 22%;
  background: radial-gradient(circle, rgba(255,158,196,.5) 0%, rgba(255,158,196,0) 70%); animation: bokeh-float 14s ease-in-out infinite; }
.bokeh--cyan { width: 260px; height: 260px; right: -60px; bottom: 12%;
  background: radial-gradient(circle, rgba(143,220,255,.4) 0%, rgba(143,220,255,0) 70%); animation: bokeh-float 18s ease-in-out infinite 3s reverse; }
@keyframes bokeh-float { 0%,100% { transform: translate(0,0); opacity:.3; } 50% { transform: translate(14px,-18px); opacity:.45; } }

.mist { position: absolute; left: -20%; width: 140%; height: 160px; background-repeat: repeat-x; background-size: 800px 100%; opacity: .5; filter: blur(6px); }
.mist--back { bottom: 4%;
  background-image: radial-gradient(ellipse 260px 60px at 20% 50%, rgba(255,255,255,.10), transparent 70%),
                    radial-gradient(ellipse 320px 70px at 55% 50%, rgba(255,255,255,.08), transparent 70%),
                    radial-gradient(ellipse 220px 50px at 85% 50%, rgba(255,255,255,.10), transparent 70%);
  animation: drift 90s linear infinite; }
.mist--front { bottom: -2%; height: 120px; opacity: .4;
  background-image: radial-gradient(ellipse 300px 50px at 10% 50%, rgba(255,255,255,.14), transparent 70%),
                    radial-gradient(ellipse 240px 45px at 60% 50%, rgba(255,255,255,.12), transparent 70%);
  animation: drift 55s linear infinite reverse; }
@keyframes drift { from { background-position-x: 0; } to { background-position-x: 800px; } }

.shooting-star { position: absolute; top: 12%; left: 70%; width: 2px; height: 2px; background: transparent; opacity: 0; }
.shooting-star::before {
  content: ""; position: absolute; width: 120px; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,0));
  transform: rotate(-30deg); transform-origin: left center;
}
.shooting-star--1 { animation: shoot 9s linear infinite; animation-delay: 2s; }
.shooting-star--2 { top: 28%; left: 20%; animation: shoot 13s linear infinite; animation-delay: 7s; }
@keyframes shoot {
  0%, 92% { opacity: 0; transform: translate(0, 0); }
  93% { opacity: 1; }
  97% { opacity: 1; transform: translate(-260px, 150px); }
  98%, 100% { opacity: 0; transform: translate(-260px, 150px); }
}

#pixie-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .stars--far::before, .stars--far::after,
  .stars--mid::before, .stars--mid::after,
  .stars--near::before, .stars--near::after,
  .moon-halo, .bokeh, .mist, .shooting-star { animation: none; }
  #pixie-canvas { display: none; }
}

/* fireworks */
.fw {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  box-shadow:
    0 0 0 2px currentColor, 0 -26px currentColor, 0 26px currentColor, 26px 0 currentColor, -26px 0 currentColor,
    18px 18px currentColor, -18px 18px currentColor, 18px -18px currentColor, -18px -18px currentColor,
    0 -44px currentColor, 0 44px currentColor, 44px 0 currentColor, -44px 0 currentColor;
  opacity: 0; transform: scale(.2);
}
.fw1 { top: 12%; left: 20%; color: var(--rose); animation: burst 7s ease-out infinite; }
.fw2 { top: 9%;  left: 76%; color: var(--gold); animation: burst 7s ease-out infinite 1.8s; }
.fw3 { top: 20%; left: 52%; color: var(--cyan); animation: burst 7s ease-out infinite 3.6s; }
.fw4 { top: 15%; left: 36%; color: #c8a2ff;    animation: burst 7s ease-out infinite 5.2s; }
@keyframes burst {
  0% { opacity: 0; transform: scale(.2); }
  8% { opacity: 1; transform: scale(1); }
  26% { opacity: 0; transform: scale(1.7); }
  100% { opacity: 0; transform: scale(1.7); }
}

.castle-bg {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 82vh; width: auto; z-index: 0; opacity: .98;
  filter: drop-shadow(0 0 52px rgba(255,180,120,.22));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 100%);
}
.castle-bg svg { height: 100%; width: auto; display: block; }

/* ---------------- hero ---------------- */
.hero { position: relative; z-index: 2; text-align: center; padding: 18px 16px 4px; }
.kicker {
  font-family: 'Fredoka', sans-serif; letter-spacing: 3px; text-transform: uppercase;
  font-size: 12px; color: var(--gold); opacity: .9; margin-bottom: 6px;
}
.hero h1 {
  font-family: 'Cinzel', serif; font-weight: 900; margin: 0;
  font-size: clamp(32px, 7vw, 60px); letter-spacing: 1px; line-height: 1.05;
  background: linear-gradient(180deg, #fff6df, var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 18px rgba(255,210,122,.35));
  position: relative;
}
.hero h1::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  mix-blend-mode: screen; background-size: 300% 100%;
  animation: shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer { 0%,100% { background-position: 180% 0; } 55% { background-position: -60% 0; } }
.subtitle { margin: 8px 0 0; color: var(--ink-dim); font-size: 15px; font-weight: 600; }

/* ---------------- leg tabs ---------------- */
.legtabs { position: relative; z-index: 2; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 12px 0; }
.legtab {
  font-family: 'Fredoka', sans-serif; font-size: 14px; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; color: var(--ink-dim);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  transition: all .25s; backdrop-filter: blur(6px);
}
.legtab:hover { color: var(--ink); border-color: rgba(255,210,122,.4); }
.legtab.active {
  color: #2a1c05; background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-color: transparent; box-shadow: 0 6px 20px rgba(255,210,122,.35);
}
.legtab .tt-sub { opacity: .7; font-size: 12px; margin-left: 6px; }
.legtab.active .tt-sub { opacity: .85; }

/* ---------------- stage / ticket ---------------- */
.stage { position: relative; z-index: 2; max-width: 700px; margin: 14px auto 16px; padding: 0 14px; }

.ticket {
  position: relative; background: linear-gradient(160deg, var(--paper), var(--paper-2));
  color: var(--paper-ink); border-radius: 22px;
  box-shadow: 0 26px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,210,122,.35), inset 0 0 0 2px rgba(255,255,255,.5);
  overflow: hidden; animation: rise .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.98); } to { opacity: 1; transform: none; } }
.ticket::before { /* subtle paper grain + gold edge sheen */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255,210,122,.18), transparent 60%);
}

.tk-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px dashed rgba(42,33,64,.28);
  background: linear-gradient(90deg, rgba(255,210,122,.22), rgba(255,158,196,.16));
}
.tk-airline { font-family: 'Fredoka', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #6b4d1e; }
.tk-airline b { color: var(--gold-deep); }
.badge {
  font-family: 'Fredoka', sans-serif; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; color: #fff; background: #7a6a48;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.badge.sched    { background: linear-gradient(90deg,#8a7cc4,#6f5fb0); }
.badge.boarding { background: linear-gradient(90deg,#e8a94b,#d98a2f); }
.badge.flying   { background: linear-gradient(90deg,#3aa0e0,#2f7fd9); box-shadow: 0 0 16px rgba(58,160,224,.5); }
.badge.landed   { background: linear-gradient(90deg,#41c48a,#2fa871); }

.tk-route {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 16px 18px 6px;
}
.port .code { font-family: 'Cinzel', serif; font-weight: 900; font-size: 40px; line-height: 1; color: var(--paper-ink); }
.port .city { font-size: 12px; color: #6a5f7e; margin-top: 3px; font-weight: 600; }
.port.to { text-align: right; }
.tk-mid { text-align: center; color: var(--gold-deep); }
.tk-mid .plane { font-size: 20px; }
.tk-mid .dur { display: block; font-size: 11px; color: #8a7f9c; margin-top: 2px; letter-spacing: .5px; }
.tk-mid .dashes { display: block; color: rgba(42,33,64,.35); font-size: 10px; letter-spacing: 2px; }

.map {
  height: clamp(240px, calc(100vh - 512px), 420px); margin: 12px 18px 0; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(42,33,64,.18); background: #0b1020;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.leaflet-container { background: #0b1020; font-family: inherit; }

.progress { position: relative; height: 5px; margin: 16px 22px 4px; background: rgba(42,33,64,.16); border-radius: 999px; }
.progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--rose)); transition: width 1s ease; }
.progress-plane { position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); font-size: 16px;
  transition: left 1s ease; filter: drop-shadow(0 0 5px rgba(217,154,63,.8)); }

.tk-live { text-align: center; min-height: 20px; margin: 8px 18px 0; font-size: 13px; color: #6a5f7e; font-weight: 600;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.live-pill { font-family:'Fredoka',sans-serif; color:#fff; background: linear-gradient(90deg,#3aa0e0,#2f7fd9);
  padding: 2px 10px; border-radius: 999px; letter-spacing: .5px; animation: pulse 1.6s ease-in-out infinite; }
.tk-live .stat b { color: var(--paper-ink); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }

/* perforated stub */
.tk-stub {
  position: relative; margin-top: 14px; padding: 14px 18px;
  border-top: 2px dashed rgba(42,33,64,.3);
  display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(217,154,63,.08));
}
.tk-stub::before, .tk-stub::after { /* notches */
  content: ''; position: absolute; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--night-mid); box-shadow: inset 0 -2px 4px rgba(0,0,0,.3);
}
.tk-stub::before { left: -13px; } .tk-stub::after { right: -13px; }
.stub-cell .lbl { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #9a8c72; }
.stub-cell .val { font-family: 'Fredoka', sans-serif; font-size: 15px; color: var(--paper-ink); margin-top: 2px; }
.stub-cell.times .val { font-size: 15px; white-space: nowrap; }
.stub-cell .val small { display: block; margin-top: 3px; white-space: nowrap; color:#6a5f7e; font-weight: 600; }

/* map markers */
.leaflet-tile-pane { filter: brightness(.82) saturate(1.12) contrast(1.16); }

.plane-marker { position: relative; }
.plane-marker .plane {
  position: relative; z-index: 2; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
}
.plane-marker .plane svg {
  fill: var(--cyan);
  filter: drop-shadow(0 0 4px rgba(143,220,255,1)) drop-shadow(0 0 12px rgba(143,220,255,.85)) drop-shadow(0 0 22px rgba(143,220,255,.55));
}
.plane-marker .plane-halo {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(143,220,255,.55) 0%, rgba(143,220,255,.18) 45%, rgba(143,220,255,0) 70%);
  animation: beaconPulse 1.8s ease-out infinite;
}
.plane-marker .plane-halo::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(143,220,255,.9); animation: beaconRing 1.8s ease-out infinite;
}
@keyframes beaconPulse { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(1.6); opacity: .25; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes beaconRing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

.leaflet-overlay-pane path.route-flow {
  stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255,210,122,.7));
  animation: dashFlow 1.2s linear infinite;
}
@keyframes dashFlow { to { stroke-dashoffset: -18; } }

.leaflet-overlay-pane path.plane-trail {
  filter: drop-shadow(0 0 3px rgba(143,220,255,.9)) drop-shadow(0 0 9px rgba(143,220,255,.6));
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.15) 70%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.15) 70%, rgba(0,0,0,0) 100%);
}
.airport-marker .airport-dot {
  display:flex; align-items:center; justify-content:center; padding:3px 8px; border-radius:8px;
  background: rgba(255,210,122,.16); border:1px solid var(--gold); color: var(--gold-soft);
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:12px; letter-spacing:1px; white-space:nowrap;
}

.foot { position: relative; z-index: 2; text-align: center; padding: 18px 16px 34px; color: #cbc3ee; font-size: 12px;
  text-shadow: 0 1px 8px rgba(9,8,35,.95), 0 0 2px rgba(9,8,35,.9); }
.foot .sep { margin: 0 8px; color: var(--gold); opacity: .8; }

@media (max-width: 480px) {
  .port .code { font-size: 32px; }
  .map { height: clamp(210px, calc(100vh - 602px), 340px); }
  .tk-stub { grid-template-columns: 1fr 1fr; }
  .stub-cell.times { grid-column: 1 / -1; }
}

/* ---------------- arrival fireworks + celebration ---------------- */
#fx { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; display: block; }

.castle-bg.celebrate { animation: castle-glow 2.6s ease-in-out infinite alternate; }
@keyframes castle-glow {
  from { filter: drop-shadow(0 0 52px rgba(255,180,120,.22)) brightness(1); }
  to   { filter: drop-shadow(0 0 90px rgba(255,210,122,.6)) drop-shadow(0 0 40px rgba(255,158,196,.45)) brightness(1.12) saturate(1.15); }
}

.arrival-banner {
  position: fixed; top: 22px; left: 50%; z-index: 5;
  transform: translate(-50%, -140%) scale(.9); opacity: 0; pointer-events: none;
  padding: 14px 26px; border-radius: 999px;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(15px, 3.6vw, 20px);
  letter-spacing: .5px; white-space: nowrap; color: #2a1c05;
  background: linear-gradient(120deg, var(--gold-soft), var(--gold) 45%, var(--rose) 100%);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.5) inset, 0 0 30px rgba(255,210,122,.55);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.arrival-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); animation: banner-shimmer 2.4s ease-in-out .6s 2; }
@keyframes banner-shimmer {
  0%, 100% { box-shadow: 0 14px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.5) inset, 0 0 30px rgba(255,210,122,.55); }
  50%      { box-shadow: 0 14px 46px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 46px rgba(255,158,196,.75); }
}
@media (max-width: 480px) {
  .arrival-banner { top: 14px; padding: 11px 18px; white-space: normal; text-align: center; max-width: 88vw; }
}