/* 登录/大厅隐藏花活与快捷语 */
#screen-auth.active ~ .fun-menu,
body:has(#screen-auth.active) .fun-menu,
#screen-auth.active ~ .chat-menu,
body:has(#screen-auth.active) .chat-menu {
  display: none !important;
}
#screen-lobby.active ~ .fun-menu,
body:has(#screen-lobby.active) .fun-menu,
#screen-lobby.active ~ .chat-menu,
body:has(#screen-lobby.active) .chat-menu {
  display: none !important;
}

/* ---------- 斗地主式快捷语 / 表情 ---------- */
.chat-menu {
  position: fixed;
  left: 12px;
  bottom: 120px;
  z-index: 9998;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
}
body:has(#screen-table.active) .chat-menu:not([hidden]) {
  display: flex !important;
}
.chat-menu[hidden] { display: none !important; }

.chat-dock {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  background: rgba(10, 14, 30, .9);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.chat-dock-fast {
  min-width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  padding: 0 10px;
}
.chat-dock-fast:active { transform: scale(.94); }
.chat-toggle {
  border-radius: 999px;
  border: none;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  box-shadow: 0 6px 18px rgba(0,114,255,.35);
}
.chat-toggle.is-open {
  box-shadow: 0 0 0 2px rgba(240,197,109,.5), 0 6px 18px rgba(0,114,255,.35);
}
.chat-panel {
  width: min(320px, 88vw);
  max-height: min(62vh, 480px);
  overflow: hidden;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(10,14,30,.96);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.chat-panel.open { display: flex; }
.chat-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 900;
  color: #7ecbff;
}
.chat-panel-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.chat-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0,0,0,.3);
}
.chat-tab {
  border: none;
  border-radius: 9px;
  padding: 8px;
  font-size: 12px;
  font-weight: 800;
  background: transparent;
  color: rgba(255,255,255,.55);
  cursor: pointer;
}
.chat-tab.is-on {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: #fff;
}
.chat-pane {
  display: none;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: min(46vh, 360px);
  scrollbar-width: thin;
}
.chat-pane.is-on { display: flex; }
.chat-cat-label {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.4);
  letter-spacing: .06em;
}
.chat-phrase-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chat-phrase-btn {
  text-align: left;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: #eef;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}
.chat-phrase-btn:hover { background: rgba(0,198,255,.18); }
.chat-phrase-btn:active { transform: scale(.98); }
.chat-phrase-btn .cat {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  margin-right: 6px;
  background: rgba(0,198,255,.2);
  color: #9ad7ff;
  vertical-align: middle;
}
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.chat-emoji-btn {
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-emoji-btn:hover { background: rgba(255,255,255,.12); transform: scale(1.06); }
.chat-hint {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  text-align: center;
}

/* 头上/浮动聊天气泡 */
.chat-pop-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10002;
  overflow: hidden;
}
.chat-pop {
  position: absolute;
  max-width: min(280px, 70vw);
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(135deg, rgba(18,28,58,.96), rgba(12,40,60,.96));
  border: 1px solid rgba(0, 198, 255, .4);
  color: #f2f8ff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
  animation: chatPopIn .28s ease, chatPopOut .35s ease 2.6s forwards;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-pop.is-emoji {
  font-size: 42px;
  line-height: 1;
  padding: 12px 16px;
  background: rgba(12,16,32,.88);
  border-radius: 20px;
}
.chat-pop .who {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #7ecbff;
  margin-bottom: 4px;
}
.chat-pop.pos-bottom { left: 50%; bottom: 22%; transform: translateX(-50%); border-radius: 16px 16px 4px 16px; }
.chat-pop.pos-top { left: 50%; top: 14%; transform: translateX(-50%); }
.chat-pop.pos-left {
  left: 8%;
  top: 38%;
  animation: chatPopInL .28s ease, chatPopOut .35s ease 2.6s forwards;
}
.chat-pop.pos-right {
  right: 8%;
  top: 38%;
  left: auto;
  border-radius: 16px 16px 4px 16px;
  animation: chatPopInR .28s ease, chatPopOut .35s ease 2.6s forwards;
}
.chat-pop.pos-center { left: 50%; top: 42%; transform: translate(-50%, -50%); }
@keyframes chatPopIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.92); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes chatPopInL {
  from { opacity: 0; transform: translateX(-12px) scale(.92); }
  to { opacity: 1; transform: none; }
}
@keyframes chatPopInR {
  from { opacity: 0; transform: translateX(12px) scale(.92); }
  to { opacity: 1; transform: none; }
}
@keyframes chatPopOut {
  to { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 640px) {
  .chat-menu { bottom: 150px; left: 8px; }
  .chat-dock-fast { min-width: 36px; height: 36px; font-size: 12px; }
}

/* ---------- 花活弹幕 / 气泡 ---------- */
.flavor-toast-host {
  position: fixed;
  left: 50%;
  bottom: 148px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(560px, 94vw);
}
.flavor-bubble {
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(20,24,48,.94), rgba(12,40,36,.94));
  border: 1px solid rgba(0, 242, 254, .28);
  color: #f2f5ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 20px rgba(0,200,255,.12);
  animation: flavorIn .28s ease, flavorOut .35s ease 3.4s forwards;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.flavor-face {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  object-position: top center;
  flex: 0 0 auto;
  border: 2px solid rgba(240,197,109,.5);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.flavor-body { min-width: 0; }
.flavor-text { display: inline; }
.flavor-from {
  display: inline-block;
  font-size: 10px;
  opacity: .65;
  margin-right: 6px;
  font-weight: 700;
}
.flavor-from::after { content: '：'; }
.flavor-bubble.is-hurry {
  border-color: rgba(255, 120, 80, .55);
  background: linear-gradient(135deg, rgba(60,20,20,.94), rgba(40,20,40,.94));
  animation-duration: .22s;
}
.flavor-bubble.is-hu {
  border-color: rgba(240, 197, 109, .7);
  font-size: 15px;
}
.flavor-bubble .tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 6px;
  background: rgba(255,255,255,.12);
  color: var(--gold, #f0c56d);
  vertical-align: middle;
}
@keyframes flavorIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes flavorOut {
  to { opacity: 0; transform: translateY(-8px); }
}

/* 催促按钮 */
.btn-hurry {
  background: linear-gradient(135deg, #ff7043, #ff1744) !important;
  border: none !important;
  font-weight: 900 !important;
  animation: hurryPulse 1.6s ease infinite;
}
@keyframes hurryPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,80,60,.45); }
  50% { box-shadow: 0 0 0 8px rgba(255,80,60,0); }
}

/* 整蛊菜单 */
.fun-menu {
  position: fixed;
  right: 12px;
  bottom: 120px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
}
/* 仅牌桌页 + 密钥解锁后显示 */
body:has(#screen-table.active).fun-unlocked .fun-menu:not([hidden]),
html[data-fun="on"] body:has(#screen-table.active) .fun-menu:not([hidden]) {
  display: flex !important;
}
/* 未解锁：彻底藏 */
.fun-menu[hidden],
body:not(.fun-unlocked) .fun-menu {
  display: none !important;
}

/* 快发条 */
.fun-dock {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(10, 14, 30, .88);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.fun-dock[hidden],
.fun-dock.is-off,
.fun-dock.is-panel-open {
  display: none !important;
}
.fun-dock-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  background: rgba(255,255,255,.1);
}
.fun-dock-btn.is-hurry { background: linear-gradient(135deg, #ff7043, #ff1744); }
.fun-dock-btn.is-roast { background: linear-gradient(135deg, #ff9800, #f44336); }
.fun-dock-btn.is-prank { background: linear-gradient(135deg, #7f53ac, #647dee); }
.fun-dock-btn.is-cheer { background: linear-gradient(135deg, #11998e, #38ef7d); color: #073; }
.fun-dock-btn.is-more { background: rgba(255,255,255,.14); }
.fun-dock-btn:active { transform: scale(.94); }
.fun-dock-btn.is-cd,
.fun-panel button.is-cd {
  opacity: .45;
  pointer-events: none;
}
.fun-secret-block {
  margin-top: 4px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px dashed rgba(240,197,109,.28);
  display: grid;
  gap: 8px;
}
.fun-unlock-status {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.55);
}
body.fun-unlocked .fun-unlock-status,
html[data-fun="on"] .fun-unlock-status {
  color: #8dffa8;
}
.fun-secret-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fun-secret-block input[type="password"] {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
}
.flavor-toast-host {
  z-index: 10000;
}
.celebrate-host {
  z-index: 10001;
}
.fun-panel button {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fun-panel button:active {
  transform: scale(0.97);
  filter: brightness(1.15);
}
.fun-menu .fun-toggle {
  position: relative;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  background: linear-gradient(135deg, #7f53ac, #647dee);
  border: none;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(100,125,238,.4);
}
.fun-menu .fun-toggle.is-open {
  box-shadow: 0 0 0 2px rgba(240,197,109,.55), 0 8px 22px rgba(100,125,238,.4);
}
.fun-toggle-dot {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #69f0ae;
  box-shadow: 0 0 8px #69f0ae;
}
.fun-toggle-dot.is-flash {
  animation: funDotFlash .6s ease 2;
}
@keyframes funDotFlash {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: .5; }
}
.fun-panel {
  width: min(340px, 94vw);
  max-height: min(74vh, 580px);
  overflow-y: auto;
  padding: 12px;
  border-radius: 16px;
  background: rgba(10,14,30,.96);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  display: none;
  gap: 8px;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,197,109,.4) transparent;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.fun-panel.open { display: flex; }
.fun-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fun-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #f0c56d;
}
.fun-sync-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(79,172,254,.18);
  color: #9ad7ff;
  border: 1px solid rgba(79,172,254,.35);
}
.fun-sync-pill.is-ok {
  background: rgba(105,240,174,.2);
  color: #8dffa8;
  border-color: rgba(105,240,174,.45);
}
.fun-panel-close {
  width: 28px;
  height: 28px;
  border-radius: 8px !important;
  border: none !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer;
}
.fun-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #8dffa8;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
}
.fun-status-sep { opacity: .4; color: #fff; }
#fun-last-sent {
  color: rgba(255,255,255,.55);
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fun-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0,0,0,.3);
}
.fun-tab {
  border: none !important;
  border-radius: 9px !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: transparent !important;
  color: rgba(255,255,255,.55) !important;
}
.fun-tab.is-on {
  background: linear-gradient(135deg, #2b6cff, #00c2ff) !important;
  color: #fff !important;
}
.fun-tab-pane { display: none; flex-direction: column; gap: 8px; }
.fun-tab-pane.is-on { display: flex; }
.fun-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.fun-q {
  text-align: left !important;
  padding: 10px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.06) !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
}
.fun-q b { font-size: 13px; color: #fff; }
.fun-q i { font-style: normal; font-size: 10px; color: rgba(255,255,255,.45); font-weight: 600; }
.fun-q.btn-h { border-color: rgba(255,80,60,.4) !important; background: linear-gradient(135deg, rgba(255,80,60,.2), rgba(40,20,30,.5)) !important; }
.fun-q.btn-r { border-color: rgba(255,152,0,.4) !important; }
.fun-q.btn-p { border-color: rgba(127,83,172,.45) !important; }
.fun-q.btn-c { border-color: rgba(56,239,125,.4) !important; }
.fun-opt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 2px;
}
.fun-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  cursor: pointer;
}
.fun-check input { width: auto; margin: 0; accent-color: #4facfe; }
.fun-pace-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.7);
  padding: 4px 2px;
}
.fun-pace-row select {
  flex: 1;
  max-width: 58%;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
}
.fun-pace-hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(255,255,255,.38);
  font-weight: 600;
}
.fun-wide {
  width: 100%;
  margin-top: 2px;
}
.fun-svg-main {
  width: 100%;
  background: linear-gradient(135deg, rgba(127,83,172,.45), rgba(100,125,238,.45)) !important;
  border-color: rgba(160,180,255,.35) !important;
  font-weight: 900 !important;
  padding: 10px !important;
}
.fun-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}
.fun-history-list li {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.7);
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.25);
}
.fun-history-list .tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(240,197,109,.2);
  color: #f0c56d;
  margin-right: 4px;
  font-weight: 800;
}
.fun-cooldown {
  font-size: 11px;
  font-weight: 800;
  color: #ffab91;
  text-align: center;
  padding: 4px;
}
.fun-sec-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255,255,255,.42);
  margin: 4px 0 0;
  text-transform: none;
}
.fun-seat-row:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.fun-seat-chip {
  border-color: rgba(141,255,168,.35) !important;
}
.fun-target-block {
  margin: 4px 0 10px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}
