/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] { display: none !important; }

/* ── Base ──────────────────────────────────────────────────── */
html {
  height: -webkit-fill-available;
}
body {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  background: #fec804;
  color: #333;
  height: 100dvh;          /* dvh 計入瀏覽器工具列，避免被壓縮 */
  height: -webkit-fill-available;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── 橫向提示 ──────────────────────────────────────────────── */
#rotate-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fec804;
  color: #000000;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media screen and (orientation: landscape) {
  body { overflow: hidden; }
  #app { display: none; }
  #rotate-notice { display: flex; }
}

.rotate-inner { padding: 24px; text-align: center; }
#rotate-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
  animation: logoShake 0.8s ease-in-out infinite;
}
.rotate-inner p { font-size: 16px; color: #000000; }

/* ── App 容器 ────────────────────────────────────────────── */
#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  overflow: hidden;
  background: #fec804;
  display: flex;
  flex-direction: column;
}

/* ── 載入 / 錯誤 / 無刮刮紙 ──────────────────────────────── */
#loading, #error, #no-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
  background: #fec804;
}

#loading p, #no-card p { font-size: 15px; color: #000000; }
.sub-text { font-size: 13px; color: #999; }
.state-icon { font-size: 64px; }

/* 載入 logo 搖晃 */
#loading-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  animation: logoShake 0.8s ease-in-out infinite;
}
@keyframes logoShake {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-15deg); }
  40%       { transform: rotate(15deg); }
  60%       { transform: rotate(-10deg); }
  80%       { transform: rotate(10deg); }
}

.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #ddd;
  border-top-color: #d42d25;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#error p { font-size: 15px; color: #a82020; }
#error button {
  background: #d42d25;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 32px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 8px;
}

/* ── 主遊戲（flex column，佔滿整個 dvh） ─────────────────── */
#game {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* ── 頂部：中獎配率資訊 ──────────────────────────────────── */
#stats-bar {
  background: #000000;
  /* safe-area-inset-top：讓黑色背景延伸填滿 iPhone 狀態列，避免黃色透出 */
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

#prize-list-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.prize-scroll-arrow {
  color: white;
  font-size: 22px;
  font-weight: bold;
  flex-shrink: 0;
  line-height: 1;
  opacity: 0.8;
}

#prize-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
  height: 52px;          /* 固定兩排高度 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE */
}
#prize-list::-webkit-scrollbar {
  display: none;               /* Chrome / Safari */
}

.prize-chip {
  background: #fec804;
  color: #000000;
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 11px;
  white-space: nowrap;
}
.prize-chip.won {
  background: #555;
  color: #aaa;
  text-decoration: line-through;
}

#stats-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 14px;
  color: white;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 5px;
}

/* ── 刮刮紙格子區（彈性填滿） ───────────────────────────── */
#card-area {
  flex: 1;
  overflow: hidden;
  padding: 10px 14px 10px;
  min-height: 0;
  position: relative;
}

#pages-wrapper {
  height: 100%;
}

.card-page {
  height: 100%;
  background: white;
  border-radius: 14px;
  padding: 10px 10px 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 格子 Grid（單頁垂直滑動） */
.slot-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-content: start;
}

/* ── 格子 ────────────────────────────────────────────────── */
.slot {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #000000;
}

.slot-empty {
  aspect-ratio: 1;
}

/* 底層內容（中獎 / 未中獎） */
.slot-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2px;
}

.slot-prize { background: linear-gradient(135deg, #a82020, #d42d25); }
.slot-no-prize { background: #ebebeb; }

.prize-name-display {
  font-weight: bold;
  color: #fff;
  text-align: center;
  word-break: break-all;
  line-height: 1.25;
  padding: 2px;
}
.no-prize-mark {
  font-size: 48px;
  color: #d42d25;
  line-height: 1;
  margin-bottom: 14px;
}

/* Canvas 遮罩（未刮開） */
.scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 6px;
}

/* 已刮開未中獎：底層略暗 */
.slot.scratched.no-prize .slot-content {
  opacity: 0.55;
}

/* ── 遊戲結束遮罩 ─────────────────────────────────────────── */
#finish-overlay {
  position: absolute;
  inset: 0;
  background: rgba(212, 45, 37, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  z-index: 10;
  animation: pop-in 0.3s ease;
}

#finish-overlay .finish-text {
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
  padding: 16px;
}

@keyframes pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── Session 驗證遮罩 ─────────────────────────────────────── */
#session-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #fec804;
  display: flex;
  align-items: center;
  justify-content: center;
}

