/* ============ Shenanigo v8: best time to go (quest page card, "Perfect right now", soon stickers) ============ */

/* ---------- quest page card ---------- */
.v8-best { display: flex; flex-direction: column; gap: 16px; }
.v8-best-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.v8-best-head h3 { margin-top: 10px; font-size: clamp(22px, 2.4vw, 28px); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.v8-best-when { font: 600 14px var(--f-mono); color: var(--amber); letter-spacing: 0; }
.v8-day button { padding: 8px 13px; min-height: 38px; font-size: 13.5px; }

.v8-tl { position: relative; padding-top: 24px; }
.v8-tl-bar { position: relative; height: 16px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 18px -10px rgba(0, 0, 0, 0.8); }
.v8-tl-best { position: absolute; top: -5px; bottom: -5px; min-width: 6px; border-radius: 8px; border: 2px solid #f0d38a; background: rgba(240, 211, 138, 0.16);
  box-shadow: 0 0 0 3px rgba(16, 19, 24, 0.6), 0 0 18px rgba(240, 211, 138, 0.45); }
.v8-tl-best em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); }
.v8-tl-now { position: absolute; top: -8px; bottom: -8px; width: 2px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
.v8-tl-now em { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font: 700 10px var(--f-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  padding: 1px 5px; border-radius: 6px; background: rgba(16, 19, 24, 0.85); white-space: nowrap; }
.v8-tl-ticks { position: relative; height: 18px; margin-top: 10px; font: 500 11px var(--f-mono); color: var(--dim); }
.v8-tl-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.v8-tl-ticks span:first-child { transform: none; }
.v8-tl-ticks span:last-child { transform: translateX(-100%); }

.v8-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v8-fact { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 0 0 1px var(--line); }
.v8-fact > span { grid-row: span 2; font-size: 20px; }
.v8-fact small { color: var(--dim); font-size: 12px; line-height: 1.2; }
.v8-fact b { font: 600 14px var(--f-mono); color: var(--text); line-height: 1.35; }

.v8-night { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(59, 63, 122, 0.35), rgba(13, 18, 32, 0.6)); box-shadow: inset 0 0 0 1px rgba(143, 176, 221, 0.18); }
.v8-moon { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; }
.v8-moon-ic { font-size: 34px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 244, 214, 0.35)); }
.v8-moon > div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.v8-moon small { color: var(--dim); font-size: 12px; }
.v8-moon b { font-weight: 600; }
.v8-moon-rs { text-align: right; }
.v8-moon-rs b { font: 600 13.5px var(--f-mono); }
.v8-dark { margin: 0; font-size: 14.5px; color: var(--muted); }
.v8-dark b { color: var(--text); }
.v8-dark.ok b { color: #b9c8ff; }
.v8-dark small { color: var(--dim); }
.v8-picnic { margin: 0; font-size: 14.5px; color: var(--muted); }
.v8-picnic b { color: var(--text); margin-right: 4px; }

.v8-verdicts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v8-verdicts li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.35; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.v8-verdicts li > span { font-size: 18px; }
.v8-verdicts li.good { box-shadow: inset 3px 0 0 var(--teal), inset 0 0 0 1px var(--line); }
.v8-verdicts li.meh { box-shadow: inset 3px 0 0 var(--amber), inset 0 0 0 1px var(--line); }
.v8-verdicts li.bad { box-shadow: inset 3px 0 0 var(--coral, #e0674f), inset 0 0 0 1px var(--line); }
.v8-wx-wait { margin: 0; font-size: 13px; }
.v8-credit { margin: -6px 0 0; font-size: 11.5px; color: var(--dim); text-align: right; }
.v8-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); }

/* ---------- "Perfect right now" on Discover (a strip under the vibes) ---------- */
.v8-perfect-slot:empty { display: none; }
.v8-perfect { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100vw; padding: 0 max(16px, calc((100vw - 900px) / 2)); }
.v8-perfect-h { flex: none; font: 600 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #f0d38a; padding: 6px 10px; border-radius: 99px;
  background: rgba(21, 25, 32, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(240, 211, 138, 0.3); }
.v8-perfect-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.v8-perfect-row::-webkit-scrollbar { display: none; }
.v8-pp { flex: none; display: flex; flex-direction: column; max-width: 230px; padding: 5px 13px 6px; border-radius: 14px; line-height: 1.2;
  background: rgba(21, 25, 32, 0.84); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform 0.3s var(--spring); }
.v8-pp:hover { transform: translateY(-1px); }
.v8-pp b { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v8-pp small { font: 500 11.5px var(--f-mono); color: var(--amber); white-space: nowrap; }
.v8-pp.now { box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.55), 0 0 18px -6px rgba(240, 211, 138, 0.6); }
.v8-pp.now small { color: #f0d38a; }
/* the strip adds a row to the overlay: push the tools, list and deck down to match */
.v6d.has-pp .v6-tools { top: calc(var(--v6-top) + 172px + 48px); }
.v6d.has-pp .maplibregl-ctrl-top-right { top: calc(var(--v6-top) + 290px + 48px); }
.v6d.has-pp .v6-list { padding-top: calc(var(--v6-top) + 170px + 48px); }
.v6d.has-pp .v6-deck { padding-top: calc(var(--v6-top) + 172px + 48px); }
@media (max-width: 760px) {
  .v8-perfect { padding: 0 10px; }
  .v8-perfect-h { padding: 6px 8px; font-size: 10px; letter-spacing: 0.08em; }
  .v6d.has-pp .v6-tools { top: calc(var(--v6-top) + 176px); }
  .v6d.has-pp .maplibregl-ctrl-top-right { top: calc(var(--v6-top) + 280px); }
  .v6d.has-pp .v6-list { padding-top: calc(var(--v6-top) + 178px); }
  .v6d.has-pp .v6-deck { padding-top: calc(var(--v6-top) + 178px); }
  .v8-facts { gap: 6px; }
  .v8-fact { padding: 9px 10px; column-gap: 8px; }
  .v8-fact b { font-size: 13px; }
  .v8-moon { grid-template-columns: auto 1fr auto; }
  .v8-moon-rs:last-child { grid-column: 3; }
}

/* ---------- Today home row + card stickers ---------- */
.v8-nc-when { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 99px; font: 600 11px var(--f-mono); color: #2a1d05; background: rgba(240, 211, 138, 0.92); white-space: nowrap; }
.v8-nc-when.soon { color: #f0d38a; background: rgba(16, 19, 24, 0.85); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.5); }
.v8-perfect-home .nc-art { position: relative; }
.chip.xs.v8-soon { color: #f0d38a; background: rgba(16, 19, 24, 0.8); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.5); }
.chip.xs.v8-soon.now { color: #2a1d05; background: rgba(240, 211, 138, 0.92); }
.v8-zone { margin: -6px 0 0; font-size: 12.5px; color: var(--dim); }

/* "perfect right now" as a badge on the quest card (Discover) */
.v8-badge { position: absolute; left: 8px; bottom: 8px; z-index: 2; max-width: calc(100% - 16px); padding: 4px 9px; border-radius: 99px; font: 700 11.5px var(--f-body); color: #1d1100;
  background: linear-gradient(115deg, #fff3cf, #f0d38a); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7), 0 0 14px rgba(240, 211, 138, 0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v8-badge.soon { color: #f5e2b0; background: rgba(16, 19, 24, 0.82); box-shadow: inset 0 0 0 1px rgba(240, 211, 138, 0.55); }
.v6-card-art { position: relative; }

/* ---------- new step types: time locks, hot & cold, secret spots, crew rallies (play screen + editor) ---------- */
.p6-timelock { display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(143, 176, 221, 0.1); box-shadow: inset 0 0 0 1px rgba(143, 176, 221, 0.35); }
.p6-timelock > span { font-size: 24px; }
.p6-timelock b { display: block; font-size: 14.5px; }
.p6-timelock small { display: block; color: var(--sky, #8fb0dd); font: 600 12.5px var(--f-mono); margin-top: 2px; }
.p6-secret { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; padding: 12px 14px; border-radius: 16px; font-size: 14.5px; background: rgba(216, 178, 90, 0.1); box-shadow: inset 0 0 0 1px rgba(216, 178, 90, 0.35); }
.p6-hc { --lv: 0; margin: 4px 0 14px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.4s; }
.p6-hc-meter { height: 14px; border-radius: 99px; overflow: hidden; background: linear-gradient(90deg, rgba(90, 150, 230, 0.25), rgba(240, 211, 138, 0.25), rgba(233, 100, 70, 0.25)); }
.p6-hc-meter i { display: block; height: 100%; width: 4%; border-radius: 99px; background: linear-gradient(90deg, #5a96e6, #f0d38a 55%, #e9644a); transition: width 0.8s var(--ease); }
.p6-hc-t { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.p6-hc-t b { font: 800 20px var(--f-display); }
.p6-hc-t small { color: var(--muted); font-size: 13px; }
.p6-hc[data-lv='4'], .p6-hc[data-lv='5'] { box-shadow: inset 0 0 0 1.5px rgba(233, 100, 70, 0.7), 0 0 26px rgba(233, 100, 70, 0.35); }
.p6-hc[data-lv='5'] .p6-hc-t b { color: #ffb48a; }
.p6-rally { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(163, 184, 108, 0.1); box-shadow: inset 0 0 0 1px rgba(163, 184, 108, 0.35); }
.p6-rally ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.p6-rally li { padding: 5px 11px; border-radius: 99px; font-size: 13.5px; background: rgba(255, 255, 255, 0.05); }
.p6-rally li.here { background: rgba(163, 184, 108, 0.25); }
.p6-rally small { font-size: 12.5px; }
.pin.p6-rallypin { font-size: 16px; background: #2a3a1c; }
.v7-find { margin-top: 12px; }
.v7-find .seg button { font-size: 13px; }
.v7-rally, .v7-tl { margin-top: 14px; }
.v7-rally-body, .v7-tl-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); }
.v7-rally-body .lbl, .v7-tl-body .lbl { display: flex; justify-content: space-between; gap: 8px; }
.v7-spot { gap: 8px; align-items: center; }
.v7-tl-row { gap: 8px; }
.v7-tl-row select, .v7-tl-row input { flex: 1; min-width: 0; }
.v7-days { gap: 6px; }