:root { --glass: rgba(255,255,255,.12); }

body{
  margin:0;
  min-height: 100svh;                 /* better on mobile Safari than 100vh */
  display:flex;
  align-items:flex-start;              /* don't vertically center (causes cutoff) */
  justify-content:center;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#fff;

  overflow-x:hidden;                   /* prevent side-scroll */
  overflow-y:auto;                     /* allow scroll if needed */

  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);

  background:
    radial-gradient(1000px 600px at 50% -10%, rgba(255,255,255,.15), transparent 55%),
    linear-gradient(180deg,#0b1b2a,#102f3a,#1c3f5a);
}

/* Subtle snow overlay */
.snow{
  position:fixed;
  inset:-20vh -20vw;
  pointer-events:none;
  z-index:0;
  opacity:.35;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 2px);
  background-size: 240px 240px, 320px 320px, 420px 420px;
  background-position: 0 0, 60px 80px, 120px 40px;
  animation: snowFall 14s linear infinite;
  filter: blur(.2px);
}
@keyframes snowFall{
  from { transform: translate3d(0, -10vh, 0); }
  to   { transform: translate3d(0,  10vh, 0); }
}

.container{
  position:relative;
  z-index:1;
  width:100%;
  max-width:460px;
  padding:18px;
  text-align:center;
  box-sizing:border-box;
}

h1{ margin:0 0 6px; font-size:1.55rem; font-weight:700; letter-spacing:.2px; }
.subtitle{ opacity:.85; margin:0 0 14px; font-size:1rem; }
.heart{ color:#ffb6c1; }

/* Photo card */
.photo-card{
  background: var(--glass);
  border-radius: 18px;
  padding: 10px;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  margin: 0 auto 14px;
  overflow:hidden;
}
.photo-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}
.photo-caption{
  margin-top: 8px;
  font-size: .85rem;
  opacity: .85;
}

/* Photo button + hint */
.photo-btn{
  all: unset;
  display:block;
  width:100%;
  cursor:pointer;
  position:relative;
}
.photo-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 4px;
  border-radius: 14px;
}
.tap-hint{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size:.78rem;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  opacity:.95;
}

/* Route card */
.route-card{
  position:relative;
  background:var(--glass);
  border-radius:18px;
  padding:16px 14px;
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  margin: 0 auto 14px;
  overflow:hidden;
}

/* NYC shimmer */
.nyc-shimmer{
  position:absolute;
  right:-40px;
  top:-30px;
  width:220px;
  height:220px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(circle at 65% 55%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(circle at 45% 75%, rgba(255,255,255,.10), transparent 60%);
  filter: blur(1px);
  opacity:.55;
  animation: shimmer 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer{
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity:.50; }
  50%      { transform: translate3d(-6px,6px,0) scale(1.03); opacity:.70; }
}

.route-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  font-size:.95rem;
  opacity:.95;
  position:relative;
  z-index:1;
}
.place{
  display:flex; align-items:center; gap:8px;
  font-weight:600;
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  font-size:.82rem;
  opacity:.95;
  white-space:nowrap;
}

.route-line-wrap{
  position:relative;
  margin:14px 0 8px;
  padding: 6px 0 10px;
  z-index:1;
}
.route-line{
  height: 2px;
  width: 100%;
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,.55),
    rgba(255,255,255,.55) 8px,
    transparent 8px,
    transparent 14px
  );
  border-radius: 10px;
  opacity:.85;
}
.dot{
  position:absolute; top: -2px;
  width: 10px; height:10px;
  border-radius:50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 6px rgba(255,255,255,.10);
}
.dot.left{ left:0; }
.dot.right{ right:0; }

/* ✅ Plane loops across the route container width (uses left %, not vw) */
.plane{
  position:absolute;
  top:-18px;
  left: -6%;                 /* starting point (slightly off-screen in container) */
  transform: translateX(-50%);
  font-size: 1.35rem;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
  will-change: left, transform, opacity;
  animation: planeLoop 14s linear infinite;  /* slower */
}

/* Optional: smoother loop (fade out at end, fade in at start) */
@keyframes planeLoop{
  0%   { left: -6%;  transform: translateX(-50%) translateY(0);    opacity: 0; }
  6%   { left: 0%;   transform: translateX(-50%) translateY(0);    opacity: .95; }
  50%  { left: 50%;  transform: translateX(-50%) translateY(-2px); opacity: 1; }
  94%  { left: 100%; transform: translateX(-50%) translateY(0);    opacity: .95; }
  100% { left: 106%; transform: translateX(-50%) translateY(0);    opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .plane{ animation: none; }
}

.route-label{
  margin-top: 4px;
  font-size: .78rem;
  opacity: .78;
  letter-spacing: .02em;
  display:flex;
  justify-content:center;
  gap:6px;
  align-items:center;
  z-index:1;
  position:relative;
}
.route-label .mini{
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.route-meta{
  display:flex; justify-content:space-between; gap:10px;
  font-size:.84rem;
  opacity:.85;
  z-index:1;
  position:relative;
  margin-top: 6px;
}
.route-meta strong{ opacity:.95; }

/* Countdown */
.countdown{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top: 12px;
}
.time-box{
  background:var(--glass);
  border-radius:16px;
  padding:14px 8px;
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.10);
}
.number{ font-size:1.85rem; font-weight:800; line-height:1; }
.label{
  margin-top:6px;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.8;
}

.footer{
  margin-top:16px;
  font-size:.98rem;
  opacity:.92;
}

@media (min-width:480px){
  h1{ font-size:1.75rem; }
  .number{ font-size:2.2rem; }
  .container{ padding:22px; }
}

/* Modal */
.hidden{ display:none; }

.modal{
  position:fixed;
  inset:0;
  z-index:50;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}
.modal-content{
  position:relative;
  margin: 6vh auto;
  width: min(92vw, 900px);
  max-height: 88vh;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  overflow:hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.modal-content img{
  width:100%;
  height:auto;
  display:block;
  max-height: 88vh;
  object-fit: contain;
  background: rgba(0,0,0,.25);
}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-close:focus-visible{
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 3px;
}

/* Make everything fit on shorter mobile screens */
@media (max-height: 780px){
  .container{ padding: 14px; }

  h1{ font-size: 1.32rem; margin-bottom: 4px; }
  .subtitle{ font-size: .95rem; margin-bottom: 10px; }

  .photo-card{ margin-bottom: 10px; padding: 8px; }
  .photo-card img{
    aspect-ratio: 16 / 10;      /* slightly shorter image */
    max-height: 32vh;           /* prevent image from dominating screen */
  }
  .photo-caption{ margin-top: 6px; font-size: .82rem; }

  .route-card{ margin-bottom: 10px; padding: 12px; }
  .route-line-wrap{ margin: 10px 0 6px; padding-bottom: 8px; }
  .route-meta{ margin-top: 4px; font-size: .8rem; }

  .countdown{ gap: 8px; margin-top: 10px; }
  .time-box{ padding: 10px 6px; }
  .number{ font-size: 1.55rem; }
  .label{ margin-top: 4px; font-size: .65rem; }

  .footer{ margin-top: 10px; font-size: .92rem; }
}