/* ============================================================
   语音房（全屏覆盖层）
   ============================================================ */

.room-layer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--bg);
  animation: roomIn .3s var(--ease);
  display: flex; flex-direction: column;
}
@keyframes roomIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }

/* ===== 顶栏：TT 风格紧凑三栏 ===== */
.room-top {
  height: 56px; flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.room-top .rt-left, .room-top .rt-right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.room-top .rt-right { margin-left: auto; justify-content: flex-end; }
.room-top .rt-center {
  flex: 1; display: flex; justify-content: center; align-items: center; gap: 10px;
  min-width: 0;
}
.room-top .rt-center .rt-host-avatar {
  position: relative; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gold-soft); padding: 2px;
  box-shadow: 0 0 0 1px var(--gold);
}
.room-top .rt-center .rt-host-avatar .avatar { width: 100%; height: 100%; border-radius: 50%; }
.room-top .rt-center .rt-avatar-crown {
  position: absolute; top: -6px; right: -4px; width: 16px; height: 16px;
  color: #ffd700; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.room-top .rt-center .rt-room-name {
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 260px; min-width: 0;
}
.room-top .rt-center .rt-room-name .tag { margin-left: 6px; }
.room-top .rt-center .rt-host-name {
  font-size: 11px; color: var(--faint); margin-left: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}

/* 旧样式保留兼容（如果某处还在用） */
.room-top .rt-info { min-width: 0; }
.room-top .rt-name { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.room-top .rt-sub { font-size: 11.5px; color: var(--faint); margin-top: 1px; display: flex; align-items: center; gap: 8px; }
.room-top .rt-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.room-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr 340px; }

/* 左：房间信息 */
.room-aside {
  border-right: 1px solid var(--border); background: var(--surface);
  padding: 18px 16px; overflow-y: auto;
}
.ra-block { margin-bottom: 20px; }
.ra-block h5 {
  font-size: 12px; color: var(--faint); letter-spacing: .8px; font-weight: 600;
  margin-bottom: 10px; display: flex; align-items: center;
}
.ra-block h5 .ra-count { margin-left: auto; color: var(--faint); font-weight: 400; }
.ra-notice {
  font-size: 12px; color: var(--text-2); line-height: 1.7;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 11px 12px;
}
.ra-mode-card {
  border-radius: 12px; padding: 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 11px;
}
.ra-mode-card .mode-emblem {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.ra-mode-card .rm-name { font-size: 13px; font-weight: 600; }
.ra-mode-card .rm-sub { font-size: 11px; color: var(--faint); margin-top: 2px; }

.member-mini { display: flex; align-items: center; gap: 9px; padding: 6px 7px; border-radius: 9px; cursor: pointer; }
.member-mini:hover { background: var(--surface-3); }
.member-mini .mm-name { font-size: 12.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-mini .mic-state { color: var(--faint); flex: none; }
.member-mini .mic-state.muted { color: var(--danger); }
.member-mini .mic-state.speaking { color: var(--success); }

/* 中：麦位舞台 */
.room-stage {
  display: flex; flex-direction: column;
  padding: 30px 34px 22px; overflow-y: auto;
  background:
    radial-gradient(900px 400px at 50% -120px, var(--accent-softer), transparent 70%),
    var(--bg);
}
.stage-meta { display: flex; justify-content: center; margin-bottom: 26px; }
.stage-meta-inner {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; padding: 8px 20px; box-shadow: var(--shadow-xs);
  font-size: 12.5px; color: var(--muted);
}
.stage-meta-inner .sm-sep { width: 1px; height: 12px; background: var(--border); }
.stage-meta-inner b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* 麦位 */
.seats {
  display: grid; gap: 26px 22px;
  margin: auto 0;
  width: 100%; max-width: 720px; margin-inline: auto;
}
.seats.game5 { grid-template-columns: repeat(5, 1fr); }
.seats.chat8 { grid-template-columns: repeat(4, 1fr); gap: 30px 18px; }
.seat-col { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; width: 100%; min-width: 0; }
.seat {
  position: relative;
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 2px solid var(--border);
  transition: border-color .18s, box-shadow .18s, transform .15s;
}
.seat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.seat.empty { background: var(--surface-2); border-style: dashed; color: var(--faint); }
.seat.empty:hover { border-color: var(--accent); color: var(--accent); }
.seat.locked { opacity: .55; }
.seat .avatar { width: 72px; height: 72px; font-size: 27px; }
.seat .seat-crown {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  color: var(--gold); filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.seat .seat-role {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); white-space: nowrap;
}
.seat .seat-role.host { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft); }
.seat .seat-mic {
  position: absolute; right: -4px; bottom: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--success);
}
.seat .seat-mic.muted { color: var(--danger); }
.seat .seat-mic .icon { width: 14px; height: 14px; }
.seat.speaking { border-color: var(--success); box-shadow: 0 0 0 5px var(--success-soft); }
.seat.speaking::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1.5px solid var(--success); opacity: 0;
  animation: speakRing 1.4s var(--ease) infinite;
}
@keyframes speakRing { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.12); opacity: 0; } }

/* ===== 房主 C 位：金色发光圈 + 放大 ===== */
.seat.is-host {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px var(--gold-soft),
    0 0 20px rgba(214, 176, 107, .35);
  transform: scale(1.12);
}
.seat.is-host .avatar { width: 80px; height: 80px; }
.seat.is-host::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px dashed var(--gold); opacity: .55;
  animation: hostSpin 12s linear infinite;
}
@keyframes hostSpin { to { transform: rotate(360deg); } }

/* speaking 房主：金色 + 绿色叠加 */
.seat.is-host.speaking {
  border-color: var(--gold);
  box-shadow:
    0 0 0 3px var(--gold-soft),
    0 0 0 6px var(--success-soft),
    0 0 24px rgba(214, 176, 107, .45);
}
.seat.is-host.speaking::before { border-color: var(--success); }

.seat.is-host .seat-crown {
  top: -16px;
  color: #ffd700;
  filter: drop-shadow(0 2px 6px rgba(255,215,0,.5));
  animation: crownBob 2.4s ease-in-out infinite;
}
@keyframes crownBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }
.seat .gift-pop {
  position: absolute; top: -8px; right: -10px;
  animation: giftPop 1.1s var(--ease-spring);
}
@keyframes giftPop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.seat-name {
  font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
  width: 100%; min-width: 0;
}
.seat-pos {
  font-size: 10.5px; color: var(--faint);
  display: flex; align-items: center; gap: 3px;
}
.seat-pos .pos-tag { width: 16px; height: 16px; border-radius: 4px; }
.seat-pos .pos-tag .icon { width: 10px; height: 10px; }

/* 位置徽章（贴头像右下角） */
.seat-pos-mini {
  position: absolute; right: -4px; bottom: -4px;
  background: var(--elevated); border: 1.5px solid var(--border);
  border-radius: 5px; display: grid; place-items: center;
  width: 18px; height: 18px; padding: 2px; z-index: 2;
}
.seat-pos-mini .pos-tag { width: 12px; height: 12px; border-radius: 3px; }
.seat-pos-mini .pos-tag .icon { width: 8px; height: 8px; }

