/* The Hidden Path (潜伏) - the guided tour and the in-game coach.
 *
 * Reads every colour and face from the tokens in kakure.css. Every class is
 * prefixed tour- or coach- so nothing here can reach app.css.
 *
 * Convention: an element's resting style is its FINAL state, and keyframes
 * only describe where it comes FROM. That lets reduced motion swap every
 * animation for a plain fade without leaving anything stuck half-drawn.
 */

/* ------------------------------------------------------------- overlay */
.tour {
  position: fixed;
  inset: 0;
  z-index: 2000;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 70% 55% at 72% 8%, rgba(76, 102, 156, .55), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 100%, rgba(200, 67, 43, .12), transparent 70%),
    linear-gradient(180deg, var(--ai) 0%, var(--ai-deep) 58%, var(--night) 100%);
  animation: tour-in .6s var(--ease-ink) both;
  -webkit-tap-highlight-color: transparent;
}
.tour *, .tour *::before, .tour *::after { box-sizing: border-box; }
.tour[role="dialog"], .coach[role="dialog"] { max-width: none; }
.tour--closing { animation: tour-out .38s ease-in both; }
@keyframes tour-in { from { opacity: 0; } }
@keyframes tour-out { to { opacity: 0; transform: scale(1.015); } }
@keyframes tour-fade { from { opacity: 0; } }

.tour-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* the night sky */
.tour-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tour-sky > i { position: absolute; display: block; }
.tour-sky__stars {
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(240, 216, 150, .9), transparent 60%),
    radial-gradient(1px 1px at 28% 8%, rgba(242, 232, 210, .8), transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 22%, rgba(240, 216, 150, .7), transparent 60%),
    radial-gradient(1px 1px at 63% 12%, rgba(242, 232, 210, .9), transparent 60%),
    radial-gradient(1.3px 1.3px at 81% 26%, rgba(240, 216, 150, .8), transparent 60%),
    radial-gradient(1px 1px at 92% 6%, rgba(242, 232, 210, .7), transparent 60%),
    radial-gradient(1px 1px at 6% 40%, rgba(242, 232, 210, .5), transparent 60%),
    radial-gradient(1.2px 1.2px at 37% 34%, rgba(240, 216, 150, .5), transparent 60%),
    radial-gradient(1px 1px at 72% 38%, rgba(242, 232, 210, .5), transparent 60%);
  animation: tour-twinkle 7s ease-in-out infinite alternate;
}
@keyframes tour-twinkle { from { opacity: .45; } }
.tour-sky__mist {
  width: 90vmax; height: 40vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 199, 165, .10), transparent);
  filter: blur(20px);
}
.tour-sky__mist--a { left: -30vmax; bottom: 6vh; animation: tour-drift 46s ease-in-out infinite alternate; }
.tour-sky__mist--b { right: -36vmax; top: 18vh; animation: tour-drift 60s ease-in-out infinite alternate-reverse; }
@keyframes tour-drift { from { transform: translateX(-12vmax); } }
.tour-sky__waves {
  left: 0; right: 0; bottom: 0; height: 34vh;
  background: var(--pattern-seigaiha);
  background-size: 64px 32px;
  -webkit-mask-image: linear-gradient(transparent, #000 85%);
  mask-image: linear-gradient(transparent, #000 85%);
  opacity: .7;
}

/* ------------------------------------------------------------- header */
.tour-top {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) clamp(16px, 3vw, 40px) 6px;
}
.tour-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tour-brand__kanji {
  font-family: var(--font-brush);
  font-size: 30px; line-height: 1;
  color: var(--kin-pale);
  text-shadow: 0 0 18px rgba(214, 168, 76, .45);
  writing-mode: vertical-rl;
  letter-spacing: .02em;
}
.tour-brand__name { display: flex; flex-direction: column; min-width: 0; }
.tour-brand__name b { font: 700 19px/1.15 var(--font-display); color: var(--text); letter-spacing: .02em; }
.tour-brand__name small { font: italic 500 15px/1.2 var(--font-serif); color: var(--text-dim); }
.tour-skip {
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(214, 168, 76, .45);
  background: rgba(8, 13, 24, .35);
  color: var(--text);
  font: 500 15px var(--font-body);
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.tour-skip:hover { background: rgba(214, 168, 76, .15); border-color: var(--kin); }

/* ------------------------------------------------------------- layout */
.tour-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 56px);
  align-items: center;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 4px clamp(16px, 3vw, 40px);
  min-height: 0;
}
.tour-art {
  position: relative;
  align-self: stretch;
  min-height: 0;
  container-type: size;
  display: grid;
}
.tour-frame {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 0;
  animation: tour-wash-in .75s var(--ease-ink) both;
}
.tour-frame--out { animation: tour-wash-out .42s ease-in both; pointer-events: none; }
@keyframes tour-wash-in {
  from { clip-path: circle(0% at 50% 48%); filter: blur(8px) saturate(.4); opacity: .4; }
  to { clip-path: circle(80% at 50% 48%); }
}
@keyframes tour-wash-out { to { opacity: 0; filter: blur(10px); transform: scale(1.04); } }
.tour-wash {
  position: absolute; left: 50%; top: 46%;
  width: 70cqmin; height: 70cqmin;
  margin: -35cqmin 0 0 -35cqmin;
  border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
  background: radial-gradient(closest-side, rgba(8, 13, 24, .9), rgba(22, 19, 15, .55) 55%, transparent);
  pointer-events: none;
  opacity: 0;
  animation: tour-ink-wash .9s ease-out both;
}
@keyframes tour-ink-wash {
  from { opacity: .95; transform: scale(.15) rotate(-20deg); }
  45% { opacity: .7; }
  to { transform: scale(1.9) rotate(10deg); }
}

/* The stage: a 400 x 420 box, sized to fit the art column by width and height. */
.tour-stage {
  position: relative;
  flex: none;
  aspect-ratio: 400 / 420;
  width: min(100cqw, calc((100cqh - 64px) * 400 / 420));
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}
.tour-isle, .tour-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tour-layer { position: absolute; inset: 0; }
.tour-layer > * { position: absolute; translate: -50% -50%; }

