/* Layout: 全螢幕 WebGL 雪道 + 四角浮動白卡 HUD。
   出發前準備卡：上方分頁（雪場地圖 / 雪板 / 服裝），左欄是選項，右欄固定是 3D 試穿小人 + 目前選項的詳細資料。
   刻意只做一個淺色雪地世界，不設深色主題，但所有顏色都明確定義。 */
:root {
  --paper: #E6EBEF;
  --card: #FFFFFF;
  --well: #F2F5F7;
  --ink: #121417;
  --mute: #737A82;
  --line: rgba(18, 20, 23, .10);
  --go: #1F9D63;
  --blue: #2F6BEA;
  --warn: #E5484D;
  --gold: #C99A2E;
  --sh: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .08);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

html,
body {
  height: 100%
}

[hidden] {
  display: none !important
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none
}

#c {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translate3d(0, 0, 0);
  will-change: transform
}

/* 獨立 GPU 圖層（iOS 主畫面 App 底部空白修正的一部分，見 game.js iosRelayout） */
html,
body {
  overscroll-behavior: none
}

/* 關掉 iOS 橡皮筋回彈 */

.card {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--sh)
}

.pill {
  font: 500 13px/1 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  box-shadow: var(--sh);
  cursor: pointer
}

.pill:hover {
  background: var(--well)
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px
}

.pill.ink {
  background: var(--ink);
  color: #fff
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 11px/1 var(--sans);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums
}

/* 日本雪場慣例：綠＝初級、紅＝中級、黑＝上級 */
.g-green {
  background: #E3F4EC;
  color: var(--go)
}

.g-red {
  background: #FDE8E8;
  color: #C93439
}

.g-black {
  background: var(--ink);
  color: #fff
}

.combo {
  background: #FBF1DB;
  color: #8A6510
}

.board {
  background: var(--well);
  color: var(--ink)
}

.bar {
  height: 3px;
  background: var(--well);
  border-radius: 3px;
  overflow: hidden
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  border-radius: 3px;
  transition: width .2s
}

.info {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  padding: 14px 16px;
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.info h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.25
}

.info .sub {
  font-size: 12px;
  color: var(--mute)
}

.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.stats {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: 272px;
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, auto));
  padding: 12px 6px
}

.stat {
  padding: 0 16px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px
}

.stat:first-child {
  border-left: 0
}

.stat .k {
  font-size: 11px;
  color: var(--mute)
}

.stat .v {
  font: 600 22px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  white-space: nowrap
}

.stat .v small {
  font-size: 12px;
  color: var(--mute);
  font-weight: 500;
  margin-left: 2px
}

.tools {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  gap: 8px
}

.keys {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px 12px;
  align-items: center;
  font-size: 12px;
  color: var(--mute)
}

.kbd {
  display: inline-flex;
  gap: 3px
}

.kbd b {
  font: 500 11px/1 var(--mono);
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 6px;
  min-width: 12px;
  text-align: center
}

/* 左下圓形小地圖（雷達）：灰色金屬外框 + 內陰影 */
.radar {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: 196px;
  height: 196px;
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(150deg, #F2F4F6 0%, #C3CAD2 55%, #A9B1BA 100%);
  box-shadow: var(--sh), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -2px 3px rgba(0, 0, 0, .12)
}

.radar canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%
}

.radar::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .28);
  pointer-events: none
}

.radar-tip {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  font: 600 12px/1 var(--sans);
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 7px 11px;
  white-space: nowrap;
  box-shadow: var(--sh)
}

.radar-tip.red {
  background: var(--warn)
}

.radar-tip.blue {
  background: var(--blue)
}

.keys .hd {
  grid-column: 1/-1;
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--ink);
  padding-top: 4px;
  border-top: 1px solid var(--line)
}

.keys .hd:first-child {
  border-top: 0;
  padding-top: 0
}

.toast {
  position: fixed;
  left: 50%;
  top: 104px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  transition: opacity .25s, transform .25s
}

.toast.off {
  opacity: 0;
  transform: translate(-50%, -6px)
}

.toast .pill {
  cursor: default;
  white-space: nowrap
}

/* 得分特效：從小人／旗門彈出、往上飄的分數（位置由 popAt() 投影算出）。外框用 8 方向 text-shadow，舊瀏覽器也一樣粗 */
.pops {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden
}

.pop {
  --o: #121417;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font: 800 22px/1 var(--sans);
  color: #fff;
  white-space: nowrap;
  text-shadow: 2px 0 0 var(--o), -2px 0 0 var(--o), 0 2px 0 var(--o), 0 -2px 0 var(--o), 2px 2px 0 var(--o), -2px 2px 0 var(--o), 2px -2px 0 var(--o), -2px -2px 0 var(--o), 0 5px 0 rgba(18, 20, 23, .35);
  animation: popUp 1.1s cubic-bezier(.2, .9, .3, 1.2) forwards
}

.pop small {
  font-size: 12px;
  font-weight: 700;
  margin-top: 3px
}

.pop.gate.red {
  color: #FF8A8E
}