.fun-target-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
}
.fun-target-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.fun-name-chip {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: #eef !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer;
}
.fun-name-chip.is-on {
  background: linear-gradient(135deg, #2b6cff, #00c2ff) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(0, 150, 255, .35);
}
.fun-custom-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.fun-custom-row input {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: 6px 8px;
  font-size: 12px;
  outline: none;
}
.fun-custom-row input:focus {
  border-color: #4facfe;
}
.fun-name-apply {
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: rgba(240,197,109,.25) !important;
  color: #f0c56d !important;
  cursor: pointer;
  white-space: nowrap;
}
.fun-target-now {
  font-size: 12px;
  font-weight: 800;
  color: #8dffa8;
}
.fun-panel .fun-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.fun-panel .fun-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.fun-panel .fun-grid-2 {
  grid-template-columns: 1fr 1fr;
}
.fun-panel .fun-grid-svg {
  grid-template-columns: 1fr 1fr 1fr;
}
.fun-panel button {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: #eef;
  border-radius: 10px;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.fun-panel .fun-grid-svg button {
  font-size: 11px;
  padding: 7px 4px;
}
.fun-panel button:hover { background: rgba(79,172,254,.2); }
.fun-panel .fun-meta {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  line-height: 1.4;
}
.flavor-bubble.is-cheer {
  border-color: rgba(105, 240, 174, .5);
  background: linear-gradient(135deg, rgba(12,40,32,.94), rgba(20,36,48,.94));
}
.flavor-bubble.is-bluff {
  border-color: rgba(186, 104, 200, .5);
}
.flavor-bubble.is-duo {
  border-color: rgba(240, 197, 109, .55);
}
.flavor-bubble.is-chips {
  border-color: rgba(255, 213, 79, .55);
}
.flavor-bubble.is-dingque {
  border-color: rgba(79, 172, 254, .45);
}

/* ---------- 庆祝层 ---------- */
.celebrate-host {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s ease;
}
.celebrate-host.is-on { opacity: 1; }

.cele-banner {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  text-align: center;
  padding: 16px 28px;
  border-radius: 20px;
  background: rgba(8,12,28,.82);
  border: 1px solid rgba(240,197,109,.45);
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
  min-width: min(420px, 90vw);
  animation: banIn .35s ease;
}
.cele-title {
  font-size: 28px;
  font-weight: 900;
  color: #ffe08a;
  letter-spacing: .08em;
}
.cele-sub {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  line-height: 1.4;
}
@keyframes banIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.cele-confetti {
  position: absolute;
  top: -12px;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  animation: confettiFall 2.6s linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .2; }
}

.cele-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: spark 0.9s ease-out forwards;
}
@keyframes spark {
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* 真人照片卡 */
.cele-photo {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 2;
}
.cele-photo.side-left { left: 30%; }
.cele-photo.side-right { left: 70%; }
.cele-photo-frame {
  width: min(200px, 42vw);
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid rgba(255, 230, 160, .85);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 30px rgba(240,197,109,.25);
  background: #1a1a2e;
  text-align: center;
}
.cele-photo-frame.is-duo,
.cele-photo.is-duo .cele-photo-frame {
  width: min(280px, 70vw);
}
.cele-photo-frame img {
  display: block;
  width: 100%;
  height: min(260px, 42vh);
  object-fit: cover;
  object-position: top center;
}
.cele-photo.is-duo .cele-photo-frame img {
  height: min(300px, 48vh);
  object-fit: contain;
  background: #111;
}
.cele-photo-name {
  padding: 8px;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  background: rgba(0,0,0,.55);
}
.cele-photo.is-bounce .cele-photo-frame {
  animation: photoBounce 0.55s ease-in-out infinite alternate;
}
.cele-photo.is-dance .cele-photo-frame {
  animation: photoDance 0.42s ease-in-out infinite alternate;
}
@keyframes photoBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-14px) scale(1.04); }
}
@keyframes photoDance {
  from { transform: rotate(-6deg) translateX(-8px); }
  to { transform: rotate(6deg) translateX(8px); }
}
.cele-confetti.cele-emoji {
  width: auto;
  height: auto;
  background: transparent !important;
  font-size: 22px;
}