.tour-cap {
  min-height: 2.9em;
  max-width: min(100%, 520px);
  margin: 0;
  padding: 0 8px;
  text-align: center;
  font: italic 500 18px/1.35 var(--font-serif);
  color: var(--kin-pale);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.tour-cap.show { animation: tour-cap .55s var(--ease-ink) both; }
@keyframes tour-cap { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }

/* ------------------------------------------------------------- scroll */
.tour-scroll {
  position: relative;
  display: flex; flex-direction: column;
  max-height: 100%;
  min-height: 0;
  padding: 7px 0;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)) drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.tour-rod {
  position: absolute; left: -12px; right: -12px; height: 14px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, #6b4a2c 0%, #3a2414 45%, #1f130a 100%);
  box-shadow: inset 0 1px 0 rgba(240, 216, 150, .35), 0 3px 6px rgba(0, 0, 0, .45);
  z-index: 2;
}
.tour-rod::before, .tour-rod::after {
  content: ''; position: absolute; top: -3px; width: 14px; height: 20px; border-radius: 4px;
  background: linear-gradient(180deg, var(--kin-pale), var(--kin) 50%, #8a6a2a);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
.tour-rod::before { left: -6px; }
.tour-rod::after { right: -6px; }
.tour-rod--top { top: 0; }
.tour-rod--bot { top: calc(100% - 14px); }
.tour-scroll--in .tour-rod--bot { animation: tour-rod .8s var(--ease-ink) both; }
@keyframes tour-rod { from { top: 0; } }
.tour-paper {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.8vw, 40px) clamp(20px, 2.4vw, 30px);
  color: var(--sumi);
  background:
    var(--paper-grain),
    radial-gradient(ellipse at 20% 0%, rgba(255, 252, 240, .7), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(185, 164, 124, .35), transparent 60%),
    linear-gradient(180deg, #f6ecd6, var(--washi) 40%, #eadbbd);
  clip-path: polygon(0.5% 0, 99.5% 0, 100% 3%, 99.3% 8%, 99.9% 14%, 99.4% 21%, 100% 29%, 99.5% 37%, 99.9% 45%, 99.3% 54%, 100% 62%, 99.5% 70%, 99.9% 79%, 99.4% 87%, 100% 94%, 99.6% 100%, 0.4% 100%, 0 95%, 0.6% 88%, 0.1% 80%, 0.7% 71%, 0 63%, 0.5% 55%, 0.1% 46%, 0.7% 38%, 0 29%, 0.6% 21%, 0.1% 13%, 0.6% 6%, 0 2%);
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 33, 22, .5) transparent;
}
.tour-paper::before {
  /* faint asanoha watermark and a fibre streak */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--pattern-asanoha);
  background-size: 48px 83px;
  opacity: .55;
  filter: sepia(1) hue-rotate(-20deg) saturate(.6) brightness(.6);
  -webkit-mask-image: linear-gradient(135deg, transparent 40%, #000);
  mask-image: linear-gradient(135deg, transparent 40%, #000);
}
.tour-paper > * { position: relative; }
.tour-scroll::after {
  content: '';
  position: absolute; left: 1%; right: 1%; bottom: 7px; height: 46px;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(234, 219, 189, .96) 70%);
  opacity: 0;
  transition: opacity .3s;
  z-index: 1;
}
.tour-scroll--more::after { opacity: 1; }
.tour-more {
  position: absolute; left: 50%; bottom: 14px; z-index: 3;
  translate: -50% 0;
  display: none; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 14px;
  border: 1px solid rgba(142, 33, 22, .35); border-radius: 999px;
  background: var(--washi);
  font: 600 13px var(--font-body); letter-spacing: .06em; color: var(--shu-deep);
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(22, 19, 15, .2);
}
.tour-scroll--more .tour-more { display: inline-flex; animation: tour-rise .4s var(--ease-ink) both; }
/* The paper unrolls with the bottom rod: the whole scroll is uncovered from the
   top at the same pace and easing as the rod falls, so the rod is always at the
   paper's edge. (Animating the paper's own torn-edge clip-path could not
   interpolate between different point counts, so it jumped open mid-way.) */
.tour-scroll--in { animation: tour-unroll .8s var(--ease-ink) backwards; }
@keyframes tour-unroll {
  from { clip-path: inset(-12px -26px calc(100% - 14px) -26px); }
  to { clip-path: inset(-12px -26px 0 -26px); }
}

.tour-kicker {
  display: flex; align-items: center; gap: 12px;
  font: 700 13px/1.2 var(--font-body);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--shu-deep);
}
.tour-seal {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .18), transparent 50%),
    var(--shu);
  color: var(--washi);
  font: 400 24px/1 var(--font-brush);
  letter-spacing: 0;
  box-shadow: inset 0 0 0 2px rgba(241, 230, 207, .55), inset 0 0 0 4px var(--shu), inset 0 0 8px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  transform: rotate(-5deg);
  animation: tour-stamp .5s cubic-bezier(.2, 1.5, .4, 1) .15s both;
}
.tour-seal--wide { width: auto; padding: 0 7px; font-size: 19px; }
@keyframes tour-stamp { from { opacity: 0; transform: scale(1.9) rotate(-14deg); } }
.tour-title {
  margin: 14px 0 0;
  font: 800 clamp(27px, 2.5vw, 38px)/1.12 var(--font-display);
  letter-spacing: .005em;
  color: var(--sumi);
  text-wrap: balance;
}
.tour-rule {
  display: block; height: 2px; margin: 14px 0 16px;
  background: var(--gold-rule);
  opacity: .9;
}
.tour-voice { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: start; }
.tour-voice__who { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tour-voice__face { width: 62px; height: 62px; display: block; filter: drop-shadow(0 3px 5px rgba(22, 19, 15, .35)); }
.tour-voice__name {
  font: italic 600 13px/1.1 var(--font-serif);
  color: var(--sumi-soft);
  text-align: center;
}
.tour-ine { width: 100%; height: 100%; display: block; }
.tour-ine__glow { animation: tour-flicker 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tour-flicker { 0%, 100% { opacity: 1; } 40% { opacity: .72; } 60% { opacity: .9; } }
.tour-say p {
  margin: 0 0 12px;
  font: 500 17.5px/1.62 var(--font-display);
  color: var(--sumi);
  text-wrap: pretty;
}
.tour-say p:last-child { margin-bottom: 0; }
.tour-say em { font-style: normal; color: var(--shu-deep); font-weight: 700; }
.tour-say strong { color: var(--shu-deep); }

/* ink reveal: a brush sweep, left to right, fast enough to read at once */
.tour-reveal {
  -webkit-mask-image: linear-gradient(90deg, #000 0 38%, transparent 62%);
  mask-image: linear-gradient(90deg, #000 0 38%, transparent 62%);
  -webkit-mask-size: 270% 100%;
  mask-size: 270% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: tour-ink .7s var(--ease-ink) both;
  animation-delay: calc(var(--d, 0) * 110ms + 180ms);
}
@keyframes tour-ink {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(1.5px); transform: translateY(3px); }
}
.tour-scroll--instant,
.tour-scroll--instant .tour-reveal,
.tour-scroll--instant .tour-paper,
.tour-scroll--instant .tour-rod--bot,
.tour-scroll--instant .tour-seal { animation: none !important; }

.tour-extra { margin-top: 18px; }
.tour-hintline {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 0;
  font: 700 15.5px/1.3 var(--font-body);
  color: var(--shu-deep);
  transition: opacity .4s;
}
.tour-hintline i {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--shu);
  box-shadow: 0 0 0 0 rgba(200, 67, 43, .6);
  animation: tour-ping 1.6s ease-out infinite;
}
@keyframes tour-ping { from { box-shadow: 0 0 0 0 rgba(200, 67, 43, .6); } to { box-shadow: 0 0 0 12px rgba(200, 67, 43, 0); } }
.tour-hintline--done { opacity: .5; }
.tour-hintline--done i { animation: none; background: var(--matsu); }

/* goal box (prologue) */
.tour-goal {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(142, 33, 22, .35);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(200, 67, 43, .09), rgba(214, 168, 76, .08));
  box-shadow: inset 0 0 0 3px rgba(241, 230, 207, .6);
}
.tour-goal__seal {
  flex: none; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--shu); color: var(--washi);
  font: 30px/1 var(--font-brush);
  box-shadow: inset 0 0 0 2px rgba(241, 230, 207, .6), 0 2px 4px rgba(0, 0, 0, .25);
}
.tour-goal p { margin: 0; font: 500 17px/1.5 var(--font-display); color: var(--sumi); }
.tour-goal strong { color: var(--shu-deep); }

/* cost table */
.tour-costs { display: grid; gap: 2px; border-top: 1px solid rgba(22, 19, 15, .15); }
.tour-cost {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(22, 19, 15, .2);
}
.tour-cost__name { display: flex; flex-direction: column; min-width: 0; }
.tour-cost__name strong { font: 700 16px/1.2 var(--font-display); color: var(--sumi); }
.tour-cost__name span { font: italic 500 14.5px/1.2 var(--font-serif); color: var(--sumi-soft); }
.tour-cost__cards { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tour-cost__cards img {
  width: 36px; height: 27px; object-fit: cover;
  border-radius: 3px;
  border: 1.5px solid #fbf3e1;
  box-shadow: 0 1px 3px rgba(22, 19, 15, .45);
}

/* chips */
.tour-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tour-chips li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px;
  border-radius: 4px;
  background: rgba(22, 19, 15, .05);
  border: 1px solid rgba(22, 19, 15, .14);
  border-top: 3px solid var(--shu);
}
.tour-chips b { font: 700 15px/1.2 var(--font-display); color: var(--sumi); }
.tour-chips span { font: 500 14px/1.3 var(--font-body); color: var(--sumi-soft); }

