/* app.css — 聚游游戏中心 v9
   风格：深色赌场豪华风 · 香槟金点缀 · 全屏卡片布局
   版本：20261019-ui14 */

/* ===== 1. 设计令牌 ===== */
:root {
  --bg:          #0c0c10;
  --surface:     #18161f;
  --surface-2:   #201d2c;
  --surface-3:   #2a2638;
  --border:      rgba(230,184,79,0.12);
  --border-s:    rgba(230,184,79,0.28);
  --gold:        #e6b84f;
  --gold-dim:    rgba(230,184,79,0.55);
  --gold-faint:  rgba(230,184,79,0.10);
  --gold-glow:   0 0 16px rgba(230,184,79,0.28);
  --gold-ink:    #120e00;
  --text:        #ede8dc;
  --text-2:      #a89e8a;
  --text-3:      #6e6558;
  --green:       #4caf72;
  --red:         #e05c4a;
  --blue:        #4a9fe0;
  --r-sm:        8px;
  --r-md:        12px;
  --r-lg:        16px;
  --r-xl:        20px;
  --tabbar-h:    64px;
  --safe-top:    max(env(safe-area-inset-top,0px),var(--tg-viewport-safe-area-inset-top,0px),var(--tg-content-safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px));
  --safe-bottom: max(env(safe-area-inset-bottom,0px),var(--tg-viewport-safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));
  --safe-left:   max(env(safe-area-inset-left,0px),var(--tg-safe-area-inset-left,0px));
  --safe-right:  max(env(safe-area-inset-right,0px),var(--tg-safe-area-inset-right,0px));
  --vh:          var(--app-viewport-height,var(--tg-viewport-height,100dvh));
  --sans:        -apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --serif:       "Noto Serif SC","Songti SC","STSong","SimSun",Georgia,serif;
}

/* ===== 2. 基础重置 ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  overflow-x:hidden;
  user-select:none;
  -webkit-user-select:none;
  background-image:radial-gradient(ellipse at 50% 0%,rgba(230,184,79,0.04) 0%,transparent 60%);
}
button { font-family:inherit; border:0; background:none; color:inherit; cursor:pointer; }
input,textarea,select { font-family:inherit; user-select:text; -webkit-user-select:text; }
img { display:block; }
#app {
  position:relative;
  max-width:520px;
  margin:0 auto;
  min-height:var(--vh);
}

/* ===== 3. 开场动画 ===== */
.splash {
  position:fixed; inset:0;
  background:#080810;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:9999; overflow:hidden;
}
[data-bootstrap="ready"] .splash { display:none; }

.splash-glow {
  position:absolute;
  width:320px; height:320px;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(230,184,79,0.10) 0%,transparent 70%);
  animation:splashGlow 2.2s ease-in-out infinite;
}
@keyframes splashGlow {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.7; }
  50%      { transform:translate(-50%,-50%) scale(1.2); opacity:1; }
}

.splash-particles { position:absolute; inset:0; pointer-events:none; }
.sp {
  position:absolute; top:50%; left:50%;
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; background:var(--gold); opacity:0;
  animation:spBurst 1.8s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}
