* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Microsoft YaHei','PingFang SC',sans-serif;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(155,89,182,.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(52,152,219,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255,210,0,.05) 0%, transparent 60%),
    linear-gradient(135deg,#0d0d2b,#1a1040,#0f3460);
  background-attachment: fixed;
  min-height: 100vh; color: #fff; overflow-x: hidden;
  touch-action: manipulation;
}
/* 背景蛋蛋装饰 - 给空白区域增加视觉层次 */
body::before {
  content: '🥚 🐣 🥚 🐤 🥚 🐣 🥚 🐤 🥚 🐣 🥚 🐤 🥚 🐣 🥚 🐤';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  font-size: 64px; opacity: .04; color: #fff;
  display: flex; flex-wrap: wrap; align-content: space-around; justify-content: space-around;
  padding: 40px; line-height: 1.8;
}
.hidden { display: none !important; }

/* 滚动条 */
* { scrollbar-width: auto; scrollbar-color: #ffd200 rgba(255,255,255,.08); }
::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 7px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#ffd200,#f7971e);
  border-radius: 7px; min-height: 50px;
  border: 2px solid rgba(0,0,0,.3);
}
.player-panel,.chat-messages,.info-panel,.room-list,.inline-skill-panel {
  -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
  overflow-y: scroll !important;
}

