/* ==========================================================================
   Yonest · 样式表
   --------------------------------------------------------------------------
   【怎么换皮肤】
   本文件按「契约 / 结构」分成两节：
     第 1 节  皮肤契约（`:root` 里的令牌）—— 换肤**只改这一节**，其余一个字不要动。
     第 2 节  结构与组件 —— 全部取值都走 `var(--令牌)`，不写死颜色 / 圆角 / 阴影 / 字体。

   换肤步骤：把第 1 节整块替换成新皮肤的同名令牌即可（令牌名不变，值随便换）。
   想回退到旧的「编辑部」暖白纸感：`git show <上一个提交>:public/styles.css` 取回旧的 :root。

   【作用范围】
   默认**全站生效，包含运营后台**（/console、/admin-mail）。若要排除某个页面，
   需要「单独表明」——给该页的 <body> 加一个 class（如 `skin-plain`），
   然后在第 1 节末尾为它重新声明令牌，例如：

       body.skin-plain{ --radius:8px; --border-w:1px; --shadow:none; --panel:#fff; ... }

   这样只有被标记的页面走另一套值，其他页面仍按默认皮肤。

   【契约纪律】
   - 令牌名只增不改；新增令牌必须在本节写出「它管什么」，并在第 2 节有实际使用处。
   - 语义色（红=错误/危险、琥珀=待办/警告）可以调明暗，但**不要改语义**。
   - 少数「形状本身带含义」的元素（圆形序号 / 名次牌 / 未读点 / 进度条端头 / 计数角标）
     走 --radius-round 与 --radius-bar 两个专用令牌；想改成方角只调令牌，不必动第 2 节。

   当前皮肤：E「硬派方块」（Kraft / Brutal）——2px 硬边框 + 硬投影 + 零圆角 + 亮黄强调。
   ========================================================================== */

/* ==========================================================================
   第 1 节 · 皮肤契约
   ========================================================================== */
:root{
  /* ── ① 底色与层级 ───────────────────────────────── */
  --bg:#f2ede2;          /* 页面底色（牛皮纸） */
  --surface:#f2ede2;     /* 次级面：顶栏 / 底栏 / 内嵌块（此处与底色同色 = 扁平） */
  --muted-bg:#e3dbcb;    /* 更浅的衬底：选中态、图标块、头像底 */
  --panel:#fffdf7;       /* 「纸面」：卡片 / 输入框 / 弹层 */

  /* ── ② 文字与线 ─────────────────────────────────── */
  --ink:#100f0d;         /* 主文字（标题 / 正文强调） */
  --body:#2b2926;        /* 正文 */
  --muted:#6d675d;       /* 次要文字 */
  --rule:#100f0d;        /* 边线与分隔线颜色 */

  /* ── ③ 主色 ─────────────────────────────────────── */
  --brand:#100f0d;       /* 主色：选中边框、下划线、图标描边 */
  --brand-dark:#100f0d;  /* 主色的「深档」：链接与标题 */
  --brand-hover:#000;    /* 主色 hover */
  --brand-grad:#100f0d;  /* 品牌图形（logo 方块 / 游匠头像）的填充 */
  --brand-grad-fg:#fff;  /* 叠在品牌图形上的文字色（游匠头像首字） */

  /* ── ④ 主行动按钮（实心） ───────────────────────── */
  --btn-bg:#ffd94a;         /* 按钮底 */
  --btn-fg:#100f0d;         /* 按钮文字 */
  --btn-bg-hover:#100f0d;   /* hover：整块反色（硬派的关键手感） */
  --btn-fg-hover:#ffd94a;
  --btn-border:#100f0d;

  /* ── ⑤ 次级按钮（ghost） ────────────────────────── */
  --btn-ghost-bg:#fffdf7;
  --btn-ghost-fg:#100f0d;
  --btn-ghost-border:#100f0d;
  --btn-ghost-hover-bg:#e3dbcb;

  /* ── ⑥ 选中态（chip / 页签 / 列表项 / 榜单我的行） ─ */
  --sel-bg:#ffd94a;
  --sel-fg:#100f0d;

  /* ── ⑦ 语义色（可调明暗，别改语义） ─────────────── */
  --danger:#c0392b;
  --danger-fg:#fffdf7;
  --danger-bg:#f7ddd8;
  --danger-border:#100f0d;
  --warn-fg:#6b4a05;       /* 「待办 / 即将上线」 */
  --warn-bg:#ffe9a8;
  --warn-border:#100f0d;
  --mark-fg:#100f0d;       /* 「平台精选」标记 */
  --mark-bg:#ffd94a;
  --mark-border:#100f0d;
  --star:#8f5c00;          /* 星级（在牛皮纸上要够深才看得清） */
  --star-off:#c8bda6;
  --rank1-fg:#100f0d; --rank1-bg:#ffd94a;
  --rank2-fg:#100f0d; --rank2-bg:#ded4c1;
  --rank3-fg:#4a3520; --rank3-bg:#e8cfae;

  /* ── ⑧ 形状 ─────────────────────────────────────── */
  --radius:0px;          /* 大：卡片 / 面板 */
  --radius-md:0px;       /* 中：输入框 / 菜单 / 次级面板 */
  --radius-sm:0px;       /* 小：图标块 / 角标 */
  --radius-lg:0px;       /* 特大：弹窗 / 头像 */
  --radius-pill:0px;     /* 胶囊：chips / pills / 圆形按钮 */
  /* 「形状本身带含义」的两个圆角：默认保持圆（方形会丢掉语义）。
     若某个皮肤坚持全方角，把这两个令牌也改成 0 即可，不必改第 2 节。 */
  --radius-round:50%;    /* 圆件：名次牌 / 步骤序号 / 未读圆点 */
  --radius-bar:999px;    /* 胶囊端头：进度条 / 计数角标 */
  --border-w:2px;        /* 组件边框粗细（分隔线恒为 1px，见 --rule） */
  --shadow:none;                      /* 卡片静置：硬派用 0（无投影） */
  --shadow-lg:6px 6px 0 #100f0d;      /* 卡片 hover / 弹层 */
  --shadow-key:4px 4px 0 #100f0d;     /* 按键式组件（主按钮） */
  --shadow-key-sm:2px 2px 0 #100f0d;  /* 小按键式组件（chip / 角标 / eyebrow） */

  /* ── ⑨ 排版 ─────────────────────────────────────── */
  --font:"Inter","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --h-font:var(--font);   /* 标题字族（可与正文不同） */
  --h-weight:800;         /* 标题字重 */
  --h-track:-.02em;       /* 标题字距 */
  --h-transform:uppercase;/* 标题大小写（中文无影响，西文会转大写） */
  --mono:ui-monospace,Consolas,monospace;

  /* ── ⑩ 节奏 / 影像底 / 其它 ─────────────────────── */
  --gap-grid:22px;               /* 卡片网格间距（.grid / .spotlight / .mini-grid） */
  --hero-bg:#fffdf7;             /* 首页 hero 的底（可用渐变） */
  --ph-bg:#e3dbcb;               /* 图片/封面占位底 */
  --media-bg:#0b0d12;            /* 封面 / 游戏舞台的深底（内容色，通常不随皮肤变） */
  --scrim:rgba(16,15,13,.5);     /* 弹窗遮罩 */
  --ring:rgba(16,15,13,.5);      /* 聚焦环 */
  --sk-hi:#f7f3ea;               /* 骨架屏微光的高光色 */
  --card-lift:translate(-3px,-3px); /* 卡片 hover 位移（整套 transform，便于换皮肤） */
  --press:2px;                   /* 按键按下位移 */
}

/* 全站单一皮肤：不设分面暗色。商店、我的游戏库、学习层、游匠后台、游戏外壳、
   法务页都用同一套 E「硬派方块」令牌。 */

/* ==========================================================================
   第 2 节 · 结构与组件（只用 var(--令牌)，不要在这里写死颜色/圆角/阴影/字体）
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.65}
/* 锚点跳转时为吸顶导航留出高度，避免标题被导航盖住（如首页「浏览全部游戏」） */
html{scroll-padding-top:96px}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--h-font);font-weight:var(--h-weight);letter-spacing:var(--h-track);
  text-transform:var(--h-transform)}
h1{font-size:26px;margin:0 0 16px}
h2{font-size:17px;margin:28px 0 10px}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}

/* nav —— 吸顶：滚动时始终可见，作为全站唯一的页面切换入口 */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:var(--border-w) solid var(--rule);background:var(--surface)}
/* 滚动后才出现的投影，用来提示「它固定在顶部」而不是随页面滚走了 */
.nav.stuck{box-shadow:var(--shadow-lg)}
.nav .logo{font-weight:700;color:var(--brand-dark);font-size:17px;display:inline-flex;align-items:center;gap:8px}
.nav .logo::before{content:"";width:20px;height:20px;border-radius:var(--radius-sm);
  background:var(--brand-grad)}
