/* ════════════════════════════════════════════
   遊戲主畫面（gv-*）
   ════════════════════════════════════════════ */
.gv-page {
  padding: var(--gap-sm) 0 80px;
  max-width: 560px;
  margin: 0 auto;
}

/* ── 冒險設定區 ── */
.gv-adventure {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--gap-sm);
  overflow: hidden;
}

.gv-adv-header {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: var(--gap-sm) var(--gap-md);
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
}

.gv-adv-header span {
  font-size: 0.72em;
  color: var(--c-gold);
  font-weight: bold;
  letter-spacing: 0.4px;
}

.gv-adv-body {
  padding: var(--gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* v3.81：真元加乘狀態 badge — 在冒險旅程 header 下顯示，玩家有 expTime > 0 才出現 */
.gv-exp-boost-badge {
  padding: 8px var(--gap-md);
  background: linear-gradient(90deg, rgba(255,200,80,0.18), rgba(255,140,40,0.10));
  border-bottom: 1px solid rgba(255,200,80,0.35);
  color: #ffe090;
  font-size: 0.78em;
  text-align: center;
  letter-spacing: 0.3px;
}
.gv-exp-boost-badge b {
  color: #fff7c0;
}

/* 類型選擇 tab */
.gv-type-tabs {
  display: flex;
  gap: 4px;
  background: var(--c-surface2);
  border-radius: var(--r-md);
  padding: 3px;
}

.gv-type-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--c-text-dim);
  font-size: 0.78em;
  font-family: var(--font);
  padding: 7px 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}

.gv-type-tab.active {
  background: linear-gradient(135deg, #7a5010, #c9a84c);
  color: #fff;
  font-weight: bold;
}

/* 選擇下拉 */
.gv-select {
  width: 100%;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  color: var(--c-text);
  font-size: 0.82em;
  font-family: var(--font);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8 9 4.5' stroke='%239a7030' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.gv-select:focus {
  border-color: var(--c-gold-dim);
}

/* 行內設定（回合數、HP%） */
.gv-settings-row {
  display: flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
}

.gv-setting {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gv-setting-label {
  font-size: 0.72em;
  color: var(--c-text-dim);
  white-space: nowrap;
}

.gv-setting-input {
  width: 56px;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  color: var(--c-text);
  font-size: 0.82em;
  font-family: var(--font);
  outline: none;
  text-align: center;
}

.gv-setting-input:focus {
  border-color: var(--c-gold-dim);
}

/* 模式 radio */
.gv-mode-row {
  display: flex;
  gap: 4px;
}

.gv-mode-btn {
  flex: 1;
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 7px 0;
  color: var(--c-text-dim);
  font-size: 0.75em;
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  transition: all var(--t-fast);
}

.gv-mode-btn.active {
  border-color: var(--c-gold-dim);
  color: var(--c-gold);
  background: rgba(200,160,60,0.1);
}

/* 攻擊按鈕 */
.gv-attack-row {
  display: flex;
  gap: var(--gap-sm);
}

.gv-attack-btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: var(--r-md);
  font-size: 0.88em;
  font-weight: bold;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: 1px;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

.gv-attack-btn:active {
  opacity: 0.8;
  transform: scale(0.97);
}

.gv-attack-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gv-attack-btn--phys {
  background: linear-gradient(135deg, #8a1010, #c83030);
  color: #ffd0d0;
}

.gv-attack-btn--magic {
  background: linear-gradient(135deg, #301080, #6030b0);
  color: #e0c0ff;
}

/* ── 快捷動作格 ── */
.gv-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: var(--gap-sm);
}

.gv-quick-btn {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.gv-quick-btn:active {
  background: var(--c-surface2);
  border-color: var(--c-gold-dim);
}

.gv-quick-icon {
  font-size: 1.2em;
  line-height: 1;
}

.gv-quick-label {
  font-size: 0.6em;
  color: var(--c-text-dim);
  text-align: center;
  line-height: 1.2;
}

/* ── 戰鬥結果 ── */
.gv-fight-result {
  animation: panel-in var(--t-normal) ease;
}

/* 對戰卡片 */
.gv-versus {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--gap-md);
  margin-bottom: var(--gap-sm);
}

.gv-vs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gap-md);
}

.gv-vs-fighter {
  text-align: center;
  flex: 1;
}

.gv-fighter-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--c-surface3);
  margin-bottom: 4px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.gv-vs-name {
  font-size: 0.82em;
  font-weight: bold;
  margin-bottom: 4px;
}

@keyframes gv-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, -2px); }
  20% { transform: translate(4px, 2px); }
  30% { transform: translate(-3px, 3px); }
  40% { transform: translate(3px, -1px); }
  50% { transform: translate(-2px, 2px); }
  60% { transform: translate(2px, -2px); }
  70% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, -1px); }
}

.gv-shake {
  animation: gv-shake 0.4s ease;
}

