/* Shared visual language for the four preview portal pages. Theme tokens live in themes.css. */
html { color-scheme:light; }
:root[data-theme=noir],:root[data-theme=royal],:root[data-theme=aurora],:root[data-theme=classic] { color-scheme:dark; }
.portal-page *, .portal-page *::before, .portal-page *::after { box-sizing:border-box; }
body.portal-page {
  margin:0; min-height:100vh; min-height:100dvh;
  background:radial-gradient(ellipse at 12% 0%,var(--ui-glow),transparent 65%),var(--ui-page);
  color:var(--ui-text); font:15px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:calc(24px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(118px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}
.portal-page [hidden] { display:none!important; }
.portal-page h1,.portal-page h2,.portal-page h3,.portal-page p { margin:0; }
.portal-page a { text-underline-offset:4px; }
.portal-page button,.portal-page input { font:inherit; }
.portal-page button,.portal-page a { -webkit-tap-highlight-color:transparent; }
.portal-page button { cursor:pointer; }
.portal-page button:disabled { cursor:default; }
.portal-page .wrap { max-width:1000px; margin:0 auto; min-width:0; }
.portal-page main { outline:none; }
.portal-page h1 { color:var(--ui-gold-light); font:600 clamp(24px,3vw,30px)/1.25 "STSong","SimSun",serif; letter-spacing:2px; }
.portal-header { display:flex; align-items:center; gap:24px; padding-bottom:22px; border-bottom:1px solid #ffffff20; }
.home-link { display:inline-flex; align-items:center; gap:8px; flex:none; min-height:44px; padding:7px 13px; border:1px solid #ffffff2b; border-radius:12px; color:var(--ui-text); text-decoration:none; font-size:13px; background:#ffffff08; }
.home-link span { font-size:28px; line-height:1; }
.header-title { flex:1; min-width:0; }
.portal-page .eyebrow { font-size:10px; font-weight:650; letter-spacing:2px; line-height:1.5; color:var(--ui-dim); margin-bottom:7px; }
.header-meta { color:var(--ui-dim); font-size:12px; letter-spacing:1px; }
.demo-notice { margin:18px 0 0!important; border:1px solid #ffffff20; border-radius:12px; padding:11px 15px; color:var(--ui-dim); background:#ffffff06; font-size:12px; line-height:1.75; }
.page-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 0 30px; }
.page-intro h2 { font:600 clamp(26px,3.5vw,36px)/1.4 "STSong","SimSun",serif; letter-spacing:1px; }
.page-intro p:not(.eyebrow) { color:var(--ui-dim); font-size:13px; margin-top:9px; }
.intro-seal { display:grid; place-items:center; flex:none; width:76px; height:76px; border:1px solid var(--accent-line); border-radius:24px; color:var(--ui-gold-light); font-size:40px; background:var(--accent-soft); transform:rotate(-7deg); }
.current-theme { flex:none; min-width:200px; border-left:1px solid var(--accent-line); padding:6px 0 6px 24px; }
.current-theme span,.current-theme small { display:block; color:var(--ui-dim); font-size:11px; }
.current-theme strong { display:block; margin:4px 0; color:var(--ui-gold-light); font-size:18px; }
.text-link { color:var(--ui-gold-light); font-size:13px; min-height:44px; display:inline-flex; align-items:center; gap:12px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.section-heading h2,.card-title { font-size:17px; font-weight:700; letter-spacing:.5px; }
.section-heading>span { font-size:12px; color:var(--ui-dim); }
.portal-page .card,.portal-page .skin,.portal-page .act { background:var(--ui-panel); color:var(--ui-ink); border:1px solid var(--ui-border); border-radius:22px; box-shadow:0 12px 30px #001b1924; }
.portal-page .card { padding:24px; margin-bottom:20px; }
.card-title { display:flex; justify-content:space-between; align-items:center; gap:14px; color:var(--ui-ink); margin-bottom:18px!important; }
.card-title .cap { font:400 12px/1.5 -apple-system,"PingFang SC",sans-serif; letter-spacing:0; color:var(--ui-muted); }
.card .section-heading>span { color:var(--ui-muted); }
.selection-feedback { color:var(--ui-dim); font-size:12px; line-height:1.75; margin-top:16px!important; min-height:22px; }
.card .selection-feedback { color:var(--ui-muted); }
.foot,.footnote { margin:28px auto 0!important; text-align:center; font-size:12px; line-height:1.8; color:var(--ui-dim); max-width:760px; }
.records-link { color:var(--ui-gold-light); display:inline-block; padding:7px 0; margin-top:4px; }
.empty-state { width:100%; padding:24px; border:1px dashed var(--accent-line); border-radius:16px; text-align:center; color:var(--ui-dim); font-size:13px; }
.card .empty-state { color:var(--ui-muted); }
.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; }
.skip-link { position:fixed; top:12px; left:20px; z-index:200; padding:10px 16px; border-radius:10px; background:var(--ui-panel); color:var(--ui-ink); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
/* Appearance cards */
.skin-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.skin-grid>.empty-state { grid-column:1/-1; }
.skin { overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s,box-shadow .2s; }
.skin.is-active { border-color:var(--ui-gold); box-shadow:0 0 0 2px var(--accent-line),0 12px 30px #001b1930; }
.thumb { height:178px; position:relative; overflow:hidden; display:grid; place-items:center; background:var(--skin-back); }
.thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(140deg,#ffffff12,transparent 65%); pointer-events:none; }
.felt { position:absolute; inset:14px; border-radius:15px; box-shadow:inset 0 0 0 1px #ffffff38,inset 0 10px 24px #0005; }
.skin-number { position:absolute; left:27px; top:22px; color:#ffffffb3; font-size:10px; letter-spacing:2px; }
.cards { position:relative; display:flex; align-items:center; transform:translateY(8px); }
.pc { width:48px; height:70px; border-radius:7px; background:linear-gradient(150deg,#fffdf6,#e9e6d6); box-shadow:0 9px 18px #0006; margin-left:-12px; padding:5px 6px; font-size:15px; font-weight:750; color:#15302c; transform:rotate(8deg); }
.pc:first-child { margin-left:0; transform:rotate(-12deg) translateY(3px); color:#fff; }
.pc:nth-child(2) { transform:rotate(-3deg) translateY(-4px); }
.pc.red { color:#b9403f; }
.theme-check { position:absolute; top:22px; right:24px; border:1px solid #ffffff70; background:#0b201ecc; border-radius:999px; color:#fff; font-size:11px; padding:2px 8px; }
.meta { padding:18px 18px 0; }
.nm { color:var(--ui-ink); font-size:17px; font-weight:750; line-height:1.5; }
.desc { color:var(--ui-muted); font-size:12px; line-height:1.75; margin-top:6px!important; }
.skin .row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; margin-top:auto; }
.price { color:var(--ui-gold-ink); font-size:12px; font-weight:650; white-space:nowrap; }
.buy,.ghost-btn,.editor-actions button { min-height:44px; border-radius:11px; border:1px solid var(--ui-border); padding:9px 14px; font-size:13px!important; font-weight:650; }
.buy.get,.editor-actions button[type=submit] { background:var(--accent-grad); color:#211b0c; border-color:transparent; }
.buy.use { background:var(--ui-soft); color:var(--ui-ink); border-color:var(--accent-line); }
.buy[aria-pressed=true]::before { content:"✓ "; }
/* Profile */
.profile-hero { position:relative; overflow:hidden; }
.hero { display:flex; align-items:center; gap:20px; }
.avatar { flex:none; display:grid; place-items:center; width:76px; height:76px; border-radius:24px; background:var(--accent-grad); font-size:36px; box-shadow:inset 0 0 0 1px #fff5; }
.hero-info { flex:1; min-width:0; }
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nick { font-size:22px; font-weight:750; overflow-wrap:anywhere; }
.acct { color:var(--ui-muted); font-size:12px; margin-top:5px; }
/* 身份信息条：头像右侧原本大片空白，补上好友 ID、加入时间这类"我是谁"的标识 */
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.hero-tag { display:inline-flex; align-items:baseline; gap:6px; padding:4px 10px; border-radius:9px;
  border:1px solid color-mix(in srgb,var(--ui-ink) 12%,transparent); background:var(--ui-raised); max-width:100%; }
.hero-tag .k { font-size:10px; color:var(--ui-dim); white-space:nowrap; }
.hero-tag .v { font-size:12px; font-weight:700; color:var(--ui-ink); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill { display:inline-flex; border:1px solid var(--accent-line); border-radius:999px; background:var(--accent-soft); color:var(--ui-gold-ink); padding:3px 10px; font-size:11px; margin-top:10px; }
.ghost-btn { background:var(--ui-raised); color:var(--ui-ink); white-space:nowrap; }
.profile-editor { margin-top:20px; padding-top:20px; border-top:1px solid var(--ui-border); display:grid; gap:10px; }
.profile-editor label { font-size:13px; font-weight:650; }
.profile-editor input { width:100%; min-height:48px; padding:11px 13px; background:var(--ui-raised); color:var(--ui-ink); border:1px solid var(--ui-border); border-radius:11px; font-size:16px; }
.profile-editor input[aria-invalid=true] { border-color:var(--ui-loss); }
.editor-actions { display:flex; gap:10px; }
.editor-actions button[type=button] { background:var(--ui-soft); color:var(--ui-ink); }
.profile-editor p { font-size:12px; color:var(--ui-muted); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.stat { padding:19px 12px; text-align:center; border:1px solid var(--ui-border); background:var(--ui-panel); color:var(--ui-ink); border-radius:16px; }
.stat .num { font-size:28px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.3; }
.stat .num.pos { color:var(--ui-win); }
.stat .lbl { margin-top:6px; font-size:12px; color:var(--ui-muted); }
.profile-columns { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; }
.profile-columns>.card { min-width:0; }
.chart-box { border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-raised); padding:14px 8px 7px; }
.chart-box svg { display:block; width:100%; height:auto; color:var(--ui-muted); }
.chart-grid { stroke:var(--ui-border); stroke-dasharray:4 4; }
.chart-axis { fill:var(--ui-muted); font:11px sans-serif; }
.chart-line { stroke:var(--ui-gold-ink); }
.chart-dot { fill:var(--ui-gold-ink); stroke:var(--ui-raised); }
.chart-cap { margin-top:12px!important; font-size:12px; color:var(--ui-muted); text-align:center; }
.leaderboard-page #rank-panel>.chart-cap { color:var(--ui-dim); }
.chart-data { margin-top:12px; font-size:12px; color:var(--ui-muted); }
.chart-data summary { cursor:pointer; min-height:32px; padding:4px 0; }
.chart-data ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:12px 0 0; margin:0; gap:5px 12px; list-style:none; font-variant-numeric:tabular-nums; }
/* 成就收藏：徽章 + 达成条件 + 未达成进度。
 * 未点亮不再用 grayscale(1) 全灰——那样既看不出徽章是什么，也分不清"未点亮"和"加载失败"，
 * 改成"暗色但可辨 + 描边提示"，并把达成条件写出来，让玩家知道下一步做什么。 */
.achv-summary { margin:0 0 14px!important; font-size:12px; color:var(--ui-muted); }
.badges { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; }
.badge { text-align:center; display:grid; gap:0; justify-items:center; }
.badge .ring { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; margin:0 auto;
  background:var(--ui-raised); font-size:24px; font-weight:700; line-height:1;
  border:1px solid color-mix(in srgb,var(--ui-ink) 16%,transparent);
  /* 未点亮符号仍要可辨：混合比例 45% 时 jade 主题对比度只有 2.60、classic 2.96，
   * 达不到大文本 3:1；提到 60% 后 5 套主题全部 ≥ 4.05。 */
  color:color-mix(in srgb,var(--ui-ink) 60%,transparent); }
.badge.unlocked .ring { border-color:var(--accent-line); background:var(--accent-soft); color:var(--ui-gold-ink);
  box-shadow:0 4px 12px #001b1926; }
.badge.locked .ring { border-style:dashed; }
.bname { font-size:12px; margin:7px 0 0; font-weight:700; color:var(--ui-ink); }
.badge.locked .bname { color:var(--ui-muted); }
.badge-state { color:var(--ui-muted); font-size:10px; margin:3px 0 0; line-height:1.45; }
.badge-state.todo { color:var(--ui-gold-ink); }
/* 未达成进度条：细金色条，比整块填色克制 */
.achv-bar { width:46px; height:4px; margin-top:6px; border-radius:999px; background:var(--ui-soft); overflow:hidden; }
.achv-bar i { display:block; height:100%; border-radius:999px; background:var(--accent-grad); }
.matches { display:flex; flex-direction:column; }
.match { display:grid; grid-template-columns:130px minmax(0,1fr) 40px 64px; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid var(--ui-border); font-size:13px; }
.match:last-child { border-bottom:0; padding-bottom:0; }
.m-date { color:var(--ui-muted); font-variant-numeric:tabular-nums; font-size:12px; }
.m-room { overflow-wrap:anywhere; }
.m-tag { padding:2px 8px; border-radius:6px; text-align:center; font-size:12px; }
.m-tag.win { color:var(--ui-win); background:color-mix(in srgb,var(--ui-win) 10%,transparent); }
.m-tag.lose { color:var(--ui-loss); background:color-mix(in srgb,var(--ui-loss) 10%,transparent); }
.m-delta { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; }
.m-delta.pos { color:var(--ui-win); }.m-delta.neg { color:var(--ui-loss); }
/* Leaderboard */
.seg { display:flex; gap:6px; padding:5px; border:1px solid #ffffff25; border-radius:15px; background:#ffffff08; max-width:420px; }
/* 头像为图片形态（内置头像集 SVG / 用户上传）时撑满容器并继承圆角 */
.av img, .avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
/* 个人中心头像编辑器 */
.avatar-editor { margin-top:12px; padding:14px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-panel); display:grid; gap:10px; justify-items:start; }
.avatar-editor[hidden] { display:none; }
.avatar-editor-title { font-size:12px; color:var(--ui-dim); margin:2px 0 0; }
.avatar-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:8px; width:100%; }
.avatar-grid[aria-busy="true"] { opacity:.6; }
.avatar-choice { padding:0; border:1px solid var(--ui-border); border-radius:12px; background:#fff; overflow:hidden; aspect-ratio:1; cursor:pointer; }
.avatar-choice img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-choice[aria-pressed="true"] { outline:2px solid var(--ui-gold); outline-offset:1px; }
.avatar-choice:disabled { opacity:.5; cursor:default; }
.avatar-upload-btn.disabled { opacity:.5; pointer-events:none; }
.seg + .seg-metric { margin-top:10px; }
.seg button { flex:1; min-height:44px; border:0; border-radius:10px; background:transparent; color:var(--ui-dim); font-weight:650; font-size:14px; }
.seg button.on { color:#211b0c; background:var(--accent-grad); box-shadow:0 4px 12px #0002; }
.rank-status { color:var(--ui-dim); font-size:12px; margin:14px 0 0!important; }
.podium { display:grid; grid-template-columns:1fr 1.12fr 1fr; align-items:end; gap:14px; max-width:600px; margin:26px auto 24px; }
.pod { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.av { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:14px; font-size:22px; box-shadow:inset 0 0 0 1px #ffffff30; }
.pod .av { width:60px; height:60px; border-radius:50%; font-size:30px; }
.pod.p1 .av { width:72px; height:72px; box-shadow:0 0 0 3px var(--accent-line); }
.pod .crown { color:var(--ui-gold-light); font-size:25px; line-height:1; }
.pod .nm { color:var(--ui-text); font-size:14px; max-width:100%; padding:0 4px; text-align:center; overflow-wrap:anywhere; }
.pod .pm { color:var(--ui-dim); font-size:11px; line-height:1.25; max-width:100%; padding:0 4px; text-align:center; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.pod .sc { color:var(--ui-gold-light); font-size:18px; }
.pod .sc small { font-size:10px; font-weight:400; display:block; color:var(--ui-dim); text-align:center; }
.stand { width:100%; height:66px; display:grid; place-items:center; background:var(--ui-panel); border:1px solid var(--ui-border); border-top:2px solid var(--ui-gold); border-radius:16px 16px 6px 6px; color:var(--ui-gold-ink); font-size:23px; }
.p1 .stand { height:96px; background:var(--accent-grad); color:#211b0c; }
.p3 .stand { height:50px; }
.portal-page .rank-card { padding:20px 24px 8px; }
.rank-card .section-heading { padding-bottom:15px; border-bottom:1px solid var(--ui-border); margin:0; }
/* 榜单行：名次 / 头像 / 昵称+副信息 / 主值 / 变化（较上期同期） */
.rank-card .row,.me { display:grid; grid-template-columns:28px 42px minmax(0,1fr) 90px 80px; align-items:center; gap:14px; padding:16px 0; color:var(--ui-ink); }
.rank-card .row+.row { border-top:1px solid var(--ui-border); }
.rank-card .row.mine { background:var(--accent-soft); border-radius:10px; box-shadow:inset 3px 0 var(--ui-gold); padding-left:8px; padding-right:8px; }
.rk { color:var(--ui-muted); font-weight:650; text-align:center; font-variant-numeric:tabular-nums; }
.who { min-width:0; }.who .n { font-size:14px; font-weight:650; overflow-wrap:anywhere; }.who .m { color:var(--ui-muted); font-size:11px; margin-top:2px; }
.sc { color:var(--ui-ink); font-size:16px; font-weight:750; font-variant-numeric:tabular-nums; text-align:right; }
.chip { font-size:11px; font-weight:650; text-align:center; border-radius:8px; padding:4px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.chip.up { color:var(--ui-win); background:color-mix(in srgb,var(--ui-win) 10%,transparent); }
.chip.down { color:var(--ui-loss); background:color-mix(in srgb,var(--ui-loss) 10%,transparent); }
.chip.flat { color:var(--ui-muted); background:var(--ui-soft); }
.me { grid-template-columns:28px 42px minmax(0,1fr) 90px 80px; padding:18px 24px; border:1px solid var(--ui-border); border-left:3px solid var(--ui-gold); border-radius:18px; background:var(--ui-panel); }
.me .tag { display:block; font-size:10px; color:var(--ui-gold-ink); }
/* Check-in */
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.card-head .card-title { margin-bottom:5px!important; }
.card-sub { font-size:12px; color:var(--ui-muted); }
.coins-chip { display:flex; flex-direction:column; align-items:flex-end; flex:none; border-left:1px solid var(--ui-border); padding-left:20px; color:var(--ui-gold-ink); }
.coins-chip>span { font-size:10px; color:var(--ui-muted); }.coins-chip strong { font-size:23px; line-height:1.4; font-variant-numeric:tabular-nums; }
.checkin-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:22px 0 12px; color:var(--ui-muted); font-size:12px; }
.checkin-summary strong { color:var(--ui-ink); font-weight:600; }
.strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.day { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:108px; padding:12px 5px; background:var(--ui-raised); border:1px solid var(--ui-border); border-radius:14px; }
.day .reward { font-size:24px; color:var(--ui-muted); line-height:1.4; }
.day .daylabel { font-size:12px; color:var(--ui-ink); }
.day .badge { font-size:10px; color:var(--ui-muted); }
.day.today { background:var(--accent-soft); border:2px solid var(--ui-gold); }
.day.today .badge { color:var(--ui-gold-ink); font-weight:700; }
.day.claimed .reward,.day.done .reward { color:var(--ui-win); }
.claim-btn { display:block; width:100%; border:0; border-radius:13px; min-height:54px; padding:13px; margin-top:20px; color:#211b0c; background:var(--accent-grad); font-size:16px!important; font-weight:700; }
.claim-btn:disabled { color:var(--ui-muted); background:var(--ui-soft); box-shadow:inset 0 0 0 1px var(--ui-border); }
.checkin-page .section-heading { margin-top:28px; }
.act { display:flex; align-items:center; gap:16px; padding:20px; margin-bottom:12px; }
.act-ico { display:grid; place-items:center; flex:none; width:50px; height:50px; border-radius:15px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--ui-gold-ink); font-size:26px; }
.act-body { flex:1; min-width:0; }.act-title { font-size:16px; }.act-desc { color:var(--ui-muted); font-size:12px; margin-top:4px!important; }
.act-cta { display:inline-flex; justify-content:center; align-items:center; min-height:44px; flex:none; border:1px solid var(--accent-line); border-radius:11px; padding:8px 16px; color:var(--ui-gold-ink); text-decoration:none; font-size:13px; font-weight:650; }
/* Navigation and feedback */
.portal-nav { position:fixed; bottom:0; left:0; right:0; z-index:50; display:flex; justify-content:center; gap:4px; background:var(--ui-nav); border-top:1px solid var(--ui-border); box-shadow:0 -8px 28px #001a172b; padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
.portal-nav a { flex:1; max-width:140px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2px; min-height:52px; color:var(--ui-muted); text-decoration:none; border-radius:12px; font-size:11px; }
.portal-nav a>span:first-child { font-size:21px; line-height:25px; }
.portal-nav a[aria-current] { color:var(--ui-gold-ink); font-weight:750; background:var(--accent-soft); box-shadow:inset 0 2px var(--ui-gold); }
.portal-page .toast { position:fixed; left:50%; bottom:calc(94px + env(safe-area-inset-bottom)); z-index:100; max-width:calc(100% - 32px); transform:translateX(-50%) translateY(10px); padding:11px 18px; border:1px solid var(--accent-line); border-radius:14px; background:var(--ui-dark); color:var(--ui-text); box-shadow:0 12px 30px #001b1966; font-size:13px; text-align:center; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
.portal-page .toast.on,.portal-page .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.portal-page :is(button,a,input,summary,[tabindex]):focus-visible { outline:3px solid var(--ui-gold); outline-offset:4px; }
@media(hover:hover) {
  .home-link:hover { background:#ffffff15; }
  .buy.get:hover,.claim-btn:not(:disabled):hover { filter:brightness(1.06); }
  .act-cta:hover,.ghost-btn:hover { background:var(--accent-soft); }
  .portal-nav a:hover { background:var(--ui-soft); }
}
@media(max-width:800px) {
  .skin-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-columns { grid-template-columns:1fr; gap:0; }
  /* 单栏后徽章有整行宽度，排 4 列更像"收藏册" */
  .badges { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .header-meta { display:none; }
}
@media(max-width:560px) {
  body.portal-page { padding-top:calc(18px + env(safe-area-inset-top)); padding-right:max(16px,env(safe-area-inset-right)); padding-left:max(16px,env(safe-area-inset-left)); }
  .portal-header { gap:16px; padding-bottom:18px; }
  .home-link { width:44px; padding:0; justify-content:center; overflow:hidden; font-size:0; }
  .home-link span { font-size:28px; }.home-link::after { content:none; }
  .page-intro { padding:26px 0 24px; gap:16px; flex-wrap:wrap; }
  .page-intro h2 { font-size:27px; }.page-intro p:not(.eyebrow) { font-size:12px; }
  .intro-seal { width:50px; height:50px; border-radius:16px; font-size:29px; }
  .current-theme { min-width:0; width:100%; border-left:0; border-top:1px solid var(--accent-line); padding:12px 0 0; display:grid; grid-template-columns:1fr auto; align-items:center; gap:3px; }
  .current-theme strong { margin:0; font-size:15px; }.current-theme small { grid-column:1/-1; }
  .skin-grid { gap:14px; }.thumb { height:154px; }.skin-number { left:23px; top:20px; }
  .skin .row { flex-wrap:wrap; gap:8px; padding:14px; }.skin .buy { width:100%; }.skin .meta { padding:14px 14px 0; }.skin .nm { font-size:15px; }
  .theme-check { top:auto; bottom:14px; right:24px; font-size:10px; }
  .portal-page .card { padding:18px; border-radius:18px; }
  .section-heading { gap:10px; }.section-heading h2 { font-size:16px; }.section-heading>span { font-size:10px; }
  .hero { gap:12px; }.avatar { width:56px; height:56px; border-radius:18px; font-size:28px; }.nick { font-size:18px; }
  .hero-top { flex-wrap:wrap; gap:8px; }.ghost-btn { padding:7px 10px; font-size:12px!important; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:20px; }.stat .num { font-size:26px; }
  .badges { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .badge .ring { width:44px; height:44px; font-size:20px; }
  .bname { font-size:11px; }
  .match { grid-template-columns:minmax(0,1fr) 36px 48px; gap:4px 10px; }.m-date { grid-column:1; }.m-room { grid-column:1; grid-row:2; }.m-tag { grid-column:2; grid-row:1/3; }.m-delta { grid-column:3; grid-row:1/3; }
  .portal-page .rank-card { padding:18px 12px 4px; }.rank-card .section-heading { padding:0 4px 12px; }
  .rank-card .row,.me { grid-template-columns:22px 34px minmax(0,1fr) 75px; gap:4px 9px; padding:14px 4px; }
  .rank-card .row .rk,.me>.rk { grid-row:1/3; }.rank-card .row .av,.me>.av { grid-row:1/3; width:34px; height:34px; font-size:19px; border-radius:11px; }
  .rank-card .row .who,.me>.who { grid-column:3; grid-row:1/3; }.rank-card .row .sc,.me>.sc { grid-column:4; grid-row:1; font-size:15px; }.rank-card .row .chip,.me>.chip { grid-column:4; grid-row:2; justify-self:end; font-size:10px; padding:1px 5px; }
  .who .n { font-size:13px; }.who .m { font-size:10px; }.me { padding:16px 12px; }
  .podium { gap:10px; }.pod .nm { font-size:12px; }.pod .pm { font-size:10px; }.pod .sc { font-size:16px; }.pod .av { width:50px; height:50px; font-size:25px; }.pod.p1 .av { width:62px; height:62px; }
  .strip { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.day { min-height:92px; padding:9px 4px; }
  .card-head { gap:12px; }.coins-chip { padding-left:12px; }.coins-chip strong { font-size:20px; }.checkin-summary { align-items:flex-start; flex-direction:column; gap:3px; }
  .act { padding:16px; gap:12px; flex-wrap:wrap; }.act-ico { width:42px; height:42px; border-radius:12px; }.act-cta { margin-left:54px; flex-basis:calc(100% - 54px); justify-content:space-between; }.act-cta::after { content:"↗"; }
  .selection-feedback { font-size:11px; }
}
@media(max-width:380px) {
  .skin-grid { grid-template-columns:1fr; }.thumb { height:180px; }
  .page-intro .intro-seal { display:none; }
  .card-head { flex-wrap:wrap; }.coins-chip { flex-direction:row; align-items:center; gap:8px; border-left:0; padding-left:0; }
  .hero-top { align-items:flex-start; }.card-title { font-size:16px; }
}
/* Live portal sessions and data panels */
.portal-session .card-title { margin-bottom:8px!important; }
.portal-session .selection-feedback { margin:0 0 12px!important; }
.portal-login { max-width:520px; }
.live-panel-body { min-width:0; }
.live-panel-body>.selection-feedback:first-child { margin:0 0 14px!important; }
.live-panel .stats { margin-top:8px; }
.live-panel .profile-columns { margin:22px 0; }
.live-panel .profile-columns>section { min-width:0; }
.live-subtitle { margin:22px 0 14px!important; font-size:15px; font-weight:700; }
/* 区块标题行：左边标题、右边出口链接。链接用紧凑变体，避免 44px 的触控高度撑高整行。 */
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.section-head .live-subtitle { margin-bottom:14px!important; }
.section-head .text-link { min-height:0; font-size:12px; color:var(--ui-gold-ink); }
.live-panel .profile-columns .live-subtitle { margin-top:0!important; }
.live-panel .empty-state,.portal-session .empty-state { color:var(--ui-muted); }
.live-avatar { background:var(--accent-soft); color:var(--ui-gold-ink); overflow:hidden; }
.friend-request-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.friend-request-form label,.friend-request-form .card-sub { grid-column:1/-1; }
.friend-request-form label { font-size:13px; font-weight:650; }
.friend-request-form input { min-width:0; width:100%; min-height:48px; padding:11px 13px; background:var(--ui-raised); color:var(--ui-ink); border:1px solid var(--ui-border); border-radius:11px; font-size:16px; }
.friend-request-form input[aria-invalid=true] { border-color:var(--ui-loss); }
.friend-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 0; border-bottom:1px solid var(--ui-border); }
.friend-row:last-child { border-bottom:0; }
.friend-name { flex:1; min-width:100px; overflow-wrap:anywhere; font-weight:650; }
.friend-confirm { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; }
.portal-page button:disabled { opacity:.7; }
.portal-page .portal-session,.portal-page .live-panel { overflow-wrap:anywhere; }
.leaderboard-page .me>.empty-state { grid-column:1/-1; color:var(--ui-muted); }
.leaderboard-page #rank-status+.ghost-btn { margin-top:10px; }
@media(max-width:800px) {
  .live-panel .profile-columns { gap:24px; }
}
@media(max-width:560px) {
  .friend-request-form { grid-template-columns:minmax(0,1fr); }
  .friend-row .friend-confirm { flex-basis:100%; }
  .live-panel .card-title { align-items:flex-start; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .portal-page *, .portal-page *::before, .portal-page *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}
@media(forced-colors:active) {
  .skin.is-active,.day.today,.portal-nav a[aria-current],.seg button.on { outline:2px solid Highlight; }
  .chart-line,.chart-dot { stroke:CanvasText; }.chart-axis { fill:CanvasText; }
}

/* ---------- 奇牌榜 / 牌运卡 ---------- */
/* .seg 是 display:flex，hidden 属性必须显式关掉，否则二级筛选永远可见 */
.seg[hidden] { display:none; }
.seg-sub { margin-top:10px; max-width:560px; }
.seg-sub button { min-height:40px; font-size:13px; }
.seg-scope { max-width:300px; }
.seg button:disabled { opacity:.45; cursor:not-allowed; }
.empty-hint { color:var(--ui-dim); font-size:12px; margin:8px 0 12px; }
.empty-state .text-link { display:inline-block; margin-top:4px; }
/* 结算高光的特殊手徽章 */
.rr-special { display:inline-flex; gap:4px; flex-wrap:wrap; }
.rr-special .tag { padding:2px 7px; border-radius:999px; font-size:11px; font-weight:700;
  color:var(--ui-gold-ink); background:var(--accent-soft); border:1px solid var(--accent-line); }
.rr-special .tag.bao { color:#211b0c; background:var(--accent-grad); border-color:transparent; }
/* 个人牌运卡：四类分别展示，进度条只表示距下一档的距离 */
/* ── 牌运卡：环形收集进度 + 四枚收集格 + 四类奇牌卡 ────────────── */
/* 总览：左侧环形进度（conic-gradient 画环，::before 挖空心），右侧四枚收集格 */
.luck-overview { display:flex; align-items:center; gap:18px; margin-bottom:14px; }
.luck-ring { position:relative; flex:none; width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--ui-gold) calc(var(--luck-pct,0) * 1%),
    color-mix(in srgb,var(--ui-gold) 30%,transparent) 0);
  box-shadow:0 6px 18px #001b1926; }
.luck-ring::before { content:''; position:absolute; inset:7px; border-radius:50%; background:var(--ui-panel); }
.luck-ring b { position:relative; z-index:1; font-size:20px; font-weight:800; color:var(--ui-ink);
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.4px; }
.luck-overview-side { min-width:0; display:grid; gap:9px; justify-items:start; }
.luck-overview-note { margin:0!important; font-size:12px; color:var(--ui-muted); line-height:1.5; }
/* 收集格：已集齐填金色实心并投影，未集齐留浅色描边但仍显字形，便于一眼看出还差哪类 */
.luck-slots { display:flex; gap:8px; flex-wrap:wrap; }
.luck-slot { width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  font-size:15px; font-weight:800; border:1px dashed color-mix(in srgb,var(--ui-ink) 26%,transparent);
  background:var(--ui-raised); color:color-mix(in srgb,var(--ui-ink) 75%,transparent); }
.luck-slot.on { border-style:solid; border-color:transparent; background:var(--accent-grad); color:#211b0c;
  box-shadow:0 3px 10px #001b1933; }
/* 统计范围：一行小字即可，别抢奇牌卡片的视觉重心 */
.luck-scope { margin:0 0 18px!important; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 7px;
  font-size:12px; color:var(--ui-dim); }
.luck-scope b { color:var(--ui-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.luck-scope i { font-style:normal; opacity:.5; }
/* 奇牌卡两列排布：四列并排会把 1/5/10/25/50 五格里程碑挤成一团。
 * 固定两列，auto-fit 在某些宽度下会把第四张挤到下一行落单。 */
.luck { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.luck-item { padding:15px 16px; border:1px solid color-mix(in srgb,var(--ui-ink) 14%,transparent);
  border-radius:16px; background:var(--ui-raised);
  display:grid; gap:11px; align-content:start; box-shadow:0 6px 18px #001b1912; }
.luck-item.unlocked { border-color:var(--accent-line);
  background:linear-gradient(165deg,color-mix(in srgb,var(--ui-gold) 14%,var(--ui-raised)),var(--ui-raised) 62%);
  box-shadow:0 10px 26px #001b1926; }
.luck-head { display:flex; align-items:center; gap:9px; }
.luck-glyph { flex:none; width:32px; height:32px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800; background:var(--ui-raised); color:color-mix(in srgb,var(--ui-ink) 68%,transparent);
  border:1px solid color-mix(in srgb,var(--ui-ink) 18%,transparent); }
.luck-item.unlocked .luck-glyph { background:var(--accent-grad); color:#211b0c; border-color:transparent;
  box-shadow:0 3px 9px #001b1926; }
.luck-name { font-size:13px; font-weight:700; color:var(--ui-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.luck-count { margin-left:auto; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ui-ink); line-height:1; }
.luck-item.unlocked .luck-count { color:var(--ui-gold-ink); }
.luck-item:not(.unlocked) .luck-count { color:var(--ui-muted); }
.luck-count small { font-size:11px; font-weight:600; color:var(--ui-dim); margin-left:2px; }
/* 徽章阶梯：五格对应 1/5/10/25/50 档，达成填金、当前档描边并按比例填充底色 */
.luck-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.luck-step { position:relative; height:28px; border-radius:8px; display:grid; place-items:center; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--ui-ink) 13%,transparent); background:var(--ui-soft); }
.luck-step b { position:relative; z-index:1; font-size:11px; font-weight:750;
  color:color-mix(in srgb,var(--ui-ink) 68%,transparent); font-variant-numeric:tabular-nums; }
.luck-step.done { border-color:transparent; background:var(--accent-grad); }
.luck-step.done b { color:#211b0c; }
.luck-step.current { border-color:var(--ui-gold-ink);
  background:linear-gradient(to top,color-mix(in srgb,var(--ui-gold) 52%,transparent) var(--luck-ratio,0%),var(--ui-soft) var(--luck-ratio,0%)); }
.luck-step.current b { color:var(--ui-gold-ink); }
.luck-hint { margin:0!important; font-size:11px; color:var(--ui-muted); line-height:1.5; }
.luck-hint.time { font-size:10px; color:var(--ui-dim); opacity:.85; }
/* 牌运卡窄屏：奇牌卡改单列，否则五格里程碑会被压扁粘连。
 * 这段必须排在上面的 .luck 规则之后——同特异性下后写的才生效。 */
@media(max-width:460px) {
  .luck { grid-template-columns:minmax(0,1fr); }
  .luck-overview { gap:14px; }
}

/* ---------- 排行榜：加载态与「我的排名」摘要 ---------- */
/* 切榜时旧内容留在原地并压暗，避免整页清空再重建造成的闪烁与布局跳动 */
.leaderboard-page #rank-panel.is-loading { opacity:.45; filter:saturate(.6);
  transition:opacity .15s ease,filter .15s ease; pointer-events:none; }
/* 底部摘要卡：不再复刻列表里那一整行（头像/昵称/副信息/变化全同），
 * 改为只给定位信息——名次、主值、与上一名的差距；列表中的高亮行仍保留。 */
.leaderboard-page .me.me-sum-host { display:block; padding:14px 20px; }
.me-sum { display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; }
.me-sum-head { display:flex; align-items:baseline; gap:8px; min-width:0; }
.leaderboard-page .me-sum .tag { display:inline-block; }
.me-sum-rank { color:var(--ui-ink); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.me-sum-name { color:var(--ui-muted); font-size:13px; min-width:0; overflow-wrap:anywhere; }
.me-sum-main { color:var(--ui-gold-light); font-size:19px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
.me-sum-gap { color:var(--ui-dim); font-size:12px; margin-left:auto; }
.me-sum .chip { flex:none; }
@media(max-width:560px) {
  .leaderboard-page .me.me-sum-host { padding:13px 14px; }
  .me-sum { gap:6px 10px; }
  .me-sum-main { font-size:17px; }
  .me-sum-gap { margin-left:0; flex-basis:100%; }
}