.nav .logo .tagline{font-style:normal;font-weight:400;color:var(--muted);font-size:12px}
.nav nav{display:flex;gap:16px;flex-wrap:wrap}
.nav nav a{color:var(--muted);font-size:14px;padding:2px 0}
.nav nav a.on{color:var(--brand-dark);font-weight:700;border-bottom:2px solid var(--brand)}
.nav .userbox{margin-left:auto;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.nav .userbox .uname{font:inherit;font-weight:700;font-size:13px;color:var(--ink);max-width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* 身份区下拉：昵称按钮展开「积分 / 账户设置」（顶栏不再单独占位） */
.nav .userbox .user-menu{position:relative;display:inline-flex}
.nav .userbox .user-menu-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 2px;
  border:0;background:transparent;cursor:pointer}
.nav .userbox .user-menu-btn:hover{color:var(--brand-dark)}
/* 当前页在菜单里（/points、/settings）时，让昵称按钮也带上选中态的下划线 */
.nav .userbox .user-menu-btn.on{border-bottom:2px solid var(--brand)}
.nav .userbox .user-caret{font-size:11px;color:var(--muted);line-height:1}
.nav .userbox .user-menu-list{position:absolute;top:calc(100% + 8px);right:0;z-index:110;margin:0;padding:6px;list-style:none;
  min-width:150px;background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.nav .userbox .user-menu-list[hidden]{display:none}
.nav .userbox .user-menu-list a{display:block;padding:9px 10px;border-radius:var(--radius);color:var(--ink);
  font-size:14.5px;text-decoration:none;white-space:nowrap}
.nav .userbox .user-menu-list a:hover{background:var(--muted-bg);text-decoration:none}
.nav .userbox .user-menu-list a.on{color:var(--brand-dark);font-weight:700}
/* 游匠标识：可点进游匠后台的胶囊（浅底 + 细边框，hover 变品牌色） */
.nav .userbox .role-badge{display:inline-block;font-size:12px;font-weight:700;line-height:1;padding:4px 9px;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill);background:var(--muted-bg);color:var(--brand-dark);text-decoration:none}
.nav .userbox .role-badge:hover{border-color:var(--brand);color:var(--brand-dark)}
/* 运营账户：实心品牌色衬底，与游匠（浅底）和巢友（纯文本）区分开 */
.nav .userbox .role-badge.role-operator{background:var(--brand);border-color:var(--brand);color:var(--panel)}
/* 高级运营：亮黄实心 + 硬投影，在普通运营（近黑）之上再高一档 */
.nav .userbox .role-badge.role-senior{background:var(--btn-bg);border-color:var(--brand);color:var(--btn-fg);box-shadow:var(--shadow-key-sm)}
/* 实心徽章的 hover 要保住自己的字色，不能被上面「改深字色」的规则盖掉（否则字糊进底色） */
.nav .userbox .role-badge.role-operator:hover{color:var(--panel)}
.nav .userbox .role-badge.role-senior:hover{background:var(--btn-bg);border-color:var(--brand);color:var(--btn-fg)}
/* 右上角成组：语言切换 + 身份区，一起贴右（窄屏折到下一行） */
.nav .nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
/* 汉堡开关：只在手机断点出现（见下方 @media(max-width:760px)），桌面常隐。
   min-height/min-width 44px：触屏命中区域下限（WCAG 2.5.5 / Apple HIG），不靠 padding 碰运气 */
.nav-toggle{display:none;font:inherit;font-size:18px;line-height:1;padding:8px 12px;min-height:44px;min-width:44px;
  align-items:center;justify-content:center;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-md);background:var(--panel);color:var(--ink);cursor:pointer}
.nav-toggle:hover{border-color:var(--brand);color:var(--brand-dark)}
/* 语言切换：点国旗按钮展开下拉 */
.nav .lang{position:relative;display:inline-flex}
.nav .lang-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:600;line-height:1;
  padding:9px 14px;border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill);background:var(--panel);color:var(--ink);cursor:pointer;
  transition:border-color .15s,color .15s}
.nav .lang-btn:hover{border-color:var(--brand);color:var(--brand-dark)}
/* 国旗用内置 SVG（emoji 旗帜在 Windows 上会显示成「CN」两个字母） */
.nav .lang-flag{display:inline-flex;align-items:center;line-height:0}
.nav .lang-flag img{width:22px;height:16px;display:block;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(20,22,25,.12)}
.nav .lang-caret{font-size:11px;color:var(--muted)}
.nav .lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:110;margin:0;padding:6px;list-style:none;
  min-width:172px;background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.nav .lang-menu[hidden]{display:none}
.nav .lang-item{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:14.5px;text-align:left;
  padding:9px 10px;border:0;border-radius:var(--radius);background:transparent;color:var(--ink);cursor:pointer}
.nav .lang-item .lang-flag img{width:20px;height:15px}
.nav .lang-item:hover{background:var(--muted-bg)}
.nav .lang-item.on{color:var(--brand-dark);font-weight:700}
/* 「退出」做成明确按钮，避免只是一个不显眼的文字链接 */
.btn-logout{font:inherit;font-weight:700;font-size:12.5px;line-height:1;padding:7px 14px;border-radius:var(--radius-pill);
  border:var(--border-w) solid var(--brand);background:var(--panel);color:var(--brand-dark);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.btn-logout:hover{background:var(--btn-bg-hover);border-color:var(--btn-border);color:var(--btn-fg-hover)}
.btn-logout:active{transform:translateY(var(--press))}
/* 两步验证二维码：尺寸固定（扫码需要足够像素），白底由 SVG 自带 */
.twofa-qr{margin:14px 0;line-height:0}
.twofa-qr svg{width:168px;height:168px;border:var(--border-w) solid var(--rule)}

/* ---- 手机底部 tab 栏 ---- */
/**
 * 只在小屏出现（桌面 display:none）；由 app.js 的 mountTabBar 追加到 body 末尾，
 * 并把 .has-tabbar 挂到 body 上——底栏是 fixed 的，得给正文留出等高空白，
 * 否则页面最后一段内容会被它压住。顶栏的 ☰ 抽屉保留（语言切换与身份区在那里）。
 */
.tabbar{display:none}
@media(max-width:760px){
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:100;display:flex;
    border-top:var(--border-w) solid var(--rule);background:var(--surface);
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar .tab{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    align-items:center;gap:3px;padding:7px 2px 6px;color:var(--muted);text-decoration:none}
  /* 全局 a:hover 会给链接加下划线，在「图标 + 文字」的竖排里很难看，这里去掉 */
  .tabbar .tab:hover{text-decoration:none;color:var(--brand-dark)}
  .tabbar .tab.on{color:var(--brand-dark)}
  /* 选中态再加一条顶边短线：只靠深浅色差在小字上不够明确 */
  .tabbar .tab.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:24px;height:2px;border-radius:0 0 2px 2px;background:var(--brand)}
  .tabbar .tab-ico svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar .tab-txt{max-width:100%;font-size:10.5px;font-weight:700;line-height:1.15;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 未读数在这么小的字里要收一档，否则会把标签挤出去 */
  .tabbar .nav-badge{margin-left:2px;min-width:14px;padding:0 4px;font-size:9px}
  body.has-tabbar{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* hero */
.hero{background:var(--hero-bg);
  border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:32px;margin:24px 0;
  box-shadow:var(--shadow-lg)}
.hero h1{margin-bottom:10px;font-size:30px;line-height:1.3}
.hero p{margin:0;color:var(--body);max-width:70ch}
.hero .cta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.hero .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.4px;
  color:var(--brand-dark);background:var(--muted-bg);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius-pill);padding:4px 10px;margin-bottom:14px;box-shadow:var(--shadow-key-sm)}

/* hero 轮播：平台介绍固定一张，每个进行中的运营活动各占一张（见 storePage） */
.hero-carousel{position:relative;margin:24px 0}
.hero-viewport{position:relative}
.hero-slide[hidden]{display:none}
.hero-slide .hero{margin:0}
.hero-event{position:relative;overflow:hidden}
.hero-event > *:not(.hero-art){position:relative;z-index:1}
.hero-art{position:absolute;top:-30px;right:-30px;bottom:-30px;width:38%;pointer-events:none;
  background:repeating-linear-gradient(115deg,var(--btn-bg) 0 12px,var(--ink) 12px 18px,transparent 18px 46px);
  opacity:.85}
.hero-controls{position:absolute;right:20px;bottom:16px;display:flex;align-items:center;gap:10px;z-index:2}
.hero-arrow{font:inherit;font-size:16px;line-height:1;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill);background:var(--panel);color:var(--ink);
  cursor:pointer;box-shadow:var(--shadow-key-sm)}
.hero-arrow:hover{background:var(--btn-bg)}
.hero-dots{display:flex;gap:8px}
.hero-dot{width:10px;height:10px;padding:0;border:var(--border-w) solid var(--rule);border-radius:var(--radius-round);
  background:var(--panel);cursor:pointer}
.hero-dot.on{background:var(--btn-bg)}
@media(max-width:760px){
  .hero-art{display:none}
  .hero-controls{position:static;justify-content:flex-end;padding:10px 0 0}
}

/* ---- 运营活动页 ---- */
.event-page{padding-bottom:8px}
.event-hero{position:relative;overflow:hidden;background:var(--hero-bg);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:30px;margin:24px 0 8px}
.event-hero h1{margin:0 0 8px;font-size:30px}
.event-lede{font-size:16px;font-weight:800;color:var(--ink);margin:0 0 10px}
.event-hero p{max-width:72ch}
.event-hero .actions{margin-top:18px}
.event-meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.rule-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.rule-list li{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);padding:12px 14px}
.rule-list b{font-size:13px;color:var(--brand-dark);border:var(--border-w) solid var(--rule);background:var(--btn-bg);
  padding:2px 6px;flex:0 0 auto}
.event-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--gap-grid)}
.event-card{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden}
.event-cover{display:block;background:var(--media-bg)}
.event-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.event-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.event-card-body .name{font-weight:800;font-size:15px}
.event-card-body .name a{color:var(--ink)}
.event-note{margin:2px 0;padding:8px 10px;background:var(--muted-bg);border-left:4px solid var(--btn-bg);
  font-size:13px;color:var(--body)}