/* finale buttons */
.tour-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.tour-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px;
  border-radius: 4px;
  border: 1.5px solid var(--sumi);
  background: transparent;
  color: var(--sumi);
  font: 700 16px var(--font-display);
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.tour-btn:hover { background: rgba(22, 19, 15, .06); }
.tour-btn:active { transform: translateY(1px); }
.tour-btn--primary {
  border-color: var(--shu-deep);
  background: linear-gradient(180deg, #d4553b, var(--shu) 55%, var(--shu-deep));
  color: var(--washi);
  box-shadow: inset 0 0 0 1px rgba(240, 216, 150, .6), 0 4px 12px rgba(142, 33, 22, .35);
}
.tour-btn--primary:hover { background: linear-gradient(180deg, #dc6347, #cf4a30 55%, var(--shu-deep)); box-shadow: inset 0 0 0 1px var(--kin-pale), 0 6px 18px rgba(142, 33, 22, .45); }
.tour-btn__seal {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px;
  background: var(--washi); color: var(--shu-deep);
  font: 18px/1 var(--font-brush);
}
.tour-link {
  min-height: 44px; padding: 0 6px;
  border: 0; background: none;
  font: italic 600 17px var(--font-serif);
  color: var(--shu-deep);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(142, 33, 22, .4);
  cursor: pointer;
}

/* ------------------------------------------------------------- footer */
.tour-foot {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: 10px clamp(16px, 3vw, 40px) max(14px, env(safe-area-inset-bottom));
}
.tour-nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 48px; min-height: 50px; padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(214, 168, 76, .5);
  background: rgba(8, 13, 24, .4);
  color: var(--text);
  font: 600 16px var(--font-body);
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, opacity .2s;
}
.tour-nav:hover:not(:disabled) { border-color: var(--kin); background: rgba(214, 168, 76, .14); }
.tour-nav:active:not(:disabled) { transform: translateY(1px); }
.tour-nav:disabled { opacity: .3; cursor: default; }
.tour-nav--next {
  min-width: 150px;
  border-color: var(--kin);
  background:
    var(--paper-grain),
    linear-gradient(180deg, #f8efda, var(--washi) 60%, var(--washi-dim));
  color: var(--sumi);
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(214, 168, 76, .18), 0 6px 18px rgba(0, 0, 0, .4);
}
.tour-nav--next:hover { background: var(--paper-grain), linear-gradient(180deg, #fff6e2, #f4e9d2 60%, var(--washi)); }
.tour-nav[hidden] { display: none; }
.tour-progress-wrap { flex: 1; display: flex; justify-content: center; min-width: 0; }
.tour-progress { display: flex; align-items: center; gap: 9px; }
.tour-progress__bead {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(214, 168, 76, .6);
  background: transparent;
  transition: background .35s, transform .35s, border-radius .35s, border-color .35s;
}
.tour-progress__bead.done { background: var(--kin); border-color: var(--kin-pale); }
.tour-progress__bead.now {
  width: 16px; height: 16px; border-radius: 3px;
  border-color: rgba(241, 230, 207, .7);
  background: var(--shu);
  transform: rotate(-8deg);
  box-shadow: 0 0 12px rgba(200, 67, 43, .7);
}

:where(.tour, .coach) button:focus-visible {
  outline: 2px solid var(--kin-pale);
  outline-offset: 3px;
}

/* ----------------------------------------------------- island pieces */
.tour-isle__waves { animation: tour-sea 9s ease-in-out infinite alternate; }
@keyframes tour-sea { from { transform: translateX(-6px); } }
.tour-hex__shade { fill: rgba(5, 8, 16, .5); }
.tour-hex__edge { fill: none; stroke: rgba(22, 19, 15, .75); stroke-width: 2.2; stroke-linejoin: round; }
.tour-hex__lit {
  fill: rgba(255, 226, 150, .3);
  stroke: var(--kin-pale); stroke-width: 4; stroke-linejoin: round;
  opacity: 0;
  transition: opacity .35s;
}
.tour-hex--glow .tour-hex__lit { opacity: 1; fill: rgba(255, 230, 160, .42); stroke-width: 5; filter: drop-shadow(0 0 6px rgba(255, 214, 120, .95)); animation: tour-glow 1.1s ease-in-out infinite alternate; }
@keyframes tour-glow { from { fill: rgba(255, 226, 150, .12); stroke-width: 2.5; } }
.tour-hex__dark { fill: #05080f; opacity: 0; transition: opacity .9s; }
.tour-hex--shadow .tour-hex__dark { opacity: .62; }
.tour-hex--shadow .tour-token { opacity: .4; transition: opacity .9s; }
.tour-isle--assemble .tour-hex {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: tour-hex-in .75s var(--ease-swell) both;
  animation-delay: calc(var(--i) * 120ms + 150ms);
}
@keyframes tour-hex-in { from { opacity: 0; transform: translateY(-26px) scale(.6) rotate(-8deg); } }
.tour-isle--assemble .tour-token {
  animation: tour-pop .5s var(--ease-swell) both;
  animation-delay: calc(var(--i) * 90ms + 1150ms);
}
.tour-token { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes tour-pop { from { opacity: 0; transform: scale(.2); } }
.tour-token__disc { fill: #f4e9cf; stroke: var(--sumi); stroke-width: 1.4; filter: drop-shadow(0 1.5px 1px rgba(0, 0, 0, .5)); }
.tour-token__num { font: 700 15px var(--font-display); fill: var(--sumi); }
.tour-token__pip { fill: var(--sumi); }
.tour-token--hot .tour-token__num, .tour-token--hot .tour-token__pip { fill: var(--shu); }

.tour-path line { stroke-linecap: round; fill: none; }
.tour-path__under { stroke: var(--sumi); stroke-width: 9; }
.tour-path__ink { stroke: #b0382a; stroke-width: 5.4; transition: stroke .6s; }
.tour-path__glow { stroke: var(--kin-pale); stroke-width: 2.6; stroke-dasharray: 5 9; opacity: 0; transition: opacity .5s; }
.tour-path--draw .tour-path__under, .tour-path--draw .tour-path__ink {
  stroke-dasharray: var(--len) 999;
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .65s ease-out;
}
.tour-path--draw.go .tour-path__under, .tour-path--draw.go .tour-path__ink { stroke-dashoffset: 0; }
.tour-path--support .tour-path__ink { stroke: #c98a2c; }
.tour-path--support .tour-path__glow { opacity: 1; animation: tour-flow .9s linear infinite; }
@keyframes tour-flow { from { stroke-dashoffset: 14; } }

.tour-piece {
  translate: -50% -82%;
  aspect-ratio: 1;
  padding: 0; margin: 0; border: 0; background: none;
  isolation: isolate;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55));
  transform-origin: 50% 90%;
}
.tour-piece img { display: block; width: 100%; height: auto; pointer-events: none; }
button.tour-piece { cursor: pointer; }
button.tour-piece:disabled { cursor: default; }
.tour-piece--hidden { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)) saturate(.45) brightness(.82) hue-rotate(-10deg); }
.tour-piece--hidden.tour-piece--hero { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .6)) saturate(.45) brightness(.82); }
.tour-piece--hidden::before {
  content: ''; position: absolute; inset: -36%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 210, 120, .6), rgba(240, 184, 80, .25) 50%, transparent);
  animation: tour-flicker 2.4s ease-in-out infinite;
}
.tour-piece--tap { animation: tour-bob 1.6s ease-in-out infinite; }
@keyframes tour-bob { 50% { transform: translateY(-4%); } }
.tour-piece--bloom { animation: tour-bloom-in .85s var(--ease-swell) both; }
@keyframes tour-bloom-in { from { opacity: 0; transform: scale(.35); filter: blur(6px); } }
.tour-piece--sink { animation: tour-sink .7s ease-in both; }
@keyframes tour-sink { to { opacity: 0; transform: translateY(16%) scale(.9); filter: blur(4px) brightness(.4); } }
.tour-piece--risen { animation: tour-risen .9s var(--ease-ink) both; }
@keyframes tour-risen { from { opacity: 0; transform: translateY(8%) scale(.94); filter: blur(4px); } }
.tour-piece--hero { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .6)); }

.tour-tapring {
  width: 19%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--kin-pale);
  box-shadow: 0 0 14px rgba(240, 216, 150, .6), inset 0 0 10px rgba(240, 216, 150, .4);
  pointer-events: none;
  animation: tour-ring 1.6s ease-out infinite;
}
@keyframes tour-ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

.tour-bloom {
  width: 26%; aspect-ratio: 1; border-radius: 47% 53% 44% 56%;
  background: radial-gradient(closest-side, rgba(22, 19, 15, .7), rgba(22, 19, 15, .25) 60%, transparent);
  pointer-events: none;
  opacity: 0;
  animation: tour-bloom 1.1s ease-out both;
}
.tour-bloom--gold { background: radial-gradient(closest-side, rgba(255, 216, 130, .85), rgba(214, 168, 76, .3) 60%, transparent); }
@keyframes tour-bloom { from { opacity: .9; transform: scale(.1); } }
.tour-nope {
  width: 6.5%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--shu);
  background: rgba(241, 230, 207, .85);
  box-shadow: 0 0 10px rgba(200, 67, 43, .55);
  animation: tour-pop .45s var(--ease-swell) both;
  transition: opacity .5s;
}
.tour-nope::before, .tour-nope::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 64%; height: 2.5px;
  background: var(--shu); border-radius: 2px;
  translate: -50% -50%; rotate: 45deg;
}
.tour-nope::after { rotate: -45deg; }
.tour-nope.out { opacity: 0; }