.pop.gate.blue {
  color: #8FB4FF
}

.pop.small {
  font-size: 20px
}

.pop.mid {
  font-size: 28px;
  color: #FFE58F
}

.pop.big {
  font-size: 38px;
  color: #FFD84D;
  animation-duration: 1.4s
}

.pop.warn {
  font-size: 18px;
  color: #FFB3B5
}

.pop.miss {
  font-size: 16px;
  color: #C9D1D9;
  animation-name: popMiss
}

/* 連續旗門章：從大蓋下來；5 連以上更大更金 */
.pop.pcombo {
  font-size: 30px;
  color: #FFE58F;
  animation-name: popStamp;
  animation-duration: 1s
}

.pop.pcombo small {
  order: -1;
  margin: 0 0 2px
}

.pop.pcombo.hot {
  font-size: 40px;
  color: #FFD84D
}

.pop.perfect {
  font-size: 30px;
  font-style: italic;
  color: #FFD84D;
  letter-spacing: .04em;
  animation-name: popStamp;
  animation-duration: 1.5s
}

@keyframes popUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.4)
  }

  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3)
  }

  30% {
    transform: translate(-50%, -50%) scale(1)
  }

  75% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 70px)) scale(.95)
  }
}

@keyframes popStamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2) rotate(-14deg)
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.92) rotate(-6deg)
  }

  30% {
    transform: translate(-50%, -50%) scale(1.06) rotate(-6deg)
  }

  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(-6deg)
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 24px)) scale(1) rotate(-6deg)
  }
}

@keyframes popMiss {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%)
  }

  20% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 30px))
  }
}

/* 總分滾動時閃一下 */
#sScore {
  display: inline-block;
  transform-origin: left center
}

#sScore.bump {
  animation: scoreBump .45s ease-out
}

@keyframes scoreBump {
  0% {
    color: #C99A2E;
    transform: scale(1.25)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes popFade {

  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%)
  }

  20%,
  70% {
    opacity: 1;
    transform: translate(-50%, -50%)
  }
}

@media (prefers-reduced-motion:reduce) {

  .pop,
  .pop.pcombo,
  .pop.perfect,
  .pop.miss {
    animation-name: popFade
  }

  #sScore.bump {
    animation: none
  }
}

/* 手機遊戲式觸控按鍵：左邊十字方向鍵、右邊動作鍵。body.touch 時顯示 */
.ctl {
  display: none;
  position: fixed;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 5;
  -webkit-touch-callout: none
}

.pad {
  left: max(16px, env(safe-area-inset-left, 0px))
}

/* 整組是一顆圓形搖桿 */
.acts {
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 206px;
  height: 188px
}

.tb {
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  box-shadow: var(--sh);
  font: 600 12px/1.1 var(--sans);
  display: grid;
  place-items: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: none
}

.tb.on {
  background: var(--ink);
  color: #fff;
  transform: scale(.94)
}

.tb svg {
  width: 22px;
  height: 22px
}

/* 左右搖桿：膠囊軌道＋黑色圓鈕，圓鈕位移由 game.js 設 --dx；兩端淡淡的 ◀ ▶ 提示方向 */
.pad .stick {
  position: relative;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  cursor: grab
}

.pad .stick.on {
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  transform: none
}

/* 四個方向提示；推到煞車／壓低時那個字變深（data-v 由 game.js 設定） */
.pad .stick-lbl {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  color: var(--mute);
  pointer-events: none
}

.pad .stick-lbl small {
  font-size: 9px;
  font-weight: 500;
  margin-top: 2px
}

.pad .stick-lbl.up {
  top: 10px;
  left: 50%;
  transform: translateX(-50%)
}

.pad .stick-lbl.down {
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse
}

.pad .stick-lbl.down small {
  margin: 0 0 2px
}

.pad .stick-lbl.left {
  left: 12px;
  top: 50%;
  transform: translateY(-50%)
}

.pad .stick-lbl.right {
  right: 12px;
  top: 50%;
  transform: translateY(-50%)
}

.pad .stick[data-v="tuck"] .up,
.pad .stick[data-v="brake"] .down,
.pad .stick[data-h="left"] .left,
.pad .stick[data-h="right"] .right {
  color: var(--ink)
}

.pad .stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  transition: transform .15s cubic-bezier(.2, .8, .2, 1)
}

.pad .stick.on .stick-knob {
  transition: none
}

.acts .tb {
  position: absolute;
  border-radius: 50%
}

.acts .jump {
  right: 0;
  bottom: 0;
  width: 86px;
  height: 86px;
  background: var(--ink);
  color: #fff;
  font-size: 16px
}

.acts .jump.on {
  background: #2a2e33
}

.acts .s {
  width: 58px;
  height: 58px;
  font-size: 11px
}

.acts .a1 {
  right: 96px;
  bottom: 0
}

.acts .a2 {
  right: 92px;
  bottom: 68px
}

.acts .a3 {
  right: 28px;
  bottom: 100px
}

.acts .a4 {
  right: 150px;
  bottom: 118px;
  width: 52px;
  height: 52px
}