.event-note b{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.event-card .row{margin-top:auto}
.event-form{display:flex;flex-direction:column;gap:6px;max-width:720px}
.event-form select,.event-form textarea{width:100%}
.event-mine{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.event-reward{display:flex;gap:16px;align-items:center;background:var(--panel);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.event-reward > b{font-size:34px;line-height:1;color:var(--brand-dark);border:var(--border-w) solid var(--rule);
  background:var(--btn-bg);padding:10px 14px;box-shadow:var(--shadow-key-sm);flex:0 0 auto}
.event-reward p{margin:0 0 6px}

/* ---- 积分页 / 定价徽标 ---- */
.pill.price{background:var(--btn-bg);border-color:var(--rule);color:var(--brand-dark);font-weight:800}
.points-page{padding-bottom:8px}
.points-hero{background:var(--hero-bg);border:var(--border-w) solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:28px 30px;margin:24px 0 8px}
.points-hero h1{margin:0 0 8px;font-size:30px}
.points-lede{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 14px;max-width:72ch}
.points-balance{display:inline-flex;flex-direction:column;gap:2px;background:var(--panel);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow)}
.points-balance span:first-child{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.points-balance b{font-size:38px;line-height:1.05;color:var(--brand-dark)}
.points-gate{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:16px 18px}
.points-gate p{margin:0 0 10px}
.points-table-wrap{overflow-x:auto;border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel)}
.points-table{width:100%;border-collapse:collapse;font-size:13px}
.points-table th,.points-table td{padding:8px 12px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.points-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--muted-bg)}
.points-table tr:last-child td{border-bottom:0}
.points-table tr.local{background:var(--muted-bg)}
.points-table td.plus{color:var(--brand-dark);font-weight:800;white-space:nowrap}
.points-table td.minus{color:var(--danger);font-weight:800;white-space:nowrap}
.points-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.points-ways article{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:14px 16px}
.points-ways b{display:block;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:6px}
.points-ways p{margin:0 0 8px;font-size:13px;color:var(--body)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 8px}
/* 游匠数 < 10 时首页只留「作品 / 评价」两张卡（见 storePage），保持等宽 */
.stats.two{grid-template-columns:repeat(2,1fr)}
.stat{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:24px;line-height:1.2;color:var(--brand-dark)}
.stat span{font-size:12.5px;color:var(--muted)}
/* 数字用等宽字形：数值变化时宽度不跳动（统计 / 均分 / 分布计数；排行榜的 .board-row .val 已单独声明） */
.stat b,.rating-big b,.dist-c{font-variant-numeric:tabular-nums}

/* ---- 数据看板（/console-insights 游匠 · /admin-insights 运营） ----
   图表是 dashboard.js 直出的内联 SVG；这里只给令牌化的描边 / 填充，
   换肤不用动 JS（颜色全部来自第 1 节）。 */
.dash-range{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 0}
.dash-range .chip{display:inline-flex;align-items:center;min-height:36px}
.dash-card{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:16px;margin:16px 0}
.dash-card h2{margin:0 0 12px;font-size:15px}
.dash-chart{overflow-x:auto}
/* min-width 让窄屏保留可读的字号与圆点，改用横向滚动（而不是把 90 天压成一条线） */
.dash-chart svg{display:block;width:100%;min-width:460px;height:auto}
.dash-grid{stroke:var(--muted-bg);stroke-width:1}
.dash-axis{fill:var(--muted);font-size:11px;font-family:var(--font);font-variant-numeric:tabular-nums}
.dash-area{fill:var(--sel-bg);opacity:.45}
.dash-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dash-s1{stroke:var(--brand-dark)}
.dash-s2{stroke:var(--danger)}
.dash-dot{stroke:var(--panel);stroke-width:1}
.dash-dot.dash-s1{fill:var(--brand-dark)}
.dash-dot.dash-s2{fill:var(--danger)}
.dash-legend{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12.5px;color:var(--muted);margin:0 0 8px}
.dash-legend-item{display:inline-flex;align-items:center}
.dash-key{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:var(--border-w) solid var(--rule)}
.dash-key.dash-s1{background:var(--brand-dark)}
.dash-key.dash-s2{background:var(--danger)}
.dash-bars{display:grid;gap:9px}
.dash-bar{display:grid;grid-template-columns:minmax(80px,1.1fr) minmax(80px,3fr) auto;gap:10px;align-items:center;font-size:13px}
.dash-bar-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-track{display:block;height:14px;background:var(--muted-bg);border:1px solid var(--rule)}
.dash-fill{display:block;height:100%;background:var(--sel-bg);border-right:1px solid var(--rule)}
.dash-bar b{font-variant-numeric:tabular-nums;text-align:right}
.dash-table-wrap{overflow-x:auto}
.dash-table{width:100%;border-collapse:collapse;font-size:13px}
.dash-table th,.dash-table td{padding:8px 10px;border-bottom:1px solid var(--muted-bg);text-align:left;white-space:nowrap}
.dash-table th{font-size:12px;color:var(--muted);font-weight:700}
.dash-table .num{text-align:right;font-variant-numeric:tabular-nums}
.dash-table tr:last-child td{border-bottom:0}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;margin:14px 0 4px}
/* 筛选行的行首小标题（品类 / 标签）：固定行高与 chip 对齐，让两行筛选条件一眼区分 */
.filters .filter-label{display:inline-flex;align-items:center;height:30px;font-size:12.5px;font-weight:700;color:var(--muted);margin-right:2px}
/* chips 容器：默认全部可见；store.js 量出 chip 高度后把 max-height 夹到两排，超出部分裁掉。
   底部 padding 给最底行的硬投影留出空间，避免被 overflow:hidden 裁掉；
   这个 padding 会被 store.js 读入折叠高度计算（改它不用动 JS）。 */
.filters .chips-wrap{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 auto;min-width:0;overflow:hidden;padding-bottom:4px}
/* 「更多 / 收起」是触控按钮：默认只有 ~37px 高，低于 44px 触控标准。
   补到 44px 并让文字垂直居中（其余筛选 chip 是展示型，不需要放大）。 */
.filters .chip.more{flex:none;display:inline-flex;align-items:center;min-height:44px;color:var(--brand-dark)}
/* .chip 的 display:inline-block 会盖掉 UA 的 [hidden]{display:none}，这里显式关掉，否则「更多」恒显示 */
.filters .chip.more[hidden]{display:none}
/* 商店搜索框：复用全局 input 基础样式，只加宽度与间距（不占满整行） */
.store-search{margin:16px 0 0}
.store-search .search-input{max-width:360px;font-size:13.5px}
/* 搜索中收起「精选」展示区与排行榜；「无精选」时服务端的内联 display:none 优先级更高，不受影响 */
body.searching #featured,
body.searching #boards{display:none}
.chip{display:inline-block;font:inherit;font-size:13px;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);
  border:var(--border-w) solid var(--rule);background:var(--panel);color:var(--muted);cursor:pointer;
  box-shadow:var(--shadow-key-sm)}
.chip:hover{border-color:var(--brand)}
.chip.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--brand)}
span.chip{cursor:default}
/* 带国旗的 chip（语言选择）：图标 + 文字横向对齐，比纯文字 chip 略大。
   国旗用 /flags/*.svg —— emoji 旗帜在 Windows 上会退化成「CN」两个字母 */
.chip.flag-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;font-size:13.5px}
.chip.flag-chip img{width:18px;height:14px;display:block;border-radius:2px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(20,22,25,.12)}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin:18px 0 8px}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.card:hover{transform:var(--card-lift);box-shadow:var(--shadow-lg)}
.cover{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--ph-bg);
  overflow:hidden;font-size:34px;font-weight:700;color:var(--brand-dark);text-decoration:none}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
a.cover:hover{text-decoration:none}
.card .body{padding:13px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .name{font-weight:var(--h-weight);font-size:15.5px}
.card .name a{color:var(--ink)}
.card .tag{font-size:12.5px;color:var(--muted)}
.card .meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* 卡片上的「游匠 名字」：名字链到游匠公开主页 */
.card .by{font-size:12px;color:var(--muted)}
.card .by a{color:var(--brand-dark)}
/* 卡片上的标签：与「品类/免费」的填充药丸区分开——标签用描边，可换行 */
.card .tags{display:flex;gap:5px;flex-wrap:wrap}
.pill.tag{background:var(--panel);border-color:var(--rule);color:var(--body)}
/* 卡片行动行：长文本语言（如 ru 的「Получить и играть」）下按钮会超宽，
   允许换行——否则会被 .card 的 overflow:hidden 裁掉 */
.card .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:10px}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:var(--radius-pill);
  background:var(--muted-bg);color:var(--brand-dark);border:var(--border-w) solid var(--rule)}
.pill.danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.pill.soon{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-fg)}
/* 卡片上的「面向设备」图标（电脑 / 手机）：与 pill 同排，只画图标，平台名走 title/aria-label */
.plat{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-sm);background:var(--panel);color:var(--muted)}

/* ---- 封面浮层（精选角标 / hover 行动点）---- */
/* 两个覆盖物共用一个相对定位容器：这样「开始游戏」是封面之外的同级 <a>，
   而不是嵌在封面 <a> 里（嵌套 <a> 是无效 HTML，点击行为也不可预期） */
.cover-wrap{position:relative}
/* 精选角标：贴在封面左上角。比 meta 行里的药丸醒目，所以卡片正文不再重复放精选 pills */
.cover-badge{position:absolute;top:9px;left:9px;pointer-events:none;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;
  background:var(--mark-bg);border:var(--border-w) solid var(--mark-border);color:var(--mark-fg);border-radius:var(--radius-sm);padding:3px 8px;
  box-shadow:var(--shadow-key-sm)}
