/* SC-VELA-TIPS: Vela's one-time card introducing each screen (js/vela-screen-
   tips.js builds the markup into the page body at boot). It reuses the look of
   her card over the raised record of destinations (css/cosmos-vela.css). The
   layer covers the window but takes no pointer events itself, so a tap that
   misses the card reaches the screen underneath and takes the card away; only
   the card and its Got it button are pointer targets. The card is anchored at
   the bottom-left corner, clear of the top nav bar, and slides in from the
   left edge where Vela sits. z-index 150 puts it over the screen and the header
   but under the arrival card, the confirmation dialog and the slip-space trip,
   which it waits behind. js/vela-screen-tips.js sets data-screen on the layer
   so the card stays clear of each screen's primary controls and its readable
   text: the ship-builder button on the Ship Interior, the page-turn arrows and
   the open field book in the Journal, and the tweaks panel in Ship
   Customization. */
.vela-tip-layer {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  /* The top padding reserves the header and the button halves that hang below
     its divider line (--nav-hang), so a card too tall for a short screen stops
     under the nav bar instead of rising over its buttons. */
  padding: calc(var(--header-h, 54px) + var(--nav-hang, 42px) + 10px) 14px 18px;
}
.vela-tip-layer[hidden] { display: none; }
.vela-tip {
  pointer-events: auto;
  width: min(320px, 82%);
  /* Held within the layer's box (the viewport less the header reserve and the
     bottom lift); a card too tall for a short screen scrolls inside its own
     frame rather than spilling off the top over the header. */
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(120, 160, 220, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 21, 38, 0.97), rgba(8, 13, 24, 0.97));
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  transform: translateX(calc(-100% - 20px));
  opacity: 0;
  transition: transform var(--vela-tip-slide-ms, 280ms) ease, opacity var(--vela-tip-slide-ms, 280ms) ease;
}
.vela-tip.vela-tip-in { transform: translateX(0); opacity: 1; }
.vela-tip-avatar { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(159, 208, 255, 0.3); }
.vela-tip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vela-tip-body { flex: 1 1 auto; min-width: 0; }
.vela-tip-name { color: #9fd0ff; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }
.vela-tip-text { color: #dbe6f5; font-size: 14px; line-height: 1.45; font-style: italic; margin: 0 0 8px; }
.vela-tip-text:last-of-type { margin-bottom: 12px; }
.vela-tip-actions { display: flex; }
.vela-tip-btn {
  min-height: 44px;
  min-width: 88px;
  padding: 8px 16px;
  border: 1px solid rgba(120, 160, 220, 0.24);
  border-radius: 8px;
  background: rgba(30, 44, 70, 0.6);
  color: #cfe3ff;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.vela-tip-btn:hover { background: rgba(44, 62, 96, 0.8); border-color: rgba(120, 160, 220, 0.45); }
.vela-tip-btn:active { background: rgba(50, 70, 110, 0.85); }
@media (prefers-reduced-motion: reduce) {
  .vela-tip { transition: opacity var(--vela-tip-slide-ms, 280ms) ease; transform: none; }
  .vela-tip.vela-tip-in { transform: none; }
}
/* Ship Interior: the ship-builder button sits at left 16px, bottom 14% with a
   48px hit area (css/cosmos-ship.css:386). Lift the card above it. min() takes
   the smaller of the width-based and height-based lift, which reads 14% of the
   shorter viewport side. On a phone held sideways that is the height, so the
   lift stays small and the card, capped by its max-height, stays on screen
   clear of the header. */
.vela-tip-layer[data-screen="ship"] { padding-bottom: min(calc(14% + 68px), calc(14vh + 68px)); }
/* Journal: the open field book fills the view and both its pages carry
   writing, so the card is docked at the bottom RIGHT and held narrow enough to
   sit in the band right of the right page's written column, over the book's
   outer edge, instead of the bottom left where it covered the left page's
   readings. 268px is what clears that column on a 1280 by 800 window, the
   widest the book is drawn. The page-turn arrows sit at bottom 10px, centered,
   44px tall (css/cosmos-journal.css:17-19); the 70px bottom padding keeps the
   card above them at every width. */
.vela-tip-layer[data-screen="journal"] { padding-bottom: 70px; justify-content: flex-end; }
.vela-tip-layer[data-screen="journal"] .vela-tip { width: min(268px, 82%); }
/* Ship Customization: the tweaks panel is fixed at left 0, 150px wide
   (assets/ship-generator.css:58). Shift the card past the panel. */
.vela-tip-layer[data-screen="ship-customization"] { padding-left: 166px; }