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

[hidden] { display: none !important; }

/* ── Base ──────────────────────────────────────────────────── */
body {
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  background: #fec804;
  color: #333;
  height: 100dvh;          /* dvh 計入瀏覽器工具列，避免被壓縮 */
  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;
}

.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;
}

/* ── 密碼輸入畫面 ─────────────────────────────────────────── */
#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: 1000;
  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-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 14px;
}

#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;
}

/* ── 刮格確認彈窗 ──────────────────────────────────────────── */
#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: 1010;
  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; }