/* 紧凑档：运营后台的缩略图只有 84px 宽，常规档会占满整个封面。
   文案按语言长度不一（ru 的「Избранное」最长），超出就省略号，不许撑破缩略图 */
.cover-badge.sm{top:4px;left:4px;font-size:10px;padding:1px 5px;border-radius:var(--radius-sm);letter-spacing:0;
  max-width:calc(100% - 8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* hover 行动点：贴在封面右下角。
   只在真有 hover 的设备上渲染（触屏没有 hover，显示了也点不出来）；
   键盘 Tab 到它时靠 :focus-within 显示，不会变成看不见的焦点陷阱 */
.cover-play{display:none}
@media(hover:hover){
  .cover-play{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
    font:inherit;font-size:12.5px;font-weight:700;line-height:1;padding:8px 13px;border-radius:var(--radius-pill);
    border:var(--border-w) solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;cursor:pointer;
    opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
  .card:hover .cover-play,.card:focus-within .cover-play{opacity:1;transform:none;pointer-events:auto}
  .cover-play:hover{background:var(--btn-bg-hover);border-color:var(--btn-border);color:var(--btn-fg-hover);text-decoration:none}
  .cover-play svg{display:block}
}

/* buttons */
.btn{display:inline-block;font:inherit;font-weight:700;font-size:14px;line-height:1;
  border:var(--border-w) solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--radius);
  padding:10px 14px;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow-key)}
.btn:hover{background:var(--btn-bg-hover);color:var(--btn-fg-hover);text-decoration:none}
.btn:active{transform:translate(var(--press),var(--press));box-shadow:none}
.btn.ghost{background:var(--btn-ghost-bg);color:var(--btn-ghost-fg);border-color:var(--btn-ghost-border);box-shadow:none}
.btn.ghost:hover{background:var(--btn-ghost-hover-bg)}
.btn.sm{padding:7px 11px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* 收藏按钮（商店卡片 / 详情页 / 游戏库）：未收藏为镂空灰、已收藏为填充红 */
.fav-btn{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.fav-btn svg{display:block}
.fav-btn:hover{color:var(--brand-dark)}
.fav-btn.on,.fav-btn.on:hover{color:var(--danger)}
.fav-btn.on svg{fill:currentColor;animation:fav-pop .18s ease-out}
@keyframes fav-pop{from{transform:scale(.7)}to{transform:scale(1)}}

/* form */
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 4px}
input,textarea,select{width:100%;font:inherit;padding:10px 12px;border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ring);border-color:var(--brand)}
.actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.msg{margin-top:12px;font-size:13px;color:var(--danger);min-height:18px}
.msg.ok{color:var(--brand-dark)}

/* 游匠后台的「飘字」提示：顶部居中浮层，由 console.html 的 toast() 控制显隐 */
/* z-index 必须高于吸顶导航 .nav(100) 与语言菜单(110)，否则飘字会被顶栏盖住 */
.console-toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:200;
  padding:9px 18px;border-radius:var(--radius-pill);font-size:13px;font-weight:700;
  color:var(--danger);background:var(--panel);border:var(--border-w) solid var(--danger-border);box-shadow:var(--shadow-lg)}
.console-toast.ok{color:var(--brand-dark);border-color:var(--rule)}
.console-toast[hidden]{display:none}

/* 下架确认弹窗（console.html）：原生 dialog，硬边风格与其他面板一致 */
.ops-dialog{width:min(520px,calc(100vw - 32px));padding:20px;border:var(--border-w) solid var(--ink);
  border-radius:var(--radius);background:var(--panel);color:var(--ink);box-shadow:var(--shadow-lg)}
.ops-dialog::backdrop{background:rgba(16,15,13,.45)}
.ops-dialog h2{margin:0 0 8px;font-size:18px}
.ops-dialog textarea{width:100%;font:inherit;padding:8px;border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);background:var(--surface);color:var(--ink)}
.ops-dialog .actions{margin-top:12px}

/* ---- 飘字提示（app.js 的 flash()）：点击成功后从按钮 / 提示文案上方浮起 ---- */
.flash-layer{position:fixed;inset:0;z-index:260;pointer-events:none}
.flash{position:fixed;transform:translate(-50%,-100%);padding:4px 11px;font-size:12.5px;font-weight:700;
  line-height:1.5;color:var(--brand-dark);background:var(--panel);
  max-width:calc(100vw - 16px);text-align:center; /* 长文案在窄屏换行，而不是顶出视口 */
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill);box-shadow:var(--shadow-key-sm);
  animation:flash-up 1.2s ease-out forwards}
@keyframes flash-up{
  0%{opacity:0;transform:translate(-50%,-70%)}
  18%{opacity:1;transform:translate(-50%,-100%)}
  70%{opacity:1;transform:translate(-50%,-135%)}
  100%{opacity:0;transform:translate(-50%,-165%)}
}
/* 减少动效：不做位移，只原地显示 1 秒左右（移除仍由 JS 定时器负责） */
@media(prefers-reduced-motion:reduce){
  .flash{animation:none;opacity:1;transform:translate(-50%,-110%)}
}

/* 运营后台「全部作品」搜索框：作品多时按名称 / slug / 作者快速定位 */
.console-search{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.console-search[hidden]{display:none}
.console-search input{flex:1 1 260px;min-width:0}
/* .list .item 的 display:flex 会盖掉 UA 的 [hidden]{display:none}，搜索过滤要显式关掉 */
.list .item[hidden]{display:none}

/* 字段规则说明 / 字段级错误 / 提示块 */
.field-hint{margin:6px 0 0;font-size:12px;color:var(--muted);line-height:1.55}
.field-error{margin:4px 0 0;font-size:12.5px;color:var(--danger);line-height:1.5}
/* 勾选组（上传表单的硬件平台、后台的平台编辑）：横向排列，每项的点击区域包含文字 */
.choice-row{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 0}
.choice{display:inline-flex;align-items:center;gap:7px;font-size:14px;cursor:pointer}
.choice input{width:16px;height:16px;margin:0;accent-color:var(--brand)}
.field-msg{margin:4px 0 0;font-size:12.5px;color:var(--danger);line-height:1.55}
.field-msg:empty{display:none}
/* Turnstile 加载失败兜底：错误文案 + 重试按钮（见 app.js 的 showTurnstileError） */
.ts-fallback{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ts-fallback .field-msg{margin:0}
.mail-note{margin-top:8px;background:var(--surface);border:var(--border-w) solid var(--rule);
  border-left:3px solid var(--brand);border-radius:var(--radius);padding:9px 12px;
  font-size:12.5px;line-height:1.6;color:var(--body)}
.mail-note b{display:block;color:var(--brand-dark);margin-bottom:2px;font-size:13px}
.mail-note span{display:block}

/* misc */
.muted{color:var(--muted)}
.small{font-size:12.5px}
.list{margin:10px 0;border-top:1px solid var(--rule)}
.list .item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.list .item .grow{flex:1}

/* 账户设置页（settings.html）：每个自助区块之间用一条细线分隔，首块不重复画线 */
.settings-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
.settings-block:first-of-type{margin-top:0;padding-top:0;border-top:0}
.settings-block h2{margin-top:0}

/* 可展开块（游匠后台列表里的 <details>）：
   summary 那一条用带色的衬底，展开后的内容用更淡的衬底，两者之间用边框分隔 */
details.acc{margin-top:8px;border:var(--border-w) solid var(--rule);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
details.acc>summary{cursor:pointer;list-style:none;user-select:none;font-size:12.5px;font-weight:700;
  color:var(--brand-dark);background:var(--muted-bg);padding:9px 12px}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"▸";display:inline-block;width:13px;color:var(--brand);transition:transform .15s}
details.acc[open]>summary::before{transform:rotate(90deg)}
details.acc[open]>summary{border-bottom:1px solid var(--rule)}
/* 展开区的内容是 details 的直接子元素（没有包裹层），用左右外边距当内边距 */
details.acc>*:not(summary){margin-left:12px;margin-right:12px}
details.acc>*:not(summary):last-child{margin-bottom:12px}
/* height:auto 不可省：标记里带了 height="360" 这个表现属性，只设 width 的话
   它会生效（表现属性只是低优先级的 author 声明，但也得有人覆盖它），
   宽高都成定值后 aspect-ratio 就完全不参与计算 —— 缩略图会被拉成 84×360 的竖条。 */
.thumb{flex:0 0 84px;width:84px;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--radius);border:var(--border-w) solid var(--rule);background:var(--media-bg)}
/* 运营后台列表：要在缩略图上压「精选」角标，所以外面套一层相对定位的父级。
   定宽从 .thumb 挪到父级上，缩略图本身撑满父级（移动端断点见下方 760px 处）。 */
.thumb-wrap{position:relative;flex:0 0 84px}
.thumb-wrap>.thumb{width:100%}
code{font-family:var(--mono);font-size:13px;background:var(--surface);
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-sm);padding:1px 5px}
pre{background:var(--surface);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:12px;overflow:auto;font-size:12.5px}
.card.auth-card{max-width:420px;width:calc(100% - 32px);margin:48px auto;padding:24px;border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
.auth-card h1{font-size:20px;margin:4px 0 8px}
.auth-card .back-line{margin-top:14px}
.back-line a{color:var(--brand-dark)}
.mail-note a{color:var(--brand-dark);font-weight:700}
.brandline{font-weight:700;color:var(--brand-dark);margin-bottom:8px}
.whoami{background:var(--surface);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:10px 12px;font-size:13.5px;margin:12px 0}
.doc{background:var(--surface)}
.doc-wrap{max-width:720px;margin:40px auto;padding:24px;background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.tabs{display:flex;gap:8px;margin-bottom:8px}
/* 补回被上面的 display:flex 覆盖掉的 UA 规则：[hidden] 的元素必须真的不显示 */
.tabs[hidden]{display:none}
.tabs button{font:inherit;font-size:13px;font-weight:700;padding:8px 12px;border-radius:var(--radius);
  border:var(--border-w) solid var(--rule);background:var(--panel);color:var(--muted);cursor:pointer}
.tabs button.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--brand)}
.panel{display:none}.panel.on{display:block}
.statusline{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:10px}

