/* =============================================
   Checker Screen — 個人對獎記錄
   ============================================= */

/* ── 輸入表單區 ──────────────────────────── */

.checker-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.checker-game-toggle {
  display: flex;
  gap: var(--sp-2);
}
.checker-game-btn {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-family: var(--font-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.checker-game-btn.active.gold {
  border-color: var(--lotto-gold-border);
  background: var(--lotto-gold-dim);
  color: var(--lotto-gold);
}
.checker-game-btn.active.red {
  border-color: var(--power-red-border);
  background: var(--power-red-dim);
  color: var(--power-red);
}
.checker-game-btn.active.green {
  border-color: rgba(76,175,80,0.35);
  background: rgba(76,175,80,0.12);
  color: #4CAF50;
}

/* 期號選擇 */
.checker-period-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.checker-period-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 56px;
}
.checker-period-select {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-raised);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-num);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.checker-period-select:focus {
  outline: none;
  border-color: var(--lotto-gold);
}
.power-mode .checker-period-select:focus {
  border-color: var(--power-red);
}

/* 號碼選擇格線 */
.checker-num-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.checker-num-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.num-picker {
  display: grid;
  gap: 5px;
}
.num-picker.grid-49 { grid-template-columns: repeat(7, 1fr); }
.num-picker.grid-39 { grid-template-columns: repeat(8, 1fr); }
.num-picker.grid-38 { grid-template-columns: repeat(8, 1fr); }
.num-picker.grid-8  { grid-template-columns: repeat(8, 1fr); }

.picker-ball {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: clamp(11px, 1.3vw, 15px);
  font-weight: var(--weight-bold);
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  user-select: none;
}
.picker-ball:hover:not(.selected) {
  background: var(--bg-overlay);
  color: var(--text-primary);
  transform: scale(1.1);
}
.picker-ball.selected {
  background: var(--lotto-gold-dim);
  border-color: var(--lotto-gold);
  color: var(--lotto-gold);
  transform: scale(1.05);
}
.picker-ball.selected.red {
  background: var(--power-red-dim);
  border-color: var(--power-red);
  color: var(--power-red);
}

/* 特別號/強力彩區 */
.checker-extra-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}
.checker-extra-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* 提交按鈕 */
.checker-submit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.checker-submit-btn {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border: none;
  border-radius: var(--r-md);
  background: var(--lotto-gold);
  color: #111;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-family: var(--font-base);
  cursor: pointer;
  transition: opacity var(--dur-fast);
}
.checker-submit-btn:hover { opacity: 0.85; }
.checker-submit-btn.power-btn {
  background: var(--power-red);
  color: #fff;
}
.checker-submit-btn.green-btn {
  background: #4CAF50;
  color: #000;
}
.checker-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── 統計摘要 ─────────────────────────────── */

