/* ============================================================
   Orbit App · 统一 UI 样式 v2.0
   ------------------------------------------------------------
   设计 token 唯一来源：tokens.css（本文件只引用变量，不写死色值）
   分层：基础壳 → 导航 → 按钮 → 卡片 → 列表/行 → 表单
         → 题干/作答/结果 → 榜单 → 社群聊天 → 我的/账号
         → 状态反馈 → 首页 → 街机宿主壳 → 响应式/安全区
   原则：新组件尽量挂到视图现有类名上；不确定是否仍被使用的样式
   一律保留并 token 化，不删。
   ============================================================ */

/* ============ 1. 基础 / 重置 / 外壳 ============ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  background:var(--bg-0);
  color:var(--text-1);
  font-size:var(--fs-body);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 8%, color-mix(in srgb,var(--purple) 12%, transparent), transparent 45%),
    radial-gradient(ellipse at 88% 92%, color-mix(in srgb,var(--cyan) 9%, transparent), transparent 40%);
}
a,button,input,textarea{touch-action:manipulation}
button{font:inherit;min-height:var(--tap-min)}
button,input{font:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible,[role=button]:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;
}

/* 桌面端：居中手机预览外壳 */
.phone{
  position:relative;width:100%;height:100%;
  max-width:var(--phone-w);max-height:100%;
  background:var(--bg-0);
  overflow:clip;
}
@media(min-width:480px){
  .phone{
    height:min(900px,94dvh,var(--p5-height,100dvh));
    border-radius:28px;border:1px solid var(--border);
  }
}
@media(max-height:500px){
  .phone{border-radius:0;height:var(--p5-height,100dvh)}
}
.phone::before{
  content:'';position:absolute;top:-160px;left:-60px;right:-60px;height:420px;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--pink) 30%, transparent), transparent 75%);
}
.phone::after{
  content:'';position:absolute;bottom:-180px;left:-40px;right:-40px;height:420px;pointer-events:none;opacity:.35;
  background:radial-gradient(closest-side, color-mix(in srgb,var(--cyan) 20%, transparent), transparent 75%);
}

/* 页面（.screen.active 时显示） */
.screen{
  position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;z-index:1;
  padding:calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 92px);
  overscroll-behavior:contain;scroll-padding-bottom:28px;
  scrollbar-width:thin;scrollbar-color:var(--border-hi) transparent;
}
.screen.active{display:flex}
.screen>*{flex-shrink:0}
.screen > *{flex-shrink:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 底部弹层 sheet（openSheet 共用 #sheet） */
.sheet{
  position:absolute;inset:0;z-index:10;display:none;flex-direction:column;overflow-y:auto;
  background:var(--bg-0);
  padding:calc(var(--safe-top) + 16px) 22px calc(var(--safe-bottom) + 22px);
  overscroll-behavior:contain;scroll-padding-bottom:28px;
  scrollbar-width:thin;scrollbar-color:var(--border-hi) transparent;
}
.sheet>*{flex-shrink:0}
.sheet.open{display:flex;animation:slideIn 240ms var(--ease-out)}
.sheet:focus{outline:none}
.sheet .btn,.sheet .opt{flex-shrink:0}
@keyframes slideIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* 分步流程 */
.step{display:none;flex-direction:column;flex:1}
.step.on{display:flex}
.step .q{overflow-wrap:anywhere}

/* ============ 2. 导航：底栏 tabbar + sheet 头部 ============ */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;gap:4px;
  padding:8px 10px calc(var(--safe-bottom) + 10px);
  background:color-mix(in srgb,var(--bg-0) 95%, transparent);
  border-top:1px solid var(--border);
  backdrop-filter:blur(16px);
}
.tab{
  flex:1;background:none;border:none;color:var(--text-3);font-family:inherit;font-size:12px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0;border-radius:var(--r-lg);cursor:pointer;
}
.tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.8}
.tab.active{color:var(--pink);background:color-mix(in srgb,var(--pink) 9%, transparent)}

.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.back{
  flex:none;width:var(--tap-min);height:var(--tap-min);min-width:var(--tap-min);border-radius:var(--r-lg);
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);
}
.back svg{width:19px;height:19px;stroke:var(--text-1);fill:none;stroke-width:2.2}
.back:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sheet-title{font-size:20px;font-weight:800;line-height:1.4}
.sheet-sub{font-size:13px;color:var(--text-3);line-height:1.6;margin-top:3px}

/* 通用文本小元素 */
.cat{font-size:12.5px;font-weight:800;letter-spacing:1.5px;color:var(--pink);margin-bottom:11px}
.sec-t{
  font-size:16px;font-weight:800;color:var(--text-1);margin:24px 0 13px;
  display:flex;align-items:center;justify-content:space-between;
}
.sec-t .more{font-size:12px;color:var(--cyan);font-weight:600}
.hello{font-size:13px;color:var(--text-2);margin-bottom:4px}
.brand{font-size:30px;font-weight:900;letter-spacing:-.7px;margin-bottom:20px}
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-full);
  border:1px solid var(--border-hi);background:var(--surface-2);
  font-size:12.5px;font-weight:500;color:var(--cyan);margin-bottom:14px;
}
.hint,.test-note{margin-top:auto;padding-top:18px;text-align:center;font-size:13px;line-height:1.8;color:var(--text-3)}

/* ============ 3. 按钮 ============ */
.btn{
  display:block;width:100%;
  min-height:48px;padding:13px 18px;margin-top:12px;border:1px solid transparent;border-radius:var(--r-xl);cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:750;letter-spacing:.02em;
  color:var(--ink-on-brand);background:var(--grad-button);
  box-shadow:0 6px 20px #b537f21c;
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast);
}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn.ghost{background:var(--surface);color:var(--text-2);border-color:var(--border);box-shadow:none;font-weight:600}
.btn.small{font-size:14px;padding:11px 14px;min-height:44px}
.btn.danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}
button:disabled{opacity:.5;cursor:default;pointer-events:none}

/* ============ 4. 卡片 ============ */
.hero-card{
  border-radius:24px;padding:22px;position:relative;overflow:hidden;cursor:pointer;text-align:left;width:100%;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb,var(--pink) 22%, transparent), transparent 55%),
    linear-gradient(145deg,var(--surface-2),var(--surface));
  border:1px solid var(--border-hi);box-shadow:var(--shadow);
}
.hero-card .hc-tag{font-size:11.5px;font-weight:700;letter-spacing:1px;color:#ffd0e8;margin-bottom:10px}
.hero-card .hc-q{font-size:20px;font-weight:900;line-height:1.35;margin-bottom:16px;color:var(--text-1)}
.hero-card .hc-go{
  display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--bg-0);
  background:#fff;border-radius:var(--r-full);padding:9px 16px;
}
.mini-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px}
.mini-card{
  flex:none;width:152px;border-radius:var(--r-xl);padding:16px 14px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.mini-card .mc-i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin:0 0 10px;background:var(--grad-button)}
.mini-card .mc-i svg{width:21px;height:21px;stroke:var(--ink-on-brand);fill:none;stroke-width:2}
.mini-card .mc-n{font-size:14.5px;font-weight:800;display:block;color:var(--text-1)}
.mini-card .mc-d{font-size:11.5px;color:var(--text-3);margin-top:3px;display:block}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.play-item{
  border-radius:20px;padding:20px 12px;cursor:pointer;text-align:center;background:var(--surface);
  border:1px solid var(--border);font-family:inherit;color:var(--text-1);position:relative;min-width:0;
  display:flex;flex-direction:column;align-items:center;width:100%;
}
.play-item .pi-i{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin:0 0 12px;background:var(--grad-button);box-shadow:0 5px 18px #b537f218}
.play-item .pi-i svg{width:23px;height:23px;stroke:var(--ink-on-brand);fill:none;stroke-width:2}
.play-item .pi-n{font-size:16px;font-weight:800;line-height:1.45;display:block}
.play-item .pi-d{font-size:13px;color:var(--text-2);margin-top:4px;line-height:1.65;display:block;overflow-wrap:anywhere}
.pi-d{overflow-wrap:anywhere}
.play-item .pi-time{
  position:static;order:3;margin-top:10px;white-space:nowrap;font-size:12px;color:var(--text-2);
  border:1px solid var(--border);background:var(--surface-2);border-radius:var(--r-full);padding:2px 8px;
}
.play-item .pi-soon{position:absolute;top:14px;right:14px;font-size:10px;color:var(--text-3);border:1px solid var(--border);border-radius:var(--r-full);padding:2px 8px;background:color-mix(in srgb,var(--surface) 60%, transparent)}
.play-item:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* 玩法分类卡 */
.category-page-title,.category-title{font-size:30px;line-height:1.25;letter-spacing:-.7px;margin:8px 0 10px}
.category-intro{font-size:14px;color:var(--text-2);line-height:1.65;margin:0 0 22px}
.category-list{display:grid;gap:16px}
.category-card{
  display:flex;flex-direction:column;text-align:left;padding:22px;width:100%;border-radius:22px;color:var(--text-1);
  border:1px solid var(--border);
  background:linear-gradient(120deg, color-mix(in srgb,var(--category-color,var(--purple)) 8%, var(--surface)), var(--surface));
  position:relative;overflow:hidden;cursor:pointer;font-family:inherit;
}
.category-card:active{transform:scale(.99)}
.category-top{display:flex;align-items:center;width:100%;gap:10px;margin-bottom:16px}
.category-icon{
  display:inline-flex;align-items:center;justify-content:center;color:var(--category-color,var(--purple));
  background:color-mix(in srgb,var(--category-color,var(--purple)) 12%, transparent);
  border-radius:15px;padding:10px;
}
.category-icon svg{stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.category-kind{font-size:12px;letter-spacing:.06em;color:var(--text-2)}
.category-arrow{margin-left:auto;font-size:24px;color:var(--category-color,var(--purple))}
.category-name{font-size:28px;font-weight:850;line-height:1.2;margin-bottom:8px}
.category-desc{font-size:14px;color:var(--text-2);line-height:1.6}
.category-bottom{margin-top:18px;font-size:13px;color:var(--text-2)}
.category-heading{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.category-title:focus{outline:none}
.category-empty{border:1px solid var(--border);border-radius:24px;padding:28px 20px;text-align:center;background:var(--surface)}
.category-empty .category-icon{margin-bottom:20px}
.category-empty h2{font-size:21px;line-height:1.5;margin-bottom:12px;color:var(--text-1)}
.category-empty p{font-size:14px;line-height:1.8;color:var(--text-2)}

/* 游戏卡 / 社交英雄卡 */
.game-card{
  padding:20px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface);margin:16px 0;overflow-wrap:anywhere;
}
.game-card h2{font-size:25px;line-height:1.5;margin:10px 0 18px;color:var(--text-1)}
.game-card p{line-height:1.75;color:var(--text-2);font-size:15px}
.social-hero{
  text-align:center;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb,var(--purple) 20%, transparent), transparent 70%), var(--surface);
  padding:28px 20px;
}
.social-emblem{
  width:76px;height:76px;border-radius:26px;display:grid;place-items:center;margin:4px auto 20px;
  background:var(--grad-brand);color:#fff;box-shadow:0 8px 30px color-mix(in srgb,var(--pink) 20%, transparent);
}
.social-big{display:block;font-size:64px;color:var(--accent);line-height:1.2}
.social-hero h2{font-size:27px}
.social-hero p{line-height:1.8;color:var(--text-2)}
.social-details{margin:20px 0}
.social-details summary{padding:14px 4px;font-size:15px;color:var(--text-2);cursor:pointer}
.completion-banner,.board-period{
  padding:15px;border:1px solid var(--border-hi);border-radius:16px;
  background:var(--surface-2);color:var(--text-2);font-size:13px;line-height:1.7;
}
.social-standing{margin:0 0 22px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--border-hi)}
.social-standing-grid{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:8px}
.social-standing-grid small{display:block;font-size:11px;line-height:1.5;color:var(--text-2)}
.social-standing-grid strong{display:block;font-size:25px;color:var(--accent);margin-top:4px}
.social-standing-grid .btn{font-size:12px;padding:8px 10px;margin:0;min-height:40px}
.social-standing .ranking-status,.social-standing .game-note{font-size:11px;margin:6px 0 0;line-height:1.5}

