/* 爬綁模式進關面板 */

/* 嵌入主站時避免污染全域樣式；僅作用於爬榜模式容器 */
.enter-play,
.enter-play *,
.enter-play *::before,
.enter-play *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.enter-play {
  --ui-scale: 1;
  position: fixed;
  inset: 0;
  z-index: 500;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
}

.enter-play button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.enter-play[hidden] {
  display: none !important;
}

.enter-play:not([hidden]) {
  display: block;
}

.enter-play__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}

.enter-play__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  z-index: 1;
}

/* 設計稿畫布：（約 85% 視窗高度），由 fit-viewport.js 設定 --ui-scale */
.enter-play__canvas {
  position: relative;
  flex-shrink: 0;
  width: 1920px;
  height: 920px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transform: scale(var(--ui-scale));
}

/* ── 進場動畫：依序 1.底板與內容 → 2.Logo與食物裝飾 → 3.PLAY按鈕 → 4.排行榜
   「由小至大彈出」的關鍵幀 cw-pop-scale 為共用動態效果，定義於 css/shared-fx.css ── */

@keyframes cw-enter-jump {
  0% {
    opacity: 0;
    transform: translateY(140px);
  }

  60% {
    opacity: 1;
    transform: translateY(-18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cw-enter-side {
  0% {
    opacity: 0;
    transform: scale(0.4) translateX(-50px);
  }

  60% {
    opacity: 1;
    transform: scale(1.08) translateX(6px);
  }

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

/* ── 主區 ── */

.enter-play__main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 680px;
  height: 100%;
  flex-shrink: 0;
}

.enter-play__header {
  position: relative;
  width: 100%;
  height: 205px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 3;
  margin-bottom: -144px;
}

.enter-play__logo {
  width: 492px;
  height: 205px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  transform-origin: center center;
  animation: cw-pop-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.35s;
}

.enter-play__close {
  position: absolute;
  top: 123px;
  right: 67px;
  width: 76px;
  height: 75px;
}

.enter-play__close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.enter-play__close:hover {
  transform: scale(1.03);
}

.enter-play__panel {
  position: relative;
  width: 100%;
  height: auto;
  flex: 1;
  max-height: 748px;
  z-index: 2;
  transform-origin: center center;
  animation: cw-pop-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0s;
}

.enter-play__panel-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
}

.enter-play__panel-body {
  position: absolute;
  inset: 7% 9% 11%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
}

.enter-play__mode-title {
  position: absolute;
  font-size: 26px;
  color: #603813;
  margin: 78px;
}

.enter-play__preview {
  position: relative;
  width: 379px;
  height: 290px;
  flex: 1;
  display: flex;
  margin-bottom: 26px;
}

.enter-play__preview-frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.enter-play__preview-decoration {
  position: absolute;
  width: 84%;
  height: auto;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 中央圖示動態：手指依序指向蘋果→牛排→麵粉，答對呈現綠勾，答錯呈現紅叉，循環播放 */
@keyframes cw-preview-hand-move {
  0% {
    left: 32%;
    transform: translate(-50%, -50%) scale(1);
  }

  4% {
    left: 32%;
    transform: translate(-50%, -50%) scale(0.88);
  }

  8%,
  27% {
    left: 32%;
    transform: translate(-50%, -50%) scale(1);
  }

  33% {
    left: 59%;
    transform: translate(-50%, -50%) scale(1);
  }

  37% {
    left: 59%;
    transform: translate(-50%, -50%) scale(0.88);
  }

  41%,
  60% {
    left: 59%;
    transform: translate(-50%, -50%) scale(1);
  }

  66% {
    left: 86%;
    transform: translate(-50%, -50%) scale(1);
  }

  70% {
    left: 86%;
    transform: translate(-50%, -50%) scale(0.88);
  }

  74%,
  93% {
    left: 86%;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    left: 32%;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cw-preview-check-pop {

  4%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }

  8% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }  

  12%,
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }  

  39%,
  67% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  71% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }

  75%,
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cw-preview-cross-pop {

  0%,
  34% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  38% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }

  42%,
  67% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

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

.enter-play__preview-decoration-click {
  position: absolute;
  width: 25%;
  height: auto;
  top: 67%;
  left: 32%;
  transform: translate(-50%, -50%);
  animation: cw-preview-hand-move 6s ease-in-out infinite;
}

.enter-play__preview-decoration-check {
  position: absolute;
  width: 25%;
  height: auto;
  top: 35%;
  left: 77%;
  transform: translate(-50%, -50%);
  animation: cw-preview-check-pop 6s ease-in-out infinite;
}

.enter-play__preview-decoration-cross {
  position: absolute;
  width: 25%;
  height: auto;
  top: 35%;
  left: 77%;
  transform: translate(-50%, -50%);
  animation: cw-preview-cross-pop 6s ease-in-out infinite;
}

/* 活動模式中央：Decoration_Activity_1 為底，獎品 2～5 上下錯開漂浮 */
.enter-play__preview-activity {
  display: none;
  position: absolute;
  width: 84%;
  aspect-ratio: 259 / 178;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.enter-play--event .enter-play__preview-activity {
  display: block;
}

.enter-play--event .enter-play__preview-decoration-click,
.enter-play--event .enter-play__preview-decoration-check,
.enter-play--event .enter-play__preview-decoration-cross {
  display: none !important;
}

.enter-play__preview-activity-prize {
  position: absolute;
  height: auto;
  will-change: transform;
  animation-name: cw-preview-activity-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes cw-preview-activity-float {
  0%,
  100% {
    transform: translateY(var(--float-from, 0px));
  }

  50% {
    transform: translateY(var(--float-to, -10px));
  }
}

.enter-play__preview-activity-prize--2 {
  left: 30%;
  top: 1%;
  width: 26%;
  --float-from: 4px;
  --float-to: -8px;
  animation-duration: 2.4s;
  animation-delay: 0s;
  z-index: 3;
}

.enter-play__preview-activity-prize--3 {
  left: 36%;
  top: 10%;
  width: 52%;
  --float-from: -2px;
  --float-to: 8px;
  animation-duration: 2.8s;
  animation-delay: -0.7s;
  z-index: 2;
}

.enter-play__preview-activity-prize--4 {
  left: 63%;
  top: 40%;
  width: 34%;
  --float-from: 6px;
  --float-to: -10px;
  animation-duration: 2.2s;
  animation-delay: -1.3s;
  z-index: 3;
}

.enter-play__preview-activity-prize--5 {
  left: 78%;
  top: 58%;
  width: 20%;
  --float-from: -4px;
  --float-to: 10px;
  animation-duration: 2.6s;
  animation-delay: -0.4s;
  z-index: 4;
}

.enter-play__energy {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  bottom: 105px;
  color: #603813;
}

.enter-play__energy-icon {
  width: 26px;
  height: auto;
}

.enter-play__energy-label {
  color: #603813;
}

.enter-play__energy-value {
  font-size: 0.75em;
  color: #603813;
}

.enter-play__energy-count {
  color: #c45a00;
}

.enter-play__difficulty {
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 70px;
  width: 100%;
  flex-shrink: 0;
  bottom: 10%;
  z-index: 4;
}

.enter-play--event .enter-play__difficulty {
  display: none !important;
}

/* 對戰：難易度／體力改隱藏但佔位，避免 preview 被撐開；Play 與爬榜示意拿掉 */
.enter-play--battle .enter-play__energy,
.enter-play--battle .enter-play__difficulty {
  visibility: hidden;
  pointer-events: none;
}

.enter-play--battle .enter-play__play-btn,
.enter-play--battle .enter-play__preview-decoration-click,
.enter-play--battle .enter-play__preview-decoration-check,
.enter-play--battle .enter-play__preview-decoration-cross,
.enter-play--battle .enter-play__preview-activity {
  display: none !important;
}

/* 對戰中央示意：PVP_1 為底；先播左側全對綠勾（不帶分數），再疊右側兩格番茄醬 */
.enter-play__preview-pvp {
  display: none;
  position: absolute;
  width: 84%;
  aspect-ratio: 270 / 187;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.enter-play--battle .enter-play__preview-pvp:not([hidden]) {
  display: block;
}

.enter-play__preview-pvp-chef {
  position: absolute;
  height: auto;
  z-index: 4;
}

.enter-play__preview-pvp-chef--win {
  left: 1%;
  bottom: -2%;
  width: 36%;
}

.enter-play__preview-pvp-chef--lose {
  right: 1%;
  bottom: -2%;
  width: 36%;
  transform: scaleX(-1);
}

.enter-play__preview-pvp-check {
  position: absolute;
  width: 38%;
  height: auto;
  top: 40%;
  left: 27%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 3;
  animation: cw-preview-pvp-check 6s ease-in-out infinite;
}

.enter-play__preview-pvp-debuff {
  position: absolute;
  width: 24%;
  height: auto;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  z-index: 3;
  animation: cw-preview-pvp-debuff 6s ease-in-out infinite;
}

.enter-play__preview-pvp-debuff--tl {
  top: 22%;
  left: 62%;
}

.enter-play__preview-pvp-debuff--br {
  top: 48%;
  left: 84%;
  animation-delay: 0.18s;
}

@keyframes cw-preview-pvp-check {
  0%,
  4% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }

  16%,
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

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

@keyframes cw-preview-pvp-debuff {
  0%,
  15% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }

  23% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }

  29%,
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

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

/* 說明底板：獨立座標，不進 flex。改 top／bottom 即可上下調 */
.enter-play__battle-guide {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 25%;
  transform: translateX(-50%);
  width: 58%;
  max-width: 320px;
  z-index: 5;
  pointer-events: none;
}

.enter-play__battle-guide[hidden] {
  display: none !important;
}

.enter-play--battle .enter-play__battle-guide:not([hidden]) {
  display: block;
}

.enter-play__battle-art {
  display: none !important;
}

.enter-play__battle-content {
  display: none !important;
}

.enter-play__battle-guide-frame {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.enter-play__battle-guide-text {
  position: absolute;
  inset: 10% 7% 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.enter-play__battle-guide-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}

.enter-play__battle-guide-text p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #5a2d0c;
  line-height: 1.2;
  white-space: nowrap;
}

/* 邀請碼緞帶：獨立座標。改 bottom 即可上下調 */
.enter-play__battle-invite-wrap {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: 45%;
  max-width: 300px;
  z-index: 6;
  flex-direction: column;
  align-items: center;
}

.enter-play__battle-invite-wrap[hidden] {
  display: none !important;
}

.enter-play--battle .enter-play__battle-invite-wrap:not([hidden]) {
  display: flex;
}

.enter-play__battle-invite,
#BattleInvitationArea {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#BattleInvitationContentDiv {
  position: relative;
  width: 100%;
  max-width: 300px;
  background: none;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.enter-play__battle-invite-frame {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.enter-play__battle-invite-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6% 10%;
  z-index: 2;
  text-align: center;
}

.enter-play__battle-invite-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

#BattleInvitationPrefix,
#BattleInvitationLabel,
#BattleInvitationHint {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(90, 20, 40, 0.45);
}

#BattleInvitationHint {
  font-size: 15px;
  font-weight: 700;
}

.enter-play__battle-wait {
  min-height: 0;
  display: none;
}

.enter-play--battle .enter-play__play-deco:not(.enter-play__play-deco--pvp) {
  display: none;
}

.enter-play__play-deco--pvp {
  display: none;
}

.enter-play--battle .enter-play__play-deco--pvp {
  display: block;
}

.enter-play__battle-btns {
  display: none;
  position: relative;
  top: 20%;
  z-index: 2;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 25%;
  pointer-events: none;
  animation: cw-enter-jump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.7s;
}

.enter-play__battle-btns[hidden] {
  display: none !important;
}

.enter-play--battle .enter-play__battle-btns:not([hidden]) {
  display: flex;
}

.enter-play__battle-btn {
  position: relative;
  width: 40%;
  max-width: 320px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  --cw-battle-btn-scale: 1.7;
  transition: transform 0.15s ease;
}

.enter-play__battle-btn-icon {
  display: block;
  width: 100%;
  transform: scale(var(--cw-battle-btn-scale));
  transform-origin: center center;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

.enter-play__battle-btn:hover .enter-play__battle-btn-icon {
  transform: scale(calc(var(--cw-battle-btn-scale) * 1.03));
}

.enter-play__battle-btn:active .enter-play__battle-btn-icon {
  transform: scale(calc(var(--cw-battle-btn-scale) * 0.97));
}

.enter-play__battle-btn-label {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: clamp(1.15rem, 2.8vw, 1.7rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
  text-shadow:
    -2px -2px 0 #3a2410,
     2px -2px 0 #3a2410,
    -2px  2px 0 #3a2410,
     2px  2px 0 #3a2410,
     0 3px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

@media (max-width: 800px) {
  .enter-play__battle-guide {
    bottom: 25%;
    width: 68%;
  }

  .enter-play__battle-invite-wrap {
    bottom: 10%;
    width: 64%;
  }

  .enter-play__battle-guide-text p {
    font-size: 11px;
  }

  #BattleInvitationPrefix,
  #BattleInvitationLabel {
    font-size: 13px;
  }

  #BattleInvitationHint {
    font-size: 11px;
  }

  .enter-play__battle-btns {
    width: 100%;
    max-width: 100%;
    gap: 2%;
    top: -20%;
  }

  .enter-play__battle-btn {
    width: 50%;
    max-width: 250px;
    --cw-battle-btn-scale: 1;
  }

  .enter-play__battle-btn-label {
    min-width: 0;
    font-size: 1.05rem;
    padding: 0;
  }
}

.enter-play .difficulty-option {
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 4;
}

.enter-play .difficulty-option:hover {
  transform: scale(1.03);
}

.enter-play .difficulty-option__box {
  position: relative;
  top: 6px;
  width: 42px;
  height: 42px;
}

.enter-play .difficulty-option__frame {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.enter-play .difficulty-option__check {
  position: absolute;
  inset: -30% 10%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.enter-play .difficulty-option--selected .difficulty-option__check {
  opacity: 1;
}

.enter-play .difficulty-option__label {
  position: relative;
  font-weight: 600;
  font-size: 24px;
  color: #603813; 
  z-index: 1;
}

.enter-play .highlight-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  z-index: -1;
}

.enter-play .highlight-text.easy::after {
  background-color: #66FF66;
}

.enter-play .highlight-text.hard::after {
  background-color: #FF9966;
}

/* PLAY 區 */

.enter-play__play-zone {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 爬綁／活動／練習：較原 15% 上移 5%；對戰維持原位 */
  bottom: 20%;
  z-index: 3;
  pointer-events: none;
}

.enter-play--battle .enter-play__play-zone {
  bottom: 15%;
}

.enter-play__play-deco {
  position: absolute;
  width: 650px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  transform-origin: center center;
  animation: cw-enter-deco-scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.35s;
}

@keyframes cw-enter-deco-scale {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.35);
  }

  65% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }

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

.enter-play__play-btn {
  position: relative;
  top: 10%;
  width: 380px;
  height: auto;
  z-index: 2;
  transition: transform 0.15s ease;
  pointer-events: auto;
  animation: cw-enter-jump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 0.7s;
}

.enter-play__play-btn:hover {
  transform: scale(1.03);
}

.enter-play__play-btn img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

/* ── 右側排行榜 ── */

.enter-play__leaderboard {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(300%);
  width: 120px;
  height: 100%;
}

.enter-play .leaderboard-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.enter-play .leaderboard-item {
  position: relative;
  display: flex;
  align-items: center;
  animation: cw-enter-side 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.enter-play .leaderboard-item--first {
  animation-delay: 1s;
}

.enter-play .leaderboard-item:nth-child(2) {
  animation-delay: 1.12s;
}

.enter-play .leaderboard-item:nth-child(3) {
  animation-delay: 1.24s;
}

.enter-play .leaderboard-item__rank {
  position: absolute;
  top: 0%;
  left: -5%;
  width: 50px;
  height: 50px;
  z-index: 3;
}

.enter-play .leaderboard-item__rank img {
  width: 100%;  /* 寬度 100% 貼齊 span 的 30px */
  height: 100%; /* 高度 100% 貼齊 span 的 30px */
  object-fit: contain; /* 寫在這裡才會生效！確保數字圖片不會變形 */
}

.enter-play .leaderboard-item__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.enter-play .leaderboard-item__avatar-wrapper {
  position: relative;
  width: 130px;
  height: 130px;
}

.enter-play .leaderboard-item__avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.enter-play .leaderboard-item__avatar-face {
  position: absolute;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  top: 48.5%;
  left: 50.5%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.enter-play .leaderboard-item__avatar-mask {
  position: absolute;
  width: 100px;
  height: 100px;
  object-fit: contain;
  top: 48.5%;
  left: 50.5%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.enter-play .leaderboard-item__score-wrap {
  position: absolute;
  width: 128px;
  height: 40px;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.enter-play .leaderboard-item__score {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.enter-play .leaderboard-item__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 8px;
  font-family: PumpkinGames, "Huninn", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #5a2e0c;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

.enter-play .leaderboard-rank-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  animation: cw-enter-side 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 1.36s;
}

.enter-play .leaderboard-rank-btn:hover {
  transform: scale(1.03);
}

.enter-play .leaderboard-rank-btn__icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.enter-play .leaderboard-rank-btn__label {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-shadow: 
    -2px -2px 0 #935116,
     0px -2px 0 #935116,
     2px -2px 0 #935116,
     2px  0px 0 #935116,
     2px  2px 0 #935116,
     0px  2px 0 #935116,
    -2px  2px 0 #935116,
    -2px  0px 0 #935116,    
    0px 4px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-110%);
}

/* ── 窄螢幕：直向畫布 + 底部排行榜橫排 ── */

.enter-play__bg--portrait {
  display: none;
}

/* 極窄螢幕：改為直向畫布（仍由 JS 等比縮放） */
@media (max-width: 800px) {
  .enter-play__bg--landscape {
    display: none;
  }

  .enter-play__bg--portrait {
    display: block;
  }

  .enter-play__canvas {
    flex-direction: column;
    justify-content: flex-start;
    width: 400px;
    height: 844px;
    gap: 0;
  }

  .enter-play__main {
    width: 360px;
    height: auto;
    flex: 0 0 auto;
    min-height: 0;
  }

  /* 桌機版用 absolute + translateX 把排行榜推到右側；手機需還原才能進入直向 flex 流 */
  .enter-play__header {
    height: 200px;
    margin-bottom: -120px;
  }

  .enter-play__logo {
    width: 340px;
    height: auto;
    margin-bottom: 20px;
  }

  .enter-play__close {
    top: 130px;
    right: -12px;
    width: 54px;
    height: 54px;
  }

  .enter-play__panel {
    height: 500px;
  }

  .enter-play__mode-title {
    font-size: 20px;
    margin: 50px 0 0;
    position: relative;
  }

  .enter-play__preview {
    width: 260px;
    height: 245px;
    flex: 0 0 auto;
    margin-bottom: 0px;
  }

  .enter-play__preview-decoration-check,
  .enter-play__preview-decoration-cross {
    top: 25%;
  }

  .enter-play__preview-decoration-click {
    top: 80%;
  }

  .enter-play__energy {
    position: relative;
    inset: auto;
    bottom: auto;
    font-size: 16px;
  }

  .enter-play__difficulty {
    position: relative;
    inset: auto;
    bottom: auto;
    gap: 44px;
    margin-top: 6px;
  }

  .enter-play .difficulty-option__box {
    width: 30px;
    height: 30px;
  }

  .enter-play .difficulty-option__label {
    font-size: 16px;
  }

  .enter-play__play-zone {
    /* 爬綁／活動／練習：較原 -5% 上移 5%；對戰維持原位 */
    bottom: 0%;
    margin-top: -105px;
    flex-shrink: 0;
  }

  /* 對戰雙餐罩比單顆 PLAY 矮，撐住相同高度讓底部排行榜位置一致 */
  .enter-play--battle .enter-play__play-zone {
    min-height: calc(260px * 220 / 275);
    bottom: -5%;
  }

  .enter-play__play-deco {
    width: 420px;
    top: 10px;
    height: auto;
  }

  .enter-play__play-btn {
    width: 260px;
    height: auto;
  }

  /* 底部橫排：名次 → 頭像 → 分數，右側 RANK */
  .enter-play__leaderboard {
    position: relative;
    transform: none;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    margin-top: 40px;
    padding: 0 10px 10px;
  }

  .enter-play .leaderboard-list {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
  }

  .enter-play .leaderboard-item {
    flex-direction: column;
    align-items: center;
    width: 70px;
  }

  .enter-play .leaderboard-item__rank {
    top: 0;
    left: 20%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    z-index: 3;
  }

  .enter-play .leaderboard-item__card {
    width: 100%;
    gap: 0;
  }

  .enter-play .leaderboard-item__avatar-wrapper {
    width: 80px;
    height: 80px;
    margin-top: 10px;
  }

  .enter-play .leaderboard-item__avatar-face,
  .enter-play .leaderboard-item__avatar-mask {
    width: 62px;
    height: 62px;
  }

  .enter-play .leaderboard-item__score-wrap {
    position: relative;
    width: 80px;
    height: 28px;
    top: auto;
    left: auto;
    transform: none;
    margin-top: -25px;
    z-index: 4;
  }

  .enter-play .leaderboard-item__score {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    object-fit: contain;
  }

  .enter-play .leaderboard-item__name {
    font-size: 11px;
    padding: 0 4px;
  }

  .enter-play .leaderboard-rank-btn {
    position: absolute;
    flex-direction: column;
    margin-top: 0;
    margin-left: 82%;
    margin-bottom: 15px;
    align-self: flex-end;
  }

  .enter-play .leaderboard-rank-btn__icon {
    width: 60px;
    height: 60px;
  }

  .enter-play .leaderboard-rank-btn__label {
    font-size: 14px;
    transform: none;
    margin-top: -20px;
  }
}

/* ── 降低動態效果偏好：關閉進場動畫 ── */
@media (prefers-reduced-motion: reduce) {

  .enter-play__panel,
  .enter-play__logo,
  .enter-play__play-btn,
  .enter-play .leaderboard-item,
  .enter-play .leaderboard-rank-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .enter-play__play-deco {
    animation: none;
    opacity: 1;
    transform: translateX(-50%);
  }

  .enter-play__preview-decoration-click,
  .enter-play__preview-decoration-check {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .enter-play__preview-decoration-cross {
    animation: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  .enter-play__preview-activity-prize {
    animation: none;
    transform: none;
  }

  .enter-play__preview-pvp-check,
  .enter-play__preview-pvp-debuff {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 練習模式：隱藏體力與排行榜預覽 */
.enter-play--practice .enter-play__energy,
.enter-play--practice .enter-play__leaderboard {
  display: none !important;
}

/* 練習模式：隱藏爬榜手指／勾叉示意，改顯示無限 icon 脈衝 */
.enter-play--practice .enter-play__preview-decoration-click,
.enter-play--practice .enter-play__preview-decoration-check,
.enter-play--practice .enter-play__preview-decoration-cross {
  display: none !important;
}

.enter-play__preview-practice-icon {
  position: absolute;
  width: 34%;
  height: auto;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.enter-play--practice .enter-play__preview-practice-icon:not([hidden]) {
  animation: cw-preview-practice-icon-pulse 1.6s ease-in-out infinite;
}

@keyframes cw-preview-practice-icon-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .enter-play--practice .enter-play__preview-practice-icon:not([hidden]) {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 800px) {
  .enter-play__preview-practice-icon {
    width: 36%;
    top: 24%;
  }
}

/* 對戰等待 QR 面板（對齊 CardAlpha Frame_Text_Normal + QR） */
.cw-battle-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.cw-battle-qr-overlay[hidden] {
  display: none !important;
}

.cw-battle-qr-panel {
  position: relative;
  width: min(86vw, 480px);
  transform-origin: center center;
  animation: cw-pop-scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .cw-battle-qr-panel {
    animation: none;
  }
}

.cw-battle-qr-frame {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.cw-battle-qr-close {
  position: absolute;
  top: 4%;
  right: 3%;
  width: 48px;
  height: 48px;
  z-index: 2;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}

.cw-battle-qr-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cw-battle-qr-inner {
  position: absolute;
  inset: 14% 12% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
}

.cw-battle-qr-plate {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cw-battle-qr-plate[hidden] {
  display: none !important;
}

.cw-battle-qr-box {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cw-battle-qr-box img,
.cw-battle-qr-box canvas {
  display: block;
  width: 110px;
  height: 110px;
}

.cw-battle-qr-hint {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #5a2d0c;
  line-height: 1.3;
}

#WaitingTimerLabel {
  color: #e53935;
  font-weight: 800;
}

@media (max-width: 800px) {
  .cw-battle-qr-panel {
    width: min(92vw, 400px);
  }

  .cw-battle-qr-close {
    width: 40px;
    height: 40px;
  }

  .cw-battle-qr-box,
  .cw-battle-qr-box img,
  .cw-battle-qr-box canvas {
    width: 92px;
    height: 92px;
  }

  .cw-battle-qr-hint {
    font-size: 0.92rem;
  }
}