/* Newbie tutorial — constrained to app column (max 480px), mobile-first */

.tut-root {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}
.tut-root:not(.is-on) { display: none; }
.tut-root.is-on { display: block; }

html.is-tutorial,
html.is-tutorial body {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
/*
 * 教學程式 scroll：只開放 html 做 scroll container。
 * 千萬唔好開 body overflow:auto／寫 body.scrollTop——iOS 會令 position:fixed 底欄跟住走。
 */
html.is-tutorial.tut-prog-scroll {
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  touch-action: pan-y;
}
html.is-tutorial.tut-prog-scroll body,
html.is-tutorial.tut-prog-scroll body.tut-scroll-lock {
  overflow: visible !important;
  touch-action: pan-y;
}
body.tut-scroll-lock {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
/* 教學／程式 scroll 期間釘死底欄，唔受任何 scroll／transform 影響 */
html.is-tutorial .bottom-nav,
html.tut-prog-scroll .bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) translateZ(0) !important;
  -webkit-transform: translateX(-50%) translateZ(0) !important;
  z-index: 45 !important;
}
/* 教學中底欄一律唔好撳——淨係 tut-hit 開指定掣；否則會跳 tab 搞亂流程 */
html.is-tutorial .bottom-nav,
html.is-tutorial .bottom-nav .bottom-nav-item {
  pointer-events: none !important;
}

.tut-dim {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 14, 0.72);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}
.tut-root.is-dim .tut-dim { opacity: 1; }
.tut-root.is-clear .tut-dim { opacity: 0; pointer-events: none; }