.checker-stats {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.checker-stat-card {
  flex: 1;
  min-width: 120px;
  background: var(--bg-raised);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
}
.checker-stat-value {
  font-family: var(--font-num);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--text-primary);
  display: block;
}
.checker-stat-value.positive { color: #4ade80; }
.checker-stat-value.negative { color: #f87171; }
.checker-stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  display: block;
}

/* ── 工具列（清除/匯出） ─────────────────── */

.checker-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.checker-toolbar-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  flex: 1;
}
.checker-tool-btn {
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-full);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-base);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.checker-tool-btn:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
}
.checker-tool-btn.export { color: #4ade80; border-color: rgba(74,222,128,0.25); }
.checker-tool-btn.share  { color: #60a5fa; border-color: rgba(96,165,250,0.25); }
.checker-tool-btn.clear  { color: #f87171; border-color: rgba(248,113,113,0.25); }

/* ── Toast 提示 ──────────────────────────── */

.ck-toast {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-overlay);
  color: var(--text-primary);
  padding: 8px 20px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  white-space: nowrap;
}
.ck-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 免責聲明 ─────────────────────────────── */

.disclaimer-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ── 記錄卡片 ─────────────────────────────── */

.checker-records {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.checker-record {
  background: var(--bg-raised);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  position: relative;
}
.checker-record.has-prize {
  border-color: rgba(255,215,0,0.3);
}
.checker-record.has-prize.power-prize {
  border-color: rgba(255,69,58,0.3);
}
.checker-record.has-prize.green-prize {
  border-color: rgba(76,175,80,0.3);
}

.record-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.record-game-tag {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-weight: var(--weight-bold);
}
.record-game-tag.gold  { background: var(--lotto-gold-dim); color: var(--lotto-gold); }
.record-game-tag.red   { background: var(--power-red-dim); color: var(--power-red); }
.record-game-tag.green { background: rgba(76,175,80,0.12); color: #4CAF50; }
.record-period {
  font-family: var(--font-num);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.record-date {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
}
.record-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
  transition: color var(--dur-fast);
}
.record-delete-btn:hover { color: #f87171; }

/* 我的號碼 + 開獎號碼 */
.record-numbers-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.record-numbers-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.record-numbers-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  width: 56px;
  flex-shrink: 0;
}

/* 球：命中/未命中 */
.chk-ball {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: var(--weight-bold);
  background: var(--bg-overlay);
  color: var(--text-muted);
  flex-shrink: 0;
}
.chk-ball.matched      { background: var(--lotto-gold-dim); color: var(--lotto-gold); }
.chk-ball.matched.red  { background: var(--power-red-dim);  color: var(--power-red);  }
.chk-ball.bonus        { background: rgba(120,80,200,0.2); color: #b490ff; }
.chk-ball.power        { background: rgba(255,69,58,0.15); color: var(--power-red); }
.chk-ball.power.matched { background: var(--power-red-dim); color: var(--power-red); }

.record-sep {
  color: var(--text-muted);
  font-size: 14px;
}

/* 中獎結果列 */
.record-result {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.prize-badge {
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.prize-badge.no-prize { background: var(--bg-overlay); color: var(--text-muted); }
.prize-badge.tier-1   { background: rgba(255,215,0,0.25); color: var(--lotto-gold); }
.prize-badge.tier-2   { background: rgba(255,215,0,0.18); color: var(--lotto-gold); }
.prize-badge.tier-3   { background: rgba(200,170,0,0.18); color: #c8a800; }
.prize-badge.tier-4   { background: rgba(150,130,0,0.15); color: #a89000; }
.prize-badge.tier-5, .prize-badge.tier-6, .prize-badge.tier-7,
.prize-badge.tier-8, .prize-badge.tier-9 {
  background: rgba(100,100,100,0.15); color: var(--text-secondary);
}
/* 威力彩用紅色系 */
.power-prize .prize-badge.tier-1 { background: rgba(255,69,58,0.25); color: var(--power-red); }
.power-prize .prize-badge.tier-2 { background: rgba(255,69,58,0.18); color: var(--power-red); }
.power-prize .prize-badge.tier-3 { background: rgba(200,50,40,0.15); color: #e05050; }
/* 今彩539 用綠色系 */
.green-prize .prize-badge.tier-1 { background: rgba(76,175,80,0.25); color: #4CAF50; }
.green-prize .prize-badge.tier-2 { background: rgba(76,175,80,0.18); color: #4CAF50; }
.green-prize .prize-badge.tier-3 { background: rgba(50,150,50,0.15); color: #66BB6A; }
.green-prize .prize-badge.tier-4 { background: rgba(40,120,40,0.12); color: #81C784; }

.record-prize-detail {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-family: var(--font-num);
}
.record-prize-amount {
  font-size: var(--text-sm);
  font-family: var(--font-num);
  font-weight: var(--weight-bold);
  color: var(--lotto-gold);
}
.record-prize-amount.red { color: var(--power-red); }

/* 空狀態 */
.checker-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-muted);
}
.checker-empty .empty-icon { font-size: 48px; display: block; margin-bottom: var(--sp-3); }
.checker-empty p { font-size: var(--text-sm); }

/* ── 左右均分版面 ─────────────────────────── */

.checker-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 768px) {
  .checker-layout { grid-template-columns: 1fr; }
}

/* 左欄：form 在欄內不需要底部 margin */
.checker-left .checker-form {
  margin-bottom: 0;
}

/* 右欄：垂直堆疊 */
.checker-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 右欄標題列：標題 + 工具按鈕同排 */
.checker-right-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.checker-panel-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  flex-shrink: 0;
}

/* toolbar 嵌入 head 後移除獨立 margin */
.checker-right-head .checker-toolbar {
  margin-bottom: 0;
}

/* 統計摘要在右欄時 gap 已控制，移除底部 margin */
.checker-right .checker-stats {
  margin-bottom: 0;
}

/* ── 步驟三：新增對獎記錄按鈕呼吸燈 ── */
#ck-submit-btn { animation: btnPulse 3s ease-in-out infinite; }

/* ── 步驟四：中獎記錄卡片金邊充能特效 ── */
/* wrapper (.card-premium-charge) 內的 record 移除自身邊框，讓旋轉光圈當邊框 */
.card-premium-charge > .checker-record {
  border: none;
  border-radius: 10px;  /* r-md(12px) - 2px padding */
}