.acts .s em {
  display: block;
  font-style: normal;
  font-size: 9px;
  font-weight: 500;
  color: var(--mute)
}

.acts .on em {
  color: #cfd3d8
}

body.touch .ctl {
  display: grid
}

body.touch .acts {
  display: block
}

body:has(.modal:not([hidden])) .ctl {
  display: none
}

.touch-only {
  display: none
}

body.touch .touch-only {
  display: block
}

/* 只有手機用得到的提示（分享選單…） */
body.touch .keys,
body.touch .kbd-only {
  display: none
}

/* 只有鍵盤用得到的提示（招式表、按 Enter…），觸控模式不顯示 */
body.touch .radar {
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 196px);
  width: 150px;
  height: 150px;
  padding: 8px
}

body.touch .radar::after {
  inset: 8px
}

@media (max-width:760px) {
  body.touch .radar {
    bottom: auto;
    top: calc(max(16px, env(safe-area-inset-top, 0px)) + 138px);
    width: 118px;
    height: 118px;
    padding: 6px
  }

  body.touch .toast {
    top: calc(max(16px, env(safe-area-inset-top, 0px)) + 270px)
  }

  .tools {
    gap: 6px
  }

  .tools .pill {
    padding: 8px 10px;
    font-size: 12px
  }

  body.touch .radar::after {
    inset: 6px
  }

  body.touch .radar-tip {
    left: 0;
    transform: none
  }

  /* 小地圖貼著左邊，標籤置中會超出畫面 */
  .pad .stick {
    width: 160px;
    height: 160px
  }

  .pad .stick-knob {
    width: 52px;
    height: 52px
  }

  /* 搖桿右端要避開「尾翹」圓鈕 */
  .acts {
    transform: scale(.9);
    transform-origin: right bottom
  }
}

/* 右下招式表：可收合 */
.keys-head {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  padding: 0;
  font: 600 12px/1 var(--sans);
  color: var(--ink);
  cursor: pointer
}

.keys-head span {
  font: 500 11px/1 var(--mono);
  color: var(--mute)
}

.keys.collapsed> :not(.keys-head) {
  display: none
}

.keys.collapsed {
  padding: 10px 14px
}

/* 彈出卡 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(230, 235, 239, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: auto;
  touch-action: pan-y
}

.sheet {
  box-sizing: border-box;
  width: min(488px, 100%);
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)));
  overflow: auto;
  padding: 26px 24px 22px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

/* 兩欄版：卡片固定高度、左右兩欄各自捲動。左欄（雪板選項）比右欄長很多，整張一起捲會把右邊的預覽和資料捲走 */
.sheet.wide {
  width: min(1028px, 100%);
  height: calc(100dvh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px)));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px 22px;
  align-items: start
}

/* 內距＋等量負邊距：欄裡卡片的外框陰影、焦點框貼著欄邊時不會被 overflow 切掉 */
.sheet.wide>.col {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 6px 6px 4px;
  margin: -4px -6px -6px -4px
}

/* 欄有高度上限後，flex 會把裡面的東西壓扁（預覽小人會被壓到 0 高）：一律不縮，多的就捲動 */
.sheet.wide>.col>* {
  flex-shrink: 0
}

.sh-head {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap
}

.col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0
}

.appicon {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  flex: none
}

/* icons/icon-192.png */
.eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--mute);
  text-transform: uppercase
}

.sheet h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance
}

.sheet p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5057
}

/* 出發前準備的分頁：直排書籤疊在卡片左邊緣上、上下置中（一半在卡片外、一半蓋在卡片留白上，不佔卡片空間）。
   放在會捲動的卡片外面，捲到哪都點得到；選中的是黑底 */
.sheet-wrap {
  position: relative;
  width: min(1028px, 100%)
}

.sheet-wrap>.sheet {
  width: 100%
}

.tabs {
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px
}

.tab {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .14em;
  border: 0;
  background: #E4EAEF;
  font: 600 12px/1 var(--sans);
  color: var(--mute);
  width: 30px;
  padding: 12px 0;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12)
}

.tab:hover {
  background: #EEF2F5
}

.tab[aria-selected="true"] {
  width: 34px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22)
}

/* 排行榜分頁做成金牌：金屬漸層＋內圈亮邊＋底部壓暗＋一道斜斜的反光；選中時外面多一圈黑框（直放、橫放、電腦共用） */
.tab[data-tab="rank"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #FFF1C9 0%, #F2CB5B 35%, #D9A632 65%, #A97C14 100%);
  color: #5A4108;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(120, 80, 0, .35), 0 2px 8px rgba(169, 124, 20, .35)
}

.tab[data-tab="rank"]::after {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -10%;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: rotate(20deg);
  pointer-events: none
}

.tab[data-tab="rank"]:hover {
  filter: brightness(1.06)
}

.tab[data-tab="rank"][aria-selected="true"] {
  background: linear-gradient(160deg, #FFE58F 0%, #E5B53A 45%, #A97C14 100%);
  color: #3A2A05;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 0 2px var(--ink), 0 4px 12px rgba(169, 124, 20, .45)
}

.sec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px
}