/* 群 / 房间卡 */
.group-item{
  display:flex;align-items:center;gap:13px;padding:18px;border-radius:17px;margin-bottom:11px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);
}
.group-item .g-ava{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--ink-on-brand);background:linear-gradient(135deg,#43d9ff,#7c8bff)}
.group-item .g-m{flex:1;min-width:0}
.group-item .g-n{font-size:15.5px;font-weight:800;display:block;color:var(--text-1)}
.group-item .g-x{font-size:13px;color:var(--text-2);margin-top:3px;display:block}
.group-item .g-go{color:var(--text-3);font-size:18px}
.group-list{margin-top:2px}
.group-new{
  display:flex;align-items:center;gap:9px;width:100%;min-height:50px;padding:12px 14px;margin-bottom:16px;
  border-radius:15px;border:1px dashed var(--border-hi);background:transparent;color:var(--accent);
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;text-align:left;
}
.group-new:active{transform:scale(.99)}
#screen-group .group-brand{font-size:26px;margin:2px 0 14px}
.group-empty{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px 4px;gap:6px}
.group-empty .ge-mark{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;
  color:var(--accent);background:color-mix(in srgb,var(--purple) 14%, var(--surface));border:1px solid var(--border);
}
.group-empty h2{font-size:23px;font-weight:850;margin:4px 0;color:var(--text-1)}
.group-empty h2:empty{display:none}
.group-empty p{font-size:14px;line-height:1.65;color:var(--text-2);margin:0 0 18px;max-width:90%}
.group-empty .btn{width:100%;margin-top:6px}
.ge-steps{width:100%;display:flex;flex-direction:column;gap:10px;margin:0 0 22px;text-align:left}
.ge-steps>div{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:15px;background:var(--surface);border:1px solid var(--border)}
.ge-steps b{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--grad-button);color:#fff;font-size:14px;font-weight:800}
.ge-steps span{font-size:14px;color:var(--text-1)}
.group-hint{margin-top:4px;padding:14px 16px;border-radius:15px;background:var(--surface);border:1px solid var(--border);font-size:13px;line-height:1.6;color:var(--text-2)}

/* 房间详情 */
.room-summary{
  padding:20px;margin-bottom:20px;border-radius:22px;border:1px solid var(--border-hi);
  background:radial-gradient(ellipse at top, color-mix(in srgb,var(--purple) 15%, transparent), transparent), var(--surface);
  text-align:center;
}
.room-summary h2{font-size:26px;margin:12px 0;color:var(--text-1)}
.room-summary p{font-size:14px;color:var(--text-2)}
.room-summary progress{width:100%;accent-color:var(--pink);height:8px}
.room-state{font-size:12px;color:var(--cyan)}
.room-member-list{display:grid;gap:10px;margin:14px 0}
.room-member{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.room-member b{font-size:14px;flex:1;color:var(--text-1)}
.room-member small{font-size:12px;color:var(--cyan)}

/* 邀请 / 继续上一局 卡 */
.resume-card{
  display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:13px 14px;
  font-family:inherit;text-align:left;cursor:pointer;border-radius:18px;
  border:1px solid var(--border-hi);
  background:linear-gradient(120deg, color-mix(in srgb,var(--purple) 12%, var(--surface-2)), var(--surface));
  box-shadow:var(--shadow);color:var(--text-1);transition:transform var(--t-fast);
}
.resume-card:active{transform:scale(.985)}
.resume-card .rc-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--grad-button);color:#fff;box-shadow:0 6px 16px #b537f240}
.resume-card .rc-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.resume-card .rc-t{font-size:15px;font-weight:800;color:var(--text-1)}
.resume-card .rc-s{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-card .rc-go{display:flex;flex:0 0 auto;color:var(--text-3)}

/* 我的排名卡 / 资产 */
.mrank{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-radius:18px;padding:16px 18px;margin:2px 0 14px;cursor:pointer;font-family:inherit;color:var(--text-1);text-align:left;
  background:linear-gradient(120deg, color-mix(in srgb,var(--pink) 12%, transparent), color-mix(in srgb,var(--cyan) 8%, var(--surface)));
  border:1px solid color-mix(in srgb,var(--pink) 32%, var(--border));
}
.mrank-l{display:flex;align-items:center;gap:12px}
.mrank-rk{font-size:24px;font-weight:900;color:var(--cyan);min-width:50px}
.mrank-t{font-size:14.5px;font-weight:800}
.mrank-gap{font-size:11px;color:var(--text-3);margin-top:3px;font-weight:500}
.mrank-pt{font-size:19px;font-weight:900;color:var(--cyan)}

/* 收集卡（我的卡册/历史） */
.collection-list{display:flex;flex-direction:column;gap:12px}
.collection-item{
  display:flex;gap:14px;align-items:center;padding:18px 14px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-1);
  width:100%;font:inherit;text-align:left;cursor:pointer;
}
.collection-item>span:nth-child(2){flex:1;min-width:0}
.collection-item b{display:block;font-size:17px;margin-bottom:7px}
.collection-item small{display:block;color:var(--text-3);font-size:11px;margin-bottom:8px}
.collection-item span span{font-size:13px;color:var(--text-2);line-height:1.65}
.collection-icon{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:15px;background:var(--surface-2);color:var(--accent)}

/* ============ 5. 列表与行 ============ */
.list-item{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border-bottom:1px solid var(--border);font-size:14.5px;cursor:pointer;color:var(--text-1)}
.list-item .li-r{color:var(--text-3);font-size:13px}

.set-row{
  display:flex;align-items:center;gap:13px;width:100%;min-height:64px;padding:14px 15px;margin:6px 0;
  border-radius:14px;cursor:pointer;background:var(--surface);border:1px solid var(--border);
  font-family:inherit;color:var(--text-1);text-align:left;
}
.set-row .sr-i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:var(--surface-2);flex:none}
.set-row .sr-t{flex:1;font-size:15px;font-weight:700}
.set-row .sr-r{font-size:13px;color:var(--text-3);text-align:right}
.set-row.muted{opacity:1;color:var(--text-3)}
.set-group-t{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--text-3);margin-top:26px}
.set-entry{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:17px 16px;margin-top:16px;border-radius:16px;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);
}
.set-go{color:var(--text-3);font-size:20px}

.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 4px}
.menu-entry{
  display:flex;align-items:center;gap:11px;padding:18px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--border);
  font-family:inherit;color:var(--text-1);cursor:pointer;text-align:left;width:100%;min-width:0;
}
.menu-entry .me-i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none;background:var(--surface-2)}
.menu-entry .me-t{font-size:14px;font-weight:800;display:block}
.menu-entry .me-s{font-size:12px;color:var(--text-2);margin-top:2px;display:block;line-height:1.5}
.menu-entry>span{min-width:0}
.me-list{display:flex;flex-direction:column;gap:9px;margin:4px 0 10px}
.me-list .me-row{margin:0}
.me-list .sr-t{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;line-height:1.35}
.me-list .sr-t small{font-size:11px;color:var(--text-3);font-weight:400;overflow-wrap:anywhere}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:6px}
.stat-c{border-radius:16px;padding:16px 10px;text-align:center;background:var(--surface);border:1px solid var(--border)}
.stat-c .s-v{font-size:23px;font-weight:900;color:var(--text-1)}
.stat-c .s-l{font-size:12px;color:var(--text-2);margin-top:4px;line-height:1.5}

/* 成员 chips */
.members{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.member{display:flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text-1)}
.member .ma{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink-on-brand);background:var(--grad-button)}
.avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:var(--ink-on-brand);font-size:15px;background:var(--grad-button)}