.tour-mist {
  width: 16%; aspect-ratio: 1.6; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 232, 245, .75), rgba(200, 212, 235, .25) 60%, transparent);
  filter: blur(2px);
  pointer-events: none;
  opacity: 0;
  animation: tour-mist 1.8s ease-out both;
  animation-delay: calc(var(--i) * 90ms);
}
.tour-mist--big { width: 26%; }
@keyframes tour-mist { from { opacity: .95; transform: translateY(10%) scale(.6); } 60% { opacity: .7; } to { transform: translateY(-60%) scale(1.5); } }

.tour-pips { display: flex; gap: .9cqw; translate: -50% 0; pointer-events: none; }
.tour-pips i {
  display: block; width: 2.6cqw; height: 2.6cqw; min-width: 7px; min-height: 7px; border-radius: 50%;
  background: rgba(8, 13, 24, .75);
  border: 1px solid rgba(240, 216, 150, .6);
  transition: background .3s, box-shadow .3s;
}
.tour-pips i.on {
  background: radial-gradient(circle at 35% 30%, #ff9a7e, var(--shu) 55%, var(--shu-deep));
  border-color: #ffc2b0;
  box-shadow: 0 0 8px rgba(255, 90, 60, .85);
}
.tour-pips i.pop { animation: tour-pip .5s var(--ease-swell); }
@keyframes tour-pip { from { transform: scale(2.2); } }
.tour-pips--big { gap: 2.2cqw; }
.tour-pips--big i { width: 6.4cqw; height: 6.4cqw; border-width: 2px; }
.tour-pips__label { font: 600 max(12px, 3.3cqw)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }

.tour-counter {
  translate: -50% -50%;
  display: flex; align-items: center; gap: 1.6cqw;
  padding: 1cqw 2.6cqw 1cqw 1cqw;
  border-radius: 999px;
  background: rgba(8, 13, 24, .7);
  border: 1px solid rgba(214, 168, 76, .6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.tour-counter img { width: 8cqw; height: 8cqw; border-radius: 50%; border: 1.5px solid var(--kin); }
.tour-counter__n { font: 800 max(15px, 5cqw)/1 var(--font-display); color: var(--kin-pale); }
.tour-counter small { font: 600 max(11px, 2.8cqw)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.tour-counter.pop { animation: tour-pip .6s var(--ease-swell); }

.tour-hand {
  width: 46%; height: 15%;
  display: flex; align-items: center;
  padding: 0 2.4%;
  border-radius: 10px;
  background: rgba(8, 13, 24, .55);
  border: 1px solid rgba(214, 168, 76, .4);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .5);
}
.tour-hand--small { width: 36%; height: 13%; }
.tour-hand__label {
  position: absolute; left: 10px; top: 0; translate: 0 -120%;
  font: 600 max(11px, 2.7cqw)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim);
  white-space: nowrap;
}
.tour-hand__card {
  width: 13cqw; aspect-ratio: 4 / 3; object-fit: cover;
  margin-left: -6.5cqw;
  border-radius: 3px; border: 1.5px solid #fbf3e1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55);
  animation: tour-pop .4s var(--ease-swell) both;
}
.tour-hand__label + .tour-hand__card { margin-left: 0; }
.tour-fly {
  translate: none;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; border: 1.5px solid #fbf3e1;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .6);
  pointer-events: none;
  z-index: 5;
}
.tour-fly--orasho { aspect-ratio: 1; border-radius: 50%; border-color: var(--kin); box-shadow: 0 0 22px 6px rgba(255, 210, 120, .75); }

/* dice */
.tour-dice {
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqw;
  min-width: 44px; min-height: 44px; padding: 6px 8px;
  border: 0; border-radius: 12px; background: none;
  color: var(--text);
  cursor: pointer;
}
.tour-dice:hover .tour-die { box-shadow: 0 3px 0 #a8946b, 0 0 16px rgba(240, 216, 150, .6); }
.tour-dice__pair { display: flex; gap: 2.4cqw; }
.tour-dice__label { font: 600 max(12px, 3.1cqw)/1.1 var(--font-body); letter-spacing: .06em; color: var(--kin-pale); white-space: nowrap; }
.tour-die {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: 10.5cqw; height: 10.5cqw; min-width: 30px; min-height: 30px;
  padding: 1.2cqw;
  border-radius: 22%;
  background: linear-gradient(145deg, #fdf6e6, #e4d3ad);
  box-shadow: 0 3px 0 #a8946b, 0 6px 12px rgba(0, 0, 0, .5);
}
.tour-die i { display: block; border-radius: 50%; margin: 16%; }
.tour-die i.on { background: var(--sumi); }
.tour-die[data-n="1"] i.on { background: var(--shu); margin: 0; }
.tour-dice:not(.tour-dice--rolled):not(.tour-dice--rolling) .tour-die { animation: tour-wiggle 2.2s ease-in-out infinite; }
.tour-dice:not(.tour-dice--rolled):not(.tour-dice--rolling) .tour-die + .tour-die { animation-delay: .2s; }
@keyframes tour-wiggle { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-9deg) translateY(-6%); } 88% { transform: rotate(7deg); } }
.tour-dice--rolling .tour-die { animation: tour-tumble .72s cubic-bezier(.3, .7, .4, 1); }
.tour-dice--rolling .tour-die + .tour-die { animation-direction: reverse; }
@keyframes tour-tumble {
  0% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(18%, -60%) rotate(200deg); }
  60% { transform: translate(-10%, -20%) rotate(400deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(720deg); }
}
.tour-badge {
  display: flex; gap: 1.6cqw; padding: 1.4cqw;
  border-radius: 10px; background: rgba(8, 13, 24, .65); border: 1px solid rgba(214, 168, 76, .5);
  animation: tour-pop .5s var(--ease-swell) both;
}
.tour-badge .tour-die { width: 7.5cqw; height: 7.5cqw; min-width: 24px; min-height: 24px; }
.tour-badge--seven { border-color: var(--shu); box-shadow: 0 0 18px rgba(200, 67, 43, .6); }

/* exposure */
.tour-spot {
  width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 216, 150, .22), rgba(240, 216, 150, .06) 60%, transparent);
}
.tour-hanko {
  display: grid; place-items: center;
  width: 23%; aspect-ratio: 1;
  border-radius: 10%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .14), transparent 30%),
    radial-gradient(circle at 80% 75%, rgba(0, 0, 0, .18), transparent 35%),
    var(--shu);
  color: var(--washi);
  box-shadow: inset 0 0 0 .8cqw rgba(241, 230, 207, .85), inset 0 0 0 1.6cqw var(--shu), 0 10px 26px rgba(0, 0, 0, .55);
  rotate: -9deg;
  z-index: 6;
  animation: tour-slam .5s cubic-bezier(.2, 1.4, .4, 1) both;
  transition: opacity .6s;
}
.tour-hanko span { font: 400 9.5cqw/1 var(--font-brush); writing-mode: vertical-rl; letter-spacing: .05em; }
.tour-hanko.fade { opacity: .3; }
.tour-hanko--win { width: 16%; rotate: -12deg; }
.tour-hanko--win span { font-size: 6.4cqw; }
@keyframes tour-slam { from { opacity: 0; transform: scale(2.8); } 70% { transform: scale(.94); } }
.tour-shake { animation: tour-shake .4s ease-out .32s; }
@keyframes tour-shake { 20% { transform: translate(-1.2%, .6%); } 40% { transform: translate(1%, -.8%); } 60% { transform: translate(-.6%, .4%); } 80% { transform: translate(.4%, 0); } }
.tour-choices { display: flex; gap: 3cqw; width: 94%; }
.tour-choices[hidden] { display: none; }
.tour-choice {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  min-height: 48px; padding: 2.2cqw 2cqw 2.4cqw;
  border-radius: 6px;
  border: 1.5px solid var(--kin);
  background: var(--paper-grain), linear-gradient(180deg, #f8efda, var(--washi) 60%, var(--washi-dim));
  color: var(--sumi);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
  animation: tour-rise .5s var(--ease-ink) both;
  transition: transform .15s, opacity .3s, box-shadow .2s;
}
.tour-choice + .tour-choice { animation-delay: .1s; }
.tour-choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .5), 0 0 0 3px rgba(214, 168, 76, .3); }
.tour-choice--dark { background: linear-gradient(180deg, #2a3756, var(--ai) 60%, var(--ai-deep)); color: var(--text); }
.tour-choice b { font: 700 max(14px, 4.2cqw)/1.15 var(--font-display); }
.tour-choice small { font: 500 max(12px, 3.3cqw)/1.2 var(--font-body); opacity: .8; }
.tour-choice__cards { display: flex; gap: 1cqw; height: 7cqw; min-height: 20px; }
.tour-choice__cards img { height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; border: 1px solid #fbf3e1; }
.tour-choice--dark .tour-choice__cards img { aspect-ratio: 1; }
.tour-choice:disabled { cursor: default; opacity: .45; }
.tour-choice.chosen { opacity: 1; box-shadow: 0 0 0 3px var(--kin-pale), 0 8px 20px rgba(0, 0, 0, .5); }
@keyframes tour-rise { from { opacity: 0; transform: translateY(14px); } }

/* magistrate */
.tour-magistrate {
  width: 19%;
  translate: -50% -86%;
  z-index: 4;
  transition: left 1.1s var(--ease-ink), top 1.1s var(--ease-ink);
}
.tour-magistrate img { position: relative; display: block; width: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .7)); }
.tour-magistrate__shadow {
  position: absolute; left: 50%; bottom: -4%;
  width: 170%; height: 42%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
}
.tour-magistrate.move img { animation: tour-hop 1.1s var(--ease-ink); }
@keyframes tour-hop { 40% { transform: translateY(-14%) rotate(-4deg); } }
.tour-minifan { width: 48%; height: 15%; }
.tour-minifan img {
  position: absolute; bottom: 0;
  left: calc(var(--i) * 8.4%);
  width: 32%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; border: 1.5px solid #fbf3e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .55);
  rotate: calc((var(--i) - 4) * 5deg);
  transform-origin: 50% 160%;
  animation: tour-pop .4s var(--ease-swell) both;
  animation-delay: calc(var(--i) * 50ms);
  transition: transform .7s ease-in, opacity .7s ease-in;
}
.tour-minifan img.drop { transform: translateY(70%) rotate(24deg); opacity: 0; }
.tour-minifan__label { font: 600 max(13px, 3.6cqw)/1.2 var(--font-body); color: var(--kin-pale); white-space: nowrap; letter-spacing: .04em; }

/* prologue */
.tour-print {
  position: absolute; left: 6%; right: 6%; top: 7%; bottom: 13%;
  overflow: hidden;
  border-radius: 2px;
  border: 1.2cqw solid #2a1c10;
  outline: 1px solid var(--kin);
  outline-offset: -1.6cqw;
  box-shadow: 0 0 0 1px var(--kin), 0 20px 50px rgba(0, 0, 0, .65);
}
.tour-print img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.9) contrast(1.05);
  animation: tour-kenburns 18s ease-in-out infinite alternate;
}
@keyframes tour-kenburns { from { transform: scale(1.14) translate(-3%, 2%); } }
.tour-print__glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 22%, rgba(255, 200, 110, .5), transparent 30%);
  mix-blend-mode: screen;
  animation: tour-flicker 3s ease-in-out infinite;
}
.tour-print::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--paper-grain), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(8, 13, 24, .55));
  mix-blend-mode: multiply;
}
.tour-stage--prologue .tour-layer > .tour-vert {
  left: 9%; top: 52%;
  translate: -50% -50%;
  padding: 3.2cqw 1.6cqw;
  background: linear-gradient(180deg, var(--shu), var(--shu-deep));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55), inset 0 0 0 .5cqw rgba(240, 216, 150, .6);
  color: var(--washi);
  font: 400 9cqw/1.05 var(--font-brush);
  writing-mode: vertical-rl;
  animation: tour-banner 1s var(--ease-ink) .3s both;
}
@keyframes tour-banner { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.tour-year {
  left: 85%; top: 86%;
  display: grid; place-items: center;
  width: 18%; aspect-ratio: 1; border-radius: 50%;
  background: var(--shu);
  color: var(--washi);
  box-shadow: inset 0 0 0 .7cqw rgba(241, 230, 207, .8), inset 0 0 0 1.4cqw var(--shu), 0 8px 18px rgba(0, 0, 0, .5);
  rotate: 8deg;
  animation: tour-slam .6s cubic-bezier(.2, 1.4, .4, 1) .9s both;
}
.tour-year span { font: 800 5cqw/1 var(--font-display); letter-spacing: .02em; }
.tour-moon {
  left: 80%; top: 4%;
  width: 14%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff8e4, #f0d896 60%, #d6a84c);
  box-shadow: 0 0 40px 10px rgba(240, 216, 150, .35);
  z-index: -1;
}
.tour-firefly {
  left: var(--x); top: var(--y);
  width: 1.4cqw; height: 1.4cqw; min-width: 4px; min-height: 4px; border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 8px 3px rgba(255, 220, 120, .8);
  animation: tour-firefly var(--t, 6s) ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) * -1);
  pointer-events: none;
}
@keyframes tour-firefly {
  0%, 100% { transform: translate(0, 0); opacity: .2; }
  25% { opacity: 1; }
  50% { transform: translate(14px, -26px); opacity: .5; }
  75% { transform: translate(-8px, -44px); opacity: 1; }
}