.sec h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600
}

.sec span {
  font: 500 11px/1 var(--mono);
  color: var(--mute);
  letter-spacing: .06em
}

/* 雪板分頁：每組＝標題＋一排膠囊（點一下就選）＋一行說明。全部攤開，不用先展開 */
.pick-sec {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.pick-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.pchip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 12px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  font: 600 13px/1.15 var(--sans);
  color: var(--ink);
  text-align: left
}

.pchip em {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--mute)
}

.pchip:hover {
  background: var(--well)
}

.pchip:focus-visible,
.gfx:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px
}

.pchip.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.pchip.on em {
  color: rgba(255, 255, 255, .7)
}

.chip-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5a6067
}

.chip-desc b {
  color: var(--ink);
  font-weight: 600;
  margin-right: 6px
}

/* 板面塗鴉：左右滑的小雪板縮圖列，捲動時一格一格對齊 */
.gfx-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 2px 2px 6px;
  margin: -2px -2px 0;
  scrollbar-width: thin
}

.gfx {
  flex: 0 0 96px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 6px 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink)
}

.gfx:hover {
  background: var(--well)
}

.gfx.on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--well)
}

.gfx-board {
  width: 100%;
  aspect-ratio: 4.6/1;
  border-radius: 999px;
  background-size: 100% 100%;
  border: 1.5px solid var(--ink)
}

.gfx b {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap
}

/* 雪板選項：左邊單選清單，右邊框顯示選中那個的介紹 */
.opts {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch
}

.opt-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.opt {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  border-radius: 10px;
  padding: 7px 8px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  min-width: 0
}

.opt:hover {
  background: var(--well)
}

.opt:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px
}

/* 單選圓點 */
.opt i {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid #9AA3AB;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card)
}

.opt.on i {
  border-color: var(--ink)
}

.opt.on i::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink)
}

.opt b {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0
}

.opt b em {
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  color: var(--mute)
}

.opt.on {
  border-color: var(--line);
  background: var(--well)
}

.opt-desc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--well);
  border-radius: 14px;
  padding: 10px 12px
}

.opt-desc b {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap
}

.opt-desc b em {
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: var(--mute)
}

.opt-desc small {
  font-size: 12.5px;
  line-height: 1.55;
  color: #5a6067
}

/* 地圖分頁 */
.atlas {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  align-items: stretch
}

.jp {
  position: relative;
  min-height: 180px;
  background: linear-gradient(180deg, #EAF0F5, #DCE6EE);
  border-radius: 14px
}

.jp svg {
  position: absolute;
  inset: 6px;
  display: block;
  width: calc(100% - 12px);
  height: calc(100% - 12px)
}

/* 跟右邊列表一樣高，viewBox 由 fitJapan() 算 */
.jp .pin {
  cursor: pointer
}

/* 雪場越來越多：固定高度、上下滾動選擇（左邊地圖跟著這個高度） */
.areas {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin
}

.area {
  flex: none
}

.area {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink)
}

.area:hover {
  background: var(--well)
}

.area.on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--well)
}

.area .rg {
  font: 500 10px/1 var(--mono);
  color: var(--mute);
  letter-spacing: .06em;
  grid-row: span 2;
  align-self: center;
  writing-mode: vertical-rl;
  text-orientation: upright
}

.area b {
  font-size: 13px;
  font-weight: 600
}

.area small {
  font-size: 11px;
  color: var(--mute)
}

.trail {
  border-radius: 14px;
  overflow: hidden;
  background: #E9EFF3
}

.trail svg {
  display: block;
  width: 100%;
  height: auto
}

.trail .run {
  cursor: pointer
}

.runs {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.runcard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink)
}

.runcard:hover {
  background: var(--well)
}

.runcard.on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  background: var(--well)
}

.runcard .gm {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 12px;
  grid-row: span 2
}

.runcard b {
  font-size: 14px;
  font-weight: 600
}

.runcard small {
  font-size: 12px;
  color: #5a6067;
  line-height: 1.45
}

.runcard .meta {
  grid-column: 2;
  font: 500 11px/1.4 var(--mono);
  color: var(--mute)
}

.tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.tag {
  font: 500 11px/1 var(--sans);
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line)
}

/* 右欄 */
.pv3d {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #F7F9FB 0%, #E3E9EE 100%)
}

#pv3d {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  max-width: 100%;
  touch-action: none;
  cursor: grab
}

/* 拖曳只轉小人，不捲動下面的內容 */
.pv-act {
  position: absolute;
  left: 10px;
  top: 10px;
  font: 600 11px/1 var(--sans);
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  pointer-events: none
}

.pv-drag {
  position: absolute;
  right: 10px;
  bottom: 9px;
  font: 500 10px/1 var(--mono);
  color: var(--mute);
  pointer-events: none
}

.pv3d.stick {
  position: sticky;
  top: -26px;
  z-index: 3;
  margin: -26px -24px 0;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .18)
}

.pv3d.stick #pv3d {
  aspect-ratio: 16/8
}

.panel {
  background: var(--well);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.pv-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em
}

