/* ============================================================
   styles.css — 赛博朋克霓虹主题
   ============================================================ */
:root {
  --bg-dark: #0a0a1a; --bg-panel: #0d0d24; --bg-card: #111133;
  --neon-cyan: #00ffcc; --neon-magenta: #ff00ff; --neon-green: #00ff66;
  --neon-yellow: #ffcc00; --neon-red: #ff3344; --neon-blue: #4488ff;
  --text-primary: #c0c0d0; --text-bright: #e8e8f8; --text-dim: #666688;
  --border-glow: rgba(0,255,204,0.3);
  --card-width: 76px; --card-height: 114px;
  --skill-card-width: 95px; --skill-card-height: 66px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { overscroll-behavior:none; }
body {
  background:var(--bg-dark); color:var(--text-primary);
  font-family:'Courier New','SimHei','Microsoft YaHei',monospace;
  min-height:100vh; overflow-x:hidden;
  display:flex; justify-content:center; align-items:flex-start;
  /* 📱 手机端：禁用下拉刷新 + 长按菜单 + 文字选中 */
  overscroll-behavior:none; touch-action:manipulation;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
body::before {
  content:''; position:fixed; inset:0;
  background:linear-gradient(rgba(0,255,204,0.03) 1px,transparent 1px),
             linear-gradient(90deg,rgba(0,255,204,0.03) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none; z-index:0;
  animation:gridScroll 20s linear infinite;
}
@keyframes gridScroll {
  0%{background-position:0 0,0 0} 100%{background-position:0 40px,40px 0}
}
#app { position:relative; z-index:1; width:100%; max-width:960px; min-height:100vh; padding:8px; display:flex; flex-direction:column; }

/* ===== 头部面板 ===== */
.header-panel {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 14px; background:var(--bg-panel);
  border:1px solid var(--border-glow); border-radius:8px; margin-bottom:6px; min-height:40px;
}
.ai-info { display:flex; align-items:center; gap:12px; }
.ai-name { color:var(--neon-magenta); font-size:0.95rem; font-weight:bold; }
.hp-section { display:flex; align-items:center; gap:4px; }
.hp-label { color:var(--text-dim); font-size:0.7rem; }
.hp-bar-outer {
  width:100px; height:14px; background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1); border-radius:7px; overflow:hidden;
}
.hp-bar-inner { height:100%; transition:width 0.5s ease; border-radius:7px; }
.hp-bar-inner.hp-high { background:linear-gradient(90deg,var(--neon-green),var(--neon-cyan)); }
.hp-bar-inner.hp-mid { background:linear-gradient(90deg,var(--neon-yellow),var(--neon-green)); }
.hp-bar-inner.hp-low { background:linear-gradient(90deg,var(--neon-red),var(--neon-yellow)); }
.hp-text { color:var(--text-bright); font-size:0.75rem; font-weight:bold; min-width:40px; }
.phase-label { color:var(--neon-yellow); font-size:0.8rem; text-transform:uppercase; letter-spacing:2px; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ===== 重构：简洁战斗区域 ===== */

/* 战斗头部 */
.battle-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 12px; background:rgba(255,0,255,0.03);
  border:1px solid rgba(255,0,255,0.1); border-radius:8px;
  margin-bottom:4px; gap:8px; min-height:36px;
}
.battle-header-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.battle-header-right { display:flex; align-items:center; gap:8px; font-size:0.65rem; }
.phase-label-small { color:var(--neon-yellow); font-size:0.7rem; letter-spacing:2px; animation:pulse 2s ease-in-out infinite; }

/* 战斗区域 */
.battle-area-simple { flex:1; display:flex; flex-direction:column; gap:4px; }

/* 手牌区域 */
.hand-section {
  padding:6px 8px; border-radius:6px;
}
.hand-section:nth-child(1) { background:rgba(255,0,255,0.02); border:1px dashed rgba(255,0,255,0.08); }
.hand-section:nth-child(3) { background:rgba(0,255,204,0.02); border:1px dashed rgba(0,255,204,0.08); }
.hand-label-row { display:flex; justify-content:center; margin-bottom:2px; }
.hand-label-tag { font-size:0.55rem; padding:2px 8px; border-radius:3px; letter-spacing:1px; }
.hand-label-tag.ai-tag { color:var(--neon-magenta); border:1px solid rgba(255,0,255,0.2); }
.hand-label-tag.player-tag { color:var(--neon-cyan); border:1px solid rgba(0,255,204,0.2); }

/* 中央统计条 */
.center-stats {
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:6px 12px; margin:4px 0;
  background:rgba(0,0,0,0.25); border:1px solid rgba(255,204,0,0.1);
  border-radius:8px; flex-wrap:wrap;
}
.center-stat-item { display:flex; align-items:center; gap:3px; }
.stat-icon { font-size:0.8rem; }
.stat-value { color:var(--neon-yellow); font-weight:bold; font-size:0.9rem; }
.stat-label { color:var(--text-dim); font-size:0.55rem; }
.stat-temp { color:var(--neon-yellow); font-size:0.6rem; opacity:0.7; }
.center-stat-divider { width:1px; height:16px; background:rgba(255,255,255,0.06); }

/* 玩家状态行 */
.player-status-row {
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:4px; flex-wrap:wrap;
}
.player-tag { color:var(--neon-cyan); font-weight:bold; font-size:0.7rem; }

/* 战斗卡牌区域 */
.battle-cards-section {
  padding:6px 10px; background:rgba(0,255,102,0.02);
  border:1px solid rgba(0,255,102,0.12); border-radius:8px;
  margin:4px 0;
}
.bc-label { color:var(--neon-green); font-size:0.65rem; margin-bottom:4px; text-align:center; }

/* 底部面板（仅日志） */
.footer-panel-simple {
  padding:4px 8px; background:var(--bg-panel);
  border:1px solid rgba(255,255,255,0.05); border-radius:8px;
  margin-top:4px;
}
.game-log-simple {
  max-height:90px; overflow-y:auto; padding:4px 6px;
  font-size:0.65rem; color:var(--text-dim); line-height:1.5;
}
.game-log-simple .log-action { color:var(--neon-cyan); }
.game-log-simple .log-skill { color:var(--neon-green); }
.game-log-simple .log-result { color:var(--neon-yellow); }
.game-log-simple .log-lore { color:var(--neon-magenta); }
.game-log-simple .log-error { color:var(--neon-red); }

/* ===== 旧对战区域（保留兼容） ===== */
.battle-area { flex:1; display:flex; flex-direction:column; gap:8px; }
.ai-zone, .player-zone {
  display:flex; gap:8px; align-items:center; padding:8px;
  border-radius:8px; flex-wrap:wrap;
}
.ai-zone { background:rgba(255,0,255,0.03); border:1px solid rgba(255,0,255,0.1); }
.player-zone { background:rgba(0,255,204,0.03); border:1px solid rgba(0,255,204,0.1); }
.hand-cards { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.hand-label {
  writing-mode:vertical-lr; font-size:0.65rem; letter-spacing:2px; opacity:0.6;
}
.hand-label.ai { color:var(--neon-magenta); }
.hand-label.player { color:var(--neon-cyan); }

/* ===== 中央区域 ===== */
.center-zone {
  display:flex; align-items:center; justify-content:center; gap:20px; padding:8px; min-height:70px;
}
.deck-stack {
  width:var(--card-width); height:var(--card-height);
  background:linear-gradient(135deg,#1a1a3e,#0d0d2b);
  border:2px solid var(--neon-cyan); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--neon-cyan);
  box-shadow:0 0 15px rgba(0,255,204,0.2); position:relative;
}
.deck-stack::after {
  content:''; position:absolute; top:3px; left:3px; right:-3px; bottom:-3px;
  background:linear-gradient(135deg,#1a1a3e,#0d0d2b);
  border:1px solid rgba(0,255,204,0.3); border-radius:8px; z-index:-1;
}
.deck-count { color:var(--text-dim); font-size:0.7rem; text-align:center; margin-top:4px; }
.info-display { text-align:center; padding:6px 12px; background:rgba(0,0,0,0.5); border:1px solid var(--neon-yellow); border-radius:6px; }
.info-label { font-size:0.65rem; color:var(--text-dim); text-transform:uppercase; }
.info-value { font-size:1rem; color:var(--neon-yellow); font-weight:bold; }

/* 电量显示 */
.energy-display { text-align:center; padding:6px 12px; background:rgba(0,0,0,0.5); border:1px solid var(--neon-cyan); border-radius:6px; }
.energy-bar { color:var(--neon-cyan); font-size:0.9rem; font-weight:bold; }
.energy-bar .temp { color:var(--neon-yellow); font-size:0.7rem; }

/* Key 显示 */
.key-display { color:var(--neon-yellow); font-size:0.8rem; text-align:center; }

/* ===== 卡牌 ===== */
.card {
  width:var(--card-width); height:var(--card-height);
  background:linear-gradient(160deg,#1a1a35,#111128);
  border:2px solid #334466; border-radius:8px; position:relative;
  transition:transform 0.3s ease,box-shadow 0.3s ease; cursor:default; user-select:none;
}
.card:hover { transform:translateY(-4px); z-index:10; }
.card.deal-anim { animation:dealCard 0.4s ease-out; }
@keyframes dealCard {
  0%{transform:translateY(-100px) scale(0.5);opacity:0}
  60%{transform:translateY(10px) scale(1.05)}
  100%{transform:translateY(0) scale(1);opacity:1}
}
.card.face-down {
  background:linear-gradient(135deg,#1a1040,#0d0a2a); border-color:var(--neon-magenta);
}
.card.face-down::after { content:'⬡'; position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); font-size:2rem; color:var(--neon-magenta); opacity:0.6; }
.card.face-down::before { content:''; position:absolute; inset:8px; background:linear-gradient(0deg,rgba(255,0,255,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,0,255,0.1) 1px,transparent 1px); background-size:8px 8px; border-radius:2px; }
.card .card-corner { position:absolute; font-size:0.8rem; font-weight:bold; line-height:1; }
.card .corner-top { top:5px;left:7px; } .card .corner-bottom { bottom:5px;right:7px; transform:rotate(180deg); }
.card .card-center { position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); font-size:1.8rem; opacity:0.8; }
.card[data-color="red"] { color:#ff4466; border-color:#663344; }
.card[data-color="red"]:hover { box-shadow:0 0 12px rgba(255,68,102,0.4); }
.card[data-color="black"] { color:#aabbdd; border-color:#334455; }
.card[data-color="black"]:hover { box-shadow:0 0 12px rgba(170,187,221,0.3); }
.card.disabled { opacity:0.4; filter:grayscale(0.8); border-style:dashed; }
.hand-value { color:var(--neon-cyan); font-size:0.85rem; font-weight:bold; white-space:nowrap; }
.hand-value.bust { color:var(--neon-red); } .hand-value.blackjack { color:var(--neon-yellow); }

/* ===== 战斗卡牌（手牌） ===== */
.battle-card {
  width:var(--skill-card-width); min-height:var(--skill-card-height);
  background:linear-gradient(160deg,#0a0a2e,#151545);
  border:2px solid var(--neon-green); border-radius:6px;
  padding:5px 7px; cursor:pointer; position:relative;
  transition:all 0.2s ease; display:flex; flex-direction:column;
  justify-content:space-between; font-size:0.65rem; overflow:hidden;
}
.battle-card:hover { box-shadow:0 0 20px rgba(0,255,102,0.5); transform:translateY(-3px); }
.battle-card .bc-name { color:var(--neon-green); font-weight:bold; font-size:0.65rem; line-height:1.2; }
.battle-card .bc-cost { color:var(--neon-yellow); font-size:0.6rem; }
.battle-card .bc-type {
  position:absolute; top:3px; right:5px; font-size:0.5rem; opacity:0.7; text-transform:uppercase;
}
.battle-card.type-damage { border-color:var(--neon-red); } .battle-card.type-damage .bc-name { color:var(--neon-red); }
.battle-card.type-defense { border-color:var(--neon-blue); } .battle-card.type-defense .bc-name { color:var(--neon-blue); }
.battle-card.type-energy { border-color:var(--neon-cyan); } .battle-card.type-energy .bc-name { color:var(--neon-cyan); }
.battle-card.type-legendary { border-color:var(--neon-yellow); box-shadow:0 0 15px rgba(255,204,0,0.4); }
.battle-card.type-legendary .bc-name { color:var(--neon-yellow); }
.battle-card.unusable { opacity:0.35; pointer-events:none; }

/* AI 战斗卡牌（面朝下） */
.battle-card.face-down-card { cursor:default; border-color:rgba(255,0,255,0.3); }
.battle-card.face-down-card .bc-name { color:var(--text-dim); }
.battle-card.face-down-card:hover { box-shadow:none; transform:none; }

/* ===== 操作栏 ===== */
.action-bar {
  display:flex; gap:6px; padding:8px 12px; background:var(--bg-panel);
  border:1px solid var(--border-glow); border-radius:8px;
  flex-wrap:wrap; justify-content:center; align-items:center;
}
.btn {
  padding:8px 16px; border:2px solid #334466; border-radius:6px;
  background:var(--bg-card); color:var(--text-bright);
  font-family:inherit; font-size:0.82rem; cursor:pointer;
  transition:all 0.2s ease; text-transform:uppercase; letter-spacing:1px; white-space:nowrap;
}
.btn:hover:not(:disabled) { border-color:var(--neon-cyan); box-shadow:0 0 15px rgba(0,255,204,0.3); color:var(--neon-cyan); }
.btn:disabled { opacity:0.3; cursor:not-allowed; }
.btn-primary { border-color:var(--neon-green); color:var(--neon-green); }
.btn-primary:hover:not(:disabled) { box-shadow:0 0 15px rgba(0,255,102,0.4); background:rgba(0,255,102,0.1); }
.btn-danger { border-color:var(--neon-red); color:var(--neon-red); }
.btn-warning { border-color:var(--neon-yellow); color:var(--neon-yellow); }
.btn-sm { padding:4px 10px; font-size:0.65rem; }

/* ===== 底部面板 ===== */
.footer-panel {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 14px; background:var(--bg-panel);
  border:1px solid var(--border-glow); border-radius:8px; margin-top:6px; min-height:40px;
}
.player-info { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.player-name { color:var(--neon-cyan); font-weight:bold; font-size:0.85rem; }
.game-log { max-height:80px; overflow-y:auto; padding:4px 8px; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.05); border-radius:4px; font-size:0.65rem; color:var(--text-dim); line-height:1.5; flex:1; margin:0 8px; }
.game-log .log-action { color:var(--neon-cyan); } .game-log .log-skill { color:var(--neon-green); }
.game-log .log-result { color:var(--neon-yellow); } .game-log .log-lore { color:var(--neon-magenta); }
.game-log .log-error { color:var(--neon-red); }

/* ===== 标题画面 ===== */
.title-screen { position:fixed; inset:0; background:var(--bg-dark); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; gap:20px; }
.title-screen.hidden { display:none; }
.title-text { font-size:2.8rem; font-weight:bold; color:var(--neon-cyan); text-shadow:0 0 30px rgba(0,255,204,0.6),0 0 60px rgba(0,255,204,0.3); letter-spacing:4px; text-align:center; }
.title-sub { color:var(--text-dim); font-size:0.85rem; letter-spacing:2px; text-align:center; max-width:500px; line-height:1.6; }
.ai-select { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.ai-option { padding:14px 18px; background:var(--bg-panel); border:2px solid rgba(255,255,255,0.1); border-radius:8px; cursor:pointer; transition:all 0.2s ease; text-align:center; min-width:130px; }
.ai-option:hover { border-color:var(--neon-cyan); box-shadow:0 0 20px rgba(0,255,204,0.3); }
.ai-option.selected { border-color:var(--neon-cyan); box-shadow:0 0 25px rgba(0,255,204,0.5); background:rgba(0,255,204,0.05); }
.ai-option .opt-name { color:var(--neon-magenta); font-size:0.95rem; font-weight:bold; display:block; }
.ai-option .opt-style { color:var(--text-dim); font-size:0.65rem; display:block; margin-top:3px; }
.ai-option .opt-diff { color:var(--neon-yellow); font-size:0.6rem; display:block; margin-top:2px; }
.ai-option.locked { opacity:0.3; pointer-events:none; }

/* ===== 覆盖层（通用）===== */
.lore-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  display:flex; align-items:center; justify-content:center; z-index:200;
}
.lore-overlay.hidden { display:none; }
.lore-box {
  background:var(--bg-panel); border:2px solid var(--neon-magenta);
  border-radius:12px; padding:28px; max-width:500px; width:90%;
  box-shadow:0 0 40px rgba(255,0,255,0.3);
}
.lore-title { color:var(--neon-magenta); font-size:1.1rem; font-weight:bold; margin-bottom:6px; }
.lore-speaker { color:var(--neon-cyan); font-size:0.75rem; margin-bottom:14px; }
.lore-text { color:var(--text-bright); line-height:1.8; font-size:0.85rem; }
.lore-continue { margin-top:18px; text-align:center; }
.typing-cursor::after { content:'▌'; animation:blink 0.8s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ===== 抽奖覆盖层 ===== */
.gacha-box {
  background:var(--bg-panel); border:2px solid var(--neon-yellow);
  border-radius:12px; padding:24px; max-width:550px; width:90%; max-height:85vh; overflow-y:auto;
  box-shadow:0 0 50px rgba(255,204,0,0.3);
}
.gacha-header { color:var(--neon-yellow); font-size:1.2rem; font-weight:bold; text-align:center; margin-bottom:4px; letter-spacing:3px; }
.gacha-lore { color:var(--text-dim); font-size:0.7rem; text-align:center; line-height:1.6; margin-bottom:14px; max-width:400px; margin-left:auto; margin-right:auto; }
.gacha-stats { display:flex; gap:12px; justify-content:center; margin-bottom:14px; font-size:0.8rem; }
.gacha-stats span { background:rgba(0,0,0,0.3); padding:4px 10px; border-radius:4px; }
.gacha-result {
  text-align:center; padding:14px; min-height:100px; display:none;
  border:1px solid var(--neon-yellow); border-radius:8px; margin-bottom:12px;
  animation:fadeInUp 0.4s ease-out;
}
@keyframes fadeInUp { 0%{transform:translateY(20px);opacity:0} 100%{transform:translateY(0);opacity:1} }
.gacha-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.load-fill { animation: loadGlow 0.3s ease-in-out infinite alternate; }
@keyframes loadGlow { from { box-shadow: 0 0 4px rgba(0,255,204,0.5); } to { box-shadow: 0 0 10px rgba(0,255,204,0.8); } }

/* ===== BGM 面板 ===== */
.bgm-panel {
  background:var(--bg-panel); border:1px solid rgba(255,255,255,0.1); border-radius:8px;
  padding:10px; margin-top:8px; max-height:200px; overflow-y:auto;
}
.bgm-panel-title { color:var(--neon-cyan); font-size:0.75rem; margin-bottom:6px; letter-spacing:2px; }
.bgm-item { transition:all 0.15s ease; }
.bgm-item:hover:not(.locked) { background:rgba(0,255,204,0.06); transform:translateY(-1px); }
.bgm-item.active { background:rgba(0,255,204,0.12) !important; border-color:var(--neon-cyan) !important; box-shadow:0 0 12px rgba(0,255,204,0.3) !important; }

/* ===== 结果横幅 ===== */
.result-banner { text-align:center; padding:6px; font-size:1.1rem; font-weight:bold; letter-spacing:2px; animation:fadeInUp 0.5s ease-out; }
.result-banner.win { color:var(--neon-green); text-shadow:0 0 20px rgba(0,255,102,0.5); }
.result-banner.lose { color:var(--neon-red); text-shadow:0 0 20px rgba(255,51,68,0.5); }
.result-banner.push { color:var(--neon-yellow); }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,255,204,0.3); border-radius:2px; }

/* 通用隐藏 */
.hidden { display: none !important; }

/* ===== Linux终端特效 ===== */
#terminalBoot {
  text-shadow: 0 0 5px rgba(0,255,0,0.5), 0 0 2px rgba(0,255,0,0.3);
}
#terminalBoot::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px, transparent 1px, transparent 2px);
  pointer-events: none;
  z-index: 1;
}
#terminalBoot > * { position: relative; z-index: 2; }
#termClickArea { position: relative; z-index: 2; }
#termClickArea:hover { color: #fff; text-shadow: 0 0 10px #0f0; }

/* ===== 左下/右下菜单 ===== */
.left-menu-item {
  background:var(--bg-panel); border:1px solid rgba(255,255,255,0.08); border-left:none;
  padding:8px 14px 8px 8px; font-size:0.7rem; color:var(--text-dim); cursor:pointer;
  transition:all 0.2s ease; border-radius:0 6px 6px 0; letter-spacing:1px;
  transform:translateX(-70px); white-space:nowrap; display:flex; align-items:center; gap:6px;
}
.left-menu-item:hover {
  transform:translateX(0); color:var(--neon-cyan); border-color:var(--neon-cyan);
  box-shadow:0 0 12px rgba(0,255,204,0.2); background:rgba(0,255,204,0.05);
}
.left-menu-item span { font-size:0.9rem; }
#rightGachaBtn .left-menu-item {
  border-left:1px solid rgba(255,255,255,0.08); border-right:none;
  border-radius:6px 0 0 6px; transform:translateX(70px);
}
#rightGachaBtn .left-menu-item:hover { transform:translateX(0); }

/* ===== 标题画面：终端虚影按钮 ===== */
.term-ghost-btn {
  font-family:'Courier New',monospace; font-size:1rem;
  color:rgba(180,180,200,0.55);  /* 灰色，清晰可见 */
  padding:10px 20px; cursor:pointer; transition:all 0.3s ease;
  letter-spacing:3px; white-space:nowrap; text-shadow:none;
}
.term-ghost-btn:hover {
  color:var(--neon-cyan); text-shadow:0 0 10px rgba(0,255,204,0.8), 0 0 30px rgba(0,255,204,0.3);
  padding-left:28px; font-size:1.05rem;
}
/* 金色按钮 — 金灰色，清晰可见 */
.term-ghost-btn.gold { color:rgba(210,185,100,0.65); }
.term-ghost-btn.gold:hover {
  color:#ffe566; text-shadow:0 0 12px rgba(255,204,0,0.9), 0 0 35px rgba(255,204,0,0.4), 0 0 60px rgba(255,180,0,0.2);
}
.t-panel { width:100%; }
.t-panel.hidden { display:none; }
#titleOverlay .lore-box { box-shadow:0 0 40px rgba(0,255,204,0.25); }

/* 藏品标签 */
.collect-tab { border-color:rgba(255,255,255,0.1) !important; }
.collect-tab.active { border-color:var(--neon-cyan) !important; color:var(--neon-cyan) !important; }
.collect-section { margin-top:8px; }
.collect-section.hidden { display:none; }

/* 藏品/设置面板 */
.slide-panel {
  position:fixed; bottom:80px; left:80px; z-index:45;
  background:var(--bg-panel); border:1px solid var(--neon-cyan);
  border-radius:8px; padding:12px; max-width:400px; max-height:300px; overflow-y:auto;
  box-shadow:0 0 20px rgba(0,255,204,0.2); font-size:0.7rem;
}
.slide-panel.hidden { display:none; }

/* ===== 响应式 ===== */
@media (max-width:700px) {
  :root { --card-width:52px; --card-height:78px; --skill-card-width:72px; --skill-card-height:54px; }
  .title-text { font-size:1.7rem; }
  .card .card-corner { font-size:0.6rem; } .card .card-center { font-size:1.2rem; }
  .btn { padding:6px 10px; font-size:0.7rem; }
  .ai-option { padding:10px; min-width:100px; }
  .battle-card .bc-name { font-size:0.55rem; }
  .header-panel { flex-wrap:wrap; gap:3px; }
  .game-log { max-height:50px; font-size:0.6rem; }
  .hp-bar-outer { width:60px; height:10px; }
  .hp-text { font-size:0.65rem; min-width:30px; }
  .gacha-box { padding:16px; }

  /* 🔒 手机端禁用 body 滚动（下拉刷新根源）+ #app 接管滚动 */
  html, body { overflow:hidden !important; height:100% !important; position:fixed; width:100%; }
  #app { height:100% !important; min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }

  /* 📱 标题画面手机布局：标题置顶，按钮竖排不重叠 */
  #titleScreen { 
    justify-content:flex-start !important; align-items:center !important;
    padding-top:8vh; gap:8px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .title-text { font-size:1.6rem !important; margin-bottom:0 !important; }
  .title-sub { font-size:0.65rem; max-width:88vw !important; line-height:1.4; }
  #titleNavContainer {
    position:static !important; transform:none !important;
    display:flex !important; flex-direction:column !important;
    gap:8px !important; align-items:center; width:100%;
    padding:0 16px; margin-top:12px;
  }
  #titleGachaBtn {
    position:static !important; margin-top:4px; margin-bottom:24px;
    width:100%; display:flex; justify-content:center;
  }
  #titleNavContainer .term-ghost-btn,
  #titleGachaBtn .term-ghost-btn {
    color:var(--neon-cyan) !important;
    font-size:0.85rem; padding:10px 20px;
    border:1px solid rgba(0,255,204,0.35); border-radius:6px;
    text-shadow:0 0 6px rgba(0,255,204,0.4);
    text-align:center; width:200px; max-width:80vw; letter-spacing:2px;
  }
  #titleGachaBtn .term-ghost-btn.gold {
    color:#ffe566 !important; border-color:rgba(255,204,0,0.35);
    text-shadow:0 0 6px rgba(255,204,0,0.4);
  }

  /* 🎮 战斗界面手机适配 */
  #app { padding-bottom:60px !important; }

  /* 隐藏旧菜单，显示新底部栏 */
  #leftMenu, #rightGachaBtn { display:none !important; }
  #mobileBottomBar { display:flex !important; }

  /* 收纳篮按钮样式 */
  .mobile-badge {
    background:var(--bg-panel);
    border:1px solid rgba(0,255,204,0.3);
    padding:6px 10px; border-radius:6px;
    font-size:0.6rem; color:var(--neon-cyan);
    cursor:pointer; white-space:nowrap;
    text-shadow:0 0 4px rgba(0,255,204,0.3);
    letter-spacing:1px;
  }

  /* 简洁战斗区域手机适配 */
  .battle-header { min-height:30px !important; padding:4px 8px !important; gap:4px !important; }
  .battle-header-left { gap:4px !important; }
  .phase-label-small { font-size:0.6rem !important; }
  .ai-name { font-size:0.8rem !important; }
  .hp-bar-outer { width:50px; height:8px; }
  .hp-text { font-size:0.6rem !important; min-width:28px; }
  .hand-section { padding:4px !important; }
  .hand-label-tag { font-size:0.5rem !important; }
  .center-stats { padding:4px 8px !important; gap:4px !important; }
  .center-stat-item { gap:1px !important; }
  .stat-value { font-size:0.75rem !important; }
  .stat-label { font-size:0.5rem !important; }
  .stat-icon { font-size:0.65rem !important; }
  .player-status-row { gap:4px !important; }
  .player-tag { font-size:0.6rem !important; }
  .battle-cards-section { padding:4px 6px !important; }
  .bc-label { font-size:0.55rem !important; }
  .footer-panel-simple { padding:3px 4px !important; }
  .game-log-simple { max-height:60px !important; font-size:0.6rem !important; line-height:1.4 !important; }

  /* 操作栏 */
  .action-bar {
    padding:8px 4px !important; gap:3px !important; min-height:36px;
  }
  .action-bar .btn {
    font-size:0.65rem !important; padding:6px 10px !important; margin:1px !important;
  }

  /* 滑出面板（装备/藏品/设置）靠左不超出 */
  .slide-panel {
    left:4px !important; bottom:50px !important; max-width:95vw !important;
    max-height:40vh !important; font-size:0.6rem !important;
  }
}