#session-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#session-msg {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

/* ── 刮獎密碼畫面 + 夾N刮N 各頁（claw 身份） ────────────── */
#scratch-password-screen,
#claw-input-screen,
#claw-quota-screen,
#claw-topup-screen,
#claw-done-overlay {
  position: fixed;
  inset: 0;
  z-index: 1850;
  background: #fec804;
  display: flex;
  align-items: center;
  justify-content: center;
}

.claw-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 320px;
}

#scratch-password-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 320px;
}

#scratch-password-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
  text-align: center;
}

#scratch-password-input,
#claw-input-field {
  width: 100%;
  padding: 14px 16px;
  font-size: 22px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 10px;
  background: #fff;
  outline: none;
  margin-bottom: 12px;
  box-sizing: border-box;
}

#scratch-password-input {
  letter-spacing: 4px;
}

#scratch-password-btn,
#claw-input-btn,
#claw-quota-btn,
#claw-done-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

#claw-topup-back {
  flex: 1;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  background: #06c755 !important;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#claw-topup-start {
  flex: 1;
  padding: 14px 0;
  font-size: 16px;
  font-weight: bold;
  background: #000 !important;
  color: #fff !important;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

#scratch-password-error,
#claw-input-error {
  margin-top: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #d42d25;
}

#scratch-password-hint {
  margin-top: 16px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

/* ── 密碼輸入畫面 ─────────────────────────────────────────── */
#password-screen {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: #fec804;
  display: flex;
  align-items: center;
  justify-content: center;
}

#password-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 320px;
}

#password-hint-text {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
  text-align: center;
}

#password-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 22px;
  letter-spacing: 4px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 10px;
  background: #fff;
  outline: none;
  margin-bottom: 12px;
}

#password-btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

#password-error {
  margin-top: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #d42d25;
}

#password-bottom-hint {
  margin-top: 16px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  text-align: center;
}

/* ── 冷卻彈窗 ─────────────────────────────────────────────── */
#cooldown-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

#cooldown-box {
  background: white;
  border-radius: 16px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

#cooldown-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  animation: logoShake 0.8s ease-in-out infinite;
}

#cooldown-box p {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

#cooldown-count {
  font-size: 28px;
  font-weight: bold;
  color: #d42d25;
}

/* ── 導航列 ──────────────────────────────────────────────── */
#nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* safe-area-inset-bottom：為 iPhone home indicator 留空，避免按鈕被遮 */
  padding: 0 14px env(safe-area-inset-bottom, 0px);
  gap: 8px;
  flex-shrink: 0;
  background: #fec804;
}

#ad-space {
  flex: 1;
  height: 85px;
  align-self: center;
  border-radius: 6px;
  /* 不用 overflow:hidden，iOS Safari 的 overflow:hidden 會凍結 GIF 第一格 */
  display: flex;
  align-items: center;
  justify-content: center;
}

#ad-space a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#ad-space video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ── 中獎彈窗 ─────────────────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1025;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#modal {
  background: white;
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  animation: modalIn 0.25s ease;
}
@keyframes modalIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

#modal-machine-name {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  margin-bottom: 4px;
}
#modal-machine-name[hidden] { display: none; }

#modal-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 14px;
}

#modal-prize-image {
  margin-bottom: 12px;
}
#modal-prize-image[hidden] { display: none; }
#modal-prize-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid #FEC804;
  display: block;
  margin: 0 auto;
}

#modal-prize-name {
  font-size: 20px;
  color: #d42d25;
  font-weight: bold;
  margin-bottom: 10px;
}

#modal-message {
  font-size: 16px;
  color: #d42d25;
  font-weight: bold;
  margin-bottom: 8px;
  word-break: break-all;
}

#modal-footer {
  font-size: 13px;
  color: #888;
  margin-bottom: 18px;
  line-height: 1.5;
}

#modal-line-section {
  margin-bottom: 14px;
  text-align: center;
}
#modal-line-section[hidden] { display: none; }

#modal-line-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#modal-line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #06c755;
  color: #fff;
  text-decoration: none;
  padding: 16px 24px;
  border-radius: 16px;
  font-size: 22px;
  font-weight: bold;
  flex: 1;
}