/* 平台ID（小字号，位置标签行替代） */
.seat-pid {
  font-size: 10px; color: var(--faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* 游戏房间昵称区：大游戏名 + 小平台名 + 复制按钮 */
.seat-name-block {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 100%; line-height: 1.2;
}
.seat-name-block.chat {
  flex-direction: row; gap: 5px; justify-content: center;
  font-size: 11px;
}
.seat-name-block.chat .seat-name {
  font-size: 11px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; min-width: 0;
}
.seat-name-block.chat .seat-name-rp {
  margin-top: 0; font-size: 10px;
}
.seat-name-game {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  max-width: 100%;
}
.seat-name-game .sng-tx {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 自己的游戏 ID 可点击直接修改（房间内改，无需去个人资料） */
.seat-name-game .sng-tx.sng-editable {
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  opacity: .92;
}
.seat-name-game .sng-tx.sng-editable:hover { opacity: 1; }
.seat-name-plat {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--faint);
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.seat-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border: none;
  background: transparent; color: var(--hex);
  border-radius: 3px; cursor: pointer; flex-shrink: 0;
  opacity: .85; transition: opacity .15s, color .15s, background .15s, box-shadow .15s;
}
.seat-copy:hover { opacity: 1; color: var(--hex); background: rgba(0, 229, 255, .12); box-shadow: 0 0 8px rgba(0, 229, 255, .35); }
.seat-copy:active { transform: scale(.92); }
.seat-name-rp {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--gold); letter-spacing: .02em; margin-top: 1px;
}
.seat-name-rp .icon { width: 11px; height: 11px; }

/* 排麦队列 */
.queue-strip {
  margin-top: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
}
.queue-strip .qs-label { font-size: 12px; color: var(--faint); flex: none; }
.queue-strip .qs-list { display: flex; gap: 8px; flex: 1; overflow-x: auto; }
.queue-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-3); border-radius: 99px; padding: 4px 11px 4px 5px;
  font-size: 11.5px; white-space: nowrap;
}
.queue-chip .avatar.sm { --h: 22px; font-size: 10px; }
.queue-chip.can-bring { cursor: pointer; transition: background .15s; }
.queue-chip.can-bring:hover { background: var(--accent-soft); color: var(--accent); }

