/* =============================================================================
   猜拳視圖 — 黑金奢華(所有選擇器加 .gv-rps 前綴)
   一律沿用 style.css 的 :root 變數:felt / gold / panel / line / ink / muted …
   俯視平面——桌面「絕不」3D 傾斜。立體感只做「物件級」:出拳大按鈕的高光、
   結果揭曉的翻牌淡入。繁中文案;手機 375px 可用。
   ============================================================================= */

.gv-rps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  --rp-win: #3fae6e;   /* 贏 — 與掃雷/骰子同一套綠 */
  --rp-lose: #a83a40;  /* 輸 — 深沉紅,不刺眼 */
}

/* ---------- 共用面板(深絨布底 + 金色頂線) ---------- */
.gv-rps .rp-panel {
  position: relative;
  background:
    radial-gradient(120% 96% at 50% 26%, rgba(255, 240, 200, .06), transparent 56%),
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--felt) 86%, #fff 6%) 0%, var(--felt) 44%, var(--felt-dark) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 8px 24px rgba(0, 0, 0, .4);
  padding: 16px;
}
.gv-rps .rp-panel::before { /* 頂端金色細線飾條 */
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  background: var(--grad-gold-line);
  opacity: .6;
  pointer-events: none;
}

.gv-rps .rp-title {
  margin: 0 0 12px;
  font-size: .95rem;
  color: var(--gold-bright);
  letter-spacing: .1em;
}