.sp1  { --tx:-70px;  --ty:-120px; animation-delay:0.30s; }
.sp2  { --tx:70px;   --ty:-110px; animation-delay:0.36s; }
.sp3  { --tx:130px;  --ty:-10px;  animation-delay:0.32s; }
.sp4  { --tx:110px;  --ty:95px;   animation-delay:0.40s; }
.sp5  { --tx:10px;   --ty:130px;  animation-delay:0.34s; }
.sp6  { --tx:-110px; --ty:95px;   animation-delay:0.38s; }
.sp7  { --tx:-130px; --ty:-10px;  animation-delay:0.31s; }
.sp8  { --tx:20px;   --ty:-140px; animation-delay:0.33s; }
@keyframes spBurst {
  0%   { transform:translate(0,0) scale(1); opacity:1; }
  65%  { opacity:0.5; }
  100% { transform:translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}
.splash-logo {
  position:relative; z-index:1;
  filter:drop-shadow(0 0 24px rgba(230,184,79,0.55));
  animation:logoIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.5s both;
}
@keyframes logoIn {
  from { transform:scale(0.3) rotate(-18deg); opacity:0; }
  to   { transform:scale(1) rotate(0deg); opacity:1; }
}
.splash-title {
  font-family:var(--serif);
  font-size:24px; font-weight:700;
  color:var(--gold);
  letter-spacing:0.18em;
  margin-top:20px; position:relative; z-index:1;
  animation:slideUp 0.8s cubic-bezier(0.34,1.2,0.64,1) 0.95s both;
  text-shadow:0 2px 24px rgba(230,184,79,0.35);
}
.splash-sub {
  font-size:12px; color:var(--text-2);
  letter-spacing:0.28em; margin-top:10px;
  position:relative; z-index:1;
  animation:fadeIn 0.7s ease 1.4s both;
}
.splash-dots {
  display:flex; gap:6px; margin-top:44px;
  position:relative; z-index:1;
  animation:fadeIn 0.5s ease 1.7s both;
}
.sd {
  width:5px; height:5px; border-radius:50%;
  background:var(--gold-dim);
  animation:dotPulse 1.3s ease-in-out infinite;
}
.sd2 { animation-delay:0.22s; }
.sd3 { animation-delay:0.44s; }
@keyframes dotPulse {
  0%,80%,100% { transform:scale(0.6); opacity:0.35; }
  40%          { transform:scale(1);   opacity:1; }
}
@keyframes slideUp {
  from { transform:translateY(22px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ===== 4. 应用骨架 ===== */
.app-shell {
  height:var(--vh); min-height:var(--vh);
  padding-top:var(--safe-top);
  display:flex; flex-direction:column;
}
.page-content {
  flex:1; overflow-y:auto;
  overscroll-behavior-y:contain;
  padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
}
/* Vue 页面实际挂载在 #main-content；让页面本身参与 flex 高度计算，避免
   Telegram WebView 中输入栏被挤到屏幕外或被底部导航覆盖。 */
#main-content {
  flex:1 1 auto; min-height:0; min-width:0; overflow:hidden;
  display:flex; flex-direction:column;
}
#main-content > .jy-page,
#main-content > .room-browser {
  flex:1 1 auto; min-height:0; min-width:0; width:100%; overflow-y:auto;
  overscroll-behavior-y:contain;
  padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 8px);
}
#main-content > .room-browser > .jy-page { min-height:100%; }
.table-shell {
  min-height:var(--vh);
  padding-top:var(--safe-top);
}
.conn-bar {
  padding:7px 16px; font-size:12px;
  text-align:center; font-weight:500; letter-spacing:0.04em;
}
.conn-bar.offline    { background:#3d1a1a; color:#f47b6e; }
.conn-bar.connecting { background:#1a1a3d; color:#7ba8f4; }
.conn-bar.authfail   { background:#3d2a1a; color:#f4b87b; }

/* ===== 5. 底部导航 ===== */
.tabbar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px;
  height:calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:var(--surface);
  border-top:1px solid var(--border-s);
  display:flex; align-items:stretch;
  z-index:200;
  box-shadow:0 -8px 32px rgba(0,0,0,0.55),0 -1px 0 rgba(230,184,79,0.08);
}
.tab-btn {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px; font-size:10px; letter-spacing:0.06em;
  color:var(--text-3); position:relative; padding-bottom:2px;
  transition:color 160ms ease;
  -webkit-tap-highlight-color:transparent;
}
.tab-btn svg { transition:transform 160ms cubic-bezier(0.34,1.56,0.64,1),opacity 160ms ease; opacity:0.45; }
.tab-btn.on { color:var(--gold); }
.tab-btn.on svg { opacity:1; transform:translateY(-2px) scale(1.1); filter:drop-shadow(var(--gold-glow)); }
.tab-btn.on::after {
  content:""; position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:20px; height:2.5px; border-radius:2px;
  background:var(--gold); box-shadow:0 0 8px rgba(230,184,79,0.5);
}
.tab-btn:active { opacity:0.65; }

/* ===== 6. Toast 提示 ===== */
.toast-stack {
  position:fixed; top:calc(var(--safe-top) + 12px);
  left:50%; transform:translateX(-50%);
  width:min(90vw,340px);
  display:flex; flex-direction:column; gap:8px;
  z-index:9000; pointer-events:none;
}
.toast-item {
  padding:10px 16px; border-radius:var(--r-md);
  font-size:13px; font-weight:500; text-align:center;
  animation:toastIn 0.25s cubic-bezier(0.34,1.56,0.64,1) both;
  backdrop-filter:blur(12px);
}
.toast-item.info  { background:rgba(42,38,56,0.95); border:1px solid var(--border); color:var(--text); }
.toast-item.ok    { background:rgba(18,48,28,0.95); border:1px solid rgba(76,175,114,0.35); color:#7fdb9a; }
.toast-item.error { background:rgba(48,18,18,0.95); border:1px solid rgba(224,92,74,0.35); color:#f08070; }
@keyframes toastIn {
  from { transform:translateY(-8px) scale(0.94); opacity:0; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}

/* ===== 7. 通用元件 ===== */
.jy-page { min-height:100%; padding:0 0 20px; }

.sec-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 8px;
}
.sec-head h2 { font-size:14px; font-weight:700; letter-spacing:0.06em; }
.sec-head-note { font-size:11px; color:var(--text-3); }

.jy-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
}

/* 按钮 */
.btn-gold {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 20px; background:var(--gold); color:var(--gold-ink);
  border-radius:var(--r-md); font-size:14px; font-weight:700; letter-spacing:0.05em;
  box-shadow:0 4px 16px rgba(230,184,79,0.22);
  transition:opacity 120ms,transform 120ms;
}
.btn-gold:active { opacity:0.82; transform:scale(0.96); }
.btn-gold:disabled { opacity:0.4; pointer-events:none; }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; background:transparent; color:var(--gold);
  border:1px solid var(--border-s); border-radius:var(--r-md);
  font-size:13px; font-weight:600;
  transition:background 120ms;
}
.btn-ghost:active { background:var(--gold-faint); }

.btn-mini {
  padding:6px 14px; border-radius:var(--r-sm);
  font-size:12px; font-weight:600;
  background:var(--surface-2); color:var(--gold);
  border:1px solid var(--border);
  transition:background 120ms; white-space:nowrap;
}
.btn-mini:active { background:var(--surface-3); }
.btn-mini.danger { color:var(--red); border-color:rgba(224,92,74,0.3); }
.btn-mini:disabled { opacity:0.4; pointer-events:none; }

/* 头像 */
.jy-ava {
  border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:var(--gold);
  border:1.5px solid var(--border);
}
.jy-ava img { width:100%; height:100%; object-fit:cover; }
.jy-ava.sm { width:36px; height:36px; font-size:13px; }
.jy-ava.md { width:48px; height:48px; font-size:17px; }
.jy-ava.lg { width:64px; height:64px; font-size:24px; }
.jy-ava.xl { width:80px; height:80px; font-size:30px; }

.coin-u { display:inline-block; font-weight:800; font-size:0.85em; color:var(--gold); margin-right:2px; }

/* 空状态 */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  padding:40px 24px; gap:8px; text-align:center;
}
.empty-icon { font-size:42px; margin-bottom:4px; opacity:0.5; }
.empty-title { font-size:15px; font-weight:600; }
.empty-sub { font-size:13px; color:var(--text-2); }

/* 骨架屏 */
.skeleton {
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);
  background-size:200% 100%;
  animation:skelShimmer 1.5s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes skelShimmer {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}

/* 输入框 */
.jy-input {
  width:100%; padding:11px 14px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--text); font-size:15px;
  outline:none; transition:border-color 160ms;
  -webkit-appearance:none;
}
.jy-input:focus { border-color:var(--border-s); }
.jy-input::placeholder { color:var(--text-3); }

/* ===== 8. 大厅页 ===== */
.lobby-hero {
  background:linear-gradient(160deg,#1a0f2e 0%,#0e0c18 55%,var(--bg) 100%);
  padding:calc(var(--safe-top) + 16px) 16px 20px;
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.lobby-hero::before {
  content:""; position:absolute; right:-24px; top:-24px; pointer-events:none;
  width:180px; height:180px; border-radius:50%;
  background:radial-gradient(circle,rgba(230,184,79,0.07) 0%,transparent 70%);
}
.lobby-hero-user {
  display:flex; align-items:center; gap:12px; flex:1; min-width:0;
  cursor:pointer;
}
.lobby-hero-info { min-width:0; }
.lobby-hero-name {
  font-size:16px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lobby-hero-bal { font-size:13px; color:var(--text-2); margin-top:2px; }
.lobby-hero-bal strong { color:var(--gold); font-size:16px; font-weight:800; }
.lobby-hero-cta {
  flex-shrink:0; display:flex; align-items:center; gap:5px;
  padding:9px 14px; background:var(--gold); color:var(--gold-ink);
  border-radius:var(--r-md); font-size:13px; font-weight:700;
  white-space:nowrap; box-shadow:0 4px 14px rgba(230,184,79,0.28);
  transition:opacity 120ms,transform 120ms;
}
.lobby-hero-cta:active { opacity:0.82; transform:scale(0.95); }

.room-filter {
  display:flex; gap:8px; padding:12px 16px 4px;
  overflow-x:auto; scrollbar-width:none;
}
.room-filter::-webkit-scrollbar { display:none; }
.filter-pill {
  flex-shrink:0; padding:6px 14px; border-radius:20px;
  font-size:12px; font-weight:600; letter-spacing:0.04em;
  border:1px solid var(--border); color:var(--text-2);
  background:transparent; transition:all 160ms ease;
}
.filter-pill.on { background:var(--gold-faint); border-color:var(--border-s); color:var(--gold); }

.refresh-row { display:flex; justify-content:flex-end; padding:4px 16px 2px; }
.refresh-btn {
  display:flex; align-items:center; gap:4px;
  font-size:12px; color:var(--text-3); padding:4px 8px;
  border-radius:var(--r-sm); transition:color 120ms;
}
.refresh-btn:active { color:var(--gold); }
.refresh-btn.spin svg { animation:spin 0.6s linear; }
@keyframes spin { to { transform:rotate(360deg); } }

.room-list { padding:4px 12px; display:flex; flex-direction:column; gap:8px; }
.room-row {
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:12px;
  transition:background 120ms,border-color 120ms; cursor:pointer;
}
.room-row:active { background:var(--surface-2); border-color:var(--border-s); }

.room-thumb {
  width:48px; height:48px; border-radius:var(--r-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--surface-2); border:1px solid var(--border);
}
.room-thumb.gomoku    { background:linear-gradient(135deg,#1d3a1d,#2d5a3d); }
.room-thumb.weiqi     { background:linear-gradient(135deg,#1d1d3a,#2d2d5a); }
.room-thumb.xiangqi   { background:linear-gradient(135deg,#3a1d1d,#5a2d2d); }
.room-thumb.doudizhu  { background:linear-gradient(135deg,#3a2d1a,#5a4428); }
.room-thumb.texas     { background:linear-gradient(135deg,#1a2d3a,#284558); }
.room-thumb.zhajinhua { background:linear-gradient(135deg,#2d1a3a,#4a2858); }
.room-thumb.mahjong   { background:linear-gradient(135deg,#3a2a1a,#5a4228); }

.room-info { flex:1; min-width:0; }
.room-game { font-size:14px; font-weight:700; margin-bottom:3px; }
.room-meta { font-size:11px; color:var(--text-2); }
.room-fund-tag {
  display:inline-block; padding:2px 7px; border-radius:10px;
  font-size:10px; font-weight:700;
  background:var(--gold-faint); border:1px solid var(--border-s); color:var(--gold);
  margin-left:6px;
}
.room-right { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.room-status {
  font-size:10px; font-weight:700; letter-spacing:0.08em;
  padding:3px 8px; border-radius:10px; white-space:nowrap;
}
.room-status.waiting { background:rgba(76,175,114,0.15); color:var(--green); }
.room-status.playing { background:rgba(230,184,79,0.15); color:var(--gold); }

/* 赛事 */
.ev-list { padding:4px 12px; display:flex; flex-direction:column; gap:8px; }
.ev-row { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.ev-row-head { display:flex; align-items:center; padding:12px 14px; gap:10px; cursor:pointer; transition:background 120ms; }
.ev-row-head:active { background:var(--surface-2); }
.ev-row-icon { width:40px; height:40px; border-radius:var(--r-md); background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ev-row-info { flex:1; min-width:0; }
.ev-row-name { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-row-meta { font-size:11px; color:var(--text-2); margin-top:2px; }
.ev-row-badge { font-size:10px; font-weight:700; padding:3px 8px; border-radius:10px; flex-shrink:0; white-space:nowrap; }
.ev-row-badge.signup  { background:rgba(76,175,114,0.15); color:var(--green); }
.ev-row-badge.running { background:rgba(230,184,79,0.15); color:var(--gold); }
.ev-row-badge.over    { background:rgba(110,101,88,0.25); color:var(--text-3); }
.ev-detail { padding:0 14px 14px; border-top:1px solid var(--border); font-size:13px; color:var(--text-2); line-height:1.8; }
.ev-detail-row { padding-top:6px; }
.ev-join-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin-top:12px; padding:10px;
  background:var(--surface-2); border:1px solid var(--border-s);
  border-radius:var(--r-md); font-size:13px; font-weight:600; color:var(--gold);
  transition:background 120ms;
}
.ev-join-btn:active { background:var(--surface-3); }
.ev-join-btn:disabled { opacity:0.4; pointer-events:none; }

/* ===== 9. 房间/创建页 ===== */
.games-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; padding:8px 12px;
}
.game-card {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  aspect-ratio:4/3; cursor:pointer;
  transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}
.game-card:active { transform:scale(0.95); }
.game-card.available:active { border-color:var(--border-s); }
.game-card-cover {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.game-card[data-game="gomoku"]    .game-card-cover { background:linear-gradient(135deg,#1a3a1a,#2d5a3d); }
.game-card[data-game="weiqi"]     .game-card-cover { background:linear-gradient(135deg,#1a1a3a,#2d3d6a); }
.game-card[data-game="xiangqi"]   .game-card-cover { background:linear-gradient(135deg,#3a1a1a,#6a2d2d); }
.game-card[data-game="doudizhu"]  .game-card-cover { background:linear-gradient(135deg,#3a2a0a,#6a4a18); }
.game-card[data-game="texas"]     .game-card-cover { background:linear-gradient(135deg,#0a2a3a,#18486a); }
.game-card[data-game="zhajinhua"] .game-card-cover { background:linear-gradient(135deg,#2a0a3a,#4a186a); }
.game-card[data-game="mahjong"]   .game-card-cover { background:linear-gradient(135deg,#3a2a0a,#5a3a18); }
.game-card-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.65; }
.game-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.12) 55%,transparent 100%);
}
.game-card-info { position:absolute; bottom:0; left:0; right:0; padding:10px 12px; }
.game-card-name { font-size:15px; font-weight:800; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.8); }
.game-card-tag  { font-size:10px; color:rgba(255,255,255,0.6); margin-top:1px; }
.game-card-badge {
  position:absolute; top:8px; right:8px;
  padding:3px 7px; border-radius:8px;
  font-size:9px; font-weight:700; letter-spacing:0.06em;
  background:rgba(230,184,79,0.9); color:var(--gold-ink);
}
.game-card.unavailable { opacity:0.4; pointer-events:none; }

/* 底部弹层 */
.sheet-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.62);
  z-index:400; backdrop-filter:blur(4px);
}
.sheet {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px;
  background:var(--surface); border-radius:20px 20px 0 0;
  border-top:1px solid var(--border-s);
  z-index:401; padding-bottom:calc(var(--safe-bottom) + 16px);
  animation:sheetUp 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
  max-height:88vh; overflow-y:auto;
}
@keyframes sheetUp {
  from { transform:translateX(-50%) translateY(100%); }
  to   { transform:translateX(-50%) translateY(0); }
}
.sheet-handle { width:36px; height:4px; border-radius:2px; background:var(--surface-3); margin:12px auto 0; }
.sheet-title  { font-size:17px; font-weight:800; padding:14px 20px 10px; display:flex; align-items:center; gap:10px; }
.sheet-body   { padding:0 20px; }
.sheet-label  { font-size:12px; color:var(--text-3); letter-spacing:0.06em; margin:14px 0 6px; }

.mode-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--surface-2); border-radius:var(--r-md); padding:4px; margin:8px 0; }
.mode-btn { padding:10px; border-radius:var(--r-sm); font-size:13px; font-weight:600; color:var(--text-2); text-align:center; transition:all 160ms ease; }
.mode-btn.on { background:var(--surface-3); color:var(--gold); box-shadow:0 2px 8px rgba(0,0,0,0.35); }

.fund-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.toggle-switch { position:relative; width:44px; height:24px; background:var(--surface-3); border-radius:12px; transition:background 200ms; cursor:pointer; }
.toggle-switch.on { background:var(--gold); }
.toggle-switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:white; transition:transform 200ms cubic-bezier(0.34,1.56,0.64,1); }
.toggle-switch.on::after { transform:translateX(20px); }

.friend-chips { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:10px 0; }
.friend-chips::-webkit-scrollbar { display:none; }
.friend-chip { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; cursor:pointer; }
.friend-chip-ava { position:relative; }
.friend-chip .check {
  position:absolute; bottom:-2px; right:-2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--gold); display:none; align-items:center; justify-content:center;
  font-size:9px; color:var(--gold-ink); font-weight:900; border:2px solid var(--surface);
}
.friend-chip.selected .check { display:flex; }
.friend-chip-name { font-size:10px; color:var(--text-2); max-width:52px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.history-tabs { display:flex; border-bottom:1px solid var(--border); }
.htab { flex:1; padding:10px 0; font-size:12px; font-weight:600; text-align:center; color:var(--text-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 160ms,border-color 160ms; }
.htab.on { color:var(--gold); border-bottom-color:var(--gold); }
.hist-row { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 120ms; }
.hist-row:last-child { border-bottom:0; }
.hist-row:active { background:var(--surface-2); }
.hist-game { font-size:13px; font-weight:700; flex:1; }
.hist-meta  { font-size:11px; color:var(--text-2); }
.hist-profit { font-size:13px; font-weight:700; }
.hist-profit.win  { color:var(--green); }
.hist-profit.lose { color:var(--red); }

/* ===== 10. 好友页 ===== */
.friends-page .tab-row { display:flex; border-bottom:1px solid var(--border); background:var(--surface); }
.friends-page .ftab { flex:1; padding:12px 0; font-size:13px; font-weight:600; text-align:center; color:var(--text-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 160ms,border-color 160ms; }
.friends-page .ftab.on { color:var(--gold); border-bottom-color:var(--gold); }

.conv-list { display:flex; flex-direction:column; }
.conv-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 120ms; }
.conv-row:active { background:var(--surface-2); }
.conv-info { flex:1; min-width:0; }
.conv-name-row { display:flex; justify-content:space-between; margin-bottom:2px; }
.conv-name  { font-size:14px; font-weight:700; }
.conv-time  { font-size:11px; color:var(--text-3); }
.conv-last  { font-size:12px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.friend-list { display:flex; flex-direction:column; }
.friend-row { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.friend-row-info { flex:1; min-width:0; }
.friend-row-name { font-size:14px; font-weight:700; }
.friend-row-sub  { font-size:12px; color:var(--text-2); margin-top:2px; }

.friends-page.chat-active { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; height:100%; overflow:hidden; padding-bottom:var(--safe-bottom); }
.msg-thread { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; min-width:0; height:100%; overflow:hidden; }
.msg-thread-head {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0;
}
.msg-back { width:36px; height:36px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--text); flex-shrink:0; transition:background 120ms; }
.msg-back:active { background:var(--surface-3); }
.msg-thread-name { font-size:16px; font-weight:700; flex:1; }
.msg-list { flex:1 1 auto; min-height:0; min-width:0; overflow-y:auto; padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.msg-bubble { max-width:82%; min-width:0; padding:9px 12px; border-radius:16px; font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.msg-bubble.mine   { align-self:flex-end; background:linear-gradient(135deg,#3a2a0a,#6a4a18); border:1px solid var(--border-s); border-bottom-right-radius:4px; }
.msg-bubble.theirs { align-self:flex-start; background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:4px; }
.msg-time { font-size:10px; color:var(--text-3); margin-top:4px; }
.msg-input-row { display:flex; align-items:center; gap:8px; padding:10px 16px calc(10px + var(--safe-bottom)); border-top:1px solid var(--border); background:var(--surface); flex:0 0 auto; min-width:0; }
.msg-input { flex:1 1 auto; min-width:0; width:auto; touch-action:manipulation; }
.msg-plus-btn { width:36px; height:36px; flex-shrink:0; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-2); font-size:22px; font-weight:300; transition:background 120ms,color 120ms; }
.msg-plus-btn:active, .msg-plus-btn.active { background:var(--surface-3); color:var(--gold); }
.msg-send-btn { width:36px; height:36px; flex-shrink:0; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; color:var(--gold-ink); transition:opacity 120ms,transform 120ms; }
.msg-send-btn:active { opacity:0.8; transform:scale(0.9); }
.msg-send-btn:disabled { opacity:0.3; }

.plus-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px; border-top:1px solid var(--border); background:var(--surface-2); flex:0 0 auto; }
.plus-item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); font-size:12px; color:var(--text-2); transition:background 120ms; }
.plus-item:active { background:var(--surface-3); }
.plus-item-icon { font-size:28px; }

/* ===== 11. 我的页面 ===== */
.pf-hero {
  background:linear-gradient(160deg,#1a0f2e 0%,#0e0c18 65%,var(--bg) 100%);
  padding:20px 20px 28px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  position:relative; overflow:hidden; min-height:220px;
}
.pf-hero::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 80%,rgba(230,184,79,0.05) 0%,transparent 60%);
}
/* 奢华赌场背景：多层几何光效模拟纸牌桌 + 镭射光束 */
.pf-hero-bg {
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.pf-hero-bg::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 110%, rgba(180,130,40,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 0%, rgba(120,60,180,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 80% 0%, rgba(60,100,200,0.10) 0%, transparent 55%),
    linear-gradient(180deg,#1a0a30 0%,#0d0b1a 50%,#0c0c10 100%);
}
.pf-hero-bg::after {
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(105deg, transparent 0px, transparent 38px, rgba(230,184,79,0.04) 38px, rgba(230,184,79,0.04) 39px),
    repeating-linear-gradient(75deg, transparent 0px, transparent 38px, rgba(230,184,79,0.03) 38px, rgba(230,184,79,0.03) 39px);
}
.pf-ava-wrap { position:relative; z-index:1; }
.pf-vip { position:absolute; bottom:-3px; right:-3px; font-size:20px; }
.pf-name     { font-size:21px; font-weight:800; z-index:1; text-align:center; }
.pf-username { font-size:13px; color:var(--text-2); z-index:1; }
.pf-badge { padding:4px 14px; border-radius:12px; font-size:11px; font-weight:700; letter-spacing:0.1em; z-index:1; }
.pf-badge.vip  { background:var(--gold-faint); border:1px solid var(--border-s); color:var(--gold); }
.pf-badge.free { background:rgba(110,101,88,0.18); border:1px solid rgba(110,101,88,0.28); color:var(--text-3); }

.pf-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:16px; }
.pf-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 16px; }
.pf-stat-label { font-size:11px; color:var(--text-3); letter-spacing:0.06em; margin-bottom:6px; }
.pf-stat-val   { font-size:22px; font-weight:800; color:var(--gold); }
.pf-stat-unit  { font-size:13px; font-weight:600; color:var(--text-2); margin-left:3px; }

.pf-id-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; margin:0 0 12px;
  background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.pf-id-label { font-size:12px; color:var(--text-3); margin-bottom:2px; }
.pf-id-val   { font-size:15px; font-weight:700; }

.pf-action-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px; margin:0 0 12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); font-size:14px; font-weight:600; color:var(--gold);
  transition:background 120ms;
}
.pf-action-btn:active { background:var(--surface-2); }

.pf-hist { padding:0 12px; }
.pf-hist-row {
  display:grid; grid-template-columns:1fr auto auto auto;
  align-items:center; gap:8px; padding:12px 4px;
  border-bottom:1px solid var(--border); font-size:13px;
}
.pf-hist-game   { font-weight:700; }
.pf-hist-time   { font-size:11px; color:var(--text-3); }
.pf-hist-result { font-size:12px; font-weight:700; padding:2px 8px; border-radius:8px; }
.pf-hist-result.win  { background:rgba(76,175,114,0.15); color:var(--green); }
.pf-hist-result.lose { background:rgba(224,92,74,0.15); color:var(--red); }
.pf-hist-result.draw { background:rgba(110,101,88,0.18); color:var(--text-3); }
.pf-hist-profit { font-size:13px; font-weight:700; }
.pf-hist-profit.pos { color:var(--green); }
.pf-hist-profit.neg { color:var(--red); }

/* ===== 12. 游戏房间壳 ===== */
.room-page { min-height:var(--vh); display:flex; flex-direction:column; background:var(--bg); }
.room-bar {
  display:flex; align-items:center; gap:10px;
  padding:calc(var(--safe-top) + 10px) 16px 10px;
  background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0;
}
.room-bar-back {
  width:36px; height:36px; flex-shrink:0; border-radius:50%;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--text); transition:background 120ms;
}
.room-bar-back:active { background:var(--surface-3); }
.room-bar-info { flex:1; min-width:0; }
.room-bar-game { font-size:16px; font-weight:800; }
.room-bar-code { font-size:11px; color:var(--text-3); margin-top:1px; }
.room-bar-spec { font-size:11px; color:var(--blue); margin-left:6px; }
.mute-btn { font-size:20px; padding:4px; line-height:1; color:var(--text-2); transition:color 120ms; }
.mute-btn.muted { color:var(--text-3); }

.game-stage  { flex:1 1 0; min-height:0; display:flex; flex-direction:column; position:relative; }
.game-mount  { flex:1 1 0; min-height:0; position:relative; overflow:hidden; }

.chat-fab {
  position:fixed; bottom:calc(20px + var(--safe-bottom)); right:16px;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border-s);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; z-index:100;
  box-shadow:0 4px 16px rgba(0,0,0,0.45);
  transition:transform 160ms;
}
.chat-fab:active { transform:scale(0.88); }
.chat-fab .unread {
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:var(--red); color:#fff;
  font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.chat-panel {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:520px; height:46vh;
  background:var(--surface); border-radius:20px 20px 0 0;
  border-top:1px solid var(--border-s); z-index:200;
  display:flex; flex-direction:column;
  animation:sheetUp 0.24s ease both;
  padding-bottom:var(--safe-bottom);
}
.chat-panel-head {
  padding:12px 16px 8px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.chat-panel-title { font-size:14px; font-weight:700; color:var(--text-2); }
.chat-panel-close { font-size:24px; color:var(--text-3); padding:4px; line-height:1; }
.chat-msgs { flex:1; overflow-y:auto; padding:8px 14px; display:flex; flex-direction:column; gap:4px; }
.chat-msg { font-size:13px; line-height:1.55; }
.chat-msg-name { font-weight:700; color:var(--gold-dim); }
.chat-msg.spec .chat-msg-name { color:var(--text-3); }
.chat-msg.sys { color:var(--text-3); font-style:italic; text-align:center; font-size:11px; }
.chat-input-row { display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--border); }

.ready-btn-wrap {
  padding:10px 16px calc(10px + var(--safe-bottom));
  background:var(--surface); border-top:1px solid var(--border); flex-shrink:0;
}

/* ===== 13. 工具类 ===== */
.w-full { width:100%; }
.flex   { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.p-4   { padding:16px; }
.px-4  { padding-left:16px; padding-right:16px; }
.py-2  { padding-top:8px; padding-bottom:8px; }
.mt-2  { margin-top:8px; }
.mt-3  { margin-top:12px; }
.mt-4  { margin-top:16px; }
.mb-2  { margin-bottom:8px; }
.text-gold    { color:var(--gold); }
.text-green   { color:var(--green); }
.text-red     { color:var(--red); }
.text-muted   { color:var(--text-2); }
.text-faint   { color:var(--text-3); }
.text-sm      { font-size:13px; }
.text-xs      { font-size:11px; }
.text-lg      { font-size:18px; }
.font-bold    { font-weight:700; }
.font-black   { font-weight:900; }
.truncate     { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.border-b     { border-bottom:1px solid var(--border); }
.rounded-full { border-radius:9999px; }
.opacity-0    { opacity:0; }
.opacity-50   { opacity:0.5; }
.pointer-none { pointer-events:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* ===== UI9 interaction fixes ===== */
/* app-shell 已统一承担 Telegram 顶部安全区；页面头部不再重复叠加 safe-top。 */
.lobby-hero { padding-top:16px; }
.room-history-trigger { position:relative; z-index:3; display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--border-s); border-radius:var(--r-md); color:var(--gold); background:var(--surface-2); font-size:12px; font-weight:700; white-space:nowrap; }
.room-history-trigger:active { background:var(--surface-3); transform:scale(.98); }
.room-history-drawer { position:fixed; top:calc(var(--safe-top) + 58px); right:max(10px, calc((100vw - 520px)/2 + 10px)); width:min(330px, calc(100vw - 20px)); max-height:min(72vh, 560px); overflow:auto; z-index:450; background:rgba(24,22,31,.98); border:1px solid var(--border-s); border-radius:var(--r-lg); box-shadow:0 16px 42px rgba(0,0,0,.58); }
.room-history-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:13px 14px 9px; border-bottom:1px solid var(--border); }
.room-history-drawer-body { padding:0 0 10px; }
.room-history-drawer .history-tabs { margin:0; padding:0 8px; }
.room-history-drawer .hist-row { padding:12px 14px; }
.money-panel { padding:12px 16px; border-top:1px solid var(--border); background:var(--surface-2); flex:0 0 auto; }
.money-panel-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; font-weight:700; color:var(--text); }
.money-panel-actions { display:flex; gap:8px; margin-top:10px; }
.money-panel-actions > button { flex:1; }
.money-error { margin-top:7px; color:var(--red); font-size:12px; overflow-wrap:anywhere; }
.money-confirm { z-index:520; }
.msg-bubble-row { display:flex; align-items:flex-end; gap:6px; max-width:88%; }
.msg-bubble-row.mine { align-self:flex-end; flex-direction:row-reverse; }
.msg-bubble-row.theirs { align-self:flex-start; }
.msg-bubble-avatar { width:28px; height:28px; border-radius:50%; flex:0 0 28px; overflow:hidden; background:var(--surface-3); color:var(--text-2); display:flex; align-items:center; justify-content:center; font-size:11px; }
.msg-bubble-avatar img { width:100%; height:100%; object-fit:cover; }
.social-card { min-width:150px; padding:10px 12px; border-radius:12px; background:linear-gradient(135deg,#6f1d2d,#b7463d); color:#fff; border:1px solid rgba(255,220,180,.25); }
.social-card.transfer { background:linear-gradient(135deg,#193f51,#26718a); }
.social-card-title { font-weight:800; font-size:14px; }
.social-card-sub { margin-top:3px; font-size:11px; opacity:.78; }
.social-card button { margin-top:8px; width:100%; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.18); color:#fff; font-size:12px; }
@media (max-width:360px) {
  .msg-thread-head { padding-left:10px; padding-right:10px; gap:7px; }
  .msg-input-row { padding-left:10px; padding-right:10px; gap:5px; }
  .msg-plus-btn, .msg-send-btn { width:34px; height:34px; }
  .money-panel { padding-left:10px; padding-right:10px; }
  .room-history-drawer { right:10px; width:calc(100vw - 20px); }
}

.chat-action-error { flex:0 0 auto; padding:6px 14px; background:rgba(48,18,18,.92); color:#f08070; font-size:12px; overflow-wrap:anywhere; }

/* 私聊时隐藏了 tabbar，主内容不应继续为它预留底部空间。 */
#main-content > .friends-page.chat-active { padding-bottom:0; overflow:hidden; }


.room-bar-fund { color:var(--gold-dim); font-size:10px; margin-left:3px; white-space:nowrap; }
.fund-prompt-mask { position:fixed; inset:0; z-index:800; display:flex; align-items:flex-end; justify-content:center; padding:16px; background:rgba(0,0,0,.62); }
.fund-prompt-card { width:min(420px,100%); padding:18px; border-radius:18px; background:var(--surface); border:1px solid var(--border-s); box-shadow:0 18px 50px rgba(0,0,0,.55); }
.fund-prompt-title { font-size:18px; font-weight:800; color:var(--gold); }
.fund-prompt-text { margin:10px 0 15px; color:var(--text-2); font-size:13px; line-height:1.65; }
.fund-prompt-card .btn-gold,.fund-prompt-card .btn-ghost { display:block; width:100%; margin-top:8px; padding:11px; border-radius:10px; }
.fund-prompt-later { display:block; width:100%; margin-top:10px; color:var(--text-3); font-size:12px; text-align:center; }