/* === Page 3: Select (The Go Board) === */

.page--select {
  /* Using shared variables, but can override specific page needs */
  overflow: hidden;
  /* 禁止捲動，避免進場擠壓 */

  /* === 棋盤群組變數 === */
  /* 調整這些變數可以統一控制棋盤和線條 */
  --board-container-size: 95vh;
  /* 棋盤容器大小 */
  --board-line-width: 1340px;
  /* 線條寬度 */
  --board-line-height: 980px;
  /* 線條高度 */
  --board-line-offset-x: 0px;
  /* 線條水平偏移 */
  --board-line-offset-y: 20px;
  /* 線條垂直偏移 */

  /* 網格系統 */
  --grid-cols: 12;
  /* 12格 = 13條豎線 = 13個橫向交點 */
  --grid-rows: 10;
  /* 10格 = 11條橫線 = 11個縱向交點 */
  --grid-visible: 1;
  /* 網格可見度：1=不透明 (為了對位調整) */

  /* 棋子相關 */
  --grid-gap-x: calc(var(--board-line-width) / var(--grid-cols));
  --grid-gap-y: calc(var(--board-line-height) / var(--grid-rows));
  --stone-size: calc(min(var(--grid-gap-x), var(--grid-gap-y)) * 0.6);
  /* 依格線比例縮小，保留呼吸空間 */
  --stone-text-size: clamp(26px, calc(var(--stone-size) * 0.65), 46px);
}

/* === Entry cadence (no position shifts) === */
.page--select.select-entering .board-group,
.page--select.select-entered .board-group {
  transition: transform 1s ease-out, opacity 1000ms ease, filter 1200ms ease;
}

.page--select.select-entering .board-group {
  opacity: 0;
  filter: blur(12px);
}

.page--select.select-entered .board-group {
  opacity: 1;
  filter: blur(0);
  transition-delay: 1700ms;
}

.page--select.select-entering .board-grid,
.page--select.select-entered .board-grid {
  transition: opacity 1000ms ease;
}

.page--select.select-entering .board-grid {
  opacity: 0;
}

.page--select.select-entered .board-grid {
  opacity: 1;
  transition-delay: 2300ms;
}

/* === Layout === */
.select-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.page--select .dev-channel-panel--select {
  top: max(68px, calc(env(safe-area-inset-top) + 16px));
  left: max(16px, calc(env(safe-area-inset-left) + 12px));
  z-index: 140;
  max-width: min(320px, calc(100vw - 24px));
}

/* === Left Panel (History) === */
.side-panel {
  /* Retaining basic class just in case of JS reference, but hiding layout influence */
  display: none;
}

/* History Logic hidden for now as per design focusing on board */
.history-list {
  display: none;
}

/* Note: Right Panel styles removed as Instruction moved to Board */

/* === Center Stage: The Board === */
.board-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 15vh;
  /* Moved down from -2cm to 5vh to 15vh */
}

/* === Board Group (Board + Round Progress) === */
.board-group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: translateY(0);
  /* Reset transform */
  transition: transform 1s ease-out;
}

/* 大標：統一使用 .page-title */
.page--select .page-title {
  position: absolute;
  top: 7vh;
  /* Moved up to 7vh */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0;
  text-align: center;
  z-index: 50;
  pointer-events: none;
  /* 繼承統一字體設定 */
  /* Enlarged font size as requested */
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--color-text-primary);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.2);

  /* Ensure initial visibility state is handled by reveal class, but default to visible if JS fails */
  opacity: 1;
}

/* Page 3 Title Reveal Animation */
.page--select .page-title.reveal {
  opacity: 0 !important;
  /* Force hide initially */
  transform: translateX(-50%) translateY(0);
  filter: blur(10px);
  transition: opacity 2s ease, filter 2s ease;
}

.page--select .page-title.reveal.is-visible {
  opacity: 1 !important;
  /* Force show */
  filter: blur(0);
}