/* ---- 游戏详情页 ---- */
.crumbs{margin:18px 0 0;font-size:13.5px}
.detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start;margin:14px 0 8px}
.detail-cover{border:var(--border-w) solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--media-bg)}
.detail-cover img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
/* 截图墙：有上传按网格铺开；没有上传时同一套样式承载回退头图（见 detailPage 的 shotsBlock） */
.shot-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.shot{display:block;border:var(--border-w) solid var(--rule);border-radius:var(--radius);overflow:hidden;
  background:var(--media-bg);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.shot:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.shot img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.detail-info h1{margin:0 0 6px}
.detail-tagline{margin:0 0 12px;color:var(--body)}
.detail-info .meta-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.detail-info .actions{margin-top:16px}
.detail-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;margin-top:28px;
  border-top:1px solid var(--rule);padding-top:8px}
.detail-side{background:var(--surface);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:6px 16px 16px;height:max-content}
/* 详情页「怎么玩」步骤（类名避开演示页自己的 .steps） */
.howto{list-style:none;margin:8px 0;padding:0}
.howto li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed var(--rule)}
.howto li:last-child{border-bottom:0}
/* 圆形序号：圆是「序号」语义的一部分，默认走 --radius-round（想改方角调令牌即可） */
.step-no{flex:0 0 22px;height:22px;border-radius:var(--radius-round);background:var(--muted-bg);color:var(--brand-dark);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.facts{margin:8px 0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin:14px 0}
.mini{display:flex;flex-direction:column;gap:4px;border:var(--border-w) solid var(--rule);border-radius:var(--radius);
  overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.mini:hover{text-decoration:none;box-shadow:var(--shadow-lg)}
.mini img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.mini-name{font-weight:700;color:var(--ink);font-size:14px;padding:0 12px}
.mini-tag{font-size:12px;color:var(--muted);padding:0 12px 12px}

/* ---- 法律页面 ---- */
.legal{background:var(--surface);padding:32px 0 48px}
.legal-wrap{max-width:760px;margin:0 auto;padding:28px 30px;background:var(--panel);
  border:var(--border-w) solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.legal-wrap h1{margin-bottom:4px}
.legal-wrap h2{font-size:16px;margin:26px 0 6px;padding-top:12px;border-top:1px solid var(--rule)}
.legal-wrap ul{padding-left:20px}
.legal-wrap li{margin:4px 0}
.legal-meta{color:var(--muted);font-size:12.5px;margin:0 0 6px}
.notice{background:var(--warn-bg);border:var(--border-w) solid var(--warn-border);color:var(--warn-fg);border-radius:var(--radius);
  padding:10px 14px;font-size:13px;margin:14px 0}

/* ---- 页脚 ---- */
.site-footer{border-top:1px solid var(--rule);background:var(--surface);margin-top:48px;padding:26px 20px 34px}
.site-footer .inner{max-width:1000px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;font-size:13px;color:var(--muted)}
.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}
.site-footer a{color:var(--muted)}
.site-footer .fine{max-width:60ch;font-size:12px;line-height:1.7}

/**
 * 页脚吸底：内容不足一屏时把页脚推到视口底部，不再随上方内容多少上下跳
 * （站内信管理这类短内容页尤其明显）。
 * 只作用于挂了页脚的页面——mountFooter 会给 body 加 .has-footer；
 * 登录 / 找回密码（body.doc）与游戏外框（body.player）不挂页脚，不受影响。
 */
body.has-footer{display:flex;flex-direction:column;min-height:100vh}
/* width:100% 不可省：.wrap 带 margin:0 auto，而「横向 auto margin」会让 flex 子项
   放弃 stretch、改为按内容收缩（fit-content）——于是 max-width:1000px 失效，
   页面宽度随内容变化（内容少的后台页会塌成四五百像素，各页签宽度还不一致）。
   显式给满宽后，max-width + auto margin 才按预期把内容压到 1000px 并居中。 */
body.has-footer > main,
body.has-footer > .wrap,
body.has-footer > .legal{flex:1 0 auto;width:100%}

/* ---- P1：精选 / 评价 / 排行榜 / 游匠主页 ---- */

/* 星级 */
.stars{color:var(--star);letter-spacing:1px;font-size:14px}
.stars-off{color:var(--star-off)}

/* 精选位（角标样式见上方 .cover-badge） */
.ribbon{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.3px;
  background:var(--mark-bg);border:var(--border-w) solid var(--mark-border);color:var(--mark-fg);border-radius:var(--radius-sm);padding:3px 8px;margin-bottom:8px}
.featured-note{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  background:var(--mark-bg);border:var(--border-w) solid var(--mark-border);border-radius:var(--radius);padding:12px 16px;margin:16px 0 0;font-size:13.5px}
.featured-note b{color:var(--mark-fg);flex:0 0 auto}
.featured-note span{color:var(--body)}

/* ---- 精选位：可伸缩 spotlight（配套 src/server.ts 的 spot()）---- */
/**
 * 默认形态是普通卡片网格：图在上、文字在下，整张卡都是一个链接。
 * 这样**触屏与无 JS** 时都是完整可读的卡片，不会变成「几条只剩标题的窄条」。
 * store.js 给容器加 .js 后，再叠一层 @media(hover:hover) 才切换成横向可伸缩——
 * 也就是说折叠只发生在「有 hover 的设备」上，那里才有悬停展开这条路走。
 */
.spotlight{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin:0 0 8px}
@media(max-width:860px){.spotlight{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.spotlight{grid-template-columns:1fr}}
.spot{position:relative;overflow:hidden;border:var(--border-w) solid var(--rule);border-radius:var(--radius);
  background:var(--ph-bg);box-shadow:var(--shadow)}
.spot-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ph-bg)}
.spot-hit{display:block;text-decoration:none}
.spot-hit:hover{text-decoration:none}
/* 遮罩只在叠字模式下有意义（见下面的 hover 分支），默认不画 */
.spot-scrim{display:none}
.spot-body{display:flex;flex-direction:column;gap:5px;padding:10px 12px 12px;color:var(--ink)}
.spot-name{font-size:15.5px;font-weight:700;line-height:1.3}
.spot-more{display:flex;flex-direction:column;gap:4px}
.spot-tag{font-size:12.5px;line-height:1.45;color:var(--muted)}
.spot-note{font-size:12.5px;line-height:1.55;color:var(--body)}
.spot-open{font-size:12.5px;font-weight:700;color:var(--brand-dark)}
@media(hover:hover){
  /* 有 hover：横向一排，展开的那张占大头；文字叠在封面图上，靠渐变遮罩保证可读 */
  .spotlight.js{display:flex;gap:12px;height:clamp(260px,30vw,400px)}
  .spotlight.js .spot{flex:1 1 0;min-width:0;background:var(--media-bg);
    transition:flex-grow .5s cubic-bezier(.2,.7,.3,1)}
  .spotlight.js .spot.on{flex-grow:2.6}
  .spotlight.js .spot-img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .spotlight.js .spot-hit{position:absolute;inset:0}
  .spotlight.js .spot-scrim{display:block;position:absolute;inset:0;
    background:linear-gradient(transparent 18%,rgba(12,14,18,.52) 52%,rgba(12,14,18,.88))}
  .spotlight.js .spot-body{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff}
  /* 折叠态：只留名字；简介与精选说明靠 max-height 收起（可过渡），不是 display:none */
  .spotlight.js .spot-more{max-height:0;opacity:0;overflow:hidden;
    transition:max-height .4s ease,opacity .3s ease}
  .spotlight.js .spot.on .spot-more{max-height:8em;opacity:1}
  .spotlight.js .spot:not(.on) .spot-name{font-size:13px}
  .spotlight.js .spot-tag{color:rgba(255,255,255,.82)}
  .spotlight.js .spot-note{color:rgba(255,255,255,.78)}
  .spotlight.js .spot-open{color:#fff}
  /* 「详情 →」只给展开的那张：折叠的窄条里放不下 */
  .spotlight.js .spot-open{display:none}
  .spotlight.js .spot.on .spot-open{display:block}
}

/* 区块 */
.block{margin-top:32px;border-top:1px solid var(--rule);padding-top:8px}
.block-head{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.block-head h2{margin-bottom:8px}
.section-head{display:flex;gap:12px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;margin-top:34px}
.section-head h2{margin-bottom:6px}
.section-head .hint{font-size:12.5px;color:var(--muted);max-width:52ch}

/* 评价汇总 */
.rating-summary{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  background:var(--surface);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:16px 20px;margin:10px 0 18px}
.rating-big{text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.rating-big b{font-size:36px;line-height:1.1;color:var(--brand-dark)}
.dist{display:flex;flex-direction:column;gap:4px}
.dist-row{display:grid;grid-template-columns:38px 1fr 28px;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
/* 评分分布条：端头走 --radius-bar（方头会看不出「进度」） */
.dist-bar{height:8px;background:var(--ph-bg);border-radius:var(--radius-bar);overflow:hidden}
.dist-bar i{display:block;height:100%;background:var(--brand);border-radius:var(--radius-bar)}
.dist-c{text-align:right}

/* 评价表单 */
.review-form{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:16px 18px;margin:0 0 18px}
.review-form h3{margin:0 0 10px;font-size:15px}
.review-form textarea{resize:vertical}
.star-pick{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.star-opt{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink);cursor:pointer;margin:0}
.star-opt input{width:auto;margin:0}
.panel-on{display:block}

/* 评价列表 */
.review-list{list-style:none;margin:0;padding:0}
.review-list .review{border-top:1px solid var(--rule);padding:14px 0}
.review-list .review:first-child{border-top:0}
.review-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.review-text{margin:6px 0 0;font-size:14px;color:var(--body)}

/* 排行榜 */
.board{list-style:none;margin:10px 0;padding:0}
.board-row{display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:center;
  padding:10px 12px;border:var(--border-w) solid var(--rule);border-radius:var(--radius-md);margin-bottom:6px;background:var(--panel);font-size:14px}
.board-row.me{border-color:var(--brand);background:var(--sel-bg);color:var(--sel-fg)}
/* 圆形名次牌：默认走 --radius-round */
.rank{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-round);
  background:var(--muted-bg);color:var(--brand-dark);font-weight:700;font-size:13px}
.rank-1{background:var(--rank1-bg);color:var(--rank1-fg)}
.rank-2{background:var(--rank2-bg);color:var(--rank2-fg)}
.rank-3{background:var(--rank3-bg);color:var(--rank3-fg)}
.board-row .who{font-weight:600}
.board-row .val{font-weight:700;color:var(--brand-dark);font-variant-numeric:tabular-nums}
.me-best{margin:12px 0 6px;font-size:14px}
.me-best b{color:var(--brand-dark);font-size:16px}

/* 「我的成就」（详情页；只有本人能看到自己解锁了什么） */
.ach-list{list-style:none;margin:10px 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.ach-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:var(--border-w) solid var(--rule);
  border-radius:var(--radius-md);background:var(--panel);font-size:13.5px}

/* 首页「排行榜」区块（多榜 Tab 切换）。类名 lb-*，与上面详情页榜单的 .board-* 区分开，
   避免复用 .board-row 的 4 列网格。 */
.lb-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}
.lb-panel{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:12px 14px}
.lb-lead{margin:0 0 10px}
/* 名次列表：默认两列「按列填充」（左列 1–10、右列 11–20），保证名次仍是自上而下的阅读顺序 */
.lb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(10,auto);grid-auto-flow:column;gap:4px 18px}
.lb-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;
  padding:5px 6px;border-radius:var(--radius-sm);font-size:14px}
.lb-row:hover{background:var(--muted-bg)}
.lb-rank{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:var(--radius-round);background:var(--muted-bg);color:var(--brand-dark);
  font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.lb-row:nth-child(1) .lb-rank{background:var(--rank1-bg);color:var(--rank1-fg)}
.lb-row:nth-child(2) .lb-rank{background:var(--rank2-bg);color:var(--rank2-fg)}
.lb-row:nth-child(3) .lb-rank{background:var(--rank3-bg);color:var(--rank3-fg)}
.lb-link{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;font-weight:600}
.lb-link:hover .lb-name{text-decoration:underline}
.lb-cover{flex:0 0 auto;width:64px;height:36px;object-fit:cover;border:1px solid var(--rule);
  border-radius:var(--radius-sm);background:var(--ph-bg)}
.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-value{font-weight:700;color:var(--brand-dark);font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
.lb-empty{margin:4px 0}
@media(max-width:860px){
  .lb-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}
@media(max-width:520px){.lb-cover{display:none}}

/* 游匠主页 */
.maker-head{display:flex;gap:18px;align-items:flex-start;margin:14px 0 4px}
.maker-avatar{flex:0 0 64px;width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;color:var(--brand-grad-fg);background:var(--brand-grad)}
.maker-info h1{margin:0 0 4px}
.maker-bio{margin:8px 0 0;color:var(--body);max-width:70ch}

/* 游匠声望（判定规则见 src/reputation.ts） */
.rep{display:flex;flex-direction:column;gap:6px;margin:14px 0 0;padding:12px 16px;
  background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.rep-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rep-title{font-size:13.5px;font-weight:700;color:var(--brand-dark)}
/* 五格档位：实心＝已达。用方点而非圆点，与全站方形语汇一致 */
.rep-pips{display:inline-flex;gap:3px}
.rep-pips .pip{display:block;width:14px;height:7px;border-radius:var(--radius-sm);
  background:var(--muted-bg);border:var(--border-w) solid var(--rule)}
.rep-pips .pip.on{background:var(--brand);border-color:var(--brand)}
.rep-level{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rep-stats{margin:0;font-size:13.5px;color:var(--body);font-variant-numeric:tabular-nums}
.rep-rule{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.rep-hint{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.profile-form{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:16px 18px;margin-top:10px}
.profile-form textarea{resize:vertical}

/* ---- 游戏外框（iframe 外壳 /g/:slug）---- */
/* 100dvh 兜底 100vh：手机浏览器地址栏收起/展开会让 100vh 比可视高度高，游戏底部被截 */
body.player{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.player-bar{display:flex;align-items:center;gap:10px;flex:none;padding:10px 14px;
  background:var(--surface);border-bottom:1px solid var(--rule);z-index:2}
.player-back{font-weight:700;font-size:13.5px;color:var(--brand-dark);white-space:nowrap;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill);padding:7px 14px;background:var(--panel)}
.player-back:hover{background:var(--btn-bg-hover);border-color:var(--btn-border);color:var(--btn-fg-hover);text-decoration:none}
.player-name{font-weight:700;font-size:14px;color:var(--ink);max-width:30ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-spacer{flex:1}
.player-toast{font-size:12.5px;font-weight:700;color:var(--brand-dark);background:var(--panel);
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill);padding:6px 12px;max-width:38ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-btn{font:inherit;font-weight:700;font-size:12.5px;line-height:1;padding:8px 13px;border-radius:var(--radius-pill);
  border:var(--border-w) solid var(--rule);background:var(--panel);color:var(--brand-dark);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.player-btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-border);color:var(--btn-fg-hover);text-decoration:none}
/* 游戏舞台的深底是「内容区」的底色，不随皮肤变（--media-bg） */
.player-stage{flex:1;min-height:0;background:var(--media-bg)}
.player-frame{display:block;width:100%;height:100%;border:0;background:var(--media-bg)}
/* setChromeVisible(false)：收起次要控件，但「返回 Yonest」永远保留 */
body.player.compact .player-btn,
body.player.compact .player-toast,
body.player.compact .player-name{display:none}

/* ---- 动效 ---- */
/**
 * 卡片入场：滚动到可视区时轻微上浮淡入。
 * `.reveal` 由 store.js 动态加，而且**只加给首屏之外**的卡片——
 * 首屏内的卡片直接可见，避免「先渲染出来、再被 JS 藏起来重放一遍」的闪动。
 * 所以没有 JS（或 JS 报错）时页面上不存在任何隐藏状态：CSS 这边绝不默认隐藏卡片。
 */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---- 骨架屏（配套 public/app.js 的 showSkeleton()）----
   数据到达前的占位：先用与真行等高的灰块把版式撑住，避免「白屏 → 内容突然出现」的跳动。
   占位块由 JS 注入且一律 aria-hidden，故这里只管视觉，不涉及无障碍处理。 */
.sk{display:block;border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--muted-bg) 25%,var(--sk-hi) 37%,var(--muted-bg) 63%);
  background-size:400% 100%;animation:sk-shimmer 1.4s ease-in-out infinite}
@keyframes sk-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-line{height:12px;margin:0 0 8px}
.sk-line:last-child{margin-bottom:0}
.sk-w35{width:35%}.sk-w40{width:40%}.sk-w55{width:55%}
.sk-w60{width:60%}.sk-w70{width:70%}.sk-w80{width:80%}
/* 列表行：贴合 .list .item（缩略图 + 两行文字） */
.sk-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule)}
.sk-item .grow{flex:1}
.sk-thumb{flex:0 0 84px;width:84px;height:auto;aspect-ratio:16/9}
/* 封面卡：贴合 .card（封面 + 两行文字） */
.sk-cover{aspect-ratio:16/9;border-radius:0}
.sk-lines{display:block;padding:13px 15px}
/* 站内信条目：贴合 .mail-item（主题 / 元信息 / 摘要三行） */
.sk-mail{flex-direction:column;align-items:stretch;gap:4px;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel);padding:10px 12px}
.sk-mail .sk-line{margin:0}
.sk-mail .sk-line:first-child{height:13px}

/**
 * 系统开启「减少动效」时：关掉全部过渡与动画。
 * 顺带保证 .reveal 不会把卡片永久留在半透明状态（上面的过渡被压到 0.01ms 后立即到位）。
 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- 响应式 ---- */
@media(max-width:760px){
  h1{font-size:23px}
  .hero{padding:24px 20px}
  .hero h1{font-size:24px}
  .stats{grid-template-columns:1fr 1fr}
  /* 看板条形列表：窄屏把名称单独占一行，条形与数值并排（触控目标不缩小） */
  .dash-bar{grid-template-columns:1fr auto;gap:4px 10px}
  .dash-bar-name{grid-column:1 / -1}
  .detail{grid-template-columns:1fr;gap:18px}
  .detail-cols{grid-template-columns:1fr;gap:18px}
  .mini-grid{grid-template-columns:1fr 1fr}
  .nav{padding:12px 14px;gap:12px;align-items:center}
  .nav .logo .tagline{display:none}
  /* 手机：主导航与身份区收进抽屉，默认收起；点 ☰（.nav.open）才展开，避免顶栏折成三四行 */
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav>nav,.nav>.nav-right{display:none}
  .nav.open>nav,.nav.open>.nav-right{display:flex;width:100%;margin-left:0;flex-wrap:wrap}
  .nav.open>nav{gap:14px;padding-top:6px;border-top:1px solid var(--rule)}
  .nav.open>.nav-right{gap:12px;padding-top:8px}
  .nav nav a{font-size:16px;padding:6px 0}
  .nav .userbox{margin-left:0;width:auto;flex-wrap:wrap}
  .nav .userbox .uname{max-width:100%}
  .nav .lang-menu{left:0;right:auto}
  /* 抽屉里身份区在下拉头部，菜单改为左对齐展开，避免贴右溢出屏幕 */
  .nav .userbox .user-menu-list{left:0;right:auto}
  .legal-wrap{padding:22px 18px}
  .doc-wrap{margin:20px 12px;padding:18px}
  .wrap{padding:0 14px}
  .list .item{flex-wrap:wrap}
  .thumb{flex:0 0 64px;width:64px}
  .thumb-wrap{flex:0 0 64px}
  .site-footer{padding:22px 14px 28px}
  .rating-summary{grid-template-columns:1fr;gap:14px}
  .board-row{grid-template-columns:34px 1fr auto;gap:10px;padding:9px 10px}
  .board-row .when{display:none}
  .maker-head{gap:12px}
  .maker-avatar{flex:0 0 52px;width:52px;height:52px;border-radius:var(--radius-lg);font-size:22px}
}
@media(max-width:430px){
  .stats,.stats.two{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr}
}

/* 上传预检结果（三级：阻断 / 警告 / 提示）—— 命中片段用等宽字展示，便于直接定位 */
.screen-out{margin-top:14px}
.screen-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.screen-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:10px 12px;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--surface);font-size:13px}
.screen-item>span{flex:1 1 220px}
.screen-item b{flex:0 0 auto;font-size:12px;line-height:1;padding:4px 8px;border-radius:var(--radius-pill);
  background:var(--muted-bg);color:var(--muted)}