.gv-vs-name--player { color: #89C7F3; }
.gv-vs-name--monster { color: #81D8A8; }

.gv-vs-attr {
  font-size: 0.62em;
  color: var(--c-text-faint);
}

.gv-vs-icon {
  font-size: 1.2em;
  color: var(--c-gold);
  padding: 0 var(--gap-sm);
  flex-shrink: 0;
}

.gv-vs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: var(--gap-sm);
}

.gv-vs-stat {
  background: var(--c-surface);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  font-size: 0.7em;
}

.gv-vs-stat-lbl { color: var(--c-text-faint); }
.gv-vs-stat-val { color: var(--c-text); font-weight: bold; }

/* HP 條（對戰用） */
.gv-hp-row {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  margin-bottom: 4px;
}

.gv-hp-name {
  font-size: 0.68em;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gv-hp-bar {
  flex: 1;
  height: 10px;
  background: var(--c-surface3);
  border-radius: 5px;
  overflow: hidden;
}

.gv-hp-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.gv-hp-fill--player { background: linear-gradient(90deg, var(--c-hp-from), var(--c-hp-to)); }
.gv-hp-fill--monster { background: linear-gradient(90deg, #105010, #30a030); }

.gv-hp-val {
  font-size: 0.62em;
  color: var(--c-text-dim);
  width: 48px;
  text-align: right;
  flex-shrink: 0;
}

/* 戰鬥日誌 */
.gv-log {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--gap-sm);
  overflow: hidden;
}

.gv-log-header {
  padding: 6px var(--gap-md);
  background: var(--c-surface2);
  border-bottom: 1px solid var(--c-border);
  font-size: 0.72em;
  color: var(--c-gold);
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gv-log-toggle {
  background: none;
  border: none;
  color: var(--c-text-dim);
  font-size: 0.9em;
  cursor: pointer;
  padding: 0 4px;
}

.gv-log-body {
  max-height: 200px;
  overflow-y: auto;
  padding: var(--gap-sm) var(--gap-md);
}

.gv-log-entry {
  font-size: 0.72em;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  line-height: 1.5;
}

.gv-log-entry:last-child { border-bottom: none; }
.gv-log-entry .dmg { color: var(--c-red); font-weight: bold; }
.gv-log-entry .player { color: #89C7F3; }
.gv-log-entry .monster { color: #81D8A8; }
.gv-log-entry .skill { color: #FF6060; font-weight: bold; }
.gv-log-entry .miss { color: var(--c-text-faint); font-style: italic; }
.gv-log-entry .crit { color: #FFD700; }

/* 結果摘要 */
.gv-result-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--gap-sm);
}

.gv-result-banner {
  padding: var(--gap-md);
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  letter-spacing: 2px;
}

.gv-result-banner--win {
  background: linear-gradient(135deg, rgba(20,60,20,.8), rgba(40,120,40,.4));
  color: #80ff80;
  border-bottom: 2px solid rgba(40,160,40,.6);
}

.gv-result-banner--lose {
  background: linear-gradient(135deg, rgba(60,20,20,.8), rgba(120,40,40,.4));
  color: #ff8080;
  border-bottom: 2px solid rgba(160,40,40,.6);
}

.gv-result-rewards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-border);
}

.gv-result-reward {
  background: var(--c-surface);
  padding: 8px;
  text-align: center;
}

.gv-result-reward-lbl {
  font-size: 0.6em;
  color: var(--c-text-faint);
  margin-bottom: 2px;
}

.gv-result-reward-val {
  font-size: 0.85em;
  color: var(--c-gold);
  font-weight: bold;
}

/* 事件通知（升級、撿到道具等） */
.gv-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--gap-sm);
}

.gv-event {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 6px var(--gap-md);
  font-size: 0.75em;
  color: var(--c-text);
  text-align: center;
}

/* NPC 任務遇敵卡片（m_npc=1）*/
.gv-npc-card {
  background: linear-gradient(135deg, rgba(120,80,40,0.18), rgba(60,40,20,0.15));
  border: 1px solid rgba(200,160,80,0.45);
  border-radius: var(--r-md);
  padding: var(--gap-md);
  margin: var(--gap-md) 0;
}
.gv-npc-head {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  margin-bottom: var(--gap-sm);
}
.gv-npc-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid rgba(255,200,100,0.3);
  border-radius: 4px;
  background: rgba(0,0,0,0.4);
}
.gv-npc-info { flex: 1; min-width: 0; }
.gv-npc-label {
  font-size: 0.72em;
  color: #ffc060;
  margin-bottom: 2px;
}
.gv-npc-name {
  font-size: 1em;
  color: var(--c-gold);
  font-weight: bold;
}
.gv-npc-msg {
  padding: var(--gap-sm) var(--gap-md);
  background: rgba(0,0,0,0.3);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 0.88em;
  line-height: 1.6;
  margin-bottom: var(--gap-sm);
}
.gv-npc-progress {
  background: rgba(0,0,0,0.25);
  padding: 8px 10px;
  border-radius: var(--r-sm);
}
.gv-npc-progress-label {
  font-size: 0.78em;
  color: var(--c-text-dim);
  margin-bottom: 4px;
}
.gv-npc-progress-label b { color: var(--c-gold); font-size: 1.1em; }
.gv-npc-progress-bar {
  height: 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  overflow: hidden;
}
.gv-npc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #80c060, #b0e070);
  transition: width 0.4s;
}
.gv-back-btn {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: var(--gap-md);
  background: var(--c-surface2);
  color: var(--c-gold);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 0.9em;
  cursor: pointer;
}
.gv-back-btn:active { background: var(--c-surface3); }

.gv-event--lvup {
  border-color: rgba(100,50,160,.5);
  color: #c090ff;
}

.gv-event--item {
  border-color: rgba(50,160,80,.5);
  color: #80d880;
}

/* 再戰按鈕 */
.gv-again-btn {
  width: 100%;
  background: linear-gradient(135deg, #7a5010, #c9a84c);
  border: none;
  border-radius: var(--r-md);
  padding: 12px;
  color: #fff;
  font-size: 0.88em;
  font-weight: bold;
  font-family: var(--font);
  cursor: pointer;
  letter-spacing: 1px;
  transition: opacity var(--t-fast);
  margin-bottom: var(--gap-sm);
}

.gv-again-btn:active {
  opacity: 0.8;
}

/* 載入中覆蓋 */
.gv-loading {
  text-align: center;
  padding: 40px var(--gap-md);
  color: var(--c-text-faint);
  font-size: 0.85em;
}

.gv-loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--c-surface3);
  border-top-color: var(--c-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--gap-sm);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}