/* Round Transition Blur Effect */
.page--select .page-title.blur-out,
.stage-desc.blur-out {
  opacity: 0 !important;
  filter: blur(8px);
  transition: opacity 1s ease, filter 1s ease !important;
}

/* ... existing board-container styles ... */

/* === Confirm Button (Refactored) === */
/* === Confirm Button (Refactored) === */
.confirm-btn {
  /* Positioning relative to board-container */
  position: absolute;
  left: -180px;
  /* Shifted left to accommodate larger size */
  top: 50%;
  /* Centered vertically relative to board */
  transform: translateY(-50%);

  /* Vertical Layout (Explicitly defined here) */
  writing-mode: vertical-rl;
  text-orientation: upright;

  /* Flexbox for perfect centering */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Sizing & Spacing */
  font-size: 24px;
  /* Reduced by ~50% as requested */
  padding: 30px 20px;
  /* Reduced padding */
  letter-spacing: 0.2em;
  min-height: 280px;
  /* Reduced height */
  /* Guaranteed height */
  white-space: nowrap;

  /* Interaction & State */
  pointer-events: auto;
  z-index: 100;
  cursor: pointer;

  /* Transition for Appearance */
  transition: all 0.5s ease-out;
  opacity: 0;
  /* Hidden initially */
  visibility: hidden;
  /* Prevent clicks when hidden */
}

/* Disable hover movement */
.confirm-btn:hover {
  transform: translateY(-50%) !important;
}

.confirm-btn.visible {
  opacity: 1;
  visibility: visible;
}

.board-container {
  position: relative;
  /* 使用群組變數控制尺寸 - 改為長寬比控制 */
  /* 原始網格尺寸：1340px (寬) x 980px (高) */
  /* 整體縮小至畫面高度的 70% 左右 */
  height: 70vh;
  aspect-ratio: 1340 / 980;
  width: auto;

  /* background-image removed: 使用 JS 生成的輔助線作為主要視覺 */
  /* background-image: url('../assets/images/select/board_bg.png'); */
  /* background-size: 100% 100%; */
  /* background-position: center; */
  /* background-repeat: no-repeat; */

  z-index: 1;
  border-radius: 2px;
  box-shadow: none;
  overflow: visible !important;
}

/* Board Grid - 顯示網格線 */
.board-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;

  /* 模擬圖檔特色：周邊漸透明 (Vignette Fade) */
  /* 使用遮罩讓網格線在邊緣逐漸消失，而非生硬切斷 */
  /* 加強版：外圍完全消失 (從 50% 開始衰減，到 80% 完全透明) */
  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
}

.board-grid line {
  /* 將線條顏色改為金色，類比金色網格 */
  stroke: var(--color-accent-gold);
  stroke-width: 1;
  stroke-linecap: round;
  /* 添加發光效果 (粒子感/能量感) */
  filter: drop-shadow(0 0 3px var(--color-accent-gold));
  opacity: 0.7;
  /* 微調透明度讓它不至於太生硬 */
}

.board-grid circle {
  fill: var(--color-accent-gold);
  filter: drop-shadow(0 0 3px var(--color-accent-gold));
  opacity: 0.9;
}

/* === Stones Layer === */
.stones-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 容器不攔截，讓棋子可點擊 */
  z-index: 10;
  /* 確保棋子層在網格線 (z-index: 5) 之上 */
}

/* === Stone Points (Interactive) === */
.stone-point {
  position: absolute;
  transform: translate(-50%, -50%);

  /* 默認：可見，但不可點擊（由階段控制） */
  opacity: 1;
  pointer-events: none;

  cursor: pointer;
  transition: none;
  z-index: 10;
  /* 確保棋子在網格線之上 */
}

/* 顯示的棋子：可見 + 可點擊 */
/* 規則1：當前階段的對應棋子 */
.stones-layer[data-stage="domain"] .stone-type--domain,
.stones-layer[data-stage="inner"] .stone-type--inner,
.stones-layer[data-stage="outer"] .stone-type--outer,
.stones-layer[data-stage="action"] .stone-type--action {
  opacity: 1;
  pointer-events: auto;
}

