/* ===================================================
   games/big-two/style.css  v2.0
   大老二 遊戲樣式 — 全面優化版
=================================================== */

/* ══════════════════════════════════════════════
   開局設定選單
══════════════════════════════════════════════ */
.bt-setup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}
.bt-setup-overlay.hidden { display: none; }

.bt-setup-box {
  background: var(--color-bg, #fff9f0);
  border-radius: 20px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
}

.bt-setup-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-primary, #d4380d);
  margin: 0 0 4px;
  text-align: center;
}

.bt-setup-sub {
  text-align: center;
  font-size: 15px;
  color: #888;
  margin: 0 0 20px;
}

.bt-setup-group {
  margin-bottom: 18px;
}

.bt-setup-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #333);
  margin-bottom: 10px;
}

.bt-setup-radio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bt-radio-opt {
  display: flex;
  align-items: flex-start;
  gap: 0;
  cursor: pointer;
}

.bt-radio-opt input[type="radio"] {
  display: none;
}

.bt-radio-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 2px solid #e0d8d0;
  border-radius: 10px;
  width: 100%;
  transition: border-color .18s, background .18s;
  background: var(--color-surface, #fff);
}

.bt-radio-opt input[type="radio"]:checked + .bt-radio-body {
  border-color: var(--color-primary, #d4380d);
  background: rgba(212,56,13,.06);
}

.bt-radio-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, #222);
}

.bt-radio-desc {
  font-size: 13px;
  color: #888;
}

