/* ============ 阿瓦隆 · 在线版 样式 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #141a2b;
  --bg2: #1b2340;
  --card: #222b47;
  --card2: #2a3557;
  --line: #3a4770;
  --gold: #d4af37;
  --gold2: #e8c547;
  --text: #e8ecf7;
  --muted: #8b95b8;
  --good: #4f9de0;
  --evil: #e05050;
  --green: #58c08a;
  --red: #e05050;
}

html, body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(1200px 600px at 50% -100px, #2a3560 0%, var(--bg) 60%);
  color: var(--text);
  min-height: 100vh;
  padding: 16px 16px 40px;
}

#app { max-width: 520px; margin: 0 auto; }

.view { display: none; }
.view.active { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============ 通用组件 ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.card-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--text); }
.muted { color: var(--muted); font-weight: 400; }
.hint { color: var(--muted); font-size: 13px; text-align: center; margin: 10px 0; }
.badge {
  display: inline-block; background: var(--gold); color: #241f05;
  font-weight: 800; border-radius: 999px; padding: 1px 9px; font-size: 13px; margin-left: 4px;
}

.btn {
  display: block; width: 100%;
  border: none; border-radius: 12px;
  padding: 14px 20px; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-lg { padding: 16px; font-size: 17px; margin-top: 10px; }
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #241f05; box-shadow: 0 4px 16px rgba(212,175,55,.3); }
.btn-ghost { background: var(--card2); color: var(--text); border: 1px solid var(--line); }
.btn-danger { background: linear-gradient(135deg, #b33838, #e05050); color: #fff; }
.btn-success { background: linear-gradient(135deg, #2e8f63, #58c08a); color: #fff; }
.btn-sm { padding: 10px 14px; font-size: 14px; width: auto; border-radius: 10px; }

.input {
  width: 100%; background: var(--bg2); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 14px; font-size: 16px; color: var(--text); outline: none;
  -webkit-appearance: none; appearance: none;
  -webkit-user-select: text; user-select: text;
  -webkit-tap-highlight-color: transparent;
}
.input:focus { border-color: var(--gold); }
.input-code { text-transform: uppercase; letter-spacing: 4px; font-weight: 800; }

.row { display: flex; gap: 10px; }
.row .input { flex: 1; }

.field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============ 首页 ============ */
.hero { text-align: center; padding: 34px 0 26px; }
.hero-emoji { font-size: 58px; line-height: 1; filter: drop-shadow(0 6px 20px rgba(212,175,55,.35)); }
.hero h1 {
  font-size: 42px; font-weight: 900; margin-top: 6px; letter-spacing: 6px;
  background: linear-gradient(135deg, #f5e08c, var(--gold) 55%, #a8842a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subtitle { color: var(--muted); margin-top: 4px; letter-spacing: 3px; font-size: 14px; }

.help { margin-top: 18px; background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 12px 16px; }
.help summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.help-body { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.help-body b { color: var(--gold2); }

/* ============ 顶部栏 / 房间码 ============ */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.room-code { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; }
.room-code-label { color: var(--muted); font-size: 12px; }
.room-code-value { font-size: 24px; font-weight: 900; letter-spacing: 5px; color: var(--gold2); }

.round-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.round-text { font-size: 18px; font-weight: 800; color: var(--gold2); }
.round-leader { font-size: 13px; color: var(--muted); }
.game-room-badge { font-size: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; white-space: nowrap; }
.game-room-badge b { color: var(--gold2); font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-left: 4px; }

/* 任务进度圆点 */
.missions { display: flex; gap: 8px; }
.mission-dot {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--muted);
  position: relative;
}
.mission-dot.current { border-color: var(--gold); color: var(--gold2); box-shadow: 0 0 10px rgba(212,175,55,.35); }
.mission-dot.win { border-color: var(--green); color: var(--green); background: rgba(88,192,138,.12); }
.mission-dot.fail { border-color: var(--red); color: var(--red); background: rgba(224,80,80,.12); }

/* ============ 玩家列表 ============ */
.player-list { list-style: none; }
.player-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px; margin-bottom: 8px;
  background: var(--bg2); border: 1px solid var(--line);
}
.player-list li .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #10162a;
  background: linear-gradient(135deg, #7d8cc0, #a8b4e0);
}
.player-list li .pname { flex: 1; font-weight: 600; font-size: 15px; }
.player-list li .tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.tag-host { background: rgba(212,175,55,.18); color: var(--gold2); }
.tag-offline { background: rgba(139,149,184,.15); color: var(--muted); }
.tag-team { background: rgba(79,157,224,.18); color: var(--good); }
.tag-merlin { background: rgba(232,197,71,.18); color: #f1d25c; }
.tag-evil { background: rgba(224,80,80,.15); color: #ff8a8a; }

/* ============ 身份卡片 ============ */
.role-card {
  text-align: center; background: var(--card);
  border: 2px solid var(--line); border-radius: 20px;
  padding: 30px 20px; margin-top: 8px; position: relative; overflow: hidden;
}
.role-card::before {
  content: ""; position: absolute; inset: 0; opacity: .06;
  background: radial-gradient(circle at 50% 0%, #fff 0%, transparent 60%);
}
.role-emoji { font-size: 64px; }
.role-name { font-size: 32px; font-weight: 900; margin-top: 8px; letter-spacing: 2px; }
.role-side { display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 2px; }
.side-good { background: rgba(79,157,224,.16); color: #7db8ec; border: 1px solid rgba(79,157,224,.4); }
.side-evil { background: rgba(224,80,80,.14); color: #ff8a8a; border: 1px solid rgba(224,80,80,.4); }
.role-desc { color: var(--muted); font-size: 14px; line-height: 1.7; margin-top: 14px; }

.seen-box { margin-top: 14px; }
.seen-box .seen-title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.seen-box .player-list li { background: var(--card); }

/* ============ 游戏主区 ============ */
.phase-title { text-align: center; font-size: 19px; font-weight: 800; margin: 6px 0 4px; color: var(--gold2); }
.phase-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 14px; }

.team-pick li { cursor: pointer; user-select: none; transition: all .12s ease; }
.team-pick li.selected {
  border-color: var(--gold); background: rgba(212,175,55,.12);
  box-shadow: 0 0 0 1px var(--gold);
}
.team-pick li.selected .check { margin-left: auto; color: var(--gold2); font-weight: 900; }

.vote-buttons { display: flex; gap: 12px; margin-top: 16px; }
.vote-buttons .btn { margin-top: 0; flex: 1; }

.voted-check { color: var(--green); font-weight: 700; font-size: 14px; margin-left: auto; }

.mission-note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 10px; }
.mission-note b { color: var(--gold2); }

.waiting-box {
  text-align: center; padding: 34px 16px; background: var(--card);
  border-radius: 14px; border: 1px dashed var(--line);
}
.waiting-box .w-emoji { font-size: 40px; }
.waiting-box .w-text { color: var(--muted); margin-top: 10px; font-size: 14px; }

/* 队伍展示（投票/任务阶段的队伍成员） */
.team-show { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.team-chip {
  background: var(--card2); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}

/* 高文号令：是否发动选择区 */
.gawain-decide { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* ============ 刺杀 ============ */
.assassin-title { text-align: center; font-size: 24px; margin-top: 20px; color: var(--red); }
.assassin-sub { text-align: center; color: var(--muted); margin: 8px 0 20px; font-size: 14px; }
/* 刺杀阶段软超时倒计时（300 秒），醒目提醒玩家尽快决策 */
.assassin-countdown {
  text-align: center;
  margin: 10px auto 16px;
  padding: 8px 12px;
  max-width: 560px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #e05050, #c0392b);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(224, 80, 80, .25);
}
.assassin-countdown b { font-size: 18px; padding: 0 2px; }
.phase-countdown {
  text-align: center;
  margin: 10px auto 16px;
  padding: 8px 12px;
  max-width: 560px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f0a030, #e08a20);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(224, 138, 32, .25);
}
.phase-countdown b { font-size: 18px; padding: 0 2px; }
.offline-countdown {
  text-align: center;
  margin: 10px auto 16px;
  padding: 8px 12px;
  max-width: 560px;
  font-size: 14px;
  font-weight: 600;
  color: #e05050;
  background: #fff3f3;
  border: 1px dashed #e05050;
  border-radius: 10px;
}
.offline-countdown b { font-size: 17px; padding: 0 2px; }
.team-confirm-tip {
  text-align: center;
  margin: 10px auto 4px;
  padding: 6px 10px;
  max-width: 560px;
  font-size: 13px;
  color: #a06a00;
  background: #fff8e6;
  border: 1px solid #f0d28a;
  border-radius: 8px;
}
#assassin-targets li { cursor: pointer; }
#assassin-targets li:active { border-color: var(--red); }

/* ============ 结算 ============ */
.end-banner { text-align: center; padding: 26px 16px 20px; }
#end-history { margin-top: 18px; }
#end-history .history-card { box-shadow: none; }
.end-emoji { font-size: 64px; }
.end-banner h2 { font-size: 28px; font-weight: 900; margin-top: 8px; letter-spacing: 2px; }
.end-banner p { color: var(--muted); margin-top: 8px; font-size: 14px; }
.end-good h2 { color: var(--good); }
.end-evil h2 { color: var(--red); }
#end-players li .pname { display: flex; flex-direction: column; }
#end-players li .pname small { color: var(--muted); font-weight: 400; font-size: 12px; }
#end-players li .pname small.win-text { color: var(--good); font-weight: 800; font-size: 12px; margin-top: 2px; }
#end-players li .pname small.win-text-evil { color: var(--red); }

/* ============ 玩家编号 ============ */
.player-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--line); color: var(--muted);
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}

/* ============ 大厅离线玩家 ============ */
.offline-player { opacity: .5; }
.avatar-offline { background: linear-gradient(135deg, #555, #777) !important; }

/* ============ 角色配置面板 ============ */
.config-tip { font-size: 12px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }
.config-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid rgba(58,71,112,.4);
}
.config-row:last-child { border-bottom: none; }
.config-left { display: flex; align-items: center; gap: 10px; }
.config-emoji { font-size: 22px; }
.config-name { font-size: 14px; font-weight: 700; }
.config-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.toggle {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--muted); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.toggle.on { background: rgba(212,175,55,.15); border-color: var(--gold); color: var(--gold2); }
.toggle.over-limit { background: rgba(224,80,80,.15); border-color: var(--red); color: #ff8a8a; }
.toggle.locked { opacity: .45; cursor: not-allowed; background: var(--bg2); border-color: var(--line); color: var(--muted); }
.config-preview {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg2); font-size: 12px; color: var(--muted); line-height: 1.6;
}
.config-preview b { color: var(--gold2); }

/* ============ 游戏内常驻玩家列表 ============ */
.game-players {
  margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px;
}
.gp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line);
  transition: all .15s ease;
}
.gp-item.gp-in-team { border-color: var(--good); background: rgba(79,157,224,.08); }
.gp-item.gp-me { border-color: var(--gold); background: rgba(212,175,55,.06); }
.gp-item.gp-offline { opacity: .4; }
.gp-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--line); color: var(--text);
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.gp-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #10162a;
  background: linear-gradient(135deg, #7d8cc0, #a8b4e0);
}
.gp-avatar-offline { background: linear-gradient(135deg, #555, #777) !important; }
.gp-name { flex: 1; font-weight: 600; font-size: 14px; }
.gp-tag {
  font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700; white-space: nowrap;
}
.gp-tag-evil { background: rgba(224,80,80,.15); color: #ff8a8a; }
.gp-tag-good { background: rgba(88,192,138,.15); color: #7fe0b0; }
.gp-tag-ally { background: rgba(165,94,234,.15); color: #c89bff; }
.gp-tag-info { background: rgba(232,197,71,.15); color: #f1d25c; }
.gp-tag-leader { background: rgba(212,175,55,.18); color: var(--gold2); }
.gp-tag-team { background: rgba(79,157,224,.18); color: var(--good); }
.gp-tag-offline { background: rgba(139,149,184,.15); color: var(--muted); }
.gp-tag-fairy {
  background: rgba(46,201,201,.16); color: #5fe8e8;
  border: 1px solid rgba(46,201,201,.5);
}
.gp-tag-me {
  background: var(--gold); color: #10162a;
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}

/* ============ 刺杀栏 ============ */
#assassin-bar { margin-bottom: 12px; display: flex; justify-content: center; }
.assassinate-btn {
  width: 100%; font-size: 16px; padding: 13px; animation: pulse-danger 1.6s infinite;
}
.btn-armed {
  filter: brightness(1.15);
  transform: scale(1.02);
  box-shadow: 0 0 0 3px #ffd24a, 0 0 18px rgba(255,210,74,.7) !important;
  animation: none !important;
}
.assassin-tip {
  width: 100%; text-align: center; font-size: 13px; font-weight: 700;
  padding: 10px; border-radius: 10px;
  background: rgba(224,80,80,.12); border: 1px dashed rgba(224,80,80,.5); color: #ff9a9a;
}
@keyframes pulse-danger {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,80,80,.5); }
  50% { box-shadow: 0 0 0 8px rgba(224,80,80,0); }
}

/* 角色配置 tag */
.tag-info { background: rgba(232,197,71,.15); color: #f1d25c; }

/* ============ 本局记录 ============ */
#game-history { margin-top: 16px; }
.history-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
}
.history-title { font-size: 14px; font-weight: 800; color: var(--gold2); margin-bottom: 6px; }
.history-round {
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin: 12px 0 6px; letter-spacing: 1px;
}
.history-round::before { content: "▍"; color: var(--gold); }
.history-item {
  font-size: 13px; color: var(--text);
  padding: 5px 0 5px 8px; border-left: 2px solid var(--line);
  margin-left: 2px; line-height: 1.5;
}
.history-item.ok { color: var(--green); border-left-color: rgba(88,192,138,.5); }
.history-item.bad { color: #ff8a8a; border-left-color: rgba(224,80,80,.5); }
.history-item.info { color: #5fe8e8; border-left-color: rgba(46,201,201,.5); }

/* ============ 仙女验人 ============ */
.blocked-pick { opacity: .45; }
.blocked-why {
  margin-left: auto; font-size: 11px; color: var(--muted);
  background: rgba(139,149,184,.15); padding: 2px 8px; border-radius: 999px;
}

/* ============ 刺杀确认 ============ */
.confirm-progress { text-align: center; color: var(--muted); font-size: 13px; margin: 4px 0 16px; }
.confirm-progress b { color: var(--gold2); font-size: 16px; }
#assassin-stage .waiting-box { margin-top: 16px; }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px);
  background: #2c2f45; color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.4); z-index: 99;
  opacity: 0; pointer-events: none; transition: all .25s ease; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 公告栏（大厅）与角色配置提醒条（游戏中） ============ */
.bulletin-card { border-color: rgba(46,201,201,.45); }
.bulletin-card .card-title { color: #5fe8e8; }
.bulletin-body { display: flex; flex-direction: column; gap: 8px; }
.bulletin-line { font-size: 13px; line-height: 1.6; color: var(--text); }
.bulletin-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.bulletin-label { color: var(--muted); font-size: 12px; margin-right: 2px; }
.chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; line-height: 1.7; font-weight: 600;
}
.chip-on  { background: rgba(88,192,138,.16); color: #7fe0ae; border: 1px solid rgba(88,192,138,.4); }
.chip-off { background: rgba(139,149,184,.12); color: var(--muted); border: 1px solid rgba(139,149,184,.25); }
.chip-fairy { background: rgba(46,201,201,.15); color: #5fe8e8; border: 1px solid rgba(46,201,201,.4); }
.bulletin-note { margin-top: 8px; font-size: 11px; color: var(--muted); opacity: .8; }

.rule-reminder {
  font-size: 12px; color: #b9c4e4; background: rgba(46,201,201,.08);
  border: 1px solid rgba(46,201,201,.25); border-radius: 10px;
  padding: 7px 12px; margin: 0 0 12px; line-height: 1.6;
}
.rule-reminder b { color: #5fe8e8; }

/* ============ v8：任务规则提示 / 角色立绘 / 刺杀阶段记录 ============ */
.mission-hint {
  margin-top: 8px; padding: 7px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.6;
  background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.25);
  color: var(--muted);
}
.mission-hint b { color: var(--gold2); }

.avatar { position: relative; }
.avatar .avatar-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; display: block;
}
.role-emoji { line-height: 1; }
.role-emoji .role-img {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; display: block; margin: 0 auto;
  border: 3px solid var(--line); box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#assassin-history { margin-top: 18px; }

/* ============ v8.1：角色配置图标立绘化 + 七夕限定特效 ============ */
.config-emoji-img {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex: none; display: block;
  border: 2px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.chip-img {
  width: 16px; height: 16px; border-radius: 50%;
  object-fit: cover; vertical-align: -3px; margin-right: 5px;
}

/* --- 七夕限定（仅当日可见）：烟花 + 花束 + 文字 --- */
#qixi-overlay {
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none; overflow: hidden;
}
#qixi-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.qixi-center {
  position: absolute; left: 50%; top: 24%;
  transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap;
}
.qixi-bouquet {
  font-size: 72px; line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(255,80,120,.5));
  animation: qixi-pop .9s cubic-bezier(.2,1.4,.4,1) both;
}
.qixi-text {
  margin-top: 14px; font-size: 40px; font-weight: 900; letter-spacing: 6px;
  color: #ffd9e3;
  text-shadow: 0 0 18px rgba(255,90,140,.9), 0 0 40px rgba(255,60,120,.5), 0 2px 6px rgba(0,0,0,.6);
  animation: qixi-pop .9s .45s cubic-bezier(.2,1.4,.4,1) both;
}
.qixi-sub {
  display: block; font-size: 19px; font-weight: 700;
  letter-spacing: 11px; margin-top: 10px; color: #ffb3c6;
  text-shadow: 0 0 12px rgba(255,90,140,.8), 0 2px 4px rgba(0,0,0,.6);
}
.qixi-petal {
  position: fixed; top: -34px; z-index: 998;
  pointer-events: none; opacity: .9;
  animation: qixi-fall linear infinite;
}
@keyframes qixi-pop {
  0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes qixi-fall {
  0%   { transform: translateY(-34px) rotate(0deg); }
  100% { transform: translateY(110vh) rotate(360deg); }
}
@media (min-width: 700px) {
  .qixi-bouquet { font-size: 96px; }
  .qixi-text { font-size: 52px; }
  .qixi-sub { font-size: 24px; }
}

@media (min-width: 700px) {
  body { padding: 28px 24px 60px; }
}

/* ===== v9: 新角色（兰斯洛特/高文/加雷斯/石中剑）样式 ===== */

/* 兰斯洛特转换牌进度条（游戏内常驻） */
.lancelot-status {
  text-align: center;
  padding: 6px 8px;
  margin: 4px 0;
  background: rgba(74, 60, 93, .12);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
}
.lancelot-status .lan-title { font-weight: 700; color: #a55eea; }
.lancelot-status .lan-card {
  display: inline-block;
  padding: 2px 8px;
  margin: 2px 3px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.lancelot-status .lan-card.swap { background: #e05050; color: #fff; }
.lancelot-status .lan-card.no-swap { background: #6fae5a; color: #fff; }
.lancelot-status .lan-card.hidden { background: #555; color: #aaa; }
.lancelot-status .lan-card.current { outline: 2px solid #e8c547; }

/* 兰斯洛特翻牌阶段 */
.lancelot-cards {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.lancelot-card {
  width: 72px;
  height: 96px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.lancelot-card.swap { background: linear-gradient(135deg, #e05050, #b03a5e); color: #fff; }
.lancelot-card.no-swap { background: linear-gradient(135deg, #6fae5a, #4a8a3a); color: #fff; }
.lancelot-card.hidden { background: #444; color: #777; }
.lancelot-card.current { outline: 3px solid #e8c547; transform: scale(1.05); }
.lancelot-result {
  text-align: center;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 8px 0;
  font-weight: 700;
  font-size: 15px;
}
.lancelot-result.swap { background: rgba(224, 80, 80, .15); color: #e05050; }
.lancelot-result.no-swap { background: rgba(111, 174, 90, .15); color: #4a8a3a; }

/* 配置面板：兰斯洛特玩法选择 */
.config-mode-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px 52px;
  flex-wrap: wrap;
}
.config-mode-label { font-size: 12px; color: #888; }
.mode-btn { font-size: 11px !important; padding: 4px 10px !important; }

/* 玩家标签：石中剑 / 高文 */
.gp-tag-excalibur { background: #e8c547; color: #333; }
.gp-tag-gawain { background: #6fae5a; color: #fff; }

/* 任务阶段提示 */
.mission-note.warn { background: rgba(224, 80, 80, .12); color: #c0392b; border: 1px solid rgba(224, 80, 80, .3); }
.mission-note.info { background: rgba(74, 60, 93, .1); color: #6c5b7b; }

/* 轮到你操作 · 顶部高亮条 */
.turn-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(90deg, #e8c547, #f0a500);
  color: #2a1f00; font-weight: 800; text-align: center;
  padding: 10px 12px; font-size: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  transform: translateY(-120%); transition: transform .25s ease;
  pointer-events: none;
}
.turn-banner.show { transform: translateY(0); animation: turnPulse 1.4s ease-in-out infinite; }
@keyframes turnPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* 连接状态条 */
.conn-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: #c0392b; color: #fff; font-weight: 700; text-align: center;
  padding: 8px 12px; font-size: 13px;
  transform: translateY(-120%); transition: transform .25s ease;
}
.conn-banner.show { transform: translateY(0); }

/* ===== v9.9.1：应用内确认模态 + 游戏内退出按钮 ===== */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 14, 26, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 360px; width: 100%;
  padding: 20px 18px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: fadeIn .2s ease;
}
.modal-title { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.modal-body { font-size: 14px; line-height: 1.7; color: var(--text); }
.modal-body .muted { color: var(--muted); font-size: 13px; }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns .btn { flex: 1; }

.btn-exit-game {
  position: fixed; right: 12px; bottom: 14px; z-index: 40;
  background: var(--card2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; padding: 6px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.btn-exit-game:active { background: var(--line); }

/* ===== v9.9.2：一键添加到桌面（PWA 安装引导） ===== */
.install-box { margin: 0 0 14px; }
.btn-install {
  background: linear-gradient(135deg, #2a3560, #1b2340);
  color: var(--gold2);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.btn-install:active { background: var(--card2); }
.install-tip {
  color: var(--muted); font-size: 12px; text-align: center; margin-top: 6px;
}