/* ============================================================
   战斗特效系统 (v17)
   ============================================================ */

/* --- 浮动伤害数字 --- */
.float-dmg {
  position:absolute; z-index:100;
  font-family:'Courier New',monospace; font-weight:bold;
  pointer-events:none; white-space:nowrap;
  animation:floatDmgUp 1.2s ease-out forwards;
}
.float-dmg.dmg-player {
  font-size:1.4rem;
  color:var(--neon-red);
  text-shadow:0 0 12px rgba(255,51,68,0.8),0 0 24px rgba(255,51,68,0.4);
}
.float-dmg.dmg-ai {
  font-size:1.2rem;
  color:var(--neon-cyan);
  text-shadow:0 0 12px rgba(0,255,204,0.8),0 0 24px rgba(0,255,204,0.4);
}
.float-dmg.heal-player {
  font-size:1rem;
  color:var(--neon-green);
  text-shadow:0 0 10px rgba(0,255,102,0.8);
}
.float-dmg.shield-text {
  font-size:0.9rem;
  color:var(--neon-blue);
  text-shadow:0 0 8px rgba(68,136,255,0.8);
}
.float-dmg.crit {
  font-size:1.8rem !important;
  animation:floatDmgUpCrit 1.4s ease-out forwards;
}
.float-dmg.push-text {
  font-size:1.1rem;
  color:var(--neon-yellow);
  text-shadow:0 0 16px rgba(255,204,0,0.9);
  animation:floatDmgUpPush 1.6s ease-out forwards;
}