/* ---------- 共用下注列 ---------- */
.gv-rps .rp-betbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.gv-rps .rp-betlabel {
  flex: 0 0 auto;
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .1em;
}
.gv-rps .rp-betinput {
  flex: 1;
  min-width: 0;
  max-width: 180px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  color: var(--gold-bright);
  font: inherit;
  font-weight: 700;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
}
.gv-rps .rp-betinput::-webkit-outer-spin-button,
.gv-rps .rp-betinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gv-rps .rp-betinput:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--gold) 60%, var(--line));
  box-shadow: 0 0 0 2px rgba(212, 175, 55, .2);
}
.gv-rps .rp-badj { display: flex; gap: 6px; margin-left: auto; }
.gv-rps .rp-qbtn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s ease, border-color .15s ease;
}
.gv-rps .rp-qbtn:hover { filter: brightness(1.15); border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.gv-rps .rp-qbtn:active { transform: scale(.96); }

/* ---------- 版面:對莊家 / 找人對戰 並列 ---------- */
.gv-rps .rp-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

/* ---------- 對莊家舞台 ---------- */
.gv-rps .rp-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px 0 16px;
}
.gv-rps .rp-slotwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gv-rps .rp-slotlabel {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .1em;
}
.gv-rps .rp-slot {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-bright);
  background: radial-gradient(60% 55% at 38% 30%, rgba(255, 255, 255, .08), transparent 60%), rgba(0, 0, 0, .32);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .35);
}
.gv-rps .rp-slot.idle { opacity: .5; font-size: 2rem; }
.gv-rps .rp-stage.reveal .rp-slot { animation: gv-rps-reveal .38s ease-out; }
@keyframes gv-rps-reveal {
  from { transform: scale(.6) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- 出拳頓感:「剪刀…石頭…布!」三拍搖拳(對莊 rp-stage + PvP 揭曉卡共用) ---------- */
.gv-rps .rp-slot.counting {
  opacity: 1;
  font-size: 2.1rem;
  color: var(--gold-bright);
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 14px rgba(212, 175, 55, .18);
}
/* JS 每拍對 .rp-stage 做一次 remove/reflow/add('beat'),讓兩顆拳同步「頓」一下再回彈 */
.gv-rps .rp-stage.beat .rp-slot { animation: gv-rps-bump .45s ease-out; }
@keyframes gv-rps-bump {
  0%   { transform: scale(1) translateY(0); }
  30%  { transform: scale(1.16) translateY(-8px); }
  60%  { transform: scale(.94) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}

.gv-rps .rp-vs {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .1em;
}

.gv-rps .rp-verdict {
  min-height: 1.4em;
  text-align: center;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.gv-rps .rp-verdict.show { opacity: 1; transform: translateY(0); }
.gv-rps .rp-verdict.win { color: var(--gold-bright); text-shadow: 0 0 12px rgba(240, 214, 122, .4); }
.gv-rps .rp-verdict.lose { color: var(--red); }
.gv-rps .rp-verdict.tie { color: var(--ink); }
/* 倒數中的「剪刀/石頭/布!」口號:中性金字,尚未定輸贏,故不套 win/lose/tie 色 */
.gv-rps .rp-verdict.counting { color: var(--gold-bright); letter-spacing: .08em; }
.gv-rps .rp-verdict.beat,
.gv-rps .rp-pvpcountword.beat { animation: gv-rps-textpop .45s ease-out; }
@keyframes gv-rps-textpop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ---------- 出拳大按鈕(對莊 + PvP 共用樣式) ---------- */
.gv-rps .rp-hands {
  display: flex;
  gap: 10px;
}
.gv-rps .rp-handbtn {
  flex: 1;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: filter .15s ease, border-color .15s ease, transform .1s ease;
}
.gv-rps .rp-handbtn:hover:not(:disabled) {
  filter: brightness(1.15);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
}
.gv-rps .rp-handbtn:active:not(:disabled) { transform: scale(.96); }
.gv-rps .rp-handbtn:disabled { opacity: .5; cursor: default; }
.gv-rps .rp-handicon {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold-bright);
}
.gv-rps .rp-handlabel { font-size: .78rem; color: var(--muted); letter-spacing: .06em; }

.gv-rps .rp-hint { margin-top: 10px; text-align: center; font-size: .74rem; }

/* ---------- 找人對戰 ---------- */
.gv-rps .rp-pvpstatus {
  min-height: 2.4em;
  text-align: center;
  font-size: .88rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px 12px;
}
.gv-rps .rp-pvphands { margin-bottom: 12px; }
.gv-rps .rp-pvpactions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.gv-rps .rp-pvpjoin { flex: 1; max-width: 260px; }
.gv-rps .rp-pvpcancel { flex: 0 0 auto; }

/* PvP 結果揭曉(揭曉後 duel 已清空,transient 覆蓋卡片) */
.gv-rps .rp-pvpreveal {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  text-align: center;
  animation: gv-rps-feedin .3s ease-out;
}
.gv-rps .rp-pvprevealhands {
  font-size: 1.05rem;
  color: var(--gold-bright);
  margin-bottom: 4px;
  word-break: break-word;
}
.gv-rps .rp-pvprevealmsg { font-size: .88rem; font-weight: 700; }

/* PvP 揭曉前的三拍搖拳頓感(揭曉卡內的子舞台,揭曉/倒數二擇一顯示、互斥) */
.gv-rps .rp-pvpcountstage {
  padding: 4px 0 6px;
  gap: 14px;
}
.gv-rps .rp-pvpcountstage .rp-slot { width: 64px; height: 64px; font-size: 2rem; }
.gv-rps .rp-pvpcountword {
  font-size: .95rem;
  min-width: 3.6em;
  text-align: center;
}

/* ---------- 全桌動態 ---------- */
.gv-rps .rp-feedpanel { padding: 14px 16px; }
.gv-rps .rp-feedlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.gv-rps .rp-feedrow {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid var(--line-soft);
  font-size: .8rem;
  color: var(--ink);
}
.gv-rps .rp-feedrow.winrow { border-color: color-mix(in srgb, var(--gold) 35%, var(--line-soft)); color: var(--gold-bright); }
.gv-rps .rp-feedrow.new { animation: gv-rps-feedin .3s ease-out; }
@keyframes gv-rps-feedin {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gv-rps .rp-feedempty { text-align: center; padding: 10px 0; }

/* ---------- 響應式(375px 手機可用) ---------- */
@media (max-width: 900px) {
  .gv-rps .rp-layout { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .gv-rps .rp-panel { padding: 12px; }
  .gv-rps .rp-slot { width: 68px; height: 68px; font-size: 2.1rem; }
  .gv-rps .rp-handicon { font-size: 1.6rem; }
  .gv-rps .rp-betbar { flex-wrap: wrap; }
  .gv-rps .rp-badj { margin-left: 0; width: 100%; }
  .gv-rps .rp-badj .rp-qbtn { flex: 1; padding: 8px 6px; }
  .gv-rps .rp-betinput { max-width: none; }
}

/* 動畫減量:尊重使用者設定(頓感倒數本身在 JS 端已直接跳過,這裡是雙保險) */
@media (prefers-reduced-motion: reduce) {
  .gv-rps .rp-stage.reveal .rp-slot { animation: none; }
  .gv-rps .rp-stage.beat .rp-slot { animation: none; }
  .gv-rps .rp-verdict { transition: none; }
  .gv-rps .rp-verdict.beat,
  .gv-rps .rp-pvpcountword.beat { animation: none; }
  .gv-rps .rp-feedrow.new { animation: none; }
  .gv-rps .rp-pvpreveal { animation: none; }
}