/* ============================================================
   灵动Nexus · 游戏世界 主题样式
   深空霓虹基底（继承 variables.css 设计令牌），游戏专属视觉：
   更高对比、更清晰层级、对局氛围光效。
   ============================================================ */

.gw-body {
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(139, 92, 246, 0.22), transparent 60%),
    radial-gradient(900px 480px at -10% 20%, rgba(0, 229, 255, 0.14), transparent 55%),
    radial-gradient(700px 500px at 50% 110%, rgba(79, 124, 255, 0.12), transparent 60%),
    var(--bg-0);
  color: var(--tx-1);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

/* 星点背景 */
.gw-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 34% 68%, rgba(155, 232, 255, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 56% 12%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 72% 44%, rgba(199, 185, 255, 0.5), transparent),
    radial-gradient(1.2px 1.2px at 88% 78%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 22% 88%, rgba(155, 232, 255, 0.35), transparent);
  opacity: 0.8;
}

.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 14px; height: 14px; }

/* ---------------- 顶栏 ---------------- */
.gw-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
  height: 64px;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line-2);
}

.gw-brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--tx-1); }
.gw-logo-orb {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad-brand);
  color: var(--tx-on-neon);
  box-shadow: var(--glow-brand);
}
.gw-brand-tx { display: flex; flex-direction: column; line-height: 1.15; }
.gw-brand-title { font-weight: 700; font-size: var(--fs-md); }
.gw-brand-sub { font-size: 10px; letter-spacing: 0.18em; color: var(--tx-3); }

.gw-tabs { display: flex; gap: var(--sp-1); flex: 1; justify-content: center; }
.gw-tabs button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--tx-2);
  font-size: var(--fs-md);
  padding: 8px 18px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.gw-tabs button:hover { color: var(--tx-1); background: var(--bg-3); }
.gw-tabs button.active {
  color: var(--tx-on-neon);
  background: var(--grad-brand);
  box-shadow: var(--glow-brand);
  font-weight: 600;
}

.gw-me { display: flex; align-items: center; gap: var(--sp-3); }
.gw-coin {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, rgba(255, 200, 87, 0.18), rgba(255, 154, 92, 0.12));
  border: 1px solid rgba(255, 200, 87, 0.4);
  color: var(--neon-gold);
  font-weight: 700;
}