/* land: the five goods */
.tour-fan {
  left: 50%; top: 88%;
  display: flex; justify-content: center; gap: 1.8cqw;
  width: 96%;
}
.tour-fan__card {
  margin: 0;
  width: 17cqw;
  display: flex; flex-direction: column; align-items: center; gap: .8cqw;
  rotate: calc((var(--i) - 2) * 3deg);
  animation: tour-deal .6s var(--ease-swell) both;
  animation-delay: calc(var(--i) * 120ms + 1700ms);
}
@keyframes tour-deal { from { opacity: 0; transform: translateY(-40%) rotate(-12deg); } }
.tour-fan__card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 3px; border: 2px solid #fbf3e1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .55);
}
.tour-fan__card figcaption {
  font: 700 max(12px, 3.3cqw)/1 var(--font-display);
  color: var(--text);
  text-transform: capitalize;
  letter-spacing: .03em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}

/* conceal / re-emerge diagram */
.tour-arc { fill: none; stroke-width: 2.6; stroke-dasharray: 7 7; stroke-linecap: round; animation: tour-flow-arc 1.4s linear infinite; }
.tour-arc--down { stroke: var(--kin); }
.tour-arc--up { stroke: #e2654a; }
@keyframes tour-flow-arc { from { stroke-dashoffset: 28; } }
.tour-arc__head { fill: var(--kin); }
.tour-arc__head--up { fill: #e2654a; }
.tour-pole {
  width: 36%;
  display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  text-align: center;
  animation: tour-rise .7s var(--ease-ink) both;
}
.tour-pole--dark { animation-delay: .2s; }
.tour-pole img { width: 72%; display: block; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.tour-pole--day img { filter: drop-shadow(0 0 18px rgba(255, 220, 140, .45)) drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.tour-pole--dark::before {
  content: ''; position: absolute; left: 50%; top: 52%; width: 110%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 200, 110, .35), rgba(140, 123, 171, .18) 55%, transparent);
  animation: tour-flicker 2.6s ease-in-out infinite;
}
.tour-pole__kanji { font: 400 9cqw/1 var(--font-brush); color: var(--kin-pale); text-shadow: 0 0 14px rgba(214, 168, 76, .5); }
.tour-pole--dark .tour-pole__kanji { color: #c9bde0; text-shadow: 0 0 14px rgba(140, 123, 171, .7); }
.tour-pole__name { font: 700 max(14px, 4.6cqw)/1.1 var(--font-display); color: var(--text); }
.tour-pole__sub { font: italic 500 max(13px, 3.8cqw)/1.1 var(--font-serif); color: var(--text-dim); }
.tour-arclabel {
  display: flex; flex-direction: column; align-items: center; gap: .4cqw;
  padding: 1.4cqw 3cqw;
  border-radius: 4px;
  background: var(--paper-grain), linear-gradient(180deg, #f8efda, var(--washi));
  color: var(--sumi);
  border-top: .8cqw solid var(--kin);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  white-space: nowrap;
  animation: tour-pop .5s var(--ease-swell) .5s both;
}
.tour-arclabel--up { border-top-color: var(--shu); animation-delay: .8s; }
.tour-arclabel b { font: 700 max(14px, 4.4cqw)/1.1 var(--font-display); }
.tour-arclabel span { font: 500 max(12px, 3.3cqw)/1.15 var(--font-body); color: var(--sumi-soft); }
.tour-trap { width: 17%; }
.tour-trap img { width: 100%; display: block; border-radius: 4px; border: 1px solid var(--kin); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); }
.tour-wait {
  display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  animation: tour-pop .5s var(--ease-swell) 1.2s both;
}
.tour-wait span {
  display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%;
  background: var(--ai-deep); color: var(--kin-pale);
  border: 1.5px solid var(--kin);
  font: 5.8cqw/1 var(--font-brush);
}
.tour-wait small { font: 600 max(11px, 2.9cqw)/1 var(--font-body); color: var(--text-dim); letter-spacing: .06em; white-space: nowrap; }

/* acts */
.tour-seasons {
  left: 50%; top: 42%;
  width: 94%; height: 76%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.6cqw;
}
.tour-season {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.2cqw;
  padding: 3.6cqw 1.4cqw 3cqw;
  border-radius: 3px;
  border: 1px solid rgba(214, 168, 76, .7);
  box-shadow: inset 0 0 0 .7cqw rgba(255, 255, 255, .25), 0 12px 24px rgba(0, 0, 0, .5);
  color: var(--sumi);
  text-align: center;
  transform-origin: 50% 0;
  animation: tour-hang .9s var(--ease-swell) both;
  animation-delay: calc(var(--i) * 220ms + 100ms);
}
@keyframes tour-hang { from { opacity: 0; transform: scaleY(.1); } }
.tour-season::after { content: ''; position: absolute; inset: 0; background: var(--paper-grain); pointer-events: none; mix-blend-mode: multiply; }
.tour-season--spring { background: linear-gradient(180deg, #fbeceb, #f1cdd0 55%, #d79aa2); }
.tour-season--autumn { background: linear-gradient(180deg, #f8e6c6, #e5a46c 55%, #b5532e); }
.tour-season--winter { background: linear-gradient(180deg, #f2f5f9, #c8d3e2 55%, #7f91ad); }
.tour-season > span { position: relative; z-index: 1; }
.tour-season__act { font: 400 max(11px, 3.4cqw)/1 var(--font-brush); color: var(--shu-deep); letter-spacing: .1em; }
.tour-season__kanji { font: 400 16cqw/1 var(--font-brush); color: var(--sumi); margin: .6cqw 0; text-shadow: 0 2px 0 rgba(255, 255, 255, .35); }
.tour-season__name { font: 800 max(14px, 4.6cqw)/1 var(--font-display); }
.tour-season__rounds { font: 500 max(11px, 3cqw)/1.1 var(--font-body); color: var(--sumi-soft); }
.tour-season__pips { display: flex; gap: 1cqw; margin-top: auto; }
.tour-season__pips i { display: block; width: 3.4cqw; height: 3.4cqw; min-width: 8px; min-height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a7e, var(--shu) 55%, var(--shu-deep)); border: 1px solid rgba(255, 255, 255, .7); }
.tour-season__limit { font: 700 max(11px, 3cqw)/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--shu-deep); }
.tour-season__gift {
  display: flex; flex-direction: column; align-items: center; gap: .8cqw;
  margin-top: auto;
  animation: tour-pop .5s var(--ease-swell) both;
  animation-delay: calc(var(--i, 1) * 220ms + 900ms);
}
.tour-season__gift img { width: 8cqw; height: 8cqw; border-radius: 50%; border: 1.5px solid var(--kin); background: var(--washi); box-shadow: 0 0 12px rgba(240, 216, 150, .9); }
.tour-season__gift small { font: 700 max(10.5px, 2.7cqw)/1.1 var(--font-body); color: var(--sumi); }
.tour-season__gift + .tour-season__pips { margin-top: 1.4cqw; }
.tour-fall {
  position: absolute; top: -8%; left: var(--x);
  width: 2.8cqw; height: 2.8cqw; min-width: 7px; min-height: 7px;
  animation: tour-fall var(--t, 6s) linear infinite;
  animation-delay: calc(var(--d, 0s) * -1);
  pointer-events: none;
}
.tour-season--spring .tour-fall { background: #f7c9cf; border-radius: 80% 0 80% 0; box-shadow: inset -1px -1px 0 rgba(200, 100, 120, .4); }
.tour-season--autumn .tour-fall { background: #c8432b; clip-path: polygon(50% 0, 62% 32%, 100% 28%, 72% 55%, 86% 100%, 50% 74%, 14% 100%, 28% 55%, 0 28%, 38% 32%); }
.tour-season--winter .tour-fall { background: #fff; border-radius: 50%; box-shadow: 0 0 4px rgba(255, 255, 255, .9); width: 1.8cqw; height: 1.8cqw; }
@keyframes tour-fall {
  from { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(3cqw, 24cqw) rotate(180deg); }
  to { transform: translate(-2cqw, 60cqw) rotate(360deg); }
}
.tour-timeline {
  left: 50%; top: 89%;
  width: 88%;
  display: flex; flex-direction: column; align-items: center; gap: 2cqw;
}
.tour-timeline::before {
  content: ''; display: block; width: 100%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--sakura), var(--kin) 50%, #c8d3e2);
}
.tour-timeline__mark {
  position: absolute; top: -5px; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--washi); border: 2px solid var(--shu);
  box-shadow: 0 0 10px rgba(240, 216, 150, .8);
  animation: tour-march 7s ease-in-out infinite;
}
@keyframes tour-march { from { left: 0; } 90%, to { left: calc(100% - 13px); } }
.tour-timeline span { font: italic 500 max(13px, 3.8cqw)/1 var(--font-serif); color: var(--text-dim); }

/* winning ledger */
.tour-ledger {
  left: 50%; top: 47%;
  width: 90%;
  padding: 4.4cqw 5cqw 4cqw;
  color: var(--sumi);
  background: var(--paper-grain), linear-gradient(180deg, #f8efda, var(--washi) 50%, #eadbbd);
  border-radius: 2px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), inset 0 0 0 .8cqw rgba(255, 255, 255, .3);
  clip-path: polygon(0 1%, 3% 0, 97% .6%, 100% 0, 99.4% 50%, 100% 99%, 96% 100%, 4% 99.4%, 0 100%, .6% 50%);
}
.tour-ledger__row {
  display: grid; grid-template-columns: 11cqw minmax(0, 1fr) auto; align-items: center; gap: 3cqw;
  padding: 2cqw 0;
  border-bottom: 1px dashed rgba(22, 19, 15, .25);
  opacity: .12;
  transform: translateX(-3%);
  transition: opacity .45s var(--ease-ink), transform .45s var(--ease-ink);
}
.tour-ledger__row.in { opacity: 1; transform: none; }
.tour-ledger__row img { width: 11cqw; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1.5px solid var(--kin); }
.tour-ledger__row img.wide { aspect-ratio: 4 / 3; border-radius: 3px; height: auto; }
.tour-ledger__name { display: flex; flex-direction: column; gap: .5cqw; min-width: 0; }
.tour-ledger__name b { font: 700 max(14px, 4.4cqw)/1.1 var(--font-display); }
.tour-ledger__name small { font: italic 500 max(13px, 3.6cqw)/1.1 var(--font-serif); color: var(--sumi-soft); }
.tour-ledger__pts { font: 800 max(17px, 6cqw)/1 var(--font-display); color: var(--shu-deep); }
.tour-ledger__row.zero .tour-ledger__pts { color: var(--text-faint); }
.tour-ledger__row.zero b { text-decoration: line-through; text-decoration-color: rgba(142, 33, 22, .6); text-decoration-thickness: 2px; }
.tour-ledger__total { display: flex; align-items: baseline; justify-content: flex-end; gap: 2cqw; margin-top: 2.6cqw; }
.tour-ledger__total span { font: 700 max(11px, 3cqw)/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--sumi-soft); }
.tour-ledger__total b { font: 800 max(26px, 10cqw)/1 var(--font-display); color: var(--sumi); }
.tour-ledger__total small { font: 600 max(14px, 4.4cqw)/1 var(--font-display); color: var(--sumi-soft); }
.tour-beads { display: flex; justify-content: center; gap: 1.8cqw; margin-top: 2.4cqw; }
.tour-beads i {
  display: block; width: 5.2cqw; height: 5.2cqw; min-width: 12px; min-height: 12px; border-radius: 50%;
  background: rgba(22, 19, 15, .12); border: 1px solid rgba(22, 19, 15, .3);
  transition: background .3s, box-shadow .3s;
}
.tour-beads i.on {
  background: radial-gradient(circle at 35% 30%, #fff1c2, var(--kin) 55%, #8a6a2a);
  border-color: #8a6a2a;
  box-shadow: 0 0 10px rgba(214, 168, 76, .8);
  animation: tour-pip .45s var(--ease-swell);
}

/* trade */
.tour-harbour { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.tour-harbour__sea { fill: rgba(27, 42, 74, .9); }
.tour-harbour__wave { fill: none; stroke: var(--kin); stroke-opacity: .5; stroke-width: 1.4; animation: tour-sea 5s ease-in-out infinite alternate; }
.tour-harbour__boat { fill: #2a1c10; stroke: var(--kin); stroke-width: 1.2; stroke-linejoin: round; animation: tour-rock 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.tour-harbour__sail { fill: var(--washi); stroke: var(--sumi); stroke-width: 1; animation: tour-rock 4s ease-in-out infinite; transform-box: view-box; transform-origin: 282px 110px; }
@keyframes tour-rock { 50% { transform: rotate(3deg) translateY(1px); } }
.tour-harbour__house { fill: #1a140e; stroke: var(--kin); stroke-width: 1.2; stroke-linejoin: round; }
.tour-harbour__lamp { fill: #ffd98a; filter: drop-shadow(0 0 6px rgba(255, 210, 120, .9)); animation: tour-flicker 2.4s infinite; }
.tour-port {
  padding: 1cqw 2.6cqw;
  border-radius: 999px;
  background: var(--washi); color: var(--sumi);
  border: 1.5px solid var(--kin);
  font: 800 max(13px, 3.8cqw)/1 var(--font-display);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
  white-space: nowrap;
  animation: tour-pop .5s var(--ease-swell) .3s both;
}
.tour-port--good { background: var(--shu); color: var(--washi); border-color: var(--kin-pale); animation-delay: .5s; }
.tour-swap {
  width: 92%;
  display: grid; grid-template-columns: auto auto 12cqw; grid-template-rows: auto auto; align-items: center; justify-content: center; column-gap: 5cqw; row-gap: 1.4cqw;
  padding: 1.8cqw 3cqw;
  border-radius: 6px;
  background: rgba(8, 13, 24, .5);
  border: 1px solid rgba(214, 168, 76, .35);
  animation: tour-rise .6s var(--ease-ink) both;
  animation-delay: calc(var(--i) * 180ms + 200ms);
}
.tour-swap__label { grid-column: 1 / -1; justify-self: start; font: 700 max(13px, 3.6cqw)/1 var(--font-display); color: var(--kin-pale); letter-spacing: .02em; }
.tour-swap__give { position: relative; display: flex; height: 9cqw; padding-right: 6cqw; min-width: 30cqw; }
.tour-swap__give img {
  height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  margin-right: -6cqw;
  border-radius: 3px; border: 1.5px solid #fbf3e1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
  transition: transform .7s var(--ease-ink), opacity .7s;
  transition-delay: calc(var(--k) * 90ms);
}
.tour-swap.go .tour-swap__give img { transform: translateX(40%) scale(.85); opacity: .28; }
.tour-swap__arrow { font: 400 max(18px, 6cqw)/1 var(--font-display); color: var(--kin); }
.tour-swap__get img {
  width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; border: 2px solid var(--kin-pale);
  box-shadow: 0 0 16px rgba(240, 216, 150, .55);
  opacity: 0; transform: scale(.4) rotate(-10deg);
  transition: transform .6s var(--ease-swell) .5s, opacity .4s .5s;
}
.tour-swap.go .tour-swap__get img { opacity: 1; transform: none; }

/* finale */
.tour-finale__ine { width: 46%; aspect-ratio: 1; }
.tour-finale__ine::before {
  content: ''; position: absolute; inset: -30%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 210, 120, .4), rgba(214, 168, 76, .12) 55%, transparent);
  animation: tour-flicker 3s ease-in-out infinite;
}
.tour-finale__ine .tour-ine { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)); animation: tour-pop .8s var(--ease-swell) both; }
.tour-finale__name { display: flex; flex-direction: column; align-items: center; gap: .6cqw; white-space: nowrap; }
.tour-finale__name b { font: 800 max(16px, 5.4cqw)/1.1 var(--font-display); color: var(--text); }
.tour-finale__name small { font: italic 500 max(13px, 3.8cqw)/1.1 var(--font-serif); color: var(--text-dim); }
.tour-turn {
  list-style: none; margin: 0; padding: 0;
  width: 96%;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw 1.6cqw;
}
.tour-turn li {
  display: flex; align-items: center; gap: 1.4cqw;
  padding: 1.2cqw 2.6cqw 1.2cqw 1.2cqw;
  border-radius: 999px;
  background: var(--paper-grain), linear-gradient(180deg, #f8efda, var(--washi));
  color: var(--sumi);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  font: 600 max(12px, 3.4cqw)/1 var(--font-body);
  white-space: nowrap;
  animation: tour-rise .5s var(--ease-ink) both;
  animation-delay: calc(var(--i) * 140ms + 600ms);
}
.tour-turn li i {
  display: grid; place-items: center;
  width: 5.6cqw; height: 5.6cqw; min-width: 18px; min-height: 18px; border-radius: 50%;
  background: var(--shu); color: var(--washi);
  font: 800 max(11px, 3cqw)/1 var(--font-display); font-style: normal;
}

/* ------------------------------------------------------------- phones */
@media (max-width: 820px) {
  .tour-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 43fr) minmax(0, 57fr);
    gap: 8px;
    align-items: stretch;
    padding: 0 16px;
  }
  .tour-stage { width: min(100cqw, calc((100cqh - 46px) * 400 / 420)); }
  .tour-frame { gap: 4px; justify-content: flex-start; }
  .tour-cap { font-size: 15.5px; min-height: 2.7em; line-height: 1.3; }
  .tour-scroll { max-height: none; height: 100%; padding: 6px 0; }
  .tour-rod { left: -6px; right: -6px; height: 12px; }
  .tour-rod--bot { top: calc(100% - 12px); }
  .tour-rod::before, .tour-rod::after { width: 10px; height: 16px; }
  .tour-paper { height: 100%; padding: 18px 18px 18px; }
  .tour-kicker { font-size: 12px; gap: 10px; letter-spacing: .12em; }
  .tour-seal { width: 34px; height: 34px; font-size: 20px; }
  .tour-seal--wide { width: auto; font-size: 16px; }
  .tour-title { font-size: 24px; margin-top: 10px; }
  .tour-rule { margin: 10px 0 12px; }
  .tour-voice { grid-template-columns: 1fr; gap: 8px; }
  .tour-voice__who { flex-direction: row; gap: 8px; }
  .tour-voice__face { width: 34px; height: 34px; }
  .tour-voice__name { font-size: 15px; }
  .tour-say p { font-size: 16px; line-height: 1.55; margin-bottom: 9px; }
  .tour-extra { margin-top: 14px; }
  .tour-chips { gap: 6px; }
  .tour-chips li { padding: 7px 8px; }
  .tour-chips b { font-size: 15px; }
  .tour-chips span { font-size: 13.5px; }
  .tour-cost__cards img { width: 30px; height: 23px; }
  .tour-goal { padding: 12px 14px; gap: 12px; }
  .tour-goal__seal { width: 42px; height: 42px; font-size: 24px; }
  .tour-goal p { font-size: 16px; }
  .tour-cta { gap: 8px; }
  .tour-btn { width: 100%; }
  .tour-top { padding-bottom: 4px; }
  .tour-brand__kanji { font-size: 24px; }
  .tour-brand__name b { font-size: 17px; }
  .tour-brand__name small { font-size: 14px; }
  .tour-skip { padding: 0 14px; }
  .tour-foot { gap: 10px; padding-top: 8px; }
  .tour-nav { padding: 0 14px; }
  .tour-nav--back .tour-nav__txt { display: none; }
  .tour-nav--back { width: 50px; padding: 0; }
  .tour-nav--next { min-width: 128px; }
  .tour-progress { gap: 5px; }
  .tour-progress__bead { width: 8px; height: 8px; }
  .tour-progress__bead.now { width: 12px; height: 12px; }
}
@media (max-width: 820px) and (max-height: 700px) {
  .tour-brand__name small { display: none; }
}
@media (min-width: 821px) and (max-height: 720px) {
  .tour-say p { font-size: 16.5px; line-height: 1.55; }
  .tour-title { font-size: 28px; }
}

/* ------------------------------------------------------------- coach */
.coach {
  position: fixed; inset: 0; z-index: 2100;
  font-family: var(--font-body);
  animation: tour-in .35s ease-out both;
}
.coach *, .coach *::before, .coach *::after { box-sizing: border-box; }
.coach--closing { animation: tour-out .26s ease-in both; }
.coach-dim { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.coach-dim__fill { fill: rgba(8, 13, 24, .74); }
.coach-dim rect[filter] { transition: x .45s var(--ease-ink), y .45s var(--ease-ink), width .45s var(--ease-ink), height .45s var(--ease-ink); }
.coach-ring {
  position: fixed;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(214, 168, 76, .9), 0 0 0 6px rgba(214, 168, 76, .18), 0 0 30px 6px rgba(240, 216, 150, .3);
  transition: left .45s var(--ease-ink), top .45s var(--ease-ink), width .45s var(--ease-ink), height .45s var(--ease-ink);
  animation: coach-breathe 2.6s ease-in-out infinite;
}
@keyframes coach-breathe { 50% { box-shadow: 0 0 0 2px rgba(240, 216, 150, 1), 0 0 0 9px rgba(214, 168, 76, .12), 0 0 40px 10px rgba(240, 216, 150, .38); } }
.coach-bubble {
  position: fixed;
  width: min(372px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  color: var(--sumi);
  background:
    var(--paper-grain),
    radial-gradient(ellipse at 15% 0%, rgba(255, 252, 240, .75), transparent 60%),
    linear-gradient(180deg, #f8efda, var(--washi) 55%, #eadbbd);
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(185, 164, 124, .9), inset 0 0 0 4px rgba(255, 255, 255, .35);
  transition: left .45s var(--ease-ink), top .45s var(--ease-ink);
}
.coach-bubble::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: 0; height: 2px;
  background: var(--gold-rule);
}
.coach-bubble--in { animation: coach-in .5s var(--ease-ink) both; }
@keyframes coach-in { from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(2px); } }
.coach-arrow {
  position: absolute; width: 16px; height: 16px;
  background: #f4e9d2;
  box-shadow: inset 1px 1px 0 rgba(185, 164, 124, .9);
  rotate: 45deg;
}
.coach-bubble[data-place="below"] .coach-arrow { top: -8px; left: calc(var(--ax) - 8px); }
.coach-bubble[data-place="above"] .coach-arrow { bottom: -8px; left: calc(var(--ax) - 8px); rotate: 225deg; background: #ebdcbe; }
.coach-bubble[data-place="right"] .coach-arrow { left: -8px; top: calc(var(--ay) - 8px); rotate: -45deg; }
.coach-bubble[data-place="left"] .coach-arrow { right: -8px; top: calc(var(--ay) - 8px); rotate: 135deg; }
.coach-bubble[data-place="inside"] .coach-arrow { display: none; }
.coach-head { display: flex; align-items: center; gap: 12px; }
.coach-face { flex: none; width: 46px; height: 46px; display: block; filter: drop-shadow(0 2px 4px rgba(22, 19, 15, .35)); }
.coach-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.coach-who small { font: italic 600 14px/1.1 var(--font-serif); color: var(--shu-deep); }
.coach-title { margin: 0; font: 800 19px/1.15 var(--font-display); color: var(--sumi); }
.coach-skip {
  align-self: flex-start;
  min-width: 44px; min-height: 44px; margin: -8px -8px 0 0; padding: 0 8px;
  border: 0; background: none;
  font: 600 14px var(--font-body); color: var(--sumi-soft);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.coach-text { margin: 10px 0 12px; font: 500 16px/1.55 var(--font-display); color: var(--sumi); }
.coach-foot { display: flex; align-items: center; gap: 8px; }
.coach-spacer { flex: 1; }
.coach-count { font: 600 13px var(--font-body); letter-spacing: .1em; color: var(--sumi-soft); }
.coach-btn {
  min-height: 44px; min-width: 76px; padding: 0 16px;
  border-radius: 4px;
  border: 1.5px solid var(--shu-deep);
  background: linear-gradient(180deg, #d4553b, var(--shu) 55%, var(--shu-deep));
  color: var(--washi);
  font: 700 15px var(--font-display);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(240, 216, 150, .55);
}
.coach-btn--ghost { background: transparent; color: var(--sumi); border-color: rgba(22, 19, 15, .45); box-shadow: none; }
.coach-btn:disabled { opacity: .35; cursor: default; }

/* ----------------------------------------------------- reduced motion */
.tour--reduced *, .tour--reduced *::before, .tour--reduced *::after,
.coach--reduced *, .coach--reduced *::before, .coach--reduced *::after {
  animation-name: tour-fade !important;
  animation-duration: .35s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  animation-direction: normal !important;
  transition-property: opacity !important;
}
.tour--reduced .tour-reveal { -webkit-mask: none; mask: none; }
@media (prefers-reduced-motion: reduce) {
  .tour *, .tour *::before, .tour *::after,
  .coach *, .coach *::before, .coach *::after {
    animation-name: tour-fade !important;
    animation-duration: .35s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
  }
  .tour-reveal { -webkit-mask: none; mask: none; }
}

/* Quicker, lighter chapter changes: Continue moves on at once, and the art and
   ink settle fast without blur filters, which stutter on phones. */
.tour-frame { animation: tour-wash-in .45s var(--ease-ink) both; }
.tour-frame--out { animation: tour-wash-out .25s ease-in both; }
@keyframes tour-wash-in {
  from { clip-path: circle(0% at 50% 48%); opacity: .4; }
  to { clip-path: circle(80% at 50% 48%); }
}
@keyframes tour-wash-out { to { opacity: 0; transform: scale(1.02); } }
.tour-wash { animation-duration: .55s; }
.tour-scroll--in { animation-duration: .5s; }
.tour-scroll--in .tour-rod--bot { animation-duration: .5s; }
.tour-reveal { animation-duration: .4s; animation-delay: calc(var(--d, 0) * 60ms + 80ms); }
@keyframes tour-ink { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: translateY(3px); } }
/* Continue stays filled in: a tap on a phone leaves it "hovered", and the
   plain button's hover look used to wash it out. */
.tour-nav--next:hover:not(:disabled), .tour-nav--next:active:not(:disabled) {
  border-color: var(--kin);
  background: var(--paper-grain), linear-gradient(180deg, #f8efda, var(--washi) 60%, var(--washi-dim));
}
@media (hover: hover) {
  .tour-nav--next:hover:not(:disabled) { background: var(--paper-grain), linear-gradient(180deg, #fff6e2, #f4e9d2 60%, var(--washi)); }
}
/* Room for the red dot's pulse, which was clipped on its left. */
.tour-hintline { margin-top: 8px; padding: 10px 0 10px 13px; }
/* Nothing in the tour may be wider than the phone: the grid's one column
   used to grow to the footer's natural width (385px), pushing the scroll and
   its titles off the left edge on narrow phones. */
.tour { grid-template-columns: minmax(0, 1fr); }
.tour-progress-wrap { overflow: hidden; }
@media (max-width: 360px) {
  .tour-foot { gap: 8px; }
  .tour-nav--next { min-width: 100px; padding: 0 10px; gap: 6px; }
  .tour-progress { gap: 2px; }
  .tour-progress__bead { width: 6px; height: 6px; }
  .tour-progress__bead.now { width: 9px; height: 9px; }
}
/* Titles keep their tall letters: the ink-reveal mask stops at the box edge. */
.tour-title { padding-block: 5px; margin-top: 9px; }