/* CruiseQuest — Mid-Century Cruise Poster, reinterpreted for mobile */

/* Fonts loaded via <link rel=stylesheet> + preconnect in base.html — avoids @import render-blocking chain */

:root {
  /* Carnival Cruise official palette */
  --navy: #052049;           /* hull */
  --navy-2: #0A2F5A;
  --navy-3: #103F75;
  --navy-deep: #021535;
  --red: #D7143D;            /* signature funnel */
  --red-deep: #A01029;
  --sunshine: #F6D003;       /* Fun Ship yellow */
  --sunset-orange: #EB882C;  /* outdoor/deck */
  --aqua: #03CCD4;           /* Lido pool */
  --aqua-dim: #02999F;
  --sand: #F5E6D3;
  --white: #FFFFFF;
  --muted: #B0C2DD;           /* bumped from #8FA4BE → WCAG 4.5:1 on all navy variants */
  --line: rgba(255,255,255,0.1);
  --radius: 18px;
  --shadow-soft: 0 10px 40px rgba(0,0,0,0.3);

  /* Legacy aliases — keep existing selectors resolving to new palette */
  --sunset: var(--sunshine);
  --sunset-2: var(--sunset-orange);
  --coral: var(--red);
  --teal: var(--aqua);
  --teal-dim: var(--aqua-dim);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--navy-deep); min-height: 100vh; }

/* ─── Time-of-day ambient palette ─────────────────────────────────────
   Base palette (night/default). JS sets html[data-timeofday=sunrise|day|
   sunset|night] from ship-time hour (CT); CSS vars swap so the bg
   gradients drift with the day cycle — subtle, not in-your-face. */
:root {
  --bg-glow-1: rgba(246,208,3,0.12);    /* gold */
  --bg-glow-2: rgba(3,204,212,0.12);    /* aqua */
  --bg-top:    var(--navy);
  --bg-bot:    var(--navy-deep);
}
:root[data-timeofday="sunrise"] {
  --bg-glow-1: rgba(255,175,120,0.22);  /* peach horizon */
  --bg-glow-2: rgba(255,210,145,0.12);  /* warm cream */
  --bg-top:    #1E2A55;                 /* deep predawn blue */
  --bg-bot:    #0F1B3A;
}
:root[data-timeofday="day"] {
  --bg-glow-1: rgba(246,208,3,0.22);    /* bright sun */
  --bg-glow-2: rgba(3,204,212,0.20);    /* pool aqua */
  --bg-top:    #0B2F66;
  --bg-bot:    #052049;
}
:root[data-timeofday="sunset"] {
  --bg-glow-1: rgba(235,136,44,0.28);   /* sunset orange */
  --bg-glow-2: rgba(215,20,61,0.14);    /* dusk red */
  --bg-top:    #1F1544;                 /* violet hour */
  --bg-bot:    #2A0F33;
}
:root[data-timeofday="night"] {
  --bg-glow-1: rgba(246,208,3,0.08);    /* moon gold */
  --bg-glow-2: rgba(3,204,212,0.10);    /* bioluminescent */
  --bg-top:    var(--navy-deep);
  --bg-bot:    #010A1B;
}

body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(ellipse 800px 400px at 10% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90% 110%, var(--bg-glow-2), transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
  color: var(--white);
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  transition: background 2s ease-in-out;
}

/* Subtle compass rose pattern */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g fill='none' stroke='%23F5E6D3' stroke-width='0.8'><circle cx='100' cy='100' r='60'/><circle cx='100' cy='100' r='40'/><path d='M100 20 L105 100 L100 180 L95 100 Z' fill='%23F5E6D3' opacity='0.4'/><path d='M20 100 L100 105 L180 100 L100 95 Z' fill='%23F5E6D3' opacity='0.4'/><path d='M40 40 L100 100 L160 160 M160 40 L100 100 L40 160' stroke-dasharray='2 3'/></g></svg>");
  background-size: 320px 320px;
}
main, header, footer { position: relative; z-index: 1; }

/* ─── topbar ─── */
.topbar {
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--line);
  padding-top: max(10px, env(safe-area-inset-top));
  position: relative;
  z-index: 10;
}
/* Header bottom row — sailing badge + player chip (stacked on mobile) */
.header-bottom-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ship-clock {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--sunshine);
  padding: 4px 10px;
  background: rgba(246,208,3,0.08);
  border: 1px solid rgba(246,208,3,0.3);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}
.player-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(255,181,71,0.08);
  border: 1px solid rgba(255,181,71,0.25);
  border-radius: 999px;
  padding: 4px 12px;
  max-width: 55%;
  overflow: hidden;
}
.player-chip-nick {
  color: var(--sand);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: none;
  white-space: nowrap;
}
.player-chip-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--sunset);
  white-space: nowrap;
}