/* 排行榜（旧 lb-* 与新 ranking-* 并存，均保留） */
.lb-podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:18px 0 24px}
.lb-slot{display:flex;flex-direction:column;align-items:center;gap:7px}
.lb-slot .medal{font-size:26px}
.lb-slot .pa{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-weight:900;color:var(--ink-on-brand);font-size:19px;background:var(--grad-button)}
.lb-slot .pn{font-size:12.5px;font-weight:700;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-1)}
.lb-slot .pp{font-size:11.5px;color:var(--cyan);font-weight:700}
.lb-slot.first .pa{width:64px;height:64px;font-size:22px;box-shadow:var(--glow-gold)}
.lb-slot.first{order:2}.lb-slot.second{order:1}.lb-slot.third{order:3}
.lb-row{display:flex;align-items:center;gap:11px;padding:11px 8px;border-bottom:1px solid var(--border)}
.lb-row .rk{flex:none;width:26px;text-align:center;font-size:14px;font-weight:800;color:var(--text-3)}
.lb-row .pa2{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:900;color:var(--ink-on-brand);font-size:14px;flex:none;background:var(--grad-button)}
.lb-row .nm{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-1)}
.lb-row .pt{font-size:13.5px;font-weight:800;color:var(--cyan)}
.lb-row.isme{background:color-mix(in srgb,var(--pink) 10%, var(--surface));border-radius:12px;border-bottom:none}
.lb-me-bar{
  position:sticky;bottom:-22px;margin:16px -22px -22px;padding:14px 22px calc(14px + var(--safe-bottom));
  background:color-mix(in srgb,var(--bg-0) 70%, transparent);border-top:1px solid var(--border);
  display:flex;align-items:center;gap:11px;backdrop-filter:blur(10px);
}
.lb-me-bar .rk{font-size:16px;font-weight:900;color:var(--gold);flex:none}
.lb-me-bar .nm{flex:1;font-size:13.5px;font-weight:700;color:var(--text-1)}
.lb-me-bar .pt{font-size:14px;font-weight:900;color:var(--cyan)}
.lb-count{font-size:12px;color:var(--text-2);text-align:center;margin-bottom:8px;font-weight:600}

/* 周榜盒（首页） */
.hb-box{border-radius:18px;background:var(--surface);border:1px solid var(--border);padding:5px 13px;margin-bottom:6px}
.hb-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--text-1) 5%, transparent)}
.hb-row:last-child{border-bottom:none}
.hb-rk{flex:none;width:20px;text-align:center;font-size:13px;font-weight:800;color:var(--text-3)}
.hb-nm{flex:1;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-1)}
.hb-pt{font-size:13px;font-weight:800;color:var(--cyan)}
.hb-row.isme .hb-nm{color:var(--pink)}

/* 历史周 / 榜行（设计稿结构，挂到现有 week-card / board-row 上） */
.week-card{margin:12px 0}
.week-card b{font-size:20px}
.ranking-wrap{min-width:0;display:flex;flex-direction:column}
.ranking-wrap>.play-item{flex:1;width:100%}
.ranking-card-button{
  font:inherit;font-size:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--accent);
  padding:10px;margin-top:6px;min-height:44px;cursor:pointer;
}

/* ============ 6. 表单 ============ */
.flabel{display:block;font-size:14px;font-weight:700;color:var(--text-2);margin:14px 0 7px;line-height:1.5}
.nickin{
  width:100%;padding:15px;border-radius:14px;background:var(--surface);border:1px solid var(--border);
  color:var(--text-1);font-family:inherit;font-size:16px;min-height:50px;margin-bottom:8px;
}
.nickin::placeholder{color:var(--text-3)}
.nickin:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 15%, transparent)}
.game-link{width:100%;color:var(--text-1);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;font:inherit;min-height:50px;resize:vertical}

/* 账号卡片 / 社交登录 */
.account-card{
  display:flex;align-items:center;gap:13px;border-radius:18px;padding:16px;margin:2px 0 6px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--pink) 15%, transparent), color-mix(in srgb,var(--cyan) 10%, var(--surface)));
  border:1px solid color-mix(in srgb,var(--pink) 35%, var(--border));
}
.account-card .ac-i{font-size:26px;flex:none}
.account-card .ac-t{font-size:15px;font-weight:800;word-break:break-all;color:var(--text-1)}
.account-card .ac-s{font-size:11.5px;color:var(--text-3);margin-top:3px;line-height:1.4}
.ac-card{background:var(--surface);border:1px solid var(--border);color:var(--text-1)}
.ac-btns{display:flex;gap:10px;margin-bottom:4px}
.ac-btns .btn{flex:1;margin-top:10px}
#acLogout{margin:10px 0 4px}
.auth-switch{
  border:1px solid var(--border);background:var(--surface);color:var(--text-1);
  padding:14px;border-radius:18px;margin:12px 0;min-height:48px;width:100%;font:inherit;text-align:center;cursor:pointer;
}
.auth-social{display:flex;gap:12px;justify-content:center;margin-top:18px}
.as-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:900;color:var(--bg-0);background:#fff;font-size:15px}
.as-btn.disabled{background:var(--surface-2);color:var(--text-3)}
.auth-error{color:var(--danger);font-size:14px;line-height:1.6}
.auth-error:empty{display:none}
.auth-page{flex:0 0 auto}
.auth-page .test-note{padding:14px;border-radius:14px;background:var(--surface-2);margin-top:14px}
.password-toggle{
  align-self:flex-end;border:0;background:none;color:var(--accent);
  min-height:36px;font-size:13px;margin-top:-8px;margin-bottom:12px;cursor:pointer;
}
.recovery-page{padding:14px 0}
.recovery-page .hint{margin-top:0;text-align:left;padding:20px;background:var(--surface);border:1px solid var(--border-hi);border-radius:18px}
.recovery-page .btn{margin-top:16px}

/* 表单页头（登录/注册/找回） */
.form-hero{text-align:center;padding:14px 0 22px}
.form-hero>div:first-child{margin-inline:auto}
.form-hero h1{font-size:27px;margin:12px 0;color:var(--text-1)}
.form-hero h2{font-size:23px;margin:16px 0 8px;color:var(--text-1)}
.form-hero p{font-size:14px;color:var(--text-2);line-height:1.7}

/* 头像选择 / 上传 */
.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:8px 0 6px}
.avatar-pick{aspect-ratio:1;border-radius:16px;display:grid;place-items:center;cursor:pointer;border:2px solid transparent;background:var(--surface)}
.avatar-pick.sel{border-color:var(--pink);box-shadow:0 0 18px color-mix(in srgb,var(--pink) 35%, transparent)}
.ava-up{display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 2px 10px}
.ava-up-preview{width:132px;height:132px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface-2);border:2px solid var(--border);flex:none}
.ava-up-preview img{width:100%;height:100%;object-fit:cover;display:block}
.ava-up-preview span{font-size:48px;font-weight:900;color:var(--ink-on-brand);width:100%;height:100%;display:grid;place-items:center;background:var(--grad-cyan)}
.ava-up-hint{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-3);text-align:center}
.ava-up .btn{width:100%}
.ava-img{background:var(--surface-2)}