.pv-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.pv-tags .chip {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line)
}

.profile svg {
  width: 100%;
  height: auto;
  display: block
}

.statbars {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.sb {
  display: grid;
  grid-template-columns: 64px 1fr 18px;
  gap: 10px;
  align-items: center;
  font-size: 12px
}

.sb .track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px
}

.sb .track i {
  height: 7px;
  border-radius: 2px;
  background: #DCE2E8
}

.sb .track i.f {
  background: #7CC9A1
}

/* 板型本身的數值：淺綠 */
.sb .track i.up {
  background: var(--go)
}

/* 風格／板頭／固定器加上去的：深綠 */
.sb .track i.dn {
  background: #F08A8E
}

/* 被扣掉的：紅 */
.sb .n {
  font-family: var(--mono);
  text-align: right;
  color: var(--mute)
}

.pv-note {
  font-size: 12px;
  line-height: 1.5;
  color: #4a5057
}

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: #3d4248
}

.facts li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 6px
}

.facts li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mute);
  margin-top: 7px
}

/* 看自己的寬度排：4 格一排每格要 96px 以上（裝得下「12,345 分」），不夠就換成 2×2（手機橫放的右欄只有 ~245px） */
.kv {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  container-type: inline-size
}

.kv div {
  flex: 1 1 calc(25% - 4.5px);
  box-sizing: border-box;
  background: var(--card);
  border-radius: 10px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0
}

@container (max-width: 401px) {
  .kv div {
    flex-basis: calc(50% - 3px)
  }
}

.kv .k {
  font-size: 10px;
  color: var(--mute)
}

.kv .v {
  font: 600 15px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.lbl {
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--mute);
  text-transform: uppercase
}

.rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px
}

.rec b {
  font-weight: 600
}

.mini {
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 12px/1 var(--sans);
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap
}

.mini.ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line)
}

/* 服裝分頁：自拍換臉 */
.face-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: center;
  background: var(--well);
  border-radius: 14px;
  padding: 12px
}

.face-thumb {
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #F1C9A5 center / cover no-repeat;
  border: 2px dashed #C9A27A
}

.face-thumb.on {
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--line)
}

.face-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0
}

.face-txt b {
  font-size: 14px;
  font-weight: 600
}

.face-txt small {
  font-size: 12px;
  color: var(--mute)
}

.face-acts {
  grid-column: 1/-1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

/* 裁切視窗：疊在出發前準備上面 */
.face-modal {
  z-index: 20
}

.face-sheet {
  width: min(420px, 100%)
}

.face-sheet h2 {
  margin: 0;
  font-size: 20px
}

#faceCv {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  touch-action: none;
  cursor: grab
}

.face-zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600
}

.face-zoom input {
  flex: 1
}

.face-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

/* 服裝分頁 */
.wear {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.wrow {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.wrow .h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600
}

.wrow .h span {
  font-weight: 500;
  font-size: 12px;
  color: var(--mute)
}

.sw {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.sw button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08)
}

.sw button.on {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink)
}

/* 板身顏色：「跟著風格」是文字膠囊；最後一顆彩虹圓是選色器（原生 input 透明蓋在上面，點了叫出系統選色器） */
.sw .sw-auto {
  width: auto;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--card);
  font: 600 12px/1 var(--sans);
  color: var(--ink);
  box-shadow: none
}

.sw-pick {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  background: conic-gradient(#E5484D, #F28C28, #E5B53A, #3DD68C, #2F6BEA, #7C5CE0, #E5484D);
  cursor: pointer
}

.sw-pick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0
}

.sw .sw-auto.on,
.sw-pick.on {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink)
}

.wbtns {
  display: flex;
  gap: 8px
}

.go {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.go-sum {
  font-size: 12px;
  color: var(--mute);
  text-align: center;
  line-height: 1.5
}

.btn {
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 600 15px/1 var(--sans);
  padding: 17px;
  cursor: pointer
}

.btn:hover {
  background: #2a2e33
}

.btn.ghost {
  background: var(--well);
  color: var(--ink)
}

.btn.ghost:hover {
  background: #E6EAEE
}

.hint {
  font-size: 12px;
  color: var(--mute);
  text-align: center
}

.result {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px
}

.result div {
  background: var(--well);
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0
}

.result .k {
  font-size: 12px;
  color: var(--mute)
}

.result .v {
  font: 600 24px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.result .v small {
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
  margin-left: 3px
}

/* 數字大、單位小 */
.result .v .na {
  font: 600 16px/1 var(--sans);
  color: var(--mute)
}

/* 本雪道最佳：金色底、分數放大；破紀錄時加「新紀錄！」 */
.best {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FBF1DB;
  border: 1px solid #F0DDAE;
  border-radius: 16px;
  padding: 14px 16px;
  gap: 10px
}

.best .bl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #8A6510
}

.best .bl em {
  display: none;
  font: 700 11px/1 var(--sans);
  font-style: normal;
  color: #fff;
  background: var(--gold);
  border-radius: 999px;
  padding: 4px 8px;
  align-self: flex-start
}

.best.new .bl em {
  display: block
}

#rBest {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--ink)
}