/* 按钮 */
.btn {
  padding: 12px 28px; border: none; border-radius: 25px;
  font-size: 16px; font-weight: bold; cursor: pointer;
  transition: all .25s; font-family: inherit;
}
.btn:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg,#f7971e,#ffd200); color: #333; }
.btn-danger  { background: linear-gradient(135deg,#e74c3c,#c0392b); color: #fff; }
.btn-success { background: linear-gradient(135deg,#2ecc71,#27ae60); color: #fff; }
.btn-info    { background: linear-gradient(135deg,#3498db,#2980b9); color: #fff; }
.btn-ghost   { background: rgba(255,255,255,.08); color: #ccc; border: 1px solid rgba(255,255,255,.15); }
.btn-small   { padding: 6px 16px; font-size: 13px; }
.btn-full    { width: 100%; }

.card {
  background: rgba(255,255,255,.06); backdrop-filter: blur(12px);
  border-radius: 20px; padding: 30px;
  border: 1px solid rgba(255,255,255,.08);
  max-width: 480px; width: 92%; margin: 0 auto;
}
.card h2 { color: #ffd200; margin-bottom: 18px; text-align: center; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 13px; color: #aaa; }
.form-group input:not([type=checkbox]), .form-group select {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08); color: #fff;
  font-size: 14px; font-family: inherit;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: #ffd200; }
.form-group select option { background: #1a1040; color: #fff; }
.form-group input::placeholder { color: #555; }
.link-btn { background: none; border: none; color: #3498db; cursor: pointer; font-size: 13px; text-decoration: underline; font-family: inherit; }
.error-text { color: #e74c3c; font-size: 12px; margin-top: 4px; display: none; }

.screen-center {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.logo { font-size: 42px; font-weight: bold;
  background: linear-gradient(135deg,#ffd200,#f7971e,#ff6b6b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  text-align: center; margin-bottom: 4px;
}
.subtitle { font-size: 20px; color: #ffd200; margin-bottom: 20px; text-align: center; }
.ai-badge { font-size: 12px; color: #888; margin-bottom: 20px; padding: 4px 12px;
  background: rgba(255,255,255,.05); border-radius: 10px; }
.ai-badge.on { color: #2ecc71; background: rgba(46,204,113,.1); }

.tab-bar { display: flex; gap: 0; margin-bottom: 15px; border-radius: 12px; overflow: hidden; }
.tab-bar .tab {
  flex: 1; padding: 10px; text-align: center; cursor: pointer;
  background: rgba(255,255,255,.05); font-size: 13px; font-weight: bold;
  transition: background .2s; border: none; color: #888; font-family: inherit;
}
.tab-bar .tab.active { background: rgba(255,210,0,.15); color: #ffd200; }

.room-list { max-height: 200px; }
.room-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.05); margin-bottom: 6px;
  cursor: pointer; transition: background .2s;
}
.room-item:hover { background: rgba(255,255,255,.1); }

.room-players-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin: 15px 0; }
.room-slot {
  text-align: center; padding: 10px 4px; border-radius: 12px;
  background: rgba(255,255,255,.04); font-size: 12px;
  border: 1px dashed rgba(255,255,255,.1);
}
.room-slot.filled { border-style: solid; border-color: rgba(255,210,0,.3); }
.room-slot .slot-avatar { font-size: 28px; margin-bottom: 2px; }
.room-slot .slot-badge { font-size: 10px; color: #3498db; }

/* 游戏主界面 */
.game-header {
  background: rgba(0,0,0,.45); padding: 10px 20px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid rgba(255,210,0,.25);
}
.phase-info { font-size: 17px; font-weight: bold; color: #ffd200; }
.round-info { font-size: 13px; color: #888; }
.timer { font-size: 26px; font-weight: bold; color: #ff6b6b; min-width: 50px; text-align: center;
  transition: all .3s; }
.llm-indicator {
  font-size: 11px; padding: 4px 10px; border-radius: 12px;
  background: rgba(255,255,255,.06); color: #888;
  display: flex; align-items: center; gap: 4px;
}
.llm-indicator.on { background: rgba(46,204,113,.15); color: #2ecc71; }
.llm-indicator.fail { background: rgba(231,76,60,.15); color: #e74c3c; }
.conn-indicator {
  font-size: 11px; padding: 4px 10px; border-radius: 12px;
  background: rgba(255,255,255,.06); display: flex; align-items: center; gap: 4px;
  transition: all .3s;
}
.conn-indicator.good { color: #2ecc71; background: rgba(46,204,113,.15); }
.conn-indicator.bad { color: #e74c3c; background: rgba(231,76,60,.15); animation: pulse 1s infinite; }
.conn-indicator.warn { color: #f39c12; background: rgba(243,156,18,.15); }

/* AI 打字指示 */
.typing-indicator {
  display: inline-block; padding: 6px 14px;
  background: rgba(255,255,255,.04); border-radius: 12px;
  font-size: 12px; color: #888; margin: 4px 0;
}
.typing-indicator span {
  display: inline-block; width: 6px; height: 6px; margin: 0 1px;
  background: #888; border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.timer.critical { color: #ff0040; animation: timerFlash .5s infinite; }
@keyframes timerFlash {
  0%,100% { transform: scale(1); text-shadow: 0 0 0 rgba(255,0,60,0); }
  50% { transform: scale(1.2); text-shadow: 0 0 15px #ff0040; }
}

.game-body {
  display: grid; grid-template-columns: 220px 1fr 240px;
  height: calc(100vh - 54px);
}
.player-panel,.info-panel { background: rgba(0,0,0,.25); padding: 10px; }
.player-panel { border-right: 1px solid rgba(255,255,255,.06); }
.info-panel { border-left: 1px solid rgba(255,255,255,.06); }
.player-panel h4,.info-panel h4 { color: #ffd200; font-size: 13px; margin-bottom: 8px; }

.player-item {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 10px; border-radius: 10px; margin-bottom: 4px;
  cursor: pointer; transition: background .2s; font-size: 13px; position: relative;
  min-height: 40px;
}
.player-item:hover { background: rgba(255,255,255,.07); }
.player-item.dead { opacity: .35; text-decoration: line-through; cursor: default; }
.player-item.is-me { border: 1px solid rgba(255,210,0,.5); }
.player-item.voted { background: rgba(247,151,30,.15); }
.player-item .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.player-item .p-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-item .p-badge {
  font-size: 9px; padding: 2px 5px; border-radius: 6px;
  background: rgba(52,152,219,.25); color: #3498db;
}
.player-item .vote-count {
  background: #e74c3c; color: #fff; border-radius: 50%;
  width: 17px; height: 17px; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}

.chat-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.chat-messages { flex: 1 1 0; padding: 10px 12px; min-height: 0; }
.msg { margin-bottom: 5px; animation: fadeIn .25s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.msg-author { font-size: 10px; font-weight: bold; margin-bottom: 1px; opacity: .85; }
.msg-text {
  background: rgba(255,255,255,.07); padding: 5px 10px;
  border-radius: 10px; display: inline-block; max-width: 85%;
  font-size: 12.5px; line-height: 1.45; word-break: break-word;
}
.msg.system { margin: 3px 0; }
.msg.system .msg-text { padding: 4px 8px; font-size: 11px; }
.msg.system .msg-text {
  background: rgba(255,210,0,.12); color: #ffd200;
  max-width: 100%; text-align: center; display: block; border-radius: 8px;
}
.msg.system .msg-author { display: none; }
.msg.me { text-align: right; }
.msg.me .msg-text { background: rgba(247,151,30,.25); }
.msg.me .msg-author { color: #ffd200; }
.msg.llm .msg-text { border-left: 2px solid #2ecc71; }
.new-msg-hint {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg,#f7971e,#ffd200); color: #333;
  border: none; padding: 8px 16px; border-radius: 20px;
  font-size: 12px; font-weight: bold; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); z-index: 10;
  animation: bounce .5s;
}
@keyframes bounce { from {transform:translateX(-50%) translateY(10px);opacity:0} to {transform:translateX(-50%) translateY(0);opacity:1} }
.chat-panel { position: relative; }
.quick-replies {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 10px; background: rgba(0,0,0,.2);
  border-top: 1px solid rgba(255,255,255,.04);
  max-height: 80px; overflow-y: auto;
}
.quick-replies.hidden { display: none; }
.quick-reply-btn {
  padding: 5px 12px; border-radius: 14px;
  background: rgba(255,255,255,.06); color: #ccc; border: 1px solid rgba(255,255,255,.1);
  font-size: 12px; cursor: pointer; transition: all .2s; white-space: nowrap;
  font-family: inherit;
}
.quick-reply-btn:hover:not(:disabled) { background: rgba(255,210,0,.15); color: #ffd200; border-color: #ffd200; }
.quick-reply-btn:disabled { opacity: .4; cursor: not-allowed; }

.chat-input-area {
  padding: 10px 12px; background: rgba(0,0,0,.3);
  display: flex; gap: 6px; border-top: 1px solid rgba(255,255,255,.06);
}
.chat-input-area input {
  flex: 1; padding: 9px 14px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: #fff;
  font-size: 13px; font-family: inherit;
}
.chat-input-area input::placeholder { color: #555; }
.chat-input-area input:focus { outline: none; border-color: #ffd200; }

.role-card {
  background: rgba(255,255,255,.05); border-radius: 12px; padding: 12px; text-align: center; margin-bottom: 10px;
}
.role-card .role-icon { font-size: 44px; margin-bottom: 4px; }
.role-card .role-name { font-size: 17px; font-weight: bold; margin-bottom: 3px; }
.role-card .role-desc { font-size: 11px; color: #999; line-height: 1.6; }
.action-area { margin-top: 10px; }
.action-area .btn { width: 100%; margin-bottom: 5px; font-size: 13px; }
.game-log { margin-top: 12px; font-size: 11px; color: #888; line-height: 1.7; max-height: 180px; overflow-y: auto; }
.game-log .log-entry { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,.03); }

.inline-skill-panel {
  background: rgba(0,0,0,.35); border-radius: 12px;
  padding: 8px; margin-top: 8px; max-height: 220px;
}
.inline-skill-panel h5 { color: #ff6b6b; font-size: 12px; margin-bottom: 6px; }
.inline-skill-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.04); margin-bottom: 3px;
  transition: background .2s; font-size: 12px; min-height: 38px;
}
.inline-skill-item:hover,.inline-skill-item:active { background: rgba(255,100,100,.2); }
.inline-skill-item.selected { background: rgba(255,210,0,.2); border: 1px solid #ffd200; }
.inline-skill-item .isi-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}

/* 弹窗 */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; z-index: 100;
  padding: 20px;
}
.modal-box {
  background: linear-gradient(135deg,#12122a,#1a1040);
  border: 1px solid rgba(255,210,0,.25); border-radius: 20px;
  padding: 28px; max-width: 450px; width: 100%; text-align: center;
  max-height: 90vh; overflow-y: auto;
}
.modal-box h2 { color: #ffd200; margin-bottom: 10px; }
.modal-box p { color: #ccc; margin-bottom: 18px; line-height: 1.6; }
.modal-box .role-reveal { font-size: 58px; margin: 8px 0; }
.night-report { background: rgba(0,0,0,.3); border-radius: 12px; padding: 12px; text-align: left; }
.night-report .nr-line { padding: 3px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.04); }

/* 结算 */
.result-card { text-align: center; }
.result-card .result-icon { font-size: 72px; margin-bottom: 12px; }
.result-roles { text-align: left; margin: 12px 0; }
.result-roles .role-line {
  display: flex; justify-content: space-between;
  padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px;
}
.result-roles .rl-role { color: #ffd200; }

/* 语音输入浮层 */
.voice-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  z-index: 200; display: flex; align-items: flex-end; justify-content: center;
  padding: 20px; padding-bottom: 100px; backdrop-filter: blur(4px);
}
.voice-panel {
  background: linear-gradient(135deg,#1a1040,#16213e);
  border: 2px solid #e74c3c; border-radius: 20px;
  padding: 20px; width: 100%; max-width: 460px;
  box-shadow: 0 10px 40px rgba(231,76,60,.4);
  animation: voiceSlideUp .3s;
}
@keyframes voiceSlideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
.voice-title { color: #ffd200; font-size: 14px; margin-bottom: 10px; text-align: center; font-weight: bold; }
.voice-transcript {
  background: rgba(255,255,255,.05); border-radius: 12px;
  padding: 14px; min-height: 60px; max-height: 120px; overflow-y: auto;
  font-size: 16px; line-height: 1.5; color: #fff; word-break: break-word;
}
.voice-transcript:empty::before { content: '开始说话...'; color: #555; }
.voice-volume {
  height: 8px; background: rgba(255,255,255,.08); border-radius: 4px;
  margin-top: 12px; overflow: hidden;
}
.voice-volume-bar {
  height: 100%; background: linear-gradient(90deg,#2ecc71,#f1c40f,#e74c3c);
  border-radius: 4px; width: 0%; transition: width .1s;
}
.voice-hint { font-size: 12px; color: #e74c3c; margin-top: 8px; text-align: center; min-height: 18px; }

/* 静音按钮 */
.fab-mute {
  position: fixed; bottom: 20px; right: 20px;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15);
  color: #fff; font-size: 20px; cursor: pointer; z-index: 50;
  transition: all .2s;
}
.fab-mute:hover { transform: scale(1.1); }
.fab-mute.muted { opacity: .5; }
.fab-help {
  position: fixed; bottom: 20px; right: 80px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg,#3498db,#2980b9); border: none;
  color: #fff; font-size: 20px; cursor: pointer; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: all .2s;
}
.fab-help:hover { transform: scale(1.1); }
.fab-fullscreen {
  position: fixed; bottom: 20px; right: 140px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg,#27ae60,#16a085); border: none;
  color: #fff; font-size: 22px; cursor: pointer; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: all .2s;
}
.fab-fullscreen:hover { transform: scale(1.1); }
.fab-feedback {
  position: fixed; bottom: 20px; right: 200px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg,#9b59b6,#8e44ad); border: none;
  color: #fff; font-size: 22px; cursor: pointer; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: all .2s;
}
.fab-feedback:hover { transform: scale(1.1); }
.fab-lang {
  position: fixed; bottom: 80px; right: 20px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 18px; cursor: pointer; z-index: 50;
  transition: all .2s;
}
.fab-lang:hover { transform: scale(1.1); background: rgba(255,255,255,.2); }
.fab-tts {
  position: fixed; bottom: 80px; right: 70px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 18px; cursor: pointer; z-index: 50;
  transition: all .2s;
}
.fab-tts:hover { transform: scale(1.1); background: rgba(255,255,255,.2); }
.fab-tts.on { background: rgba(46,204,113,.2); border-color: #2ecc71; }
.fb-type-btn.active { background: linear-gradient(135deg,#f7971e,#ffd200); color: #333; }
@media(max-width:500px) {
  .fab-feedback { width: 40px; height: 40px; font-size: 16px; right: 170px; }
}
#btn-voice { font-size: 16px; padding: 8px 12px; }
#btn-voice.recording { background: linear-gradient(135deg,#e74c3c,#c0392b); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,.6); } 50% { box-shadow: 0 0 0 8px rgba(231,76,60,0); } }

/* 帮助弹窗 */
.help-box { max-width: 600px; text-align: left; padding: 24px; }
.help-tabs { display: flex; gap: 4px; margin-bottom: 12px; border-radius: 10px; overflow: hidden; }
.help-tab {
  flex: 1; padding: 10px; background: rgba(255,255,255,.05); color: #888;
  border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: bold;
  transition: all .2s;
}
.help-tab.active { background: rgba(255,210,0,.2); color: #ffd200; }
.help-content { max-height: 60vh; overflow-y: auto; padding: 0 4px; }
.help-pane { display: none; }
.help-pane.active { display: block; }
.help-pane h3 { color: #ffd200; margin-bottom: 10px; font-size: 18px; }
.help-pane h4 { color: #f7971e; margin: 12px 0 6px; font-size: 14px; }
.help-pane p, .help-pane li { color: #ccc; font-size: 13px; line-height: 1.7; }
.help-pane ul { padding-left: 18px; }
.help-pane b { color: #fff; }
.role-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin: 8px 0;
}
.role-tag {
  background: rgba(46,204,113,.1); border-left: 3px solid #2ecc71;
  padding: 6px 10px; border-radius: 6px; font-size: 12px;
}
.role-tag.bad { background: rgba(231,76,60,.1); border-left-color: #e74c3c; }
.role-tag.neutral { background: rgba(255,105,180,.1); border-left-color: #ff69b4; }
.help-box::-webkit-scrollbar { width: 8px; }

/* 移动端 */
@media(max-width:900px) {
  .game-body { grid-template-columns: 1fr; grid-template-rows: 120px 1fr auto; height: calc(100vh - 54px); }
  .player-panel { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; overflow-x: auto; overflow-y: hidden; }
  .player-panel h4 { display: none; }
  .player-panel #player-list { display: flex; gap: 6px; flex-wrap: nowrap; }
  .player-item { flex-direction: column; min-width: 70px; padding: 6px; text-align: center; font-size: 11px; }
  .player-item .p-name { text-align: center; font-size: 11px; }
  .info-panel { border-left: none; border-top: 1px solid rgba(255,255,255,.06); max-height: 250px; }
  .room-players-grid { grid-template-columns: repeat(3,1fr); }
  .logo { font-size: 32px; }
  .subtitle { font-size: 16px; }
}
@media(max-width:500px) {
  .card { padding: 20px; }
  .btn { padding: 10px 20px; font-size: 14px; }
  .timer { font-size: 22px; }
  .phase-info { font-size: 14px; }
  .fab-mute,.fab-help { width: 40px; height: 40px; font-size: 16px; }
  .help-box { padding: 16px; }
  .role-grid { grid-template-columns: 1fr; }
}

/* 健康游戏忠告（登录页底部）*/
.health-notice {
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(255,210,0,.06);
  border: 1px solid rgba(255,210,0,.2);
  border-radius: 8px;
  text-align: center;
}
.health-notice-title {
  color: #ffd200;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.health-notice-body {
  color: #aaa;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* 看规则状态：本地玩家无法行动，UI 灰化 */
body.reading-rules .player-panel,
body.reading-rules .info-panel,
body.reading-rules .chat-input-area,
body.reading-rules .quick-replies {
  opacity: .45; pointer-events: none; filter: grayscale(.6);
}
body.reading-rules .game-header::after {
  content: '📖 看规则中 — 游戏照常进行，但你无法行动';
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #9b59b6, #c0392b);
  color: #fff; padding: 6px 16px; border-radius: 20px;
  font-size: 12px; font-weight: bold; z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  animation: readingPulse 2s infinite;
}
@keyframes readingPulse { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.05); } }

/* 手机模式 — 用户手动切换；强制单列 + 大按钮，不论屏幕宽度 */
.fab-phone {
  position: fixed; bottom: 16px; left: 60px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(155,89,182,.2); color: #fff; font-size: 22px;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s;
}
.fab-phone:hover, .fab-phone.on {
  background: rgba(155,89,182,.55); transform: scale(1.05);
}

body.phone-mode .game-body {
  grid-template-columns: 1fr;
  grid-template-rows: 130px 1fr 280px;
}
body.phone-mode .player-panel {
  border-right: none; border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; overflow-x: auto; overflow-y: hidden; padding: 8px;
}
body.phone-mode .player-panel h4 { display: none; }
body.phone-mode .player-panel #player-list { display: flex; gap: 6px; flex-wrap: nowrap; }
body.phone-mode .player-item {
  flex-direction: column; min-width: 80px; padding: 8px;
  text-align: center; font-size: 12px;
}
body.phone-mode .player-item .avatar { width: 40px; height: 40px; font-size: 22px; }
body.phone-mode .info-panel {
  border-left: none; border-top: 1px solid rgba(255,255,255,.06);
  max-height: 280px; overflow-y: auto; padding: 8px;
}
body.phone-mode .btn { padding: 14px 22px; font-size: 16px; min-height: 48px; }
body.phone-mode .btn-small { padding: 10px 16px; font-size: 14px; min-height: 40px; }
body.phone-mode .timer { font-size: 28px; }
body.phone-mode .phase-info { font-size: 16px; }
body.phone-mode .chat-input-area input { font-size: 16px; padding: 14px 16px; }
body.phone-mode .quick-reply-btn { padding: 10px 14px; font-size: 13px; min-height: 38px; }
body.phone-mode .form-group input,
body.phone-mode .form-group select { font-size: 16px; padding: 14px 16px; }
body.phone-mode .room-players-grid { grid-template-columns: repeat(3,1fr); }
body.phone-mode .modal-box { max-width: 95vw !important; padding: 18px; }
body.phone-mode .help-box { padding: 18px; }
body.phone-mode .role-grid { grid-template-columns: 1fr; }
body.phone-mode .fab-mute,
body.phone-mode .fab-help,
body.phone-mode .fab-fullscreen,
body.phone-mode .fab-feedback,
body.phone-mode .fab-lang,
body.phone-mode .fab-tts,
body.phone-mode .fab-phone {
  width: 52px; height: 52px; font-size: 22px;
}

/* ============ 手机模式：按阶段精简 UI ============ */
/* 行动阶段：仅显示行动栏（隐藏聊天/玩家头像）*/
body.phone-mode.phase-action .game-body {
  grid-template-rows: 0 0 1fr; /* player + chat 折叠到 0 */
}
body.phone-mode.phase-action .player-panel,
body.phone-mode.phase-action .chat-panel {
  display: none;
}
body.phone-mode.phase-action .info-panel {
  border: none; padding: 16px; max-height: none; overflow-y: auto;
  background: rgba(0,0,0,.4);
}

/* 讨论阶段：仅 2 条消息 + 输入栏 + 玩家名（无头像）*/
body.phone-mode.phase-discuss .game-body {
  grid-template-rows: 60px 1fr 0;
}
body.phone-mode.phase-discuss .info-panel { display: none; }
body.phone-mode.phase-discuss .player-panel {
  flex-direction: row; padding: 6px;
}
body.phone-mode.phase-discuss .player-panel #player-list {
  display: flex; flex-wrap: nowrap; gap: 4px;
}
body.phone-mode.phase-discuss .player-item {
  flex-direction: row; min-width: auto; padding: 4px 8px;
  background: rgba(255,255,255,.06); border-radius: 12px;
  font-size: 11px; gap: 4px;
}
body.phone-mode.phase-discuss .player-item .avatar { display: none; }
body.phone-mode.phase-discuss .chat-messages {
  /* 只显示最近 2 条：用 max-height + 反向滚动模拟 */
  max-height: 90px; min-height: 90px;
}
body.phone-mode.phase-discuss .chat-messages .msg:nth-last-child(n+3) {
  display: none; /* 隐藏倒数第3条之前的消息 */
}
body.phone-mode.phase-discuss .quick-replies { max-height: 60px; overflow-y: auto; }

/* 投票阶段：仅显示玩家列表（点头像投票）+ 跳过按钮 */
body.phone-mode.phase-vote .game-body {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}
body.phone-mode.phase-vote .chat-panel,
body.phone-mode.phase-vote .info-panel {
  display: none;
}
body.phone-mode.phase-vote .player-panel {
  border: none; padding: 12px; flex-direction: column;
  display: block; overflow-y: auto; overflow-x: hidden;
}
body.phone-mode.phase-vote .player-panel #player-list {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; flex-wrap: wrap;
}
body.phone-mode.phase-vote .player-item {
  flex-direction: column; padding: 14px 8px; min-width: 0; min-height: 100px;
  font-size: 14px; background: rgba(255,255,255,.08); border-radius: 14px;
}
body.phone-mode.phase-vote .player-item.dead { opacity: .35; }
body.phone-mode.phase-vote .player-item.voted {
  background: rgba(255,210,0,.25); border: 2px solid #ffd200;
}
body.phone-mode.phase-vote .player-item .avatar {
  width: 50px; height: 50px; font-size: 28px;
}
body.phone-mode.phase-vote .player-item .vote-count {
  position: absolute; top: 4px; right: 8px;
  background: #e74c3c; color: #fff; font-size: 12px;
  padding: 2px 6px; border-radius: 10px; font-weight: bold;
}
body.phone-mode.phase-vote .player-item { position: relative; }

/* 卡牌阶段 = 行动阶段同样处理（手机模式只显示行动栏）*/
body.phone-mode.phase-cards .game-body {
  grid-template-rows: 0 0 1fr;
}
body.phone-mode.phase-cards .player-panel,
body.phone-mode.phase-cards .chat-panel {
  display: none;
}
body.phone-mode.phase-cards .info-panel {
  border: none; padding: 16px; max-height: none; overflow-y: auto;
  background: rgba(0,0,0,.4);
}

/* ============ 手机模式：最大化使用空间 ============ */
body.phone-mode .game-header {
  padding: 6px 12px;
  border-bottom-width: 1px;
}
body.phone-mode .game-body {
  height: calc(100vh - 42px); /* 缩小 header 后腾出空间 */
}
body.phone-mode .info-panel,
body.phone-mode .player-panel,
body.phone-mode .chat-panel {
  padding: 6px;
}
body.phone-mode .role-card {
  padding: 8px; margin-bottom: 6px;
}
body.phone-mode .role-card .role-icon { font-size: 32px; margin-bottom: 2px; }
body.phone-mode .role-card .role-name { font-size: 14px; }
body.phone-mode .role-card .role-desc { font-size: 11px; }
body.phone-mode .action-area { padding: 4px; }
body.phone-mode .game-log { display: none; } /* 手机模式隐藏日志，省空间 */
body.phone-mode .info-panel details { display: none; } /* 隐藏笔记折叠 */
body.phone-mode .info-panel h4 { display: none; } /* 隐藏 "📋 我的身份" 标题 */

/* 行动/卡牌阶段：info-panel 全屏铺满，移除内边距留白 */
body.phone-mode.phase-action .info-panel,
body.phone-mode.phase-cards .info-panel {
  padding: 8px; height: 100%;
}
body.phone-mode.phase-action .info-panel .role-card,
body.phone-mode.phase-cards .info-panel .role-card {
  /* 行动阶段角色卡缩为 1 行简版，给行动按钮腾位置 */
  padding: 6px 10px; margin-bottom: 6px; display: flex;
  align-items: center; gap: 8px; text-align: left;
}
body.phone-mode.phase-action .info-panel .role-card .role-icon,
body.phone-mode.phase-cards .info-panel .role-card .role-icon { font-size: 24px; margin: 0; }
body.phone-mode.phase-action .info-panel .role-card .role-name,
body.phone-mode.phase-cards .info-panel .role-card .role-name { font-size: 13px; margin: 0; }
body.phone-mode.phase-action .info-panel .role-card .role-desc,
body.phone-mode.phase-cards .info-panel .role-card .role-desc { display: none; }

/* 讨论阶段：聊天充满剩余空间 */
body.phone-mode.phase-discuss .chat-panel {
  padding: 4px;
}
body.phone-mode.phase-discuss .chat-messages {
  flex: 1; max-height: none; min-height: 0; /* 撑满剩余 */
}
body.phone-mode.phase-discuss .player-panel {
  height: 36px; min-height: 36px;
}

/* 投票阶段：玩家网格充满 */
body.phone-mode.phase-vote .player-panel {
  height: 100%; padding: 8px;
}
body.phone-mode.phase-vote .player-item {
  min-height: 90px; padding: 10px 6px;
}

/* 手机模式行动阶段：让行动栏更大、按钮更显眼 */
body.phone-mode.phase-action .info-panel,
body.phone-mode.phase-cards .info-panel {
  display: flex; flex-direction: column;
}
body.phone-mode.phase-action .info-panel .role-card,
body.phone-mode.phase-cards .info-panel .role-card {
  /* 角色卡再缩 — 占 ~12% */
  padding: 4px 8px; font-size: 11px;
  flex-shrink: 0;
}
body.phone-mode.phase-action .info-panel .action-area,
body.phone-mode.phase-cards .info-panel .action-area {
  flex: 1; padding: 12px 8px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px;
}
body.phone-mode.phase-action .info-panel .action-area h4,
body.phone-mode.phase-cards .info-panel .action-area h4 {
  font-size: 16px; color: #ffd200; margin-bottom: 4px;
}
body.phone-mode.phase-action .info-panel .action-area .btn,
body.phone-mode.phase-cards .info-panel .action-area .btn {
  padding: 18px 24px; font-size: 17px; min-height: 56px;
}
body.phone-mode.phase-action .info-panel .action-area .btn-small,
body.phone-mode.phase-cards .info-panel .action-area .btn-small {
  padding: 12px 18px; font-size: 14px; min-height: 44px;
}
/* 技能目标条目放大 */
body.phone-mode.phase-action .inline-skill-panel,
body.phone-mode.phase-cards .inline-skill-panel {
  font-size: 14px; padding: 10px;
}
body.phone-mode.phase-action .inline-skill-item,
body.phone-mode.phase-cards .inline-skill-item {
  padding: 12px 14px; font-size: 15px; min-height: 50px;
  margin: 4px 0;
}
body.phone-mode.phase-action .inline-skill-item .isi-avatar,
body.phone-mode.phase-cards .inline-skill-item .isi-avatar {
  width: 36px; height: 36px; font-size: 20px;
}

/* 手机模式：隐藏背景蛋蛋装饰（避免覆盖行动栏可读性）*/
body.phone-mode::before { display: none; }
/* 顺便给 info-panel 加更深的不透明背景，确保按钮清晰 */
body.phone-mode.phase-action .info-panel,
body.phone-mode.phase-cards .info-panel {
  background: rgba(13,13,43,.95); /* 几乎不透明深色 */
}

/* 撤销过深背景 — 用半透明更舒服 */
body.phone-mode.phase-action .info-panel,
body.phone-mode.phase-cards .info-panel {
  background: rgba(0,0,0,.55); /* 之前 0.95 太死，改 0.55 */
}
/* 行动按钮加 box-shadow + 高对比，不靠背景颜色 */
body.phone-mode.phase-action .info-panel .action-area .btn,
body.phone-mode.phase-cards .info-panel .action-area .btn {
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  font-weight: bold;
}

/* 撤销 flex 布局 — 用自然流，让 action-area 内容自然显示 */
body.phone-mode.phase-action .info-panel,
body.phone-mode.phase-cards .info-panel {
  display: block; /* 覆盖之前的 flex 设置 */
  background: rgba(0,0,0,.55);
}
body.phone-mode.phase-action .info-panel .action-area,
body.phone-mode.phase-cards .info-panel .action-area {
  flex: none; padding: 12px 8px;
}

/* 强制清除手机模式行动阶段的所有可疑紫色覆盖 */
body.phone-mode.phase-action,
body.phone-mode.phase-cards {
  background: #000 !important;
}
body.phone-mode.phase-action::before,
body.phone-mode.phase-cards::before { display: none !important; }
body.phone-mode.phase-action .info-panel,
body.phone-mode.phase-cards .info-panel {
  background: #1a1a2e !important;
  filter: none !important;
  opacity: 1 !important;
  border: 2px solid #ffd200; /* 黄边证明这就是行动栏区域 */
}
body.phone-mode.phase-action .info-panel *,
body.phone-mode.phase-cards .info-panel * {
  filter: none !important; /* 防止任何祖先 filter 影响 */
}
body.phone-mode.phase-action .game-header::after,
body.phone-mode.phase-cards .game-header::after {
  display: none !important; /* 防止"看规则中"残留 banner 显示 */
}

/* ============ 手机模式行动阶段：彻底重写（覆盖所有之前的）============ */
body.phone-mode.phase-action .game-body,
body.phone-mode.phase-cards .game-body {
  display: block !important;
  height: calc(100vh - 50px) !important;
  padding: 0 !important;
}
body.phone-mode.phase-action .player-panel,
body.phone-mode.phase-action .chat-panel,
body.phone-mode.phase-cards .player-panel,
body.phone-mode.phase-cards .chat-panel {
  display: none !important;
}
body.phone-mode.phase-action .info-panel,
body.phone-mode.phase-cards .info-panel {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, #1a1040, #0d0d2b) !important;
  border: none !important;
  padding: 12px !important;
  overflow-y: auto !important;
  filter: none !important;
  opacity: 1 !important;
}
/* 角色卡：紧凑 1 行（横排）+ 黄边醒目 */
body.phone-mode.phase-action .info-panel .role-card,
body.phone-mode.phase-cards .info-panel .role-card {
  display: flex !important; align-items: center; gap: 10px;
  padding: 10px 14px !important;
  background: rgba(255,210,0,.08) !important;
  border: 1px solid rgba(255,210,0,.3) !important;
  border-radius: 12px;
  margin-bottom: 12px !important;
  text-align: left;
}
body.phone-mode.phase-action .role-card .role-icon,
body.phone-mode.phase-cards .role-card .role-icon { font-size: 28px !important; margin: 0 !important; }
body.phone-mode.phase-action .role-card .role-name,
body.phone-mode.phase-cards .role-card .role-name { font-size: 15px !important; font-weight: bold; margin: 0 !important; }
body.phone-mode.phase-action .role-card .role-desc,
body.phone-mode.phase-cards .role-card .role-desc { display: none !important; }

/* 行动区：占满剩余，按钮巨大显眼 */
body.phone-mode.phase-action .action-area,
body.phone-mode.phase-cards .action-area {
  display: block !important; padding: 0 !important;
  background: transparent !important;
}
body.phone-mode.phase-action .action-area h4,
body.phone-mode.phase-cards .action-area h4 {
  font-size: 18px !important; color: #ffd200 !important; margin: 8px 0 12px !important;
}
body.phone-mode.phase-action .action-area .btn,
body.phone-mode.phase-cards .action-area .btn {
  display: block !important; width: 100% !important;
  padding: 22px !important; font-size: 19px !important; font-weight: bold;
  margin: 8px 0 !important; min-height: 60px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
body.phone-mode.phase-action .inline-skill-panel,
body.phone-mode.phase-cards .inline-skill-panel {
  margin-top: 12px !important; padding: 12px !important;
  background: rgba(255,255,255,.06) !important; border-radius: 12px;
}
body.phone-mode.phase-action .inline-skill-panel h5,
body.phone-mode.phase-cards .inline-skill-panel h5 {
  font-size: 14px !important; color: #ffd200 !important; margin-bottom: 8px;
}
body.phone-mode.phase-action .inline-skill-item,
body.phone-mode.phase-cards .inline-skill-item {
  display: flex !important; align-items: center; gap: 10px;
  padding: 14px !important; margin: 6px 0 !important;
  background: rgba(255,255,255,.08) !important; border-radius: 10px;
  font-size: 15px !important; min-height: 56px;
}
body.phone-mode.phase-action .inline-skill-item.selected,
body.phone-mode.phase-cards .inline-skill-item.selected {
  background: rgba(255,210,0,.25) !important; border: 2px solid #ffd200;
}
body.phone-mode.phase-action .inline-skill-item .isi-avatar,
body.phone-mode.phase-cards .inline-skill-item .isi-avatar {
  width: 36px !important; height: 36px !important; font-size: 22px !important;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* 手机模式行动阶段：显示角色描述（短版）*/
body.phone-mode.phase-action .info-panel .role-card .role-desc,
body.phone-mode.phase-cards .info-panel .role-card .role-desc {
  display: block !important;
  font-size: 10px !important; color: #aaa !important;
  margin: 2px 0 0 !important; line-height: 1.4 !important;
  /* 截断长描述：最多 2 行 */
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
body.phone-mode.phase-action .info-panel .role-card,
body.phone-mode.phase-cards .info-panel .role-card {
  display: grid !important;
  grid-template-columns: 36px 1fr;
  align-items: center; gap: 10px;
  text-align: left;
}
body.phone-mode.phase-action .role-card .role-icon,
body.phone-mode.phase-cards .role-card .role-icon { grid-row: span 2; }

/* 手机模式讨论阶段：聊天面板正确 flex 布局，确保发送按钮可点 */
body.phone-mode.phase-discuss .chat-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  padding: 4px !important;
  /* 底部留 70px 空间避开右下 FAB 按钮 */
  padding-bottom: 70px !important;
}
body.phone-mode.phase-discuss .chat-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
body.phone-mode.phase-discuss .quick-replies {
  flex-shrink: 0 !important;
  max-height: 80px !important; overflow-y: auto;
}
body.phone-mode.phase-discuss .chat-input-area {
  flex-shrink: 0 !important;
  display: flex !important; gap: 6px;
  padding: 8px 4px !important;
  background: rgba(0,0,0,.6); border-radius: 12px;
}
body.phone-mode.phase-discuss .chat-input-area input {
  flex: 1 !important; min-width: 0 !important;
  font-size: 16px !important; padding: 12px !important;
}
body.phone-mode.phase-discuss #btn-send {
  flex-shrink: 0 !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  min-height: 44px;
}
body.phone-mode.phase-discuss #btn-voice {
  flex-shrink: 0 !important;
  padding: 12px !important;
  font-size: 18px !important;
  min-width: 44px;
}

/* 快速表情反应栏（讨论阶段顶部）*/
.quick-emoji-bar {
  display: flex; gap: 4px; padding: 4px;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow-x: auto; flex-shrink: 0;
}
.quick-emoji-bar button {
  flex: 1; min-width: 38px; padding: 6px 8px;
  background: rgba(255,255,255,.05); border: none;
  border-radius: 8px; font-size: 18px; cursor: pointer;
  transition: all .15s;
}
.quick-emoji-bar button:hover { background: rgba(255,210,0,.2); transform: scale(1.1); }
@keyframes toastSlide {
  from { transform: translateX(-50%) translateY(-30px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* ============ 画质提升：更高质感 ============ */
:root {
  --shadow-soft: 0 4px 20px rgba(0,0,0,.25);
  --shadow-glow: 0 0 24px rgba(255,210,0,.15);
  --transition-smooth: cubic-bezier(.4, 0, .2, 1);
}
/* 全局字体抗锯齿 + 渲染优化 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* 按钮：更立体 + 微动效 */
.btn {
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.15);
  transition: all .25s var(--transition-smooth);
  letter-spacing: .5px;
}
.btn:active:not(:disabled) { transform: scale(.95); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.btn-primary { background: linear-gradient(135deg,#f7971e 0%,#ffd200 50%,#ffeb3b 100%); }
.btn-success { background: linear-gradient(135deg,#27ae60 0%,#2ecc71 50%,#3ce06d 100%); }
.btn-danger  { background: linear-gradient(135deg,#c0392b 0%,#e74c3c 50%,#ee5d4d 100%); }
.btn-info    { background: linear-gradient(135deg,#2980b9 0%,#3498db 50%,#5dade2 100%); }

/* 卡片：玻璃质感增强 */
.card {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.08);
}

/* logo 字体增强 + 动态光晕 */
.logo {
  font-weight: 900; letter-spacing: 1px;
  filter: drop-shadow(0 2px 8px rgba(255,210,0,.4));
  animation: logoGlow 4s ease-in-out infinite;
}
@keyframes logoGlow {
  0%,100% { filter: drop-shadow(0 2px 8px rgba(255,210,0,.4)); }
  50%     { filter: drop-shadow(0 2px 18px rgba(255,210,0,.7)); }
}

/* 玩家头像：更好的圆形效果 + hover 抖动 */
.avatar {
  box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 -2px 4px rgba(0,0,0,.2);
  border: 2px solid rgba(255,255,255,.12);
  transition: all .2s var(--transition-smooth);
}
.player-item:hover .avatar {
  transform: scale(1.1) rotate(-3deg);
  border-color: rgba(255,210,0,.5);
}
.player-item.is-me .avatar {
  border-color: #ffd200;
  box-shadow: 0 0 12px rgba(255,210,0,.4);
}

/* 聊天消息：圆角更柔和 + 渐入动画 */
.msg {
  animation: msgFadeIn .25s ease-out;
  border-radius: 14px !important;
}
@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 角色卡：更精致 */
.role-card {
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.role-icon { filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }

/* 输入框：聚焦时金色光晕 */
.form-group input:focus, .form-group select:focus {
  box-shadow: 0 0 0 3px rgba(255,210,0,.15);
  border-color: #ffd200 !important;
}

/* 模态弹窗：进入动画 */
.modal-overlay:not(.hidden) .modal-box {
  animation: modalEnter .3s var(--transition-smooth);
}
@keyframes modalEnter {
  from { opacity: 0; transform: scale(.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 计时器：更醒目的等宽数字 */
.timer { font-family: 'Consolas', 'Menlo', monospace; font-variant-numeric: tabular-nums; }

/* 滚动条优化 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#ffd200,#f7971e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

/* ========== 打赏作者模态 ========== */
.tip-modal {
  background: linear-gradient(160deg, rgba(40,20,40,.95), rgba(20,10,30,.95)) !important;
  border: 1px solid rgba(255,107,157,.25) !important;
  box-shadow: 0 20px 60px rgba(255,107,157,.15), 0 0 40px rgba(255,107,157,.1) !important;
}
.tip-header { text-align: center; padding-bottom: 4px; }
.tip-hearts {
  font-size: 22px; letter-spacing: 8px;
  animation: heartFloat 2s ease-in-out infinite;
  margin-bottom: 6px;
}
.tip-hearts span { display: inline-block; }
.tip-hearts span:nth-child(1) { animation: heartBeat 1.4s ease-in-out infinite; }
.tip-hearts span:nth-child(2) { animation: heartBeat 1.4s ease-in-out .2s infinite; transform: scale(1.2); }
.tip-hearts span:nth-child(3) { animation: heartBeat 1.4s ease-in-out .4s infinite; }
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.2); }
  40%      { transform: scale(.95); }
  60%      { transform: scale(1.1); }
}
@keyframes heartFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.tip-amounts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 4px;
}
.tip-amount-btn {
  position: relative;
  padding: 16px 8px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 2px solid rgba(255,255,255,.1);
  color: #fff; cursor: pointer;
  font-family: inherit;
  transition: all .25s var(--transition-smooth);
  text-align: center;
}
.tip-amount-btn:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: #ff6b9d;
  box-shadow: 0 8px 24px rgba(255,107,157,.25);
  background: linear-gradient(160deg, rgba(255,107,157,.12), rgba(255,107,157,.04));
}
.tip-amount-btn.tip-active {
  border-color: #ffd200;
  background: linear-gradient(160deg, rgba(255,210,0,.15), rgba(255,107,157,.08));
  box-shadow: 0 0 24px rgba(255,210,0,.3);
}
.tip-amount-btn.tip-recommended {
  border-color: rgba(255,210,0,.4);
}
.tip-recommended-tag {
  position: absolute; top: -8px; right: 50%; transform: translateX(50%);
  background: linear-gradient(135deg, #ffd200, #f7971e);
  color: #2c1810; font-size: 10px; font-weight: bold;
  padding: 2px 8px; border-radius: 8px;
  box-shadow: 0 2px 6px rgba(255,210,0,.4);
}
.tip-emoji { font-size: 28px; margin-bottom: 4px; }
.tip-price {
  font-size: 18px; font-weight: bold;
  background: linear-gradient(135deg, #ff6b9d, #ffd200);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tip-label { font-size: 11px; color: #aaa; margin-top: 2px; }

.tip-qr-frame {
  display: inline-block; padding: 12px;
  background: linear-gradient(135deg, #1677ff, #0052d9);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(22,119,255,.3);
  position: relative;
}
.tip-qr-frame::before {
  content: '支付宝 Alipay';
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: #1677ff; color: #fff; font-size: 10px;
  padding: 2px 10px; border-radius: 6px; font-weight: bold;
  letter-spacing: 1px;
}


/* 结算页打赏提示进入动画 */
@keyframes nudgeIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}