/* 顶栏：会员徽章（色调与工作站 badge-tier 对齐） */
.gw-vip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.gw-vip:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gw-vip[hidden] { display: none; }
.gw-vip-none { background: var(--bg-3); color: var(--tx-3); border-style: dashed; border-color: var(--line-2); }
.gw-vip-lite { background: linear-gradient(135deg, #2bb3c0, #5ce1e6); color: #06333a; box-shadow: 0 0 10px rgba(92, 225, 230, 0.35); }
.gw-vip-pro { background: linear-gradient(135deg, #4f7cff, #7aa2ff); color: #fff; box-shadow: 0 0 12px rgba(79, 124, 255, 0.45); }
.gw-vip-max { background: linear-gradient(135deg, #8b5cf6, #d946ef); color: #fff; box-shadow: 0 0 14px rgba(155, 124, 255, 0.5); }
.gw-vip-ultra { background: linear-gradient(135deg, #f5a623, #ffc857); color: #2a1a05; box-shadow: 0 0 16px rgba(255, 200, 87, 0.55); }
.gw-vip-prestige { background: linear-gradient(135deg, #ff7ab8, #ffc857, #ff9a5c); color: #33110a; box-shadow: 0 0 20px rgba(255, 143, 184, 0.6); position: relative; overflow: hidden; }
.gw-vip-prestige::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%); animation: gwBadgeShine 2.6s ease-in-out infinite;
}
@keyframes gwBadgeShine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }

/* 顶栏：头像按钮 */
.gw-avatar-btn {
  border: none; background: transparent; padding: 2px; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gw-avatar-btn:hover { box-shadow: 0 0 0 2px var(--line-glow); transform: translateY(-1px); }

/* 顶栏：标签行「返回首页」链接（与标签按钮同风格） */
.gw-tab-home {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  color: var(--tx-2); text-decoration: none; font-size: var(--fs-md);
  padding: 8px 14px; border-radius: var(--r-full); border: 1px solid var(--line-2);
  transition: all var(--t-fast) var(--ease);
}
.gw-tab-home:hover { color: var(--tx-1); border-color: var(--line-glow); }

/* 顶栏：头像下拉菜单 */
.gw-dd {
  position: fixed; z-index: var(--z-dropdown); min-width: 196px;
  display: flex; flex-direction: column; padding: 6px;
  border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: var(--bg-glass-strong); backdrop-filter: blur(18px);
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.gw-dd.show { opacity: 1; transform: none; }
.gw-dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: transparent; color: var(--tx-1);
  font-size: var(--fs-sm); border-radius: var(--r-md); cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease);
}
.gw-dd-item:hover { background: var(--bg-3); }
.gw-dd-item.danger { color: var(--danger); }
.gw-dd-i { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--tx-3); flex: none; }
.gw-dd-item.danger .gw-dd-i { color: inherit; }
.gw-dd-av .gw-avatar { width: 22px; height: 22px; font-size: 11px; }
.gw-dd-sep { height: 1px; margin: 5px 8px; background: var(--line-2); }

/* ---------------- 主视图 ---------------- */
.gw-view { max-width: 1180px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 80px; position: relative; }
.gw-loading { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: 120px 0; color: var(--tx-2); }
.gw-spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--line-2);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: gw-spin 0.9s linear infinite;
}
@keyframes gw-spin { to { transform: rotate(360deg); } }

/* 大厅 Hero */
.gw-hero {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.10), rgba(139, 92, 246, 0.14)), var(--bg-glass);
  border: 1px solid var(--line-2);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.gw-hero::after {
  content: "";
  position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.22), transparent 65%);
}
.gw-kicker { font-size: var(--fs-xs); letter-spacing: 0.22em; color: var(--neon-cyan); font-weight: 700; }
.gw-hero h1 { font-size: var(--fs-3xl); margin: var(--sp-2) 0 var(--sp-3); line-height: 1.25; }
.gw-hero h1 em { font-style: normal; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-hero p { color: var(--tx-2); max-width: 560px; }
.gw-stats { display: flex; gap: var(--sp-5); margin-top: var(--sp-5); flex-wrap: wrap; }
.gw-stat { display: flex; flex-direction: column; }
.gw-stat b { font-size: var(--fs-2xl); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-stat span { font-size: var(--fs-xs); color: var(--tx-3); }

.gw-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-6) 0 var(--sp-4); }
.gw-section-head h2 { font-size: var(--fs-xl); }
.gw-section-head .muted { color: var(--tx-3); font-size: var(--fs-sm); }

/* 品类分区（任务9：分类标题=序号+中英名+光线+款数，高端杂志式分栏） */
.gw-lbc { margin-bottom: var(--sp-6); }
.gw-lbc-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.gw-lbc-no {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700;
  color: var(--neon-cyan); letter-spacing: 0.12em;
  border: 1px solid var(--line-glow); border-radius: var(--r-sm);
  padding: 2px 8px; background: rgba(0, 229, 255, 0.06);
  box-shadow: inset 0 0 12px rgba(0, 229, 255, 0.08);
}
.gw-lbc-title { display: flex; align-items: baseline; gap: var(--sp-3); white-space: nowrap; }
.gw-lbc-title h2 { font-size: var(--fs-xl); letter-spacing: 0.04em; }
.gw-lbc-en {
  font-size: 10px; letter-spacing: 0.32em; color: var(--tx-3);
  font-family: var(--font-mono);
}
.gw-lbc-line {
  flex: 1; height: 1px; min-width: 24px;
  background: linear-gradient(90deg, var(--line-2), rgba(0, 229, 255, 0.35), transparent);
}
.gw-lbc-count {
  font-size: var(--fs-xs); color: var(--tx-3); white-space: nowrap;
  border: 1px solid var(--line-1); border-radius: var(--r-full); padding: 3px 12px;
  background: var(--bg-2);
}

/* 游戏卡片（任务9：精简卡=图标+名称+实时机况；任务12：图标自带渐变底） */
.gw-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-3); }
.gw-game-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.045), transparent 60%),
    var(--bg-glass);
  border: 1px solid var(--line-2);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid);
  overflow: hidden;
  cursor: pointer;
}
.gw-game-card:hover,
.gw-game-card:focus-visible { transform: translateY(-4px); border-color: var(--line-glow); box-shadow: var(--shadow-2), var(--glow-cyan); outline: none; }
.gw-game-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent, var(--grad-brand));
  opacity: 0.85;
}
.gw-game-card.g-gomoku { --accent: linear-gradient(90deg, #0ea5e9, #3b5bff); }
.gw-game-card.g-reversi { --accent: linear-gradient(90deg, #7c3aed, #e0509c); }
.gw-game-card.g-xiangqi { --accent: linear-gradient(90deg, #c2410c, #f59e0b); }
.gw-game-card.g-go { --accent: linear-gradient(90deg, #64748b, #1e293b); }
.gw-game-card.g-jungle { --accent: linear-gradient(90deg, #059669, #34d399); }
.gw-game-card.g-halma { --accent: linear-gradient(90deg, #d97706, #fbbf24); }
.gw-game-card.g-bieqi { --accent: linear-gradient(90deg, #dc2626, #f87171); }
.gw-game-card.g-ddz { --accent: linear-gradient(90deg, #b45309, #f59e0b); }
.gw-game-card.g-mahjong { --accent: linear-gradient(90deg, #047857, #10b981); }
.gw-game-card.g-drawguess { --accent: linear-gradient(90deg, #2563eb, #38bdf8); }
.gw-game-card.g-monopoly { --accent: linear-gradient(90deg, #a16207, #eab308); }
.gw-game-card.g-gemlegend { --accent: linear-gradient(90deg, #c026d3, #818cf8); }
.gw-game-card.g-flight { --accent: linear-gradient(90deg, #0284c7, #22d3ee); }
.gw-game-ic {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin-bottom: var(--sp-3);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  transition: transform var(--t-mid) var(--ease);
}
.gw-game-card:hover .gw-game-ic { transform: scale(1.08) rotate(-2deg); }
.gw-game-ic svg { width: 100%; height: 100%; }
.gw-game-card h3 { font-size: var(--fs-lg); margin-bottom: 2px; letter-spacing: 0.04em; }
.gw-game-card .en { font-size: 9px; letter-spacing: 0.24em; color: var(--tx-3); font-family: var(--font-mono); }
.gw-game-foot {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-1);
}
.gw-pill {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  color: var(--tx-3);
  white-space: nowrap;
}
.gw-pill.live { color: var(--neon-green); border-color: rgba(52, 245, 197, 0.4); background: rgba(52, 245, 197, 0.06); }
.gw-game-go {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--tx-3);
  transition: all var(--t-fast) var(--ease);
}
.gw-game-go svg { width: 13px; height: 13px; }
.gw-game-card:hover .gw-game-go {
  background: var(--grad-brand); border-color: transparent; color: #04122b;
  box-shadow: var(--glow-cyan); transform: translateX(2px);
}

/* 按钮 */
.gw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer;
  font-size: var(--fs-md); font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--r-full);
  transition: all var(--t-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap; /* 防止按钮文字换行 */
  overflow: hidden; text-overflow: ellipsis;
  min-height: 40px; /* 触控目标最小高度 */
}
.gw-btn-primary { background: var(--grad-brand); color: var(--tx-on-neon); box-shadow: var(--glow-brand); }
.gw-btn-primary:hover { filter: brightness(1.12); transform: translateY(-1px); }
.gw-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.gw-btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--tx-2); }
.gw-btn-ghost:hover { color: var(--tx-1); border-color: var(--line-glow); }
.gw-btn-danger { background: transparent; border: 1px solid rgba(255, 93, 115, 0.5); color: var(--danger); }
.gw-btn-danger:hover { background: rgba(255, 93, 115, 0.12); }
.gw-btn-gold { background: var(--grad-gold); color: #2a1a04; }
.gw-btn-gold:hover { filter: brightness(1.08); }
.gw-btn-sm { padding: 6px 14px; font-size: var(--fs-sm); }
.gw-btn-block { width: 100%; }

/* 桌位列表 */
.gw-table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.gw-table-card {
  background: var(--bg-glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: all var(--t-fast) var(--ease);
}
.gw-table-card:hover { border-color: var(--line-glow); }
.gw-table-card .tc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.gw-table-card .tc-head strong { font-size: var(--fs-md); }
.gw-table-card .tc-players { color: var(--tx-2); font-size: var(--fs-sm); min-height: 22px; margin-bottom: var(--sp-3); }
.st { font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--r-full); }
.st-waiting { color: var(--neon-green); background: rgba(52, 245, 197, 0.12); border: 1px solid rgba(52, 245, 197, 0.35); }
.st-playing { color: var(--neon-gold); background: rgba(255, 200, 87, 0.10); border: 1px solid rgba(255, 200, 87, 0.35); }
.gw-empty {
  grid-column: 1 / -1;
  text-align: center; color: var(--tx-3);
  padding: var(--sp-7);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}

/* ---------------- 对局页 ---------------- */
.gw-match { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); align-items: start; }
.gw-board-wrap {
  background: var(--bg-glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  display: grid;
  place-items: center;
}
#gwBoard { width: min(100%, 640px); aspect-ratio: 1; border-radius: var(--r-lg); cursor: pointer; touch-action: manipulation; }

/* 任务11：棋盘列 = 对手条(上) + 棋盘 + 自己条(下)，对战条与棋盘同宽对齐 */
.gw-board-col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; align-items: center; }
.gw-board-col .gw-board-wrap { width: 100%; }
.gw-vsbar { width: min(100%, 640px); }
.gw-vsbar .gw-player { margin: 0; background: var(--bg-glass); border-color: var(--line-2); }
.gw-vsbar .gw-player.turn { border-color: var(--line-glow); box-shadow: var(--glow-cyan); }
/* 单步倒计时：内嵌在当前回合方的对战条/座位卡上 */
.vs-clock { flex: none; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.vs-clock b { color: var(--neon-cyan); font-size: var(--fs-lg); }
.vs-clock b.urgent { color: var(--danger); animation: gw-clock-blink 1s steps(2, start) infinite; }
.gw-cseat .vs-clock { min-width: 34px; }
.gw-cseat .vs-clock b { font-size: var(--fs-md); }

.gw-side { display: flex; flex-direction: column; gap: var(--sp-4); }
.gw-panel { background: var(--bg-glass); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-4); }
.gw-panel h3 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }

.gw-player {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line-1);
  background: var(--bg-2);
  transition: all var(--t-mid) var(--ease);
}
.gw-player + .gw-player { margin-top: var(--sp-2); }
.gw-player.turn { border-color: var(--line-glow); box-shadow: var(--glow-cyan); }
.gw-player .pc-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: 0 0 8px rgba(0,0,0,.4); }
.gw-player .pc-dot.black { background: radial-gradient(circle at 32% 30%, #6a76a8 0%, #1a2040 45%, #05070f 100%); }
.gw-player .pc-dot.white { background: radial-gradient(circle at 32% 30%, #ffffff 0%, #dfe6ff 55%, #aab3d6 100%); }
.gw-player .pc-dot.gold { background: radial-gradient(circle at 32% 30%, #fff3d6 0%, #ffc857 55%, #b8791f 100%); }
.gw-player b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-player .me-tag { font-size: 10px; color: var(--neon-cyan); border: 1px solid rgba(0,229,255,.4); padding: 1px 8px; border-radius: var(--r-full); }
.gw-player .off-tag { font-size: 10px; color: var(--danger); border: 1px solid rgba(255,93,115,.4); padding: 1px 8px; border-radius: var(--r-full); }

.gw-turn-banner { text-align: center; font-weight: 700; font-size: var(--fs-lg); padding: var(--sp-3); border-radius: var(--r-md); background: var(--grad-brand-soft); border: 1px solid var(--line-2); }
.gw-turn-banner.mine { color: var(--neon-cyan); box-shadow: var(--glow-cyan); }
.gw-score-line { display: flex; justify-content: space-around; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--tx-2); }
.gw-score-line b { color: var(--tx-1); font-size: var(--fs-lg); }

.gw-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gw-actions .gw-btn { flex: 1; min-width: 100px; }

/* ---------------- 房间座位方位与动画（任务：座位空间感与风水感知） ---------------- */
/* 座位卡方位标签：清晰标识座位号与相对方位，强化"我在哪个位置"的空间认知 */
.gw-seat-pos {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 10px; border-radius: var(--r-full);
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--tx-2); white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.gw-cseat, .gw-vsbar .gw-player { position: relative; }
.gw-seat-dir { color: var(--neon-gold); margin-right: 4px; }

/* 座位切换动画：换座/入座时平滑位移+高亮脉冲，让用户明确感知"移动了" */
@keyframes gw-seat-move {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); box-shadow: 0 0 20px var(--neon-cyan), 0 0 40px rgba(0,229,255,.3); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes gw-seat-arrive {
  0% { box-shadow: 0 0 0 0 rgba(0,229,255,.5); }
  70% { box-shadow: 0 0 0 12px rgba(0,229,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); }
}
.gw-cseat.seat-moving, .gw-vsbar .gw-player.seat-moving { animation: gw-seat-move 0.6s var(--ease) both; z-index: 2; }
.gw-cseat.seat-arrived, .gw-vsbar .gw-player.seat-arrived { animation: gw-seat-arrive 1.2s var(--ease) both; }

/* 空座位可点击：呼吸光效+明确可交互提示 */
.gw-cseat.empty.joinable {
  cursor: pointer;
  transition: all var(--t-mid) var(--ease);
}
.gw-cseat.empty.joinable:hover, .gw-cseat.empty.joinable:focus-visible {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0,229,255,.35), inset 0 0 20px rgba(0,229,255,.06);
  transform: translateY(-2px);
}
.gw-cseat.empty.joinable:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.gw-cseat.empty.joinable .seat-hint {
  font-size: 10px; color: var(--neon-cyan); opacity: 0.85;
  animation: gw-seat-hint-pulse 2s ease-in-out infinite;
}
@keyframes gw-seat-hint-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.4; }
}

/* 操作按钮组优化：科学断点防文字换行，保持触控目标≥40px */
.gw-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); }
.gw-actions .gw-btn {
  min-width: 0; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 10px 14px; font-size: var(--fs-sm);
}
.gw-actions .gw-btn .i { flex: none; }

/* 观战席优化：卡片式布局，头像+昵称+状态更清晰 */
.gw-spec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
.gw-spec {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line-1);
  transition: all var(--t-fast) var(--ease);
}
.gw-spec:hover { border-color: var(--line-2); transform: translateY(-1px); }
.gw-spec .gw-avatar { width: 28px; height: 28px; flex: none; }
.gw-spec .sp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gw-spec .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-weight: 600; }
.gw-spec .host-mini { font-style: normal; font-size: 9px; color: var(--neon-gold); border: 1px solid rgba(255, 200, 87, 0.4); padding: 0 4px; border-radius: var(--r-full); margin-left: 4px; }
.gw-spec .sp-status { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: var(--tx-3); }
.gw-spec .on-dot, .gw-spec .off-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.gw-spec .on-dot { background: var(--neon-green); box-shadow: 0 0 4px var(--neon-green); }
.gw-spec .off-dot { background: var(--tx-3); }

/* 聊天面板移动端优化：输入框与按钮合理分布 */
.gw-chat-input { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--line-1); }
.gw-chat-input .gw-input { flex: 1; min-width: 0; }
.gw-chat-input .gw-btn { flex: none; min-width: 44px; min-height: 40px; }

/* 对局信息面板：更清晰的层级 */
.gw-panel-info h3 { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.gw-panel-info h3 .gw-game-ic { width: 28px; height: 28px; font-size: 16px; margin-bottom: 0; filter: none; flex: 0 0 auto; }

/* ---------------- 房间等待阶段中央提示优化 ---------------- */
.gw-wait-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.gw-wait-hint b { font-size: var(--fs-lg); color: var(--tx-1); }
.gw-wait-hint .wh-seats { font-size: var(--fs-sm); color: var(--tx-3); line-height: 1.6; }

/* ---------------- 移动端（≤640px）房间布局专项优化 ---------------- */
@media (max-width: 640px) {
  /* 操作按钮：两列网格，确保文字不换行且触控目标足够 */
  .gw-actions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gw-actions .gw-btn {
    min-height: 44px; padding: 10px 8px;
    font-size: var(--fs-sm);
  }
  .gw-actions .gw-btn .i { width: 16px; height: 16px; }

  /* 座位方位标签缩小适配 */
  .gw-seat-pos { font-size: 9px; padding: 1px 8px; top: -6px; }

  /* 观战席：横向滚动卡片 */
  .gw-spec-list {
    display: flex; overflow-x: auto; gap: 8px;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .gw-spec { flex: 0 0 auto; scroll-snap-align: start; min-width: 120px; }

  /* 聊天输入：保持紧凑但触控友好 */
  .gw-chat-input { padding: var(--sp-2); }
  .gw-chat-input .gw-btn { min-width: 44px; min-height: 44px; }

  /* 等待提示更紧凑 */
  .gw-wait-hint { padding: var(--sp-4) var(--sp-3); }
  .gw-wait-hint b { font-size: var(--fs-md); }
}

/* ---------------- 超小屏（≤380px）进一步优化 ---------------- */
@media (max-width: 380px) {
  .gw-actions { grid-template-columns: 1fr; }
  .gw-actions .gw-btn { width: 100%; }
  .gw-seat-pos { font-size: 8px; padding: 1px 6px; }
}

.gw-log { font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.9; max-height: 130px; overflow-y: auto; }

/* ---------------- 排行榜 ---------------- */
/* 任务4：类目胶囊横向滑动（手机端完整显示文字，右缘渐变提示可滑） */
.gw-rank-switch-wrap { position: relative; margin-bottom: var(--sp-4); }
.gw-rank-switch-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 4px; width: 42px;
  background: linear-gradient(90deg, transparent, var(--bg-1));
  pointer-events: none; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.gw-rank-switch {
  display: flex; gap: var(--sp-2); flex-wrap: nowrap;
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 4px;
  scroll-snap-type: x proximity;
}
.gw-rank-switch::-webkit-scrollbar { display: none; }
.gw-rank-switch .gw-btn {
  flex: 0 0 auto; white-space: nowrap; border-radius: var(--r-full);
  scroll-snap-align: start; letter-spacing: 0.5px;
}
.gw-rank-switch .gw-btn-primary { box-shadow: var(--glow-cyan); }
.gw-rank-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-1);
  background: var(--bg-2);
  margin-bottom: var(--sp-2);
}
.gw-rank-row:hover { border-color: var(--line-2); }
.gw-rank-row .rk { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-lg); color: var(--tx-3); }
.gw-rank-row.r1 .rk { color: var(--neon-gold); }
.gw-rank-row.r2 .rk { color: #cfd8ff; }
.gw-rank-row.r3 .rk { color: #ffb08a; }
.gw-rank-row .pts { font-weight: 700; color: var(--neon-cyan); }
.gw-rank-row .wl { color: var(--tx-3); font-size: var(--fs-sm); }
.gw-rank-row.is-me { border-color: var(--line-glow); box-shadow: var(--glow-cyan); }
.gw-badge-tag { color: var(--neon-gold); }

/* ---------------- 商城 / 背包 ---------------- */
.gw-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.gw-item-card {
  background: var(--bg-glass);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: all var(--t-fast) var(--ease);
}
.gw-item-card:hover { border-color: var(--line-glow); transform: translateY(-2px); }
.gw-item-ic {
  height: 84px; border-radius: var(--r-md);
  display: grid; place-items: center;
  border: 1px solid var(--line-1);
  font-size: 34px;
  margin-bottom: var(--sp-1);
}
.gw-item-ic.ic-board-aurora { background: linear-gradient(135deg, #0b2a4a, #3b1d6e); }
.gw-item-ic.ic-board-jade { background: linear-gradient(135deg, #07382c, #0f7a5c); }
.gw-item-ic.ic-piece-gold { background: linear-gradient(135deg, #4a3208, #b8791f); }
.gw-item-ic.ic-badge-star { background: linear-gradient(135deg, #2a1d5e, #8b5cf6); }
.gw-item-ic.ic-badge-crown { background: linear-gradient(135deg, #5e3a08, #ffc857); }
.gw-item-card h4 { font-size: var(--fs-md); }
.gw-item-card .desc { color: var(--tx-3); font-size: var(--fs-xs); flex: 1; line-height: 1.6; }
.gw-item-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-2); }
.gw-price { color: var(--neon-gold); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.gw-type-tag { font-size: 10px; color: var(--tx-3); border: 1px solid var(--line-2); padding: 2px 8px; border-radius: var(--r-full); }
.gw-equipped { color: var(--neon-green); font-size: var(--fs-xs); }

/* ---------------- 战绩 ---------------- */
.gw-match-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-1);
  background: var(--bg-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
}
.gw-match-row .rs { font-weight: 700; }
.gw-match-row .rs.win { color: var(--neon-green); }
.gw-match-row .rs.loss { color: var(--danger); }
.gw-match-row .rs.draw { color: var(--neon-gold); }
.gw-match-row .vs { color: var(--tx-2); }
.gw-match-row .tm { color: var(--tx-3); font-size: var(--fs-xs); }

/* ---------------- 弹窗 / 提示 ---------------- */
.gw-modal-mask {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(3, 5, 15, 0.72);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
}
.gw-modal-mask[hidden],
.gw-toast[hidden] { display: none; }
.gw-modal {
  width: min(420px, 92vw);
  background: var(--bg-glass-strong);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  text-align: center;
  box-shadow: var(--shadow-2), var(--glow-violet);
}
.gw-modal h2 { font-size: var(--fs-2xl); margin: var(--sp-3) 0 var(--sp-2); }
.gw-modal h2.win { color: var(--neon-green); }
.gw-modal h2.loss { color: var(--danger); }
.gw-modal h2.draw { color: var(--neon-gold); }
.gw-modal p { color: var(--tx-2); margin-bottom: var(--sp-5); }
.gw-modal .gw-actions { justify-content: center; }
.gw-result-icon { font-size: 52px; line-height: 1; }

/* ---------------- 规则介绍弹窗（任务5） ---------------- */
.gw-modal:has(.gw-rules) {
  width: min(620px, 94vw);
  max-height: 88vh;
  padding: 0;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-color: var(--line-glow);
}
.gw-rules { display: flex; flex-direction: column; min-height: 0; }
.gr-head {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(0, 229, 255, 0.16), transparent 55%),
    radial-gradient(120% 160% at 100% 0%, rgba(255, 200, 87, 0.12), transparent 55%),
    var(--bg-3);
  border-bottom: 1px solid var(--line-2);
}
.gr-ic {
  flex: none; width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: var(--bg-glass-strong);
  border: 1px solid var(--line-glow);
  box-shadow: var(--glow-cyan);
  color: var(--neon-cyan);
}
.gr-ic svg { width: 34px; height: 34px; }
.gr-title { flex: 1; min-width: 0; }
.gr-kicker { font-size: 10px; letter-spacing: 0.22em; color: var(--neon-cyan); font-weight: 700; }
.gr-title h2 { margin: 2px 0 2px; font-size: var(--fs-2xl); }
.gr-title h2 em { font-style: normal; font-size: var(--fs-base); color: var(--neon-gold); margin-left: 6px; }
.gr-tagline { margin: 0; font-size: var(--fs-sm); color: var(--tx-2); }
.gr-close {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--tx-3);
  border: 1px solid var(--line-2); border-radius: var(--r-full);
  cursor: pointer; transition: all var(--dur-1);
}
.gr-close:hover { color: var(--tx-1); border-color: var(--line-glow); box-shadow: var(--glow-cyan); }
.gr-body { padding: var(--sp-4) var(--sp-6); overflow-y: auto; min-height: 0; }
.gr-sec { margin-bottom: var(--sp-4); }
.gr-sec h3 {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-base); color: var(--tx-1);
  margin: 0 0 var(--sp-2);
}
.gr-no {
  flex: none; width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  font-style: normal; font-size: 12px; font-weight: 800;
  color: #04121a;
  background: linear-gradient(135deg, var(--neon-cyan), #7af9ff);
  border-radius: var(--r-full);
}
.gr-sec ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.gr-sec li {
  position: relative;
  padding: 8px 12px 8px 30px;
  background: var(--bg-3);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.7;
}
.gr-sec li::before {
  content: '';
  position: absolute; left: 12px; top: 15px;
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--neon-gold);
  box-shadow: 0 0 6px rgba(255, 200, 87, 0.6);
}
.gr-sec li b { color: var(--neon-cyan); font-weight: 700; }
.gr-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--line-1);
}
.gr-foot .gw-note { flex: 1; }
.gr-foot .gw-btn { flex: none; }

/* 桌位大厅四按钮排布（任务5：桌面横排 / 手机两列网格） */
.gw-lobby-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.gw-lobby-actions .gw-btn { flex: none; }

.gw-toast {
  position: fixed;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--bg-glass-strong);
  border: 1px solid var(--line-glow);
  color: var(--tx-1);
  padding: 10px 22px;
  border-radius: var(--r-full);
  box-shadow: var(--glow-cyan);
  font-size: var(--fs-sm);
}

.gw-note { color: var(--tx-3); font-size: var(--fs-xs); line-height: 1.8; }
.gw-divider { height: 1px; background: var(--line-1); margin: var(--sp-3) 0; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
  .gw-match { grid-template-columns: 1fr; }
  .gw-tabs button { padding: 8px 10px; font-size: var(--fs-sm); }
  .gw-brand-sub { display: none; }
  .gw-hero { padding: var(--sp-5); }
  .gw-hero h1 { font-size: var(--fs-2xl); }
  /* 任务5：四按钮手机端两列网格，规则弹窗紧凑化 */
  .gw-lobby-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .gw-lobby-actions .gw-btn { width: 100%; justify-content: center; }
  .gr-head { padding: var(--sp-4); gap: var(--sp-3); }
  .gr-ic { width: 44px; height: 44px; }
  .gr-ic svg { width: 26px; height: 26px; }
  .gr-title h2 { font-size: var(--fs-xl); }
  .gr-body { padding: var(--sp-3) var(--sp-4); }
  .gr-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); flex-direction: column; align-items: stretch; text-align: center; }
  .gr-foot .gw-btn { width: 100%; }
}

/* ============================================================
   V1.1 新增：头像 / 准备 / 观战 / 悔棋 / 排行榜特效 / 设置 / 管理
   ============================================================ */

/* 头像 */
.gw-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line-2); background: var(--bg-3); }
.gw-avatar.sm { width: 24px; height: 24px; font-size: 12px; }
.gw-avatar-fb {
  display: inline-grid; place-items: center;
  background: var(--grad-brand-soft);
  color: var(--neon-cyan); font-weight: 700; font-size: 15px;
  border: 1px solid var(--line-2);
}
.gw-avatar-fb.masked { color: var(--tx-3); background: var(--bg-3); }

/* 准备标记 */
.ready-tag { font-size: 10px; padding: 1px 8px; border-radius: var(--r-full); color: var(--tx-3); border: 1px solid var(--line-2); }
.ready-tag.on { color: var(--neon-green); border-color: rgba(52, 245, 197, 0.4); background: rgba(52, 245, 197, 0.10); }

/* 玩家卡：段位/积分/房主/掉线 */
.gw-player .pc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gw-player .pc-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-player .pc-rank { font-size: 10px; color: var(--neon-gold); }
.gw-player .host-tag { font-size: 10px; color: var(--neon-gold); border: 1px solid rgba(255, 200, 87, 0.4); padding: 1px 8px; border-radius: var(--r-full); }
.gw-spec .host-mini { font-style: normal; font-size: 9px; color: var(--neon-gold); border: 1px solid rgba(255, 200, 87, 0.4); padding: 0 5px; border-radius: var(--r-full); margin-left: 4px; }
.gw-spec .sp-rank { font-size: 9px; color: var(--tx-3); width: 100%; }

/* 单步限时倒计时 */
.gw-clock { text-align: center; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--tx-2); }
.gw-clock b { color: var(--neon-cyan); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.gw-clock b.urgent { color: var(--danger); animation: gw-clock-blink 1s steps(2, start) infinite; }
@keyframes gw-clock-blink { 50% { opacity: 0.35; } }

/* 排行榜段位 */
.gw-rank-row .pts .rk-tier, .rk-tier { font-style: normal; color: var(--neon-gold); font-weight: 700; margin-right: 6px; }

/* 设置页皮肤选择 / 警示 */
.gw-skin-sel { max-width: 240px; }
.gw-warn { color: var(--neon-gold); font-style: normal; }

/* 管理-平台配置 */
.gw-cfg-line { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.gw-cfg-line .gw-input { max-width: 200px; }
.gw-tier-row { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.gw-tier-row .t-name { flex: 1; min-width: 120px; }
.gw-tier-row .t-pts { width: 130px; }
.gw-tier-row .t-rank { width: 110px; }

/* 观战 */
.gw-spec-flag {
  justify-self: start;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em;
  color: var(--neon-gold);
  border: 1px solid rgba(255, 200, 87, 0.4);
  background: rgba(255, 200, 87, 0.10);
  padding: 3px 12px; border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}
.gw-spec-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.gw-spec {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-full); padding: 3px 10px 3px 3px;
  font-size: var(--fs-xs); color: var(--tx-2);
  max-width: 160px;
}
.gw-spec .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 悔棋提示条 */
.gw-undo-banner {
  margin-top: var(--sp-2);
  text-align: center; font-size: var(--fs-sm);
  color: var(--neon-gold);
  border: 1px dashed rgba(255, 200, 87, 0.5);
  background: rgba(255, 200, 87, 0.08);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

/* 桌位卡片底部 */
.gw-table-card .tc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 32px; }
.gw-table-card .tc-foot .gw-note { display: inline-flex; align-items: center; gap: 4px; }

/* ---------------- 排行榜特效 ---------------- */
.gw-rank-row { grid-template-columns: 52px 1fr auto auto; }
.gw-rank-row .who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.gw-rank-row .who .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-rank-row .rk { display: grid; place-items: center; font-style: normal; }
.gw-rank-row .rk i { font-style: normal; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-lg); color: var(--tx-3); }
.gw-rank-row .rk-ic { width: 24px; height: 24px; }

/* 1-3 名：华丽特效 */
.gw-rank-row.top { padding: var(--sp-4) var(--sp-5); position: relative; overflow: hidden; }
.gw-rank-row.top .gw-avatar { width: 44px; height: 44px; font-size: 19px; }
.gw-rank-row.top .nm b { font-size: var(--fs-lg); }
.gw-rank-row.top .pts { font-size: var(--fs-lg); }
.gw-rank-row.r1 {
  background: linear-gradient(120deg, rgba(255, 200, 87, 0.16), rgba(255, 154, 92, 0.06) 55%, transparent), var(--bg-2);
  border: 1px solid rgba(255, 200, 87, 0.55);
  box-shadow: 0 0 22px rgba(255, 200, 87, 0.22), inset 0 0 30px rgba(255, 200, 87, 0.05);
  animation: gw-rank-shine-gold 2.6s ease-in-out infinite;
}
.gw-rank-row.r1 .rk-ic { color: var(--neon-gold); filter: drop-shadow(0 0 6px rgba(255, 200, 87, 0.8)); width: 28px; height: 28px; }
.gw-rank-row.r1 .pts { color: var(--neon-gold); }
.gw-rank-row.r2 {
  background: linear-gradient(120deg, rgba(207, 216, 255, 0.14), rgba(155, 232, 255, 0.05) 55%, transparent), var(--bg-2);
  border: 1px solid rgba(207, 216, 255, 0.5);
  box-shadow: 0 0 16px rgba(180, 200, 255, 0.18);
}
.gw-rank-row.r2 .rk-ic { color: #cfd8ff; filter: drop-shadow(0 0 5px rgba(207, 216, 255, 0.7)); }
.gw-rank-row.r2 .pts { color: #cfd8ff; }
.gw-rank-row.r3 {
  background: linear-gradient(120deg, rgba(255, 176, 138, 0.14), rgba(255, 176, 138, 0.04) 55%, transparent), var(--bg-2);
  border: 1px solid rgba(255, 176, 138, 0.45);
  box-shadow: 0 0 14px rgba(255, 176, 138, 0.16);
}
.gw-rank-row.r3 .rk-ic { color: #ffb08a; filter: drop-shadow(0 0 5px rgba(255, 176, 138, 0.7)); }
.gw-rank-row.r3 .pts { color: #ffb08a; }
@keyframes gw-rank-shine-gold {
  0%, 100% { box-shadow: 0 0 22px rgba(255, 200, 87, 0.20), inset 0 0 30px rgba(255, 200, 87, 0.04); }
  50% { box-shadow: 0 0 30px rgba(255, 200, 87, 0.34), inset 0 0 30px rgba(255, 200, 87, 0.09); }
}

/* 4-10 名：一般特效 */
.gw-rank-row.elite {
  border-color: rgba(0, 229, 255, 0.28);
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.06), transparent 40%), var(--bg-2);
}
.gw-rank-row.elite .rk i { color: var(--neon-cyan); }
.gw-rank-row.elite:hover { border-color: rgba(0, 229, 255, 0.45); }

/* 11 名及以后：普通展示（继承基础样式） */

/* ---------------- 设置开关 ---------------- */
.gw-set-card { margin-bottom: var(--sp-4); }
.gw-set-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.gw-set-head .gw-game-ic { width: 44px; height: 44px; margin-bottom: 0; filter: none; flex: 0 0 auto; }
.gw-set-head h3 { margin: 0; font-size: var(--fs-lg); }
.gw-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line-1);
}
.gw-set-row .tx { display: flex; flex-direction: column; gap: 2px; }
/* 任务11：专业开关（立体轨道 + 弹性滑钮 + 状态微图标） */
.gw-switch {
  position: relative; flex: none;
  width: 52px; height: 30px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(255, 255, 255, 0.03)), var(--bg-3);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer; padding: 0;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast);
}
.gw-switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #c7d0e6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -2px 3px rgba(20, 30, 60, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.9);
  transition: left 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* 关态：钮内短横 */
.gw-switch .knob::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 2px; border-radius: 2px;
  background: rgba(90, 107, 140, 0.65);
  transform: translate(-50%, -50%);
  transition: all var(--t-fast) var(--ease);
}
.gw-switch.on {
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--glow-brand), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.gw-switch.on .knob { left: 24px; }
/* 开态：钮内对勾 */
.gw-switch.on .knob::before {
  width: 10px; height: 6px;
  background: transparent;
  border-left: 2.4px solid #0a5f6e; border-bottom: 2.4px solid #0a5f6e;
  border-radius: 0 0 0 2px;
  transform: translate(-50%, -62%) rotate(-45deg);
}
.gw-switch:hover:not(:disabled) { filter: brightness(1.12); }
.gw-switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------------- 自定义下拉框（任务11：原生 select 视觉隐藏 + 玻璃弹层） ---------------- */
.gw-xsel { position: relative; display: inline-block; flex: 0 1 auto; min-width: 160px; }
.gw-xsel-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; /* 保留 DOM/事件/校验，交互走自定义层 */
}
.gw-xsel-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: 9px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  color: var(--tx-1); font-size: var(--fs-sm); font-family: inherit;
  cursor: pointer; text-align: left;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gw-xsel-btn:hover:not(:disabled) { border-color: var(--line-glow); }
.gw-xsel-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.gw-xsel-btn .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-xsel-chev {
  width: 14px; height: 14px; flex: none; color: var(--tx-3);
  transform: rotate(-90deg);
  transition: transform var(--t-fast) var(--ease), color var(--t-fast);
}
.gw-xsel.open .gw-xsel-btn { border-color: var(--line-glow); box-shadow: var(--glow-cyan); border-radius: var(--r-md) var(--r-md) 0 0; }
.gw-xsel.open .gw-xsel-chev { transform: rotate(90deg); color: var(--neon-cyan); }
.gw-xsel.dropup.open .gw-xsel-btn { border-radius: 0 0 var(--r-md) var(--r-md); }
.gw-xsel-pop {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: var(--z-dropdown);
  max-height: 264px; overflow-y: auto; padding: 4px;
  background: var(--bg-glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-glow); border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--shadow-2), var(--glow-cyan);
  display: none;
}
.gw-xsel.dropup .gw-xsel-pop { top: auto; bottom: calc(100% - 1px); border-radius: var(--r-md) var(--r-md) 0 0; }
.gw-xsel.open .gw-xsel-pop { display: block; animation: xselIn 0.16s var(--ease); }
@keyframes xselIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.gw-xsel-opt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; padding: 9px 12px; border: none; background: transparent;
  color: var(--tx-2); font-size: var(--fs-sm); font-family: inherit; text-align: left;
  border-radius: var(--r-sm); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast);
}
.gw-xsel-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-xsel-opt:hover { background: rgba(0, 229, 255, 0.08); color: var(--tx-1); }
.gw-xsel-opt.sel { color: var(--neon-cyan); font-weight: 600; background: rgba(0, 229, 255, 0.07); }
/* 各页布局尺寸对齐原 select */
.gw-au-filters .gw-xsel { flex: 1 1 140px; max-width: 220px; min-width: 0; }
.gw-shop-tools .gw-xsel { flex: 0 1 auto; }
.gw-set-row .gw-xsel { flex: 0 0 auto; max-width: 46%; }
.au-f-line .gw-xsel { width: 100%; }
@media (max-width: 640px) {
  .gw-set-row .gw-xsel { max-width: 56%; }
  .gw-xsel-btn { font-size: 16px; } /* iOS 防缩放对齐原生输入框策略 */
  /* 触控目标：开关视觉 30px，伪元素扩热区 */
  .gw-switch { min-height: 30px; }
  .gw-switch::after { content: ''; position: absolute; inset: -8px -6px; }
}

/* ---------------- 管理页 ---------------- */
.gw-admin-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
/* 任务6+7：管理主导航——按管理域分组的网格导航（桌面 8 列一行平铺） */
.gw-admin-nav { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--sp-2); }
.gw-admin-nav .gw-btn { width: 100%; justify-content: center; white-space: nowrap; }
/* 管理域内子页签条（行为监察/商城道具 内部分页） */
.gw-sub-tabs { padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--line-1); }
.gw-sub-tabs .gw-btn { flex: 0 0 auto; }
.gw-input {
  flex: 1; min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--tx-1);
  padding: 8px 14px;
  font-size: var(--fs-sm);
  outline: none;
  transition: border-color var(--t-fast) var(--ease);
}
.gw-input:focus { border-color: var(--line-glow); }
select.gw-input { flex: 0 1 auto; }
.gw-admin-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.gw-admin-row {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.gw-admin-row:hover { border-color: var(--line-2); }
.gw-admin-row .who { display: flex; flex-direction: column; min-width: 160px; flex: 1; }
.gw-admin-row .cell { display: flex; flex-direction: column; align-items: flex-start; min-width: 90px; }
.gw-admin-row .cell.wide { flex: 2; min-width: 220px; }
.gw-admin-row .cell i { font-style: normal; font-size: 10px; color: var(--tx-3); }
.gw-admin-row .cell b { font-size: var(--fs-sm); }
.gw-admin-row .cell em { font-style: normal; font-size: var(--fs-xs); color: var(--tx-3); }

/* 管理编辑弹窗 */
.gw-modal:has(.gw-adm-form) { width: min(560px, 94vw); text-align: left; max-height: 88vh; overflow-y: auto; }
.gw-modal:has(.gw-adm-form) h2, .gw-modal:has(.gw-adm-form) > p { text-align: center; }
.gw-adm-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.gw-adm-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); }
.gw-adm-line .gw-input { max-width: 200px; }
.gw-adm-game { border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--sp-3); }
.gw-adm-game .tt, .gw-adm-matches .tt { font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--neon-cyan); }
.gw-adm-game .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.gw-adm-game .grid4 label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--tx-3); }
.gw-adm-game .grid4 .gw-input { min-width: 0; width: 100%; padding: 6px 8px; }
/* 编辑器五列数值网格（积分/胜/负/和/MMR） */
.gw-adm-game .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); }
.gw-adm-game .grid5 label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--tx-3); }
.gw-adm-game .grid5 .gw-input { min-width: 0; width: 100%; padding: 6px 8px; }
/* 词库管理行（任务9） */
.gw-dict-row .d-edit { flex-direction: row; gap: var(--sp-2); flex: 2; min-width: 240px; }
.gw-dict-row .d-edit .d-word { flex: 1.4; min-width: 120px; }
.gw-dict-row .d-edit .d-cat { flex: 1; min-width: 100px; }
.gw-dict-row .d-ops { flex-direction: row; gap: var(--sp-2); }
.gw-dict-row.is-off .who b { opacity: 0.45; text-decoration: line-through; }
/* 胜率试算（任务4） */
.gw-wp-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--sp-2); }
.gw-wp-result { margin-top: var(--sp-3); }
.gw-wp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.gw-wp-side { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.gw-wp-side strong { font-size: var(--fs-xl); color: var(--neon-cyan); }
.gw-wp-vs { text-align: center; font-weight: 800; color: var(--tx-3); }
.gw-wp-bar { height: 8px; border-radius: 99px; background: var(--bg-3); overflow: hidden; margin-top: var(--sp-2); }
.gw-wp-bar i { display: block; height: 100%; background: var(--grad-brand); }
.gw-adm-game .cks { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--tx-2); }
.gw-adm-game .cks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gw-adm-matches { border: 1px solid var(--line-1); border-radius: var(--r-md); padding: var(--sp-3); }
.gw-adm-matches .line { font-size: var(--fs-xs); color: var(--tx-2); padding: 3px 0; border-top: 1px dashed var(--line-1); }
.gw-adm-matches .line:first-of-type { border-top: none; }