.bt-setup-start {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 18px;
  font-weight: 800;
  background: var(--color-primary, #d4380d);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity .15s, transform .1s;
}
.bt-setup-start:hover { opacity: .9; transform: translateY(-1px); }
.bt-setup-start:active { transform: translateY(0); }

.bt-streak-status {
  background: rgba(250, 140, 22, 0.12);
  border: 1.5px solid #FA8C16;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 15px;
  color: #7c4a00;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 2px;
}
.bt-streak-status strong { color: #d4380d; font-size: 18px; }
.bt-streak-status.hidden { display: none; }

.bt-setup-continue {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 18px;
  font-weight: 800;
  background: linear-gradient(135deg, #FA8C16, #d46b08);
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity .15s, transform .1s;
}
.bt-setup-continue:hover { opacity: .9; transform: translateY(-1px); }
.bt-setup-continue:active { transform: translateY(0); }
.bt-setup-continue.hidden { display: none; }

.bt-setup-stats {
  font-size: 13px;
  color: #888;
  text-align: center;
  padding: 6px 0 2px;
}
.bt-setup-stats.hidden { display: none; }

.bt-reset-stats {
  background: none;
  border: none;
  color: #bbb;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 0 0;
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: underline;
  margin-top: 2px;
}
.bt-reset-stats:hover { color: #d4380d; }

/* ══════════════════════════════════════════════
   資訊列擴充
══════════════════════════════════════════════ */
#mode-value {
  font-size: 13px;
}

/* ══════════════════════════════════════════════
   牌桌底色
══════════════════════════════════════════════ */
.bt-table {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background:
    radial-gradient(ellipse at 50% 30%, #216b30 0%, #165224 50%, #0b3318 100%);
  border-radius: 22px;
  border: 6px solid #6b4b15;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.35),
    0 10px 40px rgba(0,0,0,.45);
  position: relative;
}

/* 牌桌裝飾邊框 */
.bt-table::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   對手列
══════════════════════════════════════════════ */
.opponents-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.opponent-panel {
  flex: 1;
  background: rgba(0,0,0,.28);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 8px 6px;
  text-align: center;
  min-width: 0;
  transition: border-color .2s, background .2s;
  position: relative;
}

.opponent-panel.top-center {
  flex: 1.3;
}

.opp-avatar {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
}

.opp-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 對手手牌（背面顯示） */
.opp-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  min-height: 34px;
  align-items: center;
}

.opp-card-back {
  width: 18px;
  height: 26px;
  background: linear-gradient(135deg, #1e7fd4 0%, #0d5296 100%);
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.opp-count {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-top: 4px;
}

.opp-count.danger {
  color: #ff7875;
  font-weight: 800;
  animation: pulse-danger .8s ease infinite alternate;
}

@keyframes pulse-danger {
  from { opacity: 1; }
  to   { opacity: .5; }
}

/* 名次徽章 */
.opp-rank-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #fa8c16;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.player-rank-badge {
  background: #fa8c16;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  margin-left: auto;
}
.opp-rank-badge.rank-1,
.player-rank-badge.rank-1 { background: #d4af37; }
.opp-rank-badge.rank-4,
.player-rank-badge.rank-4 { background: #cf1322; }
.opp-rank-badge.hidden,
.player-rank-badge.hidden { display: none; }

/* 當前出牌者高亮 */
.opp-active {
  border-color: rgba(255,229,80,.6) !important;
  background: rgba(255,229,80,.08) !important;
}
.opp-active .opp-name {
  color: #ffe556;
}

/* 思考中動畫 */
.opp-thinking .opp-name::after {
  content: ' …';
  color: rgba(255,255,255,.5);
  animation: blink .7s step-start infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ══════════════════════════════════════════════
   出牌區
══════════════════════════════════════════════ */
.play-area {
  background: rgba(0,0,0,.22);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 10px 16px;
  text-align: center;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.play-label {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  letter-spacing: .5px;
  min-height: 22px;
}

.play-pile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 70px;
  align-items: center;
}

/* ══════════════════════════════════════════════
   玩家手牌區
══════════════════════════════════════════════ */
.player-section {
  background: rgba(0,0,0,.3);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.player-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-avatar {
  font-size: 22px;
  line-height: 1;
}

.player-label-text {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
}

.player-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  min-height: 80px;
  align-items: flex-end;
}

.player-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════
   操作按鈕
══════════════════════════════════════════════ */
.bt-action-btn {
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s, opacity .12s, box-shadow .12s;
  min-width: 90px;
}
.bt-action-btn:active { transform: scale(.96); }

.bt-play-btn {
  background: #52c41a;
  color: #fff;
  box-shadow: 0 3px 10px rgba(82,196,26,.4);
}
.bt-play-btn:hover:not(:disabled) { opacity: .9; box-shadow: 0 5px 14px rgba(82,196,26,.5); }
.bt-play-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bt-play-btn.play-ready {
  animation: play-pulse .35s ease-out;
}
@keyframes play-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); box-shadow: 0 6px 18px rgba(82,196,26,.65); }
  100% { transform: scale(1); }
}

.bt-pass-btn {
  background: #fa8c16;
  color: #fff;
  box-shadow: 0 3px 10px rgba(250,140,22,.4);
}
.bt-pass-btn:hover:not(:disabled) { opacity: .9; }
.bt-pass-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.bt-hint-btn {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.3);
}
.bt-hint-btn:hover { background: rgba(255,255,255,.25); }

/* ══════════════════════════════════════════════
   牌（正面）
══════════════════════════════════════════════ */
.bt-card {
  width: 50px;
  height: 72px;
  background: #fff;
  border-radius: 7px;
  border: 1.5px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 4px;
  cursor: pointer;
  user-select: none;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  font-family: 'Arial', sans-serif;
}

.bt-card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  z-index: 10;
}

.bt-card.selected {
  transform: translateY(-14px) scale(1.05);
  box-shadow: 0 10px 24px rgba(212,56,13,.55);
  border-color: var(--color-primary, #d4380d);
  border-width: 2px;
}

.bt-card.selected::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-primary, #d4380d);
  border-radius: 7px 7px 0 0;
}

.bt-card.red .card-val,
.bt-card.red .card-suit { color: #d0021b; }

.bt-card.black .card-val,
.bt-card.black .card-suit { color: #1a1a1a; }

.card-val {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.card-suit {
  font-size: 20px;
  line-height: 1;
  align-self: center;
}

.card-val-btm {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  align-self: flex-end;
  transform: rotate(180deg);
}

/* 提示高亮 */
.bt-card.hint-card {
  animation: hint-glow .6s ease infinite alternate;
}
@keyframes hint-glow {
  from { box-shadow: 0 0 0 2px #ffe58f, 0 2px 8px rgba(0,0,0,.25); }
  to   { box-shadow: 0 0 14px 4px #ffc53d, 0 2px 8px rgba(0,0,0,.25); }
}

/* ══════════════════════════════════════════════
   遊戲結束 Modal
══════════════════════════════════════════════ */
.game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.game-over-overlay.hidden { display: none; }

.game-over-panel {
  background: var(--color-bg, #fff9f0);
  border-radius: 16px;
  padding: 24px 20px;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  animation: modal-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

.go-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary, #d4380d);
  margin: 0 0 8px;
}
.go-body {
  font-size: 18px;
  color: var(--color-text, #333);
  margin: 0 0 12px;
}

.go-ranking {
  margin: 12px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.go-ranking.hidden { display: none; }

.go-rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,.05);
  font-size: 17px;
}
.go-rank-medal {
  font-size: 22px;
  width: 30px;
  text-align: center;
}
.go-rank-name {
  flex: 1;
  font-weight: 700;
}
.go-rank-tag {
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
  background: #e6f7ff;
  color: #0958d9;
}
.go-rank-row.rank-1 { background: rgba(212,175,55,.15); }
.go-rank-row.rank-4 { background: rgba(207,19,34,.08); }

.go-stats {
  font-size: 13px;
  color: #888;
  text-align: center;
  margin: 8px 0 2px;
  padding: 6px 14px;
  background: rgba(0,0,0,.04);
  border-radius: 8px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════
   RWD
══════════════════════════════════════════════ */
@media (max-width: 520px) {
  .bt-table {
    padding: 10px;
    gap: 8px;
    border-width: 4px;
  }
  .bt-card {
    width: 40px;
    height: 58px;
    padding: 2px 3px;
  }
  .card-val, .card-val-btm { font-size: 13px; }
  .card-suit { font-size: 16px; }
  .opp-card-back { width: 14px; height: 20px; }
  .bt-action-btn { padding: 10px 14px; font-size: 14px; min-width: 76px; }
  .play-area { min-height: 100px; }
  .opp-avatar { font-size: 16px; }
  .opp-name   { font-size: 11px; }
}

@media (max-width: 360px) {
  .bt-card { width: 34px; height: 50px; }
  .card-val, .card-val-btm { font-size: 11px; }
  .card-suit { font-size: 13px; }
}