/* Sailing badge — subtle pennant (no text-cutting clip-path) */
.sailing-badge {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  color: var(--sand);
  letter-spacing: 2.5px;
  padding: 6px 16px 6px 16px;
  background: linear-gradient(135deg, rgba(30,200,175,0.22), rgba(30,200,175,0.08));
  border: 1px solid rgba(30,200,175,0.4);
  border-radius: 4px 18px 18px 4px;
  transform-origin: left center;
  animation: flagWave 6s ease-in-out infinite;
}
.sailing-badge::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(30,200,175,0.6);
  animation: beaconPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes flagWave {
  0%, 100% { transform: rotate(-0.6deg) scaleX(1); }
  50%      { transform: rotate(0.6deg)  scaleX(1.01); }
}
@keyframes beaconPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(30,200,175,0.6); }
  50%      { box-shadow: 0 0 14px rgba(30,200,175,1), 0 0 4px rgba(30,200,175,0.8); }
}
.topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-row > .brand {
  flex-shrink: 0;
}
.topbar-row > .guest-ribbon {
  flex-shrink: 1;
  min-width: 0;
  max-width: 40%;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
/* Guest ribbon — pennant that reflects current tier */
.guest-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 10px;
  text-decoration: none;
  border-radius: 4px 18px 18px 4px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  border: 1px solid;
}
.guest-ribbon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: beaconPulse 2.5s ease-in-out infinite;
}
.guest-ribbon-nick {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tier-specific gradients */
.guest-ribbon-blue {
  background: linear-gradient(135deg, #6BB8FF, #2E6DB8);
  color: var(--white);
  border-color: rgba(107,184,255,0.7);
}
.guest-ribbon-blue .guest-ribbon-dot {
  background: var(--sunshine);
  box-shadow: 0 0 6px rgba(246,208,3,0.7);
}

.guest-ribbon-red {
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  color: var(--white);
  border-color: rgba(215,20,61,0.6);
}
.guest-ribbon-red .guest-ribbon-dot {
  background: var(--sunshine);
  box-shadow: 0 0 6px rgba(246,208,3,0.7);
}

.guest-ribbon-gold {
  background: linear-gradient(135deg, #FFE08A 0%, #FFB547 40%, #C98A1A 60%, #FFD56B 100%);
  color: var(--navy);
  border-color: rgba(201,138,26,0.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  font-weight: 600;
}
.guest-ribbon-gold .guest-ribbon-dot {
  background: var(--red);
  box-shadow: 0 0 6px rgba(215,20,61,0.7);
}

.guest-ribbon-platinum {
  background: linear-gradient(135deg, #F0F0F5 0%, #C8C8D2 40%, #E8E8F0 60%, #F0F0F5 100%);
  color: var(--navy);
  border-color: rgba(200,200,210,0.8);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  font-weight: 600;
}
.guest-ribbon-platinum .guest-ribbon-dot {
  background: var(--navy);
  box-shadow: 0 0 6px rgba(5,32,73,0.6);
}

.guest-ribbon-diamond {
  background: linear-gradient(135deg, #9BDAFF 0%, #FFFFFF 30%, #C195FF 60%, #9BDAFF 100%);
  color: var(--navy);
  border-color: rgba(155,218,255,0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 0 12px rgba(155,218,255,0.4);
  font-weight: 600;
  animation: diamondShimmer 3.5s ease-in-out infinite;
  background-size: 200% 200%;
}
.guest-ribbon-diamond .guest-ribbon-dot {
  background: var(--red);
  box-shadow: 0 0 8px rgba(215,20,61,0.8);
}
@keyframes diamondShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.brand-name {
  font-size: 16px;
}
.header-bottom-row {
  justify-content: space-between;
}
.navmenu {
  position: relative;
}
.navmenu summary {
  list-style: none;
  cursor: pointer;
}
.navmenu summary::-webkit-details-marker { display: none; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--navy-2);
  border: 1px solid var(--sunset);
  color: var(--sunset);
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  user-select: none;
}
.menu-toggle .brand-chevron {
  color: var(--sunset);
  font-size: 14px;
  transition: transform 0.15s;
}
.navmenu[open] .menu-toggle .brand-chevron { transform: rotate(180deg); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  user-select: none;
}
.brand-funnel {
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transform: translateY(-1px);
}
.brand-name {
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: 0.5px;
  font-size: 18px;
  background: linear-gradient(180deg, var(--white), var(--sand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-chevron {
  color: var(--sunset);
  font-size: 16px;
  margin-left: 2px;
  transition: transform 0.15s;
}
.navmenu[open] .brand-chevron { transform: rotate(180deg); }
.brand-menu-hint {
  font-size: 10px;
  font-weight: 700;
  color: var(--sunset);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border: 1px solid var(--sunset);
  border-radius: 999px;
  margin-left: 6px;
  opacity: 0.85;
}
.navmenu[open] .brand-menu-hint { display: none; }

.invite-box {
  background: var(--navy);
  border: 1px solid rgba(255,181,71,0.25);
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
  text-align: center;
}
.invite-code-display {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  color: var(--sunset);
  letter-spacing: 2px;
  margin-bottom: 12px;
  user-select: all;
}
.invite-actions {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
}
.invite-actions .btn-primary, .invite-actions .btn-ghost {
  margin: 0;
  padding: 12px;
  font-size: 14px;
}

/* ─── Lightbox — premium postcard feel ─── */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse at center, rgba(10,25,41,0.9), rgba(6,15,28,0.98)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><g fill='none' stroke='%23F5E6D3' stroke-width='0.4' opacity='0.05'><circle cx='80' cy='80' r='40'/><path d='M80 20 L85 80 L80 140 L75 80 Z' fill='%23F5E6D3' opacity='0.5'/></g></svg>");
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 15px;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}
/* Class applied to <body> when lightbox is open — iOS-safe scroll lock */
body.lightbox-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow:
    0 0 0 10px var(--sand),
    0 0 0 11px rgba(0,0,0,0.3),
    0 30px 80px rgba(0,0,0,0.7);
  background: var(--sand);
}
.lightbox-caption {
  margin-top: 24px;
  color: var(--sand);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 17px;
  text-align: center;
  max-width: 90%;
  padding: 10px 24px;
  position: relative;
}
.lightbox-caption::before, .lightbox-caption::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--sunset);
  margin: 8px auto;
  opacity: 0.5;
}
.lightbox-actions {
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 0) + 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 103;
}
.lightbox-close,
.lightbox-share {
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  min-width: 110px;
  text-align: center;
  transition: transform 0.08s ease, filter 0.15s ease;
}
.lightbox-close {
  background: var(--sand);
  color: var(--navy);
  border: 2px solid var(--navy-deep);
}
.lightbox-share {
  background: linear-gradient(135deg, var(--sunshine) 0%, #FFDE33 100%);
  color: var(--navy);
  border: 2px solid var(--navy-deep);
}
.lightbox-close:active,
.lightbox-share:active {
  transform: scale(0.97);
  filter: brightness(0.95);
}
.gallery-img { cursor: zoom-in; }

.topnav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 20;
}
.topnav a {
  color: var(--sand);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 10px;
  transition: all 0.1s;
  white-space: nowrap;
}
.topnav a:hover, .topnav a:active {
  background: var(--navy-3);
  color: var(--white);
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px;
}

.flash {
  max-width: 640px;
  margin: 16px auto 0;
  padding: 0 20px;
}
.flash p {
  background: rgba(3,204,212,0.12);
  border: 1px solid rgba(3,204,212,0.38);
  color: var(--sand);
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  margin: 0 0 8px;
}
.flash .flash-info {
  background: rgba(3,204,212,0.12);
  border: 1px solid rgba(3,204,212,0.38);
  color: var(--sand);
}
.flash .flash-error {
  background: rgba(215,20,61,0.15);
  border: 1px solid rgba(215,20,61,0.5);
  color: #FF8E9E;
}

.foot {
  text-align: center;
  padding: 32px 20px;
  color: var(--muted);
  font-size: 13px;
}

/* ─── Hero ─── */
.hero {
  text-align: center;
  padding: 4px 0 32px;
  position: relative;
  overflow: visible;
}

/* 🦆 Easter-egg duck peeking from behind the hero title */
.hero-duck {
  position: absolute;
  bottom: 54%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: bottom center;
  transform: translate(var(--duck-tx, 0), 60px) scaleX(var(--duck-scale-x, 1));
  transition: opacity 0.35s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}
.hero-duck.peek {
  opacity: 1;
  transform: translate(var(--duck-tx, 0), 0) scaleX(var(--duck-scale-x, 1));
  animation: duckBob 2.2s ease-in-out infinite;
  pointer-events: auto;
  cursor: pointer;
}
@keyframes duckBob {
  0%, 100% { transform: translate(var(--duck-tx, 0), 0) scaleX(var(--duck-scale-x, 1)) rotate(-2deg); }
  50%      { transform: translate(var(--duck-tx, 0), -4px) scaleX(var(--duck-scale-x, 1)) rotate(2deg); }
}
/* Squeeze toy response to a tap */
.hero-duck.peek.squeeze {
  animation: duckSqueeze 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes duckSqueeze {
  0%   { transform: translate(var(--duck-tx, 0), 0) scaleX(var(--duck-scale-x, 1)) scale(1, 1); }
  25%  { transform: translate(var(--duck-tx, 0), 6px) scaleX(calc(var(--duck-scale-x, 1) * 1.15)) scale(1.15, 0.80); }
  55%  { transform: translate(var(--duck-tx, 0), -10px) scaleX(calc(var(--duck-scale-x, 1) * 0.95)) scale(0.95, 1.18); }
  100% { transform: translate(var(--duck-tx, 0), 0) scaleX(var(--duck-scale-x, 1)) scale(1, 1); }
}
/* Floating "Quack!" / milestone bubble on tap */
.duck-quack {
  position: fixed;
  font-family: 'Archivo Black', sans-serif;
  color: var(--sunshine);
  font-size: 18px;
  z-index: 1100;
  pointer-events: none;
  animation: quackFloat 1.4s ease-out both;
  text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 12px rgba(246,208,3,0.55);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  background: rgba(5,32,73,0.85);
  border: 1px solid var(--sunshine);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.duck-quack-milestone {
  color: var(--white);
  font-size: 15px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  border-color: var(--sunshine);
  animation: quackFloat 2.6s ease-out both;
  box-shadow: 0 0 20px rgba(246,208,3,0.4);
}
@keyframes quackFloat {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -20px) scale(1.15); }
  30%  { transform: translate(-50%, -26px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}
/* ── Landing hero v2 — clean Archivo Black wordmark on a gold radial glow,
   drops the dated 3D yellow bevel. Matches the tier celebration + Sail &
   Sign aesthetic: one font family, one accent color, disciplined spacing. */
.hero-glow {
  display: none;  /* killed — user didn't want the yellow radial halo behind the logo */
}
@keyframes hero-pulse {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
}

.hero-title {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: clamp(56px, 17vw, 104px);
  line-height: 0.88;
  margin: 0;
  letter-spacing: -3px;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  text-align: center;
  color: #F6D003;
  text-shadow:
    0 4px 0 #D7143D,
    0 12px 24px rgba(0,0,0,.5),
    0 0 40px rgba(246,208,3,.25);
}
.hero-title .h-line-1,
.hero-title .h-line-2 {
  display: block;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: inherit;
  filter: none;
}
.hero-title .h-line-2 {
  margin-top: -6px;
  color: #FFFFFF;
  text-shadow:
    0 4px 0 #D7143D,
    0 12px 24px rgba(0,0,0,.5);
}
/* Thin horizontal rule between CRUISE / QUEST — single red line, no stack */
.hero-title .h-rule {
  display: block;
  width: clamp(80px, 28%, 180px);
  height: 3px;
  margin: 6px auto 2px;
  background: linear-gradient(90deg, transparent 0%, #D7143D 20%, #F6D003 50%, #D7143D 80%, transparent 100%);
  border-radius: 2px;
  opacity: 0.9;
}
.hero-tag {
  margin: 22px 0 10px;
  color: #F6D003;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  z-index: 1;
  padding: 0 16px;
}
@media (min-width: 560px) {
  .hero-tag { font-size: 13px; letter-spacing: 5px; padding: 0 30px; }
}
.hero-tag::before, .hero-tag::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: rgba(246,208,3,0.6);
  vertical-align: middle;
  margin: 0 10px;
}
.hero-sub {
  max-width: 420px;
  margin: 6px auto 28px;
  color: rgba(245,230,211,0.88);
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  position: relative;
  z-index: 1;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

/* ─── Buttons ─── */
.btn-primary, .btn-ghost {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.2s;
  letter-spacing: 0.3px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--sunshine) 0%, #FFDE33 100%);
  color: var(--navy);
  box-shadow:
    0 0 0 2px var(--navy),
    0 8px 24px rgba(246,208,3,0.4);
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 800;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  border: 1.5px solid rgba(5,32,73,0.25);
  pointer-events: none;
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(1px); }

/* Flow sheen effect — pulses across any primary CTA */
.btn-primary {
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: ctaFlow 3.2s ease-in-out infinite;
  z-index: 2;
}
@keyframes ctaFlow {
  0%, 100% { left: -80%; }
  55%      { left: 125%; }
}
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--line);
  margin-left: 8px;
}
.btn-ghost:hover { background: var(--navy-3); }

form .btn-primary, form .btn-ghost {
  width: 100%;
  margin-top: 12px;
}

.action-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.action-row .btn-primary, .action-row .btn-ghost {
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
}

/* ─── Perks / landing strip — FLEX ROW for guaranteed 3-across ─── */
.perks {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  margin: 16px 0 8px;
  width: 100%;
}
.perk {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 14px 6px;
  text-align: center;
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.perk-emoji { font-size: 22px; line-height: 1; }
.perk-title { font-size: 12px; margin-top: 4px; font-weight: 700; }
.perk-sub { font-size: 10px; line-height: 1.3; margin-top: 3px; color: var(--muted); }
.perk {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
}
.perk-emoji { font-size: 28px; }
.perk-title {
  font-weight: 700;
  margin-top: 6px;
  font-size: 15px;
}
.perk-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

.category-strip {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-auto-flow: row !important;
  gap: 8px;
  margin: 16px 0 20px;
}
.cat {
  padding: 12px 10px;
  border-radius: 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1.5px dashed;
  position: relative;
}
.cat::before, .cat::after {
  content: "✦";
  font-size: 8px;
  opacity: 0.5;
  margin: 0 5px;
  vertical-align: middle;
}
.cat-common   { background: rgba(3,204,212,0.14);  color: var(--aqua);          border-color: rgba(3,204,212,0.45); }
.cat-uncommon { background: rgba(235,136,44,0.14); color: var(--sunset-orange); border-color: rgba(235,136,44,0.45); }
.cat-hidden   { background: rgba(176,107,255,0.14); color: #C195FF;             border-color: rgba(176,107,255,0.45); }
.cat-mega     { background: rgba(215,20,61,0.16);  color: #FF6B87;              border-color: rgba(215,20,61,0.5); }  /* brighter red → 4.5:1 contrast */
.cat-theme    { background: rgba(246,208,3,0.14);  color: var(--sunshine);      border-color: rgba(246,208,3,0.45); }
.cat-port     { background: rgba(235,136,44,0.14); color: var(--sunset-orange); border-color: rgba(235,136,44,0.45); }
.cat-daily    { background: rgba(3,204,212,0.14);  color: var(--aqua);          border-color: rgba(3,204,212,0.45); }

/* ─── Cards ─── */
.card {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}
.card-tight { padding: 24px 20px; }
.card h2 { margin-top: 0; font-family: 'Archivo Black', sans-serif; letter-spacing: -0.5px; }
.card p { color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; }

.card-celebrate {
  text-align: center;
  background: linear-gradient(160deg, var(--navy-2), var(--navy-3));
  border: 1px solid rgba(255,181,71,0.35);
}
.celebrate-burst { font-size: 40px; margin-bottom: 4px; }
.celebrate-target {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin: 8px 0 16px;
}
.celebrate-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 16px;
}
.celebrate-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.celebrate-stats b {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: var(--sunset);
}
.celebrate-stats span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── Status bar — tier-themed "What's Happening" ribbon ─── */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  padding: 16px 20px 18px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid var(--navy);
  position: relative;
  border-top: 4px solid var(--red);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 -2px 0 rgba(246,208,3,0.25);
}
.status-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--red) 0%, var(--sunshine) 50%, var(--aqua) 100%);
  opacity: 0.5;
}

/* Tier-themed overrides — border, accent gradient, and .tier text color
   reflect the player's current tier so it feels earned. */
.status-bar-blue {
  border-top-color: #6BB8FF;
  background:
    linear-gradient(135deg, rgba(107,184,255,0.08), rgba(30,109,200,0.03)),
    linear-gradient(135deg, var(--navy-2), var(--navy-3));
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 -2px 0 rgba(107,184,255,0.22);
}
.status-bar-blue::before {
  background: linear-gradient(90deg, #6BB8FF 0%, #4A9BE8 50%, #1E6DC8 100%);
}
.status-bar-blue .tier { color: #8BC8FF; text-shadow: 0 1px 0 rgba(0,0,0,0.35); }

.status-bar-red {
  border-top-color: var(--red);
  background:
    linear-gradient(135deg, rgba(215,20,61,0.08), rgba(160,16,41,0.03)),
    linear-gradient(135deg, var(--navy-2), var(--navy-3));
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 -2px 0 rgba(215,20,61,0.25);
}
.status-bar-red::before {
  background: linear-gradient(90deg, var(--red) 0%, #E8505F 50%, var(--red-deep) 100%);
}
.status-bar-red .tier { color: #F28898; text-shadow: 0 1px 0 rgba(0,0,0,0.35); }

.status-bar-gold {
  border-top-color: var(--sunshine);
  background:
    linear-gradient(135deg, rgba(246,208,3,0.08), rgba(201,138,26,0.03)),
    linear-gradient(135deg, var(--navy-2), var(--navy-3));
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 -2px 0 rgba(246,208,3,0.3);
}
.status-bar-gold::before {
  background: linear-gradient(90deg, #FFF0B3 0%, var(--sunshine) 50%, #A06A10 100%);
}
.status-bar-gold .tier { color: var(--sunshine); text-shadow: 0 1px 0 rgba(0,0,0,0.35); }

/* PLATINUM — brushed-steel look */
.status-bar-platinum {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #FFFFFF 0%, #DADCE4 35%, #A8AEC2 65%, #E5E7EE 100%) 1;
  background:
    linear-gradient(135deg, rgba(232,232,240,0.10), rgba(160,170,190,0.03)),
    linear-gradient(135deg, var(--navy-2), var(--navy-3));
  box-shadow:
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 -2px 0 rgba(200,210,230,0.20),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.status-bar-platinum::before {
  background: linear-gradient(90deg, #FFFFFF 0%, #DADCE4 25%, #A8AEC2 50%, #E5E7EE 75%, #BEC3D0 100%);
  opacity: 0.7;
}
.status-bar-platinum .tier {
  background: linear-gradient(135deg, #FFFFFF 0%, #DADCE4 40%, #A8AEC2 70%, #E5E7EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3));
}

/* DIAMOND — iridescent */
.status-bar-diamond {
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #E0F4FF 0%, #9BDAFF 30%, #4FB0E8 60%, #D8F0FF 100%) 1;
  background:
    linear-gradient(135deg, rgba(155,218,255,0.12), rgba(79,176,232,0.03)),
    linear-gradient(135deg, var(--navy-2), var(--navy-3));
  box-shadow:
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 -2px 0 rgba(155,218,255,0.25),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.status-bar-diamond::before {
  background: linear-gradient(90deg, #F0FAFF 0%, #9BDAFF 35%, #3E98D5 70%, #E0F4FF 100%);
  opacity: 0.75;
}
.status-bar-diamond .tier {
  background: linear-gradient(135deg, #F0FAFF 0%, #9BDAFF 40%, #4FB0E8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(155,218,255,0.4));
}
.tier {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  color: var(--sunset);
  margin-top: 2px;
}
.mini-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 4px;
}
.stats { display: flex; gap: 18px; }
.stats > div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.stats b {
  font-family: 'Archivo Black', sans-serif;
  font-size: 17px;
  color: var(--white);
}
.stats span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ─── Target card — Mid-Century poster frame ─── */
.target-card {
  background:
    radial-gradient(ellipse at top left, rgba(30,200,175,0.07), transparent 60%),
    var(--navy-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.target-card[data-swipe-swap] {
  touch-action: pan-y;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.target-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--teal);
}
.target-card.cat-uncommon::before { background: var(--sunset); }
.target-card.cat-hidden::before { background: #B06BFF; }
.target-card.cat-mega::before { background: var(--coral); }
.target-card.cat-theme::before { background: var(--sand); }
.target-card.cat-port::before { background: #87CEEB; }
.target-card.cat-daily::before { background: linear-gradient(90deg, var(--teal), var(--sunset)); }

/* Deco corner brackets (Mid-Century frame) */
.target-card::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 20px; height: 20px;
  border-top: 2px solid rgba(255,181,71,0.35);
  border-right: 2px solid rgba(255,181,71,0.35);
  pointer-events: none;
}
.target-card .target-corner-bl {
  position: absolute;
  bottom: 10px; left: 10px;
  width: 20px; height: 20px;
  border-bottom: 2px solid rgba(255,181,71,0.35);
  border-left: 2px solid rgba(255,181,71,0.35);
}

.target-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.target-emoji { font-size: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

/* Category chip — stamped/postmark feel */
.target-category {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 3px;
  color: var(--muted);
  padding: 2px 8px;
  border: 1.5px dashed rgba(255,255,255,0.15);
  border-radius: 3px;
  transform: rotate(-1deg);
}
/* Token pill — embossed gold leaf */
.target-tokens {
  margin-left: auto;
  background: linear-gradient(135deg, #FFE08A 0%, #FFB547 40%, #C98A1A 60%, #FFD56B 100%);
  color: var(--navy);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 2px 6px rgba(201,138,26,0.3);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.target-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  margin: 2px 0 4px;
  letter-spacing: -0.5px;
  color: var(--white);
  line-height: 1.05;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.target-loc {
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.target-time {
  color: var(--sunshine);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 2px 0 0;
  padding: 3px 8px;
  background: rgba(246,208,3,0.1);
  border-left: 2px solid var(--sunshine);
  border-radius: 0 4px 4px 0;
  display: inline-block;
}
.target-hint {
  color: var(--sand);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 0;
  margin-top: 8px;
}

/* ─── Upload ─── */
.upload-card { padding: 16px; margin-top: -4px; }
.file-drop {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 40px 20px;
  transition: all 0.2s;
  overflow: hidden;
}
.file-drop:hover, .file-drop:active {
  border-color: var(--sunset);
  background: rgba(255,181,71,0.04);
}
.file-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
}
.file-drop-emoji { font-size: 36px; }
.file-drop-title { font-weight: 700; font-size: 15px; }
.file-drop-sub {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  word-break: break-all;
  padding: 0 10px;
}
.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  font-size: 0;
  z-index: 2;
}
.file-drop.has-preview {
  padding: 0;
  border-style: solid;
  border-color: rgba(30,200,175,0.5);
  min-height: 260px;
}
.file-preview {
  display: none;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
}
.file-drop.has-preview .file-preview {
  display: block;
}
.file-preview[hidden] { display: none !important; }
.file-drop-replace {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 6px 12px;
  background: rgba(10,25,41,0.85);
  color: var(--sunset);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  pointer-events: none;
}

.skip-form {
  text-align: center;
  margin-top: 4px;
}

/* ─── Inputs ─── */
.input-lg {
  width: 100%;
  padding: 18px 16px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--white);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  margin: 6px 0 0;
  -webkit-appearance: none;
  appearance: none;
}
.input-lg:focus {
  outline: none;
  border-color: var(--sunset);
  background: var(--navy-3);
}
select.input-lg {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path fill='%238FA4BE' d='M1 1l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
}
input[type="date"].input-lg { min-height: 56px; }

.join-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.form-label { display: block; }
.form-label > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .form-row { grid-template-columns: 1fr; } }

/* ─── Tabs ─── */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--navy);
  border-radius: 12px;
  margin: 16px 0 18px;
  border: 1px solid var(--line);
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}
.tab:hover { color: var(--white); }
.tab-active {
  background: var(--navy-3);
  color: var(--sunset);
}

.lb-sailing {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  max-width: 100%;
}

.tier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 6px;
}
.chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-decoration: none;
  background: var(--navy);
}
.chip-active {
  background: var(--sunset);
  color: var(--navy);
  border-color: var(--sunset);
}

.tier-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.tier-table th, .tier-table td {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.tier-table th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
}
.cat-label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cat-label.cat-common { color: var(--teal); }
.cat-label.cat-uncommon { color: var(--sunset); }
.cat-label.cat-hidden { color: #C195FF; }
.cat-label.cat-mega { color: #FF6B87; }   /* WCAG contrast — was var(--coral) */
.cat-label.cat-theme { color: var(--sand); }
.cat-label.cat-port { color: #87CEEB; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.gallery-item {
  background: var(--navy);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.gallery-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.gallery-caption {
  padding: 8px 10px;
  font-size: 12px;
}
.gallery-target {
  font-weight: 700;
  color: var(--sand);
  font-size: 12px;
  line-height: 1.3;
}
.gallery-player {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.gallery-item { position: relative; }
.like-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(10,25,41,0.8);
  border: 1px solid var(--line);
  color: var(--white);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: inherit;
}
.like-badge .like-heart { color: var(--coral); font-size: 14px; line-height: 1; }

/* ─── Tier picker ─── */
.tier-picker {
  border: none;
  padding: 0;
  margin: 0;
}
.tier-picker legend {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  padding: 0;
}
.tier-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin: 6px 0;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border 0.15s, background 0.15s;
}
.tier-opt:has(input:checked) {
  border-color: var(--sunset);
  background: rgba(255,181,71,0.06);
}
.tier-opt input[type="radio"] {
  accent-color: var(--sunset);
  flex-shrink: 0;
}
.tier-opt-body { display: flex; flex-direction: column; }
.tier-opt-label {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--sand);
}
.tier-opt-label small {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.5px;
}
.tier-opt-sub { font-size: 12px; color: var(--muted); margin-top: 2px; font-style: italic; font-family: 'Playfair Display', serif; }
.tier-opt-blue .tier-opt-label { color: #6BB8FF; }
.tier-opt-red .tier-opt-label { color: var(--coral); }
.tier-opt-gold .tier-opt-label { color: var(--sunset); }
.tier-opt-platinum .tier-opt-label { color: #E8E8F0; }
.tier-opt-diamond .tier-opt-label { color: #9BDAFF; }

.medals-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.medal-chip {
  background: linear-gradient(135deg, #FFE08A 0%, #FFB547 40%, #C98A1A 60%, #FFD56B 100%);
  color: var(--navy);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 2px 8px rgba(201,138,26,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
}
.medal-chip::before {
  content: "🎖";
  margin-right: 2px;
}

/* ─── Tier compare table (collapsible) ─── */
.tier-compare {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0 12px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.tier-compare summary {
  cursor: pointer;
  color: var(--sunshine);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}
.tier-compare summary::-webkit-details-marker { display: none; }
.tier-compare summary::after {
  content: "▸";
  transition: transform 0.2s ease;
  display: inline-block;
  color: var(--sunshine);
  font-size: 14px;
}
.tier-compare[open] summary::after {
  transform: rotate(90deg);
}
/* Expanded state — much more noticeable */
.tier-compare[open] {
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
  border-color: var(--sunshine);
  box-shadow: 0 0 0 1px rgba(246,208,3,0.25), 0 8px 24px rgba(0,0,0,0.4);
}
.tier-compare[open] summary {
  color: var(--white);
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px dashed rgba(246,208,3,0.3);
}

/* Waving-flag animation — applied to an inline .flag-wave span inside summary */
.flag-wave {
  display: inline-block;
  transform-origin: left center;
  animation: flagWave 1.6s ease-in-out infinite;
}
@keyframes flagWave {
  0%, 100% { transform: rotate(-6deg) skewX(0deg); }
  25%      { transform: rotate(2deg) skewX(4deg); }
  50%      { transform: rotate(6deg) skewX(-2deg); }
  75%      { transform: rotate(-2deg) skewX(-4deg); }
}

/* Dingle — pendant-swing animation for the Diamond 💎 tier emoji */
.tier-diamond-dingle {
  display: inline-block;
  transform-origin: top center;
  animation: dingle 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(155,218,255,0.55));
}
@keyframes dingle {
  0%, 70%, 100% { transform: rotate(0deg); }
  74%          { transform: rotate(-14deg); }
  80%          { transform: rotate(10deg); }
  86%          { transform: rotate(-6deg); }
  92%          { transform: rotate(3deg); }
  96%          { transform: rotate(-1deg); }
}

.tier-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 11px;
  table-layout: fixed;
}
.tier-compare-table col.col-tier  { width: 26%; }
.tier-compare-table col.col-finds { width: 14%; }
.tier-compare-table col.col-scope { width: 40%; }
.tier-compare-table col.col-walk  { width: 20%; }
.tier-compare-table td:nth-child(4),
.tier-compare-table th:nth-child(4) {
  white-space: nowrap;
  text-align: right;
  font-size: 12px;
}
.tier-compare-table td:nth-child(1) {
  font-size: 12px;
  line-height: 1.15;
}
.tier-compare-table td:nth-child(2) {
  text-align: center;
  font-size: 12px;
}
.tier-compare-table th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}
.tier-compare-table td {
  padding: 8px 4px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tier-compare-table td b { color: var(--sand); }
.tier-compare-table td small { color: var(--muted); font-size: 10px; }
.tier-compare-table .tcr-warn {
  display: inline-block;
  background: rgba(215,20,61,0.2);
  color: var(--red);
  padding: 1px 5px;
  margin-left: 3px;
  font-size: 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.tcr-blue td:first-child b { color: #6BB8FF; }
.tcr-red td:first-child b { color: var(--coral); }
.tcr-gold td:first-child b { color: var(--sunset); }
.tcr-platinum td:first-child b { color: #E8E8F0; }
.tcr-diamond td:first-child b { color: #9BDAFF; }
.tier-compare-note {
  font-size: 10px !important;
  margin: 8px 0 0 !important;
  line-height: 1.4;
}

/* Clue stamp — Carnival red numbered tag (top-left of target card) */
.clue-stamp {
  position: absolute;
  top: 14px;
  left: -4px;
  background: var(--red);
  color: var(--white);
  padding: 5px 10px 5px 14px;
  border-radius: 0 4px 4px 0;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  z-index: 2;
  transform: rotate(-2deg);
}
.clue-stamp::before {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 4px; height: 4px;
  background: var(--red-deep);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.clue-stamp-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  opacity: 0.9;
  line-height: 1;
}
.clue-stamp-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

/* (legacy clue-stamp offset removed — stamp no longer in template) */

/* Staggered fade-in on page load for cards */
main > section, main > .medal-progress {
  animation: slideFadeUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
main > section:nth-child(1) { animation-delay: 0s; }
main > section:nth-child(2) { animation-delay: 0.05s; }
main > section:nth-child(3) { animation-delay: 0.1s; }
main > section:nth-child(4) { animation-delay: 0.15s; }
main > section:nth-child(5) { animation-delay: 0.2s; }
@keyframes slideFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Card titles — Bebas Neue treatment for that poster feel */
.card h2, .card h3 {
  font-family: 'Archivo Black', sans-serif;
}

/* ─── RIBBON family — shared pennant language ─── */
/* Applied via .ribbon + color modifier: .ribbon-aqua / -red / -sunshine / -sand */

.ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  padding: 6px 18px;
  border-radius: 4px 18px 18px 4px;
  transform-origin: left center;
}
.ribbon::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: beaconPulse 2.5s ease-in-out infinite;
}

.ribbon-aqua {
  color: var(--sand);
  background: linear-gradient(135deg, rgba(3,204,212,0.22), rgba(3,204,212,0.08));
  border: 1px solid rgba(3,204,212,0.4);
}
.ribbon-aqua::before { background: var(--aqua); box-shadow: 0 0 8px rgba(3,204,212,0.6); }

.ribbon-red {
  color: var(--white);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  border: 1px solid var(--red);
}
.ribbon-red::before { background: var(--sunshine); box-shadow: 0 0 8px rgba(246,208,3,0.6); }

.ribbon-sunshine {
  color: var(--navy);
  background: linear-gradient(135deg, var(--sunshine), #FFDE33);
  border: 1px solid var(--sunshine);
  font-weight: 700;
}
.ribbon-sunshine::before { background: var(--red); box-shadow: 0 0 8px rgba(215,20,61,0.6); }

.ribbon-sand {
  color: var(--navy);
  background: linear-gradient(135deg, var(--sand), #FFF3D9);
  border: 1px solid rgba(245,230,211,0.6);
}
.ribbon-sand::before { background: var(--red); box-shadow: 0 0 8px rgba(215,20,61,0.4); }

/* Animated waving ribbon variant */
.ribbon-wave {
  animation: flagWave 6s ease-in-out infinite;
}

/* Section header ribbons — apply to .card > h2/h3 */
.card h2.ribbon-title, .card h3.ribbon-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  padding: 8px 22px 8px 18px;
  margin: 0 0 10px -18px;  /* bleed into card padding */
  color: var(--white);
  background: linear-gradient(90deg, var(--red), var(--red-deep));
  border-radius: 0 8px 8px 0;
  box-shadow:
    4px 4px 0 rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
}
.card h2.ribbon-title::after, .card h3.ribbon-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 6px; height: 6px;
  background: var(--red-deep);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Medal chip → pennant ribbon */
.medal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #FFE08A 0%, #FFB547 40%, #C98A1A 60%, #FFD56B 100%);
  color: var(--navy);
  padding: 5px 18px 5px 12px;
  border-radius: 4px 14px 14px 4px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.2),
    0 2px 8px rgba(201,138,26,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}

/* Auto-ribbon for key headers (targeted so we don't break existing) */
#top h2, #global h2, #speed h2, #teams-lb h2,
.teams-lb h2,
.gallery h2 { /* not applied — use explicit ribbon-title class in templates */ }

/* Rope-braid divider (pure CSS, repeating) */
.rope-divider, main > section + section:not(.category-strip):not(.perks):not(.hero):not(.upload-card):not(.remaining-card)::before {
  content: "";
  display: block;
  height: 12px;
  margin: 0 auto 16px;
  max-width: 240px;
  background-image:
    radial-gradient(ellipse 5px 3px at 6px 6px, rgba(255,181,71,0.45), transparent 70%),
    radial-gradient(ellipse 5px 3px at 18px 6px, rgba(255,181,71,0.25), transparent 70%);
  background-size: 24px 12px, 24px 12px;
  background-position: 0 0, 12px 0;
  background-repeat: repeat-x;
  opacity: 0.7;
}
/* Disable auto-divider on first child + inside nested lists */
main > section:first-of-type::before { content: none; }

/* Tap/press states (mobile-first) */
.btn-primary, .btn-ghost, .tab, .chip,
.lb-row, .cl-row, .tier-opt,
.gallery-item, .perk, .cat,
.sailing-chip, .menu-toggle {
  transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active {
  transform: scale(0.97);
  filter: brightness(0.95);
}
.btn-ghost:active, .chip:active, .tab:active, .sailing-chip:active,
.tier-opt:active, .menu-toggle:active {
  transform: scale(0.97);
}
.gallery-item:active { transform: scale(0.98); }
.lb-row:active, .cl-row:active, .perk:active { transform: translateX(2px); }

/* Card hover lift (desktop only — on touch this would stick) */
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,138,61,0.45); }
  .target-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,0.45); }
  .gallery-item:hover img { filter: brightness(1.08); }
  .gallery-item { transition: transform 0.15s ease; }
  .gallery-item:hover { transform: translateY(-3px); }
}

/* Progress bar "fanfare" when at 100% */
.medal-progress-bar[style*="100%"] {
  animation: progressFanfare 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes progressFanfare {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.4) saturate(1.3); transform: scaleY(1.15); }
  100% { filter: brightness(1); }
}

/* Flash message — tier upgrade celebration slide-in */
.flash p {
  animation: flashBanner 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: left center;
}
@keyframes flashBanner {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Medal chip sheen */
.medal-chip {
  position: relative;
  overflow: hidden;
}
.medal-chip::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: medalSheen 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes medalSheen {
  0%, 80%, 100% { left: -80%; }
  90%           { left: 140%; }
}

/* Target-card entrance — slides in from the side (matches Tinder-style swap) */
.target-card {
  animation: targetCardEnter 0.5s cubic-bezier(0.25, 0.85, 0.3, 1) both;
}
@keyframes targetCardEnter {
  0%   { opacity: 0; transform: translateX(40%) rotate(6deg) scale(0.94); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}


/* ─── Boarding Pass (preview) ─── */
.boarding-pass {
  display: flex;
  background: linear-gradient(135deg, #F5E6D3 0%, #FFF8E8 50%, #F5E6D3 100%);
  color: var(--navy);
  border-radius: 8px;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.3) inset,
    0 20px 40px rgba(0,0,0,0.5);
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  position: relative;
  margin: 16px 0;
  min-height: 200px;
}
.boarding-pass::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 50%, var(--navy) 50%, var(--navy) 100%);
}
.bp-stub-left {
  flex: 1;
  padding: 22px 18px 14px;
  min-width: 0;
}
.bp-stub-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1.5px dashed rgba(5,32,73,0.25);
}
.bp-brand-text {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--red);
}
.bp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(5,32,73,0.15);
}
.bp-row:last-child { border-bottom: none; }
.bp-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--red-deep);
  text-transform: uppercase;
}
.bp-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.bp-perforation {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 12px;
  padding: 10px 0;
  position: relative;
}
.bp-perforation::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  border-left: 1.5px dashed rgba(5,32,73,0.35);
}
.bp-perf-hole {
  width: 8px;
  height: 8px;
  background: var(--navy);
  border-radius: 50%;
  margin: 0 auto;
  z-index: 1;
  opacity: 0.12;
}
.bp-stub-right {
  width: 120px;
  background: var(--navy);
  color: var(--white);
  padding: 22px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.bp-stub-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--sunshine);
}
.bp-stub-code {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--sunshine);
  text-align: center;
  margin: 8px 0 10px;
  line-height: 1.1;
}
.bp-barcode {
  display: flex;
  gap: 2px;
  height: 30px;
  align-items: stretch;
  margin: 6px 0;
}
.bp-barcode span {
  display: inline-block;
  background: var(--white);
  height: 100%;
}
.bp-barcode span:nth-child(1) { width: 1px; }
.bp-barcode span:nth-child(2) { width: 3px; }
.bp-barcode span:nth-child(3) { width: 2px; }
.bp-barcode span:nth-child(4) { width: 1px; }
.bp-barcode span:nth-child(5) { width: 4px; }
.bp-barcode span:nth-child(6) { width: 1px; }
.bp-barcode span:nth-child(7) { width: 2px; }
.bp-barcode span:nth-child(8) { width: 3px; }
.bp-barcode span:nth-child(9) { width: 1px; }
.bp-barcode span:nth-child(10) { width: 2px; }
.bp-barcode span:nth-child(11) { width: 4px; }
.bp-barcode span:nth-child(12) { width: 1px; }
.bp-stub-footer {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--sand);
  opacity: 0.6;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Small inline-chip version of boarding pass for header */
.bp-small {
  text-decoration: none;
  display: inline-flex;
  background: linear-gradient(90deg, #F5E6D3 0%, #FFF8E8 100%);
  color: var(--navy);
  border-radius: 6px;
  padding: 4px 4px 4px 10px;
  font-family: 'Manrope', sans-serif;
  align-items: center;
  gap: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  overflow: hidden;
  margin-top: 8px;
}
.bp-small-left, .bp-small-right {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.bp-small-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--red-deep);
}
.bp-small-nick {
  font-weight: 800;
  font-size: 12px;
  color: var(--navy);
  margin-top: 1px;
}
.bp-small-code {
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--sunshine);
  margin-top: 1px;
}
.bp-small-right {
  background: var(--navy);
  padding: 4px 8px;
  border-radius: 4px;
}
.bp-small-right .bp-small-label { color: var(--sunshine); opacity: 0.8; }
.bp-small-perf {
  width: 1px;
  align-self: stretch;
  margin: 2px 0;
  border-left: 1.5px dashed rgba(5,32,73,0.35);
}

/* ─── Checklist — collapsible sections ─── */
.checklist-section summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 2px;
  font-size: 16px;
}
.checklist-section summary::-webkit-details-marker { display: none; }
.checklist-section summary::marker { display: none; content: ""; }
.checklist-section .cs-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--navy);
  border: 1px solid var(--line);
  transition: background 0.15s;
}
.checklist-section summary:hover .cs-inner { background: var(--navy-3); }
.checklist-section .cs-left { flex: 1; }
.checklist-section .cs-count {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--sunshine);
  background: rgba(246,208,3,0.12);
  padding: 2px 10px;
  border-radius: 999px;
}
.checklist-section .cs-chevron {
  font-size: 14px;
  color: var(--muted);
  transition: transform 0.2s;
}
.checklist-section[open] .cs-chevron { transform: rotate(90deg); }