@keyframes floatDmgUp {
  0% { opacity:1; transform:translateY(0) scale(0.5); }
  15% { opacity:1; transform:translateY(-8px) scale(1.3); }
  40% { opacity:1; transform:translateY(-24px) scale(1); }
  100% { opacity:0; transform:translateY(-56px) scale(0.7); }
}
@keyframes floatDmgUpCrit {
  0% { opacity:1; transform:translateY(0) scale(0.3); }
  10% { opacity:1; transform:translateY(-12px) scale(1.8); }
  30% { opacity:1; transform:translateY(-28px) scale(1.2); }
  100% { opacity:0; transform:translateY(-72px) scale(0.5); }
}
@keyframes floatDmgUpPush {
  0% { opacity:0; transform:translateY(0) scale(0.8); }
  20% { opacity:1; transform:translateY(-10px) scale(1.1); }
  60% { opacity:1; transform:translateY(-30px) scale(1); }
  100% { opacity:0; transform:translateY(-52px) scale(0.8); }
}

/* --- 受击抖动 --- */
.hit-shake {
  animation:hitShake 0.35s ease-out;
}
@keyframes hitShake {
  0% { transform:translateX(0); }
  15% { transform:translateX(-6px); }
  30% { transform:translateX(6px); }
  45% { transform:translateX(-4px); }
  60% { transform:translateX(4px); }
  75% { transform:translateX(-2px); }
  90% { transform:translateX(2px); }
  100% { transform:translateX(0); }
}