/* 規則2：任何階段中，只要是「已放置」的棋子，都必須顯示並可點擊 */
.stone-point.is-placed {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10;
  /* 確保已放置的棋子在最上層 */
}

/* Stone Text */
.stone-text {
  font-size: var(--stone-text-size);
  /* 依棋子尺寸縮放 */
  font-weight: 300;
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
  text-shadow: none;
  /* 移除文字陰影 */
  display: block;
  pointer-events: none;
  position: relative;
  z-index: 3;
}

/* Placed Stone - Shows Image */
/* Placed Stone - Shows Image */
.stone-point {
  /* 點擊層與棋子視覺尺寸一致 */
  width: var(--stone-size);
  height: var(--stone-size);
  /* 確保子元素溢出可見 (浮起時不被切掉) */
  overflow: visible;
}

/* 文字跟隨圖片浮起 */
.stone-point .stone-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-size: var(--stone-text-size);
  font-weight: 300;
  text-shadow: none;
  transition: transform 0.5s;
}

.stone-point.is-placed .stone-text {
  transform: translate(-50%, -50%) translateY(-8px);
}

/* 鎖定後的棋子：文字回到原位 */
.stone-point.is-placed.locked .stone-text {
  transform: translate(-50%, -50%);
}

/* 圖片 (Image) - 負責浮起 */
/* 圖片 (Image) (Moved to .stone-visual) */
/* .stone-point::before REPLACED by .stone-visual */
.stone-point .stone-visual {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--stone-size);
  height: var(--stone-size);
  z-index: 2;
  pointer-events: none;
}

/* 1. Stone Image (::before) */
.stone-point .stone-visual::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #1a1a1a;
  /* 不透明背景：遮住 SVG 邊緣透明區域後的網格線 */
  z-index: 2;
  /* Image on top */
  transition: transform 0.5s;
}

/* 2. Shadow (::after) */
.stone-point .stone-visual::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  /* 起始位置：直接設定在下方 30px，避免動畫時從上方滑下來 */
  transform: translate(-50%, -50%) translateY(30px) scale(1.0);
  width: var(--stone-size);
  height: var(--stone-size);
  border-radius: 50%;
  z-index: 1;
  /* Shadow below image (z:2) */
  background: radial-gradient(circle, #000 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  pointer-events: none;
}

/* 被選中的棋子 - 圖案浮起 (Image Floats) */
.stone-point.is-placed .stone-visual::before {
  transform: translateY(-8px);
  /* 圖案顯著向上浮起 */
}

/* 鎖定後的棋子：圖案回到原位 (Drop back) */
/* 鎖定後的棋子：圖案回到原位 (Drop back) */
.stone-point.is-placed.locked .stone-visual::before {
  transform: translateY(0);
}

/* 陰影 (Shadow) - 留在原地，僅出現 */




/* 被選中的棋子 - 陰影出現 (Shadow Appears small) */
.stone-point.is-placed .stone-visual::after {
  opacity: 1;
  /* 浮起時：變小 並向下方位移以確保可見 (錯位與光影感) */
  transform: translate(-50%, -50%) translateY(30px) scale(0.4);
}

/* 鎖定後的棋子 - 陰影消失 (回到地面) */
/* 鎖定後的棋子 - 陰影消失 (回到地面) */
/* 鎖定後的棋子 - 陰影消失 (回到地面) */
.stone-point.is-placed.locked .stone-visual::after {
  opacity: 0;
  /* 落下時：變大回 1.0 */
  transform: translate(-50%, -50%) translateY(30px) scale(1.0);
}

/* === 棋子入場動畫 (Stone Entering Animation) === */
/* 棋子從懸浮狀態落到棋盤線上 */