/* ---------------- 平板端（≤1024px） ---------------- */
@media (max-width: 1024px) {
  .gw-view { padding: var(--sp-5) var(--sp-4) 72px; }
  .gw-games { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .gw-match { grid-template-columns: 1fr; }
  .gw-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .gw-side .gw-panel:last-child { grid-column: 1 / -1; }
  #gwBoard { width: min(100%, 560px); }
  .gw-vsbar { width: min(100%, 560px); }
}

/* ---------------- 手机端（≤640px） ---------------- */
@media (max-width: 640px) {
  .gw-topbar { flex-wrap: wrap; height: auto; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .gw-brand { flex: 1; min-width: 0; }
  .gw-brand-title { font-size: var(--fs-sm); }
  .gw-logo-orb { width: 32px; height: 32px; }
  /* 任务7/3：导航独立一行，四列网格平铺全部可见，杜绝横向滑动。
     注意必须 flex: 0 0 100%——基础样式 flex:1 的简写含 flex-basis:0%，会覆盖 width:100% 导致导航被挤成窄条竖排 */
  .gw-tabs { order: 3; flex: 0 0 100%; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-bottom: 2px; }
  .gw-tabs button { width: 100%; padding: 7px 4px; font-size: var(--fs-xs); text-align: center; white-space: nowrap; }
  /* 品牌名单行省略，避免汉字竖排 */
  .gw-brand-tx { min-width: 0; }
  .gw-brand-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .gw-me { gap: var(--sp-2); }
  .gw-coin { padding: 5px 10px; font-size: var(--fs-xs); }
  .gw-vip { padding: 5px 9px; font-size: 10px; }
  .gw-tab-home { width: 100%; padding: 7px 4px; font-size: var(--fs-xs); justify-content: center; }

  .gw-view { padding: var(--sp-4) var(--sp-3) 60px; }
  .gw-hero { padding: var(--sp-4); }
  .gw-hero h1 { font-size: var(--fs-xl); }
  .gw-hero p { font-size: var(--fs-sm); }
  .gw-stats { gap: var(--sp-4); }
  .gw-stat b { font-size: var(--fs-xl); }
  .gw-section-head { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* 任务9：手机端大厅两列紧凑卡 + 分类头折行优化 */
  .gw-games { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .gw-game-card { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
  .gw-game-ic { width: 48px; height: 48px; margin-bottom: var(--sp-2); }
  .gw-game-card h3 { font-size: var(--fs-md); }
  .gw-game-card .en { letter-spacing: 0.14em; }
  .gw-lbc { margin-bottom: var(--sp-5); }
  .gw-lbc-head { flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .gw-lbc-title h2 { font-size: var(--fs-lg); }
  .gw-lbc-en { letter-spacing: 0.2em; }
  .gw-lbc-line { order: 5; flex-basis: 100%; }
  .gw-lbc-count { margin-left: auto; }

  .gw-side { display: flex; flex-direction: column; }
  /* 任务11：移动端侧栏重排——对局中最常用的操作/聊天靠前，观战信息沉底 */
  .gw-side .gw-panel-info { order: 1; }
  .gw-side .gw-panel-ops { order: 2; }
  .gw-side .gw-chat { order: 3; }
  .gw-side .gw-panel-spec { order: 4; }
  /* 对战条紧凑化（手机竖屏给棋盘让出纵向空间） */
  .gw-vsbar .gw-player { padding: 6px var(--sp-2); gap: var(--sp-2); }
  .gw-vsbar .gw-player .gw-avatar { width: 28px; height: 28px; font-size: 13px; }
  .gw-vsbar .gw-player .pc-rank { font-size: 9px; }
  .vs-clock b { font-size: var(--fs-md); }
  /* 出牌条触摸目标 ≥44px（移动端可用性标准） */
  .gw-playbar { gap: 8px; }
  .gw-playbar .gw-btn { min-height: 44px; padding: 10px 18px; font-size: var(--fs-sm); flex: 1; max-width: 220px; }
  .gw-board-wrap { padding: var(--sp-2); }
  /* 操作按钮已由新版 .gw-actions grid 布局接管（见房间布局专项优化区），此处保留兼容 */
  .gw-player { padding: var(--sp-2); gap: var(--sp-2); }
  .gw-player b { font-size: var(--fs-sm); }
  /* 玩家卡片信息收窄，避免长昵称挤压 */
  .gw-player .pc-info { min-width: 0; flex: 1; }
  .gw-player .pc-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .gw-rank-row { grid-template-columns: 40px 1fr auto; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .gw-rank-row .wl { display: none; }
  .gw-rank-row.top { padding: var(--sp-3) var(--sp-4); }
  .gw-rank-row.top .gw-avatar { width: 36px; height: 36px; font-size: 16px; }
  .gw-rank-row .rk i { font-size: var(--fs-md); }
  .gw-rank-row .pts { font-size: var(--fs-sm); }

  .gw-match-row { grid-template-columns: 60px 1fr; gap: 4px var(--sp-2); font-size: var(--fs-xs); }
  .gw-match-row .tm { grid-column: 2; }

  .gw-admin-row { gap: var(--sp-2); padding: var(--sp-3); }
  .gw-admin-row .who { min-width: 120px; }
  .gw-admin-row .cell { min-width: 70px; }
  .gw-adm-game .grid4 { grid-template-columns: repeat(2, 1fr); }
  .gw-adm-game .grid5 { grid-template-columns: repeat(2, 1fr); }
  /* 任务6：管理主导航手机端——4 列两行平铺，全部可见无横滑 */
  .gw-admin-nav { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .gw-admin-nav .gw-btn { padding: 7px 2px; font-size: var(--fs-xs); flex-direction: column; gap: 2px; min-height: 46px; }
  .gw-admin-nav .adnav-t { font-size: 10px; }
  /* 管理筛选条：输入框占整行，查询按钮贴边 */
  .gw-admin-bar .gw-input { min-width: 0; flex: 1 1 100%; }
  .gw-admin-bar select.gw-input { flex: 1 1 45%; }
  .gw-admin-bar .gw-btn { flex: 0 0 auto; }
  .gw-sub-tabs .gw-btn { flex: 1; justify-content: center; }
  /* 档案/记录行：单元格两列网格排布，避免被挤出屏幕 */
  .gw-admin-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .gw-admin-row .who { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
  .gw-admin-row .cell.wide { grid-column: 1 / -1; min-width: 0; }
  .gw-admin-row .gw-btn[data-edit], .gw-admin-row .d-ops { grid-column: 1 / -1; justify-content: stretch; }
  .gw-admin-row .gw-btn[data-edit] { width: 100%; justify-content: center; }
  .gw-admin-row .d-ops .gw-btn { flex: 1; justify-content: center; }
  /* 词库行：编辑区独占一行 */
  .gw-dict-row .d-edit { grid-column: 1 / -1; min-width: 0; }
  .gw-dict-row .d-flag { flex-direction: row; }
  /* 胜率试算表单：游戏选择+按钮整行 */
  .gw-wp-form { grid-template-columns: 1fr 1fr; }
  .gw-set-row { flex-direction: row; }
  .gw-set-row .tx b { font-size: var(--fs-sm); }
  .gw-skin-sel { max-width: 45%; }
  .gw-tier-row .t-pts { width: 96px; }
  .gw-clock b { font-size: var(--fs-md); }

  .gw-modal { padding: var(--sp-4); }
  .gw-modal h2 { font-size: var(--fs-xl); }
  .gw-toast { max-width: 86vw; text-align: center; }

  /* ---------------- 房间对局面板移动端深度优化 ---------------- */
  /* 对局信息面板：更紧凑的内边距 */
  .gw-panel { padding: var(--sp-3); }
  .gw-panel h3 { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }
  /* 回合横幅：字号缩小但保持可读 */
  .gw-turn-banner { font-size: var(--fs-md); padding: var(--sp-2); }
  /* 比分行：更紧凑 */
  .gw-score-line { font-size: var(--fs-xs); margin-top: var(--sp-2); }
  .gw-score-line b { font-size: var(--fs-md); }

  /* 聊天面板：头部更紧凑，消息区高度自适应 */
  .gw-chat-head { padding: var(--sp-2) var(--sp-3); }
  .gw-chat-head b { font-size: var(--fs-sm); }
  .gw-chat-list { max-height: 180px; padding: var(--sp-2) var(--sp-3); }
  .gw-chat-msg { gap: 6px; }
  .gw-chat-msg .cm-text { font-size: var(--fs-xs); padding: 6px 10px; }

  /* 座位卡片：更紧凑但保持可读性 */
  .gw-cseat { padding: var(--sp-2); }
  .gw-cseat .cs-head { gap: var(--sp-2); }
  .gw-cseat .cs-info b { font-size: var(--fs-xs); }
  .gw-cseat .cs-rank { font-size: 9px; }
  .gw-cseat .ready-tag, .gw-cseat .me-tag, .gw-cseat .host-tag { font-size: 9px; padding: 1px 6px; }
  .gw-cseat .vs-clock { min-width: 30px; }
  .gw-cseat .vs-clock b { font-size: var(--fs-sm); }

  /* 牌类中央区域：等待提示更紧凑 */
  .gw-cardarena .ca-center { min-height: 80px; }

  /* 观战席：标题栏更紧凑 */
  .gw-panel-spec h3 { font-size: var(--fs-sm); }
  .gw-panel-spec .gw-note { font-size: 10px; }

  /* 手牌区域：卡牌大小适配 */
  .gw-hand { gap: 4px; padding: var(--sp-2); }
  .gw-card { width: 42px; height: 60px; font-size: 12px; }
  .gw-card.mini { width: 28px; height: 40px; font-size: 10px; }

  /* 对局操作面板：规则说明文字缩小 */
  .gw-panel-ops .gw-note { font-size: 10px; line-height: 1.5; }
  .gw-panel-ops .gw-divider { margin: var(--sp-2) 0; }

  /* ---------------- 移动端触控与可用性增强 ---------------- */
  /* 所有可点击元素最小触控目标 44px（.gw-switch 任务11 新版自带 ::after 扩热区，见设置开关区） */
  .gw-btn, [role="button"], .gw-cseat.joinable { min-height: 44px; }
  .gw-btn-sm { min-height: 40px; }

  /* 输入框字号≥16px 防止 iOS 自动缩放 */
  .gw-input, .gw-input select { font-size: 16px; }

  /* 聊天输入框：更大的输入区域 */
  .gw-chat-input .gw-input { min-height: 44px; padding: 10px 14px; }

  /* 弹窗按钮：全宽大按钮 */
  .gw-modal .gw-actions { flex-direction: column; gap: var(--sp-2); }
  .gw-modal .gw-actions .gw-btn { width: 100%; min-height: 48px; }

  /* 牌类手牌：更大的触摸区域 */
  .gw-hand .gw-card { min-width: 44px; min-height: 62px; }

  /* 座位卡片：更大的点击区域 */
  .gw-cseat { min-height: 64px; }
  .gw-cseat.joinable { min-height: 72px; }

  /* 玩家条：更紧凑但保持可读 */
  .gw-vsbar .gw-player { min-height: 52px; }
  .gw-vsbar .gw-player .pc-info { min-width: 0; }

  /* 防止长按选中文字（影响游戏体验） */
  .gw-cseat, .gw-card, .gw-player { -webkit-tap-highlight-color: transparent; }

  /* 平滑滚动 */
  .gw-chat-list, .gw-spec-list { scroll-behavior: smooth; }
}

/* ---------------- 横屏模式优化（移动端） ---------------- */
@media (max-width: 640px) and (orientation: landscape) {
  /* 横屏时减少垂直空间占用 */
  .gw-topbar { padding: var(--sp-1) var(--sp-3); }
  .gw-view { padding-top: var(--sp-2); padding-bottom: 40px; }
  .gw-match { gap: var(--sp-3); }
  .gw-panel { padding: var(--sp-2); }
  .gw-turn-banner { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
  .gw-chat-list { max-height: 120px; }
  .gw-board-wrap { padding: var(--sp-1); }
  #gwBoard { max-width: 480px; }
}

/* ============================================================
   官方公告条
   ============================================================ */
.gw-announce {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-4);
  padding: 9px var(--sp-4);
  border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(255, 200, 87, 0.10), rgba(0, 229, 255, 0.06));
  border: 1px solid rgba(255, 200, 87, 0.35);
  overflow: hidden;
}
.gw-announce .an-ic { color: var(--neon-gold); display: inline-flex; flex: none; animation: an-twinkle 2.2s ease-in-out infinite; }
@keyframes an-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } }
.gw-announce .an-label {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: #2a1a04; background: var(--grad-gold);
  padding: 2px 10px; border-radius: var(--r-full);
}
.gw-announce .an-clip { flex: 1; min-width: 0; overflow: hidden; }
.gw-announce .an-text { color: var(--tx-1); font-size: var(--fs-sm); white-space: nowrap; display: inline-block; }
.gw-announce .an-text.marquee { animation: gw-marquee linear infinite; }
.gw-announce .an-text .an-gap { margin-left: 48px; }
@keyframes gw-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   拍卖行入口卡片（大厅）
   ============================================================ */
.gw-auction-entrance {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(255, 200, 87, 0.16), transparent 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(255, 154, 92, 0.10), transparent 50%),
    linear-gradient(120deg, rgba(255, 200, 87, 0.10), rgba(244, 113, 181, 0.06) 55%, rgba(0, 229, 255, 0.06)),
    var(--bg-glass);
  border: 1px solid rgba(255, 200, 87, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 30px rgba(255, 200, 87, 0.08);
  cursor: pointer;
  transition: all var(--t-mid) var(--ease);
  overflow: hidden;
}
.gw-auction-entrance::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-gold); }
/* 任务10：金色流光扫过（品牌奢华感） */
.gw-auction-entrance .ae-shine {
  position: absolute; top: -60%; bottom: -60%; width: 90px;
  left: -120px;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, 0.22), transparent);
  transform: skewX(-18deg);
  animation: aeShine 4.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes aeShine {
  0%, 55% { left: -120px; }
  85%, 100% { left: calc(100% + 60px); }
}
.gw-auction-entrance:hover { transform: translateY(-3px); border-color: var(--neon-gold); box-shadow: var(--shadow-2), 0 0 32px rgba(255, 200, 87, 0.32); }
.gw-auction-entrance .ae-ic {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-lg);
  background: var(--grad-gold); color: #2a1a04;
  box-shadow: 0 0 24px rgba(255, 200, 87, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(120, 60, 0, 0.35);
}
.gw-auction-entrance .ae-ic svg { width: 28px; height: 28px; }
.gw-auction-entrance .ae-tx { flex: 1; min-width: 0; }
.gw-auction-entrance h3 { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.gw-auction-entrance .ae-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--neon-gold); border: 1px solid rgba(255, 200, 87, 0.5);
  padding: 2px 10px; border-radius: var(--r-full);
  background: rgba(255, 200, 87, 0.08);
}
.gw-auction-entrance p { color: var(--tx-2); font-size: var(--fs-sm); margin-top: 4px; }

/* ============================================================
   分类标题（商城 / 背包 / 我的拍卖）
   ============================================================ */
.gw-cat-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-1);
}
.gw-cat-head:first-child { margin-top: 0; }
.gw-cat-head h3 { font-size: var(--fs-md); }
.gw-cat-head .muted { color: var(--tx-3); font-size: var(--fs-xs); flex: 1; }
.gw-cat-head em { font-style: normal; font-size: var(--fs-xs); color: var(--neon-cyan); flex: none; }

/* ============ 商城工具区（任务4：搜索/排序/分类锚点导航/折叠） ============ */
.gw-shop-tools {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  margin: var(--sp-4) 0 var(--sp-3);
}
.gw-shop-search {
  flex: 1 1 240px; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-full); padding: 8px 16px; color: var(--tx-3);
  transition: border-color var(--t-fast) var(--ease);
}
.gw-shop-search:focus-within { border-color: var(--line-glow); color: var(--neon-cyan); }
.gw-shop-search input {
  flex: 1; border: none; background: transparent; outline: none;
  color: var(--tx-1); font-size: var(--fs-sm); font-family: var(--font-ui);
}
.gw-shop-search input::placeholder { color: var(--tx-3); }
.gw-shop-search .gw-shop-kw-x {
  border: none; background: transparent; color: var(--tx-3); cursor: pointer;
  display: none; place-items: center; padding: 2px; border-radius: 50%;
}
.gw-shop-search .gw-shop-kw-x.show { display: grid; }
.gw-shop-search .gw-shop-kw-x:hover { color: var(--tx-1); }
.gw-shop-tools .gw-input { flex: none; }

.gw-cat-nav {
  display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 6px;
  margin-bottom: var(--sp-2); scrollbar-width: thin;
}
.gw-cat-nav button {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); background: var(--bg-glass); color: var(--tx-2);
  font-size: var(--fs-xs); padding: 6px 14px; border-radius: var(--r-full); cursor: pointer;
  transition: all var(--t-fast) var(--ease); white-space: nowrap;
}
.gw-cat-nav button:hover { color: var(--tx-1); border-color: var(--line-glow); }
.gw-cat-nav button em { font-style: normal; font-size: 10px; color: var(--neon-cyan); }

/* 分类区块：锚点跳转避开吸顶栏（64px 顶栏 + 余量）；折叠动效 */
.gw-cat-sec { scroll-margin-top: 76px; }
.gw-cat-toggle {
  width: 100%; border: none; background: transparent; cursor: pointer;
  color: var(--tx-1); font-family: var(--font-ui); text-align: left;
  border-bottom: 1px solid var(--line-1);
  transition: border-color var(--t-fast) var(--ease);
}
.gw-cat-toggle:hover { border-color: var(--line-glow); }
.gw-cat-toggle h3 { color: var(--tx-1); }
.gw-cat-chev { display: inline-grid; place-items: center; align-self: center; color: var(--tx-3); flex: none; }
.gw-cat-chev svg { transform: rotate(-90deg); transition: transform var(--t-fast) var(--ease); }
.gw-cat-sec.is-fold .gw-cat-chev svg { transform: rotate(0deg); }
.gw-cat-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.gw-cat-sec.is-fold .gw-cat-body { display: none; }
.gw-shop-none {
  text-align: center; color: var(--tx-3); padding: var(--sp-7);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); margin-top: var(--sp-4);
}

.gw-anim-tag {
  display: inline-flex; align-items: center;
  font-size: 10px; font-style: normal; font-weight: 700;
  color: #2a1a04; background: linear-gradient(90deg, #ffd76a, #ff9ad5);
  padding: 2px 8px; border-radius: var(--r-full); margin-left: 6px;
  vertical-align: 2px;
}
.gw-anim-tag.sm { padding: 1px 7px; margin-left: 4px; }
.gw-foot-btns { display: inline-flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }

/* ============================================================
   头像框系统（.gw-afwrap 包裹 .gw-avatar；::before 为环，头像遮中心成环）
   ============================================================ */
.gw-afwrap {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  padding: 3px;
  flex: none;
}
.gw-afwrap::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--line-2);
}
.gw-afwrap .gw-avatar { position: relative; z-index: 1; border: none; }
.gw-afwrap.sm { padding: 2px; }
.gw-afwrap.lg { padding: 4px; }
.gw-afwrap.lg .gw-avatar { width: 58px; height: 58px; font-size: 26px; }
.gw-afwrap .gw-avatar-fb svg { width: 55%; height: 55%; }