/* --- 攻击闪光 --- */
.attack-flash {
  animation:attackFlash 0.3s ease-out;
}
@keyframes attackFlash {
  0% { filter:brightness(1); }
  30% { filter:brightness(2.5) drop-shadow(0 0 20px var(--neon-cyan)); }
  100% { filter:brightness(1); }
}

/* --- 护盾格挡效果 --- */
.shield-block-efx {
  position:absolute; z-index:90; pointer-events:none;
  border-radius:8px;
  animation:shieldRipple 0.8s ease-out forwards;
}
@keyframes shieldRipple {
  0% { box-shadow:inset 0 0 0 rgba(68,136,255,0),0 0 0 rgba(68,136,255,0); }
  30% { box-shadow:inset 0 0 40px rgba(68,136,255,0.6),0 0 30px rgba(68,136,255,0.8); }
  100% { box-shadow:inset 0 0 0 rgba(68,136,255,0),0 0 0 rgba(68,136,255,0); }
}

/* --- 平局特效 --- */
.push-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  z-index:95; pointer-events:none;
  animation:pushFlash 1s ease-out forwards;
}
@keyframes pushFlash {
  0% { background:rgba(255,204,0,0); }
  15% { background:rgba(255,204,0,0.12); }
  50% { background:rgba(255,204,0,0.06); }
  100% { background:rgba(255,204,0,0); }
}

/* 战斗区域容器需要 position:relative 支撑浮字定位 */
#gameUI { position:relative; }
#battleHeader { position:relative; }
.player-status-row { position:relative; }

/* 📱 手机端浮字缩小 */
@media (max-width:700px) {
  .float-dmg.dmg-player { font-size:1.1rem; }
  .float-dmg.dmg-ai { font-size:1rem; }
  .float-dmg.crit { font-size:1.4rem !important; }
  .float-dmg.push-text { font-size:0.9rem; }
}