/* ═══════════════════════════════════════════════════════════════
   careiti-howto.css — 三層教學 overlay, album register
   ═══════════════════════════════════════════════════════════════ */

.cht-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 0 12px;
  padding: 10px 16px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--teal-ink, #0B6E64);
  font-family: var(--f-album, system-ui, sans-serif);
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  cursor: pointer;
}
.cht-open svg { width: 20px; height: 20px; }
@media (min-width: 700px) { .cht-open { min-height: var(--ct-tap, 56px); } }

.cht-root {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(34, 30, 26, .58);
  overflow-y: auto;
}
.cht-card {
  width: min(94vw, 480px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px 22px 22px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-print, 2px);
  background: var(--print, #FFFDF8);
  box-shadow: var(--sh-lift, 0 20px 44px rgba(58, 42, 20, .22));
  font-family: var(--f-album, system-ui, sans-serif);
  color: var(--ink, #221E1A);
}
@media (min-width: 700px) { .cht-card { width: min(90vw, 560px); padding: 32px 30px 26px; } }

.cht-step {
  font-size: max(calc(11px * var(--ct-k1, 1)), var(--ct-min, 0px));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-ink, #0B6E64);
}
.cht-title {
  margin: 6px 0 14px;
  font-size: max(calc(22px * var(--ct-k4, 1)), var(--ct-min, 0px));
  font-weight: 700;
  line-height: 1.35;
}
.cht-points {
  margin: 0 0 18px;
  padding-left: 1.1em;
  font-size: max(calc(15px * var(--ct-k3, 1)), var(--ct-min, 0px));
  line-height: 1.85;
  color: var(--ink-2, #5B5147);
}
.cht-points li { margin-bottom: 6px; }

/* ── Demo / try stage ───────────────────────────────────────────
   Built from the same shapes the games use, so it inherits 大字模式 and
   高對比 automatically — a recorded video could do neither. */
.cht-demo {
  padding: 18px 14px;
  border: 1px solid var(--rule, #DFD3BE);
  border-radius: var(--r-print, 2px);
  background: var(--paper, #F6F1E7);
}
.cht-q {
  margin-bottom: 14px;
  font-size: max(calc(20px * var(--ct-k4, 1)), var(--ct-min, 0px));
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}
.cht-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cht-opt {
  min-height: 52px;
  padding: 12px 8px;
  border: 1.5px solid var(--rule, #DFD3BE);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--ink, #221E1A);
  font: inherit;
  font-size: max(calc(15px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 600;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.cht-opt[aria-hidden="true"] { cursor: default; }
.cht-ok { border-color: var(--grow, #3D6B45); background: rgba(61, 107, 69, .12); }
.cht-no { border-color: var(--stamp, #B4472F); background: rgba(180, 71, 47, .10); }

.cht-caption {
  min-height: 3.2em;
  margin: 12px 0 4px;
  font-size: max(calc(14px * var(--ct-k3, 1)), var(--ct-min, 0px));
  line-height: 1.7;
  color: var(--ink-2, #5B5147);
}

/* ── Step control ───────────────────────────────────────────────
   Arrows flank the dots so the dots stop being decoration and start being
   a position: you can see where you are AND move from it. */
.cht-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 4px;
}
.cht-dots { display: flex; gap: 6px; justify-content: center; }
.cht-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rule, #DFD3BE);
}
.cht-dot.on { background: var(--teal-ink, #0B6E64); }

.cht-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--edge, #8E7C5E);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--ink-2, #5B5147);
  cursor: pointer;
}
.cht-arrow svg { width: 22px; height: 22px; flex: 0 0 auto; }
/* Disabled still has to be legible — a control you cannot use is not a
   control you should be unable to see. Reduced, not erased. */
.cht-arrow[disabled] { opacity: .38; cursor: default; }
.cht-hint {
  margin: 0 0 14px;
  text-align: center;
  font-size: max(calc(12px * var(--ct-k2, 1)), var(--ct-min, 0px));
  line-height: 1.5;
  color: var(--ink-3, #6F6355);
}

/* ── Buttons ────────────────────────────────────────────────────
   直接開始 is the primary; the tutorial's own forward step is secondary.
   The tutorial is an offer. Dressing 「睇下點玩」 as the one filled button
   on the card made it read as the required path and left the way out
   looking like fine print — which is the opposite of true for anyone who
   has played before. */
.cht-skip {
  display: block;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--teal-deep, #095A52);
  border-radius: var(--r-ui, 8px);
  background: var(--teal-ink, #0B6E64);
  color: #fff;
  font: inherit;
  font-size: max(calc(16px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.cht-next {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-bottom: 10px;
  border: 1px solid var(--edge, #8E7C5E);
  border-radius: var(--r-ui, 8px);
  background: var(--print, #FFFDF8);
  color: var(--teal-ink, #0B6E64);
  font: inherit;
  font-size: max(calc(16px * var(--ct-k3, 1)), var(--ct-min, 0px));
  font-weight: 700;
  cursor: pointer;
}
.cht-hidden { display: none; }

/* ── The card follows the swipe ─────────────────────────────────
   A short slide in the direction of travel, so the gesture reads as moving
   through a sequence rather than as the card being replaced. 160ms and no
   loop: it confirms what just happened and gets out of the way. */
@keyframes cht-in-fwd  { from { opacity: 0; transform: translateX(22px);  } }
@keyframes cht-in-back { from { opacity: 0; transform: translateX(-22px); } }
.cht-card[data-enter="fwd"]  { animation: cht-in-fwd .16s ease-out; }
.cht-card[data-enter="back"] { animation: cht-in-back .16s ease-out; }
/* Horizontal gestures belong to us; vertical scrolling stays with the
   browser. Without this the card can be panned instead of swiped. */
.cht-card { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  .cht-opt { transition: none; }
  .cht-card[data-enter] { animation: none; }
}

/* Close affordance. Full 44px target, top-right, above the content. */
.cht-card { position: relative; }
.cht-x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--r-ui, 8px);
  background: transparent;
  color: var(--ink-3, #6F6355);
  cursor: pointer;
}
.cht-x svg { width: 20px; height: 20px; }
.cht-x:hover { background: var(--paper-2, #EFE7D8); }