/* —— 静态款 —— */
.af-frame-wood::before { background: linear-gradient(135deg, #a06a35, #5d3a17 60%, #8a5a2b); }
.af-frame-silver::before { background: linear-gradient(135deg, #f2f6ff, #9aa7c2 55%, #cfd8ec); box-shadow: 0 0 6px rgba(210, 222, 245, 0.35); }
.af-frame-azure::before { background: linear-gradient(135deg, #7ed6ff, #1d6fd1 60%, #4fc3ff); box-shadow: 0 0 8px rgba(79, 195, 255, 0.45); }
.af-frame-violet::before { background: linear-gradient(135deg, #d3a6ff, #6d28d9 60%, #a855f7); box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
.af-frame-violet .gw-avatar { box-shadow: 0 0 0 1.5px rgba(211, 166, 255, 0.85); }
.af-frame-gold::before { background: linear-gradient(135deg, #fff3c8, #d4a017 45%, #8a5c08 70%, #ffd76a); box-shadow: 0 0 12px rgba(255, 200, 87, 0.55); }
.af-frame-rose::before { background: linear-gradient(135deg, #ffd1e8, #e0447c 55%, #ff8fc0); box-shadow: 0 0 12px rgba(244, 113, 181, 0.55); }

/* —— 动态款（旋转光环 + 呼吸辉光） —— */
@keyframes af-rot { to { transform: rotate(360deg); } }
@keyframes af-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.af-frame-neon::before {
  background: conic-gradient(#ff4fd8, #7b5cff, #00e5ff, #34f5c5, #ff4fd8);
  animation: af-rot 3s linear infinite, af-glow 2s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(255, 79, 216, 0.6);
}
.af-frame-flame::before {
  background: conic-gradient(#ff5a28, #ffb63d, #c22e1f, #ff8a3d, #ff5a28);
  animation: af-rot 2.4s linear infinite, af-glow 1.6s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(255, 110, 40, 0.65);
}
.af-frame-galaxy::before {
  background: conic-gradient(#2a1d5e, #8b5cf6, #00e5ff, #f471b5, #4f7cff, #2a1d5e);
  animation: af-rot 6s linear infinite, af-glow 3s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.7);
}
.af-frame-dragon::before {
  background: conic-gradient(#ffd76a, #ff9a3d, #c22e1f, #ffd76a, #fff3c8, #d4a017, #ffd76a);
  animation: af-rot 4s linear infinite, af-glow 1.8s ease-in-out infinite;
  box-shadow: 0 0 22px rgba(255, 200, 87, 0.8);
}
.af-frame-dragon { box-shadow: 0 0 0 1px rgba(255, 215, 106, 0.35); border-radius: 50%; }

/* —— 异型装饰款（环外造型：翼/冠/星轨/魅影） —— */
.gw-afwrap.af-frame-shadow, .gw-afwrap.af-frame-orbit, .gw-afwrap.af-frame-wings, .gw-afwrap.af-frame-crown { overflow: visible; }
.af-frame-shadow::before {
  background: conic-gradient(#2a1d5e, #7b5cff, #1a0f3c, #a855f7, #2a1d5e);
  animation: af-rot 3.4s linear infinite, af-glow 1.4s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(123, 92, 255, 0.75), 0 0 34px rgba(88, 28, 135, 0.5);
}
.af-frame-shadow::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(168, 85, 247, 0.75) 10% 12%, transparent 14% 30%, rgba(123, 92, 255, 0.7) 32% 34%, transparent 36% 58%, rgba(168, 85, 247, 0.75) 60% 62%, transparent 64% 86%, rgba(123, 92, 255, 0.7) 88% 90%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 62% 72%, transparent 78%);
  mask: radial-gradient(circle, transparent 58%, #000 62% 72%, transparent 78%);
  animation: af-rot 2.2s linear infinite reverse;
}
.af-frame-orbit::before {
  background: conic-gradient(#0b2a4a, #38bdf8, #0b2a4a, #7ed6ff, #0b2a4a);
  animation: af-glow 2.4s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
}
.af-frame-orbit::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle 3.5px at 50% 0%, #fff 0 55%, rgba(126, 214, 255, 0.9) 60% 100%),
    radial-gradient(circle 2.5px at 50% 100%, #ffd76a 0 55%, rgba(255, 183, 77, 0.85) 60% 100%);
  background-repeat: no-repeat;
  animation: af-rot 3.2s linear infinite;
}
.af-frame-wings { padding: 4px; }
.af-frame-wings::before {
  background: conic-gradient(#fff8e1, #ffd76a, #d4a017, #fff3c8, #fff8e1);
  animation: af-glow 2.6s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(255, 215, 106, 0.6);
}
/* 圣翼：内联 SVG——三层羽翼 + 头顶光环 + 「圣翼」金字绶带（金铲铲式徽章感） */
.af-frame-wings::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 240%; height: 190%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 190'><defs><linearGradient id='wg1' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fffbe8'/><stop offset='.55' stop-color='%23ffe9a8'/><stop offset='1' stop-color='%23e8b73a'/></linearGradient><linearGradient id='wg2' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff3c8'/><stop offset='.6' stop-color='%23f5cf6a'/><stop offset='1' stop-color='%23c9992a'/></linearGradient><linearGradient id='wg3' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ffe9a8'/><stop offset='1' stop-color='%23a8761f'/></linearGradient><linearGradient id='hg' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23fff3c8' stop-opacity='.2'/><stop offset='.5' stop-color='%23fffbe8'/><stop offset='1' stop-color='%23fff3c8' stop-opacity='.2'/></linearGradient><linearGradient id='rb' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23d4a017'/><stop offset='.5' stop-color='%238a5c08'/><stop offset='1' stop-color='%23d4a017'/></linearGradient></defs><ellipse cx='120' cy='30' rx='30' ry='8' fill='none' stroke='url(%23hg)' stroke-width='2' opacity='.45'/><ellipse cx='120' cy='30' rx='23' ry='6' fill='none' stroke='url(%23hg)' stroke-width='3'/><path d='M118 76 C84 42 44 36 10 62 C42 60 74 74 106 96 Z' fill='url(%23wg3)' opacity='.9'/><path d='M116 94 C86 68 52 64 22 84 C52 84 82 96 106 112 Z' fill='url(%23wg2)' opacity='.95'/><path d='M112 110 C92 92 66 90 44 104 C66 104 88 114 104 124 Z' fill='url(%23wg1)'/><path d='M122 76 C156 42 196 36 230 62 C198 60 166 74 134 96 Z' fill='url(%23wg3)' opacity='.9'/><path d='M124 94 C154 68 188 64 218 84 C188 84 158 96 134 112 Z' fill='url(%23wg2)' opacity='.95'/><path d='M128 110 C148 92 174 90 196 104 C174 104 152 114 136 124 Z' fill='url(%23wg1)'/><path d='M30 48 l0 12 M24 54 l12 0' stroke='%23fffbe8' stroke-width='2' stroke-linecap='round'/><path d='M210 48 l0 12 M204 54 l12 0' stroke='%23fffbe8' stroke-width='2' stroke-linecap='round'/><path d='M62 154 H178 L170 163 L178 172 H62 L70 163 Z' fill='url(%23rb)' stroke='%23fff3c8' stroke-width='1'/><text x='120' y='168' text-anchor='middle' font-size='12' font-weight='700' letter-spacing='2' font-family='Microsoft YaHei,PingFang SC,sans-serif' fill='%23fff8e1'>%E5%9C%A3%E7%BF%BC</text></svg>") center / 100% 100% no-repeat;
  animation: af-glow 2.6s ease-in-out infinite;
}
.af-frame-wings .gw-avatar { z-index: 1; }
.af-frame-crown::before {
  background: conic-gradient(#ffe9a8, #d4a017, #8a5c08, #ffd76a, #ffe9a8);
  animation: af-glow 2.8s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(255, 200, 87, 0.6);
}
.af-frame-crown::after {
  content: ""; position: absolute; left: 50%; top: -9px; width: 58%; height: 14px;
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(135deg, #fff3c8, #ffd76a 45%, #b8791f);
  clip-path: polygon(0% 100%, 0% 38%, 18% 62%, 30% 12%, 50% 52%, 70% 12%, 82% 62%, 100% 38%, 100% 100%);
  filter: drop-shadow(0 0 4px rgba(255, 215, 106, 0.8));
  animation: af-glow 1.8s ease-in-out infinite;
}
/* 头像框试戴预览内异型装饰缩放修正 */
.gw-item-ic .gw-afwrap.af-frame-wings::after { width: 175%; height: 139%; }
.gw-item-ic .gw-afwrap.af-frame-crown::after { top: -7px; height: 11px; }

/* 商品图标补全（新棋盘/棋子渐变块） */
.gw-item-ic.sm { width: 34px; height: 34px; border-radius: var(--r-md); }
.gw-item-ic.sm svg { width: 17px; height: 17px; }
.gw-item-ic.ic-frame { background: var(--bg-2); }
.ic-board-nebula { background: linear-gradient(135deg, #12062e, #4a1d8f) !important; }
.ic-board-magma { background: linear-gradient(135deg, #3a0d06, #c22e1f) !important; }
.ic-board-cyber { background: linear-gradient(135deg, #02222e, #00b8d4) !important; }
.ic-piece-emerald { background: linear-gradient(135deg, #06382a, #10b981) !important; }
.ic-piece-ocean { background: linear-gradient(135deg, #06283e, #38bdf8) !important; }
.ic-piece-sakura { background: linear-gradient(135deg, #3e0a24, #f472b6) !important; }
.ic-piece-inferno { background: linear-gradient(135deg, #2e0603, #ff5a28) !important; }
.ic-piece-starry { background: linear-gradient(135deg, #1a0533, #a78bfa) !important; }

/* ============================================================
   拍卖行
   ============================================================ */
.gw-au-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
/* 任务10：拍卖行品牌头（佳士得式金黑奢华） */
.gw-au-brand {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(255, 200, 87, 0.14), transparent 52%),
    radial-gradient(100% 140% at 96% 100%, rgba(255, 154, 92, 0.09), transparent 46%),
    linear-gradient(150deg, #171106, #0d0a04 60%, #120d05);
  border: 1px solid rgba(255, 200, 87, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 36px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.gw-au-brand::before,
.gw-au-brand::after {
  content: ''; position: absolute; left: var(--sp-5); right: var(--sp-5); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 87, 0.5), transparent);
}
.gw-au-brand::before { top: 10px; }
.gw-au-brand::after { bottom: 10px; }
.au-brand-rays {
  position: absolute; inset: -40% -10%;
  background: conic-gradient(from 180deg at 50% 50%, transparent 0deg, rgba(255, 200, 87, 0.05) 18deg, transparent 36deg, rgba(255, 200, 87, 0.04) 64deg, transparent 92deg, rgba(255, 200, 87, 0.05) 140deg, transparent 180deg);
  pointer-events: none;
}
.au-brand-ic {
  width: 62px; height: 62px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-gold); color: #2a1a04;
  box-shadow: 0 0 30px rgba(255, 200, 87, 0.45), inset 0 2px 5px rgba(255, 255, 255, 0.5), inset 0 -4px 8px rgba(120, 60, 0, 0.4);
  border: 2px solid rgba(255, 240, 200, 0.55);
}
.au-brand-ic svg { width: 30px; height: 30px; }
.au-brand-tx { flex: 1; min-width: 0; position: relative; }
.au-brand-kicker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.34em;
  color: rgba(255, 200, 87, 0.75); margin-bottom: 4px;
}
.gw-au-brand h2 {
  font-size: var(--fs-2xl); letter-spacing: 0.14em;
  background: linear-gradient(100deg, #fff3d6 0%, #ffc857 38%, #ffdf9e 55%, #d99a2b 78%, #ffe9bd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 18px rgba(255, 200, 87, 0.18);
}
.gw-au-brand p { color: rgba(255, 235, 200, 0.62); font-size: var(--fs-xs); margin-top: 5px; letter-spacing: 0.04em; }
.au-brand-seal {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  color: rgba(255, 200, 87, 0.5);
  border: 1px solid rgba(255, 200, 87, 0.3); border-radius: 50%;
}
.au-brand-seal svg { width: 22px; height: 22px; }
.gw-au-bal { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.au-cur-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--bg-2); border: 1px solid var(--line-1);
  font-size: var(--fs-xs);
}
.au-cur-chip em { font-style: normal; color: var(--tx-3); }
.au-cur-chip b { font-size: var(--fs-sm); }
.cur-coins { color: var(--neon-gold); }
.cur-credit { color: #ffe066; }
.cur-stone { color: var(--neon-cyan); }
.cur-coin { color: #ffb08a; }

.gw-au-tabs { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.gw-au-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255, 200, 87, 0.22); background: rgba(255, 200, 87, 0.03); color: var(--tx-2);
  font-size: var(--fs-sm); padding: 8px 18px; border-radius: var(--r-full);
  cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.gw-au-tabs button:hover { color: var(--neon-gold); border-color: rgba(255, 200, 87, 0.55); }
.gw-au-tabs button.active { color: #2a1a04; background: var(--grad-gold); border-color: transparent; box-shadow: 0 0 18px rgba(255, 200, 87, 0.35), inset 0 1px 3px rgba(255, 255, 255, 0.4); font-weight: 700; }

.gw-au-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.gw-au-filters .gw-input { flex: 1 1 140px; max-width: 220px; }
.gw-au-filters #gwAfKw { max-width: 260px; }

.gw-au-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.gw-au-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto auto auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
}
.gw-au-row:hover { border-color: rgba(255, 200, 87, 0.45); transform: translateY(-1px); box-shadow: 0 4px 18px rgba(255, 200, 87, 0.10); }
.gw-au-row .au-ic { display: inline-flex; flex: none; }
.gw-au-row .au-item { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gw-au-row .au-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-au-row .au-sub { font-size: var(--fs-xs); color: var(--tx-3); display: inline-flex; align-items: center; }
.gw-au-row .au-seller { display: inline-flex; align-items: center; gap: 5px; color: var(--tx-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-au-row .au-price { display: inline-flex; align-items: baseline; gap: 5px; font-size: var(--fs-sm); }
.gw-au-row .au-price b { font-size: var(--fs-lg); }
.gw-au-row .au-price em { font-style: normal; font-size: 10px; color: var(--tx-3); }
.gw-au-row .au-time { font-size: var(--fs-xs); color: var(--tx-3); white-space: nowrap; }
.gw-au-row .au-memo { font-size: var(--fs-xs); color: var(--tx-2); }
.gw-au-row .au-memo b { color: var(--neon-green); }

.au-pill { font-size: 10px; padding: 2px 10px; border-radius: var(--r-full); width: fit-content; }
.au-pill.p-open { color: var(--neon-green); background: rgba(52, 245, 197, 0.10); border: 1px solid rgba(52, 245, 197, 0.35); }
.au-pill.p-sold { color: var(--neon-gold); background: rgba(255, 200, 87, 0.10); border: 1px solid rgba(255, 200, 87, 0.35); }
.au-pill.p-closed { color: var(--tx-3); background: var(--bg-3); border: 1px solid var(--line-2); }

/* 出售页 */
.gw-au-sell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: start; }
/* 任务7：出售物品分类列表（与背包同一套分类，整列滚动） */
.au-sell-list { max-height: 480px; overflow-y: auto; padding-right: 2px; }
.au-sell-cat {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--tx-2);
}
.au-sell-cat:first-child { margin-top: 0; }
.au-sell-cat::before { content: ""; width: 4px; height: 12px; border-radius: 2px; background: var(--grad-brand); }
.au-sell-cat em { font-style: normal; font-weight: 400; color: var(--tx-3); }
.au-sell-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.au-sell-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-md);
  cursor: pointer; text-align: left; color: var(--tx-1);
  transition: all var(--t-fast) var(--ease);
}
.au-sell-item:hover { border-color: var(--line-glow); transform: translateY(-1px); }
.au-sell-item.sel { border-color: var(--neon-gold); box-shadow: 0 0 12px rgba(255, 200, 87, 0.25); background: rgba(255, 200, 87, 0.06); }
.au-sell-item.rar-rare { border-color: rgba(79, 195, 255, 0.35); }
.au-sell-item.rar-epic { border-color: rgba(168, 85, 247, 0.4); }
.au-sell-item.rar-legend { border-color: rgba(255, 200, 87, 0.45); }
.au-sell-item .nm { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-sell-item em { font-style: normal; font-size: 10px; color: var(--tx-3); flex: none; }
.au-sell-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.au-f-line { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.au-f-line > span { font-size: var(--fs-xs); color: var(--tx-3); }
.au-cur-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.au-cur-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-md);
  background: var(--bg-2); border: 1px solid var(--line-1);
  font-size: var(--fs-sm); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.au-cur-opt:has(input:checked) { border-color: currentColor; background: var(--bg-3); font-weight: 600; }
.au-cur-opt input { accent-color: currentColor; margin: 0; }
.au-fee { font-size: var(--fs-xs); color: var(--tx-2); background: var(--bg-2); border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); line-height: 1.8; }
.au-fee b { color: var(--neon-gold); }
.au-fee .au-net { color: var(--neon-green); }

/* 拍卖行响应式 */
@media (max-width: 1024px) {
  .gw-au-sell { grid-template-columns: 1fr; }
  .gw-auction-entrance { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .gw-auction-entrance { padding: var(--sp-4); gap: var(--sp-3); }
  .gw-auction-entrance .ae-ic { width: 42px; height: 42px; }
  .gw-auction-entrance .gw-btn { width: 100%; }
  /* 任务10：品牌头窄屏适配 */
  .gw-au-brand { padding: var(--sp-4); gap: var(--sp-3); }
  .au-brand-ic { width: 48px; height: 48px; }
  .au-brand-ic svg { width: 24px; height: 24px; }
  .au-brand-seal { display: none; }
  .gw-au-brand h2 { font-size: var(--fs-xl); letter-spacing: 0.1em; }
  .au-brand-kicker { letter-spacing: 0.2em; }
  .gw-announce { margin-top: 0; border-radius: var(--r-lg); }
  .gw-au-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; padding: var(--sp-3); }
  .gw-au-row .au-seller { display: none; }
  .gw-au-row .au-price { grid-column: 2; }
  .gw-au-row .au-time { grid-column: 3; grid-row: 1; }
  .gw-au-row .au-memo { grid-column: 2; }
  .gw-au-row .gw-btn { grid-row: span 2; }
  .gw-au-filters .gw-input { max-width: none; flex: 1 1 45%; }
  .au-cur-pick { grid-template-columns: 1fr; }
  .gw-cat-head { flex-wrap: wrap; gap: 4px var(--sp-2); }
  .gw-cat-head .muted { flex-basis: 100%; order: 3; }
}

/* ============================================================
   商城页头 + 余额条
   ============================================================ */
.gw-shop-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-5); padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, rgba(255, 200, 87, 0.10), rgba(139, 92, 246, 0.10)), var(--bg-glass);
  border: 1px solid var(--line-2);
}
.gw-shop-hero h2 { font-size: var(--fs-2xl); margin: 2px 0 4px; }
.gw-shop-hero .muted { color: var(--tx-3); font-size: var(--fs-sm); }
.gw-bal-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gw-bal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--bg-2); border: 1px solid var(--line-1);
  font-size: var(--fs-xs);
}
.gw-bal-chip em { font-style: normal; color: var(--tx-3); }
.gw-bal-chip b { font-size: var(--fs-md); }

.gw-tag-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0; }

/* ============================================================
   品质系统（普通/稀有/史诗/传说）
   ============================================================ */
.gw-rar-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); border: 1px solid; width: fit-content; }
.gw-rar-tag.rar-common { color: var(--tx-2); border-color: var(--line-2); background: var(--bg-3); }
.gw-rar-tag.rar-rare { color: #4fc3ff; border-color: rgba(79, 195, 255, 0.5); background: rgba(79, 195, 255, 0.10); }
.gw-rar-tag.rar-epic { color: #c084fc; border-color: rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.10); }
.gw-rar-tag.rar-legend { color: var(--neon-gold); border-color: rgba(255, 200, 87, 0.55); background: rgba(255, 200, 87, 0.10); }

/* 卡片/行 品质描边 + 角标 */
.gw-item-card, .gw-au-row, .gw-adm-item { position: relative; }
.gw-item-card.rar-rare, .gw-au-row.rar-rare, .gw-adm-item.rar-rare { border-color: rgba(79, 195, 255, 0.45); }
.gw-item-card.rar-epic, .gw-au-row.rar-epic, .gw-adm-item.rar-epic { border-color: rgba(168, 85, 247, 0.5); }
.gw-item-card.rar-legend, .gw-au-row.rar-legend, .gw-adm-item.rar-legend { border-color: rgba(255, 200, 87, 0.55); }
.gw-item-card.rar-legend { box-shadow: 0 0 16px rgba(255, 200, 87, 0.12); }
.gw-item-card.rar-epic { box-shadow: 0 0 12px rgba(168, 85, 247, 0.10); }
.rar-corner { display: none; }
.gw-item-card.rar-legend .rar-corner, .gw-item-card.rar-epic .rar-corner {
  display: block; position: absolute; top: 0; right: 0; width: 44px; height: 44px;
  border-radius: 0 var(--r-lg) 0 var(--r-lg); pointer-events: none;
}
.gw-item-card.rar-epic .rar-corner { background: linear-gradient(225deg, rgba(168, 85, 247, 0.35), transparent 70%); }
.gw-item-card.rar-legend .rar-corner { background: linear-gradient(225deg, rgba(255, 200, 87, 0.4), transparent 70%); }

/* ============================================================
   商品可视化预览（棋盘渐变+网格 / 棋子双色球 / 头像框试戴）
   ============================================================ */
.gw-item-ic.ic-board, .gw-item-ic.ic-piece { position: relative; overflow: hidden; }
.gw-item-ic .bd-grid {
  position: absolute; inset: 15%;
  background-image: linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px);
  background-size: 25% 25%;
  border-radius: 2px;
  /* 呼应棋盘四周纹路皮肤：迷你盘外圈装饰环 */
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18), 0 0 0 4.5px rgba(255, 255, 255, 0.14), 0 0 14px rgba(0, 0, 0, 0.25);
}
/* 卡片悬停：视觉块轻微上浮（专业电商质感） */
.gw-item-card .gw-item-ic { transition: transform var(--t-mid) var(--ease), filter var(--t-mid) var(--ease); }
.gw-item-card:hover .gw-item-ic { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }
.gw-item-ic.ic-piece { display: grid; place-items: center; background: var(--bg-2); }
.gw-item-ic .pc-pair { display: inline-flex; gap: 5px; }
.gw-item-ic .pc-pair i {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset -2px -3px 5px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
}
.gw-item-ic.lg { width: 84px; height: 84px; border-radius: var(--r-lg); }
.gw-item-ic.lg .pc-pair i { width: 26px; height: 26px; }
.gw-item-ic.lg svg { width: 40px; height: 40px; }
.gw-item-ic.lg .gw-afwrap.lg .gw-avatar { width: 56px; height: 56px; }

/* ============================================================
   购买二次确认弹窗（游戏结算面板）
   ============================================================ */
.gw-modal:has(.gw-buy-modal) { width: min(430px, 94vw); }
.gw-buy-modal { text-align: center; }
.gw-buy-modal .buy-visual { display: flex; justify-content: center; margin-bottom: var(--sp-3); }
.gw-buy-modal .buy-tags { justify-content: center; }
.gw-buy-modal .buy-desc { color: var(--tx-2); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-4); }
.gw-buy-modal .buy-settle {
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: 8px;
}
.gw-buy-modal .bs-line { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); }
.gw-buy-modal .bs-line span { color: var(--tx-3); }
.gw-buy-modal .bs-line b { display: inline-flex; align-items: center; gap: 4px; }
.gw-buy-modal .bs-line.lack b { color: var(--danger); }
.gw-buy-modal.rar-legend .buy-visual { filter: drop-shadow(0 0 14px rgba(255, 200, 87, 0.45)); }
.gw-buy-modal.rar-epic .buy-visual { filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.4)); }
/* 购买成功态 */
.gw-buy-modal.gw-acquired h2 { color: var(--neon-green); }
.gw-buy-modal .acq-ring {
  width: 64px; height: 64px; margin: 0 auto var(--sp-3);
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(52, 245, 197, 0.12); border: 1px solid rgba(52, 245, 197, 0.45);
  color: var(--neon-green);
  animation: acq-pop 0.45s var(--ease);
}
.gw-buy-modal .acq-ring svg { width: 30px; height: 30px; }
@keyframes acq-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* 拍卖购买/出价弹窗共用 */
.gw-buy-line { display: flex; align-items: center; gap: var(--sp-3); text-align: left; margin-bottom: var(--sp-3); }
.gw-buy-line .bl-tx { display: flex; flex-direction: column; min-width: 0; }
.gw-bid-info {
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.gw-bid-info .bi-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-sm); }
.gw-bid-info .bi-row span { color: var(--tx-3); }
.gw-bid-info .bi-row b { display: inline-flex; align-items: center; gap: 4px; }
.gw-bid-info .bi-note { font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.7; }
.gw-bid-input { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gw-bid-input .gw-input { flex: 1; }
/* 出价记录 */
.gw-bid-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; text-align: left; }
.gw-bid-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: 6px 10px; background: var(--bg-2); border-radius: var(--r-md); }
.gw-bid-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-bid-row .amt { font-weight: 700; }
.gw-bid-row .tm { font-size: 10px; color: var(--tx-3); }

/* ============================================================
   拍卖行补充（方式标签 / 交易列 / 操作列）
   ============================================================ */
.au-kind { font-size: 10px; font-weight: 700; padding: 2px 10px; border-radius: var(--r-full); width: fit-content; border: 1px solid; }
.au-kind.k-fixed { color: var(--neon-cyan); border-color: rgba(0, 229, 255, 0.4); background: rgba(0, 229, 255, 0.08); }
.au-kind.k-auc { color: #ff9ad5; border-color: rgba(244, 113, 181, 0.45); background: rgba(244, 113, 181, 0.08); }
.gw-au-row .au-deal { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gw-au-row .au-ops { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.gw-au-row .au-bidder { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--tx-2); }
.gw-au-row .au-bidder .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.gw-au-row.is-auc { border-left: 3px solid rgba(244, 113, 181, 0.55); }
.gw-avatar.xs { width: 22px; height: 22px; font-size: 11px; }
.gw-afwrap.xs { padding: 2px; }
.gw-afwrap.xs .gw-avatar { width: 22px; height: 22px; font-size: 11px; }

/* ============================================================
   房间聊天面板（桌面侧栏 / 移动折叠条）
   ============================================================ */
.gw-chat { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.gw-chat-head {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: 10px var(--sp-3);
  background: var(--bg-2); border: none; color: var(--tx-1);
  font-size: var(--fs-sm); cursor: pointer; text-align: left;
}
.gw-chat-head:hover { background: var(--bg-3); }
.gw-chat-head .ch-count { flex: 1; text-align: right; }
.gw-chat-head .ch-caret {
  width: 8px; height: 8px; flex: none;
  border-right: 1.8px solid var(--tx-3); border-bottom: 1.8px solid var(--tx-3);
  transform: rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.gw-chat.folded .ch-caret { transform: rotate(-135deg); }
.gw-chat-body { display: flex; flex-direction: column; min-height: 0; }
.gw-chat-list {
  height: 180px; overflow-y: auto;
  padding: var(--sp-3); display: flex; flex-direction: column; gap: 10px;
}
.gw-chat-empty { color: var(--tx-3); font-size: var(--fs-xs); text-align: center; padding: var(--sp-4) 0; }
.gw-chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.gw-chat-msg .cm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gw-chat-msg .cm-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--tx-3); }
.gw-chat-msg .cm-meta b { color: var(--tx-2); font-size: var(--fs-xs); }
.gw-chat-msg .cm-tag { font-style: normal; font-size: 9px; padding: 0 6px; border-radius: var(--r-full); border: 1px solid; }
.gw-chat-msg .cm-host { color: var(--neon-gold); border-color: rgba(255, 200, 87, 0.45); }
.gw-chat-msg .cm-spec { color: var(--neon-cyan); border-color: rgba(0, 229, 255, 0.4); }
.gw-chat-msg .cm-text {
  font-size: var(--fs-sm); line-height: 1.55; word-break: break-word;
  background: var(--bg-2); border: 1px solid var(--line-1);
  padding: 6px 10px; border-radius: 2px 10px 10px 10px; width: fit-content; max-width: 100%;
}
.gw-chat-msg.mine { flex-direction: row-reverse; }
.gw-chat-msg.mine .cm-body { align-items: flex-end; }
.gw-chat-msg.mine .cm-text {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.14), rgba(79, 124, 255, 0.12));
  border-color: rgba(0, 229, 255, 0.3); border-radius: 10px 2px 10px 10px;
}
.gw-chat-msg.spec .cm-text { background: var(--bg-3); }
.gw-chat-input { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--line-1); }
.gw-chat-input .gw-input { flex: 1; min-width: 0; }

/* ============================================================
   管理端 · 道具配置行
   ============================================================ */
.gw-adm-item .it-price i { display: block; font-style: normal; font-size: 10px; color: var(--tx-3); margin-bottom: 4px; }
.gw-adm-item .it-price-line { display: flex; gap: 6px; }
.gw-adm-item .it-amt { width: 110px; }
.gw-adm-item .it-cur { width: 110px; }

/* ============================================================
   段位名特效（任务2 · 22 种预设）
   - 渲染结构：<span class="rk-tier rk-<effect>" style="--rk-c:#rrggbb">段位名</span>
   - --rk-c：管理员自定义颜色，作为光晕/渐变基调（默认取霓虹金）；
   - 渐变/流光类须 background-clip:text + 文字透明，自定义色不直接作文字色。
   - 动画仅 transform/opacity/background-position/text-shadow，低端机可承受。
   ============================================================ */
.rk-tier[class*="rk-"] { --rk-c: var(--neon-gold, #ffd66e); }
.rk-glow { color: var(--rk-c); animation: rk-glow 2.2s ease-in-out infinite; }
@keyframes rk-glow {
  0%, 100% { text-shadow: 0 0 4px var(--rk-c), 0 0 10px color-mix(in srgb, var(--rk-c) 55%, transparent); }
  50% { text-shadow: 0 0 10px var(--rk-c), 0 0 22px var(--rk-c), 0 0 34px color-mix(in srgb, var(--rk-c) 60%, transparent); }
}
.rk-pulse { color: var(--rk-c); display: inline-block; animation: rk-pulse 1.6s ease-in-out infinite; }
@keyframes rk-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 6px color-mix(in srgb, var(--rk-c) 65%, transparent); }
  50% { transform: scale(1.12); text-shadow: 0 0 16px var(--rk-c); }
}
.rk-shimmer {
  color: transparent;
  background-image: linear-gradient(100deg, var(--rk-c) 20%, #fff 40%, var(--rk-c) 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rk-shimmer 2.4s linear infinite;
}
@keyframes rk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -20% 0; } }
.rk-gradient {
  color: transparent;
  background-image: linear-gradient(120deg, #00e5ff, #7c6bff 55%, #ff5ee7);
  -webkit-background-clip: text; background-clip: text;
}
.rk-rainbow {
  color: transparent;
  background-image: linear-gradient(90deg, #ff5b5b, #ffd66e, #6effa8, #00e5ff, #7c6bff, #ff5ee7, #ff5b5b);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rk-rainbow 4s linear infinite;
}
@keyframes rk-rainbow { 0% { background-position: 0% 0; } 100% { background-position: 300% 0; } }
.rk-fire {
  color: transparent;
  background-image: linear-gradient(180deg, #fff3b0 5%, #ffb03a 45%, #ff5b2e 80%, #d42b1e);
  -webkit-background-clip: text; background-clip: text;
  animation: rk-fire 1.1s ease-in-out infinite alternate;
}
@keyframes rk-fire {
  0% { text-shadow: 0 -2px 8px rgba(255, 122, 24, 0.55), 0 2px 6px rgba(212, 43, 30, 0.4); transform: translateY(0); }
  100% { text-shadow: 0 -6px 16px rgba(255, 176, 58, 0.85), 0 2px 10px rgba(255, 91, 46, 0.6); transform: translateY(-1px); }
}
.rk-ice {
  color: transparent;
  background-image: linear-gradient(180deg, #eafcff, #8fd8ff 55%, #3f9fff);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 0 12px rgba(143, 216, 255, 0.45);
  animation: rk-ice 2.8s ease-in-out infinite;
}
@keyframes rk-ice {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(143, 216, 255, 0.7)); }
}
.rk-lightning {
  color: #cdb4ff;
  text-shadow: 0 0 8px #9d4dff, 0 0 18px rgba(157, 77, 255, 0.6);
  animation: rk-lightning 2.6s linear infinite;
}
@keyframes rk-lightning {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.55; }
  6% { opacity: 1; }
  46% { opacity: 1; }
  48% { opacity: 0.4; }
  50% { opacity: 1; text-shadow: 0 0 14px #c07bff, 0 0 30px #9d4dff; }
}
.rk-neon {
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--rk-c), 0 0 20px var(--rk-c), 0 0 34px var(--rk-c);
  animation: rk-neon 3s ease-in-out infinite;
}
@keyframes rk-neon {
  0%, 100% { text-shadow: 0 0 4px #fff, 0 0 10px var(--rk-c), 0 0 20px var(--rk-c), 0 0 34px var(--rk-c); }
  50% { text-shadow: 0 0 2px #fff, 0 0 6px var(--rk-c), 0 0 12px var(--rk-c), 0 0 20px var(--rk-c); }
}
.rk-gold {
  color: transparent;
  background-image: linear-gradient(160deg, #fff8d6 10%, #ffd66e 35%, #b8860b 55%, #ffe9a0 75%, #d4a017);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rk-gold 3.2s ease-in-out infinite;
}
@keyframes rk-gold { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.rk-diamond {
  color: transparent;
  background-image: linear-gradient(135deg, #ffffff 15%, #bfe9ff 40%, #6fb7ff 55%, #eaf9ff 75%);
  -webkit-background-clip: text; background-clip: text;
  animation: rk-diamond 1.8s ease-in-out infinite;
}
@keyframes rk-diamond {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 3px rgba(191, 233, 255, 0.5)); }
  50% { filter: brightness(1.6) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)); }
}
.rk-galaxy {
  color: transparent;
  background-image: linear-gradient(120deg, #b69cff, #6f7bff 35%, #00e5ff 65%, #c77bff);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rk-galaxy 5s ease-in-out infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 6px rgba(140, 120, 255, 0.45));
}
@keyframes rk-galaxy { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.rk-sakura {
  color: #ffc7dd;
  text-shadow: 0 0 8px rgba(255, 158, 196, 0.75), 0 0 18px rgba(255, 105, 160, 0.4);
  animation: rk-sakura 3.4s ease-in-out infinite;
}
@keyframes rk-sakura {
  0%, 100% { filter: brightness(1); transform: rotate(0deg); }
  50% { filter: brightness(1.25); }
}
.rk-toxic {
  color: #a6ff4d;
  text-shadow: 0 0 8px rgba(120, 255, 60, 0.8), 0 0 20px rgba(80, 220, 40, 0.5);
  animation: rk-toxic 2s ease-in-out infinite;
}
@keyframes rk-toxic {
  0%, 100% { text-shadow: 0 0 8px rgba(120, 255, 60, 0.8), 0 0 20px rgba(80, 220, 40, 0.5); }
  50% { text-shadow: 0 0 4px rgba(120, 255, 60, 0.5), 0 0 10px rgba(80, 220, 40, 0.3); }
}
.rk-shadow {
  color: #8d7bd8;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 14px rgba(80, 50, 160, 0.7);
  animation: rk-shadow 3s ease-in-out infinite;
}
@keyframes rk-shadow {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.65; text-shadow: 0 3px 10px rgba(0, 0, 0, 1), 0 0 22px rgba(120, 70, 220, 0.8); }
}
.rk-holy {
  color: transparent;
  background-image: linear-gradient(180deg, #ffffff, #ffeec2 55%, #ffd66e);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255, 236, 180, 0.8));
  animation: rk-holy 2.6s ease-in-out infinite;
}
@keyframes rk-holy {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 236, 180, 0.7)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 240, 200, 1)); }
}
.rk-blood {
  color: #ff4d5e;
  text-shadow: 0 0 10px rgba(200, 20, 40, 0.9), 0 0 24px rgba(140, 0, 20, 0.6);
  animation: rk-blood 2.4s ease-in-out infinite;
}
@keyframes rk-blood {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); text-shadow: 0 0 16px rgba(255, 60, 80, 1), 0 0 34px rgba(180, 10, 30, 0.8); }
}
.rk-aurora {
  color: transparent;
  background-image: linear-gradient(100deg, #51ffa9, #00e5ff 35%, #7c6bff 65%, #ff5ee7);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rk-aurora 4.4s ease-in-out infinite;
}
@keyframes rk-aurora {
  0%, 100% { background-position: 0% 0; filter: brightness(1); }
  50% { background-position: 100% 0; filter: brightness(1.25); }
}
.rk-cyber {
  color: #00e5ff;
  text-shadow: -1.5px 0 rgba(255, 94, 231, 0.85), 1.5px 0 rgba(0, 229, 255, 0.85);
  animation: rk-cyber 1.7s steps(2, jump-none) infinite;
}
@keyframes rk-cyber {
  0%, 100% { text-shadow: -1.5px 0 rgba(255, 94, 231, 0.85), 1.5px 0 rgba(0, 229, 255, 0.85); }
  50% { text-shadow: 1.5px 0 rgba(255, 94, 231, 0.85), -1.5px 0 rgba(0, 229, 255, 0.85); }
}
.rk-dragon {
  color: transparent;
  background-image: linear-gradient(180deg, #ffe08a 10%, #ff8a3c 50%, #e03131 90%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 7px rgba(255, 120, 40, 0.55));
  animation: rk-dragon 2.8s ease-in-out infinite;
}
@keyframes rk-dragon {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 120, 40, 0.5)); }
  50% { filter: drop-shadow(0 0 15px rgba(255, 170, 60, 0.9)); }
}
.rk-starfall {
  color: transparent;
  background-image: linear-gradient(115deg, #dff4ff 5%, #8fc7ff 30%, #ffffff 50%, #7c9bff 75%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: rk-starfall 2.1s linear infinite;
  filter: drop-shadow(0 0 5px rgba(160, 200, 255, 0.6));
}
@keyframes rk-starfall { 0% { background-position: 200% 0; } 100% { background-position: -40% 0; } }

/* 段位编辑器行：颜色/特效/预览 */
.gw-tier-row .t-color { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--line-1); border-radius: 8px; background: var(--bg-2); cursor: pointer; flex: none; }
.gw-tier-row .t-effect { width: 110px; flex: none; }
.gw-tier-row .t-preview { flex: none; min-width: 64px; text-align: center; }
@media (max-width: 640px) {
  .gw-tier-row { flex-wrap: wrap; }
  .gw-tier-row .t-effect { flex: 1; min-width: 100px; }
}
.gw-adm-item .it-flags { display: flex; flex-direction: column; gap: 6px; }
.gw-adm-item .it-flag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tx-2); cursor: pointer; white-space: nowrap; }
.gw-adm-item .it-flag input { accent-color: var(--neon-cyan); margin: 0; }

/* ============================================================
   响应式补充（聊天/购买弹窗/道具配置）
   ============================================================ */
@media (max-width: 640px) {
  .gw-shop-hero { flex-direction: column; align-items: flex-start; padding: var(--sp-4); }
  /* 商城工具区（任务4）：搜索独占一行，排序下拉随行 */
  .gw-shop-tools { gap: var(--sp-2); }
  .gw-shop-search { flex-basis: 100%; min-width: 0; }
  .gw-shop-tools .gw-input { flex: 1; }
  .gw-cat-body { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
  .gw-chat-list { height: 140px; }
  .gw-adm-item { flex-wrap: wrap; }
  .gw-adm-item .it-price, .gw-adm-item .it-flags { flex-basis: 100%; }
  .gw-bid-input { flex-direction: column; }
}

.gw-match.draw { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); gap: var(--sp-4); }
.gw-draw-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.gw-dstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px;
  padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.06), rgba(99, 102, 241, 0.05)), var(--bg-glass);
}
.gw-dseat {
  min-width: 0; display: flex; align-items: center; gap: 8px; position: relative;
  padding: 8px 9px; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: var(--bg-2);
}
.gw-dseat.drawer { border-color: rgba(255, 200, 87, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.12), 0 0 14px rgba(255, 200, 87, 0.1); }
.gw-dseat.correct { border-color: rgba(74, 222, 128, 0.55); background: rgba(74, 222, 128, 0.07); }
.gw-dseat.off, .gw-dseat.offline { opacity: 0.64; }
.gw-dseat .ds-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gw-dseat .ds-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.gw-dseat .ds-info em { font-style: normal; font-size: 10px; color: var(--neon-gold); }
.gw-dseat .ds-draw, .gw-dseat .ds-ok {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%;
}
.gw-dseat .ds-draw { color: var(--neon-gold); background: rgba(255, 200, 87, 0.12); }
.gw-dseat .ds-ok { color: var(--neon-green); background: rgba(74, 222, 128, 0.12); }
.gw-draw-head {
  min-height: 52px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-glass);
}
.gw-round-pill, .gw-draw-clock {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
  padding: 5px 10px; border-radius: var(--r-full); font-size: var(--fs-xs); white-space: nowrap;
}
.gw-round-pill { color: var(--neon-cyan); border: 1px solid rgba(0, 229, 255, 0.35); background: rgba(0, 229, 255, 0.08); }
.gw-phase-tx { flex: 1; min-width: 150px; font-size: var(--fs-sm); font-weight: 700; color: var(--tx-2); }
.gw-phase-tx.mine { color: var(--neon-gold); }
.gw-draw-clock { margin-left: auto; color: var(--tx-2); border: 1px solid var(--line-1); background: var(--bg-2); }
.gw-draw-clock b { min-width: 20px; text-align: center; font-size: var(--fs-md); color: var(--tx-1); }
.gw-draw-clock b.urgent { color: #ff667a; animation: gw-draw-urgent .8s ease-in-out infinite alternate; }
@keyframes gw-draw-urgent { to { transform: scale(1.12); text-shadow: 0 0 10px rgba(255, 80, 105, 0.8); } }
.gw-word-blanks { display: inline-flex; gap: 5px; align-items: center; }
.gw-word-blanks i { width: 18px; height: 22px; border-bottom: 2px solid rgba(255, 255, 255, 0.5); }
.gw-word-text { font-size: var(--fs-lg); font-weight: 800; color: var(--neon-green); letter-spacing: .12em; }
.gw-draw-stage {
  position: relative; width: min(100%, 820px); margin-inline: auto; aspect-ratio: 4 / 3;
  overflow: hidden; isolation: isolate; border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: #fff; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.gw-draw-stage.drawable { cursor: crosshair; border-color: rgba(0, 229, 255, 0.55); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 0 24px rgba(0, 229, 255, 0.1); }
.gw-draw-canvas-wrap { position: absolute; inset: 0; overflow: hidden; background: #fff; }
#gwDrawCanvas {
  display: block; width: 100%; height: 100%; touch-action: none; overscroll-behavior: contain;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.gw-draw-overlay {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(7, 11, 24, 0.66); backdrop-filter: blur(8px);
}
.gw-pick-card, .gw-pick-wait, .gw-reveal-card {
  width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: clamp(20px, 4vw, 38px); text-align: center; border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl); background: linear-gradient(145deg, rgba(25, 34, 63, 0.96), rgba(10, 15, 31, 0.96));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
}
.gw-pick-card h4 { margin: 0; font-size: var(--fs-xl); }
.gw-pick-words { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.gw-pick-words .gw-btn { justify-content: center; min-height: 46px; }
.gw-pick-wait b { font-size: var(--fs-lg); }
.gw-reveal-word { margin: 0; color: var(--neon-green); font-size: clamp(30px, 6vw, 54px); letter-spacing: .12em; }
.gw-reveal-scores { width: min(320px, 100%); display: flex; flex-direction: column; gap: 6px; }
.rv-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.06); }
.rv-line em { font-style: normal; color: var(--neon-gold); font-weight: 800; }
.gw-draw-wait { height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: clamp(18px, 4vw, 38px); color: var(--tx-1); background: var(--bg-2); text-align: center; }
.gw-draw-wait h3, .gw-draw-wait p { margin: 0; }
.gw-draw-seats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; text-align: left; }
.gw-draw-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--bg-glass);
}
.dt-colors, .dt-sizes, .dt-ops { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-colors { padding-right: 10px; border-right: 1px solid var(--line-1); }
.dt-sizes { padding-right: 10px; border-right: 1px solid var(--line-1); }
.dt-ops { flex: 1; justify-content: flex-end; }
.dt-c, .dt-custom, .dt-w, .dt-op, .dt-brush {
  min-width: 40px; min-height: 40px; border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: var(--bg-2); color: var(--tx-2); cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* 画笔点选条（任务3：对局内点选即用） */
.dt-brushes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-right: 10px; border-right: 1px solid var(--line-1); }
.dt-brush { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 52px; padding: 3px 6px 4px; }
.dt-brush .gw-brpv { width: 40px; height: 22px; gap: 3px; }
.dt-brush .gw-brpv i { width: 30px; height: 3px; }
.dt-brush .gw-brpv i:nth-child(2) { width: 23px; }
.dt-brush .gw-brpv i:nth-child(3) { width: 16px; }
.dt-brush em { font-style: normal; font-size: 10px; color: var(--tx-2); line-height: 1.2; }
.dt-brush.on { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18); }
.dt-brush.on em { color: var(--neon-cyan); }
.dt-brush:hover { transform: translateY(-1px); border-color: var(--line-glow); }
.dt-brush-loading { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tx-3); padding: 0 6px; }
.dt-c { min-width: 32px; width: 32px; min-height: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.16); }
.dt-c.on, .dt-custom.on, .dt-w.on, .dt-op.on { border-color: var(--neon-cyan); box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18); }
.dt-c:hover, .dt-custom:hover, .dt-w:hover, .dt-op:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--line-glow); }
.dt-custom { position: relative; width: 34px; min-width: 34px; min-height: 34px; overflow: hidden; background: conic-gradient(#f55, #ff5, #5f5, #5ff, #55f, #f5f, #f55); }
.dt-custom input { position: absolute; inset: -8px; width: 50px; height: 50px; opacity: 0; cursor: pointer; }
.dt-w { width: 42px; display: grid; place-items: center; }
.dt-w i { display: block; width: 24px; border-radius: var(--r-full); background: var(--tx-1); }
.dt-op { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; white-space: nowrap; font-size: var(--fs-xs); }
.dt-op.gold { color: var(--neon-gold); border-color: rgba(255, 200, 87, 0.35); }
.dt-op:disabled { opacity: .42; cursor: not-allowed; }
.gw-guessbar { display: flex; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--bg-glass); }
.gw-guessbar input { flex: 1; min-width: 0; min-height: 44px; padding: 0 13px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-2); color: var(--tx-1); outline: none; }
.gw-guessbar input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.1); }
.gw-guess-done { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--neon-green); border: 1px solid rgba(74, 222, 128, 0.35); border-radius: var(--r-xl); background: rgba(74, 222, 128, 0.08); }
.gw-guess-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.gw-guess { display: grid; grid-template-columns: minmax(64px, auto) 1fr auto; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--bg-2); font-size: var(--fs-xs); }
.gw-guess b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-guess span { min-width: 0; overflow-wrap: anywhere; color: var(--tx-2); }
.gw-guess.ok { border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.07); }
.gw-guess.ok span, .gw-guess.ok .i { color: var(--neon-green); }