/* 主题切换 */
.theme-options{display:grid;gap:12px}
.theme-option{
  display:flex;align-items:center;gap:14px;text-align:left;padding:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;color:var(--text-1);font:inherit;cursor:pointer;
}
.theme-option[aria-pressed=true]{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.theme-swatch{width:52px;height:42px;flex-shrink:0;border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg,var(--surface-3),var(--bg-0))}
.theme-swatch.light{background:linear-gradient(135deg,#eee8f8,#fff)}
.theme-swatch.system{background:linear-gradient(120deg,#eee8f8 50%,var(--surface) 50%)}
.theme-check{margin-left:auto;color:var(--pink);visibility:hidden}
.theme-option[aria-pressed=true] .theme-check{visibility:visible}

.about-card{border-radius:18px;padding:22px;background:var(--surface);border:1px solid var(--border);font-size:13.5px;line-height:1.8;color:var(--text-2)}

/* ============ 7. 题干 / 作答 / 结果 ============ */
.q{font-size:clamp(23px,6vw,30px);font-weight:900;line-height:1.5;letter-spacing:-.5px;margin-bottom:22px;color:var(--text-1);overflow-wrap:anywhere}
.opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:17px 15px;min-height:68px;
  border-radius:16px;cursor:pointer;background:var(--surface);border:1px solid var(--border);
  transition:transform var(--t-fast),border-color var(--t-base),background var(--t-base);
  color:var(--text-1);font-family:inherit;
}
.opt:active{transform:scale(.98)}
.opt .badge{
  flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:15px;
  background:var(--surface-2);color:var(--accent);border:1px solid var(--border);
}
.opt .ot{font-size:16px;font-weight:500;line-height:1.55}
.opt.sel{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 8%, var(--surface));box-shadow:0 0 0 1px var(--pink)}
.opt.sel .badge{background:var(--grad-button);color:#fff}

/* 进度条（投票/对决结果） */
.bar-row{
  position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:14px;isolation:isolate;
  padding:16px 14px;margin:10px 0;min-height:60px;border:1px solid var(--border);border-radius:16px;overflow:hidden;
  background:var(--surface);
}
.bar-row .bar-track{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:transparent;z-index:-1}
.bar-row .bar-fill{height:100%;border-radius:0;background:color-mix(in srgb,var(--purple) 17%, transparent);box-shadow:none}
.bar-row .bar-label{width:auto;flex:1;margin:0;font-size:15px;line-height:1.55;color:var(--text-1)}
.bar-row .bar-pct{font-size:16px;flex-shrink:0;color:var(--cyan);font-variant-numeric:tabular-nums}
.bar-row.bar-mine{border-color:var(--pink)}
.bar-row .bar-fill.you{background:color-mix(in srgb,var(--pink) 16%, transparent)}
.bar-track{flex:1;height:22px;border-radius:8px;background:var(--surface-3);overflow:hidden}
.bar-fill{display:block;height:100%;width:0;border-radius:8px;transition:width 1s var(--ease);background:var(--border-hi)}
.bar-fill.you{background:var(--grad-brand);box-shadow:none}
.bar-label{flex:none;width:78px;font-size:14px;color:var(--text-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-pct{flex:none;width:44px;text-align:right;font-size:14px;font-weight:700;color:var(--text-1);font-variant-numeric:tabular-nums}
.choice-label{color:var(--cyan);font-size:12px}

/* 游戏状态 / 说明 / 回合 */
.game-status{
  padding:12px 14px;border:1px solid var(--border);border-radius:14px;color:var(--text-2);
  background:var(--surface-2);font-size:14px;line-height:1.7;margin-bottom:14px;overflow-wrap:anywhere;
}
.game-note{font-size:14px;color:var(--text-2);line-height:1.7;margin:10px 0;overflow-wrap:anywhere}
.game-progress{width:100%;height:6px;accent-color:var(--purple);margin:10px 0 16px;flex:none;border-radius:6px;overflow:hidden}
.game-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.game-actions .btn{flex:1;min-width:120px;margin:0}
.game-result-block{padding:16px 0;border-bottom:1px solid var(--border);margin:14px 0}
.game-result-block h3{font-size:18px;line-height:1.6;margin:0 0 12px;color:var(--text-1)}
.game-turn{border-left:2px solid var(--purple);padding:10px 14px;margin:10px 0;background:var(--surface);border-radius:0 12px 12px 0}
.game-turn p{margin-top:7px;line-height:1.7;color:var(--text-2)}
.game-choice:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* 环形大分 */
.ring{
  flex:none;align-self:center;width:176px;height:176px;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;margin:4px 0 24px;position:relative;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--purple) 18%, transparent), transparent 70%);
}
.ring::before{
  content:'';position:absolute;inset:0;border-radius:50%;padding:3px;
  background:linear-gradient(135deg,var(--pink),var(--purple),var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.ring .rk{font-size:11.5px;letter-spacing:1px;color:var(--text-2);font-weight:600}
.ring .big{font-size:48px;font-weight:900;line-height:1;background:linear-gradient(90deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.ring .rs{font-size:12.5px;color:var(--text-3)}

/* 判定英雄 / 奖励 / 卡册 */
.verdict-hero{
  border-radius:22px;padding:24px;text-align:center;margin:2px 0 18px;position:relative;overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pink) 20%, transparent), color-mix(in srgb,var(--cyan) 12%, var(--surface)));
  border:1px solid color-mix(in srgb,var(--text-1) 14%, var(--border));
}
.verdict-hero .vl{font-size:11px;letter-spacing:1.5px;color:var(--cyan);font-weight:700}
.verdict-hero .vv{font-size:27px;font-weight:900;margin:10px 0 4px;line-height:1.25;color:var(--text-1)}
.verdict-hero .vs{font-size:12px;color:var(--text-3)}
.rw-counters{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:6px 0 16px}
.rw-c{border-radius:16px;padding:18px;text-align:center;background:var(--surface);border:1px solid var(--border)}
.rw-c .v{font-size:28px;font-weight:900;color:var(--text-1)}
.rw-c .l{font-size:11.5px;color:var(--text-2);margin-top:4px}
.chest-btn{
  position:relative;border-radius:22px;padding:34px 20px;text-align:center;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--gold) 40%, var(--border));
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb,var(--gold) 22%, transparent), color-mix(in srgb,var(--cyan) 10%, var(--surface)));
  margin:8px 0 10px;
}
.chest-btn .cg{font-size:58px;display:block;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.chest-btn .ct{font-size:17px;font-weight:900;margin-top:12px;color:var(--text-1)}
.chest-btn .cs{font-size:12px;color:var(--text-3);margin-top:5px}
.chest-btn.disabled{opacity:.5;filter:grayscale(.6)}
.overlay{position:absolute;inset:0;z-index:40;display:none;align-items:center;justify-content:center;flex-direction:column;background:var(--overlay);backdrop-filter:blur(6px);padding:24px}
.overlay.show{display:flex}
.chest-anim{font-size:96px;animation:shake 1s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(1.06)}40%{transform:rotate(10deg) scale(1.1)}60%{transform:rotate(-8deg) scale(1.12)}80%{transform:rotate(6deg) scale(1.06)}}
.flash{position:absolute;inset:0;background:radial-gradient(circle, color-mix(in srgb,var(--text-1) 92%, transparent), transparent 70%);opacity:0}
.flash.go{animation:flashgo .8s ease}
@keyframes flashgo{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
.prize-card{
  border-radius:22px;padding:30px 26px;text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 16%, transparent), color-mix(in srgb,var(--purple) 12%, var(--surface)));
  border:1px solid color-mix(in srgb,var(--gold) 45%, var(--border));max-width:300px;
}
.prize-card .pg{font-size:60px}
.prize-card .pt{font-size:21px;font-weight:900;margin:12px 0 6px;color:var(--text-1)}
.prize-card .ps{font-size:12.5px;color:var(--text-3)}
.album{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dcard{
  border-radius:18px;padding:18px 15px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pink) 14%, transparent), color-mix(in srgb,var(--cyan) 10%, var(--surface)));
  border:1px solid var(--border);
}
.dcard .dl{font-size:10.5px;color:var(--cyan);font-weight:700;letter-spacing:1px}
.dcard .dv{font-size:17px;font-weight:900;margin:9px 0 7px;line-height:1.3;color:var(--text-1)}
.dcard .dpick{font-size:11px;color:var(--text-3)}
.dcard.today{border-color:color-mix(in srgb,var(--gold) 50%, var(--border));box-shadow:0 0 24px color-mix(in srgb,var(--gold) 18%, transparent)}
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.bcell{border-radius:16px;padding:16px 8px;text-align:center;background:var(--surface);border:1px solid var(--border)}
.bcell .bg{font-size:30px;display:block}
.bcell .bn{font-size:12px;font-weight:800;margin-top:8px;line-height:1.25;color:var(--text-1)}
.bcell .bd{font-size:10.5px;color:var(--text-3);margin-top:4px;line-height:1.35}
.bcell.lock{opacity:.7;filter:grayscale(1)}
.bcell.r2{border-color:color-mix(in srgb,#7c8bff 40%, var(--border))}
.bcell.r3{border-color:color-mix(in srgb,var(--gold) 50%, var(--border));box-shadow:0 0 18px color-mix(in srgb,var(--gold) 14%, transparent)}
.chem-card{border-radius:18px;padding:18px;margin:4px 0 8px;background:var(--surface);border:1px solid var(--border)}
.chem-cp{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.chem-cp .pa{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:900;color:var(--ink-on-brand);background:var(--grad-button)}
.chem-cp .t{font-size:14px;font-weight:800;color:var(--text-1)}
.chem-cp .s{font-size:11.5px;color:var(--text-3)}
.chem-line{font-size:12.5px;color:var(--text-2);padding:4px 0}
.gains-bar{text-align:center;color:var(--cyan);font-weight:800;font-size:13.5px;margin-bottom:14px}

/* 规则 / 赔率 */
.rules-card{border-radius:18px;background:color-mix(in srgb,var(--text-1) 4%, var(--surface));border:1px solid var(--border);padding:15px 15px 13px;margin-bottom:14px}
.rules-h{font-size:13px;font-weight:800;margin-bottom:12px;color:var(--text-1)}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.rule-c{border-radius:13px;background:color-mix(in srgb,var(--text-1) 4%, var(--surface));border:1px solid color-mix(in srgb,var(--text-1) 6%, var(--border));padding:11px 5px;text-align:center}
.rule-c .rc-i{font-size:18px;display:block}
.rule-c .rc-t{font-size:10.5px;color:var(--text-2);margin-top:5px;font-weight:600;line-height:1.25;min-height:26px}
.rule-c .rc-v{font-size:13px;font-weight:900;color:var(--cyan);margin-top:3px;display:block}
.rules-note{font-size:11px;color:var(--text-3);margin-top:11px;text-align:center;line-height:1.4}
.rw-note{font-size:12px;color:var(--text-2);background:color-mix(in srgb,var(--cyan) 7%, var(--surface));border:1px solid color-mix(in srgb,var(--cyan) 20%, var(--border));border-radius:13px;padding:11px 13px;margin:0 0 12px;line-height:1.4}
.odds-box{border-radius:16px;background:var(--surface);border:1px solid var(--border);padding:4px 14px;margin-bottom:6px}
.odd-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--text-1) 5%, transparent);font-size:13px}
.odd-row:last-child{border-bottom:none}
.odd-row .odd-t{flex:1;color:var(--text-2)}
.odd-row .odd-p{font-weight:800;color:var(--cyan)}