/* 底部：自己的语音控制 */
.room-controls {
  flex: none; height: 78px;
  background: var(--surface); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 24px;
}
.ctrl-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; color: var(--muted);
  width: 64px; padding: 6px 0; border-radius: 12px;
  transition: background-color .15s, color .15s;
}
.ctrl-btn:hover { background: var(--surface-3); color: var(--text); }
.ctrl-btn .ctrl-circle {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); transition: all .18s;
}
.ctrl-btn .icon { width: 21px; height: 21px; }
.ctrl-btn.on .ctrl-circle { background: var(--accent-soft); color: var(--accent); }
.ctrl-btn.on { color: var(--accent); }
.ctrl-btn.danger .ctrl-circle { background: var(--danger-soft); color: var(--danger); }
.ctrl-btn.leave { }
.ctrl-btn.leave .ctrl-circle { background: var(--danger); color: #fff; width: 52px; height: 52px; }
.ctrl-btn.leave .icon { width: 24px; height: 24px; }
.ctrl-btn.leave:hover .ctrl-circle { background: #9c4141; }

/* 右：聊天 */
.room-chat {
  border-left: 1px solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
}
.rc-tabs { display: flex; border-bottom: 1px solid var(--border); flex: none; }
.rc-tab {
  flex: 1; height: 44px; font-size: 13px; color: var(--muted);
  position: relative; font-weight: 500;
}
.rc-tab.active { color: var(--accent); font-weight: 600; }
.rc-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 20%; right: 20%; height: 2px; background: var(--accent); border-radius: 2px; }

.chat-stream { flex: 1; overflow-y: auto; padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; }
.rm-msg { font-size: 12.5px; line-height: 1.55; word-break: break-word; }
.rm-msg .rm-who { font-weight: 600; cursor: pointer; }
.rm-msg .rm-who.host { color: var(--gold); }
.rm-msg .rm-who.admin { color: var(--info); }
.rm-msg .rm-who.me { color: var(--accent); }
.rm-msg .rm-text { color: var(--text-2); }
.rm-msg.sys { color: var(--faint); font-size: 11.5px; text-align: center; }
.rm-gift-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-2); font-weight: 500;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 11px;
  animation: fadeUp .3s var(--ease);
}
.rm-gift-line .rg-glyph { display: inline-grid; place-items: center; color: var(--gold); }
.rm-gift-line .rg-glyph.be { color: #7fb2e0; }
.rm-gift-line .rg-text b { color: var(--text); font-weight: 700; }
.rm-gift-line .rg-name { color: var(--text-3); }
.rm-gift-line .rg-qty { color: var(--gold); font-weight: 800; }
.rm-gift-line .rg-cost { margin-left: auto; font-size: 10.5px; color: var(--faint); font-weight: 500; white-space: nowrap; }
.rm-gift-line .rg-cost.be { color: #7fb2e0; }
.rm-gift-line.is-big {
  border-color: rgba(212,175,99,.55);
  background: linear-gradient(135deg, rgba(212,175,99,.14), rgba(212,175,99,.05));
  box-shadow: 0 6px 20px -12px rgba(212,175,99,.6);
}
.rm-gift-line.is-big .rg-glyph { filter: drop-shadow(0 0 8px rgba(243,212,138,.55)); }

.chat-input-bar { flex: none; border-top: 1px solid var(--border); padding: 10px 12px; }
.chat-input-row { display: flex; gap: 8px; align-items: center; }
.chat-input-row .input { flex: 1; height: 36px; }
.gift-open-btn {
  width: 38px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--gold-soft); color: var(--gold); flex: none;
}
.gift-open-btn:hover { background: rgba(154,123,70,.2); }
.chat-quick { display: flex; gap: 6px; margin-top: 8px; }
.quick-phrase {
  font-size: 11px; color: var(--muted); background: var(--surface-3);
  border-radius: 99px; padding: 3px 10px; cursor: pointer;
}
.quick-phrase:hover { background: var(--accent-soft); color: var(--accent); }

/* 成员 tab 列表 */
.member-tab-list { padding: 10px 12px; }
.member-tab-list .list-row { padding: 8px; }

/* ============================================================
   点头像 · 抖音式用户卡片（底部弹出，主操作=送礼物）
   ============================================================ */
.uc-scrim {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s var(--ease);
}
.uc-scrim.open { opacity: 1; }
.uc-sheet {
  width: 100%; max-width: 440px;
  background: var(--elevated);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 44px rgba(0,0,0,.55);
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(104%);
  transition: transform .3s var(--ease-spring, cubic-bezier(.22,1,.36,1));
}
.uc-scrim.open .uc-sheet { transform: none; }

.uc-head { display: flex; align-items: center; gap: 13px; }
.uc-avatar { position: relative; flex: none; }
.uc-avatar .avatar { width: 64px; height: 64px; font-size: 24px; --h: 64px; }
.uc-crown {
  position: absolute; top: -5px; right: -6px;
  color: var(--gold); filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.uc-crown .icon { width: 16px; height: 16px; }
.uc-meta { flex: 1; min-width: 0; }
.uc-name { display: flex; align-items: center; gap: 7px; }
.uc-name-tx { font-size: 16.5px; font-weight: 700; color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-tag-host {
  flex: none; font-size: 9.5px; font-weight: 700; line-height: 1.5; padding: 0 6px;
  border-radius: 5px; color: #3a2c08;
  background: linear-gradient(135deg, #ecd39a, #c8a45a);
}
.uc-sub { margin-top: 3px; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-stat { margin-top: 5px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #ff8ab3; }
.uc-stat-ic { display: inline-flex; }
.uc-stat-ic .icon { width: 12px; height: 12px; }
.uc-close { flex: none; color: var(--muted); }

.uc-primary {
  width: 100%; margin-top: 16px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15.5px; font-weight: 700; letter-spacing: .02em;
  transition: transform .15s var(--ease), filter .15s;
}
.uc-primary:active { transform: scale(.985); }
.uc-pri-ic { display: inline-flex; }
.uc-pri-ic .icon { width: 21px; height: 21px; }
.uc-gift {
  color: #fff;
  background: linear-gradient(135deg, #ff6b9d, #ff3366);
  box-shadow: 0 8px 22px -8px rgba(255,51,102,.7);
}
.uc-gift:hover { filter: brightness(1.07); }
.uc-sheet .uc-primary:not(.uc-gift) {
  color: var(--danger); background: var(--surface-2);
  border: 1px solid var(--border-strong);
}
.uc-sheet .uc-primary:not(.uc-gift):hover { background: var(--surface-3); }

.uc-grid {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 4px;
}
.uc-act {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 9px 4px; border-radius: 12px; color: var(--text-3);
  transition: background .15s, color .15s;
}
.uc-act:hover { background: var(--surface-2); color: var(--text); }
.uc-act-ic {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-2);
  transition: background .15s, color .15s;
}
.uc-act:hover .uc-act-ic { background: var(--accent-soft); color: var(--accent); }
.uc-act-ic .icon { width: 19px; height: 19px; }
.uc-act-tx { font-size: 11px; line-height: 1.2; white-space: nowrap; }
.uc-act.danger { color: var(--danger); }
.uc-act.danger .uc-act-ic { color: var(--danger); }
.uc-act.danger:hover .uc-act-ic { background: rgba(255,80,80,.14); color: var(--danger); }

@media (min-width: 769px) {
  .uc-sheet { border-radius: 20px 20px 0 0; margin-bottom: 0; }
}
@media (max-width: 768px) {
  .uc-sheet { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
  .uc-avatar .avatar { width: 58px; height: 58px; --h: 58px; font-size: 21px; }
  .uc-name-tx { font-size: 15.5px; }
  .uc-primary { height: 44px; font-size: 15px; }
}

/* ============================================================
   礼物面板（右侧滑出，直播式）
   ============================================================ */
.gift-drawer {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 220px;
  background: linear-gradient(180deg, #1a1a24 0%, #12121a 100%);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
  transform: translateY(105%); transition: transform .28s var(--ease);
  display: flex; flex-direction: column; z-index: 5;
  overflow: hidden;
}
.gift-drawer.open { transform: none; }

.gift-mask {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  z-index: 4;
}
.gift-mask.open { opacity: 1; pointer-events: auto; }

.gd-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; flex: none; }
.gd-bal-line { flex: 1; display: flex; align-items: center; gap: 6px; }
.gd-bal { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gd-bal.rp { color: #f0c060; }
.gd-recharge {
  flex: none; font-size: 11px; padding: 4px 14px; border-radius: 99px;
  border: 1px solid rgba(240,192,96,.4); color: #f0c060; background: rgba(240,192,96,.1);
}
.gd-recharge:hover { filter: brightness(1.15); }
.gd-x { flex: none; }

.gd-row {
  flex: 1; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 12px 8px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gd-row::-webkit-scrollbar { height: 0; }

.gd-c {
  --gd-color: #8a8a9a;
  flex: none; width: 72px; border-radius: 12px; padding: 6px 4px 5px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer;
  background: var(--surface-2); border: 2px solid transparent;
  transition: border-color .15s, transform .15s; scroll-snap-align: start;
  overflow: hidden; position: relative;
}
.gd-c:hover { transform: translateY(-2px); }
.gd-c.r1 { --gd-color: #b0b0c0; }
.gd-c.r2 { --gd-color: #62d38f; border-color: rgba(62,163,95,.3); }
.gd-c.r3 { --gd-color: #6cb0ff; border-color: rgba(74,134,232,.35); }
.gd-c.r4 { --gd-color: #c798ff; border-color: rgba(176,102,255,.4); }
.gd-c.r5 { --gd-color: #ffd84d; border-color: rgba(255,200,61,.5); }

.gd-c.on { border-color: var(--gold); background: rgba(240,192,96,.08); }
.gd-c.r2.on { border-color: #4ac080; background: rgba(62,211,143,.08); }
.gd-c.r3.on { border-color: #5a9dff; background: rgba(108,176,255,.08); }
.gd-c.r4.on { border-color: #b982ff; background: rgba(199,152,255,.08); }
.gd-c.r5.on { border-color: #ffe066; background: rgba(255,216,77,.08); }

.gd-ic {
  width: 48px; height: 48px; margin: 0 auto 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden; position: relative;
}
.gd-ic .gd-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .2s;
}
.gd-c:hover .gd-ic .gd-img { transform: scale(1.06); }
.gd-ic svg { width: 32px; height: 32px; display: block; }

.gd-nm {
  font-size: 10.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; color: var(--text);
}
.gd-pr {
  font-size: 9.5px; font-weight: 700; line-height: 1.2; margin-top: 1px;
  color: var(--gd-color); white-space: nowrap;
}
.gd-unit { font-style: normal; font-weight: 400; margin-left: 1px; font-size: 8px; opacity: .8; }
/* 胜点不足：图标保持彩色，仅价格标红提示 */
.gd-pr.lack { color: var(--danger); }

.gd-bar {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 10px; border-top: 1px solid var(--border);
}
.gd-tgt { display: flex; align-items: center; gap: 6px; flex: none; }
.gd-tgt-ava { position: relative; }
.gd-tgt-ava .avatar { width: 28px; height: 28px; border-radius: 50%; }
.gd-tgt-crown { position: absolute; top: -4px; right: -4px; color: var(--gold); }
.gd-tgt-crown .icon { width: 11px; height: 11px; }
.gd-tgt-nm { font-size: 11px; color: var(--text-2); white-space: nowrap; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }

.gd-qty { display: flex; gap: 5px; flex: 1; justify-content: center; }
.gd-q {
  font-size: 11px; padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--border-strong); color: var(--muted); white-space: nowrap;
}
.gd-q.on { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); font-weight: 700; }

.gd-send {
  flex: none; min-width: 88px; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 7px 18px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #f6d97a, #e0a93c); color: #2a2008;
  border: none; border-radius: 99px; line-height: 1.2;
}
.gd-send:hover { filter: brightness(1.1); }
.gds-amt { font-size: 11px; opacity: .8; }
.gd-send.disabled { opacity: .5; pointer-events: none; }

/* 连击角标 */
.gift-combo { position: absolute; right: 18px; bottom: 22%; z-index: 30; pointer-events: none; }
.gc-badge {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 9px;
  border-radius: 99px; background: linear-gradient(135deg, rgba(30,23,12,.94), rgba(46,34,14,.94));
  border: 1px solid rgba(212,175,99,.55);
  box-shadow: 0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
.gc-glyph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); background: var(--gold-soft); flex: none; }
.gc-glyph .icon { width: 24px; height: 24px; }
.gc-badge.be .gc-glyph { color: #7fb2e0; background: rgba(127,178,224,.14); }
.gc-x { color: #f3d48a; font-weight: 800; font-size: 15px; letter-spacing: 1px; line-height: 1.1; }
.gc-q { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.gc-pop { animation: gcPop .28s var(--ease); }
@keyframes gcPop {
  0% { transform: scale(.78); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ============================================================
   全屏大礼特效（TT 风格：横幅 + 专属场景 + 质感卡片）
   ============================================================ */
.gift-fx { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.gift-fx.dark-mask { background: radial-gradient(480px 480px at 50% 44%, rgba(24,18,10,.60), rgba(10,8,6,.22) 60%, rgba(6,5,4,.60) 100%); }
.gift-fx.fx-on { animation: fxBg 3.6s ease forwards; }
@keyframes fxBg {
  0% { opacity: 0; } 10% { opacity: 1; } 82% { opacity: 1; }
  100% { opacity: 0; }
}

/* 开场闪光 */
.fx-flash {
  position: absolute; inset: 0; z-index: 6;
  background: radial-gradient(60% 60% at 50% 44%, rgba(255,240,200,.9), rgba(255,220,150,.22) 45%, transparent 75%);
  animation: fxFlash .55s ease-out both;
}
@keyframes fxFlash { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }

/* 专属主题场景层 */
.fx-scene { position: absolute; inset: 0; z-index: 1; overflow: hidden; }

/* 旋转光束 */
.fx-rays {
  position: absolute; inset: -25%; z-index: 1;
  background: repeating-conic-gradient(from 0deg,
    rgba(243,212,138,0) 0deg 11deg, rgba(243,212,138,.10) 11deg 13deg, rgba(243,212,138,0) 13deg 30deg);
  opacity: 0;
}
.fx-on .fx-rays { opacity: .5; animation: fxFade .5s ease both, fxSpin 18s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
@keyframes fxFade { from { opacity: 0; } to { opacity: .5; } }

/* 地面光环 */
.fx-halo {
  position: absolute; left: 50%; top: 66%; width: 300px; height: 70px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(243,212,138,.40), rgba(243,212,138,.10) 55%, transparent 75%);
  filter: blur(2px); z-index: 1;
}
.fx-on .fx-halo { animation: fxHalo 3.6s ease both; }
@keyframes fxHalo {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4); }
  25% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  78% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.15); }
}

/* 顶部金色横幅 */
.fx-banner {
  position: absolute; top: 22px; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  animation: fxBanner 3.6s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes fxBanner {
  0% { opacity: 0; transform: translateY(-46px); }
  12% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}
.fxb-main {
  display: inline-flex; align-items: center; gap: 7px; max-width: 86%;
  padding: 7px 20px; border-radius: 99px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; color: #f7e7bd;
  background: linear-gradient(180deg, rgba(128,88,24,.95), rgba(64,42,12,.95));
  border: 1px solid rgba(243,212,138,.75);
  box-shadow: 0 8px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,190,.35);
}
.fxb-crown { color: #ffd873; display: inline-flex; filter: drop-shadow(0 1px 4px rgba(255,190,60,.6)); }
.fxb-crown .icon { width: 15px; height: 15px; }
.fxb-main b { color: #ffe9b8; font-weight: 700; }
.fxb-main .fxb-gift { color: #ffd873; text-shadow: 0 0 12px rgba(255,200,90,.7); }
.fxb-ribbon {
  width: 56px; height: 2px; flex: none;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.85));
}
.fxb-ribbon.fxb-r { background: linear-gradient(90deg, rgba(243,212,138,.85), transparent); }

/* 中央卡片 */
.fx-card {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
  gap: 8px; text-align: center; padding: 20px; z-index: 2;
}
.fx-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; letter-spacing: 3px; color: #e8cd8f; text-transform: uppercase;
}
.fx-glyph-wrap { position: relative; }
.fx-glyph {
  width: 160px; height: 160px; border-radius: 24px;
  overflow: hidden; position: relative;
  border: 2px solid rgba(228,198,128,.6);
  box-shadow: 0 0 80px -8px rgba(212,175,99,.7), inset 0 1px 0 rgba(255,255,255,.2);
  background: linear-gradient(150deg, rgba(20,16,8,.92), rgba(8,6,4,.85));
  animation: fxGlow 2.2s ease-in-out infinite;
}
.fx-glyph::before {
  content: ""; position: absolute; top: -40%; left: -60%; width: 55%; height: 180%; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg); pointer-events: none; animation: fxSheen 2.6s ease-in-out infinite;
}
@keyframes fxSheen { 0%, 35% { left: -60%; } 70%, 100% { left: 130%; } }
@keyframes fxGlow {
  0%, 100% { box-shadow: 0 0 70px -10px rgba(212,175,99,.6), inset 0 1px 0 rgba(255,255,255,.2); }
  50% { box-shadow: 0 0 104px -4px rgba(243,212,138,.9), inset 0 1px 0 rgba(255,255,255,.28); }
}
.fx-glyph .gd-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.09); }
.fx-glyph .icon { width: 78px; height: 78px; }
.fx-glyph svg { width: 78px; height: 78px; display: block; margin: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.fx-title {
  position: relative; overflow: hidden; padding: 0 16px;
  font-size: 26px; font-weight: 800; letter-spacing: 6px; color: #f5dc9f;
  text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 30px rgba(212,175,99,.35);
}
.fx-title::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: fxTitleShine 2.8s ease-in-out .5s infinite;
}
@keyframes fxTitleShine { 0% { left: -50%; } 55%, 100% { left: 120%; } }
.fx-sub { color: rgba(255,255,255,.88); font-size: 14px; }
.fx-sub b { color: #ffe9b8; }
.fx-qty {
  margin-top: 2px; font-size: 18px; font-weight: 800; color: #f3d48a; letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(255,210,120,.6);
  animation: fxQtyPop .5s cubic-bezier(.3,1.5,.5,1) .25s both, fxQtyPulse 1.4s ease-in-out .9s infinite;
}
@keyframes fxQtyPop { from { transform: scale(0); } }
@keyframes fxQtyPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
/* 火箭/飞机从底部穿越标题区时，文字与角标延迟淡入，避免与飞行物重叠 */
.fx-rocket .fx-tag, .fx-plane .fx-tag,
.fx-rocket .fx-title, .fx-plane .fx-title,
.fx-rocket .fx-sub, .fx-plane .fx-sub { opacity: 0; animation: fxTextLate .45s ease both; }
.fx-rocket .fx-qty, .fx-plane .fx-qty {
  opacity: 0;
  animation: fxQtyLate .5s cubic-bezier(.3,1.5,.5,1) both, fxQtyPulse 1.4s ease-in-out infinite;
}
.fx-rocket .fx-tag { animation-delay: 1.3s; }
.fx-rocket .fx-title { animation-delay: 1.35s; }
.fx-rocket .fx-sub { animation-delay: 1.45s; }
.fx-rocket .fx-qty { animation-delay: 1.55s, 2.2s; }
.fx-plane .fx-tag { animation-delay: 1.2s; }
.fx-plane .fx-title { animation-delay: 1.25s; }
.fx-plane .fx-sub { animation-delay: 1.35s; }
.fx-plane .fx-qty { animation-delay: 1.45s, 2.1s; }
@keyframes fxTextLate { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fxQtyLate { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.fx-on .fx-card { animation: fxCenter 3.6s ease both; }
@keyframes fxCenter {
  0% { opacity: 0; transform: scale(.86) translateY(18px); }
  14% { opacity: 1; transform: scale(1) translateY(0); }
  84% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.03); }
}

/* 粒子（位置由 JS 内联，颜色随主题） */
.fx-particles { position: absolute; inset: 0; z-index: 3; }
.fx-particles i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--fx-c1, #ffeec2), var(--fx-c2, #d4af63));
  box-shadow: 0 0 8px var(--fx-glow, rgba(243,212,138,.8)); opacity: 0;
}
.fx-on .fx-particles i { animation: fxFloat var(--pd, 2.6s) ease-out both; }
@keyframes fxFloat {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx, 0), -260px) scale(1); }
}

/* 主题粒子配色 */
.fx-dragon { --fx-c1: #ffc08a; --fx-c2: #ff5a2a; --fx-glow: rgba(255,110,50,.8); }
.fx-baron  { --fx-c1: #d3b3ff; --fx-c2: #7a3dff; --fx-glow: rgba(150,90,255,.8); }
.fx-car    { --fx-c1: #ffe0b0; --fx-c2: #ff4d5e; --fx-glow: rgba(255,90,110,.75); }
.fx-yacht  { --fx-c1: #cfeeff; --fx-c2: #3d9bff; --fx-glow: rgba(90,170,255,.75); }
.fx-plane  { --fx-c1: #ffffff; --fx-c2: #8fd0ff; --fx-glow: rgba(160,215,255,.8); }
.fx-penta  { --fx-c1: #fff6d8; --fx-c2: #ffcf6e; --fx-glow: rgba(255,220,120,.9); }
.fx-rocket { --fx-c1: #ffe2b0; --fx-c2: #ff6a2a; --fx-glow: rgba(255,130,60,.85); }
.fx-castle { --fx-c1: #fff6d8; --fx-c2: #e0b85a; --fx-glow: rgba(243,212,138,.85); }
.fx-fire .fx-particles i:nth-child(5n+1) { background: radial-gradient(circle at 35% 35%, #ffe6b0, #ff8a3d); }
.fx-fire .fx-particles i:nth-child(5n+2) { background: radial-gradient(circle at 35% 35%, #bfe6ff, #3d8bff); }
.fx-fire .fx-particles i:nth-child(5n+3) { background: radial-gradient(circle at 35% 35%, #ffc6e8, #e0509e); }
.fx-fire .fx-particles i:nth-child(5n+4) { background: radial-gradient(circle at 35% 35%, #d8c4ff, #8a5cff); }

/* ========== 专属主题：超级火箭（星空 + 尾焰升空） ========== */
.fx-rocket .fx-glyph-wrap { animation: fxRocket 3.6s cubic-bezier(.55,0,.7,.3) both; }
@keyframes fxRocket {
  0% { transform: translateY(260px) scale(.7); opacity: 0; }
  12% { opacity: 1; transform: translateY(150px) scale(.95); }
  55% { transform: translateY(0) scale(1); opacity: 1; }
  78% { transform: translateY(-50px) scale(1.04); opacity: 1; }
  92% { transform: translateY(-320px) scale(.85); opacity: 0; }
  100% { opacity: 0; }
}
.fx-flame {
  position: absolute; left: 50%; top: 94%; width: 44px; height: 80px; z-index: 0;
  background: radial-gradient(ellipse at 50% 16%, #fff3c4 0%, #ffb13d 38%, #ff5a1f 68%, rgba(255,60,10,0) 100%);
  border-radius: 50% 50% 50% 50% / 26% 26% 74% 74%;
  filter: blur(1px); pointer-events: none; transform-origin: top center;
  animation: fxFlame .16s ease-in-out infinite alternate;
}
@keyframes fxFlame {
  from { transform: translateX(-50%) scaleY(1) scaleX(1) rotate(-2deg); opacity: .92; }
  to   { transform: translateX(-50%) scaleY(1.18) scaleX(.88) rotate(2deg); opacity: 1; }
}
.fx-fume {
  position: absolute; left: 50%; top: 132%; width: 84px; height: 36px;
  background: radial-gradient(ellipse, rgba(220,220,232,.5), transparent 70%);
  filter: blur(4px); pointer-events: none;
  animation: fxFume .5s ease-in-out infinite alternate;
}
@keyframes fxFume {
  from { opacity: .4; transform: translateX(-50%) scale(1); }
  to   { opacity: .75; transform: translateX(-50%) scale(1.28); }
}
.fs-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,.9); animation: fxTwinkle 1.6s ease-in-out infinite;
}
.fs-stars i:nth-child(1)  { left: 12%; top: 18%; animation-delay: .0s; }
.fs-stars i:nth-child(2)  { left: 24%; top: 8%;  animation-delay: .3s; }
.fs-stars i:nth-child(3)  { left: 38%; top: 16%; animation-delay: .6s; }
.fs-stars i:nth-child(4)  { left: 52%; top: 6%;  animation-delay: .9s; }
.fs-stars i:nth-child(5)  { left: 66%; top: 14%; animation-delay: .2s; }
.fs-stars i:nth-child(6)  { left: 80%; top: 8%;  animation-delay: .5s; }
.fs-stars i:nth-child(7)  { left: 90%; top: 22%; animation-delay: .8s; }
.fs-stars i:nth-child(8)  { left: 8%;  top: 38%; animation-delay: 1.1s; }
.fs-stars i:nth-child(9)  { left: 92%; top: 40%; animation-delay: .4s; }
.fs-stars i:nth-child(10) { left: 18%; top: 56%; animation-delay: .7s; }
.fs-stars i:nth-child(11) { left: 84%; top: 58%; animation-delay: 1.0s; }
.fs-stars i:nth-child(12) { width: 3px; height: 3px; left: 30%; top: 30%; animation-delay: 1.3s; }
.fs-stars i:nth-child(13) { width: 3px; height: 3px; left: 70%; top: 32%; animation-delay: .15s; }
.fs-stars i:nth-child(14) { width: 3px; height: 3px; left: 48%; top: 24%; animation-delay: .65s; }
@keyframes fxTwinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
.fs-smoke {
  position: absolute; left: 50%; bottom: 12%; width: 150px; height: 60px;
  background: radial-gradient(ellipse, rgba(210,206,220,.4), transparent 70%);
  filter: blur(8px); animation: fxSmoke 3.6s ease both;
}
@keyframes fxSmoke {
  0% { opacity: 0; transform: translateX(-50%) scale(.4); }
  20% { opacity: .9; transform: translateX(-50%) scale(1); }
  70% { opacity: .6; transform: translateX(-50%) scale(1.5); }
  100% { opacity: 0; transform: translateX(-50%) scale(2); }
}

/* ========== 专属主题：极速跑车（速度线 + 车灯光带） ========== */
.fx-car .fx-glyph-wrap { animation: fxAcross 3.6s cubic-bezier(.25,.7,.3,1) both; }
@keyframes fxAcross {
  0% { transform: translateX(-150%) scale(.82); opacity: 0; }
  14% { opacity: 1; }
  50% { transform: translateX(0) scale(1); opacity: 1; }
  78% { opacity: 1; }
  92% { transform: translateX(150%) scale(.85); opacity: 0; }
}
.fs-road {
  position: absolute; left: 0; bottom: 18%; width: 46%; height: 90px;
  background: linear-gradient(90deg, transparent, rgba(255,77,94,.32), rgba(255,210,140,.46), transparent);
  filter: blur(14px);
  animation: fxRoad 3.6s ease both;
}
@keyframes fxRoad {
  0% { transform: translateX(-80%) skewX(-18deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}
.fs-lines i {
  position: absolute; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,240,200,.95));
  box-shadow: 0 0 10px rgba(255,215,150,.65);
  animation: fxSpeed 1.1s linear infinite;
}
.fs-lines i:nth-child(1) { top: 26%; width: 160px; animation-delay: 0s; }
.fs-lines i:nth-child(2) { top: 36%; width: 110px; animation-delay: .25s; }
.fs-lines i:nth-child(3) { top: 48%; width: 200px; animation-delay: .5s; }
.fs-lines i:nth-child(4) { top: 58%; width: 130px; animation-delay: .12s; }
.fs-lines i:nth-child(5) { top: 68%; width: 170px; animation-delay: .38s; }
.fs-lines i:nth-child(6) { top: 78%; width: 90px;  animation-delay: .62s; }
.fs-lines i:nth-child(7) { top: 20%; width: 120px; animation-delay: .75s; }
@keyframes fxSpeed {
  0% { transform: translateX(560px); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateX(-900px); opacity: 0; }
}

/* ========== 专属主题：豪华游艇（海浪缓入） ========== */
.fx-yacht .fx-glyph-wrap { animation: fxYacht 3.6s ease-in-out both; }
@keyframes fxYacht {
  0% { transform: translateX(130%) translateY(6px) rotate(4deg); opacity: 0; }
  22% { opacity: 1; transform: translateX(24px) translateY(-5px) rotate(-3deg); }
  55% { transform: translateX(0) translateY(4px) rotate(2deg); }
  70% { transform: translateX(-10px) translateY(-3px) rotate(-1deg); opacity: 1; }
  92% { transform: translateX(-130px) translateY(2px); opacity: 0; }
}
.fs-wave {
  position: absolute; left: -30%; right: -30%; height: 90px; bottom: 14%;
  background: radial-gradient(130px 26px at 65px -2px, rgba(120,200,255,.34), transparent 70%) repeat-x;
  background-size: 130px 44px;
  animation: fxWave 2.8s linear infinite;
}
.fs-wave.wv2 { bottom: 8%; opacity: .55; animation-duration: 3.6s; height: 70px; }
@keyframes fxWave { to { background-position-x: 130px; } }

/* ========== 专属主题：私人飞机（云层 + 尾迹斜掠） ========== */
.fx-plane .fx-glyph-wrap { animation: fxPlane 3.6s ease-in-out both; }
@keyframes fxPlane {
  0% { transform: translate(-160%, 90%) scale(.8); opacity: 0; }
  18% { opacity: 1; }
  50% { transform: translate(0, 0) scale(1); }
  82% { opacity: 1; }
  96% { transform: translate(160%, -100%) scale(.85); opacity: 0; }
}
.fx-contrail {
  position: absolute; right: 94%; top: 52%; width: 170px; height: 5px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 16px, transparent 16px 34px);
  border-radius: 4px; filter: blur(.6px); transform-origin: right center;
  animation: fxContrail 3.6s ease both;
}
@keyframes fxContrail {
  0% { opacity: 0; width: 0; transform: rotate(24deg); }
  20% { opacity: .85; width: 150px; }
  80% { opacity: .7; }
  100% { opacity: 0; width: 170px; }
}
.fs-clouds i {
  position: absolute; width: 130px; height: 38px;
  background: radial-gradient(ellipse, rgba(255,255,255,.26), transparent 70%);
  filter: blur(6px); animation: fxCloud 3.6s linear infinite;
}
.fs-clouds i:nth-child(1) { top: 18%; left: 70%; animation-delay: 0s; }
.fs-clouds i:nth-child(2) { top: 34%; left: 82%; width: 100px; animation-delay: .9s; }
.fs-clouds i:nth-child(3) { top: 60%; left: 76%; animation-delay: 1.6s; }
.fs-clouds i:nth-child(4) { top: 74%; left: 86%; width: 90px; animation-delay: 2.3s; }
@keyframes fxCloud { from { transform: translateX(140px); } to { transform: translateX(-1000px); } }

/* ========== 专属主题：烟花（夜空多点绽放） ========== */
.fx-fire .fx-glyph-wrap { animation: fxFireWrap 3.6s ease both; }
@keyframes fxFireWrap {
  0% { opacity: 0; transform: scale(.7); }
  16% { opacity: 1; transform: scale(1); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}
.fx-fire .fx-glyph { animation: fxGlow 2.2s ease-in-out infinite, fxFirePulse 1.3s ease-in-out infinite; }
@keyframes fxFirePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.fs-burst {
  position: absolute; width: 240px; height: 240px; border-radius: 50%; opacity: 0;
  background:
    radial-gradient(circle at 50% 6%,  var(--bc1) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 72% 14%, var(--bc2) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 90% 36%, var(--bc1) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 88% 64%, var(--bc2) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 66% 88%, var(--bc1) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 36% 92%, var(--bc2) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 12% 72%, var(--bc1) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 8% 40%,  var(--bc2) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 28% 18%, var(--bc1) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 4px, transparent 6px);
  filter: drop-shadow(0 0 8px var(--bcg, rgba(255,220,140,.7)));
  animation: fxBurst2 1.6s ease-out infinite;
}
.fb1 { left: 10%; top: 17%; --bc1: #ffd28c; --bc2: #ff8a5e; --bcg: rgba(255,170,90,.75); animation-delay: .1s; }
.fb2 { right: 8%; top: 9%; width: 190px; height: 190px; --bc1: #8fd0ff; --bc2: #b06bff; --bcg: rgba(140,170,255,.75); animation-delay: .65s; }
.fb3 { left: 44%; top: 3%; width: 160px; height: 160px; --bc1: #ff9ecb; --bc2: #ffe08a; --bcg: rgba(255,150,200,.7); animation-delay: 1.1s; }
.fb4 { left: 64%; top: 24%; width: 200px; height: 200px; --bc1: #8ff0d0; --bc2: #3da8ff; --bcg: rgba(110,220,230,.7); animation-delay: .95s; }
.fb5 { left: 22%; top: 6%; width: 150px; height: 150px; --bc1: #ffe08a; --bc2: #ff6fb0; --bcg: rgba(255,170,120,.7); animation-delay: 1.4s; }
@keyframes fxBurst2 {
  0% { opacity: 0; transform: scale(.25); }
  14% { opacity: 1; }
  70% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ========== 专属主题：远古巨龙（火焰光晕 + 上升余烬） ========== */
.fx-dragon .fx-glyph-wrap { animation: fxDragonIn 3.6s ease both; }
@keyframes fxDragonIn {
  0% { opacity: 0; transform: scale(.72) rotate(-10deg); }
  18% { opacity: 1; transform: scale(1.06) rotate(3deg); }
  30% { transform: scale(1) rotate(-2deg); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}
.fx-dragon .fx-glyph { animation: fxGlow 2.2s ease-in-out infinite, fxDragonBreath 2.2s ease-in-out infinite; }
@keyframes fxDragonBreath {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) scale(1.04); }
}
.fs-glow {
  position: absolute; top: 16%; width: 46%; height: 66%;
  background: radial-gradient(ellipse, rgba(255,90,30,.42), transparent 70%);
  filter: blur(30px); animation: fxFlicker 1.1s ease-in-out infinite alternate;
}
.fg-l { left: -6%; }
.fg-r { right: -6%; animation-delay: .55s; transform: scaleX(-1); }
@keyframes fxFlicker { from { opacity: .55; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
.fg-r { animation-name: fxFlickerR; }
@keyframes fxFlickerR { from { opacity: .55; } to { opacity: 1; } }
.fs-ember i {
  position: absolute; bottom: 12%; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(#ffd0a0, #ff5a1f);
  box-shadow: 0 0 8px rgba(255,110,40,.8);
  animation: fxEmber 2.6s ease-in infinite;
}
.fs-ember i:nth-child(1)  { left: 16%; --ex: 14px;  animation-delay: 0s; }
.fs-ember i:nth-child(2)  { left: 26%; --ex: -20px; animation-delay: .4s; }
.fs-ember i:nth-child(3)  { left: 36%; --ex: 8px;  animation-delay: .8s; }
.fs-ember i:nth-child(4)  { left: 44%; --ex: -12px; animation-delay: 1.2s; }
.fs-ember i:nth-child(5)  { left: 52%; --ex: 18px;  animation-delay: .2s; }
.fs-ember i:nth-child(6)  { left: 60%; --ex: -6px;  animation-delay: .6s; }
.fs-ember i:nth-child(7)  { left: 68%; --ex: 12px;  animation-delay: 1.0s; }
.fs-ember i:nth-child(8)  { left: 76%; --ex: -16px; animation-delay: 1.4s; }
.fs-ember i:nth-child(9)  { left: 84%; --ex: 6px;  animation-delay: .3s; }
.fs-ember i:nth-child(10) { left: 22%; --ex: -10px; animation-delay: 1.6s; }
.fs-ember i:nth-child(11) { left: 56%; --ex: 20px;  animation-delay: .9s; }
.fs-ember i:nth-child(12) { left: 72%; --ex: -8px;  animation-delay: 1.8s; }
@keyframes fxEmber {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-360px) translateX(var(--ex, 0)) scale(.5); }
}
.fs-ember.purple i {
  background: radial-gradient(#dcc6ff, #7a3dff);
  box-shadow: 0 0 8px rgba(150,90,255,.8);
}

/* ========== 专属主题：纳什男爵（紫裂光环加冕） ========== */
.fx-baron .fx-glyph-wrap { animation: fxBaron 3.6s cubic-bezier(.3,1.25,.5,1) both; }
@keyframes fxBaron {
  0% { transform: translateY(-60px) scale(.4); opacity: 0; }
  38% { transform: translateY(8px) scale(1.1); opacity: 1; }
  52% { transform: translateY(-3px) scale(1); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}
.fx-baron .fx-glyph {
  border-color: rgba(168,120,255,.7);
  animation: fxBaronGlow 2.2s ease-in-out infinite;
}
@keyframes fxBaronGlow {
  0%, 100% { box-shadow: 0 0 70px -10px rgba(140,80,255,.6), inset 0 1px 0 rgba(255,255,255,.2); }
  50% { box-shadow: 0 0 104px -4px rgba(168,107,255,.9), inset 0 1px 0 rgba(255,255,255,.28); }
}
.fs-rift {
  position: absolute; left: 50%; bottom: 13%; width: 280px; height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(150,90,255,.55);
  box-shadow: 0 0 40px rgba(140,80,255,.5), inset 0 0 30px rgba(140,80,255,.35);
  animation: fxRift 3.6s ease both;
}
@keyframes fxRift {
  0% { opacity: 0; transform: translateX(-50%) scale(.3); }
  25% { opacity: 1; transform: translateX(-50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.25); }
}

/* ========== 专属主题：五杀时刻（金色放射 + 高频闪光） ========== */
.fx-penta .fx-glyph-wrap { animation: fxPentaIn 3.6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes fxPentaIn {
  0% { opacity: 0; transform: scale(.3) rotate(-12deg); }
  20% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  32% { transform: scale(1) rotate(0); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}
.fx-penta .fx-glyph { animation: fxGlow 2.2s ease-in-out infinite, fxPentaFlash .9s ease-in-out infinite; }
@keyframes fxPentaFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}
.fs-rays2 i {
  position: absolute; left: 50%; top: 45%; width: 44%; height: 2px;
  transform-origin: 0 50%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,233,168,.95), transparent);
  animation: fxRayFlash 1.1s ease-in-out infinite;
}
.fs-rays2 i:nth-child(1)  { transform: rotate(0deg);   animation-delay: 0s; }
.fs-rays2 i:nth-child(2)  { transform: rotate(30deg);  animation-delay: .09s; }
.fs-rays2 i:nth-child(3)  { transform: rotate(60deg);  animation-delay: .18s; }
.fs-rays2 i:nth-child(4)  { transform: rotate(90deg);  animation-delay: .27s; }
.fs-rays2 i:nth-child(5)  { transform: rotate(120deg); animation-delay: .36s; }
.fs-rays2 i:nth-child(6)  { transform: rotate(150deg); animation-delay: .45s; }
.fs-rays2 i:nth-child(7)  { transform: rotate(180deg); animation-delay: .54s; }
.fs-rays2 i:nth-child(8)  { transform: rotate(210deg); animation-delay: .63s; }
.fs-rays2 i:nth-child(9)  { transform: rotate(240deg); animation-delay: .72s; }
.fs-rays2 i:nth-child(10) { transform: rotate(270deg); animation-delay: .81s; }
.fs-rays2 i:nth-child(11) { transform: rotate(300deg); animation-delay: .9s; }
.fs-rays2 i:nth-child(12) { transform: rotate(330deg); animation-delay: .99s; }
@keyframes fxRayFlash { 0%, 100% { opacity: .12; } 50% { opacity: .95; } }

/* ========== 专属主题：至臻城堡（天降光柱 + 地面金环） ========== */
.fx-castle .fx-glyph-wrap { animation: fxCastle 3.6s cubic-bezier(.25,.9,.3,1.05) both; }
.fx-castle .fx-title { letter-spacing: 10px; }
@keyframes fxCastle {
  0% { transform: translateY(-200px) scale(1.1); opacity: 0; }
  42% { transform: translateY(8px) scale(1); opacity: 1; }
  56% { transform: translateY(-3px) scale(1.01); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}
.fs-beam {
  position: absolute; left: 50%; top: -6%; width: 130px; height: 72%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,236,170,.5), rgba(255,214,120,.18) 55%, transparent);
  filter: blur(7px); animation: fxBeam 3.6s ease both;
}
@keyframes fxBeam {
  0% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: .85; } 100% { opacity: 0; }
}
.fs-ground {
  position: absolute; left: 50%; bottom: 15%; width: 260px; height: 60px;
  transform: translateX(-50%);
}
.fs-ground::before, .fs-ground::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(243,212,138,.7);
  animation: fxRing 2.4s ease-out infinite;
}
.fs-ground::after { animation-delay: 1.2s; }
@keyframes fxRing {
  0% { opacity: .9; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ============================================================
   小礼物飘屏（不遮屏，多个并存）
   ============================================================ */
.gift-pop-layer {
  position: absolute; inset: 0; z-index: 35; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.gift-pop {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 16px 5px 5px; border-radius: 99px;
  background: linear-gradient(135deg, rgba(34,26,14,.94), rgba(48,36,16,.92));
  border: 1px solid rgba(212,175,99,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  animation: gpFloat 2s ease-out both;
}
@keyframes gpFloat {
  0% { opacity: 0; transform: translateY(26px) scale(.85); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  20% { transform: translateY(-4px) scale(1.03); }
  28% { transform: translateY(0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-76px) scale(.96); }
}
.gp-ava {
  width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex: none;
  border: 1px solid rgba(212,175,99,.4); background: rgba(20,16,8,.8);
}
.gp-ava .gd-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-meta { display: flex; flex-direction: column; line-height: 1.3; }
.gp-name { font-size: 13px; font-weight: 700; color: #f3d48a; }
.gp-line { font-size: 10.5px; color: rgba(255,255,255,.7); white-space: nowrap; }
.gp-line b { color: #ffe9b8; }
.gp-qty {
  font-size: 16px; font-weight: 800; color: #ffd873; margin-left: 2px;
  text-shadow: 0 0 10px rgba(255,200,90,.6);
}
.gc-glyph .gd-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ============================================================
   礼物榜单（贡献榜 / 心动榜）
   ============================================================ */
.gift-board { flex: 1; overflow-y: auto; padding: 12px 14px; }
.gb-seg { display: flex; background: var(--surface-3); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.gb-seg button { flex: 1; height: 30px; border-radius: 8px; font-size: 12.5px; color: var(--muted); }
.gb-seg button.on { background: var(--elevated); color: var(--text); font-weight: 700; box-shadow: var(--shadow-sm); }
.gb-list { display: flex; flex-direction: column; gap: 2px; }
.gb-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--border); }
.gb-rank { width: 28px; flex: none; text-align: center; font-size: 12.5px; color: var(--faint); display: grid; place-items: center; }
.gb-rank .icon { width: 18px; height: 18px; }
.gb-rank.r1 { color: #e8c063; }
.gb-rank.r2 { color: #c9cdd4; }
.gb-rank.r3 { color: #d2905a; }
.gb-name { flex: 1; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-val { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.gb-val b { color: var(--gold); font-size: 13px; }
.gb-empty { text-align: center; padding: 70px 0; color: var(--faint); }
.gb-empty .icon { width: 44px; height: 44px; opacity: .35; display: block; margin: 0 auto 12px; }
.gb-empty p { font-size: 13px; color: var(--text-3); margin-bottom: 4px; }
.gb-empty span { font-size: 11.5px; }

/* 最小化语音悬浮条 */
.voice-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 110;
  display: flex; align-items: center; gap: 12px;
  background: var(--elevated); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); border-radius: 16px;
  padding: 10px 14px;
  animation: fadeUp .3s var(--ease);
}
.voice-dock .vd-info { font-size: 12.5px; }
.voice-dock .vd-name { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.voice-dock .vd-sub { color: var(--faint); font-size: 11px; }
.voice-dock .vd-actions { display: flex; gap: 4px; }
.voice-dock .icon-btn { width: 34px; height: 34px; }
.voice-dock .icon-btn.leave { color: var(--danger); }
/* 明显的「回到房间」入口 */
.voice-dock .vd-return {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  padding: 8px 16px; border-radius: 99px;
  color: #fff; background: var(--accent-grad, linear-gradient(135deg, #ff2d95, #7a3cff));
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 45, 149, .35);
  transition: filter .15s, transform .15s;
}
.voice-dock .vd-return:hover { filter: brightness(1.12); transform: translateY(-1px); }
.voice-dock .vd-return .icon { width: 14px; height: 14px; }

/* 用户卡浮层（点麦位） */
.user-pop {
  position: fixed; z-index: 160; width: 250px;
  background: var(--elevated); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 18px;
  animation: menuIn .18s var(--ease);
}
.user-pop .up-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.user-pop .up-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.user-pop .up-sub { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.user-pop .up-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.user-pop .up-actions .btn { padding: 0 8px; }

/* 响应式 */
@media (max-width: 1100px) {
  .room-body { grid-template-columns: 1fr 300px; }
  .room-aside { display: none; }
}
@media (max-width: 860px) {
  .room-body { grid-template-columns: 1fr; }
  .room-chat { position: absolute; right: 0; top: 60px; bottom: 78px; width: min(88vw, 340px); z-index: 20; box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform .25s; }
  .room-chat.show { transform: none; }
  .seats.game5 { grid-template-columns: repeat(3, 1fr); }
  .seats.chat8 { grid-template-columns: repeat(2, 1fr); }
  .ctrl-btn { width: 52px; }
  .ctrl-btn span.ctrl-label { display: none; }
}

/* ============================================================
   主持专属位（麦位上方居中独立位置）
   ============================================================ */
.host-seat {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; margin: 4px auto 16px; padding: 10px 26px 10px;
  width: fit-content; position: relative;
  border-radius: 18px; cursor: pointer;
  transition: transform .18s ease;
}
.host-seat::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 18px; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(255, 183, 77, .10), transparent 72%);
}
.host-seat.clickable-gift:hover { transform: translateY(-2px); }
.hs-avatar-wrap { position: relative; }
.hs-avatar {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--elevated);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 700; color: var(--text-1);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(255, 183, 77, .10), 0 4px 16px rgba(255, 183, 77, .22);
}
.hs-badge {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: #1c1408;
  background: linear-gradient(135deg, #ffe2a3, var(--gold));
  padding: 1px 9px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.hs-dot {
  position: absolute; right: 1px; bottom: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #5a5a64; border: 2.5px solid var(--surface);
}
.hs-dot.on { background: #22c55e; box-shadow: 0 0 7px rgba(34, 197, 94, .8); }
.hs-name {
  position: relative; font-size: 13.5px; font-weight: 700; color: var(--text-1);
  margin-top: 5px; max-width: 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-meta {
  position: relative; display: flex; align-items: center; gap: 9px;
  font-size: 11px; color: var(--faint);
}
.hs-rp { display: inline-flex; align-items: center; gap: 2px; }
.hs-rp .icon { width: 11px; height: 11px; }
.hs-state { color: #7a7a84; }
.hs-state.on { color: #22c55e; }
.hs-gift {
  position: relative; margin-top: 3px; font-size: 11px; font-weight: 600;
  color: var(--gold); background: rgba(255, 183, 77, .12);
  border: 1px solid rgba(255, 183, 77, .4);
  padding: 3px 13px; border-radius: 13px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.hs-gift .icon { width: 12px; height: 12px; }
.host-seat.clickable-gift:hover .hs-gift { background: rgba(255, 183, 77, .22); }
.host-seat.offline .hs-avatar { filter: saturate(.55); }
.gd-tgt-hostbadge {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  font-size: 9px; font-weight: 700; color: var(--gold);
  background: var(--surface); border: 1px solid var(--gold);
  padding: 0 4px; border-radius: 5px; white-space: nowrap; line-height: 14px;
}

/* ============================================================
   礼物面板移动端适配
   ============================================================ */
@media (max-width: 768px) {
  .gift-drawer {
    height: 200px;
    border-radius: 14px 14px 0 0;
  }
  .gd-head { padding: 7px 10px; }
  .gd-bal { font-size: 10.5px; }
  .gd-row { padding: 4px 10px 6px; gap: 6px; }
  .gd-c { width: 64px; padding: 5px 3px 4px; }
  .gd-ic { width: 42px; height: 42px; }
  .gd-ic svg { width: 28px; height: 28px; }
  .gd-nm { font-size: 9.5px; }
  .gd-pr { font-size: 8.5px; }
  .gd-bar { padding: 7px 10px 8px; gap: 8px; }
  .gd-qty { gap: 4px; }
  .gd-q { font-size: 10px; padding: 3px 8px; }
  .gd-send { min-width: 76px; padding: 6px 14px; font-size: 12px; }
  .gd-tgt-nm { max-width: 60px; }
  .fx-glyph { width: 120px; height: 120px; border-radius: 18px; }
  .fx-title { font-size: 20px; letter-spacing: 3px; padding: 0 10px; }
  .fx-banner { top: 14px; }
  .fxb-main { font-size: 11.5px; padding: 6px 14px; gap: 5px; max-width: 92%; }
  .fxb-ribbon { width: 22px; }
  .fx-halo { width: 220px; height: 52px; }
  .fx-qty { font-size: 15px; }
  .fs-burst { width: 120px; height: 120px; }
  .fb2 { width: 100px; height: 100px; }
  .fb3 { width: 88px; height: 88px; }
  .fb4 { width: 104px; height: 104px; }
  .fb5 { width: 92px; height: 92px; }
  .fs-beam { width: 90px; }
  .fs-rift, .fs-ground { width: 200px; height: 48px; }
  .gift-pop { gap: 7px; padding: 4px 12px 4px 4px; }
  .gp-ava { width: 36px; height: 36px; border-radius: 9px; }
  .gp-name { font-size: 12px; }
  .gp-line { font-size: 10px; }
  .gp-qty { font-size: 14px; }
}