/* ── Veilstone Pass canvas track ──────────────────────────────────────────
   The canvas carries the whole design; this file only positions the fixed
   controls around it. Everything here is deliberately quiet — the track is the
   thing being looked at, and a HUD that competes with it is a HUD in the way. */

.vpt-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  background: #0a1420;
}
body.vpt-open { overflow: hidden; }

.vpt-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;   /* pan and pinch belong to the track, not the page */
  cursor: grab;
}
.vpt-canvas:active { cursor: grabbing; }

/* The HUD is a passthrough layer: only the controls themselves take pointers,
   so dragging anywhere else still pans the track. */
.vpt-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.vpt-hud button { pointer-events: auto; }

/* ── Top left: who you are in this season ── */
.vpt-tl {
  position: absolute;
  top: 16px; left: 16px;
  max-width: min(46vw, 320px);
}
.vpt-season {
  font-family: var(--font-display, Cinzel, serif);
  font-size: 19px; line-height: 1.15; letter-spacing: 1.4px;
  color: #7FD4FF;
  text-shadow: 0 0 18px rgba(127, 212, 255, 0.35);
}
.vpt-lvl {
  margin-top: 4px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.6px;
  color: #dcecf7; font-variant-numeric: tabular-nums;
}
.vpt-xp {
  margin-top: 6px; width: 190px; max-width: 100%;
  height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.vpt-xp-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, rgba(127, 212, 255, 0.6), #7FD4FF);
  box-shadow: 0 0 10px rgba(127, 212, 255, 0.5);
  transition: width .3s ease;
}
.vpt-xp-txt {
  margin-top: 4px;
  font-size: 10.5px; color: rgba(220, 236, 247, 0.5);
  font-variant-numeric: tabular-nums;
}

/* ── Top right: how long is left, and the way out ── */
.vpt-tr {
  position: absolute;
  top: 16px; right: 16px;
  display: flex; align-items: center; gap: 10px;
}
.vpt-left {
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px;
  color: #7FD4FF;
  background: rgba(127, 212, 255, 0.1);
  border: 1px solid rgba(127, 212, 255, 0.28);
  font-variant-numeric: tabular-nums;
}
.vpt-x {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  color: #dcecf7;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.vpt-x:hover { background: rgba(255, 90, 100, 0.18); border-color: rgba(255, 120, 130, 0.5); }
.vpt-x:focus-visible, .vpt-btn:focus-visible { outline: 2px solid #7FD4FF; outline-offset: 2px; }

/* ── Bottom: the actions, in the order they matter ── */
.vpt-bottom {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px);
}
.vpt-btn {
  padding: 9px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s;
  white-space: nowrap;
}
.vpt-btn:hover:not(:disabled) { transform: translateY(-1px); }
.vpt-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.vpt-btn.ghost {
  color: #cfe6f5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.vpt-btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13); }
.vpt-btn.gold {
  color: #14202b;
  background: linear-gradient(180deg, #a9e6ff, #4fb6e0);
  border: 1px solid rgba(180, 235, 255, 0.7);
  box-shadow: 0 3px 14px rgba(79, 182, 224, 0.3);
}
.vpt-btn.prem {
  color: #2a1c05;
  background: linear-gradient(180deg, #ffdf9a, #e0a93c);
  border: 1px solid rgba(255, 220, 150, 0.7);
  box-shadow: 0 3px 14px rgba(224, 169, 60, 0.3);
}
.vpt-owned {
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.5px;
  color: #ffd98a;
  background: rgba(255, 217, 138, 0.1);
  border: 1px solid rgba(255, 217, 138, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .vpt-btn:hover:not(:disabled) { transform: none; }
  .vpt-xp-fill { transition: none; }
}

@media (max-width: 560px) {
  .vpt-season { font-size: 15px; letter-spacing: 1px; }
  .vpt-xp { width: 140px; }
  .vpt-btn { padding: 8px 12px; font-size: 11px; }
  .vpt-bottom { gap: 6px; bottom: 12px; }
}