.cele-ribbon {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 18px;
  opacity: .85;
  animation: ribbonGo 1.4s ease-in forwards;
}
@keyframes ribbonGo {
  from { transform: translateX(-20%) rotate(-8deg); }
  to { transform: translateX(20%) rotate(8deg); opacity: .3; }
}

.cele-orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  animation: spin 2.4s linear infinite;
}
.cele-orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 28px;
  transform:
    rotate(calc(var(--i) * 90deg))
    translateY(-70px)
    rotate(calc(var(--i) * -90deg));
}
@keyframes spin { to { transform: rotate(360deg); } }

.cele-stamp {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) rotate(-12deg) scale(3);
  font-size: 72px;
  font-weight: 900;
  color: rgba(220, 40, 40, .9);
  border: 8px solid rgba(220, 40, 40, .85);
  border-radius: 20px;
  padding: 8px 24px;
  animation: stampIn .5s cubic-bezier(.2,1.4,.3,1) forwards;
  text-shadow: 0 4px 0 rgba(0,0,0,.25);
}
@keyframes stampIn {
  from { transform: translate(-50%, -50%) rotate(-25deg) scale(6); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; }
}

.cele-bubble {
  position: absolute;
  bottom: -20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(120, 200, 255, .7);
  animation: bubbleUp linear forwards;
}
@keyframes bubbleUp {
  to { transform: translateY(-100vh); opacity: 0; }
}