/* ============ 8. 榜单（新 ranking-* 体系） ============ */
.ranking-hero{
  position:relative;padding:26px 22px;border:1px solid var(--border);border-radius:28px;
  background:
    radial-gradient(ellipse at 95% 0%, color-mix(in srgb,var(--cyan) 18%, transparent), transparent 65%),
    linear-gradient(140deg, color-mix(in srgb,var(--purple) 28%, var(--surface)), var(--bg-1));
  margin:18px 0 24px;overflow:hidden;
}
.ranking-hero h1{font-size:34px;line-height:1.22;margin:12px 0;letter-spacing:-1px;color:var(--text-1)}
.ranking-hero p{color:var(--text-2);line-height:1.65}
.ranking-kicker{font-size:12px;letter-spacing:2px;color:var(--cyan);font-weight:800}
.ranking-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--text-2);margin:16px 0}
.ranking-meta span{padding:6px 10px;border-radius:var(--r-full);background:color-mix(in srgb,var(--text-1) 5%, transparent)}
.ranking-personal{padding:18px;border:1px solid var(--border);border-radius:20px;margin:16px 0;background:var(--surface)}
.ranking-personal strong{font-size:23px;display:block;margin:6px 0;color:var(--text-1)}
.ranking-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}
.ranking-heading h2{font-size:21px;margin:12px 0;color:var(--text-1)}
.ranking-link{background:none;border:0;color:var(--cyan);padding:10px 0;font:inherit;cursor:pointer;font-size:14px}
.ranking-cats{display:grid;gap:12px}
.ranking-cat{
  width:100%;border:1px solid var(--border);background:linear-gradient(110deg, color-mix(in srgb,var(--tint,var(--purple)) 10%, var(--surface)), var(--surface));
  padding:20px;border-radius:22px;display:flex;gap:16px;align-items:center;color:var(--text-1);text-align:left;font:inherit;cursor:pointer;
}
.ranking-cat b{display:block;font-size:23px;margin-bottom:6px}
.ranking-cat small{color:var(--text-2);line-height:1.5}
.ranking-cat .cat-mark{font-size:30px;width:42px}
.ranking-cat .cat-arrow{margin-left:auto;font-size:24px}
.ranking-status,.ranking-mini,.ranking-rules{color:var(--text-2);font-size:13px;line-height:1.7;margin:14px 0}
.ranking-error{
  background:color-mix(in srgb,var(--warning) 7%, var(--surface));border:1px solid var(--warning);
  color:var(--text-1);border-radius:12px;font-size:14px;border-left:3px solid var(--warning);padding:12px;line-height:1.6;
}
.ranking-empty{text-align:center;padding:30px 16px;border:1px dashed var(--border);border-radius:20px;line-height:1.8;color:var(--text-2);background:var(--surface)}
.ranking-row{display:flex;align-items:center;gap:12px;padding:16px 10px;min-height:70px;border-bottom:1px solid var(--border)}
.ranking-row.mine{background:color-mix(in srgb,var(--purple) 10%, var(--surface));box-shadow:inset 3px 0 var(--purple);border-radius:12px}
.ranking-row .pos{width:38px;color:var(--accent);font-weight:800;flex-shrink:0;font-size:16px}
.ranking-row .who{flex:1;overflow:hidden;text-overflow:ellipsis;line-height:1.5;overflow-wrap:anywhere}
.ranking-row .score{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-1)}
.ranking-row small{font-size:12px;font-weight:400;color:var(--text-3)}
.ranking-row .top{color:var(--gold)}
.ranking-tabs{display:flex;gap:8px;margin:18px 0}
.ranking-tabs button{flex:1}
.ranking-tabs button[aria-pressed=true]{border-color:var(--pink);background:var(--surface-2);color:var(--accent)}
.ranking-game{padding:15px;border:1px solid var(--border);border-radius:18px;margin:12px 0;background:var(--surface)}
.ranking-game h3{margin:0 0 8px;color:var(--text-1)}
.ranking-game .actions{display:flex;gap:8px}
.ranking-game .actions button{flex:1}
.ranking-result{padding:16px;border:1px solid color-mix(in srgb,var(--cyan) 20%, var(--border));border-radius:18px;margin-top:14px;background:var(--surface)}
.ranking-result .btn{margin-top:10px}
.ranking-panel h2{font-size:24px;color:var(--text-1)}
.xp-track{width:100%;height:10px;border-radius:20px;background:var(--surface-3);overflow:hidden;margin:15px 0}
.xp-track i{display:block;height:100%;background:var(--grad-brand)}
.ranking-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:18px 0}
.ranking-levels div{padding:12px 4px;text-align:center;border-radius:12px;background:var(--surface-2);font-size:13px;color:var(--text-1)}
.rank-podium{display:flex;gap:10px;overflow-x:auto;padding:4px 0 16px}
.rank-podium:empty{display:none}
.podium-place{flex:1;min-width:95px;padding:16px 8px;text-align:center;border:1px solid var(--border-hi);border-radius:18px;background:linear-gradient(155deg,var(--surface-2),var(--surface))}
.podium-place>span{display:block;color:var(--gold);margin-bottom:8px}
.podium-place b{font-size:23px;color:var(--accent)}
.podium-place strong{display:block;font-size:13px;overflow-wrap:anywhere;margin:8px 0;color:var(--text-1)}
.podium-place small{font-size:12px;color:var(--text-2)}

/* ============ 9. 社群聊天 ============ */
.comm-mini{padding:15px 16px;border-radius:14px;background:var(--surface);border:1px dashed var(--border);font-size:12.5px;color:var(--text-3);line-height:1.5;margin-bottom:6px}
.comm-ava{background:linear-gradient(135deg, color-mix(in srgb,var(--purple) 25%, transparent), color-mix(in srgb,var(--cyan) 18%, transparent))}
.comm-chat{position:absolute;inset:0;display:flex;flex-direction:column}
.comm-top{
  margin-bottom:0;gap:10px;padding:calc(var(--safe-top) + 14px) 14px 12px;
  border-bottom:1px solid var(--border);background:var(--overlay);flex-shrink:0;display:flex;align-items:center;
}
.comm-title-btn{flex:1;min-width:0;background:none;border:none;text-align:left;cursor:pointer;color:var(--text-1)}
.comm-title-btn .sheet-title{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comm-title-btn .sheet-sub{font-size:11.5px;color:var(--text-3)}
.comm-icon-btn{flex:none;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-1)}
.comm-icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.comm-msgs{flex:1;min-height:0;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column}
.comm-empty{margin:auto;text-align:center;font-size:13px;color:var(--text-3);line-height:1.6;padding:20px}
.bubble-row{display:flex;align-items:flex-end;gap:8px;margin:5px 0}
.bubble-row.me{justify-content:flex-end}
.bubble-ava{flex:none;width:28px;height:28px;border-radius:50%;overflow:hidden}
.bubble-col{display:flex;flex-direction:column;max-width:78%}
.bubble-name{font-size:11px;color:var(--text-3);margin:0 0 3px 4px}
.bubble{padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.b-other{background:var(--surface);border:1px solid var(--border);color:var(--text-1);border-bottom-left-radius:6px}
.b-me{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;border-bottom-right-radius:6px;box-shadow:0 6px 18px color-mix(in srgb,var(--pink) 28%, transparent)}
.comm-game-card{
  display:flex;align-items:center;gap:12px;width:86%;max-width:340px;margin:9px auto;padding:13px 14px;
  border-radius:16px;cursor:pointer;background:linear-gradient(135deg, color-mix(in srgb,var(--purple) 16%, transparent), color-mix(in srgb,var(--cyan) 10%, transparent));
  border:1px solid var(--border);
}
.comm-game-card .cgc-icon{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--cyan)}
.comm-game-card .cgc-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.comm-game-card .cgc-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.comm-game-card .cgc-label{font-size:14px;font-weight:800;color:var(--text-1)}
.comm-game-card .cgc-by{font-size:11px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comm-game-card .cgc-go{flex:none;color:var(--pink);font-size:20px;font-weight:700}
.comm-input-bar{
  flex-shrink:0;display:flex;align-items:center;gap:9px;
  padding:10px 12px calc(var(--safe-bottom) + 10px);
  border-top:1px solid var(--border);background:var(--overlay);
}
.comm-play{color:var(--cyan)}
.comm-input{flex:1;min-width:0;padding:12px 16px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border);color:var(--text-1);font-family:inherit;font-size:14.5px}
.comm-send{flex:none;padding:11px 18px;border:none;border-radius:var(--r-full);cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--purple),var(--pink))}
.comm-invite-card{text-align:center;padding:26px 20px}
.comm-invite-card .cic-mark{
  width:76px;height:76px;margin:6px auto 18px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, color-mix(in srgb,var(--purple) 28%, transparent), color-mix(in srgb,var(--cyan) 18%, transparent));
  border:1px solid var(--border);color:var(--cyan);
}
.comm-invite-card h2{font-size:21px;font-weight:800;margin-bottom:6px;color:var(--text-1)}
.comm-invite-card p{font-size:13px;color:var(--text-3);margin-bottom:22px}
.comm-member-list{display:flex;flex-direction:column}
.comm-member-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border)}
.comm-member-row .cm-ava{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden}
.comm-member-row .cm-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.comm-member-row .cm-name{font-size:14.5px;font-weight:700;color:var(--text-1)}
.comm-member-row .cm-role{font-size:11.5px;color:var(--cyan)}
.comm-game-picker .comm-game-opt{margin-bottom:10px}
.comm-game-opt .opt-ic{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--cyan)}
.comm-game-opt .opt-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.comm-game-opt .ot{flex:1;font-size:14.5px;font-weight:600;color:var(--text-1)}
.comm-game-opt .opt-go{color:var(--text-3);font-size:18px}
.share-card{text-align:left}
.share-card p{font-size:13.5px;color:var(--text-2);margin-bottom:12px}
.share-link{padding:13px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;color:var(--text-2);word-break:break-all;margin-bottom:16px}

/* ============ 10. 我的 / 账号 ============ */
.me-head{
  display:flex;align-items:center;gap:14px;margin:6px 0 20px;padding:20px;
  background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:22px;
}
.me-title .lv{font-size:11px;font-weight:800;color:#fff;background:var(--grad-button);padding:2px 9px;border-radius:var(--r-full);margin-right:7px}
.me-title{min-width:0;overflow-wrap:anywhere}
.me-title .nm{font-size:22px;font-weight:900;color:var(--text-1)}
.me-title .tt{font-size:13px;color:var(--cyan);font-weight:700;margin-top:3px}
.streak-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--warning);background:color-mix(in srgb,var(--warning) 12%, transparent);border:1px solid color-mix(in srgb,var(--warning) 35%, transparent);padding:5px 11px;border-radius:var(--r-full);margin:0 0 14px}

/* ============ 11. 状态反馈（toast / 弹层 / 空/错/加载） ============ */
.toast{
  position:absolute;left:50%;bottom:calc(95px + var(--safe-bottom));transform:translateX(-50%) translateY(20px);
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(160deg,var(--surface-3),var(--surface));border:1px solid var(--border-hi);
  padding:13px 20px;border-radius:18px;box-shadow:var(--shadow);
  font-size:14px;opacity:0;pointer-events:none;z-index:30;transition:var(--t-base);max-width:90%;white-space:normal;text-align:left;
}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast>span:nth-child(2){flex:1}
.toast-icon{display:grid;place-items:center;border-radius:50%;width:26px;height:26px;flex-shrink:0;background:var(--surface-3);color:var(--cyan)}
.toast button{background:none;border:0;color:var(--text-2);font-size:22px;min-width:36px;cursor:pointer}
.toast[data-kind=error]{border-color:var(--danger)}
/* toast 语义色条（设计稿 .toast.info/.success/.warn/.error），JS 可加 data-kind 启用 */
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:18px 0 0 18px;background:var(--cyan)}
.toast[data-kind=success]::before{background:var(--success)}
.toast[data-kind=warn]::before{background:var(--warning)}
.toast[data-kind=error]::before{background:var(--danger)}