.screen-item--block b{background:var(--danger);color:var(--danger-fg)}
.screen-item--warn b{background:var(--warn-bg);color:var(--warn-fg)}
.screen-item code{flex:1 1 100%;display:block;word-break:break-all;background:var(--muted-bg);font-size:12px}
@media(max-width:600px){
  .screen-item>span{flex:1 1 100%}
}

/* 接入平台能力：✓ 能力清单（平台提供什么，一眼看完；钩号是装饰，交给 CSS） */
.caps{list-style:none;margin:10px 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.caps li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.55;color:var(--body)}
.caps li::before{content:'✓';position:absolute;left:0;top:0;font-weight:800;color:var(--brand)}

/* ---- 站内信 / 工单 ---- */
/* 未读计数角标：默认走 --radius-bar（胶囊） */
.nav-badge{display:inline-block;min-width:16px;margin-left:5px;padding:1px 5px;border-radius:var(--radius-bar);
  background:var(--danger);color:var(--danger-fg);font-size:11px;font-weight:700;line-height:1.4;text-align:center;vertical-align:middle}
.mail-layout{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:18px;margin-top:14px;align-items:start}
.mail-list{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto;padding-right:4px}
.mail-item{display:flex;flex-direction:column;gap:3px;text-align:left;font:inherit;cursor:pointer;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel);padding:10px 12px}
.mail-item:hover{border-color:var(--brand)}
.mail-item.on{background:var(--sel-bg);color:var(--sel-fg);border-color:var(--brand)}
.mail-item.unread .mail-subject{font-weight:700}
/* 未读圆点：默认走 --radius-round */
.mail-dot{display:inline-block;width:7px;height:7px;border-radius:var(--radius-round);background:var(--danger);margin-right:6px;vertical-align:middle}
.mail-subject{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-meta{font-size:11.5px;color:var(--muted)}
.mail-preview{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-pane{border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel);padding:16px 18px;min-height:240px}
/* 手机二级视图的「← 返回列表」：桌面常隐，仅手机断点显示（自助式按钮，不借 .btn 免得被覆盖） */
.mail-pane-back{display:none;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:700;
  padding:9px 12px;margin-bottom:10px;border:var(--border-w) solid var(--rule);border-radius:var(--radius-md);
  background:var(--panel);color:var(--brand-dark);cursor:pointer}
.mail-pane-back:hover{border-color:var(--brand)}
.mail-head h2{margin:0 0 4px;font-size:17px}
.mail-thread{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.mail-msg{border-left:3px solid var(--rule);padding:2px 0 2px 10px}
.mail-msg.mine{border-left-color:var(--brand)}
.mail-msg-head{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-bottom:4px}
.mail-msg-body{font-size:13.5px;color:var(--ink);white-space:pre-wrap;word-break:break-word}
/* 站内信附件：游戏 / 积分 / 链接 / 图片（收件人看到的样式） */
.mail-attach{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.mail-attach-item{display:flex;align-items:center;gap:9px;padding:8px 10px;font-size:13px;
  background:var(--surface);border:var(--border-w) solid var(--rule);border-radius:var(--radius);
  color:var(--ink);text-decoration:none;word-break:break-all}
a.mail-attach-item:hover{border-color:var(--brand)}
.mail-attach-kind{flex:0 0 auto;font-weight:700;white-space:nowrap}
.mail-attach-img{display:block;max-width:100%;height:auto;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius)}
.mail-reply textarea{width:100%;font:inherit;font-size:13.5px;padding:9px 11px;border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);resize:vertical}
.sent-row{border:var(--border-w) solid var(--rule);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;background:var(--panel)}
.sent-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:5px;font-size:13.5px}