#rBest b {
  font: 700 32px/1 var(--mono);
  letter-spacing: -.02em
}

#rBest small {
  font-size: 13px;
  font-weight: 500;
  color: #8A6510
}

#rBest .bt {
  margin-left: 10px;
  font-size: 14px;
  color: var(--mute)
}

.btnrow {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px
}

/* 結算卡的左右兩半：平常不佔版面，裡面的東西照原本順序排在卡片裡；手機橫放才變成兩欄（見最下面橫放區） */
.over-side,
.over-main {
  display: contents
}

/* 結算截圖：結束那一刻的畫面，評語用白色粗體疊在左下角（下緣加深色漸層，雪地上才看得清楚） */
.shot {
  position: relative
}

.shot img {
  display: none;
  width: 100%;
  aspect-ratio: 1/.62;
  object-fit: cover;
  border-radius: 16px;
  background: var(--well)
}

.shot.has img {
  display: block
}

.shot.has::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(18, 20, 23, 0), rgba(18, 20, 23, .6));
  pointer-events: none
}

.shot.has h2 {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  color: #fff;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.shot-share {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  font: 600 12px/1 var(--sans);
  padding: 8px 12px;
  box-shadow: var(--sh);
  cursor: pointer
}

/* 截圖右上角：分享圖片 */
.shot.has .shot-share {
  display: block
}

.shot-share:disabled {
  opacity: .5;
  cursor: default
}

/* 排行榜：出發前準備的 TOP 10、結算畫面的暱稱與上傳結果 */
.lboard {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px
}

.lboard li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--card);
  border-radius: 8px;
  padding: 6px 9px
}

.lboard .n {
  font: 600 11px/1 var(--mono);
  color: var(--mute)
}


.lboard .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600
}

.lboard .nm em {
  font-style: normal;
  font-size: 10px;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px
}

.lboard .s {
  font: 600 12px/1 var(--mono)
}

/* 前三名：金銀銅底色與外框；名次換成低多邊形獎盃（index.html 的 #trophy，三種明暗 --tl / --tm / --td 依名次換色） */
.lboard li.r1 {
  --tl: #FFE58F;
  --tm: #E5B53A;
  --td: #A97C14;
  background: linear-gradient(90deg, #FFF1C9, #FFFFFF 75%);
  box-shadow: inset 0 0 0 1.5px #EBC55A
}

.lboard li.r2 {
  --tl: #F7F9FB;
  --tm: #C3CBD3;
  --td: #7E8A96;
  background: linear-gradient(90deg, #ECF0F4, #FFFFFF 75%);
  box-shadow: inset 0 0 0 1.5px #C9D1D9
}

.lboard li.r3 {
  --tl: #F6C49B;
  --tm: #CD7F45;
  --td: #8C4E26;
  background: linear-gradient(90deg, #FBE5D4, #FFFFFF 75%);
  box-shadow: inset 0 0 0 1.5px #DDA57E
}

.lboard .trophy {
  display: block;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18))
}

.lboard li.r1 .s {
  color: #8A6510
}

.lboard li.r2 .s {
  color: #4F5A66
}

.lboard li.r3 .s {
  color: #7A4321
}

.lboard li.me {
  box-shadow: inset 0 0 0 1.5px var(--ink)
}

.lboard li.muted {
  display: block;
  background: none;
  padding: 2px 0;
  color: var(--mute)
}

.lb {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.lb-row {
  display: flex;
  gap: 8px
}

/* 16px：iPhone 點輸入框才不會自動放大 */
.lb-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  font: 500 16px/1.2 var(--sans);
  background: var(--well);
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text
}

.lb-msg {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--mute);
  text-align: center
}

.lb-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--blue);
  font: 600 12px/1 var(--sans);
  cursor: pointer
}

/* 鬼影：排行榜「比一場」、出發按鈕上方「跟 X 的鬼影比」、結算的分享勾選 */
.lboard li.gh {
  grid-template-columns: 24px 1fr auto auto
}

.rk-gh {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--well);
  color: var(--blue);
  font: 600 11px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer
}

.rk-gh.on {
  background: var(--blue);
  color: #fff
}

.gh-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue)
}

.lb-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mute);
  cursor: pointer
}

/* 排行榜分頁：選雪道的下拉選單 */
.rk-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600
}

.rk-pick select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font: 500 16px/1.2 var(--sans);
  background: var(--card);
  color: var(--ink)
}

/* 排行榜分頁：榜單上方的「我的名次」卡（有上榜時黑框；前三名名次方塊換深金銀銅，白字才看得清楚） */
.rk-mine {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px
}

.rk-mine.on {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink)
}

.rk-mine-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center
}

.rk-mine-rank {
  min-width: 44px;
  height: 44px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 18px/1 var(--mono)
}

.rk-mine:not(.on) .rk-mine-rank {
  background: var(--card);
  color: var(--mute);
  border: 1px dashed #B8C2CC
}

.rk-mine.r1 .rk-mine-rank {
  background: #A97C14
}

