/* The tutorial (js/tour.js), on both pages: the game's and the exhibit's.
 *
 * One layer over everything. It takes no clicks of its own except where it
 * means to: the caption, and while a step is talking, a clear sheet over the
 * board so a stray tap does not play a move the caption has not got to yet.
 * The screen's edges darken while the camera is the thing being watched,
 * and a panel lifted into the middle is a copy of the real one over a
 * dimmed screen. */

.tour {
  --tour-ink: var(--ink, #f4f1e8);
  --tour-gold: var(--gold, #f5c542);
  --tour-sheet: var(--sheet-solid, #071e2e);
  --tour-hair: var(--hair-strong, rgba(244, 241, 232, 0.32));
  --tour-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  font-family: inherit;
  color: var(--tour-ink);
}

.tour.is-leaving { opacity: 0; transition: opacity 400ms ease; }

/* ------------------------------------------------------------- vignette */

/* The cinema: the edges of the screen sink into the dark while the camera
   moves, the way an old film's frame does, and the middle is untouched. No
   hard edge anywhere, so it reads as light rather than as something laid
   over the game, and on a phone it takes no room. */
.tour-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 78% 72% at 50% 48%,
    transparent 52%, rgba(1, 6, 12, 0.38) 78%, rgba(1, 6, 12, 0.78) 100%);
  opacity: 0;
  transition: opacity 900ms var(--tour-ease);
}
.tour.is-cinema .tour-vignette { opacity: 1; }

/* --------------------------------------------------------- shade, shield */

.tour-shade {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 18, 0.62);
  opacity: 0;
  transition: opacity 420ms ease;
}
.tour.is-shaded .tour-shade { opacity: 1; pointer-events: auto; }
.tour-shield { position: absolute; inset: 0; }
.tour.is-shielded .tour-shield { pointer-events: auto; }

/* ------------------------------------------------------- chapter cards */

.tour-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 500ms ease, transform 900ms var(--tour-ease);
}
.tour.is-titled .tour-title { opacity: 1; transform: none; }
.tour-title-big {
  margin: 0;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}
.tour-title-sub {
  margin: 0.6em auto 0;
  max-width: 34ch;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  opacity: 0.8;
  line-height: 1.4;
}
.tour.is-titled .tour-card { opacity: 0.98; }

/* ----------------------------------------------------------- the copy */

.tour-copy {
  --tour-sheet: var(--sheet-solid, #071e2e);
  z-index: 2001;
  pointer-events: none;
  /* Its motion is set on it by tour.js (COPY_MOTION). No `will-change`: it
     would keep the copy one fixed picture all the way up. */
  visibility: visible !important;
}
.tour-copy.is-lifted {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-md, 8px);
  background-color: var(--tour-sheet);
}

/* The taunt picker drawn into a lifted player card (tour-solo.js): in the
   card's flow rather than floating, and sized to the card. */
.tour-copy .tour-taunt-pick {
  position: static;
  margin-top: 8px;
  /* Seven to a row at any card width: the columns may shrink below an
     emoji's own width, and the faces are sized to the row, so a phone's
     narrow card holds the grid rather than the grid spilling out of it. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  container-type: inline-size;
  gap: 2px;
  padding: 4px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tour-copy .tour-taunt-pick .taunt-choice {
  width: auto;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  font-size: min(17px, 9cqi);
}

/* The palette lifted open (dressPalette in tour.js): the pill over its
   popover, both in the copy's own flow. */
.tour-copy.tour-palette {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding: 0;
}
.tour-copy.tour-palette.is-lifted { background-color: transparent !important; box-shadow: none; }
.tour-copy.tour-palette #palette-pop {
  position: static;
  max-height: none;
  overflow: visible;
}

/* In place: a gold pulse round a thing the step wants pressed. */
.tour-ring {
  outline: 2px solid var(--tour-gold) !important;
  outline-offset: 3px;
  animation: tour-ring 1.6s ease-in-out infinite;
  position: relative;
  z-index: 3;
}
@keyframes tour-ring {
  0%, 100% { outline-color: var(--tour-gold); box-shadow: 0 0 0 0 rgba(245, 197, 66, 0.45); }
  50% { outline-color: rgba(245, 197, 66, 0.5); box-shadow: 0 0 0 8px rgba(245, 197, 66, 0); }
}

/* --------------------------------------------------------- the caption */

.tour-card {
  position: fixed;
  z-index: 2002;
  pointer-events: auto;
  padding: 14px 16px 12px;
  border: 1px solid var(--tour-hair);
  border-radius: var(--radius-md, 8px);
  background: var(--tour-sheet);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  transition: top 520ms var(--tour-ease), left 520ms var(--tour-ease);
}
.tour-card.is-fresh { animation: tour-in 420ms var(--tour-ease) both; }
@keyframes tour-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.tour-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: rgba(244, 241, 232, 0.08);
}
.tour-progress i {
  display: block;
  height: 100%;
  background: var(--tour-gold);
  transition: width 500ms var(--tour-ease);
}

.tour-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.tour-chapter {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tour-gold);
}
.tour-leave {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.tour-leave:hover, .tour-leave:focus-visible { opacity: 1; border-color: var(--tour-hair); }
.tour-leave svg { width: 11px; height: 11px; display: block; }
.tour-leave path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }

.tour-say {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.45;
}
.tour-say b, .tour-todo b { color: var(--tour-gold); font-weight: 600; }
.tour-todo {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--tour-gold);
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.92;
}

/* Words arrive one after another. */
.tour-card.is-fresh .tour-w {
  display: inline-block;
  animation: tour-word 360ms var(--tour-ease) both;
  animation-delay: calc(var(--i) * 26ms + 80ms);
}
@keyframes tour-word {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.tour-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.tour-foot button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0.02em;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tour-hair);
  border-radius: var(--radius-sm, 4px);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.tour-foot button:hover, .tour-foot button:focus-visible { border-color: var(--tour-ink); }
.tour-foot button[hidden], .tour-todo[hidden] { display: none; }
.tour-back { margin-right: auto; }
.tour-next {
  background: var(--tour-gold) !important;
  border-color: var(--tour-gold) !important;
  color: #1a1407 !important;
  font-weight: 600 !important;
}
.tour-next:hover, .tour-next:focus-visible { filter: brightness(1.08); }

/* A step waiting on a player on a phone: only the instruction. */
.tour-card.is-compact .tour-say { display: none; }
.tour-card.is-compact .tour-todo { margin-top: 0; }
.tour-card.is-compact .tour-top { margin-bottom: 4px; }

@media (max-width: 560px) {
  .tour-card { padding: 12px 13px 10px; }
  .tour-say { font-size: 0.95rem; }
}

/* The exhibit's controls fade when the pointer is still (hud.js); during
   a tour they are what is being explained, so they stay. */
body.is-touring #chrome.is-idle,
body.is-touring #keys-col.is-idle #keys,
body.is-touring #keys-col.is-idle #keys-tools {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Cuts rather than moves. */
.tour.is-reduced *,
.tour.is-reduced .tour-card.is-fresh .tour-w {
  animation-duration: 0.01ms;
}
@media (prefers-reduced-motion: reduce) {
  .tour *, .tour-copy, .tour-ring { transition: none !important; animation: none !important; }
}