/* 日本退稅新制島：只用 /marketing/styles.css 的 CSS 變數（色票、字級、間距） */
.island-main {
  padding-block: var(--space-xl);
}

.island-hero__kicker {
  color: var(--color-ink-3);
  font-size: 0.9rem;
  margin: 0 0 var(--space-2xs);
}

.island-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  margin: 0 0 var(--space-sm);
}

.island-hero__lead {
  color: var(--color-ink-2);
  max-width: 38rem;
  margin: 0 0 var(--space-sm);
}

.island-rules {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
  max-width: 38rem;
  padding: var(--space-sm);
}

.island-practice {
  color: var(--color-ink-2);
  font-size: 0.95rem;
  margin: 0 0 var(--space-md);
}

.island-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.island-actions .btn {
  min-height: 44px;
  min-width: 44px;
}

.island-actions .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.island-actions .btn:focus-visible,
.island-footer a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.island-footer {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-md);
}

.island-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xs);
}

.island-footer__links a {
  display: inline-block;
  min-height: 44px;
  padding-block: var(--space-xs);
}

.island-footer__notice {
  color: var(--color-ink-3);
  font-size: 0.9rem;
  margin: 0 0 var(--space-2xs);
}

/* ===== 遊戲區（文字清單版）===== */
.island-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.55rem 1.15rem;
}

.island-btn--outline {
  background: transparent;
  border-color: var(--color-ink-3);
  color: var(--color-ink);
}

.island-btn--outline:hover {
  background: var(--color-paper-2);
}

.island-btn:focus-visible,
.island-choice input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.island-note {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  color: var(--color-ink-2);
  margin: 0 0 var(--space-sm);
  max-width: 38rem;
  padding: var(--space-xs) var(--space-sm);
}

.island-game {
  display: grid;
  gap: var(--space-md);
  max-width: 44rem;
}

.island-stations__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.island-stations__list li {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  color: var(--color-ink-2);
  padding: var(--space-2xs) var(--space-xs);
}

.island-stations__list li[aria-current="step"] {
  border-color: var(--color-ink);
  color: var(--color-ink);
  font-weight: 600;
}

.island-stations__status {
  font-size: 0.9rem;
}

.island-panel h2 {
  font-family: var(--font-display);
  margin: 0 0 var(--space-xs);
}

.island-panel h2:focus,
.island-panel h3:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.island-panel__top,
.island-panel__bottom {
  display: grid;
  gap: var(--space-sm);
}

.island-panel__top > *,
.island-panel__bottom > * {
  margin: 0;
}

.island-question {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
}

.island-question legend {
  font-weight: 600;
  padding-inline: var(--space-2xs);
}

.island-choice {
  align-items: flex-start;
  display: flex;
  gap: var(--space-xs);
  min-height: 44px;
  padding-block: var(--space-2xs);
}

.island-choice input {
  flex: none;
  height: 1.5rem;
  margin-top: 0.1rem;
  width: 1.5rem;
}

.island-feedback {
  color: var(--color-ink);
  margin: var(--space-sm) 0;
  min-height: 1.5em;
}

.island-feedback:empty {
  display: none;
}

.island-keypoints,
.island-steps,
.island-route {
  margin: 0;
  padding-left: 1.4rem;
}

.island-red-tag {
  color: var(--color-accent-text);
  font-weight: 700;
}

.island-card {
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
}

.island-card h3,
.island-card h4,
.island-card p {
  margin: 0;
}

.island-feature__where {
  color: var(--color-ink-3);
  font-size: 0.9rem;
}

.island-card .btn {
  justify-self: start;
}

@media (prefers-reduced-motion: reduce) {
  .island-btn {
    transition: none;
  }
}

/* .btn／.island-game 的 display 會蓋掉 hidden 屬性，這裡明確讓它隱藏 */
.island-main [hidden] {
  display: none !important;
}

/* 頁首按鈕：全域約束互動目標 ≥ 44 CSS px（/marketing/styles.css 的 btn--sm 是 40px，這裡只覆寫本頁） */
#island-header-cta {
  min-height: 44px;
}

/* ===== 3D 島版面 ===== */
.island-canvas {
  display: none;
}

/* 把手列：文字版與開場頁就是第一版工具列的位置（把手 hidden，只剩切換鈕）；3D 時在抽屜頂端 */
.island-drawer__bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.island-drawer__handle {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-ink);
  cursor: grab;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  font: inherit;
  font-weight: 600;
  justify-content: center;
  min-height: 56px;
  min-width: 0;
  padding: 0;
  position: relative;
  text-align: left;
  touch-action: none;
  user-select: none;
}

.island-drawer__handle::before {
  background: var(--color-rule);
  border-radius: 2px;
  content: "";
  height: 4px;
  margin-bottom: var(--space-2xs);
  width: 36px;
}

.island-drawer__handle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.island-game[data-dragging="true"] .island-drawer__handle {
  cursor: grabbing;
}

/* 文字版維持原本的單欄流動排版；3D 版面才分層 */
body[data-view="3d"][data-phase="playing"] .island-canvas {
  display: block;
  height: 100dvh;
  inset: 0;
  pointer-events: auto; /* 3D 遊玩中畫布一律接手勢（單指轉、雙指縮放）；抽屜是兄弟元素、z-index 較高，蓋住的範圍不受影響 */
  position: fixed;
  touch-action: none;
  width: 100%;
  z-index: 0;
}

