/* ===========================================================
   深海竞技 · v3 新增样式
   挡位选择 / 匹配 / 对局增强 / 结算明细 / 图鉴 / 后台面板
   =========================================================== */

/* ---------------- 通用 ---------------- */
.scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { height: 0; }
.medal-img { display: block; object-fit: contain; }
.tab__icon img { width: 22px; height: 22px; object-fit: contain; display: block; }

/* 关键：flex 纵向容器里的直接子项默认会被压缩，
   可滚动面板里的卡片必须禁止收缩，否则高度会被压扁。
   用 :not(.scroll-y) 排除滚动容器本身（它的 flex:1 来自 base.css）。 */
.screen > :not(.scroll-y) { flex: 0 0 auto; }
.home-body > *, .mm-body > *, .admin-body > *, .rs-body > * { flex: 0 0 auto; }
.dex-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dex-head { flex: 0 0 auto; }
.dex-filter { flex: 0 0 auto; }

.rar-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 999px;
  margin-left: 6px;
  white-space: nowrap;
  background: rgba(120, 160, 190, 0.22);
  color: #cfe4f2;
}
.rar-pill--common { background: rgba(150, 190, 215, 0.2); color: #cfe4f2; }
.rar-pill--rare { background: linear-gradient(180deg, #f7e6b4, #cfa04a); color: #33230a; }
.rar-pill--epic { background: linear-gradient(180deg, #d7b6ff, #8f5cf0); color: #fff; }
.rar-pill--legend { background: linear-gradient(180deg, #ffd9a0, #ff6a3d); color: #2b1005; }

.rar-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; flex: 0 0 auto; display: inline-block; }
.rar-dot--common { background: #8fb6d4; }
.rar-dot--rare { background: #f5c451; }
.rar-dot--epic { background: #b98cff; }
.rar-dot--legend { background: #ff9a5c; box-shadow: 0 0 6px #ff9a5c; }

/* ---------------- 首页：挡位选择 ---------------- */
.tier-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scroll-snap-type: x proximity;
}
.tier-row::-webkit-scrollbar { height: 0; }

.tier-chip {
  position: relative;
  flex: 0 0 auto;
  min-width: 74px;
  padding: 9px 12px 8px;
  border-radius: 14px;
  text-align: center;
  background: rgba(8, 24, 38, 0.8);
  border: 1px solid var(--panel-line);
  transition: all 0.16s ease;
  scroll-snap-align: start;
}
.tier-chip--on {
  background: linear-gradient(180deg, rgba(236, 205, 133, 0.22), rgba(8, 24, 38, 0.9));
  border-color: rgba(236, 205, 133, 0.75);
  box-shadow: 0 4px 16px rgba(207, 160, 74, 0.3);
  transform: translateY(-1px);
}
.tier-chip--free.tier-chip--on { border-color: var(--teal-1); box-shadow: 0 4px 16px rgba(47, 208, 200, 0.35); }
.tier-chip--lock { opacity: 0.45; filter: grayscale(0.7); }
.tier-chip__short { font-size: 19px; font-weight: 900; color: var(--gold-2); letter-spacing: 0.5px; }
.tier-chip--free .tier-chip__short { font-size: 14px; color: var(--teal-1); }
.tier-chip--on .tier-chip__short { color: #fff; }
.tier-chip__name { font-size: 10.5px; color: var(--tx-2); margin-top: 3px; white-space: nowrap; }
.tier-chip__lock { position: absolute; top: 3px; right: 4px; font-size: 10px; }
.tier-chip__mark {
  position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%);
  width: 18px; height: 2.5px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

.tier-detail { padding: 14px; }
.tier-detail__head { display: flex; align-items: flex-start; gap: 10px; }
.tier-detail__name { font-size: 16px; font-weight: 800; }
.tier-detail__desc { font-size: 11px; color: var(--tx-3); margin-top: 3px; line-height: 1.5; }
.tier-detail__diff {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor;
  background: rgba(0, 0, 0, 0.25);
}
.tier-detail__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.t-stat { background: rgba(6, 20, 33, 0.7); border: 1px solid var(--panel-line); border-radius: 10px; padding: 8px 6px; text-align: center; }
.t-stat__k { font-size: 10px; color: var(--tx-3); }
.t-stat__v { font-size: 14px; font-weight: 800; color: var(--tx-1); margin-top: 3px; }
.tier-detail__rar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 10px; }
.tier-detail__rar .rar-pill { margin-left: 0; }
.tier-detail__free {
  margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(47, 208, 200, 0.1);
  border: 1px solid rgba(111, 240, 228, 0.3);
  font-size: 12px;
}
.tier-detail__free b { color: var(--teal-1); }
.tier-detail__free .dim { font-size: 10.5px; }

.bounty--wide { grid-column: 1 / -1; }

.home-toast {
  position: fixed;
  left: 50%; bottom: 96px;
  transform: translate(-50%, 12px);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  background: rgba(6, 20, 33, 0.95);
  border: 1px solid var(--panel-line-strong);
  color: var(--tx-1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.22s ease;
  z-index: 60;
  white-space: nowrap;
}
.home-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 匹配屏 ---------------- */
#s-matching {
  background:
    radial-gradient(90% 44% at 50% 30%, rgba(47, 208, 200, 0.14), transparent 65%),
    var(--bg-0);
}
.mm-top {
  display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-top) + 14px) 16px 10px;
}
.mm-top__title { font-size: 17px; font-weight: 800; margin-right: auto; }
.mm-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 16px calc(var(--safe-bottom) + 20px);
  display: flex; flex-direction: column; gap: 12px;
}
.mm-tier { padding: 13px 14px; display: flex; align-items: center; gap: 10px; }
.mm-tier__name { font-size: 15px; font-weight: 800; }
.mm-tier__sub { font-size: 11px; color: var(--tx-3); margin-top: 3px; line-height: 1.5; }
.mm-tier__badge {
  margin-left: auto; flex: 0 0 auto;
  min-width: 46px; text-align: center;
  padding: 8px 10px; border-radius: 12px;
  font-size: 17px; font-weight: 900; color: #2b1c05;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
}

.mm-radar-wrap { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 0 4px; }
.mm-radar { position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; }
.mm-radar__core {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: radial-gradient(circle at 50% 35%, rgba(47, 208, 200, 0.35), rgba(6, 20, 33, 0.95));
  border: 1px solid rgba(111, 240, 228, 0.55);
  box-shadow: 0 0 26px rgba(47, 208, 200, 0.45);
  z-index: 2;
}
.mm-radar__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(111, 240, 228, 0.5);
  animation: mm-ping 2.1s ease-out infinite;
}
.mm-radar__ring--2 { animation-delay: 0.7s; }
.mm-radar__ring--3 { animation-delay: 1.4s; }
@keyframes mm-ping {
  0% { transform: scale(0.42); opacity: 0.9; }
  100% { transform: scale(1.05); opacity: 0; }
}
.mm-status { font-size: 12.5px; color: var(--tx-1); margin-top: 10px; }

.mm-progress { display: flex; align-items: center; gap: 10px; }
.mm-progress__track { flex: 1; height: 8px; border-radius: 999px; background: rgba(4, 15, 25, 0.9); border: 1px solid rgba(120, 205, 225, 0.2); overflow: hidden; }
.mm-progress__fill { height: 100%; width: 10%; border-radius: 999px; background: linear-gradient(90deg, var(--teal-2), var(--teal-1)); box-shadow: 0 0 12px rgba(111, 240, 228, 0.6); transition: width 0.3s ease; }
.mm-progress__text { font-size: 12px; font-weight: 700; color: var(--teal-1); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }

.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-slot {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 12px;
  background: rgba(8, 24, 38, 0.55);
  border: 1px solid var(--panel-line);
  opacity: 0.45;
  transition: all 0.28s ease;
}
.mm-slot--on { opacity: 1; background: rgba(10, 32, 48, 0.85); animation: mm-in 0.32s ease both; }
.mm-slot--me { border-color: rgba(111, 240, 228, 0.6); box-shadow: inset 0 0 14px rgba(47, 208, 200, 0.2); }
@keyframes mm-in { from { transform: translateY(6px) scale(0.97); } to { transform: none; } }
.mm-slot__av {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: linear-gradient(160deg, #26455e, #132433);
  overflow: hidden;
}
.mm-slot__av img { width: 100%; height: 100%; object-fit: cover; }
.mm-slot__name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-slot__tag { font-size: 10px; color: var(--tx-3); }
.mm-hint { font-size: 11px; color: var(--tx-3); text-align: center; line-height: 1.6; }

.mm-countdown {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  font-size: 96px; font-weight: 900;
  color: #fff;
  text-shadow: 0 0 40px rgba(111, 240, 228, 0.9), 0 6px 24px rgba(0, 0, 0, 0.9);
  background: rgba(3, 10, 18, 0.55);
  backdrop-filter: blur(3px);
  z-index: 40;
}
.mm-countdown.is-on { display: flex; }
.mm-countdown.is-pop { animation: mm-pop 0.62s ease-out; }
@keyframes mm-pop {
  0% { transform: scale(1.7); opacity: 0; }
  28% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.94); opacity: 0.9; }
}

/* ---------------- 对局增强 ---------------- */
.m-chip--free { color: var(--teal-1); }

.m-gauge-l__rar { font-size: 10px; font-weight: 700; color: var(--tx-3); }
.m-gauge-l__count {
  font-size: 10.5px; font-weight: 700; color: var(--teal-1);
  padding: 2px 7px; border-radius: 999px;
  background: rgba(47, 208, 200, 0.12);
  border: 1px solid rgba(111, 240, 228, 0.28);
  white-space: nowrap;
}
.m-gauge-l__rar--rare { color: #f5c451; }
.m-gauge-l__rar--epic { color: #b98cff; }
.m-gauge-l__rar--legend { color: #ff9a5c; text-shadow: 0 0 8px rgba(255, 154, 92, 0.7); }

.m-fishname__score {
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold-2);
  text-shadow: 0 1px 6px #000;
}

/* 战报 */
.m-feed {
  position: absolute;
  left: 10px;
  top: calc(var(--safe-top) + 132px);
  width: 168px;
  display: flex; flex-direction: column; gap: 3px;
  z-index: 7;
  pointer-events: none;
}

/* 局内「战况」按钮 */
.m-sheetbtn {
  position: absolute;
  left: 10px;
  top: calc(var(--safe-top) + 92px);
  display: flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  color: var(--gold-2);
  background: rgba(6, 20, 33, 0.82);
  border: 1px solid rgba(236, 205, 133, 0.45);
  z-index: 9;
}
.m-sheetbtn:active { transform: scale(0.96); }

/* ---------------- 局内详情抽屉 ---------------- */
.sheet-wrap { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.sheet-wrap.is-on { pointer-events: auto; }
.sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 8, 16, 0.45);
  opacity: 0; transition: opacity 0.22s ease;
}
.sheet-wrap.is-on .sheet__backdrop { opacity: 1; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 74%;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(9, 24, 38, 0.98), rgba(4, 12, 22, 0.99));
  border-top: 1px solid rgba(120, 205, 225, 0.25);
  border-radius: 18px 18px 0 0;
  transform: translateY(102%);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
}
.sheet-wrap.is-on .sheet { transform: none; }
.sheet__grip { height: 18px; display: flex; align-items: center; justify-content: center; }
.sheet__grip::after { content: ''; width: 40px; height: 4px; border-radius: 2px; background: rgba(140, 190, 215, 0.4); }
.sheet__head { display: flex; align-items: center; gap: 8px; padding: 2px 16px 8px; }
.sheet__title { font-size: 15px; font-weight: 800; }
.sheet__live { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--teal-2); }
.sheet__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-1); box-shadow: 0 0 8px var(--teal-1); animation: pulse-glow 1.4s infinite; }
.sheet__close { margin-left: auto; font-size: 12px; color: var(--tx-3); padding: 4px 10px; border: 1px solid var(--panel-line); border-radius: 999px; }
.sheet__tabs { display: flex; gap: 8px; padding: 0 16px 10px; }
.sheet__tab {
  font-size: 12.5px; padding: 7px 16px; border-radius: 999px;
  background: rgba(8, 24, 38, 0.8); border: 1px solid var(--panel-line); color: var(--tx-2);
}
.sheet__tab.is-on { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #2b1c05; font-weight: 800; border-color: transparent; }
.sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px calc(var(--safe-bottom) + 18px); }
.sheet__body::-webkit-scrollbar { width: 0; }
.sheet__note { font-size: 10.5px; color: var(--tx-3); text-align: center; padding: 12px 0 4px; line-height: 1.6; }
.sheet__sub { font-size: 11.5px; font-weight: 700; color: var(--tx-2); padding: 12px 2px 6px; }
.sheet__empty { font-size: 12.5px; color: var(--tx-3); text-align: center; padding: 40px 20px; line-height: 1.8; }

.sh-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 11px; margin-bottom: 5px;
  background: rgba(10, 26, 40, 0.7);
  border: 1px solid var(--panel-line);
  font-size: 13px;
}
.sh-row--me { border-color: rgba(111, 240, 228, 0.55); background: rgba(20, 60, 74, 0.65); }
.sh-row--out { opacity: 0.45; }
.sh-row__no { width: 22px; text-align: center; color: var(--tx-2); font-weight: 700; font-size: 12px; }
.sh-row__av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 15px; background: linear-gradient(160deg, #26455e, #132433); }
.sh-row__av img { width: 100%; height: 100%; object-fit: cover; }
.sh-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-row__catches { font-size: 11px; color: var(--tx-3); }
.sh-row__score { font-size: 14px; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }

.sh-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 0 4px; }
.sh-sum__cell { text-align: center; padding: 10px 4px; border-radius: 12px; background: rgba(10, 26, 40, 0.75); border: 1px solid var(--panel-line); }
.sh-sum__cell b { display: block; font-size: 18px; color: var(--teal-1); font-variant-numeric: tabular-nums; }
.sh-sum__cell span { font-size: 10px; color: var(--tx-3); }