@media (max-width: 1180px) {
  .gw-match.draw { grid-template-columns: 1fr; }
  .gw-match.draw .gw-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-match.draw .gw-side .gw-chat { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .gw-match.draw { gap: 10px; }
  .gw-dstrip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .gw-dseat { flex: 0 0 150px; scroll-snap-align: start; }
  .gw-draw-stage { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-lg); }
  .gw-draw-head { gap: 7px; padding: 8px; }
  .gw-phase-tx { order: 3; flex-basis: 100%; min-width: 0; text-align: center; }
  .gw-draw-clock { margin-left: auto; }
  .gw-word-blanks { margin-inline: auto; }
  .gw-word-blanks i { width: 14px; }
  .gw-draw-tools { align-items: stretch; padding: 8px; gap: 8px; }
  .dt-colors, .dt-sizes { flex: 1 1 auto; padding-right: 0; border-right: 0; }
  .dt-ops { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dt-op { min-width: 0; padding-inline: 5px; }
  .gw-pick-words { grid-template-columns: 1fr; }
  .gw-match.draw .gw-side { display: flex; }
  .gw-guess-panel { order: 1; }
  .gw-match.draw .gw-panel-info { order: 2; }
  .gw-match.draw .gw-panel-ops { order: 3; }
  .gw-match.draw .gw-chat { order: 4; }
  .gw-draw-seats { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .gw-draw-stage { aspect-ratio: 10 / 11; }
  .gw-round-pill, .gw-draw-clock { padding-inline: 8px; }
  .dt-c { width: 29px; min-width: 29px; height: 29px; min-height: 29px; }
  .dt-custom { width: 31px; min-width: 31px; min-height: 31px; }
  .dt-w { width: 38px; min-width: 38px; }
  .dt-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-guessbar .gw-btn { padding-inline: 12px; white-space: nowrap; }
}

/* ============================================================
   复盘回放（任务2）
   ============================================================ */
.gw-match-row.clickable, .gw-admin-row.clickable { cursor: pointer; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.gw-match-row.clickable:hover, .gw-admin-row.clickable:hover { border-color: var(--line-glow); background: var(--bg-3); }
.gw-replay-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; white-space: nowrap;
  color: var(--neon-cyan); border: 1px solid rgba(0, 229, 255, 0.4);
  background: rgba(0, 229, 255, 0.08);
  padding: 3px 10px; border-radius: var(--r-full);
}

.gw-replay-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.gw-replay-head .gw-btn { flex: none; margin-top: 2px; }
.gw-replay-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gw-replay-title b { font-size: var(--fs-lg); }
.gw-replay-title span { font-size: var(--fs-sm); color: var(--tx-2); }
.gw-replay-title .gw-note { font-size: var(--fs-xs); }

/* 管理端结算明细面板 */
.gw-replay-admin { margin-bottom: var(--sp-4); border-color: rgba(255, 200, 87, 0.4); }
.gw-replay-admin h3 { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--neon-gold); margin-bottom: var(--sp-3); }
.gw-replay-exp { font-size: var(--fs-sm); color: var(--tx-2); margin-bottom: 6px; }
.gw-replay-exp b { color: var(--tx-1); }
.gw-replay-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); font-size: var(--fs-xs); }
.gw-replay-table th, .gw-replay-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--line-1); white-space: nowrap; }
.gw-replay-table th { color: var(--tx-3); font-weight: 600; font-size: 10px; letter-spacing: 0.04em; }
.gw-replay-table td b { color: var(--neon-cyan); }
.gw-replay-table .rp-win { color: var(--neon-green); font-weight: 700; }
.gw-replay-table .rp-loss { color: var(--danger); font-weight: 700; }
.gw-replay-table .rp-draw { color: var(--neon-gold); font-weight: 700; }

/* 棋盘 + 侧栏布局 */
.gw-replay-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; }
.gw-replay-board { background: var(--bg-glass); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: var(--sp-3); }
.gw-replay-board canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); }
.gw-replay-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }

.gw-replay-ctrl { display: flex; gap: var(--sp-2); justify-content: center; }
.gw-replay-ctrl .gw-btn { flex: 1; justify-content: center; padding: 8px 0; }
.gw-replay-stepinfo {
  font-size: var(--fs-xs); color: var(--tx-2); text-align: center;
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-md);
  padding: 8px var(--sp-3); line-height: 1.6; min-height: 34px;
  display: flex; align-items: center; justify-content: center;
}