.rk-mine.r2 .rk-mine-rank {
  background: #6B7682
}

.rk-mine.r3 .rk-mine-rank {
  background: #8C4E26
}

.rk-mine-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0
}

.rk-mine-txt b {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.rk-mine-txt small {
  font-size: 12px;
  color: #5a6067
}

.rk-mine-score {
  font: 700 16px/1 var(--mono)
}

.rk-mine-nick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--warn)
}

.rk-mine .btn {
  padding: 12px;
  font-size: 14px
}

#rkBoard li {
  padding: 9px 11px;
  font-size: 13px
}

/* 錄影：分數列右上角的紅色 REC 小標（閃爍）、結算畫面的分享影片按鈕 */
.rec-dot {
  position: absolute;
  top: -7px;
  right: -7px;
  display: flex;
  align-items: center;
  gap: 4px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .06em;
  color: #fff;
  background: var(--warn);
  border-radius: 999px;
  padding: 4px 7px 4px 6px;
  box-shadow: 0 2px 6px rgba(229, 72, 77, .4)
}

.rec-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: recBlink 1s steps(2) infinite
}

@keyframes recBlink {
  50% {
    opacity: 0
  }
}

.btn.share {
  background: var(--warn)
}

.btn.share:hover {
  background: #D63C41
}

.btn.share:disabled {
  opacity: .6;
  cursor: default
}

@media (prefers-reduced-motion:reduce) {
  .rec-dot::before {
    animation: none
  }
}

@media (max-width:760px) {
  .info {
    display: none
  }

  .stats {
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    grid-template-columns: repeat(4, 1fr);
    padding: 10px 2px
  }

  .stat {
    padding: 0 8px
  }

  .stat .v {
    font-size: 16px
  }

  .tools {
    top: calc(max(16px, env(safe-area-inset-top, 0px)) + 72px)
  }

  .toast {
    top: 236px
  }

  /* 手機直放是單欄：回到整張卡片一起捲（預覽黏在卡片頂端，見 game.js placePv） */
  .sheet.wide {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    overflow: auto
  }

  .sheet.wide>.col {
    max-height: none;
    overflow: visible;
    padding: 0;
    margin: 0
  }

  .sheet-wrap {
    place-self: start center
  }

  .modal {
    place-items: start center
  }

  .result {
    grid-template-columns: 1fr 1fr
  }

  .atlas {
    grid-template-columns: 120px 1fr
  }
}

@media (max-width:380px) {
  .opts {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    gap: 6px
  }

  .opt {
    padding: 6px
  }
}

/* 手機橫放（高度 ≤ 500px）：雪道資訊卡收起來，分數列靠左上、按鈕靠右上，都縮小成一排；
   小地圖放左上分數列下面，搖桿和動作鍵縮小；瀏海那一側用 safe-area 讓開。出發前準備卡維持左右兩欄 */