.cele-pixel {
  position: absolute;
  width: 12px;
  height: 12px;
  animation: pixelPop .8s ease-out forwards;
}
@keyframes pixelPop {
  from { transform: scale(0); }
  50% { transform: scale(1.4); }
  to { transform: scale(0); opacity: 0; }
}

.cele-spot {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 40%, rgba(255,240,180,.35), transparent 28%),
    rgba(0,0,0,.35);
  animation: spotMove 2.8s ease-in-out infinite alternate;
}
@keyframes spotMove {
  from { filter: brightness(1); }
  to { filter: brightness(1.2); }
}

body.celebrate-shake {
  animation: bodyShake .55s linear;
}
@keyframes bodyShake {
  0%,100% { transform: translate(0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(6px, -2px); }
  60% { transform: translate(-4px, -3px); }
  80% { transform: translate(5px, 2px); }
}

/* ---------- SVG 花活舞台 ---------- */
.cele-svg-stage {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(340px, 88vw);
  z-index: 3;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.45));
  animation: svgStageIn .4s cubic-bezier(.2,1.2,.3,1) both;
}
.cele-svg-stage .svg-anim {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
@keyframes svgStageIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 龙腾 */
.svg-dragon .dg-body {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: dgDraw 1.4s ease forwards;
}
.svg-dragon .dg-head {
  transform-origin: 300px 80px;
  animation: dgBob 0.6s ease-in-out .8s infinite alternate;
}
.svg-dragon .dg-tiles {
  animation: dgFloat 1.2s ease-in-out infinite alternate;
}
@keyframes dgDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes dgBob {
  to { transform: translate(4px, -6px) scale(1.05); }
}
@keyframes dgFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* 沙漏 */
.svg-hourglass .hg-sand-top {
  transform-origin: 100px 70px;
  animation: hgDrain 2.2s ease-in forwards;
}
.svg-hourglass .hg-sand-bot {
  transform-origin: 100px 180px;
  animation: hgFill 2.2s ease-out forwards;
}
.svg-hourglass .hg-stream {
  animation: hgStream 0.4s linear infinite;
}
@keyframes hgDrain {
  to { transform: scaleY(0.15); opacity: .5; }
}
@keyframes hgFill {
  from { transform: scale(0.4); }
  to { transform: scale(1.6, 1.2); }
}
@keyframes hgStream {
  to { stroke-dashoffset: -20; }
}

/* 火焰 */
.svg-fire .f1 { animation: fireFlick 0.35s ease-in-out infinite alternate; transform-origin: 110px 230px; }
.svg-fire .f2 { animation: fireFlick 0.28s ease-in-out .05s infinite alternate; transform-origin: 110px 230px; }
.svg-fire .f3 { animation: fireFlick 0.22s ease-in-out .1s infinite alternate; transform-origin: 110px 230px; }
@keyframes fireFlick {
  from { transform: scaleY(1) scaleX(1); }
  to { transform: scaleY(1.12) scaleX(0.92) translateY(-4px); }
}

/* 爆炸 */
.svg-boom .boom-core {
  transform-origin: 140px 140px;
  animation: boomPop .55s cubic-bezier(.2,1.5,.3,1) both;
}
.svg-boom .ray {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: rayOut .55s ease-out forwards;
}
.svg-boom .ray.r1 { animation-delay: .03s; }
.svg-boom .ray.r2 { animation-delay: .06s; }
.svg-boom .ray.r3 { animation-delay: .09s; }
.svg-boom .ray.r4 { animation-delay: .12s; }
.svg-boom .ray.r5 { animation-delay: .05s; }
@keyframes boomPop {
  from { transform: scale(0); }
  60% { transform: scale(1.25); }
  to { transform: scale(1); }
}
@keyframes rayOut {
  to { stroke-dashoffset: 0; opacity: .85; }
}

/* 奖杯 */
.svg-trophy .tr-cup {
  transform-origin: 100px 160px;
  animation: trophyBounce .7s cubic-bezier(.2,1.4,.3,1) both;
}
.svg-trophy .tr-sparkles circle {
  animation: sparkle 0.9s ease-in-out infinite alternate;
}
.svg-trophy .tr-sparkles circle:nth-child(2) { animation-delay: .2s; }
.svg-trophy .tr-sparkles circle:nth-child(3) { animation-delay: .4s; }
@keyframes trophyBounce {
  from { transform: translateY(40px) scale(.6); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes sparkle {
  from { opacity: .3; }
  to { opacity: 1; }
}

/* 筹码 */
.svg-chips .chip {
  animation: chipToss 1.6s ease-in-out infinite alternate;
}
.svg-chips .chip.c1 { animation-delay: .08s; }
.svg-chips .chip.c2 { animation-delay: .16s; }
.svg-chips .chip.c3 { animation-delay: .24s; }
.svg-chips .chip.c4 { animation-delay: .12s; }
.svg-chips .chip.c5 { animation-delay: .2s; }
.svg-chips .chip.c6 { animation-delay: .28s; }
.svg-chips .chip.c7 { animation-delay: .18s; }
@keyframes chipToss {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-18px) rotate(10deg); }
}

/* 闪电 */
.svg-lightning .lt-bolt {
  transform-origin: 100px 140px;
  animation: boltZap .45s steps(2) infinite;
}
.svg-lightning .lt-flash {
  animation: flashPulse .45s ease-in-out infinite;
}
@keyframes boltZap {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .75; transform: scale(1.05) translateX(2px); }
}
@keyframes flashPulse {
  from { opacity: .15; }
  to { opacity: .55; }
}