/* 时间线事件列表 */
.gw-replay-timeline {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 420px; overflow-y: auto; padding: var(--sp-2);
  background: var(--bg-glass); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.gw-rp-ev {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 8px; border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--tx-2); cursor: pointer;
  border: 1px solid transparent;
}
.gw-rp-ev:hover { background: var(--bg-2); }
.gw-rp-ev.cur { background: rgba(0, 229, 255, 0.10); border-color: rgba(0, 229, 255, 0.4); color: var(--tx-1); }
.gw-rp-ev .sq { flex: none; width: 26px; text-align: right; color: var(--tx-3); font-size: 10px; }
.gw-rp-ev .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 4px rgba(0,0,0,0.5); }
.gw-rp-ev .dot.black { background: radial-gradient(circle at 32% 30%, #6a76a8, #1a2040 55%, #05070f); }
.gw-rp-ev .dot.white { background: radial-gradient(circle at 32% 30%, #ffffff, #dfe6ff 55%, #aab3d6); }
.gw-rp-ev .tx { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gw-rp-ev .el { flex: none; color: var(--tx-3); font-size: 10px; }
.gw-rp-ev.undo .tx { color: var(--neon-gold); }
.gw-rp-ev.end .tx { color: var(--neon-cyan); font-weight: 600; }

/* ---- 派对类对局详情（任务3：牌局/麻将时间线 + 你画我猜画迹回放） ---- */
.gw-replay-timeline.tall { max-height: 560px; }
.gw-rp-ev.sys { opacity: 0.62; font-style: italic; }
.gw-rp-ev.sys .tx { color: var(--tx-3); }
.gw-rp-who { color: var(--tx-1); font-weight: 700; margin-right: 2px; }
.gw-host-tag {
  font-style: normal; font-size: 9px; color: var(--neon-gold);
  border: 1px solid rgba(255, 200, 87, 0.45); border-radius: var(--r-full); padding: 0 6px; margin: 0 2px;
}
.gw-rp-cards { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.gw-combo-tag, .gw-mult-tag {
  font-size: 9px; font-weight: 700; border-radius: var(--r-full); padding: 1px 7px; margin-left: 4px;
}
.gw-combo-tag { color: var(--neon-cyan); border: 1px solid rgba(0, 229, 255, 0.4); }
.gw-mult-tag { color: var(--neon-gold); border: 1px solid rgba(255, 200, 87, 0.45); }
.gw-bid { color: var(--neon-gold); }
.gw-dg-word-tag { color: var(--neon-green); }
.ok-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--neon-green);
  border: 1px solid rgba(74, 222, 128, 0.4); border-radius: var(--r-full); padding: 0 7px;
}

/* 多人玩家 chips（对局列表/详情头部共用） */
.gw-mplist { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gw-mp {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--tx-2);
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-full); padding: 2px 9px;
}
.gw-mp i { font-style: normal; font-size: 9px; color: var(--tx-3); }
.gw-mp.win { color: var(--neon-gold); border-color: rgba(255, 200, 87, 0.55); background: rgba(255, 200, 87, 0.08); font-weight: 700; }
.gw-mp.win i { color: rgba(255, 200, 87, 0.7); }

/* 你画我猜：回合页签 + 画迹面板 */
.gw-dg-rounds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.gw-dg-view { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-4); }
.gw-dg-canvas-wrap {
  background: var(--bg-glass); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.gw-dg-canvas-wrap canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); background: #fff; }
.gw-dg-ctrl { display: flex; align-items: center; gap: var(--sp-2); }
.gw-dg-ctrl .gw-note { margin-left: auto; }
.gw-dg-info { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.gw-dg-info h4 { font-size: var(--fs-sm); color: var(--tx-2); margin: 0; }
.gw-dg-word {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--sp-3);
}
.gw-dg-word i { font-style: normal; font-size: 10px; color: var(--tx-3); letter-spacing: 0.05em; }
.gw-dg-word b { font-size: var(--fs-xl); color: var(--neon-green); letter-spacing: 0.08em; }
.gw-dg-guesses {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 300px; overflow-y: auto; padding: var(--sp-2);
  background: var(--bg-glass); border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.gw-dg-guess {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--tx-2);
  padding: 5px 8px; border-radius: var(--r-md); border: 1px solid transparent;
}
.gw-dg-guess b { flex: none; color: var(--tx-1); }
.gw-dg-guess .txt { flex: 1; min-width: 0; word-break: break-all; }
.gw-dg-guess.ok { background: rgba(74, 222, 128, 0.07); border-color: rgba(74, 222, 128, 0.3); }
.gw-dg-scores {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--tx-2);
  background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3);
}
.gw-dg-scores i { font-style: normal; font-size: 10px; color: var(--tx-3); }
.gw-dg-scores b { color: var(--neon-gold); }

@media (max-width: 900px) {
  .gw-dg-view { grid-template-columns: 1fr; }
  .gw-dg-guesses { max-height: 220px; }
  .gw-replay-timeline.tall { max-height: 320px; }
}

@media (max-width: 900px) {
  .gw-replay-body { grid-template-columns: 1fr; }
  .gw-replay-timeline { max-height: 260px; }
  .gw-replay-table { display: block; overflow-x: auto; }
}

/* ================= 收件箱（任务4：入口并入头像菜单） ================= */
.gw-avatar-btn { position: relative; }
.gw-avatar-badge {
  position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: var(--r-full);
  background: linear-gradient(135deg, #ff5d73, #ff8f5c); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  display: grid; place-items: center; line-height: 1;
  box-shadow: 0 0 8px rgba(255, 93, 115, 0.6); pointer-events: none;
}
.gw-dd-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); background: linear-gradient(135deg, #ff5d73, #ff8f5c);
  color: #fff; font-size: 10px; font-weight: 700; font-style: normal;
  display: grid; place-items: center; line-height: 1; flex: none;
}

/* 收件箱弹窗（任务6 重构：卡片锚定、层级清晰，杜绝"飘字"） */
.gw-mailbox { display: flex; flex-direction: column; gap: var(--sp-3); width: min(560px, 92vw); }
.gw-mb-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-1);
}
.gw-mb-head h2 { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xl); margin: 0; }
.gw-mb-count { flex: 1; font-size: var(--fs-xs); color: var(--tx-3); }
.gw-mb-close {
  border: 1px solid var(--line-1); background: var(--bg-3); color: var(--tx-3); width: 32px; height: 32px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none;
  transition: all var(--t-fast) var(--ease);
}
.gw-mb-close:hover { color: var(--tx-1); background: var(--bg-4); border-color: var(--line-2); }
.gw-mb-list { display: flex; flex-direction: column; gap: var(--sp-3); max-height: 62vh; overflow-y: auto; padding: 2px 2px 2px 0; }
.gw-mrow {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg-2); cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gw-mrow:hover { border-color: var(--line-glow); box-shadow: 0 2px 14px rgba(0, 229, 255, 0.08); }
.gw-mrow.unread { border-color: rgba(0, 229, 255, 0.5); background: linear-gradient(180deg, rgba(0, 229, 255, 0.07), var(--bg-2) 52%); }
.gw-mrow-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-3); background: var(--bg-3); border-bottom: 1px solid var(--line-1);
}
.gw-mfrom {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--neon-cyan);
}
.gw-mtime { font-size: 10px; color: var(--tx-3); margin-left: auto; }
.gw-mdot { width: 8px; height: 8px; border-radius: 50%; background: #ff5d73; box-shadow: 0 0 7px rgba(255, 93, 115, 0.8); flex: none; }
.gw-mrow-title { display: block; padding: var(--sp-3) var(--sp-3) 6px; font-size: var(--fs-md); color: var(--tx-1); line-height: 1.45; word-break: break-word; }
.gw-matts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--sp-3); }
.gw-matt {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); color: var(--tx-2); background: var(--bg-3);
}
.gw-matt.coins { color: var(--neon-gold); border-color: rgba(255, 200, 87, 0.45); background: rgba(255, 200, 87, 0.08); }
.gw-matt.rar-rare { color: #4fc3ff; border-color: rgba(79, 195, 255, 0.45); }
.gw-matt.rar-epic { color: #c084fc; border-color: rgba(168, 85, 247, 0.45); }

/* ================= 游戏好友（任务5：弹窗双栏，移动端单栏切换） ================= */
.gw-friends { display: flex; flex-direction: column; gap: var(--sp-3); width: min(880px, 94vw); }
.gw-fr-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-3); height: min(64vh, 620px); }
.gw-fr-side {
  display: flex; flex-direction: column; gap: var(--sp-3);
  overflow-y: auto; padding-right: 2px;
}
.gw-fr-main {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-2); overflow: hidden;
}
/* 添加好友 */
.fr-add { display: flex; flex-direction: column; gap: 8px; }
.fr-add-row { display: flex; gap: 8px; }
.fr-add-row .gw-input { flex: 1; }
/* 申请列表 */
.fr-req h4, .fr-list h4 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--tx-2); margin: 2px 0 8px; }
.fr-req-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: var(--bg-2); margin-bottom: 6px;
}
.fr-req-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-req-info b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-req-info span { font-size: var(--fs-xs); color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-btn-xs { padding: 4px 10px; font-size: var(--fs-xs); border-radius: var(--r-full); }
/* 好友列表 */
.fr-friend {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.fr-friend:hover { background: var(--bg-3); }
.fr-friend.active { background: var(--bg-3); border-color: var(--line-glow); }
.fr-av { position: relative; flex: none; }
.fr-on {
  position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--tx-4, #5a6b8c); border: 2px solid var(--bg-1);
}
.fr-on.on { background: var(--neon-green); box-shadow: 0 0 6px rgba(52, 245, 197, 0.8); }
.fr-f-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-f-info b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-f-info > span { font-size: var(--fs-xs); color: var(--tx-3); }
.fr-vip { padding: 2px 8px; font-size: 9px; }
.fr-empty { padding: var(--sp-4); font-size: var(--fs-xs); }
/* 空态 */
.fr-none {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  color: var(--tx-3); text-align: center;
}
.fr-none .i { width: 44px; height: 44px; opacity: 0.5; }
.fr-none p { font-size: var(--fs-sm); line-height: 1.8; }
/* 聊天头 */
.fr-chat-head {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: 10px var(--sp-3); border-bottom: 1px solid var(--line-1); background: var(--bg-3);
}
.fr-back { display: none; }
.fr-ch-name { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; position: relative; }
.fr-ch-name b { font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-ch-name .fr-on { position: static; border: none; }
.fr-ch-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
/* 消息流 */
.fr-msgs {
  flex: 1; overflow-y: auto; padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 8px; min-height: 0;
}
.fr-msg { display: flex; }
.fr-msg.mine { justify-content: flex-end; }
.fr-bubble {
  max-width: 78%; padding: 8px 12px; border-radius: 14px;
  background: var(--bg-4); border: 1px solid var(--line-1);
  font-size: var(--fs-sm); line-height: 1.55; word-break: break-word;
  display: flex; flex-direction: column; gap: 3px;
}
.fr-msg.mine .fr-bubble {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(79, 124, 255, 0.14));
  border-color: rgba(0, 229, 255, 0.35);
}
.fr-mt { font-size: 9px; color: var(--tx-3); align-self: flex-end; }
/* 输入条 */
.fr-input { display: flex; gap: 8px; padding: 10px var(--sp-3); border-top: 1px solid var(--line-1); background: var(--bg-3); }
.fr-input .gw-input { flex: 1; }
/* 赠礼记录 */
.fr-gifts { flex: 1; overflow-y: auto; padding: var(--sp-3); min-height: 0; }
.fr-gifts h4 { font-size: var(--fs-sm); color: var(--tx-2); margin: 0 0 8px; }
.fr-gift-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: var(--bg-3); margin-bottom: 6px;
}
.fr-gi { color: var(--neon-gold); display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.fr-gi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-gi-info b { font-size: var(--fs-sm); }
.fr-gi-info span { font-size: var(--fs-xs); color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-gi-time { font-size: 10px; color: var(--tx-3); flex: none; }
/* 赠送选择器 */
.fr-picker {
  flex: 1; overflow-y: auto; padding: var(--sp-3);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; align-content: start;
}
.fr-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 8px; border: 1px solid var(--line-1); border-radius: var(--r-md);
  background: var(--bg-3); cursor: pointer; transition: all var(--t-fast) var(--ease);
}
.fr-pick:hover { border-color: var(--line-glow); }
.fr-pick.active { border-color: var(--neon-gold); box-shadow: 0 0 0 1px var(--neon-gold), 0 0 14px rgba(255, 200, 87, 0.25); }
.fr-pick b { font-size: var(--fs-xs); line-height: 1.3; }
.fr-pick-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg-4); color: var(--neon-cyan); }
.fr-pick-ic.rar-rare { color: #4fc3ff; }
.fr-pick-ic.rar-epic { color: #c084fc; }
.fr-pick-ic.rar-legend { color: var(--neon-gold); }
.fr-gift-form { padding: 10px var(--sp-3); border-top: 1px solid var(--line-1); background: var(--bg-3); }
.fr-gf-sel { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: var(--fs-sm); }
.fr-gf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fr-gf-row label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tx-2); }

/* ================= 牌类牌桌（任务2：憋七/斗地主） ================= */
.gw-cardtable {
  position: relative; min-height: 480px;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background:
    radial-gradient(1200px 500px at 50% 30%, rgba(0, 229, 255, 0.06), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--bg-1));
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
}
.gw-cardarena { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.gw-cardarena .ca-top { display: flex; justify-content: center; }
.gw-cardarena .ca-top.duo { gap: var(--sp-6); flex-wrap: wrap; }
.gw-cardarena .ca-mid { display: grid; grid-template-columns: 1fr minmax(0, 2.2fr) 1fr; gap: var(--sp-3); align-items: stretch; }
.gw-cardarena .ca-left, .gw-cardarena .ca-right { display: flex; align-items: center; }
.gw-cardarena .ca-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: var(--sp-3); min-height: 150px;
  background: rgba(0, 0, 0, 0.18);
}

/* 座位卡 */
.gw-cseat {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-2);
  padding: 8px var(--sp-3); min-width: 168px; max-width: 240px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gw-cseat.turn { border-color: rgba(52, 245, 197, 0.65); box-shadow: 0 0 16px rgba(52, 245, 197, 0.22); }
