/* ============================================================================
   ΕΚΣΤΡΑΤΕΙΑ — Το Ταξίδι της Αργούς: the live strip, the deck scene and
   the drawer. Loaded after styles.css on the landing.
   ============================================================================ */
:root {
  --metal-gold: #E2B75F;
  --metal-gold-2: #F4D98C;
  --metal-silver: #C9D1E0;
  --metal-silver-2: #F1F4FA;
  --metal-bronze: #C77B3E;
  --metal-bronze-2: #E9A56B;
  --voyage-cyan: #00f2fe;
  --voyage-ink: rgba(255, 255, 255, 0.82);
  --voyage-muted: rgba(255, 255, 255, 0.55);
}

/* ---------------------------------------------------------------------------
   The live strip: one line under the wordmark, every scene.
   --------------------------------------------------------------------------- */
.voyage-strip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem auto 0;
  padding: 0.32rem 0.85rem 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(226, 183, 95, 0.35);
  background: rgba(226, 183, 95, 0.08);
  color: var(--voyage-ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(226, 183, 95, 0);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  z-index: 6;
}
.voyage-strip b { font-weight: 700; color: #fff; }
.voyage-strip .vst-depth b { color: var(--metal-gold); }
.voyage-strip .vst-sep { opacity: 0.35; }
.voyage-strip .vst-anchor { font-size: 0.85rem; }
.voyage-strip .vst-chev { opacity: 0.6; margin-left: 0.1rem; }
.voyage-strip:hover, .voyage-strip:focus-visible {
  border-color: rgba(226, 183, 95, 0.75);
  background: rgba(226, 183, 95, 0.14);
  box-shadow: 0 0 22px rgba(226, 183, 95, 0.22);
  transform: translateY(-1px);
  outline: none;
}
/* The number just came from the server: a heartbeat. */
html.ship-live .voyage-strip .vst-anchor { animation: vstBeat 2.8s ease-in-out infinite; }
@keyframes vstBeat { 0%, 100% { transform: none; } 12% { transform: scale(1.22); } 24% { transform: none; } }
@media (max-width: 480px) {
  .voyage-strip { font-size: 0.7rem; gap: 0.35rem; padding: 0.28rem 0.7rem 0.28rem 0.6rem; }
  .voyage-strip .vst-next { display: none; }
  .voyage-strip .vst-sep:last-of-type { display: none; }
}
/* ---------------------------------------------------------------------------
   The voyage hero (in the drawer): the count, large
   --------------------------------------------------------------------------- */
.voyage-hero-label {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--voyage-muted);
}
.voyage-hero-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: clamp(2.7rem, 12vw, 4.2rem);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--metal-gold) 0%, var(--metal-gold-2) 55%, #fff 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--metal-gold);
  filter: drop-shadow(0 0 22px rgba(226, 183, 95, 0.35));
}
.voyage-hero-sub {
  font-size: 0.8rem;
  color: var(--voyage-muted);
}
.voyage-hero-sub b { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------------
   The key rail — six stars along the route
   --------------------------------------------------------------------------- */
.voyage-keys { width: 100%; max-width: 440px; }
.vk-rail {
  position: relative;
  height: 3px;
  margin: 1.1rem 1.6rem 1.75rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.vk-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--voyage-cyan), var(--metal-gold));
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
  transition: width 1.2s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.vk-star {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.vk-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0b1020;
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: all 0.4s ease;
}
.vk-star.is-open .vk-dot {
  background: var(--metal-gold);
  border-color: var(--metal-gold-2);
  box-shadow: 0 0 14px rgba(226, 183, 95, 0.8);
}
.vk-star.is-next .vk-dot {
  border-color: var(--voyage-cyan);
  box-shadow: 0 0 0 4px rgba(0, 242, 254, 0.12), 0 0 16px rgba(0, 242, 254, 0.5);
  animation: vkPulse 2.2s ease-in-out infinite;
}
@keyframes vkPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.vk-depth {
  position: absolute;
  top: 100%;
  margin-top: -3px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--voyage-muted);
  white-space: nowrap;
}
.vk-star.is-open .vk-depth { color: var(--metal-gold); }
.vk-star.is-next .vk-depth { color: #fff; font-weight: 600; }
.vk-cap { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vk-cap .vk-dot { width: 9px; height: 9px; border-style: dashed; }
.vk-item--cap { border-style: dashed; opacity: 0.8; }
.vy-count { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 1.1rem 0.9rem; margin-top: 0.7rem; border-radius: 14px; border: 1px dashed rgba(0, 242, 254, 0.35); text-align: center; }
.vy-count-num { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 2.4rem; color: var(--voyage-cyan); line-height: 1; }
.vy-count-label { font-size: 0.82rem; color: var(--voyage-ink); }
.vy-count-sub { font-size: 0.76rem; color: var(--voyage-muted); margin-top: 0.3rem; line-height: 1.5; }

/* The full list, in the drawer */
.vk-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.vk-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.vk-item.is-open { border-color: rgba(226, 183, 95, 0.4); background: rgba(226, 183, 95, 0.06); }
.vk-item.is-next { border-color: rgba(0, 242, 254, 0.4); }
.vk-item.flash { background: rgba(0, 242, 254, 0.12); border-color: var(--voyage-cyan); }
.vk-item-star { font-size: 1.1rem; line-height: 1.3; color: rgba(255, 255, 255, 0.35); }
.vk-item.is-open .vk-item-star { color: var(--metal-gold); }
.vk-item.is-next .vk-item-star { color: var(--voyage-cyan); }
.vk-item-body { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; color: var(--voyage-ink); }
.vk-item-body strong { color: #fff; }
.vk-item-aboard { font-size: 0.74rem; color: var(--voyage-muted); }
.vk-item-reveal { margin-top: 0.15rem; }
.vk-item-seats { font-size: 0.76rem; color: var(--metal-gold); }

/* ---------------------------------------------------------------------------
   The 25 seats — five grades, five seats each
   --------------------------------------------------------------------------- */
.voyage-seats { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.3rem 0 0.6rem; }
.vs-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.86rem; color: var(--voyage-ink); }
.vs-grade { flex: 1; text-align: left; }
.vs-cells { display: flex; gap: 0.3rem; }
.vs-seat {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}
.vs-seat.is-open { border-color: var(--metal-gold); background: rgba(226, 183, 95, 0.14); color: var(--metal-gold); font-weight: 700; }


/* ---------------------------------------------------------------------------
   The drawer «Το Ταξίδι»
   --------------------------------------------------------------------------- */
.voyage-drawer .drawer-header h2 { color: var(--metal-gold); }
.voyage-tabs {
  display: flex;
  background: #0f172a;
  border-bottom: 1px solid var(--border-glass, rgba(255, 255, 255, 0.08));
}
.voyage-tab {
  flex: 1;
  padding: 0.75rem 0.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--voyage-muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.voyage-tab.active { color: #fff; border-bottom-color: var(--metal-gold); }
.voyage-tab:hover { color: #fff; }
.voyage-content { gap: 0; }
.voyage-content > section { display: flex; flex-direction: column; gap: 0.8rem; }
.voyage-content > section[hidden] { display: none; }
.voyage-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.6rem 0 0.9rem;
  text-align: center;
}
.voyage-hero-num { font-size: clamp(3rem, 12vw, 4.4rem); }
.voyage-bar {
  width: 100%;
  max-width: 360px;
  height: 6px;
  margin: 0.7rem 0 0.35rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.voyage-bar-fill {
  height: 100%;
  width: 0;
  min-width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--voyage-cyan), var(--metal-gold));
  box-shadow: 0 0 12px rgba(0, 242, 254, 0.5);
  transition: width 1.2s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.voyage-hero-far { font-size: 0.76rem; color: var(--voyage-muted); }
.voyage-p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--voyage-ink); }
.voyage-p strong { color: var(--metal-gold); }
.voyage-h3 {
  margin: 0.6rem 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #fff;
}
.voyage-note { margin: 0; font-size: 0.78rem; color: var(--voyage-muted); font-style: italic; }
.voyage-steps { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; line-height: 1.55; color: var(--voyage-ink); }
.voyage-cta {
  display: inline-block;
  align-self: center;
  margin-top: 0.4rem;
  padding: 0.75rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--metal-gold);
  background: linear-gradient(135deg, var(--metal-gold), var(--metal-gold-2));
  color: #1a1206;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(226, 183, 95, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.voyage-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(226, 183, 95, 0.45); }
.voyage-cta--ghost { background: none; color: var(--metal-gold); box-shadow: none; }
.voyage-cta--ghost:hover { background: rgba(226, 183, 95, 0.1); box-shadow: none; }
.voyage-keys--full .vk-rail { margin: 1.2rem 1.4rem 1.9rem; }

/* The ambassador line on the finale, above the button that does not move */
.stage-amb-line {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: var(--voyage-ink);
}
.stage-amb-line a { color: var(--metal-gold); text-decoration: none; border-bottom: 1px solid rgba(226, 183, 95, 0.5); }
.stage-amb-line a:hover { border-bottom-color: var(--metal-gold); }

/* Phone heights */
@media (max-height: 860px) {
  .vk-rail { margin: 0.95rem 1.5rem 1.55rem; }
}
@media (max-height: 760px) {
  .vk-rail { margin: 0.9rem 1.5rem 1.5rem; }
}
@media (max-height: 690px) {
  .stage-amb-line { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vk-star.is-next .vk-dot, html.ship-live .voyage-strip .vst-anchor { animation: none; }
}


/* ---------------------------------------------------------------------------
   The drawer's Χορηγοί tab: two lines and a button
   --------------------------------------------------------------------------- */
.vsp-contact { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin-top: 0.4rem; }
.vsp-contact small { font-size: 0.8rem; color: var(--voyage-muted); }
.vsp-contact small a { color: #fff; }

/* ---------------------------------------------------------------------------
   Ο Στίβος → «Το Ταξίδι»: the season board with the five seats drawn
   --------------------------------------------------------------------------- */
#voyageBackdrop { z-index: 10002; }
#voyageDrawer { z-index: 10003; }
.vy-banner {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0.85rem 0.95rem; border-radius: 14px;
  border: 1px solid rgba(226, 183, 95, 0.35);
  background: linear-gradient(160deg, rgba(226, 183, 95, 0.12), rgba(226, 183, 95, 0.03));
}
.vy-banner-top { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1rem; color: #fff; display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.vy-banner-when { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.78rem; color: var(--metal-gold); }
.vy-banner-stats { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.78rem; color: var(--voyage-muted); }
.vy-banner-stats strong { color: #fff; }
.vy-banner-link { align-self: flex-start; background: none; border: none; padding: 0; font: inherit; font-size: 0.8rem; color: var(--voyage-cyan); cursor: pointer; }
.vy-banner-link:hover { text-decoration: underline; }
.vy-chips { margin-top: 0.7rem; }
.vy-note { margin: 0.3rem 0 0.5rem; }
.vy-row.vy-seat { border-color: rgba(226, 183, 95, 0.35); }
.vy-row.vy-seat--open { background: rgba(226, 183, 95, 0.08); }
.vy-row.vy-seat .arena-row-badge { color: var(--metal-gold); background: rgba(226, 183, 95, 0.1); }
.vy-row.vy-seat .arena-row-rank { font-size: 0.95rem; }
.vy-seatline { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--metal-gold); opacity: 0.8; }
.vy-seatline::before, .vy-seatline::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(226, 183, 95, 0.6), transparent); }

/* The hidden «?» on the voyage board: a grade that came out wrong */
.vy-help-btn { min-width: 2.1rem; font-weight: 800; }
.vy-help { margin: 0.5rem 0 0.2rem; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px dashed rgba(0, 242, 254, 0.35); font-size: 0.82rem; line-height: 1.55; color: var(--voyage-ink); }
.vy-help strong { color: #fff; }
.vy-help a { color: var(--voyage-cyan); }
.vy-help-row { text-align: center; margin-top: 0.6rem; }

/* ---------------------------------------------------------------------------
   The Instagram link: quiet, the same grey as the legal links, cyan on hover
   --------------------------------------------------------------------------- */
.ig-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-muted, #6b7c96); text-decoration: none; transition: color 0.25s ease; }
.ig-link:hover { color: var(--voyage-cyan); }
.ig-link[hidden] { display: none; }
.ig-glyph { width: 0.95em; height: 0.95em; flex: none; }
.stage-footer-links .ig-link { font-size: inherit; }
.voyage-note--center { text-align: center; }
.voyage-note--center .ig-link { color: var(--voyage-ink); font-style: normal; }

/* Inside the game the bottom bar lies over the drawer's foot: leave room
   under the last line so it can be scrolled clear of the bar. */
body.has-bottom-nav #voyageDrawer .drawer-content {
  padding-bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom) + 1.5rem);
  scroll-padding-bottom: calc(var(--nav-h, 64px) + env(safe-area-inset-bottom));
}