#p5Network,#p5Update{
  position:absolute;z-index:25;left:12px;right:12px;bottom:calc(80px + var(--safe-bottom));
  border:1px solid var(--border-hi);background:var(--surface-2);border-radius:14px;padding:12px;
  color:var(--text-1);font-size:13px;line-height:1.5;box-shadow:var(--shadow);
}
#p5Network[hidden]{display:none}
#p5Update{display:flex;align-items:center;gap:8px}
#p5Update .btn{width:auto;margin:0;padding:8px;font-size:13px;min-height:40px}
.p5-offline #lbArea,.p5-offline .hb-box,.p5-offline #roomArea{visibility:hidden}
.p5-tools{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.p5-tools .btn{width:auto;margin:0;padding:9px 12px}
.p5-guide{
  border:1px solid var(--border-hi);background:var(--surface-2);border-radius:16px;padding:14px;
  margin-bottom:16px;font-size:14px;line-height:1.5;color:var(--text-1);box-shadow:var(--shadow);
}
.p5-guide p{color:var(--text-2);margin-top:6px}
.p5-guide .btn{margin-top:8px;padding:8px}
.p5-guide:has(+*){order:0}

/* 居中确认弹层（confirm） */
.confirm-backdrop{position:absolute;inset:0;z-index:100;background:var(--overlay);backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px}
.confirm-panel{width:100%;padding:28px 24px;background:var(--surface-2);border:1px solid var(--border-hi);border-radius:24px;text-align:center}
.confirm-panel h2{margin:0 0 14px;color:var(--text-1)}
.confirm-panel p{font-size:15px;line-height:1.75;color:var(--text-2)}
.confirm-panel .btn{margin-top:12px}

/* 空态 / 骨架 / spinner（设计稿组件，供新页面直接用类名） */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;min-height:300px}
.empty-icon{
  width:72px;height:72px;border-radius:50%;margin-bottom:16px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--purple) 8%, var(--surface));border:1px solid color-mix(in srgb,var(--purple) 15%, var(--border));color:var(--text-3);
}
.empty-title{font-size:15px;font-weight:900;letter-spacing:-.01em;color:var(--text-1)}
.empty-desc{font-size:11px;color:var(--text-3);margin-top:8px;line-height:1.6;max-width:220px}
.empty-actions{margin-top:20px;width:100%;max-width:220px;display:flex;flex-direction:column;gap:8px}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in srgb,var(--text-1) 30%, transparent);border-top-color:var(--text-1);animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ 12. 首页（home.js 渲染） ============ */
#screen-home .brand{margin:6px 0 12px}
#screen-home.home-first-play{padding:24px 20px calc(100px + var(--safe-bottom))}
.home-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.home-logo{font-size:36px;font-weight:900;letter-spacing:-1.4px;color:var(--text-1);position:relative;line-height:1.05}
.home-logo>span{display:inline-block;position:relative;color:transparent;background:var(--grad-brand);background-clip:text;-webkit-background-clip:text}
.home-logo>span:after{content:'';position:absolute;width:35px;height:12px;border:3px solid var(--pink);border-radius:50%;left:-4px;top:17px;transform:rotate(-24deg);box-shadow:0 0 12px #b537f23a}
.home-logo>i{position:absolute;right:12px;top:0;width:6px;height:6px;border-radius:50%;background:var(--pink)}
.home-tools{display:flex;align-items:center;gap:6px}
.home-tools button{
  display:flex;gap:4px;align-items:center;justify-content:center;min-height:44px;padding:7px 10px;
  border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);color:var(--text-2);
  font:inherit;font-size:12px;cursor:pointer;
}
.home-tools #p5Lang{color:var(--text-2);padding-inline:8px}
.home-tools button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.home-welcome{margin:12px 0 18px;font-weight:650;font-size:16px;letter-spacing:.3px;color:var(--text-2)}
.home-hero{
  padding:20px;border:1px solid var(--border-hi);border-radius:24px;
  background:
    radial-gradient(ellipse at 95% 0%, color-mix(in srgb,var(--purple) 11%, transparent), transparent 60%),
    linear-gradient(145deg,var(--surface-2),var(--surface));
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.home-kicker{
  display:inline-block;position:relative;z-index:1;color:var(--accent);font-size:12px;font-weight:650;line-height:1.5;
  padding:6px 10px;border:1px solid var(--border);border-radius:11px;
  background:color-mix(in srgb,var(--purple) 10%, var(--surface));max-width:100%;overflow-wrap:anywhere;
}
.home-kicker:first-letter{color:var(--cyan)}
.home-feature{position:relative;min-height:115px;display:flex;align-items:center}
.home-feature h1{position:relative;z-index:2;font-size:30px;line-height:1.3;letter-spacing:-.8px;margin:17px 0;font-weight:850;max-width:75%;overflow-wrap:anywhere;color:var(--text-1)}
.home-feature h1 em{color:var(--cyan);font-style:normal}
.home-score-unit{font-size:14px}
.home-demo{position:absolute;right:-4px;top:0;width:47%;height:118px;pointer-events:none}
.home-grid{
  position:absolute;inset:6px 0 2px;
  background-image:linear-gradient(color-mix(in srgb,var(--purple) 13%, transparent) 1px, transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--purple) 13%, transparent) 1px, transparent 1px);
  background-size:22px 22px;transform:perspective(200px) rotateY(-18deg) rotateZ(10deg);border-radius:12px;border:1px solid color-mix(in srgb,var(--purple) 17%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 45%);
}
.home-dot{position:absolute;width:27px;height:27px;border-radius:50%;background:radial-gradient(circle at 38% 32%, #f1fdff, var(--dot,var(--cyan)) 40%, #302254 85%);box-shadow:0 0 14px var(--dot,var(--cyan));border:2px solid var(--dot,var(--cyan))}
.home-dot:before{content:'';position:absolute;inset:-6px;border:2px solid var(--dot,var(--cyan));border-radius:50%;opacity:.5}
.dot-cyan{--dot:#13d8ff;right:53px;top:16px}
.dot-purple{--dot:#a137ff;right:80px;top:73px}
.dot-pink{--dot:#f337d8;right:6px;top:60px}
.dot-cyan i{position:absolute;inset:-8px;border:1px solid color-mix(in srgb,var(--cyan) 60%, transparent);border-radius:50%;animation:home-ripple 2.8s ease-out infinite}
.home-pointer{position:absolute;width:27px;height:35px;right:37px;top:35px;transform:rotate(-15deg);filter:drop-shadow(0 3px 4px #0008)}
@keyframes home-ripple{0%{transform:scale(.85);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
.home-description{position:relative;z-index:1;font-size:14px;line-height:1.75;color:var(--text-2);margin:0 0 16px}
.home-start.btn{margin:0;min-height:52px;border-radius:15px;font-size:17px;text-shadow:none;box-shadow:0 5px 20px color-mix(in srgb,var(--purple) 14%, transparent)}
.home-start>span{margin-left:8px;font-size:25px;line-height:0}
.home-mode-note{font-size:12px;line-height:1.6;color:var(--text-3);margin:10px 0;text-align:center}
.home-mode-note button{background:none;border:0;padding:2px 0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}
.home-switch{display:block;margin:0 auto;min-height:44px;padding:4px 14px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);color:var(--text-2);font:inherit;font-size:14px;cursor:pointer}
.home-switch span{margin-left:8px;font-size:20px}
.home-rank-heading{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:24px 0 14px}
.home-rank-heading h2{font-size:17px;line-height:1.5;margin:0;max-width:72%;font-weight:750;color:var(--text-1)}
.home-rank-heading button{flex-shrink:0;border:0;background:none;color:var(--cyan);font:inherit;font-size:12px;padding:7px 0;cursor:pointer;min-height:44px}
.home-categories{display:grid;gap:12px}
.home-category{
  display:flex;align-items:center;gap:12px;min-height:90px;width:100%;text-align:left;
  border:1px solid var(--border);border-radius:20px;
  background:linear-gradient(115deg,var(--surface-2),var(--surface));color:var(--text-1);
  padding:16px;font:inherit;cursor:pointer;
}
.home-category-icon{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--purple) 14%, transparent);color:var(--accent)}
.home-category.social .home-category-icon{color:var(--pink);background:color-mix(in srgb,var(--pink) 10%, transparent)}
.home-category.move{min-height:82px;border-color:var(--border);background:var(--surface);color:var(--text-2)}
.home-category.move .home-category-icon{background:color-mix(in srgb,var(--cyan) 9%, transparent);color:var(--cyan)}
.home-category-copy{flex:1;min-width:0}
.home-category-copy b{display:block;font-size:20px;font-weight:750;margin-bottom:4px;line-height:1.3;color:var(--text-1)}
.home-category-copy small{display:block;font-size:12px;line-height:1.6;color:var(--text-2)}
.home-category-action{font-size:12px;color:var(--accent);white-space:nowrap}
.home-category.move .home-category-action{color:var(--text-3);border:1px solid var(--border);border-radius:var(--r-full);padding:5px 7px}
.home-category:hover{border-color:var(--border-hi)}
.home-category:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.home-week-note{font-size:12px;text-align:center;color:var(--text-3);margin:18px 0 6px;line-height:1.7}
.home-personal{padding:12px 14px;margin-top:14px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text-2);font-size:14px;line-height:1.7}
.home-personal[hidden]{display:none}
.home-personal strong{color:var(--cyan)}
.home-network{display:flex;gap:12px;align-items:center;margin-top:5px;font-size:12px;color:var(--text-3)}
.home-network [data-rank-status]{font-size:12px;margin:0;flex:1;line-height:1.7}
.home-network button{border:0;background:none;color:var(--text-2);font:inherit;min-height:44px;cursor:pointer;font-size:12px}
.home-network .ranking-error{font-size:11px;color:var(--warning);padding:7px}
#screen-home .ranking-hero{padding:20px;margin:10px 0 14px}
#screen-home .ranking-hero h1{font-size:29px;margin:9px 0}
#screen-home .ranking-hero p{margin:8px 0;font-size:14px}
#screen-home .ranking-personal{padding:14px;margin:12px 0}
#screen-home .ranking-cat{padding:16px}
#screen-home .ranking-cat b{font-size:22px}

/* ============ 13. 街机宿主壳（arcade-host.js 渲染） ============ */
.sheet.arcade-sheet{
  padding:20px;background:radial-gradient(ellipse at right top, color-mix(in srgb,var(--purple) 11%, transparent), transparent 55%), var(--bg-0);gap:8px;
}
.sheet.arcade-sheet:not(.arcade-result-sheet){padding:20px}
.arcade-sheet .sheet-head{margin-bottom:22px}
.arcade-sheet .sheet-title{font-size:19px}
.arcade-sheet .sheet-sub{font-size:11px;line-height:1.5;color:var(--text-2)}
.arcade-tools{display:flex;gap:10px;justify-content:flex-end}
.arcade-tools .btn{width:auto;margin:0;padding:8px 14px;border-radius:12px;min-height:40px}
.arcade-tools [hidden],#arcadeStatus[hidden]{display:none!important}
#arcadeMount{display:block;flex:1;min-height:540px;position:relative;border:1px solid var(--border);background:var(--game-bg);border-radius:22px;overflow:hidden}
.sheet.arcade-sheet>#arcadeMount{border:0;border-radius:0;background:transparent;min-height:540px;flex:1}
#arcadeMount[hidden]{display:none}
#arcadeStatus{font-size:14px;line-height:1.6;color:var(--text-2)}
.sheet.arcade-sheet>.sheet-head{padding:0 60px 0 0;min-height:54px;margin-bottom:22px}
.sheet.arcade-sheet>.arcade-tools{position:absolute;right:20px;top:20px;margin:0}
.sheet.arcade-sheet[data-arcade-phase=intro]>.arcade-tools{display:none}
.sheet[data-social]{background:radial-gradient(ellipse at right top, color-mix(in srgb,var(--purple) 11%, transparent), transparent 60%), var(--bg-0)}

/* —— 视觉标杆：本局成绩页（arcadeShowResult，勿改视觉） —— */
.sheet.arcade-result-sheet{
  padding:0;display:flex;
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb,var(--purple) 14%, transparent), transparent 60%),
    radial-gradient(ellipse at 0% 83%, color-mix(in srgb,var(--cyan) 8%, transparent), transparent 50%),
    var(--bg-0);
  gap:0;
}
.sheet.arcade-result-sheet>.sheet-head,.sheet.arcade-result-sheet>.arcade-tools,.sheet.arcade-result-sheet>#arcadeStatus,.sheet.arcade-result-sheet>#arcadeMount{display:none!important}
.arcade-settlement{width:100%;min-height:100%;padding:24px 20px max(28px,var(--safe-bottom));position:relative;isolation:isolate}
.arcade-settlement:before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,var(--purple) 4%, transparent) 1px, transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--purple) 4%, transparent) 1px, transparent 1px);
  background-size:40px 40px;
}
.result-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.result-brand{display:flex;align-items:center;color:var(--text-1);font-size:30px;line-height:1;font-weight:850;letter-spacing:-1.4px}
.result-brand i{width:30px;height:30px;border:8px solid #d72ad4;border-radius:50%;margin-right:2px}
.result-close{padding:8px 14px;border:1px solid var(--border-hi);border-radius:var(--r-full);background:color-mix(in srgb,var(--purple) 12%, transparent);font:inherit;font-size:14px;color:var(--text-2);cursor:pointer;min-height:44px}
.result-content{text-align:center;padding-top:52px}
.result-symbol{
  width:86px;height:86px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,#ba35ef,#f52cba);
  box-shadow:0 0 0 15px #db2dcc0b,0 0 0 18px #dd36b825;
  margin:0 auto 22px;color:#fff;
}
.result-symbol svg{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.result-score{font-size:76px;font-weight:850;letter-spacing:-3px;line-height:1.05;margin:0 0 8px;color:#ffc1ea;font-variant-numeric:tabular-nums}
.result-score:focus{outline:none}
.result-unit{font-size:16px;font-weight:600;color:var(--text-2);margin:0}
.result-game{font-size:12px;color:var(--text-3);margin:9px 0 0}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:32px 0 24px}
.result-stats>div{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:linear-gradient(150deg,var(--surface-2),var(--surface));padding:18px 8px;min-height:104px}
.result-stats>div:before{content:'';height:2px;position:absolute;top:0;left:0;right:0;background:linear-gradient(90deg,var(--purple),#ff3cac55)}
.result-stats span{display:block;font-size:13px;color:var(--text-3);font-weight:600;line-height:1.5}
.result-stats strong{display:block;font-size:30px;line-height:1.4;margin-top:8px;font-weight:700;color:var(--text-1)}
#arcadeFinalRank{color:#ec3cdc}
.result-banner{
  border:1px solid color-mix(in srgb,var(--cyan) 30%, var(--border));
  background:linear-gradient(110deg, color-mix(in srgb,var(--cyan) 8%, var(--surface)), color-mix(in srgb,var(--pink) 6%, var(--surface)));
  border-radius:16px;padding:14px 16px;text-align:left;color:var(--cyan);font-size:13px;line-height:1.6;min-height:52px;margin-bottom:16px;
}
.result-again.btn{background:var(--grad-button);color:#fff;box-shadow:0 8px 32px #df29b235;font-size:20px;min-height:60px;border-radius:19px;margin-top:0}
.result-again span{font-size:28px;margin-left:8px}
.result-board.btn{margin-top:12px;min-height:60px;border-radius:19px;background:linear-gradient(110deg,var(--surface-2),var(--surface));color:var(--text-2);font-size:17px;border-color:var(--border-hi)}
.result-live{margin-top:16px;display:flex;gap:8px;align-items:center;text-align:left}
.result-live [data-rank-status]{font-size:11px;line-height:1.6;color:var(--text-3);margin:0;flex:1}
.result-live button{background:transparent;color:var(--text-2);font:inherit;font-size:11px;border:0;min-height:44px;cursor:pointer}
.result-live button[hidden]{display:none!important}
.result-retry{margin-bottom:12px}
.result-retry[hidden]{display:none!important}
.arcade-settlement[data-status=pending] .result-symbol svg,.arcade-settlement[data-status=failed] .result-symbol svg{display:none}
.arcade-settlement[data-status=pending] .result-symbol:after{content:'…';font-size:42px}
.arcade-settlement[data-status=failed] .result-symbol:after{content:'!';font-size:42px}
.arcade-settlement[data-status=failed] .result-banner{color:var(--warning);border-color:var(--warning)}
:root[data-theme=light] .result-score{color:#9c227f}
:root[data-theme=light] #arcadeFinalRank{color:#a21f91}

/* ============ 14. 响应式 / 安全区 / 断点 ============ */
@media(max-width:360px){
  #screen-home.home-first-play{padding-inline:14px}
  .home-hero{padding:16px}
  .home-feature h1{font-size:26px}
  .home-category{padding:14px 12px;gap:9px}
  .home-category-copy b{font-size:18px}
  .home-category-copy small{font-size:12px}
  .home-rank-heading h2{font-size:16px}
  .home-description{font-size:14px}
  .home-kicker{font-size:12px}
  .grid2{gap:10px}
  .play-item{padding:16px 9px}
  .ranking-row{gap:7px}
  .ranking-row .score{font-size:18px}
  .ranking-row .pos{width:30px}
  .me-head{padding:16px 12px}
  .social-standing{padding:12px}
  .social-standing-grid small{font-size:10px}
  .social-standing-grid .btn{padding:8px;font-size:11px}
  .sheet.arcade-sheet:not(.arcade-result-sheet){padding:16px}
  .form-hero{padding-top:0}
  .bar-row{padding:12px}
  .collection-item{gap:10px}
  .arcade-settlement{padding-inline:16px}
  .result-content{padding-top:40px}
  .result-score{font-size:66px}
  .result-stats{gap:12px}
  .result-stats span{font-size:12px}
  .result-again.btn{font-size:18px}
}
@media(max-width:350px){
  .screen{padding-left:14px;padding-right:14px}
  .sheet{padding-left:14px;padding-right:14px}
  .hero-card{padding:16px}
  .q{font-size:23px}
  .stat-row{gap:6px}
  .stat-c{min-width:0}
  .ac-btns{flex-wrap:wrap}
  .me-head{gap:10px}
  .category-card{padding:17px}
  .category-page-title,.category-title{font-size:27px}
}
@media(max-height:500px){
  .sheet{padding-top:12px}
  .screen{padding-top:12px}
  .p5-guide{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* 2026-10-06: keep saved-story rows and messages readable on narrow phones. */
.collection-list{min-width:0}
.collection-item{min-width:0;overflow-wrap:anywhere}
.toast{width:max-content;max-width:calc(100% - 32px)}
.toast>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.toast.show{pointer-events:auto}

.screen{scroll-padding-bottom:calc(var(--safe-bottom) + 100px)}

/* Social: mobile conversation hierarchy, no fabricated unread badges. */
.social-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 20px}
.social-header h1{font-size:30px;letter-spacing:-1px}.social-header p{font-size:13px;color:var(--text-3);margin-top:8px}
.social-compose{flex:none;width:46px;height:46px;border-radius:16px;background:var(--surface-2);color:var(--pink);border:1px solid var(--border-hi)}
.social-identity{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-2);margin-bottom:22px;line-height:1.6}
.social-identity>button{background:none;border:0;color:var(--cyan);flex:none}.uid-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 0;border:0;background:none;color:var(--text-3);font-size:12px;user-select:text;min-height:36px;max-width:100%;flex-wrap:wrap}.uid-chip b{color:var(--text-2);font-variant-numeric:tabular-nums;letter-spacing:.6px}.uid-chip span{color:var(--cyan);margin-left:5px}
.social-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:20px}.social-tabs button{flex:1;min-width:0;border:0;border-bottom:3px solid transparent;background:none;color:var(--text-3);font-weight:700;padding:12px 6px}.social-tabs button[aria-selected=true]{color:var(--text-1);border-bottom-color:var(--pink)}
.social-search{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:15px;padding:0 14px;background:var(--surface);color:var(--text-3)}.social-search input{width:100%;min-width:0;height:46px;background:none;border:0;color:var(--text-1);font:inherit;font-size:14px}
.social-section-label{display:flex;justify-content:space-between;margin:26px 0 8px;font-size:12px;color:var(--text-3)}.social-section-label h2{font-size:13px;font-weight:600;color:var(--text-2)}
.social-row{display:flex;align-items:center;gap:13px;width:100%;padding:17px 0;text-align:left;border:0;border-bottom:1px solid var(--border);background:none;color:var(--text-2)}.social-avatar{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:18px;color:var(--accent);background:var(--surface-2)}.round-avatar{color:var(--cyan)}.social-row-body{flex:1;min-width:0}.social-row-top{display:flex;gap:10px;align-items:center;justify-content:space-between}.social-row-top b{color:var(--text-1);font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.social-row-top time{flex:none;font-size:10px;color:var(--text-3)}.social-preview{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2);font-size:13px;margin-top:6px}.social-row-body>small{display:block;color:var(--text-3);font-size:11px;margin-top:5px}.social-state{flex:none;font-size:10px;color:var(--text-3)}
.social-empty{text-align:center;padding:38px 18px;color:var(--text-3);line-height:1.7}.social-empty>svg{color:var(--accent);margin-bottom:18px}.social-empty h3{font-size:19px;color:var(--text-1)}.social-empty p{font-size:14px;margin:10px 0 24px}.social-empty .btn{width:100%}
.people-input{display:flex;gap:10px}.people-input input{flex:1;min-width:0;margin:0}.people-input .btn{width:auto;flex:none;margin:0;padding:12px 20px}.people-card{text-align:center;padding:30px 20px;margin-top:24px;background:var(--surface);border:1px solid var(--border-hi);border-radius:24px}.people-card>div:first-child{margin-inline:auto}.people-card h2{margin:16px 0 10px;overflow-wrap:anywhere}.public-number{font-variant-numeric:tabular-nums;letter-spacing:1px;color:var(--cyan)}.people-card .game-note{display:block;margin:12px 0}.people-card .btn{width:100%}#peopleResult{margin-top:16px;overflow-wrap:anywhere}#socialPanel{min-width:0}.me-title{min-width:0}

.people-card{display:flex;flex-direction:column;align-items:center}

/* ============ Sports (运动类目) ============ */
.sport-hero{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px;padding:30px 22px;border-radius:var(--r-3xl);margin-bottom:22px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--g0,#34d399) 22%,var(--surface)),var(--surface) 72%);
  border:1px solid var(--border-hi);
}
.sport-hero h2{font-size:var(--fs-h1);color:var(--text-1)}
.sport-hero p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6;max-width:32ch}
.sport-emblem{
  display:grid;place-items:center;width:64px;height:64px;border-radius:20px;color:#fff;margin-bottom:4px;
  background:linear-gradient(135deg,var(--g0,#34d399),var(--g1,#059669));
  box-shadow:0 12px 28px -10px var(--g1,#059669);
}
.sport-steps{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 2px 22px}
.sport-steps li{position:relative;padding-left:30px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.sport-steps li::before{
  content:'';position:absolute;left:2px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--g0,#34d399);box-shadow:0 0 0 4px color-mix(in srgb,var(--g0,#34d399) 18%,transparent);
}
.sport-live{display:flex;flex-direction:column;align-items:center;gap:20px;padding:10px 4px}
.sport-ring{
  --p:1;position:relative;display:grid;place-items:center;width:210px;height:210px;border-radius:50%;
  background:conic-gradient(var(--g0,#34d399) calc(var(--p)*1turn),var(--surface-3) 0);
}
.sport-ring::before{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--surface)}
.sport-ring>*{position:relative;z-index:1}
.sport-big-num{font-size:58px;font-weight:var(--fw-black);line-height:1;color:var(--text-1);font-variant-numeric:tabular-nums}
.sport-big-label{font-size:var(--fs-sm);color:var(--text-2);margin-top:6px;text-align:center}
.sport-cad{display:flex;align-items:baseline;gap:8px;color:var(--text-2)}
.sport-cad b{font-size:26px;color:var(--g0,#34d399);font-variant-numeric:tabular-nums}
.sport-cad span{font-size:var(--fs-xs);color:var(--text-3)}
.sport-countdown{font-size:var(--fs-sm);color:var(--text-3);font-variant-numeric:tabular-nums}
.sport-run-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.sport-run-stats>div,.sport-result-grid>div{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
}
.sport-run-stats b,.sport-result-grid b{font-size:19px;color:var(--text-1);font-variant-numeric:tabular-nums}
.sport-run-stats span,.sport-result-grid span{font-size:var(--fs-xs);color:var(--text-3)}
.sport-result{display:flex;flex-direction:column;align-items:center;gap:18px;padding:6px 2px}
.sport-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.sport-result .sport-emblem{width:72px;height:72px;border-radius:22px}
.sport-evidence{
  display:flex;gap:10px;align-items:flex-start;width:100%;padding:13px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);color:var(--text-2);
}
.sport-evidence svg{flex:none;margin-top:1px;color:var(--g0,#34d399)}
.sport-evidence span{font-size:var(--fs-xs);line-height:1.55}
.sport-live>.btn{width:100%}
.sport-result .game-actions{display:flex;gap:10px;width:100%}
.sport-result .game-actions .btn{flex:1}
@media(max-width:360px){
  .sport-ring{width:186px;height:186px}
  .sport-big-num{font-size:50px}
}

/* ============================================================
   首页「本周排行榜」——领奖台 Top3 + 名次列表 + 玩法切换
   借鉴 Duolingo 联赛 / Spotify Top Charts / 奥运领奖台
   ============================================================ */
.home-board{
  margin-top:26px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(40,30,74,.55),rgba(21,16,42,.28));
  border:1px solid var(--border);border-radius:var(--r-3xl);padding:18px 16px 18px;
}
.home-board::before{content:"";position:absolute;inset:0 0 auto;height:130px;
  background:radial-gradient(120% 95% at 50% -25%,rgba(181,55,242,.30),transparent 70%);pointer-events:none}
.board-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative}
.board-kicker{font-size:10px;letter-spacing:.22em;font-weight:800;color:var(--accent);margin-bottom:4px}
.board-head h2{font-size:var(--fs-h1);margin:0;font-weight:900}
.board-hist{flex:none;background:none;border:none;color:var(--text-3);font-size:var(--fs-xs);padding:6px;cursor:pointer}
.board-hist:active{color:var(--accent)}
.board-chips{display:flex;gap:8px;overflow-x:auto;margin:14px -16px 2px;padding:2px 16px 8px;scrollbar-width:none;position:relative}
.board-chips::-webkit-scrollbar{display:none}
.board-chip{flex:none;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:var(--fs-xs);font-weight:700;padding:8px 13px;border-radius:var(--r-full);cursor:pointer;
  transition:all var(--t-fast) var(--ease);white-space:nowrap}
.board-chip.on{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:var(--glow-purple)}
.board-body{position:relative;min-height:56px}
.board-loading{font-size:var(--fs-xs);color:var(--text-3);text-align:center;padding:10px 0}
/* 领奖台 */
.podium{display:grid;grid-template-columns:1fr 1.14fr 1fr;align-items:end;gap:8px;padding:16px 2px 4px}
.podium-col{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.podium-col.p1{--medal:#FFD54A}
.podium-col.p2{--medal:#CBD5E6}
.podium-col.p3{--medal:#E5975C}
.podium-ava{position:relative;display:grid;place-items:center}
.podium-ava .ava-img,.podium-ava>span:not(.podium-crown){border:3px solid var(--medal)!important;
  box-shadow:0 0 0 4px rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.45)}
.podium-col.p1 .podium-ava .ava-img,.podium-col.p1 .podium-ava>span:not(.podium-crown){width:66px!important;height:66px!important}
.podium-col.p2 .podium-ava .ava-img,.podium-col.p2 .podium-ava>span:not(.podium-crown),
.podium-col.p3 .podium-ava .ava-img,.podium-col.p3 .podium-ava>span:not(.podium-crown){width:54px!important;height:54px!important}
.podium-crown{position:absolute;top:-21px;left:50%;transform:translateX(-50%);color:#FFD54A;
  filter:drop-shadow(0 2px 6px rgba(255,184,0,.6))}
.podium-name{font-size:var(--fs-xs);font-weight:800;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--text-1)}
.podium-score{font-size:12px;font-weight:900;color:var(--medal);font-variant-numeric:tabular-nums}
.podium-score small{font-weight:600;color:var(--text-3);font-size:10px}
.podium-base{width:100%;border-radius:12px 12px 6px 6px;display:grid;place-items:center;
  font-weight:900;font-size:15px;color:#1a1206;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 42%),var(--medal)}
.podium-col.p1 .podium-base{height:58px}
.podium-col.p2 .podium-base{height:44px;opacity:.94}
.podium-col.p3 .podium-base{height:36px;opacity:.92}
.podium-col.is-me .podium-name{color:var(--accent)}
/* 名次列表 */
.board-rows{margin-top:12px;display:flex;flex-direction:column;gap:2px}
.board-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-md);border:1px solid transparent}
.board-row .board-pos{width:26px;text-align:center;font-size:13px;font-weight:800;color:var(--text-3);
  font-variant-numeric:tabular-nums;flex:none}
.board-row .board-name{flex:1;font-size:var(--fs-sm);font-weight:700;color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-row .board-name small{color:var(--accent);font-weight:800}
.board-row .board-score{font-size:14px;font-weight:900;color:var(--text-1);
  font-variant-numeric:tabular-nums;flex:none}
.board-row .board-score small{font-size:10px;color:var(--text-3);font-weight:600}
.board-row.is-me{background:rgba(181,55,242,.14);border-color:var(--border-hi)}
.board-row.is-me .board-pos{color:var(--accent)}
.board-cta{width:100%;margin-top:14px;justify-content:center}
.board-status{margin-top:10px;font-size:var(--fs-xs);color:var(--text-3);text-align:center}
/* 空态 */
.board-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 10px 8px}
.board-empty-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin-bottom:4px;
  background:radial-gradient(circle at 50% 30%,rgba(255,184,0,.25),rgba(21,16,42,.4));
  border:1px solid var(--border);color:var(--gold)}
.board-empty h3{margin:0;font-size:var(--fs-h2);font-weight:900}
.board-empty p{margin:0;font-size:var(--fs-xs);color:var(--text-3);line-height:1.6;max-width:248px}
/* 社交 / 运动 快捷入口 */
.board-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.board-quick button{display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  font-size:var(--fs-xs);font-weight:700;padding:12px 8px;border-radius:var(--r-xl);cursor:pointer}
.board-quick button:active{border-color:var(--border-hi);color:var(--text-1)}
.board-quick svg{flex:none}
.board-quick .bq-social{color:var(--accent)}
.board-quick .bq-move{color:#34d399}
@media(max-width:360px){
  .home-board{padding:16px 12px}
  .podium{gap:6px}
  .podium-col.p1 .podium-ava .ava-img,.podium-col.p1 .podium-ava>span:not(.podium-crown){width:58px!important;height:58px!important}
  .podium-col.p2 .podium-ava .ava-img,.podium-col.p2 .podium-ava>span:not(.podium-crown),
  .podium-col.p3 .podium-ava .ava-img,.podium-col.p3 .podium-ava>span:not(.podium-crown){width:48px!important;height:48px!important}
  .board-quick{grid-template-columns:1fr}
}