/* 舊光框保留俾細粒按鈕；護照改用 .tut-lit */
.tut-spot {
  position: fixed;
  z-index: 2;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px rgba(255, 202, 5, 0.95),
    0 0 0 9999px rgba(12, 12, 14, 0.72);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.tut-root.is-spot .tut-spot { opacity: 1; }
.tut-root.is-spot .tut-dim {
  opacity: 0;
  pointer-events: auto;
}

.tut-catch {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.tut-root.is-tap .tut-catch { pointer-events: auto; }

/* absolute：跟 tut-stage（有 transform），唔好用 fixed+viewport，電腦版會偏位撳唔到 */
.tut-hit {
  position: absolute;
  z-index: 220;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.tut-hit[hidden] { display: none !important; }

/* 同 app-shell 一樣闊；獨立 z-index，可蓋過 modal */
.tut-stage {
  position: fixed;
  z-index: 210;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 100%);
  top: 0;
  bottom: 0;
  pointer-events: none;
  overflow: visible;
  display: none;
}
.tut-stage.is-on { display: block; }

.tut-skip {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 40;
  pointer-events: auto;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(28, 28, 30, 0.62);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tut-skip:active {
  transform: scale(0.97);
}

/* waitTap：蓋住 modal，撳任意位前進，唔會誤關 popup */
.tut-tap-shield {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
.tut-tap-shield[hidden] { display: none !important; }

.modal.tut-modal-front {
  z-index: 200 !important;
}
/* 淨 X 步驟：sheet 加暗罩，close 抬高發光 */
.modal.tut-modal-front.tut-modal-dim-sheet .reward-sheet,
.modal.tut-modal-front.tut-modal-dim-sheet .task-sheet,
.modal.tut-modal-front.tut-modal-dim-sheet .modal-sheet {
  position: relative;
}
.modal.tut-modal-front.tut-modal-dim-sheet .reward-sheet::after,
.modal.tut-modal-front.tut-modal-dim-sheet .task-sheet::after,
.modal.tut-modal-front.tut-modal-dim-sheet .modal-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: rgba(12, 12, 14, 0.72);
  pointer-events: none;
}
.modal.tut-modal-front .modal-close.tut-lit-abs,
.modal.tut-modal-front .modal-close.tut-lit {
  z-index: 8 !important;
  pointer-events: none !important;
}

.tut-duck {
  position: absolute;
  z-index: 2;
  width: 112px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 入場：加 is-in → translate(0,0)；退場：除 is-in → 返 pos-* 斜位移（入場反向），唔跳位 */
.tut-duck.is-in {
  opacity: 1;
  transform: translate(0, 0) !important;
}
.tut-duck img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.tut-duck.pos-br,
.tut-duck.pos-br-sm {
  right: 6px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: auto;
  top: auto;
  width: 112px;
  transform: translate(36%, 42%);
}
.tut-duck.pos-br { width: 128px; }
.tut-duck.pos-bl {
  left: 6px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: auto;
  top: auto;
  width: 112px;
  transform: translate(-36%, 42%);
}
.tut-duck.pos-br-high {
  right: 6px;
  bottom: 34%;
  left: auto;
  top: auto;
  width: 112px;
  transform: translate(36%, 28%);
}
.tut-duck.pos-tr {
  right: 8px;
  top: 16%;
  left: auto;
  bottom: auto;
  width: 112px;
  transform: translate(36%, -28%);
}
.tut-duck.pos-mr {
  right: 6px;
  top: 40%;
  left: auto;
  bottom: auto;
  width: 112px;
  transform: translate(36%, 0);
}
.tut-duck.pos-passport {
  right: 6px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  left: auto;
  top: auto;
  width: 112px;
  transform: translate(36%, 40%);
}

/* 教學假 scroll：移動 app-shell，底欄喺 shell 外保持 fixed */
.app-shell.tut-shell-scroll {
  will-change: transform;
  /* sticky 喺有 transform 祖先會失效——教學期間接受，scroll 完會清 */
}

/* Bubble 貼住 Duck；overflow 必須 visible，否則 badge (1) 會被 crop
   （overflow-x:visible + overflow-y:auto 會被算成兩邊都 auto） */
.tut-bubble {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 12px 16px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
}
.tut-bubble.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tut-bubble.place-speak,
.tut-bubble.place-mid,
.tut-bubble.place-center,
.tut-bubble.place-below {
  left: 16px;
  right: 118px;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  top: auto;
  max-height: min(42vh, 280px);
}
/* slide 10：再低少少，貼近底欄上方 */
.tut-bubble.place-low {
  left: 16px;
  right: 118px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  top: auto;
  max-height: min(36vh, 240px);
}
/* 最終 CTA：bubble／duck 略低；文案置中 */
.tut-bubble.place-high {
  left: 16px;
  right: 120px;
  top: 34%;
  bottom: auto;
  max-height: min(36vh, 240px);
}
.tut-bubble.place-high .tut-bubble-text {
  text-align: center;
}
.tut-bubble.place-near {
  /* top/left/right/maxHeight 由 JS 按 section 動態設 */
}
.tut-duck.pos-br-final {
  right: 4px;
  /* 同 bubble top 對齊；慶祝 pose 頭偏高，略下移令身體貼 bubble */
  top: calc(34% + 6px);
  left: auto;
  bottom: auto;
  width: 108px;
  transform: translate(36%, -28%);
}
.tut-duck.pos-br-final.is-in {
  transform: translate(0, 0) !important;
}
.tut-duck.pos-br-low {
  right: 6px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  left: auto;
  top: auto;
  width: 112px;
  transform: translate(36%, 42%);
}
.tut-duck.pos-br-low.is-in {
  transform: translate(0, 0) !important;
}
.tut-duck.pos-near {
  width: 112px;
  /* top/right 由 JS 設；未 is-in 時斜右下退場 */
  transform: translate(42%, 48%);
}
.tut-duck.pos-near.is-in {
  transform: translate(0, 0) !important;
}

.tut-bubble-text {
  flex: 1 1 auto;
  min-height: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  /* 唔好 inherit bubble max-height，否則食晒高度把 5/13 擠出白框 */
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.tut-bubble-text .tut-em {
  display: inline-block;
  color: var(--yellow);
  font-size: 1.55em;
  font-weight: 900;
  line-height: 1.2;
  vertical-align: -0.08em;
  -webkit-text-stroke: 2px #1c1c1e;
  paint-order: stroke fill;
  margin: 0 2px;
}
.tut-bubble-text .tut-title,
.tut-bubble-text .tut-kw {
  display: inline;
  color: var(--yellow);
  font-size: 1.22em;
  font-weight: 900;
  line-height: 1.5;
  -webkit-text-stroke: 2.5px #1c1c1e;
  paint-order: stroke fill;
}
.tut-bubble-text ol {
  margin: 8px 0 0;
  padding-left: 1.25em;
}
.tut-bubble-text li { margin: 4px 0; }

.tut-step-badge {
  position: absolute;
  /* 唔好用負 left——手機螢幕邊會 crop 咗 (1) */
  left: 12px;
  top: -18px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: #1c1c1e;
  background: linear-gradient(180deg, #ffe566, #ffca05);
  border: 2.5px solid #fff;
  box-shadow: 0 4px 12px rgba(28, 28, 30, 0.22);
  z-index: 2;
}

.tut-progress {
  display: block;
  flex: 0 0 auto;
  margin-top: 10px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--grey);
  letter-spacing: 0.04em;
}

.tut-finger {
  position: absolute;
  z-index: 6;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 2px 6px rgba(28, 28, 30, 0.28));
  transform-origin: 20% 15%;
}
.tut-finger.is-on {
  opacity: 1;
  animation: tut-finger-bob 0.95s ease-in-out infinite;
}
.tut-finger.is-flip-h.is-on {
  animation-name: tut-finger-bob-tr;
}
.tut-finger.is-point-down.is-on {
  animation-name: tut-finger-bob-down;
  transform-origin: 70% 85%;
}
.tut-finger img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-18deg);
}
/* 水平翻轉：指右上（用喺右上角 X） */
.tut-finger.is-flip-h img {
  transform: scaleX(-1) rotate(18deg);
}
/* 垂直翻轉：放掣上方，指尖向下對住 button */
.tut-finger.is-point-down img {
  transform: scaleY(-1) rotate(18deg);
}
@keyframes tut-finger-bob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-6px, -6px); }
}
@keyframes tut-finger-bob-tr {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6px, -6px); }
}
@keyframes tut-finger-bob-down {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-4px, 7px); }
}