/* 落地動畫 - 使用 keyframes 確保動畫可靠執行 */
@keyframes stoneLandImage {
  from {
    transform: translateY(-12px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes stoneLandText {
  from {
    transform: translate(-50%, -50%) translateY(-12px);
  }

  to {
    transform: translate(-50%, -50%) translateY(0);
  }
}

@keyframes stoneLandShadow {
  from {
    opacity: 0.6;
    transform: translate(-50%, -50%) translateY(30px) scale(0.5);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(30px) scale(1.0);
  }
}

/* 入場狀態：棋子懸浮 (圖片向上) */
.stone-point.stone-entering .stone-visual::before {
  transform: translateY(-12px);
}

/* 入場狀態：文字跟隨棋子懸浮（一起向上） */
.stone-point.stone-entering .stone-text {
  transform: translate(-50%, -50%) translateY(-12px);
}

/* 入場狀態：陰影出現 (模擬懸空) */
.stone-point.stone-entering .stone-visual::after {
  opacity: 0.6;
  transform: translate(-50%, -50%) translateY(30px) scale(0.5);
}

/* 落地動畫觸發 - 頁面初始 (2.0s + 彈跳) - 調整為慢節奏開場 */
.stone-point.stone-landing--initial .stone-visual::before {
  animation: stoneLandImage 2.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.stone-point.stone-landing--initial .stone-text {
  animation: stoneLandText 2.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.stone-point.stone-landing--initial .stone-visual::after {
  animation: stoneLandShadow 2.0s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 落地動畫觸發 - 回合開始 (標準時間) */
.stone-point.stone-landing--round .stone-visual::before {
  animation: stoneLandImage 0.5s ease-out forwards;
}

.stone-point.stone-landing--round .stone-text {
  animation: stoneLandText 0.5s ease-out forwards;
}

.stone-point.stone-landing--round .stone-visual::after {
  animation: stoneLandShadow 0.5s ease-out forwards;
}

/* Convergence Eye */
.convergence-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

.convergence-eye.active {
  opacity: 1;
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

/* Different Stone Types (With images when placed) */
.stone-type--domain .stone-visual::before {
  background-image: url('../assets/images/select/stone_gold.svg');
}

.stone-type--inner .stone-visual::before {
  background-image: url('../assets/images/select/stone_white.svg');
}

.stone-type--outer .stone-visual::before {
  background-image: url('../assets/images/select/stone_black.svg');
}

.stone-type--action .stone-visual::before {
  background-image: url('../assets/images/select/stone_red.svg');
}

/* 不同棋子的文字顏色 */
/* 金棋 - 白字 */
.stone-type--domain .stone-text {
  color: #111;
}

/* 白棋 - 黑字 */
.stone-type--inner .stone-text {
  color: #111;
}

/* 黑棋 - 白字 */
.stone-type--outer .stone-text {
  color: #fff;
}

/* 紅棋 - 白字 */
.stone-type--action .stone-text {
  color: #fff;
}

/* Connection Lines */
.connection-line {
  fill: none;
  stroke: var(--color-accent-gold);
  stroke-width: 1px;
  stroke-opacity: 0.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 1s ease-out forwards;
  filter: drop-shadow(0 0 2px var(--color-accent-gold-glow));
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stoneSnap {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* === Round Progress Indicator === */
.round-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  opacity: 0.6;
  transform: translateY(-0.1cm);
}

.round-dot {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(232, 232, 232, 0.35);
  border-radius: 50%;
  background: transparent;
  transition: all 0.5s ease;
  position: relative;
}

.round-dot::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 1px;
  background: rgba(232, 232, 232, 0.28);
  opacity: 0.5;
}

.round-dot:last-child::after {
  display: none;
}

/* Round States */
.round-progress[data-round="1"] .round-1 {
  background: rgba(232, 232, 232, 0.4);
  border-color: rgba(232, 232, 232, 0.75);
}

.round-progress[data-round="2"] .round-1 {
  background: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
}

.round-progress[data-round="2"] .round-2 {
  background: rgba(232, 232, 232, 0.4);
  border-color: rgba(232, 232, 232, 0.75);
}

.round-progress[data-round="3"] .round-1,
.round-progress[data-round="3"] .round-2 {
  background: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
}

.round-progress[data-round="3"] .round-3 {
  background: rgba(232, 232, 232, 0.4);
  border-color: rgba(232, 232, 232, 0.75);
}

.round-progress[data-round="4"] .round-1,
.round-progress[data-round="4"] .round-2,
.round-progress[data-round="4"] .round-3,
.round-progress[data-round="4"] .round-4 {
  background: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
}

/* === New Instruction Group (Absolute anchored to Board) === */
.instruction-group-in-board {
  position: absolute;
  /* Anchor to the right side of the board */
  /* Move right by 3cm total (approx 115px): -25px - 115px = -140px */
  /* Symmetrical to CTA (left: -180px) */
  right: -180px;
  /* Moved closer to board (-25px) */
  /* Reduced from 120px to effectively occupy the "panel" space */
  /* Top 1/3 position -> Symmetrical 50% */
  top: 50%;
  transform: translateY(-50%);

  /* Ensure it doesn't scale WITH the board but stays anchored relative to it? 
     Wait, if it's inside board-container, it SCALES. 
     This is GOOD for maintaining "Right 1/3" visual ratio.
     But we must ensure font size doesn't get too tiny. 
  */
  z-index: 100;
  pointer-events: none;
  /* Ensure children layout correctly */
  display: flex;
  flex-direction: row-reverse;
  /* Desc (Right) -> Hint (Left) */
  align-items: center;
  gap: 24px;
}

.stage-desc {
  font-size: 54px;
  /* 放大1.5倍 (36px × 1.5 = 54px) */
  color: var(--color-text-secondary);
  letter-spacing: 0.4em;
  opacity: 0.9;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-weight: 200;

  /* Reveal Animation */
  opacity: 0;
  transform: translateY(0);
  filter: blur(8px);
  transition: opacity 2000ms ease, filter 2000ms ease;
}

.stage-hint {
  font-size: 29px;
  color: var(--color-accent-gold);
  letter-spacing: 0.3em;
  opacity: 0.8;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  font-weight: 300;

  /* Container Layout */
  display: flex;
  /* Stack spans vertically in vertical-rl mode */
  /* In vertical-rl, main axis is vertical. flex-direction: column? No, row flows top-to-bottom */
  transform: translateX(68px);
  /* Static position shift */

  /* Initial Reveal (Parent) */
  opacity: 0;
  filter: blur(8px);
  transition: opacity 2000ms ease, filter 2000ms ease;
}

.stage-hint span {
  display: inline-block;
  /* Allow transform/filter */
}

/* Number Span specific styles */
#hintCount {
  opacity: 1;
  /* Default visible when parent is visible */
  transition: opacity 1s ease, filter 1s ease;
}

/* Parent Reveal */
.stage-desc.reveal.is-visible,
.stage-hint.reveal.is-visible {
  opacity: 0.9;
  transform: translateY(0);
  /* For desc, hint uses translateX in base style */
  filter: blur(0);
}

/* Ensure hint keeps its translateX when is-visible */
.stage-hint.reveal.is-visible {
  transform: translateX(68px);
}

/* Number Exit Animation */
#hintCount.blur-out {
  opacity: 0 !important;
  filter: blur(8px);
  transition: opacity 1s ease, filter 1s ease;
}

/* Number Enter Animation */
#hintCount.is-visible {
  animation: countConverge 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes countConverge {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.5);
    /* Slight pop effect */
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.page--select .page-title.blur-out,
.stage-desc.blur-out {
  opacity: 0 !important;
  transition: opacity 1s ease !important;
  filter: blur(8px);
}

/* Old .confirm-btn styles removed and consolidated above */

/* Hover effects handled by .cta */

/* .btn-text replaced by .cta-label - Letting spa.css handle fonts */

/* === Mobile + Tablet Adjustments (Do not affect desktop) === */
@media (max-width: 1024px) {
  .page--select {
    --board-width: 100vw;
    --board-height: 100vh;
    --grid-gap-x: calc(var(--board-width) / var(--grid-cols));
    --grid-gap-y: calc(var(--board-height) / var(--grid-rows));
    --stone-size: calc(min(var(--grid-gap-x), var(--grid-gap-y)) * 0.55);
    --stone-text-size: clamp(24px, calc(var(--stone-size) * 0.65), 40px);
  }

  .board-grid {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .select-wrapper {
    flex-direction: column;
    justify-content: center;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .page--select .page-title {
    top: clamp(3vh, 5vh, 7vh);
    font-size: clamp(30px, 6vw, 58px);
    letter-spacing: 0.26em;
  }

  .board-stage {
    margin-top: 0;
    height: 100%;
  }

  .board-group {
    transform: translateY(0);
  }

  .board-container {
    width: var(--board-width);
    height: var(--board-height);
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
  }

  .board-grid,
  .stones-layer,
  .convergence-eye {
    transform: translate3d(var(--board-tx, 0px), var(--board-ty, 0px), 0) scale(var(--board-scale, 1));
    transform-origin: center;
    transition: transform 700ms ease;
    will-change: transform;
  }

  .board-grid line {
    stroke-width: 0.85;
  }

  .board-grid {
    -webkit-mask-image: radial-gradient(ellipse at center, black 52%, transparent 85%);
    mask-image: radial-gradient(ellipse at center, black 52%, transparent 85%);
  }

  .round-progress {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + clamp(50px, 9vh, 86px));
    transform: translateX(-50%);
    margin-top: 0;
    opacity: 0.7;
    z-index: 60;
    pointer-events: none;
  }

  .instruction-group-in-board {
    position: fixed;
    top: 50%;
    right: calc(env(safe-area-inset-right) + clamp(10px, 4vw, 28px));
    left: auto;
    transform: translateY(-50%);
    gap: clamp(10px, 2vw, 18px);
    z-index: 80;
  }

  .stage-desc {
    font-size: clamp(16px, 2.6vw, 26px);
    letter-spacing: 0.26em;
  }

  .stage-hint {
    font-size: clamp(14px, 2.2vw, 22px);
    letter-spacing: 0.22em;
    transform: translateX(clamp(6px, 1.4vw, 16px));
  }

  .stage-hint.reveal.is-visible {
    transform: translateX(clamp(6px, 1.4vw, 16px));
  }

  /* 中文手機版：提高第三頁小標與提示可讀性 */
  html[data-ui-variant="mobile-zh"] .page--select .stage-desc {
    font-size: clamp(18px, 3vw, 28px);
  }

  html[data-ui-variant="mobile-zh"] .page--select .stage-hint {
    font-size: clamp(16px, 2.6vw, 24px);
  }

  .confirm-btn {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + clamp(8px, 2.6vh, 20px));
    top: auto;
    transform: translate(-50%, 140%);
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    min-height: auto;
    padding: clamp(10px, 1.6vh, 14px) clamp(26px, 8vw, 44px);
    font-size: clamp(15px, 2.2vw, 21px);
    letter-spacing: 0.2em;
    background: rgba(10, 10, 14, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: transform 600ms ease, opacity 600ms ease;
    z-index: 70;
  }

  .confirm-btn .cta-label {
    writing-mode: horizontal-tb;
  }

  .confirm-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .confirm-btn:hover {
    transform: translate(-50%, 0) !important;
  }

  .stone-point::after {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: 0;
    pointer-events: auto;
  }

  .stone-point.is-placed {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  .page--select {
    --board-width: 100vw;
    --board-height: 100vh;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  .page--select .page-title {
    top: clamp(2vh, 4vh, 6vh);
  }

  .board-stage {
    margin-top: 0;
  }

  .page--select {
    --board-width: 100vw;
    --board-height: 100vh;
  }
}

@media (max-width: 768px) {
  .page--select .dev-channel-panel--select {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    left: calc(env(safe-area-inset-left) + 12px);
    max-width: min(92vw, 340px);
  }
}