@media (orientation:landscape) and (max-height:500px) {
  .info {
    display: none
  }

  .stats {
    top: max(8px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    right: auto;
    grid-template-columns: repeat(4, auto);
    padding: 7px 2px
  }

  .stat {
    padding: 0 10px;
    gap: 3px
  }

  .stat .k {
    font-size: 10px
  }

  .stat .v {
    font-size: 15px
  }

  .stat .v small {
    font-size: 10px
  }

  .tools {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    gap: 5px
  }

  .tools .pill {
    padding: 7px 9px;
    font-size: 11px
  }

  .toast,
  body.touch .toast {
    top: 64px
  }

  body.touch .radar {
    top: 84px;
    bottom: auto;
    left: max(12px, env(safe-area-inset-left, 0px));
    width: 104px;
    height: 104px;
    padding: 5px
  }

  body.touch .radar::after {
    inset: 5px
  }

  body.touch .radar-tip {
    left: 0;
    transform: none
  }

  /* 小地圖貼著左邊，標籤置中會超出畫面 */
  .ctl {
    bottom: max(10px, env(safe-area-inset-bottom, 0px))
  }

  .pad {
    left: max(12px, env(safe-area-inset-left, 0px))
  }

  .acts {
    right: max(12px, env(safe-area-inset-right, 0px));
    transform: scale(.8);
    transform-origin: right bottom
  }

  .pad .stick {
    width: 150px;
    height: 150px
  }

  .pad .stick-knob {
    width: 50px;
    height: 50px
  }

  .modal {
    place-items: center;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px))
  }

  .sheet {
    padding: 16px 18px;
    gap: 10px;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)))
  }

  /* 分頁書籤：跟直放一樣獨立漂浮、不佔版面。改成橫的一排膠囊，騎在卡片右上角的邊框上
     （上半截露在卡片外、下半截蓋在卡片 16px 的上留白裡，不會蓋到內容）；卡片整張往下挪 14px 讓出露在外面那半截 */
  .tabs {
    left: auto;
    right: 26px;
    top: -12px;
    transform: none;
    width: auto;
    flex-direction: row;
    gap: 4px
  }

  .sheet-wrap {
    margin-top: 14px
  }

  .tab,
  .tab[aria-selected="true"] {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    letter-spacing: .02em;
    width: auto;
    padding: 6px 10px;
    border-radius: 0 0 10px 10px;
    font-size: 11px
  }

  /* 標題列只在左欄上方：右欄從卡片頂端開始，整個高度都給它 */
  .sheet.wide>.sh-head {
    grid-column: 1;
    grid-row: 1
  }

  .sheet.wide>.col:nth-child(2) {
    grid-column: 1;
    grid-row: 2
  }

  .sheet.wide>.col:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / 3
  }

  /* 自拍換臉的裁切視窗：直的疊起來會比螢幕高，照片又佔掉大半（在照片上滑是移動照片、不是捲動），很難捲。
     橫放改成左右兩欄：左邊照片高度剛好等於螢幕可用高度，右邊放標題、說明、縮放和按鈕，整張不用捲 */
  .face-sheet {
    width: auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto minmax(200px, 280px);
    grid-template-rows: auto auto 1fr auto auto;
    column-gap: 18px;
    row-gap: 10px;
    overflow: hidden
  }

  .face-sheet>* {
    grid-column: 2
  }

  .face-sheet #faceCv {
    grid-column: 1;
    grid-row: 1 / -1;
    width: auto;
    height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)) - 32px)
  }

  .face-sheet .face-zoom {
    grid-row: 4
  }

  .face-sheet .face-btns {
    grid-row: 5
  }

  /* 手機橫放：跟電腦一樣兩欄各自捲（上面的 max-width:760px 會把它改回單欄，這裡要再改回來） */
  .sheet.wide {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)) - 14px);
    /* 14px：上面讓給漂浮的分頁 */
    overflow: hidden;
    gap: 12px 16px
  }

  .sheet.wide>.col {
    max-height: 100%;
    overflow-y: auto;
    padding: 4px 6px 6px 4px;
    margin: -4px -6px -6px -4px
  }

  .sheet-wrap {
    place-self: center
  }

  .sheet h2 {
    font-size: 21px
  }

  .result {
    grid-template-columns: repeat(3, 1fr)
  }

  .splash-title img {
    max-height: 40vh
  }

  .shot.has img {
    max-height: 42vh
  }

  /* 結算卡：橫放時直的一長條要捲快兩個畫面，左右又空著 → 改左右兩欄。
     左邊：雪道名稱＋結束那一刻的截圖（截圖盡量放大）＋雪板標籤；右邊：成績、最佳、排行榜、按鈕，數字和按鈕縮小一點，整張大多不用捲 */
  .over-sheet {
    width: min(920px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: 18px;
    padding: 12px 16px
  }

  .over-side,
  .over-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
  }

  .over-side {
    position: sticky;
    top: 0
  }

  .over-side .shot.has img {
    aspect-ratio: auto;
    height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)) - max(10px, env(safe-area-inset-bottom, 0px)) - 90px);
    max-height: none
  }

  .over-main .result div {
    padding: 7px 10px;
    gap: 4px;
    border-radius: 12px
  }

  .over-main .result .k {
    font-size: 11px
  }

  .over-main .result .v {
    font-size: 19px
  }

  .over-main .best {
    padding: 6px 12px
  }

  .over-main #rBest b {
    font-size: 24px
  }

  .over-main .btn {
    padding: 11px
  }

  .over-main .lb-row input {
    padding: 7px 12px
  }
}

/* 開場：透明疊在 3D 雪道上，只放標題；小人動畫由 game.js 的 splashStep() 驅動 */
body.splashing> :not(#c):not(#splash),
body.lifting> :not(#c) {
  visibility: hidden
}

/* 纜車動畫時也藏起 HUD */
.splash {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(max(16px, env(safe-area-inset-top, 0px)) + 7vh) 16px max(28px, env(safe-area-inset-bottom, 0px));
  cursor: pointer;
  transition: opacity .45s
}

.splash.out {
  opacity: 0;
  pointer-events: none
}

.splash-title {
  margin: 0;
  line-height: 0;
  animation: splashIn .7s cubic-bezier(.2, .8, .2, 1) both
}

.splash-title img {
  display: block;
  width: min(560px, 84vw);
  height: auto;
  max-height: 46vh;
  object-fit: contain
}

/* 去背標準字 img/logo.png */
.splash-skip {
  font: 500 12px/1 var(--mono);
  letter-spacing: .08em;
  color: var(--mute)
}

.splash.ready .splash-skip {
  color: var(--ink);
  animation: splashPulse 1.4s ease-in-out infinite
}

/* 開場動畫停住後，提示點一下開始 */
@keyframes splashPulse {
  50% {
    opacity: .35
  }
}

.splash-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}

.splash-brand {
  display: block;
  width: min(60px, 18vw);
  height: auto;
  animation: splashIn .7s .15s cubic-bezier(.2, .8, .2, 1) both
}

/* 底部品牌 logo img/syane.png */
@keyframes splashIn {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {

  .toast,
  .splash {
    transition: none
  }

  .splash-title,
  .splash-brand,
  .splash.ready .splash-skip {
    animation: none
  }
}