.tut-cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  min-width: min(280px, 78%);
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  color: #1c1c1e;
  background: linear-gradient(180deg, #ffe566 0%, #ffca05 55%, #e6b400 100%);
  box-shadow:
    0 0 16px rgba(255, 202, 5, 0.65),
    0 0 32px rgba(255, 214, 40, 0.4),
    0 6px 16px rgba(28, 28, 30, 0.18);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tut-cta.is-on { opacity: 1; }
.tut-cta.is-high {
  bottom: auto;
  top: 52%;
}

/* 真元素提亮：抬過暗層 */
.tut-lit {
  position: relative !important;
  z-index: 125 !important;
  pointer-events: none !important;
  box-shadow:
    0 0 0 3px rgba(255, 202, 5, 0.95),
    0 0 18px rgba(255, 202, 5, 0.45),
    var(--shadow, 0 8px 24px rgba(28, 28, 30, 0.08)) !important;
  border-radius: 18px;
}
/* absolute／fixed（地圖 pin、modal X）唔改 position，免跳位 */
.tut-lit-abs {
  z-index: 125 !important;
  pointer-events: none !important;
  box-shadow:
    0 0 0 3px rgba(255, 202, 5, 0.95),
    0 0 18px rgba(255, 202, 5, 0.45) !important;
  border-radius: 18px;
}
.tut-lit-abs.map-pin {
  border-radius: 999px;
}
.tut-target-live {
  position: relative !important;
  z-index: 126 !important;
  /* 點擊交俾 tut-hit，避免原按鈕自己開 popup 但教學唔前進 */
  pointer-events: none !important;
}
/* 底欄整條抬過暗層，先至俾單一 item 真發光（仍然 pointer-events:none，撳掣靠 tut-hit） */
html.is-tutorial .bottom-nav.tut-nav-front {
  z-index: 130 !important;
  pointer-events: none !important;
}
.tut-nav-live {
  position: relative !important;
  z-index: 131 !important;
  pointer-events: none !important;
  box-shadow:
    0 0 0 2px rgba(255, 202, 5, 0.95),
    0 0 16px rgba(255, 202, 5, 0.55) !important;
  background: #fff !important;
  border-radius: 12px;
}
.tut-block-submit #submitTaskBtn {
  pointer-events: none !important;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .tut-duck,
  .tut-bubble,
  .tut-dim,
  .tut-spot,
  .tut-cta { transition: none; }
  .tut-finger.is-on { animation: none; }
}