.tours { max-width: var(--max); margin: 0 auto; padding: 120px 20px 80px; }
.tours > section { padding-block: 0; }
.tours-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.tours-head h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; margin: 10px 0 14px; }
.tours-head .sub { color: var(--muted); }

.tour-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tour-card { text-align: left; font: inherit; color: var(--ink); cursor: pointer; display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center;
  padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.tour-card:hover, .tour-card:focus-visible { border-color: rgba(139,92,246,.55); transform: translateY(-3px); outline: none; }
.tour-card img { width: 92px; height: 150px; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid var(--line); }
.tour-card h2 { font-family: var(--display); margin: 4px 0 6px; font-size: 1.1rem; }
.tour-card p { margin: 0 0 10px; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.tour-card .meta { font-size: .78rem; color: var(--faint); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.player { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 5vw, 64px); align-items: start; }
.player[hidden] { display: none; }
.back-link { display: block; font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; margin-bottom: 18px; }
.back-link:hover { color: var(--ink); }
.tour-title { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 6px 0 22px; line-height: 1.12; }
.step-box { padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); min-height: 150px; }
.step-count { margin: 0 0 6px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.step-title { font-family: var(--display); margin: 0 0 8px; font-size: 1.2rem; }
.step-text { margin: 0; color: var(--muted); line-height: 1.55; }
.step-nav { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.step-nav button[disabled] { opacity: .4; cursor: default; }
.step-nav [hidden] { display: none; }
.bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.08); margin-top: 18px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .35s ease; }
.tour-done { margin-top: 20px; padding: 18px; border-radius: 16px; border: 1px solid rgba(139,92,246,.45); background: rgba(139,92,246,.1); }
.tour-done p { margin: 0; }

.player-phone { position: sticky; top: 90px; display: grid; justify-items: center; gap: 10px; }
.tphone { width: min(330px, 78vw); aspect-ratio: 1080 / 2270; border-radius: 42px; padding: 10px; background: linear-gradient(160deg, #2a3358, #10162c); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.tscreen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #0b1020; }
.shot { width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; transition: opacity .25s ease; }
.shot.fade { opacity: .25; }
.hotspot { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.hotspot span { position: absolute; inset: 14px; border-radius: 50%; background: rgba(139,92,246,.9); box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 0 24px 6px rgba(139,92,246,.8); }
.hotspot::before, .hotspot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(167,139,250,.9); animation: ping 1.6s ease-out infinite; }
.hotspot::after { animation-delay: .8s; }
.hotspot:focus-visible { outline: 3px solid #fff; }
.hotspot[hidden] { display: none; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.hint { margin: 0; color: var(--faint); font-size: .85rem; }

@media (max-width: 860px) {
  .tours { padding-top: 96px; }
  .player { grid-template-columns: 1fr; }
  .player-phone { position: static; order: -1; }
  .tphone { width: min(300px, 74vw); }
  .step-box { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .hotspot::before, .hotspot::after { animation: none; opacity: .6; } }

.tour-picker[hidden], .tours-head[hidden] { display: none; }
.links .menu-only { display: none; }
@media (max-width: 760px) { .links .menu-only { display: block; } }

/* Group filter above the tour cards */
.tour-filter { margin: 0 0 18px; }
.tour-filter[hidden], .tour-card[hidden] { display: none; }
/* Keyboard hint only where there is a keyboard and a mouse */
@media (hover: none), (pointer: coarse) { .kbd-hint { display: none; } }