.checklist {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.cl-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
}
.cl-row:last-child { border-bottom: none; }
.cl-check {
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  min-width: 24px;
  font-weight: 700;
  padding-top: 2px;
}
.cl-row.cl-done .cl-check { color: var(--teal); }
.cl-row.cl-done .cl-name { text-decoration: line-through; color: var(--muted); }
.cl-body { flex: 1; min-width: 0; }
.cl-name { font-weight: 700; font-size: 14px; color: var(--sand); }
.cl-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.cl-tok {
  margin-left: 6px;
  color: var(--sunset);
  font-weight: 700;
}
.cl-hint {
  font-size: 12px;
  color: var(--sand);
  margin-top: 6px;
  line-height: 1.4;
  padding-left: 2px;
  opacity: 0.8;
}

/* ─── Sailing chips on landing ─── */
.sailing-chips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips-header {
  width: 100%;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sailing-chip {
  background: var(--navy);
  border: 1px solid var(--line);
  color: var(--sand);
  padding: 8px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s;
}
.sailing-chip:hover { background: var(--navy-3); }
.sailing-chip.active {
  background: var(--sunset);
  color: var(--navy);
  border-color: var(--sunset);
}

/* ─── Medal progress bar ─── */
.medal-progress {
  position: relative;
  height: 10px;
  background: var(--navy);
  border-radius: 999px;
  margin: 12px 0 6px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.medal-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--sunset));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 999px;
  position: relative;
}
.medal-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 2.5s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* Next-tier-colored progress variants */
.medal-progress-red .medal-progress-bar { background: linear-gradient(90deg, var(--teal), var(--coral)); }
.medal-progress-gold .medal-progress-bar { background: linear-gradient(90deg, var(--coral), var(--sunset)); }
.medal-progress-platinum .medal-progress-bar { background: linear-gradient(90deg, var(--sunset), #E8E8F0); }
.medal-progress-diamond .medal-progress-bar { background: linear-gradient(90deg, #E8E8F0, #9BDAFF); }

.medal-progress-label {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 18px;
}
.medal-progress-label b {
  color: var(--sand);
  font-weight: 700;
}

/* Next-tier chip in stats */
.stat-next b {
  background: linear-gradient(135deg, var(--sand), var(--sunset));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.stat-next-red b { background: linear-gradient(135deg, var(--coral), #FF8080); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-next-gold b { background: linear-gradient(135deg, var(--sunset), #FFD56B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-next-platinum b { background: linear-gradient(135deg, #E8E8F0, #B8B8C8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-next-diamond b { background: linear-gradient(135deg, #9BDAFF, #E8E8F0, #C195FF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ─── Admin ─── */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.admin-stat {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.admin-stat b {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: var(--sunset);
  display: block;
}
.admin-stat span {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.admin-list {
  font-size: 13px;
  padding-left: 18px;
  color: var(--sand);
}
.admin-links { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.admin-table {
  width: 100%;
  font-size: 12px;
  margin-top: 12px;
  border-collapse: collapse;
}
.admin-table th, .admin-table td {
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.admin-table th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.btn-small { padding: 4px 10px !important; font-size: 11px !important; }

/* ─── Landing consent disclosure ─── */
.consent-notice {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(30,200,175,0.08);
  border: 1px solid rgba(30,200,175,0.25);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── Leaderboard — poster numerals ─── */
.leaderboard {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.is-me {
  background: linear-gradient(90deg, rgba(255,181,71,0.14), rgba(255,181,71,0.04));
  border-radius: 10px;
  border-color: transparent;
  padding-left: 14px;
  padding-right: 14px;
  border-left: 3px solid var(--sunset);
}
.lb-rank {
  font-family: 'Bebas Neue', sans-serif;
  color: var(--sunset);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.lb-row:nth-child(1) .lb-rank {
  background: linear-gradient(135deg, #FFE08A, #FFB547, #C98A1A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 34px;
}
.lb-row:nth-child(2) .lb-rank {
  background: linear-gradient(135deg, #E8E8F0, #B8B8C8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lb-row:nth-child(3) .lb-rank {
  background: linear-gradient(135deg, #E06A6F, #B8404A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lb-nick { font-weight: 700; }
.lb-tier { color: var(--muted); font-size: 12px; }
.lb-tok, .lb-pts, .lb-finds {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
}
.lb-tok small, .lb-finds small {
  color: var(--muted);
  font-size: 10px;
  margin-left: 2px;
  font-family: 'Space Grotesk';
  font-weight: normal;
  text-transform: uppercase;
}

/* ─── Share ─── */
.share-box {
  text-align: center;
  padding: 28px 16px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 18px 0;
}
.share-code {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  color: var(--sunset);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.share-code-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-code-actions .btn-primary,
.share-code-actions .btn-ghost {
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
}
.btn-full { display: block; text-align: center; margin-top: 8px; }
.signin-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.signin-divider::before,
.signin-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.prefill-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--navy);
  border: 1px solid rgba(30,200,175,0.4);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0 18px;
}
.prefill-ship {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  color: var(--sand);
}
.prefill-date {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}
.prefill-change {
  color: var(--sunset);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.share-snippet {
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
}
.share-snippet p {
  font-size: 14px;
  color: var(--sand);
  margin: 0 0 12px;
}

/* ─── Responsive tweaks ─── */
@media (max-width: 480px) {
  .lb-row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "rank nick pts"
      "rank tier finds";
    row-gap: 3px;
    column-gap: 10px;
    padding: 12px 6px;
    font-size: 13px;
  }
  .lb-rank   { grid-area: rank; font-size: 24px; }
  .lb-nick   { grid-area: nick; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb-tier   { grid-area: tier; font-size: 11px; white-space: nowrap; }
  .lb-tok,
  .lb-pts    { grid-area: pts; font-size: 15px; text-align: right; white-space: nowrap; }
  .lb-finds  { grid-area: finds; font-size: 12px; text-align: right; white-space: nowrap; opacity: .85; }
  .lb-tok small,
  .lb-pts small,
  .lb-finds small { font-size: 9px; letter-spacing: 1.5px; opacity: .7; }
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH PASS — P0 + P1
   Typography accent · Target card Fun Times · Metallic medals
   Ocean-motif backgrounds · Landing hero · Motion refinements
   ═══════════════════════════════════════════════════════════════════ */

/* ─── P0.1 Typography — Playfair Italic ship accent on boarding pass ─── */
.bp-ship-name {
  font-family: 'Playfair Display', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: clamp(12px, 3.6vw, 15px) !important;
  letter-spacing: 0.2px;
  color: var(--navy-deep) !important;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 66% !important;
}

/* ─── P0.2 Target card — Fun Times treatment ─── */

/* Category chip → proper red pennant (replaces dashed-border look) */
.target-card .target-category {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--white);
  padding: 3px 10px 3px 8px;
  background: linear-gradient(90deg, var(--red), var(--red-deep));
  border: none;
  border-radius: 3px 14px 14px 3px;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
}
.target-card.cat-uncommon .target-category { background: linear-gradient(90deg, var(--sunset-orange), #C96B15); }
.target-card.cat-hidden .target-category   { background: linear-gradient(90deg, #B06BFF, #7938D1); }
.target-card.cat-mega .target-category     { background: linear-gradient(90deg, var(--red), var(--red-deep)); }
.target-card.cat-theme .target-category    { background: linear-gradient(90deg, var(--sunshine), #C9A700); color: var(--navy); text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.target-card.cat-port .target-category     { background: linear-gradient(90deg, var(--aqua), var(--aqua-dim)); color: var(--navy); text-shadow: 0 1px 0 rgba(255,255,255,0.3); }

/* Ticket-perforation edges on pts chip */
.target-card .target-tokens,
.status-bar .target-tokens,
.medal-chip {
  position: relative;
}
.target-card .target-tokens {
  padding-left: 14px;
  padding-right: 14px;
  background-image:
    radial-gradient(circle at 5px 50%, var(--navy-2) 2.2px, transparent 2.4px),
    radial-gradient(circle at calc(100% - 5px) 50%, var(--navy-2) 2.2px, transparent 2.4px),
    linear-gradient(135deg, #FFE08A 0%, #FFB547 40%, #C98A1A 60%, #FFD56B 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* "HINT:" stamp above hint text — typewriter feel, rotated */
.target-hint {
  position: relative;
  padding-top: 18px;
  margin-top: 14px;
  border-top: 1px dashed rgba(245,230,211,0.12);
}
.target-hint::before {
  content: "HINT";
  position: absolute;
  top: -8px;
  left: -2px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--white);
  background: var(--red);
  padding: 3px 8px 2px;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Mono accent on the hint body — typewriter texture */
.target-hint {
  font-family: 'Manrope', sans-serif;
  font-feature-settings: "tnum" 1;
}

/* Paper lift animation on tap (mobile-safe — only on hover devices it persists) */
@media (hover: hover) {
  .target-card:hover .target-name { transform: translateY(-1px); transition: transform 0.2s ease; }
}

/* ─── P0.3 Medal chips — tier-specific metallic variants ─── */

/* Override default medal-chip when tier modifier present */
.medal-chip.medal-chip-blue,
.medal-chip.medal-chip-red,
.medal-chip.medal-chip-platinum,
.medal-chip.medal-chip-diamond {
  background-image: none;
}

.medal-chip-blue {
  background: linear-gradient(135deg, #8BC8FF 0%, #4A9BE8 40%, #1E6DC8 70%, #6BB0F0 100%) !important;
  color: var(--white) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    0 2px 10px rgba(30,109,200,0.4) !important;
}

.medal-chip-red {
  background: linear-gradient(135deg, #F06570 0%, var(--red) 45%, #9A0E28 75%, #E84858 100%) !important;
  color: var(--white) !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.22),
    0 2px 10px rgba(215,20,61,0.45) !important;
}

/* Gold — refine existing default: deeper bevel, subtle grain */
.medal-chip-gold,
.medal-chip:not([class*="medal-chip-"]) {
  background:
    linear-gradient(135deg, #FFF0B3 0%, #FFD56B 30%, #FFB547 55%, #A06A10 80%, #FFDE8F 100%) !important;
  color: #4A2E00 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -2px 3px rgba(120,70,0,0.35),
    0 3px 10px rgba(201,138,26,0.5) !important;
}

.medal-chip-platinum {
  background:
    linear-gradient(135deg, #FFFFFF 0%, #DADCE4 25%, #A8AEC2 55%, #E5E7EE 85%, #BEC3D0 100%) !important;
  color: var(--navy-deep) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 4px rgba(70,80,100,0.22),
    0 3px 12px rgba(120,130,150,0.45) !important;
}

/* Diamond — faceted hex clip-path + iridescent shimmer */
.medal-chip-diamond {
  background:
    linear-gradient(135deg, #F0FAFF 0%, #C0EBFF 20%, #6EC8F5 45%, #3E98D5 65%, #E0F4FF 100%) !important;
  color: var(--navy-deep) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 2px rgba(40,90,140,0.2),
    0 3px 14px rgba(110,200,245,0.55) !important;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%);
  border-radius: 0 !important;
  padding: 6px 22px 6px 22px !important;
}
.medal-chip-diamond::after {
  animation: diamondShimmer 3s ease-in-out infinite !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), rgba(200,235,255,0.5), transparent) !important;
}
@keyframes diamondShimmer {
  0%, 70%, 100% { left: -80%; }
  85%           { left: 140%; }
}

/* ─── P1.4 Ocean-motif background layer — wave band at bottom of viewport ─── */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'><g fill='none' stroke='%2303CCD4' stroke-width='1.4' stroke-linecap='round'><path d='M-10 30 Q 15 22 40 30 T 90 30 T 140 30 T 190 30 T 250 30' opacity='0.7'/><path d='M-10 50 Q 15 42 40 50 T 90 50 T 140 50 T 190 50 T 250 50' opacity='0.5'/><path d='M-10 70 Q 15 62 40 70 T 90 70 T 140 70 T 190 70 T 250 70' opacity='0.35'/></g></svg>");
  background-size: 240px 90px;
  background-repeat: repeat-x;
  background-position: bottom center;
  mask-image: linear-gradient(180deg, transparent 0%, black 40%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 40%, black 100%);
}

/* ─── P1.5 Landing hero — horizon silhouette band ─── */
.hero {
  padding-bottom: 44px;
}
/* Horizon band + wave — STATIONARY. Ship is layered separately so it can
   drift independently on tilt without dragging the water with it. */
.hero::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: 0;
  height: 42px;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 42' preserveAspectRatio='none'><g fill='%23F5E6D3' opacity='0.22'><rect x='0' y='34' width='400' height='8'/></g><g stroke='%23F5E6D3' stroke-width='1' fill='none' opacity='0.18'><path d='M0 38 Q 100 32 200 38 T 400 38'/></g></svg>");
  background-size: 400px 42px;
  background-repeat: no-repeat;
  background-position: center bottom;
}

/* Ship silhouette — separate layer, drifts on --ship-tx. Now with the
   iconic Carnival funnel (red body + white band + dual top wings,
   matches the logo) silhouetted in cream on top of the hull. Dropped
   lower so the waterline meets the horizon band — no more float. */
.hero .hero-ship {
  position: absolute;
  left: 50%;
  bottom: -4px;       /* hull overlaps horizon band = looks like it's IN water */
  width: 56px;
  height: 48px;
  transform: translateX(calc(-50% + var(--ship-tx, 0px)));
  transition: transform 0.28s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 48'><g fill='%23F5E6D3' opacity='0.32'><path d='M24 0 L25 4 L27 4 L28 0 Z'/><path d='M31 0 L32 4 L34 4 L35 0 Z'/><path d='M23 4 L22 10 L36 10 L35 4 Z'/><rect x='22' y='9' width='14' height='1.4' fill='%23052049' opacity='0.65'/><rect x='22' y='10.4' width='14' height='3.6' opacity='0.75'/><path d='M6 20 L8 14 L48 14 L50 20 L50 36 L6 36 Z'/><path d='M2 28 L-2 36 L8 36 Z'/><path d='M54 28 L50 36 L58 36 Z'/><rect x='14' y='22' width='3' height='2' opacity='0.55'/><rect x='22' y='22' width='3' height='2' opacity='0.55'/><rect x='31' y='22' width='3' height='2' opacity='0.55'/><rect x='39' y='22' width='3' height='2' opacity='0.55'/><rect x='14' y='28' width='3' height='2' opacity='0.55'/><rect x='22' y='28' width='3' height='2' opacity='0.55'/><rect x='31' y='28' width='3' height='2' opacity='0.55'/><rect x='39' y='28' width='3' height='2' opacity='0.55'/></g></svg>");
  background-size: 56px 48px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Tiny "tap to enable ship tilt" nudge for iOS permission gate */
.tilt-enable {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 6px 14px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(245,230,211,.75);
  background: rgba(5,32,73,.6);
  border: 1px solid rgba(246,208,3,.25);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: tilt-nudge-pulse 2.4s ease-in-out infinite;
}
.tilt-enable:hover { border-color: rgba(246,208,3,.6); color: #F6D003; }
@keyframes tilt-nudge-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.tilt-enable.hidden { display: none; }

/* Hero tagline — anchor separator replacement */
.hero-tag::before, .hero-tag::after {
  content: "⚓";
  font-size: 11px;
  width: auto;
  height: auto;
  background: none !important;
  opacity: 0.55;
  margin: 0 10px;
  vertical-align: baseline;
  letter-spacing: normal;
}

/* ─── P1.6 Motion — progress bar mount animation, ribbon hover shimmer ─── */

/* Progress bar: slide-grow on mount (works on any .medal-progress-bar[style]) */
.medal-progress-bar {
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: progressGrow 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: left center;
}
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Ribbon hover shimmer (desktop only) */
@media (hover: hover) {
  .ribbon, .guest-ribbon, .card h2.ribbon-title, .card h3.ribbon-title {
    position: relative;
    overflow: hidden;
  }
  .ribbon::after,
  .guest-ribbon::after,
  .card h2.ribbon-title::before,
  .card h3.ribbon-title::before {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .ribbon:hover::after,
  .guest-ribbon:hover::after,
  .card h2.ribbon-title:hover::before,
  .card h3.ribbon-title:hover::before {
    animation: ribbonSheen 0.9s ease-out both;
    opacity: 1;
  }
  @keyframes ribbonSheen {
    from { left: -60%; }
    to   { left: 120%; }
  }
}

/* Details/summary — smooth accordion expansion using grid-template-rows trick */
.checklist-section[open] > *:not(summary) {
  animation: accordionDown 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes accordionDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tap feedback — unified 0.97 scale on all interactive surfaces (already present, extending) */
.target-card:active,
.medal-chip:active,
.tier-opt:active,
.checklist-section summary:active .cs-inner {
  transform: scale(0.985);
  filter: brightness(0.97);
}

/* Checklist — tight stacked cards (all sections closed by default, minimal gap) */
.card-checklist {
  padding: 0;
  margin-bottom: 6px;
  background: var(--navy-2);
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.card-checklist .checklist-section {
  padding: 0;
}
.card-checklist .checklist-section > summary {
  padding: 0;
}
.card-checklist .checklist-section .cs-inner {
  padding: 14px 16px;
  background: transparent;
  border-radius: var(--radius);
  border: none;
}
.card-checklist .checklist-section[open] .cs-inner {
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-checklist .checklist-section .checklist {
  padding: 6px 16px 14px;
  margin: 0;
}

/* QR code card on /share */
.share-qr {
  text-align: center;
  padding: 14px 12px;
  background: var(--white);
  border-radius: 12px;
  margin-top: 14px;
  border: 3px solid var(--sand);
}
.share-qr-img {
  display: block;
  margin: 0 auto;
  max-width: 200px;
  width: 60%;
  height: auto;
}
.share-qr p { color: var(--navy-deep) !important; }

/* Smart alerts stack — top of /play, dismissible */
.alerts-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}
.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sunshine);
  border-radius: 10px;
  font-size: 13px;
  animation: alertSlideIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.alert-warn { border-left-color: var(--sunset-orange); background: linear-gradient(90deg, rgba(235,136,44,0.08), var(--navy-2) 40%); }
.alert-good { border-left-color: var(--aqua); background: linear-gradient(90deg, rgba(3,204,212,0.08), var(--navy-2) 40%); }
.alert-info { border-left-color: var(--sunshine); background: linear-gradient(90deg, rgba(246,208,3,0.08), var(--navy-2) 40%); }
.alert-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.alert-body { flex: 1; min-width: 0; overflow: hidden; }
.alert-title {
  font-weight: 700;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-go {
  color: var(--sunshine);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  padding: 2px 6px 6px;
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}
.alert-x {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 6px 8px;
  flex-shrink: 0;
  line-height: 1;
}
.alert-x:active { transform: scale(0.9); }
@keyframes alertSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Invite pill row — top of /play, links to team share or /teams */
.play-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(246,208,3,0.08), rgba(246,208,3,0.02));
  border: 1px solid rgba(246,208,3,0.25);
  border-radius: 12px;
}
.play-invite-label {
  font-size: 13px;
  color: var(--sand);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--navy-2);
  color: var(--sand);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 400;
}
.btn-chip-primary {
  background: linear-gradient(135deg, var(--sunshine) 0%, #FFDE33 100%);
  color: var(--navy);
  border-color: var(--sunshine);
  font-weight: 700;
}
.btn-chip:active { transform: scale(0.97); }

/* Hall of Fame hero */
.hof-hero {
  text-align: center;
  padding: 28px 24px 20px !important;
  background:
    radial-gradient(ellipse 400px 200px at 50% 30%, rgba(246,208,3,0.18), transparent 70%),
    linear-gradient(135deg, var(--navy-2), var(--navy-3)) !important;
  border: 1px solid rgba(246,208,3,0.3) !important;
}
.hof-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(32px, 8vw, 52px);
  letter-spacing: -1px;
  margin: 0 0 8px;
  background: linear-gradient(180deg, #FFF0B3 0%, var(--sunshine) 45%, #A06A10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(246,208,3,0.35));
}
.hof-sub {
  max-width: 440px;
  margin: 0 auto;
  font-size: 13px !important;
  line-height: 1.45;
}

/* Backup-your-account drawer on /share — collapsed by default */
.backup-drawer summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--sand);
  padding: 4px 0;
  user-select: none;
}
.backup-drawer summary::-webkit-details-marker { display: none; }
.backup-chev {
  color: var(--sunshine);
  font-size: 14px;
  transition: transform 0.2s;
}
.backup-drawer[open] .backup-chev { transform: rotate(90deg); }
.backup-drawer[open] summary {
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(246,208,3,0.25);
  color: var(--sunshine);
}

/* ─── Achievement flash — gold, animated, celebratory ─── */
.flash-achievement {
  background:
    linear-gradient(135deg, rgba(255,224,138,0.22) 0%, rgba(246,208,3,0.12) 50%, rgba(201,138,26,0.18) 100%) !important;
  border: 1.5px solid var(--sunshine) !important;
  color: var(--sunshine) !important;
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 2.5px !important;
  font-size: 15px !important;
  padding: 14px 18px 14px 42px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 0 0 1px rgba(246,208,3,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 8px 24px rgba(246,208,3,0.22) !important;
  animation:
    achievementDrop 0.7s cubic-bezier(0.2, 1.3, 0.3, 1) both,
    achievementGlow 2.4s ease-in-out 0.7s infinite !important;
  transform-origin: center top;
}
.flash-achievement::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,240,180,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: achievementSheen 2.4s ease-in-out 0.9s infinite;
  pointer-events: none;
}
/* Gold star accent on left */
.flash-achievement::after {
  content: "★";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sunshine);
  font-size: 18px;
  text-shadow:
    0 0 8px rgba(246,208,3,0.8),
    0 0 16px rgba(246,208,3,0.4);
  animation: achievementSpin 3s ease-in-out infinite;
}

@keyframes achievementDrop {
  0%   { opacity: 0; transform: translateY(-24px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes achievementGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(246,208,3,0.25), inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 24px rgba(246,208,3,0.22); }
  50%      { box-shadow: 0 0 0 2px rgba(246,208,3,0.5), inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 36px rgba(246,208,3,0.45); }
}
@keyframes achievementSheen {
  0%, 50% { transform: translateX(-120%); }
  80%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}
@keyframes achievementSpin {
  0%, 100% { transform: translateY(-50%) rotate(0); }
  50%      { transform: translateY(-50%) rotate(180deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   P2 — Gallery lightbox · Leaderboard · Checklist progress
   ═══════════════════════════════════════════════════════════════════ */

/* Gallery lightbox — postcard treatment */
.lightbox {
  background:
    radial-gradient(ellipse at center, rgba(5,32,73,0.88), rgba(2,15,40,0.98)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='%23ffffff' opacity='0.015'/><rect x='0' y='0' width='1' height='1' fill='%23ffffff' opacity='0.04'/><rect x='2' y='1' width='1' height='1' fill='%23ffffff' opacity='0.04'/><rect x='1' y='3' width='1' height='1' fill='%23ffffff' opacity='0.04'/></svg>") !important;
  background-size: cover, 4px 4px !important;
}
.lightbox img {
  border-radius: 4px !important;
  box-shadow:
    0 0 0 12px var(--sand),
    0 0 0 13px rgba(0,0,0,0.35),
    30px 30px 80px rgba(0,0,0,0.75),
    0 0 0 14px rgba(215,20,61,0.15) !important;
  transform: rotate(-0.8deg);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: postcardSettle 0.5s cubic-bezier(0.2, 1.3, 0.3, 1) both;
}
@keyframes postcardSettle {
  0%   { opacity: 0; transform: rotate(-6deg) scale(0.9) translateY(20px); }
  70%  { opacity: 1; transform: rotate(0.5deg) scale(1.02); }
  100% { opacity: 1; transform: rotate(-0.8deg) scale(1); }
}
/* VERIFIED stamp overlay */
.lightbox::before {
  content: "VERIFIED";
  position: absolute;
  top: calc(50% - 25vh + 20px);
  right: 8%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 4px;
  color: var(--red);
  border: 3px solid var(--red);
  padding: 6px 14px;
  border-radius: 4px;
  transform: rotate(-12deg);
  opacity: 0.85;
  pointer-events: none;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  box-shadow: inset 0 0 0 1px rgba(215,20,61,0.3);
  z-index: 101;
  animation: stampThud 0.4s cubic-bezier(0.2, 1.3, 0.3, 1) 0.4s both;
}
@keyframes stampThud {
  0%   { opacity: 0; transform: rotate(-12deg) scale(2); }
  100% { opacity: 0.85; transform: rotate(-12deg) scale(1); }
}
.lightbox[hidden]::before { display: none; }

.lightbox-caption {
  background: rgba(5,32,73,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
  border: 1px solid rgba(245,230,211,0.18);
  margin-top: 20px !important;
}

/* Luggage-tag prev/next arrows */
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 66px;
  background: linear-gradient(145deg, #FFF8E8 0%, var(--sand) 60%, #E8D4B8 100%);
  color: var(--navy-deep);
  border: 2px solid var(--navy-deep);
  border-radius: 10px;
  cursor: pointer;
  font-size: 24px;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0;
  z-index: 102;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Luggage-tag grommet hole at top */
.lightbox-nav::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--navy-deep);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
/* String/twine */
.lightbox-nav::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 14px;
  background: var(--sunset-orange);
  border-radius: 2px;
}
.lightbox-prev { left: max(14px, env(safe-area-inset-left)); transform: translateY(-50%) rotate(-3deg); }
.lightbox-next { right: max(14px, env(safe-area-inset-right)); transform: translateY(-50%) rotate(3deg); }
.lightbox-prev:hover { transform: translateY(-52%) rotate(-1deg); box-shadow: 0 14px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.7); }
.lightbox-next:hover { transform: translateY(-52%) rotate(1deg); box-shadow: 0 14px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.7); }
.lightbox-prev:active, .lightbox-next:active { transform: translateY(-48%) scale(0.95); }

/* ─── Leaderboard — departure board with metallic ranks ─── */
.leaderboard {
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 55px, rgba(255,255,255,0.015) 55px, rgba(255,255,255,0.015) 110px);
  border-radius: 10px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.lb-row {
  font-variant-numeric: tabular-nums;
}
.lb-row:nth-child(even):not(.is-me) {
  background: rgba(255,255,255,0.02);
}
.lb-row.is-me {
  background: linear-gradient(90deg, rgba(215,20,61,0.18), rgba(215,20,61,0.04)) !important;
  border-left: 4px solid var(--red) !important;
  position: relative;
}
/* Pennant notch on is-me */
.lb-row.is-me::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid var(--red);
  margin-left: -10px;
}

/* Rank 1/2/3 — inline metallic chip treatment */
.lb-row:nth-child(1) .lb-rank,
.lb-row:nth-child(2) .lb-rank,
.lb-row:nth-child(3) .lb-rank {
  font-family: 'Bebas Neue', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: 50%;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--navy-deep) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  font-size: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 2px rgba(0,0,0,0.2),
    0 3px 10px rgba(0,0,0,0.3);
  position: relative;
}
.lb-row:nth-child(1) .lb-rank {
  background:
    linear-gradient(135deg, #FFF0B3 0%, #FFD56B 30%, #FFB547 55%, #A06A10 80%, #FFDE8F 100%) !important;
  animation: rankShine 3s ease-in-out infinite;
}
.lb-row:nth-child(2) .lb-rank {
  background:
    linear-gradient(135deg, #FFFFFF 0%, #DADCE4 35%, #A8AEC2 65%, #E5E7EE 100%) !important;
}
.lb-row:nth-child(3) .lb-rank {
  background:
    linear-gradient(135deg, #F4AB8E 0%, #D87852 35%, #A04A28 65%, #E5946E 100%) !important;
}
@keyframes rankShine {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.1) saturate(1.15); }
}

/* ─── Checklist — per-category progress bar ─── */
.checklist-summary {
  position: relative;
}
.card-checklist .checklist-section > summary {
  padding-bottom: 0;
}
.cs-bar {
  display: block;
  height: 3px;
  margin: 0;
  background: rgba(255,255,255,0.06);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  position: relative;
}
.cs-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--aqua), var(--sunshine) 70%, var(--sunset-orange));
  box-shadow: 0 0 8px rgba(246,208,3,0.35);
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: csBarGrow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: left center;
}
@keyframes csBarGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.card-checklist .checklist-section[open] .cs-bar {
  border-radius: 0;
}

/* ─── Gallery more-photos badge (grouped by target) ─── */
.gallery-more-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--red);
  color: var(--white);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(215,20,61,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
  z-index: 2;
  pointer-events: none;
}

/* ─── Remaining targets drawer (play page) ─── */
.remaining-card { padding: 0 !important; margin-top: 14px; }
.remaining-drawer summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--sunshine);
  user-select: none;
}
.remaining-drawer summary::-webkit-details-marker { display: none; }
.remaining-summary-left { flex: 1; }
.remaining-summary-count {
  background: var(--red);
  color: var(--white);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(215,20,61,0.3);
}
.remaining-summary-chev {
  transition: transform 0.2s;
  color: var(--sunshine);
}
.remaining-drawer[open] .remaining-summary-chev { transform: rotate(90deg); }
.remaining-drawer[open] summary {
  border-bottom: 1px dashed rgba(246,208,3,0.3);
  background: linear-gradient(135deg, var(--navy-2), var(--navy-3));
}

.remaining-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.remaining-row { margin: 0; }
.remaining-form { margin: 0; }
.remaining-btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0;
  color: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.remaining-btn:hover,
.remaining-btn:active {
  background: rgba(255,255,255,0.06);
  border-color: var(--sunshine);
  transform: translateX(2px);
}
.remaining-btn-current {
  background: linear-gradient(90deg, rgba(246,208,3,0.15), rgba(246,208,3,0.04)) !important;
  border: 1px solid rgba(246,208,3,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 14px rgba(246,208,3,0.15);
  cursor: default;
}
.remaining-current-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--sunshine);
  background: rgba(246,208,3,0.15);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.remaining-cat-chip {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--navy);
  border: 1px solid var(--line);
  white-space: nowrap;
  align-self: center;
}
.remaining-row.cat-common    .remaining-cat-chip { color: var(--aqua); border-color: rgba(3,204,212,0.45); }
.remaining-row.cat-uncommon  .remaining-cat-chip { color: var(--sunset-orange); border-color: rgba(235,136,44,0.45); }
.remaining-row.cat-hidden    .remaining-cat-chip { color: #C195FF; border-color: rgba(176,107,255,0.45); }
.remaining-row.cat-mega      .remaining-cat-chip { color: #FF6B87; border-color: rgba(215,20,61,0.5); }
.remaining-row.cat-theme     .remaining-cat-chip { color: var(--sunshine); border-color: rgba(246,208,3,0.45); }
.remaining-row.cat-port      .remaining-cat-chip { color: var(--sunset-orange); border-color: rgba(235,136,44,0.45); }
.remaining-name {
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  font-size: 14px;
}
.remaining-meta {
  grid-column: 2 / span 2;
  grid-row: 2;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
}
.remaining-pts {
  margin-left: auto;
  color: var(--sunshine);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
}

/* Reduced motion honor */
@media (prefers-reduced-motion: reduce) {
  .medal-chip::after,
  .medal-chip-diamond::after,
  .medal-progress-bar,
  main > section,
  main > .medal-progress,
  .flash p {
    animation: none !important;
    transition: none !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   TIER COMPLETE — celebration takeover (Platinum + Diamond only)
   ────────────────────────────────────────────────────────────────────── */

.tier-celebrate {
  position: relative;
  min-height: 100dvh;
  padding: 28px 20px 60px;
  text-align: center;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(246,208,3,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(3,204,212,.15) 0%, transparent 55%),
    linear-gradient(180deg, #052049 0%, #021535 100%);
  overflow: hidden;
}

.tier-celebrate-diamond {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(3,204,212,.28) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(246,208,3,.12) 0%, transparent 55%),
    linear-gradient(180deg, #052049 0%, #021535 100%);
}

.tier-celebrate-inner {
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Medal drop + spring */
.tier-medal-drop {
  position: relative;
  margin: 20px auto 12px;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tier-medal-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,208,3,.45) 0%, rgba(246,208,3,0) 65%);
  filter: blur(4px);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .6s ease, transform .6s ease;
}
.tier-celebrate-diamond .tier-medal-glow {
  background: radial-gradient(circle, rgba(3,204,212,.55) 0%, rgba(3,204,212,0) 65%);
}
.tier-medal-emoji {
  font-size: 140px;
  line-height: 1;
  transform: translateY(-140%) rotate(-18deg) scale(0.4);
  opacity: 0;
  transition: transform .9s cubic-bezier(.18,1.4,.4,1), opacity .35s ease;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.5));
}
.tier-celebrate.is-revealed .tier-medal-glow {
  opacity: 1;
  transform: scale(1.15);
  animation: tier-glow-pulse 2.2s ease-in-out 1s infinite;
}
.tier-celebrate.is-revealed .tier-medal-emoji {
  transform: translateY(0) rotate(0) scale(1);
  opacity: 1;
}
@keyframes tier-glow-pulse {
  0%, 100% { transform: scale(1.1); opacity: .9; }
  50%      { transform: scale(1.25); opacity: 1;  }
}

/* Headline */
.tier-headline { margin-bottom: 28px; }
.tier-eyebrow {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 6px;
  color: #F6D003;
  opacity: 0;
  animation: tier-rise .6s ease .55s forwards;
}
.tier-celebrate-diamond .tier-eyebrow { color: #03CCD4; }
.tier-title {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: clamp(56px, 14vw, 96px);
  line-height: .95;
  letter-spacing: -2px;
  color: #F6D003;
  margin: 8px 0 6px;
  opacity: 0;
  transform: translateY(18px);
  animation: tier-rise .7s cubic-bezier(.2,.9,.3,1) .7s forwards;
  text-shadow: 0 4px 0 #D7143D, 0 14px 30px rgba(0,0,0,.6);
}
.tier-celebrate-diamond .tier-title {
  color: #03CCD4;
  text-shadow: 0 4px 0 #052049, 0 14px 30px rgba(3,204,212,.35);
}
.tier-medal-name {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-size: 22px;
  letter-spacing: 4px;
  color: #F5E6D3;
  opacity: 0;
  animation: tier-rise .6s ease .9s forwards;
}

/* Stats row */
.tier-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px auto 18px;
  opacity: 0;
  animation: tier-rise .6s ease 1.1s forwards;
}
.tier-stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(246,208,3,.18);
  border-radius: 14px;
  max-width: 140px;
}
.tier-celebrate-diamond .tier-stat { border-color: rgba(3,204,212,.3); }
.tier-stat b {
  display: block;
  font-family: 'Archivo Black', sans-serif;
  font-size: 30px;
  color: #F6D003;
  letter-spacing: -1px;
  white-space: nowrap;           /* keeps "1d 13h" on a single line */
  line-height: 1.1;
}
.tier-celebrate-diamond .tier-stat b { color: #03CCD4; }
@media (max-width: 400px) {
  .tier-stat b { font-size: 26px; }
}
.tier-stat span {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(245,230,211,.75);
  text-transform: uppercase;
}

.tier-ship {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: rgba(245,230,211,.7);
  letter-spacing: 2px;
  margin-bottom: 28px;
  opacity: 0;
  animation: tier-rise .6s ease 1.3s forwards;
}

/* Primary share CTA */
.tier-actions {
  opacity: 0;
  animation: tier-rise .6s ease 1.5s forwards;
}
.btn-share {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 28px;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, #F6D003 0%, #E0BE03 100%);
  color: #052049;
  border: none;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(246,208,3,.35), 0 2px 0 #B89803;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-share:active { transform: translateY(2px); box-shadow: 0 4px 14px rgba(246,208,3,.35); }
.btn-share-icon { font-size: 28px; }
.btn-share-labels {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.btn-share-title { font-size: 17px; }
.btn-share-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(5,32,73,.7);
  font-weight: 400;
  margin-top: 2px;
}
.btn-share.copied { background: linear-gradient(180deg, #03CCD4 0%, #02A8B0 100%); color: #fff; }

/* Secondary tier actions */
.tier-secondary {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(245,230,211,.1);
  opacity: 0;
  animation: tier-rise .6s ease 1.8s forwards;
}
.tier-next-heading {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  color: #fff;
  margin-bottom: 6px;
}
.tier-next-sub {
  font-size: 14px;
  color: rgba(245,230,211,.75);
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.tier-diamond-form {
  max-width: 420px;
  margin: 0 auto;
}
.tier-reset-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(3,204,212,.08);
  border: 1px solid rgba(3,204,212,.2);
  border-radius: 10px;
  text-align: left;
  font-size: 13px;
  color: rgba(245,230,211,.85);
  margin-bottom: 12px;
  cursor: pointer;
}
.tier-reset-choice input { margin-top: 2px; flex-shrink: 0; }
.btn-diamond {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(180deg, #03CCD4 0%, #028E94 100%);
  color: #052049;
  border: none;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(3,204,212,.35);
}
.tier-dismiss-form {
  margin-top: 24px;
}
.btn-link-muted {
  background: transparent;
  border: none;
  color: rgba(245,230,211,.5);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px 16px;
}
.btn-link-muted:hover { color: rgba(245,230,211,.8); }

/* Confetti — 40 particles, 5 color variants */
.tier-celebrate-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.confetti {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 16px;
  opacity: 0;
  transform: translateY(-40px) rotate(0);
  animation: confetti-fall 3.2s ease-out .3s forwards;
}
.confetti-0 { left: 5%;  background: #F6D003; animation-delay: .2s; animation-duration: 3.8s; }
.confetti-1 { left: 20%; background: #D7143D; animation-delay: .5s; animation-duration: 3.2s; }
.confetti-2 { left: 35%; background: #03CCD4; animation-delay: .3s; animation-duration: 4.2s; }
.confetti-3 { left: 50%; background: #F5E6D3; animation-delay: .7s; animation-duration: 3.6s; }
.confetti-4 { left: 65%; background: #F6D003; animation-delay: .4s; animation-duration: 3.4s; }
.confetti:nth-of-type(5n+1) { width: 12px; height: 12px; border-radius: 50%; }
.confetti:nth-of-type(7n+2) { width: 8px;  height: 14px; transform-origin: center; }
.confetti:nth-of-type(3n)   { left: calc(5% + (var(--c-offset,0) * 1%)); }
.confetti:nth-child(6)  { left: 80%; animation-delay: .6s;  animation-duration: 3.1s; }
.confetti:nth-child(7)  { left: 12%; animation-delay: 1.1s; animation-duration: 3.7s; }
.confetti:nth-child(8)  { left: 28%; animation-delay: .9s;  animation-duration: 3.3s; }
.confetti:nth-child(9)  { left: 42%; animation-delay: 1.3s; animation-duration: 3.9s; }
.confetti:nth-child(10) { left: 58%; animation-delay: .8s;  animation-duration: 3.5s; }
.confetti:nth-child(11) { left: 72%; animation-delay: 1.5s; animation-duration: 3.2s; }
.confetti:nth-child(12) { left: 88%; animation-delay: 1.0s; animation-duration: 3.8s; }
.confetti:nth-child(13) { left: 18%; animation-delay: 1.7s; animation-duration: 3.4s; }
.confetti:nth-child(14) { left: 33%; animation-delay: 2.0s; animation-duration: 3.6s; }
.confetti:nth-child(15) { left: 48%; animation-delay: 1.8s; animation-duration: 3.0s; }
.confetti:nth-child(16) { left: 62%; animation-delay: 2.2s; animation-duration: 3.4s; }
.confetti:nth-child(17) { left: 77%; animation-delay: 1.9s; animation-duration: 3.7s; }
.confetti:nth-child(18) { left: 92%; animation-delay: 2.4s; animation-duration: 3.3s; }
.confetti:nth-child(19) { left: 8%;  animation-delay: 2.6s; animation-duration: 3.1s; }
.confetti:nth-child(20) { left: 25%; animation-delay: 2.3s; animation-duration: 3.5s; }
@keyframes confetti-fall {
  0%   { transform: translateY(-40px) rotate(0) scale(0.6);  opacity: 0; }
  10%  { opacity: 1; transform: translateY(60px) rotate(60deg) scale(1); }
  100% { transform: translateY(110vh) rotate(540deg) scale(1); opacity: 0.6; }
}

@keyframes tier-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tier-medal-emoji,
  .tier-medal-glow,
  .tier-eyebrow, .tier-title, .tier-medal-name,
  .tier-stats, .tier-ship, .tier-actions, .tier-secondary,
  .confetti {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tier-celebrate-confetti { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   PHOTO SOURCE PICKER — two explicit buttons so iOS users get the
   library option too (capture=environment alone won't give it to them)
   ────────────────────────────────────────────────────────────────────── */
.file-drop-btns {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.file-drop-btn {
  flex: 1 1 140px;
  min-height: 52px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 15px;
  letter-spacing: .3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.file-drop-btn-primary {
  background: linear-gradient(180deg, #F6D003 0%, #E0BE03 100%);
  color: #052049;
  box-shadow: 0 6px 18px rgba(246,208,3,.3), 0 2px 0 #B89803;
}
.file-drop-btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 8px rgba(246,208,3,.3), 0 0 0 #B89803;
}
.file-drop-btn-ghost {
  background: rgba(255,255,255,.08);
  color: #F5E6D3;
  border: 1px solid rgba(245,230,211,.22);
}
.file-drop-btn-ghost:active {
  background: rgba(255,255,255,.14);
}

/* Once a preview is showing, the inline buttons are hidden — tapping the
   preview or the "Tap to replace" hint opens the library picker. */
.file-drop.has-preview .file-drop-btns { display: none; }

/* File inputs live INSIDE their labels — no display:none or clip-path, iOS
   refuses to open the picker for those. Just push them off-screen with
   0 size. Tapping the label naturally triggers the contained input. */
.file-drop .photo-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Labels ARE the buttons now — native label→input via wrapping, no JS. */
label.file-drop-btn {
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

/* Make sure the hidden attribute actually hides the replace-hint label.
   (display:block in the base rule was overriding the html `hidden` attr.) */
label.file-drop-replace {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,.08);
  position: relative;
}
label.file-drop-replace[hidden] {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────
   BOTTOM-FIXED STATS BAR — experimental layout, toggled via ?bottomstats=1
   Mobile-first: tier + progress + pts pinned to bottom so the target card
   becomes the hero above the fold. Opt-in only; default layout unchanged.
   ────────────────────────────────────────────────────────────────────── */

/* Reserve room at the bottom of main content ONLY on pages that actually
   render the fixed stats bar. :has() scopes the padding to /play so other
   pages (landing, gallery, hall of fame, etc.) don't get ~120px of empty
   purple hanging at the bottom. */
body main:has(.play-bottom-stats) {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

/* Alerts live at the very bottom of the page flow, right above the fixed
   stats bar. Tight spacing — no huge gap. */
.alerts-stack-bottom {
  margin-top: 18px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.play-bottom-stats {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(5,32,73,.82) 0%, rgba(2,15,36,.96) 100%);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid rgba(245,230,211,.12);
  box-shadow: 0 -6px 28px rgba(0,0,0,.45);
}
.pbs-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
}
.pbs-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: .5px;
  color: #F5E6D3;
}
.pbs-emoji { font-size: 18px; line-height: 1; }
.pbs-label { text-transform: uppercase; }
.pbs-progress-wrap {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  min-width: 50px;
}
.pbs-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #F6D003 0%, #D7143D 100%);
  border-radius: 999px;
  transition: width .4s ease;
}
.play-bottom-stats-diamond .pbs-progress-bar {
  background: linear-gradient(90deg, #03CCD4 0%, #F6D003 100%);
}
.pbs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  min-width: 44px;
}
.pbs-stat b {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 15px;
  color: #F6D003;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.play-bottom-stats-diamond .pbs-stat b { color: #03CCD4; }
.pbs-stat span {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(245,230,211,.75);
  text-transform: uppercase;
  margin-top: 2px;
}
.pbs-revert {
  display: block;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(245,230,211,.4);
  text-decoration: none;
  margin-top: 6px;
  padding: 2px;
}
.pbs-revert:hover { color: rgba(245,230,211,.7); }

/* ──────────────────────────────────────────────────────────────────────
   KID-FRIENDLY POLISH — bumps tap targets, chunkifies interactive
   elements, and nudges copy density down. Load-order wins — overrides
   earlier declarations without hunting through 3000+ lines.
   ────────────────────────────────────────────────────────────────────── */

/* #1 Bigger chunkier EVERYTHING — tap targets at 64px+ for small thumbs */
.btn-primary,
.btn-ghost,
form .btn-primary,
form .btn-ghost,
.action-row .btn-primary,
.action-row .btn-ghost {
  min-height: 64px;
  padding: 18px 28px;
  font-size: 18px;
  border-radius: 999px;
}
.btn-primary {
  box-shadow: 0 6px 20px rgba(246,208,3,.35), 0 3px 0 #B89803;
  border: 3px solid rgba(255,255,255,.15);
}
.target-name { font-size: 34px; line-height: 1.1; }
.target-hint { font-size: 17px; line-height: 1.5; }
.target-loc  { font-size: 15px; }
.file-drop-emoji { font-size: 56px !important; }
.file-drop-title { font-size: 20px !important; font-weight: 800; }
.file-drop-sub { font-size: 13px; letter-spacing: 2px; opacity: .55; }

/* Chunkier bottom stats bar — bigger progress stripe, bigger numbers */
.pbs-progress-wrap { height: 12px; border-radius: 999px; }
.pbs-stat b { font-size: 18px; }
.pbs-label { font-size: 15px; }
.pbs-emoji { font-size: 22px; }

/* Hero Submit — make it unmissable */
.action-row .btn-primary {
  min-height: 72px;
  font-size: 20px;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(246,208,3,.45), 0 4px 0 #B89803;
}
.action-row .btn-primary::before {
  content: '📸';
  font-size: 22px;
  margin-right: 10px;
}

/* #4 Progress that FEELS like progress — bigger + animated fill */
.medal-progress { height: 18px; border-radius: 999px; }
.medal-progress-bar {
  transition: width .7s cubic-bezier(.4,1.6,.6,1);
  box-shadow: 0 0 18px rgba(246,208,3,.55) inset;
}
.pbs-progress-bar {
  transition: width .7s cubic-bezier(.4,1.6,.6,1);
}

/* #7 Mascot — Captain Splash gets a dedicated hover/react slot */
.mascot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  color: #052049;
  letter-spacing: .5px;
  box-shadow: 0 4px 14px rgba(255,165,0,.35);
}
.mascot-chip-emoji { font-size: 20px; }

/* Bigger tier chips + cards for selection — less visual busyness */
.tier-opt { padding: 18px 16px; }
.tier-opt-label { font-size: 17px !important; }

/* Randomized callout toast — celebration mini burst on verified finds */
.celebrate-callout {
  font-family: 'Archivo Black', sans-serif;
  font-size: 42px;
  color: #F6D003;
  text-shadow: 0 4px 0 #D7143D, 0 14px 24px rgba(0,0,0,.4);
  text-align: center;
  margin: 8px 0;
  animation: callout-pop .55s cubic-bezier(.18,1.4,.4,1);
}
@keyframes callout-pop {
  from { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* Every-find confetti — smaller, shorter, cheerful. Auto-plays on /found
   page paint since .found-celebrate is the container. */
.found-celebrate { position: relative; overflow: hidden; }
.found-celebrate .tier-celebrate-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.found-celebrate .tier-celebrate-confetti .confetti {
  animation-duration: 2.4s !important;
  animation-delay: 0s !important;
}
.found-celebrate > * { position: relative; z-index: 1; }

/* Mascot cheer line — tiny wiggle so Captain Splash feels alive */
.mascot-cheer {
  display: inline-block;
  animation: mascot-wiggle 1.8s ease-in-out infinite;
  text-align: center;
  width: 100%;
}
@keyframes mascot-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* Diamond mode lockdown card — replaces the remaining-drawer to reinforce
   that Diamond is eyes-on-your-own-paper. */
.diamond-lockdown {
  background: linear-gradient(135deg, rgba(3,204,212,.10) 0%, rgba(5,32,73,.6) 100%);
  border: 1px solid rgba(3,204,212,.25);
}
.diamond-lockdown-header {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  color: #03CCD4;
  margin-bottom: 8px;
}
.diamond-lockdown-body {
  color: rgba(245,230,211,.85);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.diamond-lockdown-body b { color: #03CCD4; }

/* ──────────────────────────────────────────────────────────────────────
   Lightbox like button — third action alongside Back + Share.
   ────────────────────────────────────────────────────────────────────── */
.lightbox-like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-like .lb-heart {
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease;
}
.lightbox-like.liked {
  background: linear-gradient(135deg, #FF6B9D, #D7143D);
  border-color: rgba(255,255,255,.3);
}
.lightbox-like.liked .lb-heart { color: #fff; }
.lightbox-like.liked-pop .lb-heart { animation: heart-pop .35s cubic-bezier(.18,1.4,.4,1); }
@keyframes heart-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* Tighter lightbox caption — italic was getting chopped visually */
.lightbox-caption {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-style: normal !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.9);
  text-align: center;
  padding: 0 24px;
}

/* Tile hearts: visually clickable, but the whole tile opens the lightbox
   where the REAL like button lives. Give the badge a subtle pulse so
   users get that it's interactive even though it forwards to the lightbox. */
.like-badge {
  transition: transform .15s ease;
  cursor: pointer;
}
.like-badge:active { transform: scale(0.9); }

/* ──────────────────────────────────────────────────────────────────────
   Tier Badge SVG — Carnival-card look. Small rectangle card with funnel
   silhouette in tier color. Replaces emoji on large surfaces.
   ────────────────────────────────────────────────────────────────────── */
.tier-badge-svg {
  display: inline-block;
  height: 24px;
  width: auto;
  vertical-align: middle;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  margin-right: 2px;
}
.pbs-tier .tier-badge-svg { height: 26px; }
.tier-opt-label .tier-badge-svg { height: 30px; margin-right: 8px; }
/* White Diamond card needs a subtle outline so it doesn't disappear on navy */
.tier-badge-diamond,
.tier-badge-platinum {
  filter: drop-shadow(0 0 2px rgba(255,255,255,.2));
}

/* ──────────────────────────────────────────────────────────────────────
   Mascot strip — Captain Splash idle line above the target card on /play
   ────────────────────────────────────────────────────────────────────── */
.mascot-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 14px;
  background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,165,0,.08));
  border: 1px solid rgba(255,215,0,.22);
  border-radius: 14px;
  font-size: 14px;
  color: #F5E6D3;
  line-height: 1.4;
}
.mascot-strip-emoji {
  font-size: 28px;
  animation: mascot-bob 2.2s ease-in-out infinite;
}
.mascot-strip-text b {
  color: #F6D003;
  letter-spacing: .3px;
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}

/* Points floater — big "+N PTS" lifts off after a find */
.pts-floater {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 38px;
  color: #F6D003;
  text-shadow: 0 3px 0 #D7143D, 0 12px 22px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0;
  animation: pts-rise 1.8s cubic-bezier(.2,.9,.3,1) .25s forwards;
  z-index: 5;
}
@keyframes pts-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.6); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.1); }
  55%  { opacity: 1; transform: translateX(-50%) translateY(-40px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-110px) scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .pts-floater { animation: none; opacity: 1; transform: translateX(-50%) translateY(-40px); }
  .mascot-strip-emoji { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Sail & Sign card — real-Carnival-style tier card. Replaces the
   boarding-pass stub. No recovery code exposed.
   ────────────────────────────────────────────────────────────────────── */
.sncard-wrap { padding: 0; background: transparent; border: none; box-shadow: none; }
.sncard {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1.585 / 1;      /* ISO/IEC 7810 ID-1 card proportions */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.08) inset;
  color: #FFFFFF;
  font-family: 'Inter', 'Archivo', system-ui, sans-serif;
}
.sncard-top-stripe {
  height: 10px;
  background: linear-gradient(90deg, #D7143D 0%, #D7143D 60%, #F6D003 100%);
}
.sncard-body {
  position: relative;
  padding: 18px 22px 22px;
  height: calc(100% - 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Tier-specific backgrounds — Carnival Sail & Sign colors */
.sncard-blue     { background: linear-gradient(135deg, #2E8BC0 0%, #1A5F86 100%); color: #FFFFFF; }
.sncard-red      { background: linear-gradient(135deg, #D7143D 0%, #8F0D29 100%); color: #FFFFFF; }
.sncard-gold     { background: linear-gradient(135deg, #E0BE03 0%, #9A7D00 100%); color: #052049; }
.sncard-platinum { background: linear-gradient(135deg, #E8E8E8 0%, #A8A8A8 100%); color: #052049; }
.sncard-diamond  { background: linear-gradient(135deg, #FFFFFF 0%, #CCEEF0 100%); color: #052049; }

/* Gold/Platinum/Diamond cards: dark text + deeper accents */
.sncard-gold .sncard-tagline,
.sncard-platinum .sncard-tagline,
.sncard-diamond .sncard-tagline { color: rgba(5,32,73,.65); }
.sncard-gold .sncard-label,
.sncard-platinum .sncard-label,
.sncard-diamond .sncard-label { color: rgba(5,32,73,.55); }
.sncard-gold .sncard-tier-chip,
.sncard-platinum .sncard-tier-chip,
.sncard-diamond .sncard-tier-chip { background: rgba(5,32,73,.92); color: #FFF; }

.sncard-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sncard-funnel { flex-shrink: 0; }
.sncard-brand { flex: 1; min-width: 0; }
.sncard-wordmark {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 20px;
  letter-spacing: 1.5px;
  line-height: 1;
}
.sncard-tagline {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  margin-top: 2px;
  opacity: 0.75;
}
.sncard-tier-chip {
  padding: 5px 10px;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.sncard-guest { margin-top: 2px; }
.sncard-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.7;
  text-transform: uppercase;
}
.sncard-guest-name {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 28px;
  letter-spacing: -0.5px;
  line-height: 1;
  margin-top: 3px;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
}

.sncard-row-pair {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  margin-bottom: 6px;
}
.sncard-col { min-width: 0; }
.sncard-col-right { text-align: right; }
.sncard-val {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.1;
  margin-top: 2px;
}

.sncard-wave {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40px;
  pointer-events: none;
  overflow: hidden;
}
.sncard-wave svg { width: 100%; height: 100%; }

.sncard-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2px;
  position: relative;
  z-index: 2;
}
.sncard-url {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  opacity: 0.85;
}

/* Recovery code — masked until tapped */
.recovery-reveal summary {
  cursor: pointer;
  padding: 10px 2px;
  list-style: none;
  user-select: none;
}
.recovery-reveal summary::-webkit-details-marker { display: none; }
.recovery-reveal[open] summary { color: #F6D003; }
.recovery-body {
  padding: 12px 14px;
  background: rgba(255,215,0,.08);
  border: 1px dashed rgba(255,215,0,.25);
  border-radius: 10px;
  margin-top: 8px;
}
.recovery-code {
  display: block;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 22px;
  letter-spacing: 4px;
  color: #F6D003;
  text-align: center;
}

/* Sail & Sign footer variant when there's a pts line alongside the URL */
.sncard-pts {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.9;
}
.sncard-footer { justify-content: space-between; }

/* ──────────────────────────────────────────────────────────────────────
   MEDAL CHIP v2 — premium metallic chips with distinct nautical icons
   per tier (⛵ 🚢 ⚓ 🎖 💎), unified shimmer animation, tighter type.
   Overrides the older medal-chip rules (load-order wins).
   ────────────────────────────────────────────────────────────────────── */
.medals-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-items: stretch;
}
/* Odd-total → last chip (usually Diamond) centers across both cols */
.medals-row .medal-chip:nth-last-child(1):nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 55%;
  max-width: 70%;
}
.medal-chip {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px !important;
  border-radius: 999px !important;
  font-family: 'Archivo Black', 'Inter', sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .4px !important;
  line-height: 1 !important;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.medal-chip:active { transform: scale(0.97); }
.medal-chip .medal-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;    /* full fit preferred; tightened font above handles most cases */
  min-width: 0;
}
/* Very narrow phones (iPhone SE etc.) — stack single column so long medal
   names like PLATINUM ADMIRAL never clip */
@media (max-width: 380px) {
  .medals-row { grid-template-columns: 1fr; }
  .medals-row .medal-chip:nth-last-child(1):nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    min-width: 0;
    max-width: none;
  }
  .medal-chip { font-size: 12px !important; letter-spacing: 1px !important; }
}
.medal-icon {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3));
}
.medal-name {
  white-space: nowrap;
}
/* Unified shimmer sweep across all tiers */
.medal-chip::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -60% !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%
  ) !important;
  transform: skewX(-20deg) !important;
  animation: medalChipShimmer 4.5s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes medalChipShimmer {
  0%, 72%, 100% { left: -60%; }
  78%, 100%     { left: 120%; }
}

/* Diamond gets a slightly offset shimmer so all 5 don't sweep in sync */
.medal-chip-diamond::after { animation-delay: 1.2s !important; }
.medal-chip-platinum::after { animation-delay: 0.6s !important; }
.medal-chip-gold::after { animation-delay: 0.3s !important; }
.medal-chip-red::after { animation-delay: 0.9s !important; }

/* ──────────────────────────────────────────────────────────────────────
   Landing form v2 — "Start your voyage" block redesigned to match the
   Sail & Sign card aesthetic. Tighter type, better spacing, clear hierarchy.
   Overrides earlier .input-lg / .join-form rules by load-order.
   ────────────────────────────────────────────────────────────────────── */

/* Section title — bigger, Archivo Black, consistent with app */
section.card > h2 {
  font-family: 'Archivo Black', 'Inter', sans-serif !important;
  font-size: 26px !important;
  letter-spacing: -0.5px !important;
  color: #FFFFFF !important;
  margin: 0 0 4px !important;
  text-shadow: 0 2px 0 rgba(215,20,61,.35);
}

/* Form label — monospace sub-label like the Sail & Sign card */
.form-label > span {
  font-family: 'DM Mono', 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: rgba(246,208,3,.85) !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-weight: 400 !important;
}

/* Inputs — bigger, rounder, glassy, matches the app */
.input-lg,
select.input-lg,
input[type="date"].input-lg {
  background: rgba(5,32,73,.55) !important;
  border: 1.5px solid rgba(246,208,3,.25) !important;
  border-radius: 14px !important;
  color: #FFFFFF !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  padding: 16px 18px !important;
  min-height: 58px !important;
  letter-spacing: 0.1px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input-lg::placeholder { color: rgba(245,230,211,.4); font-weight: 400; }

/* Ship dropdown — native <select> text goes transparent; an overlay
   div (.ship-select-display) paints the selected value with the
   Carnival red/white/blue flag stripes via background-clip: text. */
.ship-select-wrap {
  position: relative;
}
select.input-lg.ship-select {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  font-family: 'Archivo Black', 'Inter', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}
/* wrap owns the blue field + yellow border so the overlay sits cleanly on top */
.ship-select-wrap {
  position: relative;
  background: rgba(5,32,73,.55);
  border: 1.5px solid rgba(246,208,3,.25);
  border-radius: 14px;
  min-height: 58px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ship-select-wrap:focus-within {
  border-color: rgba(246,208,3,.75);
  background: rgba(5,32,73,.75);
  box-shadow: 0 0 0 4px rgba(246,208,3,.18), 0 6px 18px rgba(246,208,3,.15);
}
select.input-lg.ship-select option {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  background: #052049;
  font-weight: 700;
}
.ship-select-display {
  position: absolute;
  inset: 0;
  z-index: 2;   /* must sit above the native <select> so colors aren't washed */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 38px 16px 18px;  /* leave room for native caret */
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 0.4px;
  pointer-events: none;  /* taps pass through to the select */
  white-space: nowrap;
  overflow: hidden;
  text-transform: uppercase;
}
.ship-select-display .ship-brand {
  color: #FF7080;                               /* was #F04159 — WCAG 4.5:1 on navy */
  text-shadow: 0 0 12px rgba(240,65,89,.45);
}
.ship-select-display .ship-name {
  color: #FFFFFF;
  border-bottom: 2.5px solid #2E8BC0;
  padding-bottom: 1px;
  text-shadow: 0 2px 6px rgba(46,139,192,.35);
}
.input-lg:focus,
select.input-lg:focus,
input[type="date"].input-lg:focus {
  outline: none !important;
  border-color: rgba(246,208,3,.75) !important;
  background: rgba(5,32,73,.75) !important;
  box-shadow: 0 0 0 4px rgba(246,208,3,.18), 0 6px 18px rgba(246,208,3,.15) !important;
}

/* Gap between form rows — a little more breathing room */
.join-form { gap: 16px !important; margin-top: 14px !important; }

/* Prefill chip — tighter, tier-card style */
.prefill-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(3,204,212,.12) 0%, rgba(5,32,73,.5) 100%);
  border: 1px solid rgba(3,204,212,.3);
  border-radius: 14px;
  margin: 12px 0 14px;
}
.prefill-ship {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #FFFFFF;
  text-transform: uppercase;
}
.prefill-ship .ship-brand {
  color: #FF7080;                               /* was #F04159 — WCAG contrast fix */
  text-shadow: 0 0 10px rgba(240,65,89,.45);
  margin-right: 5px;
}
.prefill-ship .ship-name {
  color: #FFFFFF;
  border-bottom: 2px solid #2E8BC0;
  padding-bottom: 1px;
  text-shadow: 0 2px 6px rgba(46,139,192,.35);
}
.prefill-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(245,230,211,.7);
  text-transform: uppercase;
  margin-top: 2px;
}
.prefill-change {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #F6D003;
  text-decoration: none;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid rgba(246,208,3,.3);
  border-radius: 999px;
}
.prefill-change:hover { background: rgba(246,208,3,.1); }

/* "OR" divider — cleaner line with tight type */
.signin-divider {
  margin: 18px 0 10px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: rgba(245,230,211,.78) !important;   /* was .55 — hit 4.5:1 on navy */
}
.signin-divider::before,
.signin-divider::after {
  background: rgba(245,230,211,.18) !important;
  height: 1px !important;
}

/* Consent notice — tighter, less billboard */
.consent-notice {
  font-size: 12px !important;
  color: rgba(245,230,211,.65) !important;
  line-height: 1.55 !important;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 10px !important;
  text-align: left !important;
}
.consent-notice a { color: #F6D003 !important; text-decoration: underline; }

/* Tier-compare info details — less busy */
.tier-compare.tier-compare-info summary {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(246,208,3,.8);
  text-transform: uppercase;
  padding: 10px 0;
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────────────
   🦆 Duck Dash micro-game — overlay on the landing hero
   ────────────────────────────────────────────────────────────────────── */
.duck-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.duck-drop {
  position: absolute;
  top: 0;
  font-size: 28px;
  line-height: 1;
  will-change: transform;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
.duck-drop.caught {
  animation: duck-pop .32s cubic-bezier(.18,1.5,.5,1) forwards;
}
@keyframes duck-pop {
  0%   { transform: scale(1) rotate(0); opacity: 1; }
  40%  { transform: scale(1.8) rotate(-15deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(30deg); opacity: 0; }
}

.duck-score {
  position: absolute;
  /* Docked above the horizon band, bottom-right — stays out of the
     CRUISEQUEST wordmark's way. Hidden by default (see -hidden class);
     slides in the first time a duck is caught. */
  bottom: 52px;
  right: 12px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 12px;
  background: rgba(5,32,73,.65);
  border: 1px solid rgba(246,208,3,.3);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Archivo Black', 'Inter', sans-serif;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.duck-score-hidden {
  opacity: 0;
  transform: translateY(10px) scale(.85);
  pointer-events: none;
}
.duck-score-reveal {
  animation: duck-score-in .5s cubic-bezier(.18,1.4,.4,1);
}
@keyframes duck-score-in {
  0%   { opacity: 0; transform: translateY(14px) scale(.6); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.duck-score-now {
  font-size: 16px;
  color: #F6D003;
  line-height: 1;
  letter-spacing: -0.5px;
}
.duck-score-now b { font-weight: 900; }
.duck-score-best {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(245,230,211,.7);
  margin-top: 4px;
}
.duck-score-best span {
  color: #03CCD4;
  font-weight: 700;
  margin-left: 4px;
}

/* Milestone toast — slides in from the TOP, not dead-center.
   Center placement felt like a "GAME OVER / RESET" screen on every catch. */
.duck-toast {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(-40px) scale(.7);
  z-index: 6;
  padding: 10px 18px;
  background: linear-gradient(135deg, #F6D003, #E0BE03);
  color: #052049;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  box-shadow: 0 8px 22px rgba(246,208,3,.55), 0 2px 0 #B89803;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.duck-toast.show {
  animation: duck-toast-pop 1.8s cubic-bezier(.18,1.4,.4,1) forwards;
}
@keyframes duck-toast-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(.7); }
  18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.05); }
  28%  { transform: translateX(-50%) translateY(0) scale(1); }
  78%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.95); }
}

/* "+1" floater that rises from where the duck was caught — gives EVERY
   catch tactile feedback (not just the 5-catch milestones) */
.duck-plus {
  position: absolute;
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: #F6D003;
  text-shadow: 0 2px 0 #D7143D, 0 6px 10px rgba(0,0,0,.4);
  pointer-events: none;
  animation: plus-rise .9s cubic-bezier(.2,.9,.3,1) forwards;
  letter-spacing: -0.5px;
  z-index: 4;
}
@keyframes plus-rise {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  15%  { opacity: 1; transform: translateY(-8px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}

/* Score chip bump on catch so the number-tick FEELS like it mattered */
.duck-score.bump {
  animation: duck-chip-bump .28s cubic-bezier(.18,1.4,.4,1);
}
@keyframes duck-chip-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .duck-drop { display: none; }
  .duck-score { display: none; }
  .duck-toast { display: none; }
  .duck-plus { display: none; }
}

/* ─── Duck Dash game-over + milestone share overlay ───────────────── */
.duck-over {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: radial-gradient(ellipse at center, rgba(5,32,73,0.72) 0%, rgba(5,32,73,0.92) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: duck-over-fade .24s ease-out;
}
.duck-over.show { display: flex; }
@keyframes duck-over-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.duck-over-card {
  width: 100%;
  max-width: 320px;
  padding: 22px 20px 20px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(180deg, #0D2F5F 0%, #052049 100%);
  border: 2px solid rgba(246,208,3,0.35);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
  animation: duck-over-pop .48s cubic-bezier(.18,1.4,.4,1);
}
@keyframes duck-over-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(.86); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.duck-over-emoji {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 10px rgba(246,208,3,0.45));
}
.duck-over-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px;
  color: #F6D003;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 0 #B89803, 0 6px 14px rgba(246,208,3,0.4);
  margin-bottom: 4px;
}
.duck-over-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 14px;
  line-height: 1.35;
}
.duck-over-scorewrap {
  margin-bottom: 16px;
}
.duck-over-score {
  font-family: 'Archivo Black', sans-serif;
  font-size: 52px;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 3px 0 #D7143D, 0 8px 20px rgba(215,20,61,0.4);
  letter-spacing: 2px;
}
.duck-over-best {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.duck-over-best span {
  color: #03CCD4;
  font-weight: 800;
}
.duck-over-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.duck-over-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.duck-over-btn:active { transform: scale(0.97); }
.duck-over-btn-primary {
  background: linear-gradient(135deg, #F6D003, #E0BE03);
  color: #052049;
  box-shadow: 0 3px 0 #B89803, 0 8px 18px rgba(246,208,3,0.4);
}
.duck-over-btn-primary:hover { filter: brightness(1.06); }
.duck-over-btn-share {
  background: rgba(3,204,212,0.14);
  color: #03CCD4;
  border: 1.5px solid rgba(3,204,212,0.55);
}
.duck-over-btn-share:hover {
  background: rgba(3,204,212,0.22);
}

@media (prefers-reduced-motion: reduce) {
  .duck-over { animation: none; }
  .duck-over-card { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────
   Landscape lock — portrait-only UI. Shown when the phone rotates
   sideways so the layout doesn't break + tilt game doesn't run hidden.
   (Actual orientation LOCK only works in installed PWAs via manifest —
   this is the browser fallback.)
   ────────────────────────────────────────────────────────────────────── */
.rotate-lock {
  display: none;
}
@media (orientation: landscape) and (max-height: 480px) {
  .rotate-lock {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #052049 0%, #021535 100%);
    color: #F5E6D3;
    text-align: center;
    padding: 20px;
  }
  /* When landscape overlay shows, hide everything else so the tilt game
     doesn't keep running + layout doesn't get cropped weird */
  body > *:not(.rotate-lock) {
    visibility: hidden;
  }
  body { overflow: hidden; }
}
/* ─── Landscape Duck Dash arena — full-viewport surprise game ─── */
.ls-duck-arena {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #052049 0%, #0a2f66 55%, #0a3a78 100%);
  z-index: 1;
}
.ls-duck-arena::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 42px;
  background: linear-gradient(180deg, transparent, rgba(3,204,212,.2));
  pointer-events: none;
}
.ls-duck-ship {
  position: absolute;
  left: 50%; bottom: 4px;
  width: 72px; height: 60px;
  --ls-ship-tx: 0px;
  transform: translateX(calc(-50% + var(--ls-ship-tx)));
  will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 48'><g fill='%23F5E6D3'><path d='M24 0 L25 4 L27 4 L28 0 Z'/><path d='M31 0 L32 4 L34 4 L35 0 Z'/><path d='M23 4 L22 10 L36 10 L35 4 Z' fill='%23D7143D'/><rect x='22' y='9' width='14' height='1.4' fill='white'/><rect x='22' y='10.4' width='14' height='3.6' fill='%23052049'/><path d='M6 20 L8 14 L48 14 L50 20 L50 36 L6 36 Z' fill='white'/><path d='M2 28 L-2 36 L8 36 Z'/><path d='M54 28 L50 36 L58 36 Z'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  pointer-events: none;
}
.ls-duck-field {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.ls-duck-drop {
  position: absolute;
  top: -40px;
  width: 40px; height: 40px;
  font-size: 36px;
  line-height: 1;
  transition: transform 4200ms linear, opacity 240ms ease;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
  will-change: transform;
}
.ls-duck-drop.caught {
  opacity: 0;
  transform: scale(1.8) !important;
}
.ls-duck-score {
  position: absolute;
  top: 12px; right: 12px;
  padding: 8px 14px;
  background: rgba(5,32,73,0.7);
  border: 1.5px solid rgba(246,208,3,.45);
  border-radius: 999px;
  color: #F6D003;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.6px;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
}
.ls-duck-score-best {
  font-size: 10px;
  color: #03CCD4;
}
.ls-duck-plus {
  position: absolute;
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: #F6D003;
  text-shadow: 0 2px 0 #D7143D, 0 6px 10px rgba(0,0,0,.4);
  animation: plus-rise .9s cubic-bezier(.2,.9,.3,1) forwards;
  z-index: 3;
  pointer-events: none;
}
.ls-duck-toast {
  position: absolute;
  top: 60px; left: 50%;
  transform: translateX(-50%) translateY(-30px) scale(.7);
  z-index: 6;
  padding: 8px 18px;
  background: linear-gradient(135deg, #F6D003, #E0BE03);
  color: #052049;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.ls-duck-toast.show {
  animation: duck-toast-pop 1.8s cubic-bezier(.18,1.4,.4,1) forwards;
}
.ls-duck-over {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5,32,73,0.85);
  backdrop-filter: blur(6px);
}
.ls-duck-over.show { display: flex; }
.ls-duck-over-card {
  width: 340px; max-width: 90vw;
  padding: 20px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #0D2F5F 0%, #052049 100%);
  border: 2px solid rgba(246,208,3,0.35);
}
.ls-duck-over-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  color: #F6D003;
  text-shadow: 0 2px 0 #B89803;
}
.ls-duck-over-sub {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  margin: 4px 0 8px;
}
.ls-duck-over-score {
  font-family: 'Archivo Black', sans-serif;
  font-size: 44px;
  color: #FFFFFF;
  text-shadow: 0 3px 0 #D7143D;
  margin-bottom: 12px;
}
.ls-duck-over-btn {
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #F6D003, #E0BE03);
  color: #052049;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
}
.ls-duck-hint {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: rgba(245,230,211,.55);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.ls-duck-start {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  padding: 18px 36px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #F6D003, #E0BE03);
  color: #052049;
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  letter-spacing: 1.5px;
  box-shadow: 0 8px 24px rgba(246,208,3,.55), 0 3px 0 #B89803;
  cursor: pointer;
  animation: vo-pill-pulse 1.8s ease-in-out infinite;
}
.ls-duck-start.hidden { display: none; }
@keyframes rotate-wiggle {
  0%, 100% { transform: rotate(-20deg); }
  50%      { transform: rotate(20deg); }
}

/* ─── Audio pill (landing VO + /play tutorial + per-page tips) ─────
   Docks bottom-right just above the iOS tab bar so it NEVER collides
   with header text, ship clock, or any page content. Respects
   safe-area-inset-bottom so it sits above home-indicator too. */
.vo-pill {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  right: 12px;
  z-index: 20;
  padding: 10px 16px;
  background: linear-gradient(135deg, #F6D003, #E0BE03);
  color: #052049;
  border: none;
  border-radius: 999px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 14px rgba(246,208,3,.45), 0 2px 0 #B89803;
  cursor: pointer;
  animation: vo-pill-pulse 1.8s ease-in-out infinite;
  max-width: 70vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vo-pill.hidden { display: none; }
/* Per-page tip pills — quieter than the primary intro pills */
.vo-pill-tip {
  font-size: 11px;
  padding: 8px 14px;
  animation: none;
  background: linear-gradient(135deg, #E0BE03, #B89803);
  opacity: 0.92;
}
@keyframes vo-pill-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(246,208,3,.45), 0 2px 0 #B89803; }
  50%      { transform: scale(1.06); box-shadow: 0 6px 20px rgba(246,208,3,.65), 0 2px 0 #B89803; }
}

/* Hero title when using an image wordmark instead of styled text */
.hero-title-image {
  margin: 0 auto 14px;
  padding: 0 20px;
  max-width: 100%;
  text-align: center;
}
.hero-title-img,
.hero-title-vid {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  background: transparent;
}

/* ─── My Sailings multi-cruise list on /me ─── */
.sailings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.sailing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(5, 32, 73, 0.45);
  border: 1px solid rgba(246, 208, 3, 0.22);
  border-radius: 12px;
}
.sailing-row-current {
  background: rgba(246, 208, 3, 0.12);
  border-color: rgba(246, 208, 3, 0.55);
}
.sailing-row-meta {
  flex: 1;
  min-width: 0;
}
.sailing-row-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sailing-row-sub {
  font-size: 11px;
  margin-top: 2px;
}
.btn-ghost.btn-sm {
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* ─── Post-cruise voyage recap banner on /me ─── */
.voyage-recap {
  background: linear-gradient(180deg, rgba(5,32,73,.7) 0%, rgba(2,15,36,.8) 100%);
  border: 2px solid rgba(246, 208, 3, 0.45);
  box-shadow: 0 8px 28px rgba(246, 208, 3, 0.18);
}
.recap-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.recap-stat {
  text-align: center;
  padding: 12px 6px;
  background: rgba(246, 208, 3, 0.06);
  border: 1px solid rgba(246, 208, 3, 0.22);
  border-radius: 12px;
}
.recap-stat-val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 32px;
  color: #F6D003;
  line-height: 1;
}
.recap-stat-lbl {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(245,230,211,.7);
  margin-top: 6px;
}

/* Ship clock when voyage is over — muted, not counting up */
.ship-clock-over {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: rgba(245, 230, 211, 0.7);
  padding: 4px 12px;
  border: 1px solid rgba(245, 230, 211, 0.25);
  border-radius: 999px;
  background: rgba(5, 32, 73, 0.5);
}

/* ── Site footer ─────────────────────────────────────────────────────── */
.site-footer {
  margin: 12px auto 0;
  padding: 18px 20px calc(24px + env(safe-area-inset-bottom));
  max-width: 640px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  gap: 4px 16px;
  margin: 0 auto 14px;
  max-width: 320px;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 8px 6px;
  transition: color 0.15s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--sunshine);
  outline: none;
}
.footer-copy {
  margin: 0;
  opacity: 0.75;
  font-size: 12px;
}
.footer-social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 12px;
}
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.footer-social-btn:hover,
.footer-social-btn:focus-visible {
  color: var(--sunshine);
  border-color: var(--sunshine);
  background: rgba(246, 208, 3, 0.08);
  outline: none;
}

/* ── Cookie consent banner ──────────────────────────────────────────── */
.consent-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 1px solid rgba(246, 208, 3, 0.3);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  color: var(--sand);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  max-width: 640px;
  margin: 0 auto;
}
.consent-banner > span { flex: 1 1 220px; }
.consent-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}
.consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s ease, background 0.15s ease;
}
.consent-btn-ok {
  background: var(--sunshine);
  color: var(--navy);
}
.consent-btn-ok:hover,
.consent-btn-ok:focus-visible {
  background: #FFE033;
  transform: translateY(-1px);
  outline: none;
}
.consent-btn-privacy {
  background: transparent;
  border-color: rgba(245, 230, 211, 0.3);
  color: var(--sand);
}
.consent-btn-privacy:hover,
.consent-btn-privacy:focus-visible {
  border-color: var(--sunshine);
  color: var(--sunshine);
  outline: none;
}

/* ── Accessibility utilities ────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--sunshine);
  color: var(--navy);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* ── COPPA age confirm checkbox ─────────────────────────────────────── */
.age-gate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  font-size: 13px;
  color: var(--muted);
  font-family: 'Manrope', system-ui, sans-serif;
}
.age-gate input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sunshine);
  cursor: pointer;
}
.age-gate span { user-select: none; }

/* ── Keyboard focus indicators (WCAG 2.4.7 AA) ──────────────────────── */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-full:focus-visible,
button.consent-btn:focus-visible {
  outline: 3px solid var(--sunshine);
  outline-offset: 3px;
}
.input-lg:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(246, 208, 3, 0.5);
}
a:focus-visible {
  outline: 2px solid var(--sunshine);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── /join deep-link chips on landing ───────────────────────────────── */
.join-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 8px 0 18px;
  padding: 0 10px;
}
.join-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--navy-3), var(--navy-2));
  border: 1px solid rgba(246, 208, 3, 0.35);
  border-radius: 999px;
  color: var(--sand);
  text-decoration: none;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.join-chip:hover,
.join-chip:focus-visible {
  background: linear-gradient(180deg, var(--sunshine), #FFE033);
  color: var(--navy);
  border-color: var(--sunshine);
  transform: translateY(-1px);
  outline: none;
}
.join-chip-label { font-weight: 800; }

/* ── Live player count (social proof) ───────────────────────────────── */
.live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin: 0 auto 16px;
  background: rgba(3, 204, 212, 0.12);
  border: 1px solid rgba(3, 204, 212, 0.4);
  border-radius: 999px;
  color: var(--aqua);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.live-pulse::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--aqua);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--aqua);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .live-pulse::before { animation: none; }
}

/* ── How-to-play doc page ──────────────────────────────────────────── */
.doc.doc-wide {
  max-width: 720px;
  margin: 40px auto;
  padding: 32px 22px calc(32px + env(safe-area-inset-bottom));
  color: var(--sand);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}
.doc.doc-wide h1 {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.doc.doc-wide h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--sunshine);
  margin: 36px 0 12px;
}
.doc.doc-wide h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  color: var(--aqua);
  margin: 0 0 6px;
  letter-spacing: 0.03em;
}
.doc.doc-wide p,
.doc.doc-wide li {
  color: rgba(245, 230, 211, 0.88);
}
.doc.doc-wide a {
  color: var(--sunshine);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.doc.doc-wide code {
  background: rgba(246, 208, 3, 0.14);
  color: var(--sunshine);
  padding: 2px 7px;
  border-radius: 5px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 13px;
}
.doc.doc-wide ul, .doc.doc-wide ol { padding-left: 22px; }
.doc.doc-wide li { margin: 6px 0; }
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}
.category-card {
  padding: 16px 18px;
  background: rgba(5, 32, 73, 0.55);
  border: 1px solid rgba(3, 204, 212, 0.22);
  border-radius: 14px;
}
.category-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.doc-cta {
  margin: 40px auto 0;
  text-align: center;
}
.doc-cta .btn-primary {
  display: inline-block;
  min-width: 240px;
}