.gw-cseat.empty { opacity: 0.55; }
/* 任务1：可点击入座空位（等待阶段）——虚线呼吸边框 + 入座引导 */
.gw-cseat.joinable { opacity: 1; cursor: pointer; border-style: dashed; border-color: var(--line-2); align-items: center; gap: 4px; animation: gw-seat-breathe 2.2s ease-in-out infinite; }
.gw-cseat.joinable:hover, .gw-cseat.joinable:focus-visible { border-color: var(--neon-green); box-shadow: 0 0 14px rgba(52, 245, 197, 0.25); outline: none; }
.gw-cseat.joinable .cs-join { display: inline-flex; align-items: center; gap: 4px; color: var(--neon-green); font-size: var(--fs-xs); font-weight: 700; }
@keyframes gw-seat-breathe { 0%, 100% { border-color: var(--line-2); } 50% { border-color: rgba(52, 245, 197, 0.55); } }
/* 等待阶段牌桌中央提示 */
.gw-wait-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; min-height: 90px; color: var(--tx-3); text-align: center; }
.gw-wait-hint b { color: var(--tx-1); font-size: var(--fs-md); }
.gw-wait-hint .wh-seats { font-size: var(--fs-xs); color: var(--neon-cyan); }
.gw-cseat.me { min-width: 0; border-style: dashed; background: transparent; padding: 4px var(--sp-2); }
.gw-cseat .cs-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.gw-cseat .cs-info { display: flex; flex-direction: column; min-width: 0; }
.gw-cseat .cs-info b { font-size: var(--fs-sm); color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.gw-cseat .cs-rank { font-size: 10px; color: var(--neon-gold); }
.gw-cseat .cs-dizhu {
  font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ff5d73, #ffb357);
  padding: 1px 8px; border-radius: var(--r-full);
}
.gw-cseat .cs-cards { display: flex; align-items: center; gap: 6px; }
.gw-cseat .cs-cnt { font-size: 10px; color: var(--tx-3); }
.gw-cseat .cs-last { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.gw-cseat .cs-pass {
  font-size: var(--fs-xs); color: var(--tx-3); border: 1px solid var(--line-2);
  padding: 2px 10px; border-radius: var(--r-full); background: var(--bg-3);
}

/* 扑克牌 */
.gw-card {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 64px; border-radius: 7px; flex: none; user-select: none;
  background: linear-gradient(160deg, #fdfdf8, #e8e8de); border: 1px solid #b9b9ad;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); color: #1c1f26;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.gw-card b { font-size: 15px; font-weight: 800; line-height: 1; }
.gw-card i { font-style: normal; font-size: 13px; line-height: 1.15; }
.gw-card.red { color: #c8243c; }
.gw-card.joker b { font-size: 12px; }
.gw-card.mini { width: 26px; height: 36px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.gw-card.mini b { font-size: 9px; }
.gw-card.mini i { font-size: 8px; }
.gw-card.back {
  background: repeating-linear-gradient(45deg, #1d3f8f, #1d3f8f 4px, #2650b3 4px, #2650b3 8px);
  border-color: #12275c; color: #fff;
}
.gw-card.back i { font-style: normal; font-size: 13px; font-weight: 800; }

/* ============ 牌面皮肤（任务2：类挂于 .gw-cardtable / .gw-mjtable 容器） ============ */
/* 翡翠牌面：清透玉质 */
.csk-emerald .gw-card { background: linear-gradient(160deg, #f2fbf6, #d5efe0); border-color: #7fbf9d; }
.csk-emerald .gw-card.red { color: #c03050; }
.csk-emerald .gw-card.back { background: repeating-linear-gradient(45deg, #0e6b4a, #0e6b4a 4px, #12875e 4px, #12875e 8px); border-color: #07402c; color: #d8ffe9; }
/* 霓虹牌面：光边辉光 */
.csk-neon .gw-card { background: linear-gradient(160deg, #171a2e, #0d0f1e); border-color: #3ec6ff; color: #e8f6ff; box-shadow: 0 2px 8px rgba(62, 198, 255, 0.3); }
.csk-neon .gw-card.red { color: #ff5f8a; }
.csk-neon .gw-card.joker { text-shadow: 0 0 6px currentColor; }
.csk-neon .gw-card.back { background: repeating-linear-gradient(45deg, #101430, #101430 4px, #1b2350 4px, #1b2350 8px); border-color: #3ec6ff; color: #8fe4ff; }
/* 水墨牌面：宣纸朱砂 */
.csk-ink .gw-card { background: linear-gradient(160deg, #f6f0e2, #e6dcc4); border-color: #9b8f74; }
.csk-ink .gw-card.red { color: #a8281f; }
.csk-ink .gw-card.back { background: repeating-linear-gradient(45deg, #33312e, #33312e 4px, #45423e 4px, #45423e 8px); border-color: #1c1a18; color: #d8c9a8; }
/* 鎏金牌面：深绒鎏金 */
.csk-gold .gw-card { background: linear-gradient(160deg, #3a2410, #241505); border-color: #d4a437; color: #ffe9b0; box-shadow: 0 2px 8px rgba(212, 164, 55, 0.35); }
.csk-gold .gw-card.red { color: #ff9d6b; }
.csk-gold .gw-card.back { background: repeating-linear-gradient(45deg, #2c1a08, #2c1a08 4px, #453010 4px, #453010 8px); border-color: #d4a437; color: #ffe9b0; }
/* 落樱牌面：樱粉花瓣 */
.csk-sakura .gw-card { background: linear-gradient(160deg, #fff2f6, #ffd9e6); border-color: #eba4c0; }
.csk-sakura .gw-card.red { color: #d13a6a; }
.csk-sakura .gw-card.back { background: repeating-linear-gradient(45deg, #b04a72, #b04a72 4px, #cd6690 4px, #cd6690 8px); border-color: #7c2a4a; color: #ffe8f0; }
/* 赛博牌面：电路全息 */
.csk-cyber .gw-card { background: linear-gradient(160deg, #0c1626, #060c18); border-color: #7b5cff; color: #dfe8ff; box-shadow: 0 2px 10px rgba(123, 92, 255, 0.35); }
.csk-cyber .gw-card.red { color: #ff6ad5; }
.csk-cyber .gw-card.joker { text-shadow: 0 0 8px currentColor; }
.csk-cyber .gw-card.back { background: repeating-linear-gradient(45deg, #141236, #141236 4px, #221e56 4px, #221e56 8px); border-color: #7b5cff; color: #b9adff; }

/* 牌面预览（商城/背包：一背两正迷你牌组） */
.gw-csk-preview { display: inline-flex; align-items: center; }
.gw-csk-preview .gw-card { width: 34px; height: 48px; border-radius: 5px; margin-left: -10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); }
.gw-csk-preview .gw-card:first-child { margin-left: 0; }
.gw-csk-preview .gw-card b { font-size: 12px; }
.gw-csk-preview .gw-card i { font-size: 10px; }
.gw-csk-preview.lg .gw-card { width: 46px; height: 64px; }
.gw-csk-preview.lg .gw-card b { font-size: 15px; }
.gw-csk-preview.lg .gw-card i { font-size: 13px; }

/* 画板预览（任务9） */
.gw-dbpv { display: inline-block; width: 72px; height: 52px; border-radius: 8px; border: 2px solid #b98a4e; background: linear-gradient(160deg, #f8f2e4, #e9dfc8); position: relative; overflow: hidden; box-shadow: inset 0 0 0 3px rgba(185, 138, 78, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35); }
.gw-dbpv .dbpv-grid { position: absolute; inset: 6px; border-radius: 4px; background: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(120, 100, 70, 0.12) 7px, rgba(120, 100, 70, 0.12) 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(120, 100, 70, 0.12) 7px, rgba(120, 100, 70, 0.12) 8px); }
.gw-dbpv.dbpv-night { border-color: #3a4a7e; background: linear-gradient(160deg, #101736, #0a0f24); box-shadow: inset 0 0 0 3px rgba(90, 120, 220, 0.3), 0 3px 8px rgba(0, 0, 0, 0.4); }
.gw-dbpv.dbpv-night .dbpv-grid { background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px), radial-gradient(circle at 45% 80%, rgba(190, 210, 255, 0.6) 0 1px, transparent 1.5px), radial-gradient(circle at 85% 25%, rgba(255, 240, 200, 0.55) 0 1px, transparent 1.5px); }
.gw-dbpv.dbpv-neon { border-color: #35e0c8; background: linear-gradient(160deg, #08131c, #050b12); box-shadow: inset 0 0 0 3px rgba(53, 224, 200, 0.35), 0 0 14px rgba(53, 224, 200, 0.35); }
.gw-dbpv.dbpv-neon .dbpv-grid { background: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(53, 224, 200, 0.22) 7px, rgba(53, 224, 200, 0.22) 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(53, 224, 200, 0.22) 7px, rgba(53, 224, 200, 0.22) 8px); }
.gw-item-ic.lg .gw-dbpv { width: 104px; height: 76px; }

/* 画笔预览（任务9：三道笔触样条） */
.gw-brpv { display: inline-flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 72px; height: 52px; }
.gw-brpv i { display: block; width: 56px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #2b2f3a, #565e75); }
.gw-brpv i:nth-child(2) { width: 44px; }
.gw-brpv i:nth-child(3) { width: 32px; }
.gw-brpv.brpv-marker i { height: 8px; background: linear-gradient(90deg, #16324a, #2e6b9e 60%, #79b7e8); border-radius: 3px; }
.gw-brpv.brpv-glow i { background: linear-gradient(90deg, #b8fff2, #35e0c8); box-shadow: 0 0 8px rgba(53, 224, 200, 0.8), 0 0 16px rgba(53, 224, 200, 0.4); }
.gw-brpv.brpv-rainbow i { background: linear-gradient(90deg, #ff5f6d, #ffc371, #8dff6e, #4fd1ff, #b06bff); background-size: 200% 100%; animation: brpvRainbow 2.4s linear infinite; }
@keyframes brpvRainbow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
/* 任务3 新增笔种预览 */
.gw-brpv.brpv-pencil i { height: 3px; background: linear-gradient(90deg, #9aa2b5, #c9cfdd); }
.gw-brpv.brpv-neon i { background: linear-gradient(90deg, #ff7ad9, #7af9ff); box-shadow: 0 0 9px rgba(255, 122, 217, 0.75), 0 0 16px rgba(122, 249, 255, 0.45); animation: brpvNeon 2s ease-in-out infinite alternate; }
@keyframes brpvNeon { 0% { filter: brightness(0.85); } 100% { filter: brightness(1.25); } }
.gw-brpv.brpv-starlight i { background: linear-gradient(90deg, #ffe9a8, #fff6dc 55%, #ffd76a); box-shadow: 0 0 8px rgba(255, 220, 120, 0.85); }
.gw-brpv.brpv-starlight i:nth-child(2) { clip-path: polygon(0 50%, 40% 0, 50% 50%, 60% 0, 100% 50%, 60% 100%, 50% 50%, 40% 100%); }
.gw-brpv.brpv-ink i { height: 7px; background: linear-gradient(90deg, #14171f 15%, #454e63 55%, #14171f); border-radius: 45% 55% 50% 40%; }
.gw-item-ic.lg .gw-brpv { width: 104px; height: 76px; }
.gw-item-ic.lg .gw-brpv i { width: 80px; height: 8px; }
.gw-item-ic.lg .gw-brpv i:nth-child(2) { width: 62px; }
.gw-item-ic.lg .gw-brpv i:nth-child(3) { width: 44px; }

/* 消耗品预览（任务9：加时卡/换词卡） */
.gw-cspv { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; }
.gw-cspv .i { width: 30px; height: 30px; }
.gw-cspv.cspv-time { background: linear-gradient(150deg, rgba(255, 200, 87, 0.22), rgba(255, 200, 87, 0.06)); border: 1px solid rgba(255, 200, 87, 0.55); color: var(--neon-gold); box-shadow: 0 0 12px rgba(255, 200, 87, 0.25); }
.gw-cspv.cspv-reword { background: linear-gradient(150deg, rgba(52, 245, 197, 0.2), rgba(52, 245, 197, 0.05)); border: 1px solid rgba(52, 245, 197, 0.5); color: var(--neon-green); box-shadow: 0 0 12px rgba(52, 245, 197, 0.22); }
.gw-item-ic.lg .gw-cspv { width: 76px; height: 76px; }
.gw-item-ic.lg .gw-cspv .i { width: 42px; height: 42px; }
.gw-hand .gw-card { cursor: pointer; margin-left: -12px; }
.gw-hand .gw-card:first-child { margin-left: 0; }
.gw-hand .gw-card:hover { transform: translateY(-6px); }
.gw-hand .gw-card.sel { transform: translateY(-12px); box-shadow: 0 6px 14px rgba(52, 245, 197, 0.35); border-color: var(--neon-green); }
.gw-hand .gw-card.legal { border-color: var(--neon-green); }
.gw-hand .gw-card.dim { opacity: 0.45; }
.gw-hand {
  display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap;
  padding: 14px var(--sp-3) 4px; min-height: 88px; overflow-x: auto;
}

/* 我的区域（座位卡+手牌+操作条） */
.gw-myarea { display: flex; flex-direction: column; gap: 4px; }
.gw-myseat.turn { border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(52, 245, 197, 0.5), 0 0 18px rgba(52, 245, 197, 0.18); }
.gw-playbar { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) 0 2px; flex-wrap: wrap; }

/* 憋七链区 */
.gw-chains { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.chain-row { display: flex; align-items: center; gap: 8px; }
.chain-suit { font-size: 18px; width: 22px; text-align: center; flex: none; color: #e8ecf4; }
.chain-suit.red { color: #ff6b81; }
.chain-cells { display: flex; gap: 3px; flex-wrap: nowrap; overflow-x: auto; }
.chain-cell { opacity: 0.22; transition: opacity var(--t-fast) var(--ease); flex: none; }
.chain-cell.on { opacity: 1; }
.chain-cell.edge { opacity: 0.6; }
.chain-cell.edge .gw-card { border-color: var(--neon-gold); border-style: dashed; }

/* 斗地主中央区 */
.gw-ddz-bid { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-md); color: var(--tx-1); flex-wrap: wrap; justify-content: center; }
.gw-ddz-bid .bd-tag {
  font-size: var(--fs-xs); font-weight: 700; color: var(--neon-gold);
  border: 1px solid rgba(255, 200, 87, 0.5); padding: 2px 10px; border-radius: var(--r-full);
}
.gw-ddz-info { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }
.ddz-bottom { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--tx-3); }
.ddz-mult { font-size: var(--fs-sm); color: var(--tx-2); }
.ddz-mult b { color: var(--neon-gold); font-size: var(--fs-md); }
.gw-ddz-last { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ddz-last-cards { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center; }

/* ================= 麻将桌（任务10：四人方城，独立样式不复用棋盘/扑克） ================= */
.gw-mjtable {
  position: relative; min-height: 520px;
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background:
    radial-gradient(900px 420px at 50% 38%, rgba(18, 181, 165, 0.10), transparent 62%),
    linear-gradient(160deg, #0d2b26, #081a17);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
}
.gw-mjarena { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.gw-mjarena .mja-top { display: flex; justify-content: center; }
.gw-mjarena .mja-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-2); align-items: stretch; flex: 1; }
.gw-mjarena .mja-left, .gw-mjarena .mja-right { display: flex; align-items: center; }
.gw-mjarena .mja-right { justify-content: flex-end; }
.gw-mjarena .mja-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  border: 1px dashed rgba(18, 181, 165, 0.3); border-radius: var(--r-lg); padding: var(--sp-3); min-height: 120px;
  background: rgba(0, 0, 0, 0.22);
}
.gw-mjarena .mja-bottom { display: flex; justify-content: center; }
.gw-mjcenter { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gw-mjcenter .mj-wall { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--tx-1); }
.gw-mjcenter .mj-wall b { color: var(--neon-gold); font-size: var(--fs-lg); }
.gw-mjcenter .mj-variant {
  font-size: var(--fs-xs); font-weight: 700; color: #7ef0dd; letter-spacing: 0.08em;
  border: 1px solid rgba(18, 181, 165, 0.45); padding: 2px 12px; border-radius: var(--r-full);
  background: rgba(18, 181, 165, 0.12);
}
.gw-mjcenter .mj-hun { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--tx-2); }
.gw-mjcenter .mj-phase-tag {
  font-size: 10px; color: var(--neon-gold); border: 1px dashed rgba(255, 200, 87, 0.5);
  padding: 2px 10px; border-radius: var(--r-full);
}

/* 麻将牌（默认象牙骨质；牌面皮肤经 .csk-* 容器类覆盖，与扑克同体系） */
.gw-mjt {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 34px; height: 46px; border-radius: 5px; flex: none; user-select: none;
  background: linear-gradient(165deg, #fdfbef, #e9e4cf);
  border: 1px solid #b6ac8e; border-bottom-width: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); color: #23262e;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gw-mjt b { font-size: 16px; font-weight: 800; line-height: 1.05; font-family: "KaiTi", "STKaiti", serif; }
.gw-mjt i { font-style: normal; font-size: 11px; line-height: 1; font-weight: 700; }
.gw-mjt.j-zhong { color: #c8243c; }
.gw-mjt.j-fa { color: #0d7a4f; }
.gw-mjt.j-bai { color: #3a4a66; }
.gw-mjt.j-wind { color: #1c1f26; }
.gw-mjt.mini { width: 24px; height: 32px; border-radius: 4px; border-bottom-width: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.gw-mjt.mini b { font-size: 11px; }
.gw-mjt.mini i { font-size: 8px; }
.gw-mjt.back {
  background: repeating-linear-gradient(45deg, #0e5c50, #0e5c50 4px, #12876f 4px, #12876f 8px);
  border-color: #083a32;
}
.gw-mjt.hun { border-color: var(--neon-gold); box-shadow: 0 0 8px rgba(255, 200, 87, 0.5); }
.gw-mjt .hun-tag {
  position: absolute; top: -6px; right: -6px; font-size: 8px; font-weight: 800; font-style: normal;
  background: linear-gradient(135deg, #ffcf5e, #ff9a3d); color: #4a2c00;
  padding: 1px 4px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.gw-mjt.last { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(0, 229, 255, 0.45); }

/* 我的手牌（可点选；选中上浮） */
.gw-mjhand {
  display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap;
  gap: 3px; padding: 16px var(--sp-2) 4px; min-height: 74px; overflow-x: auto;
}
.gw-mjhand .gw-mjt { cursor: pointer; width: 38px; height: 52px; }
.gw-mjhand .gw-mjt b { font-size: 18px; }
.gw-mjhand .gw-mjt i { font-size: 12px; }
.gw-mjhand .gw-mjt:hover { transform: translateY(-6px); }
.gw-mjhand .gw-mjt.sel { transform: translateY(-12px); border-color: var(--neon-green); box-shadow: 0 6px 14px rgba(52, 245, 197, 0.35); }

/* 副露与弃牌河 */
.gw-mjmelds { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gw-mjmeld { display: inline-flex; align-items: center; gap: 1px; position: relative; padding-right: 16px; }
.gw-mjmeld em {
  position: absolute; right: 0; bottom: -2px; font-size: 8px; font-style: normal; color: #7ef0dd;
  border: 1px solid rgba(18, 181, 165, 0.4); border-radius: 3px; padding: 0 2px; background: rgba(0, 0, 0, 0.35);
}
.gw-mjriver { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; max-width: 300px; }
.gw-mjriver .gw-note { font-size: 10px; }
.gw-mjhandbacks { display: inline-flex; align-items: center; gap: 1px; }
.gw-mjhandbacks .mj-cnt { font-size: 10px; color: var(--tx-3); margin-left: 4px; font-style: normal; }

/* 麻将座位卡扩展区 */
.gw-cseat.mj { min-width: 200px; max-width: 320px; }
.gw-cseat.mj .cs-mjzone { display: flex; flex-direction: column; gap: 5px; }
.gw-cseat.mj.won { border-color: rgba(255, 200, 87, 0.6); box-shadow: 0 0 14px rgba(255, 200, 87, 0.2); }
.mj-dq {
  font-size: 9px; font-weight: 700; color: #ffb0be; border: 1px solid rgba(255, 107, 129, 0.5);
  padding: 1px 6px; border-radius: var(--r-full); background: rgba(255, 107, 129, 0.12);
}
.mj-dq.dim { color: var(--tx-3); border-color: var(--line-2); background: var(--bg-3); }
/* 庄家标记（任务2：麻将正规身份显示，庄家=1 号位） */
.mj-dealer-tag {
  font-size: 9px; font-weight: 800; color: #4a2c00;
  background: linear-gradient(135deg, #ffcf5e, #ffb03d); padding: 1px 7px; border-radius: var(--r-full);
  box-shadow: 0 0 8px rgba(255, 200, 87, 0.35);
}
.mj-win-tag {
  display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; color: #4a2c00;
  background: linear-gradient(135deg, #ffcf5e, #ff9a3d); padding: 1px 8px; border-radius: var(--r-full);
}

/* 行动条（摸牌/出牌/自摸/杠/声明/定缺） */
.gw-mjbar {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) 0 2px;
}
.gw-mjbar .mj-bar-tip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--tx-2); }
.gw-mjbar.claims {
  border: 1px solid rgba(255, 200, 87, 0.4); border-radius: var(--r-lg);
  background: rgba(255, 200, 87, 0.08); padding: var(--sp-2) var(--sp-3);
}
.gw-myarea.mj { gap: 6px; }

/* 变体选择弹窗（任务10：建房选子种类） */
.gw-variant-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin: var(--sp-4) 0; }
.gw-variant-card {
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-2);
  padding: var(--sp-3); cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.gw-variant-card:hover { border-color: var(--neon-green); box-shadow: 0 0 14px rgba(52, 245, 197, 0.2); }
.gw-variant-card .vc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.gw-variant-card .vc-head b { font-size: var(--fs-md); color: var(--tx-1); }
.gw-variant-card .vc-brief { font-size: var(--fs-xs); color: var(--tx-2); }
.gw-variant-card .vc-rules { font-size: var(--fs-xs); color: var(--tx-3); line-height: 1.7; border-top: 1px dashed var(--line-2); padding-top: 6px; }
.gw-mjrules-brief { color: var(--neon-cyan); font-size: var(--fs-sm); }
.gw-mjrules-text { color: var(--tx-2); font-size: var(--fs-sm); line-height: 1.9; white-space: pre-wrap; }
.tc-variant { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #7ef0dd; margin-top: 2px; }

/* 牌面皮肤对麻将牌的覆盖（任务2 皮肤体系延伸：同一 .csk-* 容器类） */
.csk-emerald .gw-mjt { background: linear-gradient(165deg, #f2fbf6, #d5efe0); border-color: #7fbf9d; }
.csk-emerald .gw-mjt.back { background: repeating-linear-gradient(45deg, #0e6b4a, #0e6b4a 4px, #12875e 4px, #12875e 8px); border-color: #07402c; }
.csk-neon .gw-mjt { background: linear-gradient(165deg, #171a2e, #0d0f1e); border-color: #3ec6ff; color: #e8f6ff; box-shadow: 0 2px 8px rgba(62, 198, 255, 0.3); }
.csk-neon .gw-mjt.j-zhong { color: #ff5f8a; }
.csk-neon .gw-mjt.j-fa { color: #4fe0a8; }
.csk-neon .gw-mjt.j-bai, .csk-neon .gw-mjt.j-wind { color: #b8d8ff; }
.csk-neon .gw-mjt.back { background: repeating-linear-gradient(45deg, #101430, #101430 4px, #1b2350 4px, #1b2350 8px); border-color: #3ec6ff; }
.csk-ink .gw-mjt { background: linear-gradient(165deg, #f6f0e2, #e6dcc4); border-color: #9b8f74; }
.csk-ink .gw-mjt.back { background: repeating-linear-gradient(45deg, #33312e, #33312e 4px, #45423e 4px, #45423e 8px); border-color: #1c1a18; }
.csk-gold .gw-mjt { background: linear-gradient(165deg, #3a2410, #241505); border-color: #d4a437; color: #ffe9b0; box-shadow: 0 2px 8px rgba(212, 164, 55, 0.35); }
.csk-gold .gw-mjt.j-zhong { color: #ff9d6b; }
.csk-gold .gw-mjt.j-fa { color: #9fe0a8; }
.csk-gold .gw-mjt.j-bai, .csk-gold .gw-mjt.j-wind { color: #f0dfb8; }

/* ================= 大富翁 ================= */
.gw-monopoly-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.gw-monopoly-board {
  display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
  gap: 3px; aspect-ratio: 1 / 1; width: min(100%, 620px); margin: 0 auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 6px;
}
.monopoly-cell {
  position: relative; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg-3);
  padding: 2px; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; min-width: 0;
}
/* 外圈 40 格 grid-area 定位：底边0-9(左→右)、右边10-19(下→上)、顶边20-29(右→左)、左边30-39(上→下) */
.monopoly-cell[data-cell="0"] { grid-row: 11; grid-column: 1; }
.monopoly-cell[data-cell="1"] { grid-row: 11; grid-column: 2; }
.monopoly-cell[data-cell="2"] { grid-row: 11; grid-column: 3; }
.monopoly-cell[data-cell="3"] { grid-row: 11; grid-column: 4; }
.monopoly-cell[data-cell="4"] { grid-row: 11; grid-column: 5; }
.monopoly-cell[data-cell="5"] { grid-row: 11; grid-column: 6; }
.monopoly-cell[data-cell="6"] { grid-row: 11; grid-column: 7; }
.monopoly-cell[data-cell="7"] { grid-row: 11; grid-column: 8; }
.monopoly-cell[data-cell="8"] { grid-row: 11; grid-column: 9; }
.monopoly-cell[data-cell="9"] { grid-row: 11; grid-column: 10; }
.monopoly-cell[data-cell="10"] { grid-row: 11; grid-column: 11; }
.monopoly-cell[data-cell="11"] { grid-row: 10; grid-column: 11; }
.monopoly-cell[data-cell="12"] { grid-row: 9; grid-column: 11; }
.monopoly-cell[data-cell="13"] { grid-row: 8; grid-column: 11; }
.monopoly-cell[data-cell="14"] { grid-row: 7; grid-column: 11; }
.monopoly-cell[data-cell="15"] { grid-row: 6; grid-column: 11; }
.monopoly-cell[data-cell="16"] { grid-row: 5; grid-column: 11; }
.monopoly-cell[data-cell="17"] { grid-row: 4; grid-column: 11; }
.monopoly-cell[data-cell="18"] { grid-row: 3; grid-column: 11; }
.monopoly-cell[data-cell="19"] { grid-row: 2; grid-column: 11; }
.monopoly-cell[data-cell="20"] { grid-row: 1; grid-column: 11; }
.monopoly-cell[data-cell="21"] { grid-row: 1; grid-column: 10; }
.monopoly-cell[data-cell="22"] { grid-row: 1; grid-column: 9; }
.monopoly-cell[data-cell="23"] { grid-row: 1; grid-column: 8; }
.monopoly-cell[data-cell="24"] { grid-row: 1; grid-column: 7; }
.monopoly-cell[data-cell="25"] { grid-row: 1; grid-column: 6; }
.monopoly-cell[data-cell="26"] { grid-row: 1; grid-column: 5; }
.monopoly-cell[data-cell="27"] { grid-row: 1; grid-column: 4; }
.monopoly-cell[data-cell="28"] { grid-row: 1; grid-column: 3; }
.monopoly-cell[data-cell="29"] { grid-row: 1; grid-column: 2; }
.monopoly-cell[data-cell="30"] { grid-row: 1; grid-column: 1; }
.monopoly-cell[data-cell="31"] { grid-row: 2; grid-column: 1; }
.monopoly-cell[data-cell="32"] { grid-row: 3; grid-column: 1; }
.monopoly-cell[data-cell="33"] { grid-row: 4; grid-column: 1; }
.monopoly-cell[data-cell="34"] { grid-row: 5; grid-column: 1; }
.monopoly-cell[data-cell="35"] { grid-row: 6; grid-column: 1; }
.monopoly-cell[data-cell="36"] { grid-row: 7; grid-column: 1; }
.monopoly-cell[data-cell="37"] { grid-row: 8; grid-column: 1; }
.monopoly-cell[data-cell="38"] { grid-row: 9; grid-column: 1; }
.monopoly-cell[data-cell="39"] { grid-row: 10; grid-column: 1; }
.monopoly-cell.start-cell { background: rgba(255, 200, 87, 0.12); border-color: rgba(255, 200, 87, 0.45); }
.monopoly-cell.jail-cell { background: rgba(255, 107, 129, 0.1); }
.monopoly-cell.mortgaged { opacity: 0.55; }
.monopoly-cell .mc-name { font-size: 8.5px; line-height: 1.25; color: var(--tx-2); word-break: keep-all; }
.monopoly-cell .mc-price { font-size: 8px; color: var(--neon-gold); }
.monopoly-cell .mc-tax { font-size: 8px; color: #ff9d6b; }
.monopoly-cell .mc-houses { font-size: 8px; line-height: 1; }
.monopoly-cell .mc-owner {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  font-size: 8px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.monopoly-cell .mc-players { position: absolute; bottom: 2px; right: 2px; display: flex; gap: 2px; }
.monopoly-cell .mc-token {
  width: 14px; height: 14px; border-radius: 50%; font-size: 8px; color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.monopoly-center {
  grid-row: 2 / 11; grid-column: 2 / 11; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-3); text-align: center;
}
.monopoly-center h3 { font-size: var(--fs-md); color: var(--tx-1); }
.monopoly-dice { display: flex; gap: 8px; }
.monopoly-dice .dice, .monopoly-dice .dice-placeholder {
  width: 42px; height: 42px; border-radius: 8px; background: linear-gradient(145deg, #ffffff, #d8dee9);
  color: #1a1d29; font-size: 20px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.monopoly-dice.rolled .dice { animation: gw-dice-pop 0.5s var(--ease); }
@keyframes gw-dice-pop { 0% { transform: scale(0.4) rotate(180deg); } 100% { transform: scale(1) rotate(0); } }
.monopoly-dice .dice-placeholder { opacity: 0.35; }
.doubles-tag { color: var(--neon-gold); font-weight: 800; font-size: var(--fs-xs); }
.monopoly-phase { font-size: var(--fs-xs); color: var(--tx-3); }
.gw-monopoly-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); }
.gw-cseat.monopoly-seat.turn { border-color: var(--neon-green); box-shadow: 0 0 12px rgba(52, 245, 197, 0.25); }
.monopoly-player-info { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: var(--fs-sm); }
.mp-token { color: var(--neon-cyan); display: inline-flex; }
.mp-money { color: var(--neon-gold); font-weight: 700; display: inline-flex; gap: 3px; align-items: center; }
.mp-jail { color: #ffb0be; display: inline-flex; }
.mp-bankrupt { color: #ff6b81; font-size: 10px; font-weight: 800; }
.mp-position { font-size: 10px; color: var(--tx-3); margin-top: 3px; }
.mp-props-list { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; }
.mp-prop-item { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); padding: 4px 6px; background: var(--bg-3); border-radius: var(--r-sm, 6px); }
.mp-prop-item.mortgaged { opacity: 0.55; }
.mp-prop-color { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mp-prop-name { flex: 1; color: var(--tx-2); }
.mp-prop-tag { font-size: 9px; color: #ff9d6b; }

/* ================= 宝石传奇 ================= */
.gw-gem-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.gw-gem-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.gw-cseat.gemseat.turn { border-color: var(--neon-green); box-shadow: 0 0 12px rgba(52, 245, 197, 0.25); }
.gw-cseat.gemseat.winner { border-color: rgba(255, 200, 87, 0.6); box-shadow: 0 0 14px rgba(255, 200, 87, 0.2); }
.gem-score-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: 6px; }
.gem-score { font-size: var(--fs-lg); font-weight: 800; color: var(--neon-gold); display: inline-flex; align-items: center; gap: 4px; }
.gem-moves { font-size: var(--fs-xs); color: var(--tx-3); margin-left: auto; }
.gem-progress { height: 4px; background: var(--bg-3); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.gem-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-green)); transition: width 0.4s var(--ease); }
.gem-win-tag {
  display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; color: #4a2c00;
  background: linear-gradient(135deg, #ffcf5e, #ff9a3d); padding: 1px 8px; border-radius: var(--r-full);
}
.gw-gem-boardwrap { position: relative; width: min(100%, 560px); margin: 0 auto; }
.gw-gem-boardwrap.mine .gw-gem-board { border-color: rgba(52, 245, 197, 0.45); box-shadow: 0 0 16px rgba(52, 245, 197, 0.12); }
.gw-gem-board {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; aspect-ratio: 1 / 1;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 6px;
}
.gem-cell {
  position: relative; border-radius: 8px; background: var(--bg-3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.gem-cell.ro { cursor: default; }
.gem-cell:not(.ro):hover { transform: scale(1.06); z-index: 1; }
.gem-cell.sel { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 12px rgba(62, 198, 255, 0.5); transform: scale(1.1); z-index: 2; }
.gem-cell.flash { animation: gw-gem-flash 1.1s ease-out; }
@keyframes gw-gem-flash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px var(--neon-gold), 0 0 18px rgba(255, 200, 87, 0.7); }
}
.gem-stone {
  width: 78%; height: 78%; display: block;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.35), inset 0 3px 4px rgba(255, 255, 255, 0.45);
}
.gem-0 .gem-stone { background: radial-gradient(circle at 32% 28%, #ffb3ba 0%, #ff4d5e 45%, #b3122e 100%); }
.gem-1 .gem-stone { background: radial-gradient(circle at 32% 28%, #b3e0ff 0%, #3aa0ff 45%, #0b4fc4 100%); }
.gem-2 .gem-stone { background: radial-gradient(circle at 32% 28%, #c8f7c5 0%, #3fd65c 45%, #0e8a2e 100%); }
.gem-3 .gem-stone { background: radial-gradient(circle at 32% 28%, #fff3b0 0%, #ffd93a 45%, #c9930a 100%); }
.gem-4 .gem-stone { background: radial-gradient(circle at 32% 28%, #e8c8ff 0%, #a95ef0 45%, #5f1ba8 100%); }
.gem-5 .gem-stone { background: radial-gradient(circle at 32% 28%, #ffd8b0 0%, #ff8f3a 45%, #c15108 100%); }
.gem-6 .gem-stone { background: radial-gradient(circle at 32% 28%, #ffffff 0%, #cfe6f5 45%, #7ea6c4 100%); }
.gem-rainbow .gem-stone {
  background: conic-gradient(#ff4d5e, #ff8f3a, #ffd93a, #3fd65c, #3aa0ff, #a95ef0, #ff4d5e);
  animation: gw-gem-rainbow 3s linear infinite;
}
@keyframes gw-gem-rainbow { to { filter: hue-rotate(360deg); } }
.gem-spec {
  position: absolute; right: 2px; bottom: 1px; font-size: 11px; font-weight: 900; color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.85); pointer-events: none; line-height: 1;
}
.gem-rainbow .gem-spec { font-size: 12px; }
.gem-float {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  font-size: 28px; font-weight: 900; color: var(--neon-gold);
  text-shadow: 0 2px 12px rgba(255, 200, 87, 0.6);
  animation: gw-gem-float 1.6s ease-out both; pointer-events: none; z-index: 5;
}
@keyframes gw-gem-float {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46px); }
}
.gem-last { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--tx-2); }
.gem-last .gem-gain { color: var(--neon-gold); font-size: var(--fs-md); }
.gem-last .gem-combo { color: #ff9d6b; font-weight: 800; }
.gem-last .gem-reshuffle { font-size: var(--fs-xs); color: var(--tx-3); }

@media (max-width: 768px) {
  .gw-monopoly-board { gap: 2px; padding: 4px; }
  .monopoly-cell .mc-name { font-size: 7px; }
  .monopoly-dice .dice, .monopoly-dice .dice-placeholder { width: 34px; height: 34px; font-size: 16px; }
  .gw-gem-seats { grid-template-columns: repeat(2, 1fr); }
  .gem-cell { border-radius: 6px; }
  .gem-spec { font-size: 9px; }
}
.csk-gold .gw-mjt.back { background: repeating-linear-gradient(45deg, #2c1a08, #2c1a08 4px, #453010 4px, #453010 8px); border-color: #d4a437; }
.csk-sakura .gw-mjt { background: linear-gradient(165deg, #fff2f6, #ffd9e6); border-color: #eba4c0; }
.csk-sakura .gw-mjt.back { background: repeating-linear-gradient(45deg, #b04a72, #b04a72 4px, #cd6690 4px, #cd6690 8px); border-color: #7c2a4a; }
.csk-cyber .gw-mjt { background: linear-gradient(165deg, #0c1626, #060c18); border-color: #7b5cff; color: #dfe8ff; box-shadow: 0 2px 10px rgba(123, 92, 255, 0.35); }
.csk-cyber .gw-mjt.j-zhong { color: #ff6ad5; }
.csk-cyber .gw-mjt.j-fa { color: #6ee7b7; }
.csk-cyber .gw-mjt.j-bai, .csk-cyber .gw-mjt.j-wind { color: #c3b8ff; }
.csk-cyber .gw-mjt.back { background: repeating-linear-gradient(45deg, #141236, #141236 4px, #221e56 4px, #221e56 8px); border-color: #7b5cff; }

/* 麻将桌移动端适配（任务10：座位区紧凑、手牌可横滑） */
@media (max-width: 900px) {
  .gw-mjarena .mja-mid { grid-template-columns: 1fr 1fr; }
  .gw-mjarena .mja-center { grid-column: 1 / -1; order: -1; min-height: 84px; }
  .gw-mjarena .mja-left, .gw-mjarena .mja-right { justify-content: center; }
}
@media (max-width: 640px) {
  .gw-mjtable { min-height: 0; padding: var(--sp-2); }
  .gw-cseat.mj { min-width: 150px; max-width: 220px; }
  .gw-mjt { width: 28px; height: 38px; }
  .gw-mjt b { font-size: 13px; }
  .gw-mjt i { font-size: 9px; }
  .gw-mjt.mini { width: 19px; height: 26px; }
  .gw-mjt.mini b { font-size: 9px; }
  .gw-mjhand .gw-mjt { width: 32px; height: 44px; }
  .gw-mjhand .gw-mjt b { font-size: 15px; }
  .gw-variant-list { grid-template-columns: 1fr; }
  .gw-mjriver { max-width: 200px; }
}

/* 移动端适配（任务2/任务11：牌桌紧凑化） */
@media (max-width: 900px) {
  .gw-cardarena .ca-mid { grid-template-columns: 1fr; }
  .gw-cardarena .ca-left, .gw-cardarena .ca-right { justify-content: center; }
  .gw-cardarena.a4 .ca-left, .gw-cardarena.a4 .ca-right { display: inline-flex; }
  .gw-cardarena.a4 .ca-mid { grid-template-columns: 1fr 1fr; }
  .gw-cardarena.a4 .ca-center { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 640px) {
  .gw-cardtable { min-height: 0; padding: var(--sp-2); }
  .gw-cseat { min-width: 132px; padding: 6px var(--sp-2); }
  .gw-cseat .cs-info b { max-width: 76px; font-size: var(--fs-xs); }
  .gw-card { width: 38px; height: 54px; }
  .gw-card b { font-size: 12px; }
  .gw-card i { font-size: 11px; }
  .gw-card.mini { width: 22px; height: 31px; }
  .gw-hand { padding-top: 12px; }
  .gw-hand .gw-card { margin-left: -16px; }
  .gw-cardarena .ca-top.duo { gap: var(--sp-2); }
  .chain-suit { font-size: 14px; width: 16px; }
}
.gw-matt.rar-legend { color: var(--neon-gold); border-color: rgba(255, 200, 87, 0.5); }
.gw-mrow-body { margin: var(--sp-2) var(--sp-3) 0; padding: var(--sp-2) var(--sp-3); background: var(--bg-3); border: 1px solid var(--line-1); border-radius: var(--r-md); }
.gw-mrow-body p { margin: 0; font-size: var(--fs-sm); color: var(--tx-2); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.gw-mrow-body[hidden] { display: none; }
.gw-mrow-ops {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-3); min-height: 34px;
}
.gw-mexpand { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--tx-3); transition: color var(--t-fast) var(--ease); }
.gw-mexpand .i { transition: transform var(--t-fast) var(--ease); }
.gw-mrow.open .gw-mexpand .i { transform: rotate(-90deg); }
.gw-mrow:hover .gw-mexpand { color: var(--tx-2); }
.gw-mexpand em { font-style: normal; }
.gw-mclaimed { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ok); }

/* ================= 数据大盘（任务7） ================= */
.gw-dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.gw-dash-card {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--bg-glass); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
}
.gw-dash-card .k { font-size: var(--fs-xs); color: var(--tx-3); }
.gw-dash-card b { font-size: var(--fs-2xl); font-weight: 800; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-dash-card .s { font-size: 10px; color: var(--tx-3); }
.gw-dash-card.pos b { background: linear-gradient(135deg, #4ade80, #22d3ee); -webkit-background-clip: text; background-clip: text; }
.gw-dash-card.neg b { background: linear-gradient(135deg, #ff5d73, #ff9a5c); -webkit-background-clip: text; background-clip: text; }
.gw-dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.gw-dash-eco { grid-column: 1 / -1; }

/* 竖向条形图 */
.gw-dbars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: var(--sp-3); }
.gw-dbar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.gw-dbar i {
  width: 100%; max-width: 34px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.85), rgba(0, 229, 255, 0.25));
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
  transition: filter var(--t-fast) var(--ease);
}
.gw-dbar:hover i { filter: brightness(1.25); }
.gw-dbars.alt .gw-dbar i { background: linear-gradient(180deg, rgba(139, 92, 246, 0.9), rgba(139, 92, 246, 0.25)); box-shadow: 0 0 8px rgba(139, 92, 246, 0.22); }
.gw-dbars.gold .gw-dbar i { background: linear-gradient(180deg, rgba(255, 200, 87, 0.9), rgba(255, 154, 92, 0.28)); box-shadow: 0 0 8px rgba(255, 200, 87, 0.2); }
.gw-dbar .v { font-size: 10px; color: var(--tx-2); font-weight: 600; }
.gw-dbar .l { font-size: 9px; color: var(--tx-3); white-space: nowrap; }

/* 横向占比条 */
.gw-dshares { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-2); }
.gw-dshare { display: grid; grid-template-columns: 76px 1fr 84px; align-items: center; gap: var(--sp-3); }
.gw-dshare .l { font-size: var(--fs-xs); color: var(--tx-2); text-align: right; }
.gw-dshare .track { height: 12px; border-radius: var(--r-full); background: var(--bg-3); overflow: hidden; border: 1px solid var(--line-1); }
.gw-dshare .track i { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, rgba(0, 229, 255, 0.55), rgba(139, 92, 246, 0.7)); transition: width var(--t-med) var(--ease); }
.gw-dshare .v { font-size: var(--fs-xs); color: var(--tx-1); font-weight: 600; }
.gw-dshare .v em { font-style: normal; color: var(--tx-3); font-weight: 400; margin-left: 3px; }

.gw-dash-eco-sum { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-1); font-size: var(--fs-sm); color: var(--tx-2); }
.gw-dash-eco-sum .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.gw-dash-eco-sum .dot.in { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.7); }
.gw-dash-eco-sum .dot.out { background: #ff5d73; box-shadow: 0 0 6px rgba(255, 93, 115, 0.7); }
.gw-dash-eco-sum b { color: var(--tx-1); }
.gw-dash-eco-sum .pos b { color: #4ade80; }
.gw-dash-eco-sum .neg b { color: #ff5d73; }

/* ================= 聊天归档（任务6） ================= */
.gw-admin-row.chat .chat-text b { font-weight: 400; color: var(--tx-1); word-break: break-word; }
.gw-admin-row .mono { font-family: var(--font-mono, monospace); font-size: var(--fs-xs); }

/* ================= 批量邮件（任务8） ================= */
.gw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.gw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 12px; border-radius: var(--r-full);
  border: 1px solid rgba(0, 229, 255, 0.35); background: rgba(0, 229, 255, 0.08);
  font-size: var(--fs-xs); color: var(--tx-1);
}
.gw-chip-x {
  border: none; background: var(--bg-3); color: var(--tx-3); width: 18px; height: 18px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.gw-chip-x:hover { color: var(--danger); background: rgba(255, 93, 115, 0.15); }
.gw-cand {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 6px 0 0;
  padding: 6px 12px; border-radius: var(--r-full); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--tx-1);
  font-size: var(--fs-xs); transition: all var(--t-fast) var(--ease);
}
.gw-cand:hover:not(:disabled) { border-color: var(--line-glow); }
.gw-cand:disabled { opacity: 0.55; cursor: default; }
.gw-cand .gw-avatar { width: 20px; height: 20px; font-size: 10px; }
.gw-cand em { font-style: normal; color: var(--neon-cyan); }
.gw-mcompose-form { display: flex; flex-direction: column; gap: var(--sp-3); }
.gw-mcompose-form textarea { resize: vertical; min-height: 84px; font-family: var(--font-ui); }

/* ================= 留存/复盘门控（任务3） ================= */
.gw-ret-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.gw-ret-cell { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); color: var(--tx-2); }

@media (max-width: 900px) {
  .gw-dash-cards { grid-template-columns: repeat(2, 1fr); }
  .gw-dash-grid { grid-template-columns: 1fr; }
  .gw-ret-grid { grid-template-columns: repeat(2, 1fr); }
  .gw-dshare { grid-template-columns: 64px 1fr 74px; }
  .gw-mailbox { min-width: 0; width: 100%; }
}

/* 游戏好友移动端（任务5）：单栏切换——列表 ↔ 聊天；聊天打开时隐藏侧栏、显示返回键 */
@media (max-width: 768px) {
  .gw-friends { width: 96vw; }
  .gw-fr-body { grid-template-columns: 1fr; height: min(70vh, 640px); }
  .gw-fr-body.chat-open .gw-fr-side { display: none; }
  .gw-fr-body:not(.chat-open) .gw-fr-main { display: none; }
  .gw-fr-body.chat-open .fr-back { display: inline-flex; }
  .fr-chat-head { gap: 6px; padding: 8px 10px; }
  .fr-ch-tabs { gap: 4px; }
  .fr-ch-tabs .gw-btn { padding: 6px 10px; font-size: 0; gap: 0; }
  .fr-ch-tabs .gw-btn .i { width: 14px; height: 14px; }
  .fr-bubble { max-width: 86%; }
  .fr-picker { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .fr-gf-row .gw-btn { flex: 1; }
}

/* ================= 飞行棋（任务8） ================= */
/* 四色：红(0) 黄(1) 蓝(2) 绿(3) —— 与引擎 seatOrder 下标一致 */
.gw-match.flight { --fl-c0: #ff4d5e; --fl-c1: #ffd93a; --fl-c2: #3aa0ff; --fl-c3: #3fd65c; }
.gw-flight-main { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.gw-flight-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.gw-cseat.fl-seat.turn { border-color: var(--neon-green); box-shadow: 0 0 12px rgba(52, 245, 197, 0.25); }
.gw-cseat.fl-seat.winner { border-color: rgba(255, 200, 87, 0.6); box-shadow: 0 0 14px rgba(255, 200, 87, 0.2); }
.fl-seat-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: 6px; flex-wrap: wrap; }
.fl-color-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #10131f; padding: 2px 10px; border-radius: var(--r-full);
}
.fl-color-chip.fl-c0 { background: linear-gradient(135deg, #ff8a94, var(--fl-c0)); color: #4a0a12; }
.fl-color-chip.fl-c1 { background: linear-gradient(135deg, #ffe98a, var(--fl-c1)); color: #4a3600; }
.fl-color-chip.fl-c2 { background: linear-gradient(135deg, #8ac9ff, var(--fl-c2)); color: #06294a; }
.fl-color-chip.fl-c3 { background: linear-gradient(135deg, #8af0a0, var(--fl-c3)); color: #063a14; }
.fl-planes-mini { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--tx-2); }
.fl-planes-mini .fl-mini { width: 13px; height: 13px; fill: var(--neon-cyan); }
.fl-done-n { color: var(--neon-gold); }
.fl-win-tag {
  display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; color: #4a2c00;
  background: linear-gradient(135deg, #ffcf5e, #ff9a3d); padding: 1px 8px; border-radius: var(--r-full);
}

/* 棋盘 */
.gw-flight-boardwrap { position: relative; width: min(100%, 640px); margin: 0 auto; }
.gw-flight-boardwrap.mine .gw-flight-board { border-color: rgba(52, 245, 197, 0.45); box-shadow: 0 0 16px rgba(52, 245, 197, 0.12); }
.gw-flight-board {
  display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(15, 1fr);
  gap: 2px; aspect-ratio: 1 / 1; padding: 6px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0, 229, 255, 0.05), transparent 55%),
    var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
}
.fl-cell { position: relative; border-radius: 4px; min-width: 0; }
/* 主环格：默认暗色 + 所属色描边微光 */
.fl-loop { background: var(--bg-3); border: 1px solid var(--line-1); }
.fl-loop.fl-own0 { background: rgba(255, 77, 94, 0.16); border-color: rgba(255, 77, 94, 0.4); }
.fl-loop.fl-own1 { background: rgba(255, 217, 58, 0.14); border-color: rgba(255, 217, 58, 0.38); }
.fl-loop.fl-own2 { background: rgba(58, 160, 255, 0.15); border-color: rgba(58, 160, 255, 0.4); }
.fl-loop.fl-own3 { background: rgba(63, 214, 92, 0.14); border-color: rgba(63, 214, 92, 0.38); }
/* 起飞点（安全格）：强色 + 机位图标 */
.fl-takeoff { display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.fl-takeoff.fl-c0 { background: linear-gradient(145deg, rgba(255, 77, 94, 0.85), rgba(179, 18, 46, 0.85)); }
.fl-takeoff.fl-c1 { background: linear-gradient(145deg, rgba(255, 217, 58, 0.9), rgba(201, 147, 10, 0.9)); }
.fl-takeoff.fl-c2 { background: linear-gradient(145deg, rgba(58, 160, 255, 0.85), rgba(11, 79, 196, 0.85)); }
.fl-takeoff.fl-c3 { background: linear-gradient(145deg, rgba(63, 214, 92, 0.85), rgba(14, 138, 46, 0.85)); }
.fl-takeoff .fl-cell-ic { width: 62%; height: 62%; fill: rgba(255, 255, 255, 0.92); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
/* 虚线飞行格：虚线环标记 */
.fl-flycell::after {
  content: ''; position: absolute; inset: 1px; border-radius: 50%;
  border: 1.5px dashed currentColor; opacity: 0.75; pointer-events: none;
}
.fl-flycell.fl-own0 { color: var(--fl-c0); } .fl-flycell.fl-own1 { color: #c9930a; }
.fl-flycell.fl-own2 { color: var(--fl-c2); } .fl-flycell.fl-own3 { color: #149a33; }
.fl-fly-dot { position: absolute; inset: 30%; border-radius: 50%; background: currentColor; opacity: 0.5; }
/* 终点航道格：颜色渐变指向中心 */
.fl-lane { border: 1px solid transparent; }
.fl-lane.fl-c0 { background: rgba(255, 77, 94, 0.32); border-color: rgba(255, 77, 94, 0.55); }
.fl-lane.fl-c1 { background: rgba(255, 217, 58, 0.3); border-color: rgba(255, 217, 58, 0.5); }
.fl-lane.fl-c2 { background: rgba(58, 160, 255, 0.3); border-color: rgba(58, 160, 255, 0.55); }
.fl-lane.fl-c3 { background: rgba(63, 214, 92, 0.3); border-color: rgba(63, 214, 92, 0.5); }
.fl-lane.fl-final { display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.25); }
.fl-lane.fl-final .fl-cell-ic { width: 58%; height: 58%; fill: rgba(255, 255, 255, 0.85); }
/* 中央三角装饰与终点 */
.fl-ctri { opacity: 0.85; }
.fl-ctri.fl-c0 { background: linear-gradient(135deg, rgba(255, 77, 94, 0.5) 0%, rgba(255, 77, 94, 0.06) 70%); }
.fl-ctri.fl-c1 { background: linear-gradient(225deg, rgba(255, 217, 58, 0.45) 0%, rgba(255, 217, 58, 0.05) 70%); }
.fl-ctri.fl-c2 { background: linear-gradient(315deg, rgba(58, 160, 255, 0.5) 0%, rgba(58, 160, 255, 0.06) 70%); }
.fl-ctri.fl-c3 { background: linear-gradient(45deg, rgba(63, 214, 92, 0.45) 0%, rgba(63, 214, 92, 0.05) 70%); }
.fl-center {
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 200, 87, 0.35), rgba(255, 154, 61, 0.12));
  border: 1px solid rgba(255, 200, 87, 0.55); color: var(--neon-gold);
  box-shadow: 0 0 12px rgba(255, 200, 87, 0.25);
}
.fl-center .i { width: 55%; height: 55%; }
/* 基地区（6×6） */
.fl-base {
  position: relative; border-radius: 12px; margin: 3px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.fl-base.fl-c0 { background: linear-gradient(160deg, rgba(255, 77, 94, 0.2), rgba(255, 77, 94, 0.06)); border: 1px solid rgba(255, 77, 94, 0.4); }
.fl-base.fl-c1 { background: linear-gradient(160deg, rgba(255, 217, 58, 0.18), rgba(255, 217, 58, 0.05)); border: 1px solid rgba(255, 217, 58, 0.35); }
.fl-base.fl-c2 { background: linear-gradient(160deg, rgba(58, 160, 255, 0.2), rgba(58, 160, 255, 0.06)); border: 1px solid rgba(58, 160, 255, 0.4); }
.fl-base.fl-c3 { background: linear-gradient(160deg, rgba(63, 214, 92, 0.18), rgba(63, 214, 92, 0.05)); border: 1px solid rgba(63, 214, 92, 0.35); }
.fl-base-ring { position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.18); }
/* 停机坪机位 */
.fl-hangar { background: rgba(255, 255, 255, 0.05); border: 1.5px dashed rgba(255, 255, 255, 0.28); border-radius: 50%; margin: 12%; }
/* 飞机 */
.fl-plane {
  position: relative; align-self: center; justify-self: center;
  width: 86%; height: 86%; border-radius: 50%; padding: 12%;
  border: 2px solid rgba(255, 255, 255, 0.85); cursor: default; z-index: 3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -3px 5px rgba(0, 0, 0, 0.3), inset 0 2px 3px rgba(255, 255, 255, 0.4);
  transform: translate(var(--ox, 0), var(--oy, 0));
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}
.fl-plane .fl-plane-ic { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.fl-plane.fl-c0 { background: radial-gradient(circle at 32% 28%, #ffb3ba, var(--fl-c0) 55%, #b3122e); }
.fl-plane.fl-c1 { background: radial-gradient(circle at 32% 28%, #fff3b0, var(--fl-c1) 55%, #c9930a); }
.fl-plane.fl-c2 { background: radial-gradient(circle at 32% 28%, #b3e0ff, var(--fl-c2) 55%, #0b4fc4); }
.fl-plane.fl-c3 { background: radial-gradient(circle at 32% 28%, #c8f7c5, var(--fl-c3) 55%, #0e8a2e); }
.fl-plane.can { cursor: pointer; animation: fl-plane-pulse 1.1s ease-in-out infinite; z-index: 5; }
.fl-plane.can:hover { transform: translate(var(--ox, 0), var(--oy, 0)) scale(1.18); filter: brightness(1.15); }
@keyframes fl-plane-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(52, 245, 197, 0.65); }
  50% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(52, 245, 197, 0.15); }
}
.fl-plane.done { border-color: var(--neon-gold); box-shadow: 0 0 10px rgba(255, 200, 87, 0.6); }
/* 中央骰子区 */
.fl-dice-zone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; z-index: 4; pointer-events: none;
}
.fl-dice {
  width: 74%; max-width: 64px; aspect-ratio: 1 / 1; border-radius: 18%;
  background: linear-gradient(145deg, #ffffff, #d8dee9);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.12), inset 0 2px 3px #fff;
  padding: 14%;
}
.fl-dice-face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
.fl-dice-face i { border-radius: 50%; margin: 16%; }
.fl-dice-face i.on { background: radial-gradient(circle at 35% 30%, #3a4160, #12152a); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.fl-dice.empty { opacity: 0.4; }
.fl-dice.rolling { animation: gw-dice-pop 0.5s var(--ease); }
.fl-dice-zone.can .fl-dice { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(52, 245, 197, 0.5), 0 0 16px rgba(52, 245, 197, 0.35); }
.fl-dice-tip {
  font-size: 10px; color: var(--tx-2); text-align: center; line-height: 1.3;
  background: rgba(10, 13, 26, 0.72); padding: 2px 8px; border-radius: var(--r-full); white-space: nowrap;
}
/* 事件播报 */
.fl-last { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--tx-2); }
.fl-last .fl-ev-dice { color: var(--neon-gold); font-size: var(--fs-md); }
.fl-last .fl-ev-tag { color: #ff9d6b; font-weight: 800; }

@media (max-width: 768px) {
  .gw-flight-seats { grid-template-columns: repeat(2, 1fr); }
  .gw-flight-board { gap: 1px; padding: 4px; }
  .fl-cell { border-radius: 3px; }
  .fl-hangar { border-width: 1px; margin: 8%; }
  .fl-dice-tip { font-size: 8.5px; }
}