#modal-line-hint {
  font-size: 14px;
  color: #06C755;
  font-weight: bold;
  margin-top: 8px;
}

.modal-line-finger {
  font-size: 28px;
  display: inline-block;
}
.modal-line-finger-left  { animation: fingerLeft  1s ease-in-out infinite; }
.modal-line-finger-right { animation: fingerRight 1s ease-in-out infinite; }
@keyframes fingerLeft {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
@keyframes fingerRight {
  0%,100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}

#modal-btn {
  background: #0267b9;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  font-weight: bold;
}
#modal-btn:active { background: #0054a6; }
#modal-btn:disabled {
  background: #bbb;
  cursor: default;
}

/* ── 刮格確認彈窗 canvas 預覽 ──────────────────────────────── */
#scratch-confirm-canvas {
  display: block;
  margin: 0 auto 12px;
  border-radius: 10px;
  width: 90px;
  height: 90px;
}

/* ── 互動刮刮彈窗 ──────────────────────────────────────────── */
#scratch-play-overlay {
  position: fixed;
  inset: 0;
  z-index: 1020;
  background: rgba(255,255,255,0.60);
  display: flex;
  align-items: center;
  justify-content: center;
}

#scratch-play-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
  width: 100%;
}

/* 倒數數字覆蓋層（疊在黑色 canvas 上，置中顯示） */
#scratch-play-cd-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  border-radius: 16px;
}

.sp-cd-num {
  font-size: 96px;
  font-weight: bold;
  color: #FFD700;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000;
  line-height: 1;
}

/* bounce 動畫（↓用手滑動刮開格子↓） */
@keyframes bounce-ud {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.sp-hint-bounce {
  animation: bounce-ud 0.8s ease-in-out infinite;
}

/* 波浪載入動畫（驗證刮刮格資料中...） */
@keyframes waveChar {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
.wave-char {
  display: inline-block;
  animation: waveChar 0.9s ease-in-out infinite;
}

/* sp-hint-normal：黑邊黃字粗體（一般提示） */
.sp-hint-normal {
  font-size: 18px;
  font-weight: bold;
  color: #FFD700;
  text-align: center;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000;
}

/* sp-hint-countdown：倒數大數字 */
.sp-hint-countdown {
  font-size: 56px;
  font-weight: bold;
  color: #FFD700;
  text-align: center;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000;
  line-height: 1;
}

#scratch-play-hint {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scratch-play-slot {
  position: relative;
  width: min(74vw, 288px);
  height: min(74vw, 288px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,0.7);
}

#scratch-play-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  background: #fff !important;
}
/* 刮刮彈窗內獎品文字改深色（底層為白色，避免透出） */
#scratch-play-content .prize-name-display {
  color: #d42d25;
}

#scratch-play-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  border-radius: 16px;
}

#scratch-play-instant-btn {
  background: #0267b9;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px 28px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  margin-top: 24px;
}
#scratch-play-instant-btn:active { background: #0054a6; }
#scratch-play-instant-btn:disabled { background: #aaa; cursor: default; box-shadow: none; }

/* ── 刮格確認彈窗 ──────────────────────────────────────────── */
#scratch-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#scratch-confirm-box {
  background: white;
  border-radius: 16px;
  padding: 28px 20px 20px;
  max-width: 280px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: modalIn 0.2s ease;
}

#scratch-confirm-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

#scratch-confirm-btns {
  display: flex;
  gap: 10px;
}

#scratch-confirm-cancel {
  flex: 1;
  background: #eee;
  color: #333;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
#scratch-confirm-cancel:active { background: #ddd; }

#scratch-confirm-ok {
  flex: 1;
  background: #0267b9;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
#scratch-confirm-ok:active { background: #0054a6; }

/* ── 關閉確認彈窗 ──────────────────────────────────────────── */
#close-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1030;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#close-confirm-box {
  background: white;
  border-radius: 16px;
  padding: 24px 20px 18px;
  max-width: 280px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  animation: modalIn 0.2s ease;
}

#close-confirm-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

#close-confirm-text {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 18px;
}

#close-confirm-btns {
  display: flex;
  gap: 10px;
}

#close-confirm-cancel {
  flex: 1;
  background: #eee;
  color: #333;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
#close-confirm-cancel:active { background: #ddd; }

#close-confirm-ok {
  flex: 1;
  background: #d42d25;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
#close-confirm-ok:active { background: #b52020; }