/* 「⋯」更多菜单：举报入口收进图标里（默认不露出） */
.more{position:relative;display:inline-block;margin-left:auto}
.more-btn{font:inherit;font-size:16px;line-height:1;padding:4px 9px;border-radius:var(--radius-pill);border:var(--border-w) solid var(--rule);
  background:var(--panel);color:var(--muted);cursor:pointer}
.more-btn:hover{color:var(--ink);border-color:var(--brand)}
.more-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:150px;padding:5px;
  background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.more-pop[hidden]{display:none}
.more-item{display:block;width:100%;text-align:left;font:inherit;font-size:13px;padding:8px 10px;
  border:0;background:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--ink)}
.more-item:hover{background:var(--muted-bg)}

/* 举报 / 反馈弹窗 */
.rpt-dialog{border:var(--border-w) solid var(--rule);border-radius:var(--radius-lg);padding:0;max-width:min(520px,92vw);box-shadow:var(--shadow-lg);background:var(--panel)}
.rpt-dialog::backdrop{background:var(--scrim)}
.rpt-form{padding:20px 22px}
.rpt-form h3{margin:0 0 6px;font-size:17px}
.rpt-form textarea{width:100%;font:inherit;font-size:13.5px;padding:10px 12px;border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);resize:vertical;margin-top:8px}

/* 右下角轻提示 */
.toast{position:fixed;right:18px;bottom:18px;z-index:300;max-width:320px;padding:11px 14px;border-radius:var(--radius-md);
  background:var(--panel);border:var(--border-w) solid var(--rule);box-shadow:var(--shadow-lg);font-size:13.5px;color:var(--ink)}

/* ---- 运维后台（/admin-mail）：统一为「满宽面板 + 卡片 + 区标题」----
   四个页签（推送 / 工单 / 邮箱分组 / 归档）一律占满 .wrap 宽度，保证各功能横向宽度一致；
   表单、列表都用同一张 .ops-card（纸面底 / 同圆角 / 同内边距），区标题统一用 .ops-h。 */
.ops-panel{margin-top:20px}
.ops-panel .tabs{margin-bottom:14px}
#ops-tabs{margin-bottom:18px}
.ops-h{margin:22px 0 10px;font-size:16.5px;font-weight:700}
.ops-card{border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel);padding:14px 16px}
.ops-card>:first-child{margin-top:0}
/* 表单类卡片收窄：单行输入框铺满 1000px 太难读，限制到 720px（列表/工单仍用满宽） */
.ops-narrow{max-width:720px}
.ops-panel label{display:block;margin:12px 0 4px;font-size:13px;font-weight:700}
.ops-panel select,.ops-panel input,.ops-panel textarea{width:100%;font:inherit;font-size:13.5px;
  padding:9px 11px;border:var(--border-w) solid var(--rule);border-radius:var(--radius);background:var(--panel)}
.ops-panel textarea{resize:vertical}
/* 「勾选框 + 说明」在运营后台也必须排在一行：
   `.ops-panel label` / `.ops-panel input`（0,1,1）权重高于 `.choice`（0,1,0），
   不显式放开的话勾选框会被撑成满宽块、文字掉到下一行。 */
.ops-panel .choice{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;
  font-size:13.5px;font-weight:400;line-height:1.5}
.ops-panel .choice input{width:16px;height:16px;margin:0;padding:0;flex:0 0 auto}
/* 推送附件：一行「类型 + 值 + 添加」，下面列出已加的（可逐条移除） */
.attach-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.attach-row select{flex:0 0 132px;width:auto}
.attach-row input{flex:1 1 240px;min-width:0}
.attach-row .btn{flex:0 0 auto}
.attach-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.attach-list:empty{display:none}
.attach-item{display:flex;align-items:center;gap:9px;padding:6px 9px;font-size:13px;
  background:var(--surface);border:var(--border-w) solid var(--rule);border-radius:var(--radius)}
.attach-item .attach-kind{font-weight:700;white-space:nowrap}
.attach-item .attach-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;color:var(--muted)}
.attach-item .attach-del{padding:2px 5px;border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:16px;line-height:1;cursor:pointer}
.attach-item .attach-del:hover{color:var(--danger)}
.attach-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.attach-chip{padding:2px 8px;font-size:12px;color:var(--muted);
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill)}
@media(max-width:760px){
  .mail-layout{grid-template-columns:1fr}
  .mail-list{max-height:34vh}
}