/* 牌浪 */
.svg-wave .wv-tile {
  animation: waveBob 0.9s ease-in-out infinite alternate;
}
.svg-wave .wv-tile.t1 { animation-delay: .05s; }
.svg-wave .wv-tile.t2 { animation-delay: .1s; }
.svg-wave .wv-tile.t3 { animation-delay: .15s; }
.svg-wave .wv-tile.t4 { animation-delay: .2s; }
.svg-wave .wv-tile.t5 { animation-delay: .25s; }
.svg-wave .wv-tile.t6 { animation-delay: .3s; }
.svg-wave .wv-tile.t7 { animation-delay: .35s; }
.svg-wave .wv-tile.t8 { animation-delay: .4s; }
.svg-wave .wv-line {
  animation: waveLine 1.2s ease-in-out infinite alternate;
}
@keyframes waveBob {
  from { transform: translateY(0); }
  to { transform: translateY(-22px); }
}
@keyframes waveLine {
  from { stroke-opacity: .35; }
  to { stroke-opacity: .9; }
}

/* 双心 */
.svg-hearts .h1 {
  animation: heartBeat 0.7s ease-in-out infinite alternate;
  transform-origin: 40px 40px;
}
.svg-hearts .h2 {
  animation: heartBeat 0.7s ease-in-out .15s infinite alternate;
  transform-origin: 40px 40px;
}
.svg-hearts .heart-txt {
  animation: heartTxt 1.2s ease-in-out infinite alternate;
}
@keyframes heartBeat {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
@keyframes heartTxt {
  from { opacity: .7; }
  to { opacity: 1; }
}

/* 转桌 */
.svg-spin-table .st-rot {
  transform-origin: 140px 140px;
  animation: tableSpin 2.8s linear infinite;
}
@keyframes tableSpin {
  to { transform: rotate(360deg); }
}

/* 牌符雨 */
.svg-mj-rain .mr-drop {
  animation: mjFall 2.2s linear infinite;
}
.svg-mj-rain .d1 { animation-delay: .15s; }
.svg-mj-rain .d2 { animation-delay: .3s; }
.svg-mj-rain .d3 { animation-delay: .45s; }
.svg-mj-rain .d4 { animation-delay: .1s; }
.svg-mj-rain .d5 { animation-delay: .55s; }
.svg-mj-rain .d6 { animation-delay: .25s; }
.svg-mj-rain .d7 { animation-delay: .4s; }
.svg-mj-rain .d8 { animation-delay: .6s; }
.svg-mj-rain .d9 { animation-delay: .2s; }
.svg-mj-rain .d10 { animation-delay: .35s; }
.svg-mj-rain .d11 { animation-delay: .5s; }
@keyframes mjFall {
  0% { transform: translateY(-30px) rotate(-8deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(160px) rotate(12deg); opacity: .2; }
}

/* 皇冠 */
.svg-crown .cr-body {
  transform-origin: 120px 140px;
  animation: crownDrop .65s cubic-bezier(.2,1.5,.3,1) both;
}
.svg-crown .cr-j1, .svg-crown .cr-j2, .svg-crown .cr-j3 {
  animation: jewelBlink 0.8s ease-in-out infinite alternate;
}
.svg-crown .cr-j2 { animation-delay: .15s; }
.svg-crown .cr-j3 { animation-delay: .3s; }
@keyframes crownDrop {
  from { transform: translateY(-50px) scale(1.3); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes jewelBlink {
  from { filter: brightness(1); }
  to { filter: brightness(1.5); }
}

@media (max-width: 640px) {
  .flavor-toast-host { bottom: 168px; }
  .fun-menu { bottom: 150px; right: 8px; }
  .cele-title { font-size: 22px; }
  .fun-panel { max-height: 64vh; }
  .cele-svg-stage { width: min(300px, 92vw); top: 50%; }
}