/* 3D 遊玩中頁面不捲動：頁尾已搬進抽屜，主區不再撐高；橡皮筋效果也關掉 */
html:has(body[data-view="3d"][data-phase="playing"]) {
  overscroll-behavior: none;
}

body[data-view="3d"][data-phase="playing"] .island-main {
  padding-block: 0;
  position: relative;
}

/* 站點清單在 3D 版面收起（故事面板是同一個元件，進度由面板標題與 3D 場景呈現） */
body[data-view="3d"] .island-stations {
  display: none;
}

/* 五站按鈕：只在 3D 版面（文字版仍是上面的進度清單）。按下＝去看那一站，所在站反白（ink／paper，⛔ 品牌紅） */
body:not([data-view="3d"]) .island-station-nav {
  display: none;
}

.island-station-nav__list {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.island-station-nav__btn {
  align-items: center;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  box-sizing: border-box;
  color: var(--color-ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2xs);
  text-align: center;
  width: 100%;
}

.island-station-nav__name {
  font-size: 0.875rem;
  white-space: nowrap;
}

.island-station-nav__status {
  color: var(--color-ink-2);
  font-size: 0.8125rem;
}

.island-station-nav__btn[aria-current="location"] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.island-station-nav__btn[aria-current="location"] .island-station-nav__status {
  color: var(--color-paper);
}

.island-station-nav__btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}

.island-station-nav__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* 手機：底部抽屜。高度由 JS 以同一個數字寫進 --island-drawer-h（也傳給 3D 取景），
   ⛔ 用固定視窗高度單位（內嵌瀏覽器的工具列會讓它們大於可見高），只准 JS 量到的值或 dvh；JS 還沒量到之前先用 50dvh。
   padding-bottom 只放安全區（drawerSnapHeights 讀它算 peek 高度）。 */
body[data-view="3d"][data-phase="playing"] .island-game {
  background: var(--color-paper);
  bottom: 0;
  box-shadow: 0 -1px 0 var(--color-rule);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: var(--island-drawer-h, 50dvh);
  left: 0;
  max-width: none;
  overflow: hidden;
  padding: 0 calc(var(--space-sm) + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) calc(var(--space-sm) + env(safe-area-inset-left, 0px));
  position: fixed;
  right: 0;
  transition: height 250ms ease-out;
  z-index: 10;
}

body[data-view="3d"][data-phase="playing"] .island-game[data-dragging="true"] {
  transition: none;
}

body[data-view="3d"][data-phase="playing"] .island-drawer__bar {
  flex: none;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  min-height: 56px;
  order: -1; /* 儲存空間提示在 DOM 裡仍是第一個，但視覺上把手列永遠在最上面（peek 只露這一列） */
}

body[data-view="3d"][data-phase="playing"] .island-drawer__bar .island-btn {
  flex: none;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
}

body[data-view="3d"][data-phase="playing"] .island-game .island-note {
  flex: none;
  max-width: none;
}

.island-collapsible {
  min-height: 0;
}

body[data-view="3d"][data-phase="playing"] .island-collapsible {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-xs);
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 頁尾搬進抽屜底部：跟著抽屜背景，不再自己撐出頁面高度 */
body[data-view="3d"][data-phase="playing"] .island-game .site-footer {
  background: transparent;
  border-top: 1px solid var(--color-rule);
  margin-top: var(--space-sm);
}

body[data-view="3d"][data-phase="playing"] .island-game .site-footer .wrap {
  max-width: none;
  padding-inline: 0;
}

/* 桌機：右側面板，沒有把手（頁首 z-index 較高、蓋在面板上） */
@media (min-width: 900px) {
  body[data-view="3d"][data-phase="playing"] .island-game {
    bottom: 0;
    box-shadow: -1px 0 0 var(--color-rule);
    height: auto;
    left: auto;
    padding-top: 5rem;
    top: 0;
    transition: none;
    width: 400px;
  }

  body[data-view="3d"][data-phase="playing"] .island-drawer__bar {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .island-canvas {
    transition: none;
  }

  body[data-view="3d"][data-phase="playing"] .island-game {
    transition: none;
  }
}

/* ===== 通關證分享 fallback（圖片＋長按說明＋下載）===== */
.island-share {
  display: grid;
  gap: var(--space-xs);
  justify-items: start;
}

.island-share__img {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-btn);
  display: block;
  height: auto;
  max-width: min(100%, 18rem);
}

.island-share .island-practice {
  margin: 0;
}

/* ===== 點選物件：說明卡與「這附近可以點的東西」清單（只在 3D 版面出現）===== */
body:not([data-view="3d"]) .island-object-card,
body:not([data-view="3d"]) .island-explore {
  display: none;
}

.island-object-card h2 {
  font-family: var(--font-display);
}

.island-object-card h2:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.island-explore__title {
  font-size: 1rem;
  margin: 0 0 var(--space-xs);
}

.island-explore__list {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.island-explore__list .btn {
  justify-self: start;
  text-align: left;
}