/* ---- 未验证邮箱提示条（软验证，挂在导航下方，全站可见） ---- */
.verify-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 20px;background:var(--warn-bg);border-bottom:var(--border-w) solid var(--warn-border);font-size:13.5px;color:var(--warn-fg)}
.verify-banner .vb-text{flex:1 1 auto}
.verify-banner .vb-btn{font:inherit;font-weight:700;padding:5px 12px;border:var(--border-w) solid var(--warn-border);border-radius:var(--radius-pill);
  background:var(--panel);color:var(--warn-fg);cursor:pointer}
.verify-banner .vb-btn:hover{border-color:var(--brand)}
.verify-banner .vb-btn:disabled{opacity:.6;cursor:default}
.verify-banner .vb-msg{flex-basis:100%;color:var(--muted);font-size:12.5px}
.verify-banner .vb-msg.ok{color:var(--brand-dark)}
.verify-banner .vb-msg a{word-break:break-all}

/* ---- 手机端适配（≤760）：一次性把「触控尺寸 / 输入框防缩放 / 游戏外框 / 站内信二级视图」收在这里 ----
   说明：运维后台（/admin-mail，运营专属）不在此列，只要求「打开不破版」。 */
@media(max-width:760px){
  /* iOS 上聚焦 input 会自动放大整页：字号提到 16px 可避免（.ops-panel 的规则更具体，故一并覆盖） */
  input,textarea,select,
  .ops-panel select,.ops-panel input,.ops-panel textarea{font-size:16px}
  /* 触控目标放大到约 44px 高（原 .btn / .tabs 在手机上偏小、易点错） */
  .btn{padding:13px 18px;font-size:15px}
  .tabs button{padding:10px 14px;font-size:14px}
  .more-btn{padding:8px 12px;font-size:18px}
  .fav-btn{padding:6px 4px}

  /* 游戏外框：顶栏在窄屏很挤，让游戏名可收缩、去掉占位块，控件保持可点 */
  .player-bar{padding:8px 10px;gap:8px}
  .player-name{flex:1 1 auto;min-width:0;max-width:none}
  .player-spacer{display:none}
  .player-back,.player-btn{padding:9px 12px}

  /* 站内信 / 工单：手机改「二级视图」——先看列表，点进去看详情，详情顶部可返回 */
  body.md-page .mail-list{max-height:none}
  body.md-page:not(.md-open) .mail-pane{display:none}
  body.md-page.md-open .mail-list{display:none}
  .mail-pane-back{display:inline-flex}
  .mail-head h2{word-break:break-word}
  .sent-head{flex-wrap:wrap}
}

/* ---- 作品形态徽标 / 包体信息 / 包体审核（配套 console.html 与游戏详情页）----
   全部取令牌着色，沿用「2px 硬边框 + 小圆角 + 等宽小字」的方言语汇。
   徽标与包体面板在详情页（src/server.ts）与后台列表（console.html）共用，故不依赖页面上下文。 */

/* 形态徽标：hosted 不渲染；web / download 用小尺寸等宽字，靠底色区分语义 */
.mode-badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;line-height:1;
  letter-spacing:.03em;padding:3px 8px;border:var(--border-w) solid var(--rule);border-radius:var(--radius-sm);
  background:var(--muted-bg);color:var(--brand-dark);white-space:nowrap;vertical-align:middle}
/* 网页包体：亮黄（同「平台精选」标记，表示站内可玩的活动内容） */
.mode-badge[data-mode="web"]{background:var(--mark-bg);border-color:var(--mark-border);color:var(--mark-fg)}
/* 下载型包体：实心品牌深色（与站内可玩内容区分，提示「站内不运行」）。
   注意前景色用 --panel（纸白）而不是 --btn-fg：在「硬派方块」皮肤里 --brand 与 --btn-fg 同为近黑，
   写 --btn-fg 会变成黑底黑字。前景必须取与 --brand 成对比的浅色。 */
.mode-badge[data-mode="download"]{background:var(--brand);border-color:var(--brand);color:var(--panel)}

/* 包体信息面板：后台列表的「文件名 / 大小 / 文件数 / 入口 / 下载次数」与详情页的「包体信息 + 风险提示」共用 */
.archive-info{background:var(--panel);border:var(--border-w) solid var(--rule);border-radius:var(--radius-sm);
  padding:10px 12px;margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--body);box-shadow:var(--shadow-key-sm)}
.archive-info b{color:var(--brand-dark)}
.archive-info p{margin:0}
.archive-info .muted{color:var(--muted)}
.archive-info-line{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.archive-info-line>b{flex:0 0 auto;min-width:64px}
.archive-info-line>span{flex:1 1 auto;min-width:0;word-break:break-all}

/* 后台列表里的包体审核行：状态徽标 + 审核人 / 时间 + 运营操作按钮（普通游匠看不到按钮） */
.console-review{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
/* 审核状态：三态走语义色（amber=待审、brand=通过、danger=拒绝）
   passed 用 --panel 作前景（理由同 .mode-badge[data-mode="download"]：--brand 与 --btn-fg 同为近黑） */
.console-review-state{display:inline-block;font-size:11.5px;font-weight:700;line-height:1;padding:3px 8px;
  border:var(--border-w) solid var(--rule);border-radius:var(--radius-pill);background:var(--muted-bg);color:var(--brand-dark)}
.console-review-state[data-state="pending"]{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-fg)}
.console-review-state[data-state="passed"]{background:var(--brand);border-color:var(--brand);color:var(--panel)}
.console-review-state[data-state="rejected"]{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
/* 行内提示（成功 / 失败）单独占一行，不与按钮挤在一起 */
.console-review .msg{flex:1 1 100%;margin-top:2px}

/* ==========================================================================
   学习层（视频）
   --------------------------------------------------------------------------
   卡片沿用硬派方块：2px 硬边框 + 硬投影 + 零圆角；缩略图是服务端直出的 SVG。
   ========================================================================== */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin:18px 0 8px}
@media(max-width:860px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.video-grid{grid-template-columns:1fr}}
.vcard{display:block;background:var(--panel);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow-key);text-decoration:none;color:var(--ink);overflow:hidden}
.vcard:hover{box-shadow:var(--shadow-lg)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;background:var(--muted-bg);border-bottom:var(--border-w) solid var(--rule)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 播放角标与时长走两个专用的小圆角 / 方块，不破坏整体方角 */
.vplay{position:absolute;left:10px;bottom:10px;display:grid;place-items:center;width:26px;height:26px;
  background:var(--btn-bg);color:var(--btn-fg);border:var(--border-w) solid var(--rule);border-radius:var(--radius-round)}
.vtime{position:absolute;right:8px;bottom:8px;font-size:12px;font-weight:700;line-height:1;padding:3px 6px;
  background:var(--ink);color:var(--panel);border-radius:var(--radius-bar)}
.vname{display:block;padding:10px 12px 0;font-weight:800;line-height:1.35;word-break:break-word}
.vmeta{display:block;padding:4px 12px 12px;font-size:12.5px;color:var(--muted)}
.vplayer{display:block;width:100%;max-height:70vh;background:#000;border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow-key);margin:10px 0 14px}
/* 举报 / 运营下架：默认收起，不抢正文的注意力 */
.report-box{margin:14px 0;padding:12px;background:var(--panel);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius)}
.report-box summary{cursor:pointer;font-weight:700}
.report-box textarea,.report-box input{width:100%;margin-top:6px}
/* 留言：讨论流，无评分、无嵌套；删除按钮做成文字按钮，不抢视觉 */
.comments{margin:18px 0 8px}
.comment-list{list-style:none;margin:10px 0 0;padding:0}
.comment{background:var(--panel);border:var(--border-w) solid var(--rule);box-shadow:var(--shadow-key);
  border-radius:var(--radius);padding:10px 12px;margin-bottom:10px}
.comment-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.comment-head b{color:var(--ink);font-size:13.5px}
.comment-head form{margin:0 0 0 auto}
.comment-body{margin:6px 0 0;white-space:pre-wrap;word-break:break-word}
.comment-del{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline}
.comment-del:hover{color:var(--danger)}
.comment-form{margin:12px 0 4px}
.comment-form textarea{width:100%;min-height:72px}
/* 未验证邮箱：输入框换成说明 + 「去验证」出口（发出去也只会被 403 挡掉） */
.comment-gate{margin:12px 0 4px;padding:12px;background:var(--panel);border:var(--border-w) solid var(--rule);
  border-radius:var(--radius);box-shadow:var(--shadow-key)}
.comment-gate p{margin:0}
.comment-gate .actions{margin-top:10px}
/* 作品页的第三方讲解：卡片右上角是作者/运营的「撤下 / 恢复」开关 */
.vitem{position:relative}
.vitem .vcard{height:100%}
.vitem.dim .vcard{opacity:.55}
.vitem-act{position:absolute;top:8px;right:8px;margin:0;z-index:2}
.vitem-act .btn{padding:4px 8px;font-size:12px}

/* ==========================================================================
   每日任务（/points）
   --------------------------------------------------------------------------
   一行一条；完成态整体降噪（底色转浅、按钮消失），不做额外动画。
   ========================================================================== */
.quest-list{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.quest-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--panel);
  border:var(--border-w) solid var(--rule);border-radius:var(--radius)}
.quest-row.done{background:var(--muted-bg)}
.quest-name{flex:1 1 auto;font-weight:700}
.quest-points{font-weight:800;color:var(--brand-dark)}