.sh-grp {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 12px; margin-bottom: 5px;
  background: rgba(10, 26, 40, 0.7);
  border: 1px solid var(--panel-line);
  border-left: 3px solid rgba(150, 190, 215, 0.4);
}
.sh-grp--rare { border-left-color: #cfa04a; }
.sh-grp--epic { border-left-color: #8f5cf0; }
.sh-grp--legend { border-left-color: #ff6a3d; }
.sh-grp__art { width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(47, 208, 200, 0.16), rgba(4, 15, 25, 0.8)); overflow: hidden; }
.sh-grp__art canvas { display: block; }
.sh-grp__meta { flex: 1; min-width: 0; }
.sh-grp__name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; }
.sh-grp__sub { font-size: 10.5px; color: var(--tx-3); margin-top: 2px; }
.sh-grp__score { font-size: 15px; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }

.sh-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12.5px; border-bottom: 1px solid rgba(120, 205, 225, 0.08); }
.sh-item:last-child { border-bottom: none; }
.sh-item__t { width: 42px; color: var(--tx-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.sh-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-item__combo { font-size: 10px; color: var(--gold-2); border: 1px solid rgba(236, 205, 133, 0.35); border-radius: 999px; padding: 1px 6px; }
.sh-item__score { font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }

/* 画质选择 */.qual-row { display: flex; gap: 7px; padding: 12px 0; }
.qual-opt {
  flex: 1; text-align: center; font-size: 12.5px; padding: 9px 0; border-radius: 10px;
  background: rgba(8, 24, 38, 0.8); border: 1px solid var(--panel-line); color: var(--tx-2);
}
.qual-opt.is-on { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #2b1c05; font-weight: 800; border-color: transparent; }

/* ---------------- 联机相关 ---------------- */
.mm-online {
  display: inline-block; margin-left: 7px;
  font-size: 10px; font-weight: 700;
  padding: 1.5px 7px; border-radius: 999px;
  color: var(--tx-3); border: 1px solid var(--panel-line);
}
.mm-online.is-on { color: var(--teal-1); border-color: rgba(111, 240, 228, 0.5); background: rgba(47, 208, 200, 0.12); }
.mm-slot--out { opacity: 0.4; filter: grayscale(0.8); }

.m-nettag {
  flex: 0 0 auto;                       /* 不写会被 flex 拉成一个圆圈 */
  margin-left: 5px; font-size: 9.5px; line-height: 1.5;
  padding: 1px 6px; border-radius: 999px;
  white-space: nowrap;
  color: var(--tx-3); border: 1px solid var(--panel-line);
}
.m-nettag.is-on { color: var(--teal-1); border-color: rgba(111, 240, 228, 0.5); }

/* 对局顶部要在一行里塞下「挡位 + 计时 + 奖励池」，任何一段被拉伸都会散架 */
.m-bar { flex-wrap: nowrap; }
.m-bar .m-chip { flex: 0 0 auto; white-space: nowrap; min-width: 0; }
.m-bar .m-chip > span { white-space: nowrap; }

/* 结算页的「服务端复核」徽标 */
.rs-verify {
  display: flex; align-items: center; gap: 7px;
  margin: 12px auto 0; padding: 8px 14px;
  width: fit-content; max-width: 100%;
  border-radius: 999px; font-size: 11.5px;
  background: rgba(47, 208, 200, 0.1);
  border: 1px solid rgba(111, 240, 228, 0.35);
  color: var(--teal-1);
}
.rs-verify--warn {
  background: rgba(255, 90, 82, 0.12);
  border-color: rgba(255, 90, 82, 0.45);
  color: #ff8a7a;
}
.rs-verify b { font-weight: 800; }
.rs-verify small { color: var(--tx-3); font-size: 10px; }
.m-feed__row {
  font-size: 10.5px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(6, 20, 33, 0.72);
  border: 1px solid rgba(120, 205, 225, 0.14);
  color: var(--tx-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: feed-in 0.3s ease both;
}
.m-feed__row.me { color: var(--teal-1); border-color: rgba(111, 240, 228, 0.35); }
.m-feed__row.epic { color: #c9a6ff; border-color: rgba(185, 140, 255, 0.35); }
.m-feed__row.legend { color: #ffb185; border-color: rgba(255, 154, 92, 0.45); }
.m-feed__row.bad { color: #ff8a7a; border-color: rgba(255, 90, 82, 0.3); }
@keyframes feed-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* 连击 */
.m-combo {
  position: absolute;
  left: 50%; top: 56%;
  transform: translate(-50%, 0) scale(0.8);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 900;
  color: #2b1c05;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  box-shadow: 0 0 22px rgba(236, 205, 133, 0.6);
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 10;
  pointer-events: none;
}
.m-combo.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* 挣脱预警 */
.m-escape {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center;
  justify-content: flex-start;
  padding-top: 17vh;   /* 注意：不能用百分比，百分比 padding 是按包含块「宽度」算的 */
  gap: 6px;
  z-index: 15;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 60, 50, 0.24), transparent 64%);
}
.m-escape.is-on { display: flex; animation: escape-pulse 0.42s ease-in-out infinite alternate; }
@keyframes escape-pulse { from { opacity: 0.45; } to { opacity: 1; } }
.m-escape__text { font-size: 22px; font-weight: 900; color: #ff8a7a; text-shadow: 0 0 20px rgba(255, 60, 50, 0.9), 0 2px 8px #000; }
.m-escape__sub { font-size: 12.5px; color: #ffe6e2; text-shadow: 0 2px 8px #000; }
#s-match.is-escape .match-stage { animation: shake-hard 0.34s ease-in-out infinite; }
@keyframes shake-hard {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3px, 2px); }
  75% { transform: translate(3px, -2px); }
}

.float-score.combo { font-size: 13px; color: var(--teal-1); }
.float-score.rar { font-size: 15px; color: #ffb185; }

/* ---------------- 结算增强 ---------------- */
.rs-tier {
  text-align: center; font-size: 12px; color: var(--tx-3);
  padding: 4px 12px; border-radius: 999px;
  background: rgba(8, 24, 38, 0.7);
  border: 1px solid var(--panel-line);
  display: inline-block;
  margin: 0 auto 12px;
}
.rs-body > .rs-tier { display: table; }
.rs-prize--free { background: linear-gradient(180deg, rgba(47, 208, 200, 0.14), rgba(9, 24, 37, 0.6)); border-color: rgba(111, 240, 228, 0.34); }
.rs-prize--free .rs-prize__val { font-size: 18px; color: var(--teal-1); }

.rs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.rs-stat { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.rs-stat__k { font-size: 10.5px; color: var(--tx-3); }
.rs-stat__v { font-size: 17px; font-weight: 900; color: var(--tx-1); margin-top: 3px; font-variant-numeric: tabular-nums; }

.rs-section { margin-top: 18px; }
.rs-fish {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 7px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid rgba(150, 190, 215, 0.4);
}
.rs-fish--rare { border-left-color: #cfa04a; }
.rs-fish--epic { border-left-color: #8f5cf0; }
.rs-fish--legend { border-left-color: #ff6a3d; box-shadow: 0 0 18px rgba(255, 106, 61, 0.16); }
.rs-fish__icon {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(47, 208, 200, 0.18), rgba(4, 15, 25, 0.7));
  border-radius: 10px;
  overflow: hidden;
}
.rs-fish__icon img { width: 100%; height: 100%; object-fit: contain; }
.rs-fish__meta { flex: 1; min-width: 0; }
.rs-fish__name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; }
.rs-fish__sub { font-size: 10.5px; color: var(--tx-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-fish__right { text-align: right; flex: 0 0 auto; }
.rs-fish__n { font-size: 11px; color: var(--tx-3); }
.rs-fish__score { font-size: 15px; font-weight: 900; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.rs-empty { text-align: center; font-size: 12.5px; color: var(--tx-3); padding: 26px 0; }

/* ---------------- 图鉴 ---------------- */
.dex-progress { font-size: 13px; font-weight: 800; color: var(--teal-1); }
.dex-filter { display: flex; gap: 7px; overflow-x: auto; padding: 0 16px 10px; }
.dex-filter::-webkit-scrollbar { height: 0; }
.dex-filter__item {
  flex: 0 0 auto;
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(8, 24, 38, 0.8);
  border: 1px solid var(--panel-line);
  color: var(--tx-2);
}
.dex-filter__item.is-on { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #2b1c05; font-weight: 800; border-color: transparent; }
.dex-filter__item--rare.is-on { background: linear-gradient(180deg, #f7e6b4, #cfa04a); }
.dex-filter__item--epic.is-on { background: linear-gradient(180deg, #d7b6ff, #8f5cf0); color: #fff; }
.dex-filter__item--legend.is-on { background: linear-gradient(180deg, #ffd9a0, #ff6a3d); }
.dex-filter__item--common.is-on { background: linear-gradient(180deg, #cfe4f2, #7fa4bd); }

.dex-grid { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 0 16px calc(var(--safe-bottom) + 74px); }
.dex-card {
  display: flex; gap: 11px;
  padding: 11px;
  border-radius: var(--radius-m);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-left: 3px solid rgba(150, 190, 215, 0.4);
}
.dex-card--rare { border-left-color: #cfa04a; }
.dex-card--epic { border-left-color: #8f5cf0; }
.dex-card--legend { border-left-color: #ff6a3d; }
.dex-card--locked { opacity: 0.5; filter: grayscale(0.85); }
.dex-card__art {
  width: 68px; height: 68px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(47, 208, 200, 0.14), rgba(4, 15, 25, 0.75));
  overflow: hidden;
}
.dex-card__art img { width: 92%; height: 92%; object-fit: contain; }
.dex-card__emoji { font-size: 32px; }
.dex-card__body { flex: 1; min-width: 0; }
.dex-card__name { font-size: 14px; font-weight: 800; display: flex; align-items: center; }
.dex-card__blurb { font-size: 10.5px; color: var(--tx-3); margin-top: 3px; line-height: 1.45; }
.dex-card__stats { display: flex; gap: 12px; margin-top: 7px; }
.dex-card__stats span { display: flex; align-items: baseline; gap: 3px; font-size: 11px; }
.dex-card__stats i { font-style: normal; color: var(--tx-3); font-size: 10px; }
.dex-card__stats b { color: var(--tx-1); font-weight: 800; }
.dex-card__risk { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 10px; color: var(--tx-3); }
.dex-card__diff b { color: var(--warn); letter-spacing: 1px; }
.dex-card__esc { color: #ff9a5c; }
.dex-card__hook { color: #b98cff; }
.dex-card__got { margin-top: 6px; font-size: 10.5px; color: var(--teal-1); }

/* ---------------- 我的 ---------------- */
.sw {
  width: 44px; height: 25px; border-radius: 999px; flex: 0 0 auto;
  background: rgba(4, 15, 25, 0.9);
  border: 1px solid rgba(120, 205, 225, 0.25);
  padding: 2px;
  transition: all 0.18s ease;
}
.sw__knob { width: 19px; height: 19px; border-radius: 50%; background: #7f96a6; transition: all 0.18s ease; }
.sw.is-on { background: linear-gradient(90deg, var(--teal-3), var(--teal-2)); border-color: rgba(111, 240, 228, 0.7); }
.sw.is-on .sw__knob { transform: translateX(19px); background: #eaf6ff; }
.set-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid rgba(120, 205, 225, 0.1); }
.set-row:last-child { border-bottom: none; }
.set-row__t { font-size: 13.5px; font-weight: 600; }
.set-row__s { font-size: 10.5px; color: var(--tx-3); margin-top: 2px; }
.set-row > div:first-child { margin-right: auto; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.stat-cell { padding: 12px 4px; text-align: center; }
.stat-cell__v { font-size: 19px; font-weight: 900; color: var(--teal-1); font-variant-numeric: tabular-nums; }
.stat-cell__k { font-size: 10.5px; color: var(--tx-3); margin-top: 3px; }
.best-row { display: flex; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(120, 205, 225, 0.08); font-size: 13px; }
.best-row:last-child { border-bottom: none; }
.best-row__name { color: var(--tx-2); }
.best-row__val { margin-left: auto; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }

/* ---------------- 后台面板 ---------------- */
#s-admin { background: var(--bg-0); }
.admin-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px calc(var(--safe-bottom) + 70px); display: flex; flex-direction: column; gap: 11px; }
.ad-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 10px; }
.ad-tabs::-webkit-scrollbar { height: 0; }
.ad-tab {
  flex: 0 0 auto; font-size: 12px; padding: 6px 13px; border-radius: 999px;
  background: rgba(8, 24, 38, 0.8); border: 1px solid var(--panel-line); color: var(--tx-2);
}
.ad-tab.is-on { background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); color: #2b1c05; font-weight: 800; border-color: transparent; }
.ad-group { padding: 12px 14px 6px; }
.ad-group__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ad-group__head b { font-size: 13.5px; }
.ad-group__head span { font-size: 10.5px; color: var(--tx-3); }
.ad-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ad-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(120, 205, 225, 0.08); }
.ad-row:last-child { border-bottom: none; }
.ad-row--sw { padding: 13px 0; }
.ad-label { font-size: 12.5px; color: var(--tx-2); flex: 0 0 40%; display: flex; flex-direction: column; }
.ad-label i { font-style: normal; font-size: 9.5px; color: var(--tx-3); margin-top: 2px; }
.ad-ctl { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ad-range { flex: 1; min-width: 40px; accent-color: #eccd85; height: 20px; }
.ad-num {
  width: 66px; flex: 0 0 auto;
  background: rgba(4, 15, 25, 0.9);
  border: 1px solid rgba(120, 205, 225, 0.22);
  border-radius: 8px;
  color: var(--tx-1);
  font-size: 12.5px;
  padding: 6px 7px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ad-num--cell { width: 62px; }
.ad-unit { font-size: 11px; color: var(--tx-3); flex: 0 0 auto; min-width: 18px; }
.ad-note { font-size: 10.5px; color: var(--tx-3); line-height: 1.65; padding: 10px 2px; }
.ad-table { border: 1px solid var(--panel-line); border-radius: 12px; overflow: hidden; min-width: 560px; }
.ad-table__head, .ad-table__row { display: grid; grid-template-columns: 1.5fr repeat(5, 1fr); align-items: center; }
.ad-table__head { background: rgba(6, 20, 33, 0.9); padding: 8px 4px; }
.ad-th { font-size: 10.5px; color: var(--tx-3); text-align: center; }
.ad-th--name { text-align: left; padding-left: 10px; }
.ad-table__row { padding: 5px 4px; border-top: 1px solid rgba(120, 205, 225, 0.08); }
.ad-table__row--rare { background: rgba(207, 160, 74, 0.06); }
.ad-table__row--epic { background: rgba(143, 92, 240, 0.07); }
.ad-table__row--legend { background: rgba(255, 106, 61, 0.08); }
.ad-td { display: flex; align-items: center; justify-content: center; }
.ad-td--name { justify-content: flex-start; padding-left: 8px; font-size: 11.5px; }
.ad-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
.ad-actions .btn-gold, .ad-actions .btn-ghost { flex: 1 1 auto; }
.ad-foot { padding: 10px 16px calc(var(--safe-bottom) + 10px); font-size: 10.5px; color: var(--tx-3); line-height: 1.6; text-align: center; background: linear-gradient(180deg, transparent, rgba(3, 8, 15, 0.9)); }
.ad-flash {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  padding: 9px 18px; border-radius: 999px; font-size: 13px;
  background: rgba(47, 208, 200, 0.95); color: #04202a; font-weight: 800;
  z-index: 70;
}

/* 头像容器内的图片撑满 */
.hud-avatar img, .p-slot img, .m-p__av img, .mm-slot__av img, .rs-row__av img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.hud-avatar--lg { width: 56px; height: 56px; }

/* ---------------- 游戏内调参面板的顶部说明条 ---------------- */
.ad-banner {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  margin: 10px 12px 0; padding: 9px 12px;
  border-radius: 10px;
  background: rgba(79, 214, 200, 0.10);
  border: 1px solid rgba(79, 214, 200, 0.32);
}
.ad-banner__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ad-banner__txt b { font-size: 12px; color: var(--teal-1); }
.ad-banner__txt span { font-size: 10.5px; color: var(--tx-3); line-height: 1.35; }
.ad-banner__link {
  flex: 0 0 auto; margin-left: auto;
  font-size: 11px; font-weight: 700; text-decoration: none;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(79, 214, 200, 0.18);
  border: 1px solid rgba(79, 214, 200, 0.45);
  color: var(--teal-1);
}

/* ===========================================================
   社交屏：邀请码 / 好友 / 自建房大厅
   =========================================================== */
.social-body { flex: 1 1 auto; overflow-y: auto; padding: 0 12px; }
.social-body { min-height:0; }
.registration-referral { margin:8px 12px; padding:10px; border:1px solid var(--line); border-radius:12px; }
.registration-referral[hidden] { display:none; }
.registration-referral label { display:grid; gap:6px; font-size:12px; }
.registration-referral input { width:100%; min-height:44px; box-sizing:border-box; padding:10px; color:var(--tx-1); background:var(--bg-1); border:1px solid var(--line); border-radius:8px; }
.registration-referral small { display:block; margin-top:6px; color:var(--tx-3); }
.referral-copy { min-height:44px; margin-top:8px; }
.referral-link { overflow-wrap:anywhere; font-size:11px; margin-top:6px; }
.invite-card__l { min-width:0; }
#s-social .social-back { min-height:44px; padding:8px 10px; white-space:nowrap; font-size:12px; }
#s-social .mm-top { gap:8px; position:relative; z-index:5; background:var(--bg-0); }
#s-social .tabbar { position:relative; flex:0 0 auto; z-index:5; }
#s-social .social-body { position:relative; z-index:0; }
#s-social .social-back:focus-visible { outline:2px solid var(--teal-2); outline-offset:2px; }
.social-body > * { flex: 0 0 auto; }
.social-conn { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--tx-3); }

.invite-card { display: flex; gap: 12px; align-items: center; }
.invite-card__l { flex: 1 1 auto; min-width: 0; }
.invite-card__r { flex: 0 0 auto; text-align: right; }
.invite-code {
  font-size: 27px; font-weight: 900; letter-spacing: 5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffe9a8, #f0c04a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 2px 0 3px; cursor: pointer; user-select: all;
}
.invite-code:active { opacity: .7; }

.fr-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; border-bottom: 1px solid var(--panel-line);
}
.fr-row:last-child { border-bottom: none; }
.fr-row__av { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; }
.fr-row__av.is-on { box-shadow: 0 0 0 2px var(--teal-1); }
.fr-row__meta { flex: 1 1 auto; min-width: 0; }
.fr-row__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hr { height: 1px; background: var(--panel-line); margin: 12px 0; }
.tier-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.tier-chip {
  flex: 1 0 auto; min-width: 62px; padding: 7px 9px; border-radius: 9px;
  background: rgba(8,24,38,.8); border: 1px solid var(--panel-line);
  text-align: center; cursor: pointer;
}
.tier-chip.is-on { border-color: var(--gold-1); background: rgba(240,192,74,.12); }
.tier-chip b { display: block; font-size: 13px; }
.tier-chip span { display: block; font-size: 10px; color: var(--tx-3); margin-top: 1px; }

.lobby-code { text-align: center; padding: 6px 0 10px; }
.lobby-code b {
  display: block; font-size: 32px; font-weight: 900; letter-spacing: 8px;
  color: var(--teal-1); cursor: pointer; user-select: all;
  text-shadow: 0 0 22px rgba(79,214,200,.45);
}
.lobby-seats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lobby-seat {
  border-radius: 9px; padding: 6px 3px; text-align: center;
  background: rgba(8,24,38,.75); border: 1px solid var(--panel-line);
}
.lobby-seat.is-open { opacity: .45; border-style: dashed; }
.lobby-seat.is-me { border-color: var(--teal-1); background: rgba(79,214,200,.10); }
.lobby-seat.is-host { border-color: var(--gold-1); }
.lobby-seat__av { width: 30px; height: 30px; margin: 0 auto 3px; border-radius: 50%; overflow: hidden; }
.lobby-seat__name { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-seat__tag { font-size: 9px; color: var(--gold-1); }
.lobby-wait { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--tx-3); font-size: 12.5px; }

.social-toast {
  position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(10px);
  background: rgba(10,26,42,.96); border: 1px solid var(--panel-line);
  padding: 9px 16px; border-radius: 999px; font-size: 12.5px;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 40;
  max-width: 86vw; text-align: center;
}
.social-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===========================================================
   局内表情
   =========================================================== */
.m-emojibtn {
  /* 跟「战况」按钮错开：后者在 safe-top + 92px，高度约 30px */
  top: calc(var(--safe-top) + 130px);
  color: var(--teal-1);
}
.m-emojitip {
  position: absolute; left: 12px; top: calc(var(--safe-top) + 168px); z-index: 26;
  background: rgba(240,192,74,.16); border: 1px solid rgba(240,192,74,.5);
  color: var(--gold-1); font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.m-emojitip.is-on { opacity: 1; }

.m-emojipanel {
  position: absolute; left: 10px; right: 10px; bottom: 232px; z-index: 26;
  background: rgba(9,22,36,.97); border: 1px solid var(--panel-line);
  border-radius: 14px; padding: 10px 12px 12px;
  box-shadow: 0 -12px 34px rgba(0,0,0,.5);
  display: none;
}
.m-emojipanel.is-on { display: block; animation: emoji-up .16s ease-out; }
@keyframes emoji-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.m-emojipanel__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--tx-3); margin-bottom: 8px;
}
.m-emojigrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.m-emojigrid__item {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 2px 4px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid transparent;
}
.m-emojigrid__item:active { background: rgba(79,214,200,.18); border-color: var(--teal-1); transform: scale(.93); }
.m-emojigrid__item span { font-size: 21px; line-height: 1.1; }
.m-emojigrid__item i { font-size: 8.5px; font-style: normal; color: var(--tx-3); }

/* 飞行中的贴纸 */
.m-emoji {
  position: absolute; z-index: 30; font-size: 34px; line-height: 1;
  transform: translate(-50%,-50%) scale(.4);
  transition: transform .48s cubic-bezier(.22,.9,.3,1), opacity .15s;
  pointer-events: none; will-change: transform;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
/* 砸中时的一圈冲击 */
.m-emoji-splat {
  position: absolute; z-index: 29; width: 14px; height: 14px;
  transform: translate(-50%,-50%); border-radius: 50%;
  pointer-events: none; animation: splat .6s ease-out forwards;
}
.m-emoji-splat--throw { background: radial-gradient(circle, rgba(255,140,60,.85), rgba(255,90,40,0) 70%); }
.m-emoji-splat--cheer { background: radial-gradient(circle, rgba(120,240,200,.8), rgba(90,220,180,0) 70%); }
@keyframes splat {
  0%   { width: 14px; height: 14px; opacity: .95; }
  100% { width: 86px; height: 86px; opacity: 0; }
}
/* 被砸中时画面抖一下 */
#s-match.is-hit { animation: m-hit .4s ease-out; }
@keyframes m-hit {
  0%,100% { transform: none; }
  20% { transform: translateX(-5px) rotate(-.35deg); }
  45% { transform: translateX(4px) rotate(.3deg); }
  70% { transform: translateX(-2px); }
}

/* ---------------- 首页钱包登录条 ---------------- */
.wallet-bar {
  display: none; align-items: center; gap: 8px;
  margin: 10px 12px 0; padding: 9px 13px; border-radius: 11px;
  font-size: 12.5px; cursor: pointer;
}
.wallet-bar.is-cta {
  display: flex;
  background: linear-gradient(90deg, rgba(240,192,74,.16), rgba(240,192,74,.06));
  border: 1px solid rgba(240,192,74,.42);
  color: var(--gold-1);
}
.wallet-bar.is-on {
  display: flex;
  background: rgba(79,214,200,.08);
  border: 1px solid rgba(79,214,200,.30);
  color: var(--teal-1);
}
.wallet-bar__hint { margin-left: auto; font-size: 11px; opacity: .78; }
.wallet-bar__ok { margin-left: auto; font-size: 11px; }

/* ---------------- 社交屏用到的通用工具类 ----------------
   （游戏 CSS 里原本没有这几个，之前误用了后台控制台的 .card/.row/.grow） */
.social-body .panel { padding: 13px 14px; margin-bottom: 11px; }
.social-body .row { display: flex; gap: 8px; align-items: center; }
.social-body .grow { flex: 1 1 auto; min-width: 0; }
.social-body .spacer { flex: 1 1 auto; }
.social-body .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.social-body .empty { padding: 16px 4px; color: var(--tx-3); font-size: 12.5px; line-height: 1.6; }
.social-body h3 { margin: 0 0 10px; font-size: 13px; color: var(--tx-2); display: flex; align-items: center; gap: 8px; }
.social-body input {
  width: 100%; background: rgba(8,24,38,.9); border: 1px solid var(--panel-line);
  border-radius: 9px; padding: 9px 12px; color: var(--tx-1); outline: none; font-size: 13px;
}
.social-body input:focus { border-color: var(--teal-1); }
.social-body button.sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }

/* 「战况 / 表情」并排一行 —— 之前各自绝对定位，第二个会压住战报第一行 */
.m-tools {
  position: absolute; left: 10px; top: calc(var(--safe-top) + 92px);
  display: flex; gap: 6px; z-index: 24;
}
.m-tools .m-sheetbtn {
  position: static; top: auto; left: auto;
}
.m-tools .m-emojibtn { color: var(--teal-1); }
.m-emojitip { top: calc(var(--safe-top) + 130px) !important; }

/* ===========================================================
   钱包登录选择面板
   =========================================================== */
.login-sheet-bg { position: fixed; inset: 0; background: rgba(3,8,14,.66); z-index: 80; animation: ls-fade .16s ease-out; }
@keyframes ls-fade { from { opacity: 0; } to { opacity: 1; } }
.login-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  background: linear-gradient(180deg, #12304a, #0b1a29);
  border-top: 1px solid var(--panel-line);
  border-radius: 18px 18px 0 0;
  padding: 14px 14px calc(18px + var(--safe-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
  animation: ls-up .22s cubic-bezier(.22,.9,.3,1);
}
@keyframes ls-up { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.login-sheet__head { display: flex; align-items: center; margin-bottom: 12px; }
.login-sheet__head b { font-size: 15px; }
.login-sheet__x {
  margin-left: auto; background: transparent; border: none; color: var(--tx-3);
  font-size: 17px; padding: 2px 8px; cursor: pointer;
}
.login-sheet__body { display: flex; flex-direction: column; gap: 10px; }

.ls-group { display: flex; flex-direction: column; gap: 7px; }
.ls-group__t { font-size: 11.5px; color: var(--tx-3); padding-left: 2px; }
.ls-row {
  display: flex; align-items: center; gap: 11px;
  background: rgba(8,24,38,.85); border: 1px solid var(--panel-line);
  border-radius: 12px; padding: 11px 13px; cursor: pointer;
}
.ls-row:active { background: rgba(79,214,200,.12); border-color: var(--teal-1); }
.ls-row.is-primary { background: rgba(79,214,200,.10); border-color: rgba(79,214,200,.45); }
.ls-row__icon { font-size: 21px; flex: 0 0 auto; width: 26px; text-align: center; }
.ls-row__meta { flex: 1 1 auto; min-width: 0; }
.ls-row__meta b { display: block; font-size: 13.5px; }
.ls-row__meta small { display: block; font-size: 11px; color: var(--tx-3); line-height: 1.4; margin-top: 1px; }
.ls-row__go { color: var(--tx-3); font-size: 17px; flex: 0 0 auto; }

.ls-note {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.5; color: var(--tx-3);
  background: rgba(79,214,200,.06); border: 1px solid rgba(79,214,200,.22);
  border-radius: 10px; padding: 9px 11px;
}
.ls-url {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.28); border: 1px solid var(--panel-line);
  border-radius: 9px; padding: 7px 9px;
}
.ls-url__text { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Menlo, monospace; }
.ls-url__btn { flex: 0 0 auto; font-size: 11px; padding: 4px 10px; border-radius: 7px; background: var(--panel-2, #16304a); border: 1px solid var(--panel-line); color: var(--tx-2); cursor: pointer; }
.ls-guest { background: transparent; border: 1px dashed var(--panel-line); color: var(--tx-3); border-radius: 11px; padding: 11px; font-size: 12.5px; cursor: pointer; }
.login-sheet__toast {
  position: sticky; bottom: 0; margin-top: 10px;
  background: rgba(79,214,200,.16); border: 1px solid rgba(79,214,200,.45);
  color: var(--teal-1); font-size: 12px; text-align: center;
  padding: 8px 12px; border-radius: 999px;
  opacity: 0; transition: opacity .18s;
}
.login-sheet__toast.is-on { opacity: 1; }

/* BSC 徽章 */
.wallet-bar__chain, .ls-chain {
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(240,192,74,.18); border: 1px solid rgba(240,192,74,.5);
  color: var(--gold-1); flex: 0 0 auto;
}
.ls-chain { margin-left: 9px; }

/* 钱包表加载中 */
.ls-row--loading { opacity: .6; }
.ls-row--loading .ls-row__meta b { font-weight: 500; }

/* ===========================================================
   单人入口 / 商城 / 背包
   =========================================================== */
.solo-card {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 12px 0; padding: 12px 14px; border-radius: 13px;
  background: linear-gradient(100deg, rgba(79,214,200,.16), rgba(79,214,200,.04));
  border: 1px solid rgba(79,214,200,.42);
  cursor: pointer;
}
.solo-card:active { transform: scale(.985); }
.solo-card__icon { font-size: 26px; flex: 0 0 auto; }
.solo-card__main { flex: 1 1 auto; min-width: 0; }
.solo-card__main b { display: block; font-size: 14.5px; color: var(--teal-1); }
.solo-card__main span { display: block; font-size: 11.5px; color: var(--tx-3); margin-top: 2px; }
.solo-card__go { flex: 0 0 auto; font-size: 12.5px; color: var(--teal-1); font-weight: 700; }

/* ---------------- 商城 ---------------- */
.shop-points { margin-left: auto; display: flex; align-items: baseline; gap: 3px; }
.shop-points__n { font-size: 17px; font-weight: 800; color: var(--gold-1); font-variant-numeric: tabular-nums; }
.shop-points__u { font-size: 10px; color: var(--tx-3); }

.shop-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
  padding: 9px 12px; background: rgba(6,18,30,.7);
  border-bottom: 1px solid var(--panel-line);
}
.shop-stat {
  text-align: center; border-radius: 9px; padding: 6px 2px 5px;
  background: rgba(255,255,255,.04); border: 1px solid transparent;
}
.shop-stat i { display: block; font-size: 13px; font-style: normal; opacity: .8; }
.shop-stat b { display: block; font-size: 12.5px; margin: 1px 0; font-variant-numeric: tabular-nums; }
.shop-stat span { display: block; font-size: 9.5px; color: var(--tx-3); }
.shop-stat.is-good { border-color: rgba(79,214,200,.35); background: rgba(79,214,200,.08); }
.shop-stat.is-good b { color: var(--teal-1); }
.shop-stat.is-bad { border-color: rgba(255,120,90,.3); background: rgba(255,120,90,.06); }
.shop-stat.is-bad b { color: #ff8a6a; }

.shop-body { flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 16px; }
.shop-tabs { display: flex; gap: 7px; margin-bottom: 9px; }
.shop-tab {
  flex: 1 1 auto; text-align: center; padding: 8px 4px; border-radius: 10px;
  background: rgba(8,24,38,.8); border: 1px solid var(--panel-line);
  font-size: 12.5px; cursor: pointer;
}
.shop-tab.is-on { border-color: var(--teal-1); background: rgba(79,214,200,.12); color: var(--teal-1); font-weight: 700; }
.shop-tab--bag { flex: 0 0 auto; padding-left: 12px; padding-right: 12px; }
.shop-hint { font-size: 11px; color: var(--tx-3); padding: 0 3px 9px; }

.shop-card {
  display: flex; align-items: stretch; gap: 11px;
  padding: 11px 12px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(8,24,38,.82); border: 1px solid var(--panel-line);
}
.shop-card.is-on { border-color: var(--teal-1); background: rgba(79,214,200,.08); }
.shop-card.is-own { border-color: rgba(240,192,74,.4); }
.shop-card.is-poor { opacity: .62; }
.shop-card__icon { font-size: 27px; flex: 0 0 auto; width: 34px; text-align: center; align-self: center; }
.shop-card__main { flex: 1 1 auto; min-width: 0; }
.shop-card__name { display: flex; align-items: center; gap: 6px; }
.shop-card__name b { font-size: 13.5px; }
.shop-card__desc { font-size: 11px; color: var(--tx-3); line-height: 1.45; margin: 3px 0 5px; }
.shop-card__gear { display: flex; flex-wrap: wrap; gap: 4px; }
.shop-card__g {
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(79,214,200,.12); color: var(--teal-1); border: 1px solid rgba(79,214,200,.3);
}
.shop-card__g.is-bad { background: rgba(255,120,90,.12); color: #ff8a6a; border-color: rgba(255,120,90,.3); }
.shop-card__right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.shop-buy {
  font-size: 12px; padding: 7px 12px; border-radius: 9px; white-space: nowrap;
  background: var(--gold-1); color: #16202c; border: none; font-weight: 700; cursor: pointer;
}
.shop-buy:disabled { background: rgba(255,255,255,.09); color: var(--tx-3); font-weight: 500; }
.shop-buy.is-own { background: rgba(240,192,74,.16); color: var(--gold-1); border: 1px solid rgba(240,192,74,.5); }
.shop-buy.is-on { background: rgba(79,214,200,.16); color: var(--teal-1); border: 1px solid var(--teal-1); }
.shop-more {
  font-size: 10.5px; padding: 3px 8px; border-radius: 7px;
  background: rgba(255,255,255,.06); color: var(--tx-2);
  border: 1px solid var(--panel-line); cursor: pointer;
}

/* ---------------- 背包 ---------------- */
.bag-head { padding: 12px 14px 8px; }
.bag-title { font-size: 17px; font-weight: 800; }
.bag-count { font-size: 12.5px; color: var(--tx-3); }
.bag-sub { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--tx-3); margin-top: 6px; }
.bag-quota { color: var(--gold-1); }
.bag-quota.is-out { color: #ff8a6a; }
.bag-filter { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 8px; }
.bag-chip {
  flex: 0 0 auto; font-size: 11.5px; padding: 5px 11px; border-radius: 999px;
  background: rgba(8,24,38,.85); border: 1px solid var(--panel-line); cursor: pointer;
}
.bag-chip.is-on { border-color: var(--teal-1); background: rgba(79,214,200,.14); font-weight: 700; }
.bag-list { flex: 1 1 auto; overflow-y: auto; padding: 0 12px 10px; }
.bag-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 7px; border-radius: 11px;
  background: rgba(8,24,38,.82); border: 1px solid var(--panel-line);
  border-left: 3px solid var(--rar, var(--panel-line));
  cursor: pointer; position: relative;
}
.bag-item.is-picked { border-color: var(--teal-1); background: rgba(79,214,200,.10); }
.bag-item__thumb { width: 42px; height: 42px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.bag-item__thumb canvas, .bag-item__thumb img { max-width: 42px; max-height: 42px; }
.bag-item__main { flex: 1 1 auto; min-width: 0; }
.bag-item__name { display: flex; align-items: center; gap: 6px; }
.bag-item__name b { font-size: 13px; }
.bag-item__rar { font-size: 10px; font-weight: 700; }
.bag-item__score { flex: 0 0 auto; text-align: right; }
.bag-item__score b { display: block; font-size: 14px; color: var(--gold-1); font-variant-numeric: tabular-nums; }
.bag-item__score span { display: block; font-size: 10px; color: var(--tx-3); }
.bag-item__check {
  position: absolute; right: 8px; top: 8px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--teal-1); color: #06121e; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.bag-actions {
  display: flex; gap: 8px; padding: 9px 12px calc(9px + var(--safe-bottom, 0px));
  border-top: 1px solid var(--panel-line); background: rgba(6,18,30,.9);
}

/* 背包使用一个纵向滚动区；导航占据实际高度，操作按钮不被覆盖。 */
#s-bag .bag-body { display:flex; flex-direction:column; touch-action:pan-y; }
#s-bag .bag-head,#s-bag .bag-filter { flex:0 0 auto; }
#s-bag .bag-sub { display:grid; grid-template-columns:1fr; gap:8px; font-size:12px; line-height:1.6; }
#s-bag .bag-sub .spacer { display:none; }
#s-bag .bag-quota { padding:8px 10px; border:1px solid #254959; background:#0b2432; border-radius:10px; color:#f6dea0; }
#s-bag .bag-quota.is-out { color:#b4cbd9; }
#s-bag .bag-filter { padding-top:4px; }
#s-bag .bag-chip { min-height:44px; border:1px solid #294656; color:#bcd8e8; }
#s-bag .bag-list { flex:1 0 auto; overflow:visible; min-height:180px; }
#s-bag .bag-actions { flex:0 0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px 12px; gap:8px; }
#s-bag .bag-actions>button:first-child { grid-column:1/-1; }
#s-bag .bag-actions button { min-width:0; min-height:48px; padding:10px 8px; font-size:13px; line-height:1.4; letter-spacing:0; overflow-wrap:anywhere; }
#s-bag .tabbar { position:relative; inset:auto; flex:0 0 auto; min-height:64px; }
#s-bag .tab { min-height:44px; }
#s-bag button:focus-visible { outline:2px solid #69ddd8; outline-offset:2px; }

/* 底部导航从 5 项加到 6 项（把占位的「赛事」换成「商城」、并加「背包」）。
   .tabbar 原来写死 repeat(5, 1fr)，第 6 项会掉到第二行。
   改成 auto-fit 让列数跟着项数走 —— 以后再加一个也不会换行。 */
.tabbar { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.tab { font-size: 10px; padding: 4px 1px; }
.tab__icon { font-size: 18px; }

/* ===========================================================
   编辑资料（昵称 / 头像）
   -----------------------------------------------------------
   从底部升起，带缓动 —— 参考 iOS 的 sheet。
   关键是**别用 linear**：线性动画看着很"网页"，
   cubic-bezier(.32,.72,0,1) 才是苹果那种「快进慢停」的手感。
   =========================================================== */
.prof-edit {
  flex: 0 0 auto; align-self: flex-start;
  font-size: 12px; padding: 5px 13px; border-radius: 999px;
  background: rgba(79,214,200,.12); color: var(--teal-1);
  border: 1px solid rgba(79,214,200,.4); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.prof-edit:active { transform: scale(.94); }

.prof-sheet {
  position: fixed; inset: 0; z-index: 120;
  pointer-events: none; opacity: 0;
  transition: opacity .26s ease;
}
.prof-sheet.is-on { pointer-events: auto; opacity: 1; }
.prof-sheet__mask {
  position: absolute; inset: 0;
  background: rgba(2,8,14,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.prof-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 18px calc(20px + var(--safe-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #0d2233 0%, #081724 100%);
  border-top: 1px solid rgba(120,205,225,.18);
  box-shadow: 0 -18px 50px rgba(0,0,0,.55);
  transform: translateY(102%);
  transition: transform .34s cubic-bezier(.32,.72,0,1);
}
.prof-sheet.is-on .prof-sheet__panel { transform: translateY(0); }
/* 顶部那根"抓手"，iOS 的标志性细节 */
.prof-sheet__bar {
  width: 38px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.22); margin: 4px auto 12px;
}
.prof-sheet__title { font-size: 16px; font-weight: 800; text-align: center; margin-bottom: 14px; }

.prof-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.prof-preview__av {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 38px;
  background: radial-gradient(circle at 50% 35%, rgba(79,214,200,.22), rgba(8,24,38,.9));
  border: 2px solid rgba(79,214,200,.45);
}
.prof-preview__name { font-size: 15px; font-weight: 700; color: var(--tx-1); }

.prof-label { font-size: 11.5px; color: var(--tx-3); margin: 0 2px 7px; }
.prof-input {
  width: 100%; box-sizing: border-box;
  background: rgba(8,24,38,.9); border: 1px solid var(--panel-line);
  color: var(--tx-1); border-radius: 12px; padding: 12px 14px;
  font-size: 15px; margin-bottom: 18px;
  transition: border-color .18s ease;
}
.prof-input:focus { outline: none; border-color: var(--teal-1); }

.prof-avatars {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 20px;
}
.prof-av {
  aspect-ratio: 1; border-radius: 12px; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,24,38,.85); border: 1px solid var(--panel-line);
  cursor: pointer;
  /* 只动画 transform / border-color，不碰 layout —— 点起来才跟手 */
  transition: transform .14s cubic-bezier(.32,.72,0,1), border-color .14s ease, background .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.prof-av:active { transform: scale(.9); }
.prof-av.is-on {
  border-color: var(--teal-1); background: rgba(79,214,200,.16);
  transform: scale(1.06);
}
.prof-actions { display: flex; gap: 9px; }
.prof-hint { font-size: 10.5px; color: var(--tx-3); text-align: center; margin-top: 11px; line-height: 1.5; }

/* ===========================================================
   滚动：苹果那种"丝滑"
   -----------------------------------------------------------
   三件事：
     1. 惯性滚动（iOS 上 -webkit-overflow-scrolling）
     2. 滚动容器不吃掉整页的手势（overscroll-behavior）
     3. 隐藏滚动条但保留滚动能力 —— 滚动条本身就很"网页"
   =========================================================== */
.scroll-y, .rs-body, .shop-body, .bag-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.scroll-y::-webkit-scrollbar,
.rs-body::-webkit-scrollbar,
.shop-body::-webkit-scrollbar,
.bag-list::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* 点击反馈统一：所有可点元素都不要那层蓝色高亮，
   改成自己的 scale 反馈 —— 这是"原生感"最明显的一处 */
.tab, .shop-tab, .bag-chip, .set-row, .lobby-seat, .tier-chip {
  -webkit-tap-highlight-color: transparent;
}
.tab:active, .shop-tab:active, .bag-chip:active, .tier-chip:active { transform: scale(.96); }

/* ===========================================================
   对局屏：单人 vs 组局
   -----------------------------------------------------------
   两套配色。目的不是好看，是让玩家**瞥一眼就知道自己在哪种局里** ——
   这决定了要不要拼命。单人局是安静的青绿，组局是绷紧的暖金。
   =========================================================== */
.match--solo {
  --accent: #4fd6c8;
  background: radial-gradient(120% 80% at 50% 0%, #0b2a33 0%, var(--bg-0) 70%);
}
.match--versus {
  --accent: #f0c04a;
  background: radial-gradient(120% 80% at 50% 0%, #2a1f0e 0%, var(--bg-0) 70%);
}

/* 单人的脚注和退出按钮走青绿，组局走金 */
.match--solo .m-footnote { border-left-color: var(--teal-1) !important; }
.match--solo .m-quit { border-color: rgba(79,214,200,.45); color: var(--teal-1); }
.match--versus .m-quit { border-color: rgba(240,192,74,.4); color: var(--gold-2); }

/* 组局：顶部座位条压一条金线，暗示"这是一场比赛" */
.match--versus .m-top { border-bottom: 1px solid rgba(240,192,74,.22); }
.match--solo .m-top { border-bottom: 1px solid rgba(79,214,200,.18); }

/* 单人：把顶部座位条淡化，别让它抢注意力（就你一个人） */
.match--solo .match-strip { opacity: .55; }

/* 组局：自己的排名面板加一点存在感 */
.match--versus .m-rank { border-color: rgba(240,192,74,.3); }

/* 单人：右下角放一个"本次渔获"计数，代替排名带来的反馈 */
.match--solo .m-quit { font-weight: 600; }

/* 张力/体力条也跟着换色，让"这是哪一局"渗透到每个角落 */
.match--solo .m-gauge__fill { background: linear-gradient(90deg, #2aa89c, #4fd6c8); }
.match--versus .m-gauge__fill { background: linear-gradient(90deg, #d4a032, #f0c04a); }

/* 结果屏：每个人拿了多少奖 + 高亮自己那行 */
.rs-row__prize {
  flex: 0 0 auto; min-width: 52px; text-align: right;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--tx-3);
}
.rs-row__prize.is-win { color: var(--gold-2); font-weight: 700; }
/* 自己那行：左边一条金线 + 淡底，扫一眼就能找到 */
.rs-row--me {
  background: linear-gradient(90deg, rgba(240,192,74,.12), transparent 70%);
  border-left: 2px solid var(--gold-2);
  margin-left: -2px;
}

/* ===========================================================
   观感柔化层
   -----------------------------------------------------------
   上一版的界面偏「硬」，来源有三个，都是可以量化的：

     1. **每个面板都有 1px 青色描边**（rgba(120,205,225,.16)）
        —— 满屏都是一样粗细的亮边，看起来像表格线，不像卡片
     2. **阴影太重**（0 8px 28px rgba(0,0,0,.45)）
        —— 重阴影 + 亮描边 = 硬边，视觉上"硌手"
     3. **间距偏紧**（面板 13/14px 内边距、11px 外间距）
        加上大量 11px 的说明文字，密度过高

   做法：描边压到几乎看不见（靠背景明度差来分隔），阴影改成
   大范围低透明度（柔和光晕感），间距各加 2~4px。
   **不动任何尺寸类的布局属性** —— 屏是绝对定位 + 内部滚动的，
   改宽高容易撑破。
   =========================================================== */

:root {
  /* 描边：从「可见的线」压到「几乎只是暗示」 */
  --panel-line: rgba(140, 210, 230, 0.085);
  --panel-line-strong: rgba(140, 220, 240, 0.22);

  /* 阴影：范围更大、透明度更低 —— 是晕开而不是切边 */
  --shadow-panel: 0 10px 34px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.18);

  /* 次要文字收一点，长段小字不那么扎眼 */
  --tx-2: #9fb6c6;
  --tx-3: #64808f;
}

/* 面板：去掉硬边，改成顶部一道极淡的高光 + 更透的底 */
.panel {
  background: linear-gradient(180deg, rgba(14, 33, 49, 0.62), rgba(7, 19, 30, 0.72));
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-panel);
}

/* 列表行：不描边，靠间距和悬停区分 —— 一排排描边最显硬 */
.set-row { border-bottom-color: rgba(140, 210, 230, 0.06); }
.set-row:last-child { border-bottom: none; }

/* 间距松一点（只加，不减，不会撑破） */
.panel { padding: 15px 16px; margin-bottom: 13px; }

/* 小字：行高放开，字距收一点，读起来松弛 */
.disclaimer, .dex-sub, .mm-hint, .prof-hint, .shop-hint {
  line-height: 1.75;
  letter-spacing: 0.1px;
}

/* 可点元素的反馈更柔：用短期缓动而不是瞬变 */
.tab, .shop-tab, .bag-chip, .set-row, .tier-chip, .lobby-seat, .shop-card, .bag-item {
  transition: transform .18s cubic-bezier(.32,.72,0,1),
              background .18s ease, border-color .18s ease;
}

/* 主按钮：加一点内高光和更大的圆角，别像一块方砖 */
.btn-gold {
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(236, 205, 133, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-gold:active { transform: scale(.975); box-shadow: 0 3px 10px rgba(236, 205, 133, 0.12); }
.btn-ghost {
  border-radius: 13px;
  border-color: rgba(140, 210, 230, 0.14);
}
.btn-ghost:active { transform: scale(.975); }

/* 标题与正文拉开层级：标题更大更松，正文更软 */
.section-title__t, .dex-title, .mm-top__title { letter-spacing: 0.3px; }
/* Account funding and records */
.funds-panel { padding:16px; margin-bottom:12px; }
.funds-panel h3 { margin:0; }
.funds-panel button { min-height:44px; cursor:pointer; }
.funds-panel button:disabled { opacity:.5; cursor:wait; }
.funds-panel button:focus-visible,.funds-panel input:focus-visible { outline:2px solid var(--teal-2); outline-offset:3px; }
.funds-balances { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin:16px 0; }
.funds-balances span,.funds-balances b { display:block; }
.funds-balances b { font-size:22px; margin-top:4px; overflow-wrap:anywhere; }
.funds-tabs { display:flex; gap:8px; margin:16px 0; }
.funds-tabs button { flex:1; border-radius:10px; }
.funds-tabs .is-on { color:var(--teal-2); border-color:var(--teal-2); }
.funds-form { display:grid; gap:10px; }
.funds-presets { display:flex; gap:8px; }
.funds-presets button { flex:1; }
.funds-form p { margin:0; line-height:1.6; font-size:14px; }
.funds-form input { width:100%; min-height:44px; }
.funds-address { display:grid; gap:8px; padding:12px; background:rgba(0,0,0,.16); border-radius:10px; }
.funds-panel code { overflow-wrap:anywhere; font-size:13px; user-select:text; }
.funds-form summary { cursor:pointer; padding:12px 0; }
.funds-row { display:grid; gap:8px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:13px; overflow-wrap:anywhere; }
.funds-row .between { gap:8px; flex-wrap:wrap; }
.funds-row a { min-height:44px; display:flex; align-items:center; color:var(--teal-2); }
.funds-empty { padding:24px 0; text-align:center; }
.funds-message { margin-top:12px; line-height:1.5; font-size:14px; }
.invite-team-controls { display:grid; gap:10px; margin:16px 0; }
.invite-team-controls input,.invite-team-controls select { min-height:44px; width:100%; min-width:0; border:1px solid #294455; border-radius:10px; padding:10px; background:var(--bg-0); color:var(--text-0,#eaf6ff); }
.invite-team button,.invite-team summary { min-height:44px; }
.invite-team summary { cursor:pointer; padding:12px 0; }
.invite-team h3 { margin:0; }
.invite-team .funds-balances b { font-size:19px; }
/* Account artwork supplied by the project owner; all changing values remain live DOM. */
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.ocean-icon { display:inline-flex; width:22px; height:22px; flex:0 0 auto; align-items:center; justify-content:center; }
.ocean-icon svg { width:100%; height:100%; display:block; }
#s-mine { background:#00101c!important; }
#s-mine .mine-body { padding:0 10px 24px; background:radial-gradient(ellipse at 95% 0,rgba(0,158,199,.22),transparent 34%),#00101c; }
.mine-ocean-header { position:relative; width:100%; aspect-ratio:4.82; background:url('/public/assets/account/header.webp') center/100% 100% no-repeat; margin:8px 0 10px; }
.mine-settings-button { position:absolute; right:3%; top:12%; width:12%; height:74%; min-width:44px; min-height:44px; background:transparent; border:0; border-radius:50%; cursor:pointer; }
.mine-settings-button:focus-visible { outline:2px solid #ffda77; }
.mine-profile { position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; min-height:148px; border:1px solid #35d5e0; border-radius:20px; padding:13px 12px; margin-bottom:12px; overflow:hidden; background:linear-gradient(180deg,rgba(0,78,95,.42),rgba(0,20,31,.36)),url('/public/assets/account/ocean.webp') center top/cover no-repeat; box-shadow:inset 0 0 18px rgba(44,211,235,.15); }
.mine-profile::before { content:''; position:absolute; inset:auto 0 0; height:48px; background:url('/public/assets/account/profile-wave.webp') center/100% 100% no-repeat; opacity:.85; pointer-events:none; }
.mine-avatar-column,.mine-identity,.mine-usdt { position:relative; z-index:1; }
.mine-avatar .hud-avatar { width:64px; height:64px; border:2px solid #74eff0; background:radial-gradient(circle at 50% 25%,#155f77,#001e35); box-shadow:0 0 14px rgba(0,216,230,.22); }
.mine-level { position:relative; display:block; width:46px; text-align:center; margin:-6px auto 0; padding:3px 4px; border:1px solid #ffee9d; border-radius:7px; color:#241601; font-size:12px; font-weight:800; background:linear-gradient(#fff1b3,#e5a838); }
.mine-name-line { display:flex; align-items:center; gap:3px; padding-right:83px; height:30px; }
#s-mine .mine-name { font-size:17px!important; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mine-copy-name { background:transparent; border:0; padding:0; min-width:26px; height:44px; color:#b2dced; cursor:pointer; }
.mine-copy-name .ocean-icon { width:16px; height:16px; }
#s-mine .mine-user-id { min-height:38px!important; padding:6px 8px!important; margin:3px 0; color:#c6e8f4; background:rgba(0,22,38,.7); border:1px solid rgba(26,145,173,.5); border-radius:9px; font-size:11px!important; max-width:100%; overflow-wrap:anywhere; }
.mine-user-id::after { content:' ⧉'; color:#d6f1fb; }
.mine-played { display:block; font-size:11px; color:#d8edf3; margin-top:4px; }
#s-mine .prof-edit { position:absolute; top:13px; right:12px; min-height:36px; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 10px; border:1px solid #41c4d8; color:#e4f7fc; background:linear-gradient(160deg,rgba(20,110,128,.66),rgba(0,32,51,.75)); border-radius:22px; z-index:2; font-size:11px; }
#s-mine .prof-edit .ocean-icon { width:14px; height:14px; }
.mine-usdt { position:absolute; right:13px; bottom:12px; text-align:right; }
.mine-usdt>span { color:#b7dcea; font-size:12px; }
.mine-usdt>div { display:flex; align-items:center; gap:7px; }
.mine-usdt-value { color:#ffe491; font-size:28px; font-weight:900; letter-spacing:.2px; text-shadow:0 2px 12px rgba(241,189,78,.16); }
.mine-usdt button { min-width:28px; height:34px; padding:0; border:0; background:transparent; color:#a8ccdf; cursor:pointer; }
.mine-usdt button .ocean-icon { width:17px; height:17px; }
#s-mine .mine-body>.panel { border-color:#175a72; border-radius:18px; background:linear-gradient(150deg,rgba(1,46,68,.9),rgba(0,12,24,.96)); }
.funds-panel[aria-label='USDT 账户'] { background:linear-gradient(160deg,rgba(0,49,72,.65),rgba(0,15,28,.94)),url('/public/assets/account/ocean.webp') center top/100% auto no-repeat!important; border:1px solid #15536b; border-radius:20px; padding:14px 12px; box-shadow:inset 0 0 20px rgba(16,118,153,.12); }
.funds-heading { margin:0 0 12px; gap:8px; }
.funds-heading h3 { font-size:20px; margin:0; letter-spacing:.1px; }
.funds-heading button { display:flex; align-items:center; gap:6px; color:#e6f7ff; border:1px solid #229abd; border-radius:22px; background:linear-gradient(140deg,#073649,#011827); font-size:12px; padding:8px 11px; }
.funds-heading .ocean-icon { width:19px; height:19px; }
.funds-panel[aria-label='USDT 账户']>.funds-balances { padding:14px 8px; margin:0 0 12px; border:1px solid #25bcd7; border-radius:14px; gap:10px; background:linear-gradient(rgba(0,54,76,.5),rgba(0,22,40,.85)),url('/public/assets/account/water-edge.webp') top/100% 100% no-repeat; box-shadow:inset 0 0 15px rgba(4,152,191,.17); }
.funds-balance { display:flex; gap:8px; align-items:center; justify-content:center; min-width:0; }
.funds-balance+.funds-balance { border-left:1px solid #2c657d; }
.funds-balance .ocean-icon { color:#d2eff9; width:22px; height:22px; }
.funds-balance+.funds-balance .ocean-icon { color:#ffe18a; }
.funds-panel .funds-balance .dim { font-size:12px; color:#a6ccdf; }
.funds-panel .funds-balance b { font-size:25px; white-space:nowrap; font-weight:850; }
.funds-tabs { gap:7px; margin:10px 0 13px; }
.funds-tabs button { display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; gap:6px; min-height:43px; border:1px solid #1a6078; border-radius:12px; color:#e8f6ff; font-size:13px; font-weight:700; background:linear-gradient(160deg,#0b3248,#00131f); }
.funds-tabs button.is-on { color:#001b2a; border-color:#dcffe8; background:linear-gradient(#58e5ff,#09b8c6); box-shadow:0 0 13px rgba(98,241,218,.3),inset 0 0 10px #b4ffff; }
.funds-instruction { display:flex; gap:10px; align-items:flex-start; color:#abcfe0; }
.funds-instruction .ocean-icon { width:17px; height:20px; color:#20d9d9; margin-top:3px; }
.funds-form { gap:10px; }
.funds-form p { font-size:12px; }
.funds-amount-label { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:750; margin-top:3px; }
.usdt-mark { display:flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:linear-gradient(145deg,#35c9a9,#00947c); color:#eafff6; font-size:19px; }
.funds-amount-input { position:relative; }
.funds-amount-input>span { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#b0d4e5; font-size:13px; pointer-events:none; }
.funds-form input,.funds-form select { border:1px solid #25647b; border-radius:11px; min-height:46px; background:linear-gradient(150deg,#082b3f,#031321); color:#eef8ff; padding:10px 13px; font-size:16px; }
.funds-amount-input input { font-size:23px; font-weight:800; padding-right:74px; }
.funds-presets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:3px; }
.funds-presets button { min-height:36px; border:1px solid #226179; color:#e2f4ff; border-radius:10px; background:linear-gradient(145deg,#07354d,#001827); font-size:14px; font-weight:700; padding:6px; }
.funds-presets button.is-on { color:#fff0b3; border-color:#ffe089; box-shadow:inset 0 0 12px rgba(229,187,65,.15),0 0 8px rgba(255,202,72,.22); background:linear-gradient(160deg,#304338,#032236); }
.funds-form .funds-confirm { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:49px; margin:0 0 7px; border:1px solid #fff0b5; border-radius:13px; color:#201200; font-size:19px; font-weight:900; background:linear-gradient(100deg,rgba(255,237,134,.1),rgba(246,192,79,.32)),url('/public/assets/account/gold-texture.webp') center/100% 100% no-repeat; box-shadow:0 0 15px rgba(255,214,106,.24),inset 0 0 6px #fff0a5; }
.funds-confirm .ocean-icon { width:23px; height:23px; border-radius:50%; background:#241904; border:1px solid #fff3c8; color:#ffecad; padding:4px; }
.funds-disclosure { border:1px solid #194f66; border-radius:13px; background:linear-gradient(135deg,rgba(3,45,65,.65),rgba(0,15,28,.82)); padding:0 12px; }
.funds-form .funds-disclosure summary { display:flex; align-items:center; gap:12px; list-style:none; min-height:43px; padding:9px 0; font-size:12px; color:#e3f5ff; }
.funds-disclosure summary::-webkit-details-marker { display:none; }
.funds-disclosure summary .ocean-icon { width:20px; height:20px; color:#a9cee5; }
.funds-disclosure summary>span:nth-child(2) { flex:1; }
.funds-disclosure summary>.ocean-icon:last-child { width:13px; height:13px; transition:transform .2s; }
.funds-disclosure[open] summary>.ocean-icon:last-child { transform:rotate(90deg); }
.funds-disclosure>p,.funds-disclosure>.funds-form { padding:0 0 12px; }
.funds-disclosure input,.funds-disclosure code { margin-bottom:8px; }
.funds-disclosure .funds-address { gap:6px; margin:4px 0 10px; }
.funds-message:empty { display:none; }
.mine-bottom-nav { flex:0 0 auto; position:relative; z-index:10; display:grid; grid-template-columns:repeat(6,1fr); aspect-ratio:6.38; min-height:62px; padding:0 18px env(safe-area-inset-bottom,0px); background:url('/public/assets/account/navigation.webp') center/100% 100% no-repeat; margin:0 2px 4px; }
.mine-nav-item { background:transparent; border:0; min-height:44px; cursor:pointer; border-radius:14px; }
.mine-nav-item:focus-visible { outline:2px solid #ffdf8d; outline-offset:-4px; }
@media(max-width:360px) { .mine-profile { grid-template-columns:56px minmax(0,1fr); gap:8px; padding:12px 9px; }.mine-avatar .hud-avatar { width:56px; height:56px; } #s-mine .mine-name { font-size:15px!important; }.funds-panel .funds-balance b { font-size:21px; }.funds-balance { gap:5px; }.funds-balance .ocean-icon { width:17px; }.funds-heading h3 { font-size:18px; }.mine-name-line { padding-right:80px; }.mine-usdt-value { font-size:26px; } }
.funds-form input,.funds-form select { box-sizing:border-box; min-width:0; max-width:100%; }
#s-mine .prof-edit { min-height:44px; }
#s-mine .mine-user-id { min-height:44px!important; }
.mine-copy-name,.mine-usdt button { position:relative; }
.mine-copy-name::before,.mine-usdt button::before { content:''; position:absolute; inset:-6px; }

/* 首页素材版：全页滚动、固定底部导航，账户和经济数字由服务端同步。 */
#s-home.home-ocean { background:#020b14; }
#s-home .home-body { margin:0; padding:10px 12px 16px; gap:10px; overflow-x:hidden; }
#s-home .wallet-bar { margin:0; width:100%; padding:10px 12px; min-height:44px; border:1px solid #bda363; border-radius:13px; background:linear-gradient(100deg,#3d362677,#07131c); color:#ffe8a2; display:flex; align-items:center; gap:8px; text-align:left; box-shadow:0 0 10px #f9de8c18; font-size:14px; }
#s-home .wallet-bar .ocean-icon { width:22px; }
#s-home .wallet-bar__hint { font-size:10px; }
#s-home .home-registration { border:1px solid #264050; border-radius:10px; }
#s-home .home-registration summary { min-height:44px; padding:12px; color:#b7ceda; font-size:12px; cursor:pointer; }
#s-home .home-registration .registration-referral { margin:0; padding:0 10px 10px; }
#s-home .home-registration[hidden] { display:none; }
#s-home .solo-card { margin:0; width:100%; min-height:66px; padding:5px 10px 5px 2px; text-align:left; display:flex; align-items:center; gap:6px; border:1px solid #34d2e7; border-radius:14px; background:linear-gradient(100deg,#004a6399,#00152377),url('/public/assets/account/ocean.webp') center/cover; box-shadow:inset 0 0 10px #00cafa44; }
#s-home .solo-card__icon { width:49px; height:56px; object-fit:cover; }
#s-home .solo-card__main b { font-size:19px; color:#6df4fa; }
#s-home .solo-card__main span { font-size:10px; color:#b5d5e7; line-height:1.5; }
#s-home .solo-card__go { border:1px solid #87ffff; min-height:44px; padding:10px 12px; border-radius:20px; background:linear-gradient(140deg,#7cffff,#16d3e5); color:#00232c; font-size:15px; box-shadow:0 0 15px #1ed8ec66; }
#s-home .hud-top { position:relative; padding:0; gap:5px; align-items:center; width:100%; }
#s-home .home-profile { display:flex; align-items:center; gap:8px; text-align:left; min-width:0; flex:1; border:0; background:transparent; padding:0; min-height:48px; }
#s-home .hud-avatar { width:44px; height:44px; border-color:#ffe091; }
#s-home .hud-avatar img { width:100%; height:100%; object-fit:cover; }
#s-home .hud-who { min-width:0; gap:3px; }
#s-home .hud-who__row { gap:4px; min-width:0; flex-wrap:wrap; }
#s-home .hud-who__name { max-width:100px; text-overflow:ellipsis; overflow:hidden; font-size:14px; }
#s-home .badge-vip { font-size:11px; border-radius:12px; padding:3px 7px; }
#s-home .hud-who>.dim { font-size:9px!important; white-space:normal!important; color:#98b3c8; }
#s-home .hud-balance { flex:0 0 auto; padding:6px 8px; gap:5px; border:1px solid #bba469; background:linear-gradient(150deg,#26301f88,#071623); box-shadow:inset 0 0 8px #edc96033; }
#s-home .hud-balance__num { font-size:17px; }
#s-home .hud-balance__unit { font-size:11px; }
#s-home .home-coin { width:20px; height:22px; order:-1; object-fit:contain; }
#s-home .home-topup { border:0; border-radius:50%; background:linear-gradient(#fff1a8,#edc16a); color:#372500; font-size:20px; padding:0; width:25px; height:25px; position:relative; cursor:pointer; }
#s-home .home-topup::before { content:''; position:absolute; inset:-10px; }
#s-home .hud-bell { border:0; background:none; width:30px; min-width:30px; height:44px; padding:0; }
#s-home .hud-bell img { width:30px; height:33px; object-fit:contain; }
#s-home .hud-bell::after { display:none; }
#s-home .home-hero { height:auto; min-height:0; aspect-ratio:853/500; margin:-5px -12px 0; width:calc(100% + 24px); }
#s-home .home-hero__img { position:relative; width:100%; height:auto; display:block; object-fit:contain; }
#s-home .hero-fallback,#s-home .home-hero__shade { display:none; }
#s-home .home-seats { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; padding:8px; border:1px solid #21546b; border-radius:13px; background:linear-gradient(110deg,#0b3042,#00131e); }
#s-home .home-seat { display:flex; justify-content:center; align-items:center; background:none; border:0; min-width:0; padding:0; min-height:35px; cursor:pointer; }
#s-home .home-seat .p-slot { width:100%; max-width:34px; flex:1; font-size:17px; }
#s-home .home-seat-open { border:1px dashed #446f82; border-radius:50%; color:#8badc2; font-size:20px; align-self:center; aspect-ratio:1; min-height:0; position:relative; }
#s-home .home-seat-open::before { content:''; position:absolute; inset:-6px -1px; }
#s-home .tier-row { border:1px solid #22506a; border-radius:14px; padding:6px; overflow:visible; gap:8px; display:flex; }
#s-home .tier-row .tier-chip { flex:1; min-width:0; min-height:60px; padding:8px 3px; border-radius:12px; cursor:pointer; }
#s-home .tier-row .tier-chip--on { border-color:#ffd77b; box-shadow:inset 0 0 6px #ffc84777,0 0 12px #e9bf5155; background:linear-gradient(150deg,#292817,#0a1d27); }
#s-home .tier-row .tier-chip--free { border-color:#216b7b; background:#00374966; }
#s-home .tier-row .tier-chip--free.tier-chip--on { border-color:#5ceafa; box-shadow:0 0 10px #29bdd455; }
#s-home .tier-chip__short { font-size:22px; }
#s-home .tier-chip__name { font-size:12px; }
#s-home .home-body>.btn-gold { min-height:55px; padding:12px; font-size:24px; font-weight:900; color:#281900; border-radius:32px; border:2px solid #fff0a0; background:linear-gradient(140deg,#ffeda0,#eabc52); box-shadow:inset 0 0 8px #fff8bd,0 0 15px #e8bf5a66; overflow:hidden; }
#s-home .home-body>.btn-gold::after { content:''; position:absolute; right:0; top:0; bottom:0; width:95px; pointer-events:none; opacity:.65; background:url('/public/assets/home/button-fish.webp') right center/100% 100% no-repeat; mask-image:linear-gradient(90deg,transparent,#000 55%); }
#s-home .home-body>.btn-gold:disabled { opacity:.65; font-size:18px; }
#s-home .home-detail { border:1px solid #1e455b; border-radius:12px; background:#071924; }
#s-home .home-detail summary { min-height:44px; padding:12px; color:#aacae0; font-size:12px; cursor:pointer; }
#s-home .home-detail .tier-detail { margin:0 8px 8px; }
#s-home .home-rewards { border:1px solid #2f7590; border-radius:15px; padding:8px; background:linear-gradient(135deg,#042b3e99,#02111c); }
#s-home .section-title { margin:0; align-items:center; }
#s-home .section-title__t { font-size:16px; color:#ffe198; font-weight:800; }
#s-home .section-title__more { font-size:11px; color:#bcd2e2; background:transparent; border:0; padding:4px; }
#s-home .bounty-grid { gap:6px; }
#s-home .bounty { overflow:hidden; padding:0 5px 0 0; position:relative; min-height:82px; border:1px solid #aa8945; border-radius:12px; background:linear-gradient(120deg,#3d301b,#07141d); gap:3px; }
#s-home .bounty:nth-child(2) { border-color:#327da3; background:linear-gradient(120deg,#0a395b,#07141d); }
#s-home .bounty:nth-child(3) { border-color:#9c623e; background:linear-gradient(120deg,#3c231f,#07141d); }
#s-home .bounty__medal { width:40%; height:83px; object-fit:cover; flex:0 0 auto; border-radius:11px 0 0 11px; }
#s-home .bounty__meta { min-width:0; }
#s-home .bounty__rank { font-size:12px; color:#eedcaf; }
#s-home .bounty__val { font-size:20px; color:#ffe091; }
#s-home .bounty__pct { font-size:9px; color:#c1d7e6; white-space:nowrap; }
#s-home .bounty--wide { padding:12px; background:linear-gradient(140deg,#003648,#06131c); border-color:#216f80; }
#s-home .bounty--wide .bounty__medal { width:32px; height:auto; font-size:26px; }
#s-home .bounty--wide .bounty__val { font-size:18px; color:#fff0b2; }
#s-home .quick-grid { gap:8px; }
#s-home .quick { padding:0 7px 0 0; gap:5px; min-height:66px; border:1px solid #28758d; border-radius:14px; background:linear-gradient(110deg,#003449aa,#021622),url('/public/assets/account/ocean.webp') center/cover; text-align:left; cursor:pointer; color:#edf7ff; }
#s-home .quick__icon { width:43px; height:62px; object-fit:cover; flex:0 0 auto; border-radius:13px 0 0 13px; }
#s-home .quick__title { font-size:13px; }
#s-home .quick__big { font-size:19px; }
#s-home .quick__sub { font-size:10px; color:#b3cbdc; }
#s-home .home-bottom-nav { display:grid; grid-template-columns:repeat(6,1fr); width:100%; aspect-ratio:853/152; max-height:80px; min-height:64px; padding:0 10px env(safe-area-inset-bottom,0px); flex:0 0 auto; z-index:10; background:url('/public/assets/home/navigation.webp') center/100% 100% no-repeat; }
#s-home .home-nav-item { min-height:44px; border:0; background:transparent; cursor:pointer; border-radius:14px; }
#s-home button:focus-visible,#s-home summary:focus-visible { outline:2px solid #ffe18c; outline-offset:2px; }
@media(max-width:360px) { #s-home .home-body { padding-left:9px; padding-right:9px; } #s-home .home-hero { margin-left:-9px; margin-right:-9px; width:calc(100% + 18px); } #s-home .wallet-bar { font-size:12px; gap:5px; padding:8px; } #s-home .wallet-bar__hint { font-size:9px; max-width:86px; } #s-home .solo-card__main b { font-size:17px; } #s-home .solo-card__go { padding:10px 8px; font-size:13px; } #s-home .home-profile { gap:5px; } #s-home .hud-who__name { font-size:12px; max-width:74px; } #s-home .hud-balance { padding:5px; gap:3px; } #s-home .hud-balance__num { font-size:15px; } #s-home .hud-bell { width:25px; min-width:25px; } #s-home .hud-bell img { width:25px; } #s-home .quick__title { font-size:11px; } #s-home .quick__big { font-size:17px; } #s-home .quick__icon { width:33px; } #s-home .bounty__val { font-size:17px; } }

/* 邀请中心：实际数据覆盖海底素材，导航与复制使用原生按钮。 */
#s-social.invite-ocean { background:linear-gradient(180deg,rgba(0,18,32,.62),rgba(0,6,16,.88)),url('/public/assets/account/ocean.webp') center top/cover; }
#s-social .mm-top { padding:16px 12px 12px; background:transparent; align-items:center; }
#s-social .mm-top__title { font-size:22px; font-weight:800; margin:0; white-space:nowrap; }
#s-social .social-back { display:flex; align-items:center; gap:2px; padding:6px 8px; border-radius:24px; border:1px solid #49d8f2; box-shadow:inset 0 0 12px #037da0; background:linear-gradient(150deg,#095777,#001422); font-size:13px; }
#s-social .social-back .ocean-icon { width:18px; }
#s-social .social-conn { min-height:36px; padding:6px 9px; border:1px solid #238ea8; border-radius:24px; color:#41ebcc; font-size:12px; background:rgba(0,18,30,.75); }
#s-social .social-body { padding:0 14px 16px; }
#s-social .panel { border:1px solid #39c5e5; border-radius:20px; background:linear-gradient(155deg,rgba(0,75,104,.58),rgba(0,14,27,.91)),url('/public/assets/account/ocean.webp') center top/cover; box-shadow:inset 0 0 15px #05739255,0 3px 15px #0007; padding:15px 13px; }
#s-social .invite-card { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:10px 5px; position:relative; overflow:hidden; background:linear-gradient(90deg,rgba(0,30,48,.85),rgba(0,20,35,.4)),url('/public/assets/invite/boat.webp') center 55%/cover no-repeat; }
#s-social .invite-card__l,#s-social .invite-card__r { min-width:0; position:relative; }
#s-social .invite-card .user-id-copy { border-radius:22px; padding:6px 10px; background:#00263eae; border-color:#5ecbec; white-space:nowrap; font-size:12px!important; min-height:44px; margin-bottom:4px; }
#s-social .invite-code-label { font-size:14px; color:#d4edfb; margin:2px 0; }
#s-social .invite-code { border:0; padding:0; background:none; color:#ffdf83; display:flex; align-items:center; gap:6px; font-size:clamp(29px,9vw,39px); font-weight:800; letter-spacing:2px; min-height:48px; text-shadow:0 2px 7px #98680b; width:100%; }
#s-social .invite-code .ocean-icon { width:22px; height:22px; color:#d3f3ff; letter-spacing:0; }
#s-social .referral-copy { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:22px; color:#201600; font-size:15px; border:1px solid #fff2a9; background:linear-gradient(170deg,#fff1a8,#f6cd63 70%,#d7a445); box-shadow:0 0 13px #f5d45966,inset 0 0 8px #fff5c3; }
#s-social .invite-card__r { align-self:center; text-align:right; padding-top:38px; text-shadow:0 2px 4px #001221; }
#s-social .invite-card__r .dim { color:#c4e4f5; }
#s-social .invite-wallet-copy { display:flex; justify-content:flex-end; align-items:center; gap:5px; width:100%; padding:3px 0; min-height:44px; background:transparent; border:0; font-size:13px; font-weight:700; }
#s-social .invite-wallet-copy .ocean-icon { width:17px; }
#s-social .referral-link { grid-column:1/-1; display:flex; align-items:center; gap:10px; min-width:0; width:100%; border:1px solid #51b3d8; background:#001a2ac9; border-radius:14px; padding:10px; color:#cce9fa; text-align:left; font-size:12px; min-height:44px; }
#s-social .referral-link span:first-child { min-width:0; overflow-wrap:anywhere; flex:1; user-select:text; }
#s-social .invite-code-note { grid-column:1/-1; display:flex; align-items:flex-start; gap:7px; margin:0; font-size:12px; color:#afd7ee; line-height:1.5; }
#s-social .invite-code-note .ocean-icon { width:17px; height:18px; }
#s-social .invite-team-heading h2 { display:flex; align-items:center; gap:7px; font-size:20px; margin:0; }
#s-social .invite-team-heading button { display:flex; align-items:center; gap:5px; border:1px solid #52d5ef; border-radius:24px; background:linear-gradient(160deg,#075975,#001828); box-shadow:inset 0 0 8px #00c7ff55; min-height:44px; padding:8px 12px; }
#s-social .invite-team .funds-balances { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
#s-social .invite-stat { display:flex; align-items:center; gap:9px; padding:12px 8px; min-height:88px; border:1px solid #1ca4c5; border-radius:14px; background:linear-gradient(140deg,#003d55aa,#001323e8),url('/public/assets/account/ocean.webp') center/cover; box-shadow:inset 0 0 10px #10c5f444; }
#s-social .invite-stat>.ocean-icon { width:30px; height:34px; color:#40dff1; }
#s-social .invite-stat:nth-child(3)>.ocean-icon { color:#ffdc82; }
#s-social .invite-stat>div { flex:1; min-width:0; border-left:1px solid #1ba1ba; padding-left:8px; }
#s-social .invite-stat .dim { font-size:11px; display:block; line-height:1.5; color:#b7def1; }
#s-social .invite-stat b { display:block; color:#ffe697; font-size:25px; line-height:1.3; overflow-wrap:anywhere; }
#s-social .invite-team-note { display:flex; gap:8px; padding:10px; border:1px solid #287e9a; border-radius:12px; background:#001421aa; color:#abd4eb; font-size:12px; line-height:1.6; }
#s-social .invite-team-note .ocean-icon { width:20px; height:24px; }
#s-social .invite-control { display:flex; align-items:center; padding:0 10px; border:1px solid #358fae; border-radius:12px; background:linear-gradient(150deg,#073e5488,#001423); color:#a9d6ee; }
#s-social .invite-control input,#s-social .invite-control select { border:0; background:transparent; padding:10px 8px; color:#cdeafa; font-size:14px; min-height:48px; }
#s-social select option { background:#062538; }
#s-social .invite-team-empty { padding:0 0 8px; margin:0; text-align:center; color:#d7f3ff; font-size:15px; }
#s-social .invite-team-empty img { width:100%; height:auto; margin-top:6px; display:block; border-radius:12px; }
#s-social .invite-team-empty p { margin:8px 0 20px; }
#s-social .invite-pagination button { min-width:76px; min-height:44px; border:1px solid #4196b4; background:#00283f80; border-radius:14px; font-size:13px; padding:8px; }
#s-social .invite-pagination .dim { color:#b9e1f7; font-size:13px; }
#s-social button:disabled { opacity:.55; cursor:default; }
#s-social .invite-updated { display:flex; justify-content:center; align-items:center; gap:6px; color:#a9d6ee; font-size:11px; margin-top:12px; }
#s-social .invite-updated .ocean-icon { width:17px; height:17px; }
#s-social .invite-extra { border:1px solid #287d9a; border-radius:14px; margin-bottom:10px; background:#002036aa; }
#s-social .invite-extra>summary { padding:14px 12px; cursor:pointer; font-weight:700; color:#c6e9f9; min-height:48px; }
#s-social .invite-extra>.panel { margin:0 8px 8px; }
#s-social .invite-bottom-nav { flex:0 0 auto; position:relative; z-index:10; display:grid; grid-template-columns:repeat(6,1fr); margin:0 5px 5px; padding:0 14px env(safe-area-inset-bottom,0px); aspect-ratio:6.62; min-height:62px; background:url('/public/assets/invite/navigation.webp') center/100% 100% no-repeat; }
#s-social .invite-nav-item { border:0; background:transparent; min-height:44px; border-radius:14px; cursor:pointer; }
#s-social button:focus-visible,#s-social input:focus-visible,#s-social select:focus-visible,#s-social summary:focus-visible { outline:2px solid #ffde8b; outline-offset:2px; }
@media(max-width:360px) { #s-social .mm-top__title { font-size:18px; } #s-social .social-back { font-size:11px; padding:5px; } #s-social .social-conn { font-size:11px; padding:6px; } #s-social .social-body { padding:0 9px 12px; } #s-social .panel { padding:13px 10px; } #s-social .invite-code { font-size:29px; letter-spacing:1px; } #s-social .invite-code .ocean-icon { width:18px; } #s-social .invite-card .user-id-copy { font-size:11px!important; padding:6px; } #s-social .invite-stat { padding:10px 6px; gap:5px; } #s-social .invite-stat>.ocean-icon { width:23px; } #s-social .invite-stat b { font-size:23px; } #s-social .invite-team-heading h2 { font-size:18px; } }