/**

 * Argon 皮肤层：主要界面组件的视觉定义

 * ------------------------------------------------------------------

 * 由原 dist/*.css 合并而来：只在合并完全相同的规则时做了删除，

 * 其余规则一律原样搬运，规则之间不重新排序。

 * 加载顺序见 index.html，顺序即优先级。

 */


/*! argon.css - Argon 设计层（全站视觉统一）
 * 设计语言参考 Argon Design System (Creative Tim, MIT) 与 argon-theme (solstice23, MIT)，
 * 只借用配色、圆角、阴影、间距与组件规则，不引入其脚本、字体与图片资源。
 * 加载顺序：必须位于 style.css / pages.css / refinements.css / theme-gothic.css /
 * immersive.css / guestbook.css 之后，用来统一既有碎片化页面。
 * 回滚：删除本文件并从 dist/index.html 移除对应 link 即可，不影响其他文件。
 */

/* ================= 1. 设计令牌 ================= */

/* 夜境（黑色 / 冰蓝 / 银灰）沿用原色调，只统一结构令牌 */

html[data-theme=gothic]{
  --argon-indigo:#9edaff;
  --argon-violet:#7fb6e8;
  --argon-gradient:linear-gradient(87deg,#9edaff 0,#7fb6e8 100%);
  --argon-shadow:0 10px 28px rgba(0,0,0,.55);
  --argon-shadow-md:0 18px 40px rgba(0,0,0,.6);
  --argon-shadow-hover:0 14px 34px rgba(0,0,0,.62),0 0 22px rgba(158,218,255,.1);
  --argon-focus-glow:0 0 0 .2rem rgba(158,218,255,.18);
  --argon-tint:rgba(158,218,255,.1);
  --argon-tint-strong:rgba(158,218,255,.2);
  --argon-card-border:rgba(158,218,255,.12);
}

/* ================= 2. 基础排版 =================
   字体族与字号沿用站点原有设定（首页标题/打字效果=楷体，正文=微软雅黑），本层只统一文字颜色。 */

body{color:var(--argon-body)}

::selection{background:var(--argon-tint-strong);color:var(--argon-heading)}

html:not([data-theme=gothic]) h1,html:not([data-theme=gothic]) h2,html:not([data-theme=gothic]) h3,html:not([data-theme=gothic]) h4{color:var(--argon-heading)}

.eyebrow{color:var(--accent);font-weight:700;font-size:12px;letter-spacing:2.5px}

.prose{color:var(--argon-body)}

/* ================= 3. 顶栏、侧栏按钮与页脚 ================= */

.topbar{background:rgba(255,255,255,.78)!important;border-bottom:1px solid var(--argon-line)!important;box-shadow:0 1px 20px rgba(50,50,93,.06)!important;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}

.topbar #page-nav{gap:clamp(4px,1vw,16px)}

/* 900px 上下导航和右侧的轻登录会撞在一起：窄屏把链接的呼吸收一点（1.73.0 加了「标签」）。 */
@media(max-width:1100px){.topbar #page-nav{gap:clamp(2px,.6vw,10px)}.topbar a{padding:9px 11px;font-size:12.5px}}

@media(max-width:980px){.topbar #page-nav{gap:clamp(2px,.4vw,8px)}.topbar a{padding:9px 8px;font-size:12.5px}}

/* ≤950px：顶栏有 9 个入口，再硬挤就会和右侧轻登录叠住 —— 让导航占剩余宽度并可横滑，头像 chip 留在最右。 */
@media(max-width:950px){.topbar{justify-content:flex-start;gap:10px;padding:0 16px}.topbar #page-nav{width:auto;flex:1 1 auto;min-width:0;justify-content:flex-start;gap:18px;padding:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.topbar #page-nav::-webkit-scrollbar{display:none}.topbar #page-nav a{flex:0 0 auto;white-space:nowrap;padding:20px 0;font-size:13px}}

.topbar a{display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;color:var(--argon-body);font-weight:600;font-size:13.5px;letter-spacing:0;transition:color .2s ease,background .2s ease,box-shadow .2s ease}

.topbar a:hover{color:var(--argon-indigo);background:var(--argon-tint)}

.topbar a[aria-current=page]{color:#fff;background:var(--argon-gradient);box-shadow:0 4px 12px rgba(94,114,228,.28)}

.topbar a[aria-current=page]:after{display:none}

.icon-button{transition:background .2s ease,color .2s ease}

.icon-button:hover{background:var(--argon-tint);color:var(--argon-indigo)}

#theme-toggle{border-radius:999px;font-weight:600}

html:not([data-theme=gothic]) #theme-toggle{background:var(--white);color:var(--argon-body);border:1px solid var(--line);box-shadow:var(--argon-shadow)}

html:not([data-theme=gothic]) #theme-toggle:hover{background:var(--white);color:var(--argon-indigo);border-color:var(--argon-indigo)}

footer{border-top:1px solid var(--line);color:var(--muted)}

footer a{color:var(--accent);font-weight:600}

/* ================= 4. 卡片系统 ================= */

.reading{overflow:hidden}

.portal-panel h2,.portal-panel h3,.note-focus h2,.music-track h2,.game-detail-hero h1{color:var(--argon-heading)}

/* 4.1 内容表面：两级，别的地方不该再出现第三处材质。

   一级「底板」只有 .page-wrap 一个元素 —— 每个内页都由 components/shell.js 的
   shell() 产出它。底板承载正文，永远不透明，玻璃不许用在这一级。
   二级「卡片」是底板内部的重复单元与独立小块，和底板同色，靠描边与投影分层。

   这里是最后一层，靠加载顺序就能压住页面文件，一个 !important 都不需要。
   令牌见 tokens.css「表面系统」，夜境通过覆盖令牌自动跟随。
   四色便签（#scene-notes .portal-article）与图片卡不在名单里，它们本来就有自己的材质。 */
.page-wrap{
  background:var(--surface);
  border:1px solid var(--surface-line);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
}

/* 底板内的卡片：同一套材质，靠描边与投影与底板分层 */
.portal-panel,.portal-article,.note-focus,
.guest-thread,.guest-compose,
.anime-controls,.anime-tier,.vr-boards a,.series-reflection,.series-season,.va-results,
.novel-controls,.novel-tier,
.game-detail-hero,.game-detail-section,.game-edit-form,
.music-tools,.music-empty,.music-track,
.gallery-toolbar,.admin-login,.studio-bar,.admin-hub{
  background:var(--surface);
  border:1px solid var(--surface-line);
  border-radius:var(--surface-radius);
  box-shadow:var(--surface-shadow);
}

/* 页面底纹：同一层薄纱，铺在所有内页与首页八幕上。
   重构前内页是 57% 白纱、八幕是 48/58/66% 三档 —— 同一件事写了四遍。 */
.inner-page main,.full-region{background:var(--veil)}

/* 4.2 图片卡片：统一圆角与悬停抬升（图片本身是材质，这里只统一形状） */

.article-cover-card,.gallery-tile,.game-tile,.game-video-card,.collection-visual-hubs>a{
  border-radius:var(--argon-radius-lg);
  border:1px solid var(--argon-card-border);
  box-shadow:var(--argon-shadow);
  overflow:hidden;
  transition:transform .25s cubic-bezier(.68,-.55,.265,1.55),box-shadow .25s ease
}

.article-cover-card:hover,.gallery-tile:hover,.game-tile:hover,.game-video-card:hover,.collection-visual-hubs>a:hover{transform:translateY(-3px);box-shadow:var(--argon-shadow-hover)}

.paper-note{border-radius:var(--argon-radius-lg);border:1px solid var(--argon-card-border);box-shadow:var(--argon-shadow)}

.paper-note:hover{box-shadow:var(--argon-shadow-hover)}

.steam-game{border-radius:var(--argon-radius-lg);box-shadow:var(--argon-shadow);transition:transform .2s ease,box-shadow .2s ease}

.steam-game:hover{transform:translateY(-2px);box-shadow:var(--argon-shadow-hover)}

/* 4.3 弹窗与提示 */

dialog{border:1px solid var(--line);border-radius:var(--argon-radius-lg);background:var(--white);box-shadow:var(--argon-shadow-md)}

dialog::backdrop{background:rgba(50,50,93,.35);backdrop-filter:blur(6px)}

#toast{background:var(--argon-heading);color:#fff;border-radius:var(--argon-radius);box-shadow:var(--argon-shadow-md);font-weight:600}

/* ================= 5. 链接、标签与筛选 ================= */

.text-link{color:var(--argon-indigo);font-weight:600}

.text-link:hover{color:var(--argon-violet)}

.chip{display:inline-flex;align-items:center;border-radius:999px;background:var(--argon-tint);color:var(--argon-indigo);border:1px solid transparent;padding:5px 12px;font-size:12px;font-weight:600;line-height:1.4;transition:background .2s ease,color .2s ease,box-shadow .2s ease}

.chip:hover,.chip.active{background:var(--argon-gradient);color:#fff;box-shadow:0 4px 12px rgba(94,114,228,.25)}

html[data-theme=gothic] .chip:hover,html[data-theme=gothic] .chip.active{color:#06131c}

.filters button,.list-tools button,.gallery-filters button,.games-filters button,.view-toggle button{border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;color:var(--argon-body);transition:background .2s ease,color .2s ease}

.filters button:hover,.list-tools button:hover,.gallery-filters button:hover,.games-filters button:hover,.view-toggle button:hover{background:var(--argon-tint);color:var(--argon-indigo)}

.filters button.active,.gallery-filters button.active,.games-filters button.active,.view-toggle button.active,.filters button[aria-pressed=true]{background:var(--argon-gradient);color:#fff;box-shadow:0 4px 12px rgba(94,114,228,.25)}

html[data-theme=gothic] .filters button.active,html[data-theme=gothic] .gallery-filters button.active,html[data-theme=gothic] .games-filters button.active,html[data-theme=gothic] .view-toggle button.active{color:#06131c}

.owner-badge,.portal-card-tag,.source,.game-tile-flag{border-radius:999px;background:var(--argon-tint);color:var(--argon-indigo);font-weight:600;font-size:11px;padding:3px 10px}

/* ================= 6. 表单控件 ================= */

input,textarea,select{border:1px solid var(--argon-field-line);border-radius:var(--argon-radius);background:var(--white);color:var(--argon-body);padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease}

input:focus,textarea:focus,select:focus{border-color:var(--argon-indigo);box-shadow:var(--argon-focus-glow);outline:none}

input::placeholder,textarea::placeholder{color:#aab6c4}

button[type=submit]{border-radius:var(--argon-radius);font-weight:600}

/* ================= 7. 门户首页与统计 ================= */

.portal-stat b,.portal-stat strong,.portal-stat em{color:var(--argon-indigo);font-weight:700;font-style:normal}

.portal-nav a{display:flex;align-items:center;justify-content:space-between;border-radius:var(--argon-radius);color:var(--argon-body);font-weight:600;transition:background .2s ease,color .2s ease}

.portal-nav a:hover{background:var(--argon-tint);color:var(--argon-indigo)}

.portal-nav a[aria-current=page]{background:var(--argon-gradient);color:#fff}

/* ================= 8. 页面容器与图片 ================= */

.gallery-tile img,.article-cover-card img,.portal-article-cover img{transition:transform .5s cubic-bezier(.2,.6,.25,1)}

.gallery-tile:hover img,.article-cover-card:hover img{transform:scale(1.04)}

/* ================= 9. 空状态与加载 ================= */

.empty,.portal-empty,.gallery-empty,.music-empty,.steam-error,.route-error,.gallery-error,.image-error{color:var(--argon-gray)}

.route-loading,.gallery-loading,.steam-loading{color:var(--argon-gray)}

.placeholder-mark{color:var(--argon-indigo);opacity:.55}

/* ================= 10. 夜境适配 ================= */

html[data-theme=gothic] .topbar{background:rgba(7,11,17,.8);border-bottom-color:rgba(158,218,255,.12);box-shadow:0 1px 24px rgba(0,0,0,.5)}

html[data-theme=gothic] .topbar a{color:#b8c9d8;font-weight:600}

html[data-theme=gothic] .topbar a:hover{color:#9edaff;background:var(--argon-tint)}

html[data-theme=gothic] .topbar a[aria-current=page]{color:#06131c;background:var(--argon-gradient);box-shadow:0 4px 14px rgba(158,218,255,.25)}

html[data-theme=gothic] input,html[data-theme=gothic] textarea,html[data-theme=gothic] select{border-color:rgba(158,218,255,.22);color:var(--ink)}

html[data-theme=gothic] #toast{background:#111a24;color:#e7f2fb;border:1px solid rgba(158,218,255,.16)}

/* ================= 11. 动效降级 ================= */

@media(prefers-reduced-motion:reduce){
  .article-cover-card,.gallery-tile,.game-tile,.game-video-card,.collection-visual-hubs>a,.steam-game,.paper-note,.tag-orb{transition:none!important;transform:none!important}
  .gallery-tile:hover img,.article-cover-card:hover img{transform:none}
}

/* ================= 12. 门户首页栅格与组件（阶段 B1） ================= */

/* 12.1 侧栏随整页滚动，栅格间距与首页设置一致 */

.portal-left,.portal-right,.page-home .home-portal .portal-left,.page-home .home-portal .portal-right{position:sticky;top:94px;max-height:none;overflow:visible;align-self:start}

.home-portal{gap:var(--custom-gap,18px);align-items:start}

/* 12.1b 首页留白：内容不再铺满屏幕，两侧留出呼吸空间（按需微调下面两个数值即可） */

.home-portal{padding-left:clamp(28px,3.5vw,64px);padding-right:clamp(28px,3.5vw,64px)}

/* 12.1c 侧栏收窄后同步收紧面板内边距，避免内容被挤 */

.portal-left .portal-panel,.portal-right .portal-panel{padding:18px}

/* 12.1d 头像统一圆形：这条原本是 .portal-left/.portal-right .portal-profile>img{height:140px}，
   它比 12.9 的 .portal-profile>img 更具体，把 64×64 的圆压成 64×140 的椭圆。站主要圆形，
   所以整条撤掉，交回 12.9 那条圆规则（width===height + border-radius:50%）。 */

/* 12.2 面板标题：沿用左侧色条结构，颜色换成 Argon 主色渐变 */

.portal-panel>h2{font-size:17px;letter-spacing:.5px;color:var(--argon-heading)}

.portal-panel>h2:before,.portal-section>header h2:before{background:var(--argon-gradient);width:3px;border-radius:3px}

/* 12.3 区块头：标题 + 更多入口，底部细线（Argon 卡片头） */

.portal-section>header{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:0 0 14px;margin:0 0 18px;border-bottom:1px solid var(--line)}

.portal-section>header h2{margin-bottom:6px}

.portal-section>header p{color:var(--argon-gray);font-size:13px;margin:0}

.portal-section>header>a,.portal-panel>a,.portal-profile>a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--argon-tint);color:var(--argon-indigo);font-size:12px;font-weight:600;transition:background .2s ease,color .2s ease,box-shadow .2s ease}

.portal-section>header>a:hover,.portal-panel>a:hover,.portal-profile>a:hover{background:var(--argon-gradient);color:#fff;box-shadow:0 4px 12px rgba(94,114,228,.25)}

html[data-theme=gothic] .portal-section>header>a:hover,html[data-theme=gothic] .portal-panel>a:hover,html[data-theme=gothic] .portal-profile>a:hover{color:#06131c}

/* 12.4 统计：Argon 统计行（数值主色、行间虚线） */

.portal-stat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:transparent;border:0;border-bottom:1px dashed var(--line);border-radius:0;padding:10px 2px;box-shadow:none}

.portal-stat:last-child{border-bottom:0;padding-bottom:0}

.portal-stat span{font-size:12px;color:var(--argon-gray)}

.portal-stat b{font-size:20px;font-weight:700;color:var(--argon-indigo);letter-spacing:.5px}

/* 12.5 站点导航行 */

.portal-nav a{font-size:13px;padding:9px 12px}

.portal-nav a span{color:var(--argon-gray);transition:transform .2s ease,color .2s ease}

.portal-nav a:hover span{transform:translateX(3px);color:var(--argon-indigo)}

/* 12.6 最近更新：序号圆点 + 单行标题 */

.portal-recent{display:grid;gap:6px}

.portal-recent a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--argon-radius);color:var(--argon-body);font-size:13px;transition:background .2s ease,color .2s ease}

.portal-recent a:hover{background:var(--argon-tint);color:var(--argon-indigo)}

.portal-recent a b{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--argon-tint);color:var(--argon-indigo);font-size:11px;font-weight:700}

.portal-recent a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 12.7 标签徽章与子页入口 */

.portal-tags{display:flex;flex-wrap:wrap;gap:7px}

.portal-tags span{border-radius:999px;background:var(--argon-tint);color:var(--argon-indigo);font-size:11px;font-weight:600;padding:4px 10px}

.portal-subpages{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}

.portal-subpages a{border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--argon-body);font-size:12px;font-weight:600;padding:6px 12px;transition:border-color .2s ease,color .2s ease,box-shadow .2s ease}

.portal-subpages a:hover{border-color:var(--argon-indigo);color:var(--argon-indigo);box-shadow:0 4px 12px rgba(94,114,228,.12)}

/* 12.8 内容卡片（念念碎四色便签不受影响，仍由 #scene-notes 规则控制） */

.portal-articles{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-items:stretch}

.portal-article{height:100%;transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s ease,border-color .22s ease}

.portal-article:hover{transform:translateY(-2px);border-color:rgba(94,114,228,.35);box-shadow:var(--argon-shadow-hover)}

.portal-article h3{color:var(--argon-heading);font-weight:600;}

.portal-article p{color:var(--argon-gray)}

.portal-card-tag{}

.portal-card-bottom{color:var(--argon-gray);}

/* 12.9 个人卡片 */

.portal-profile>img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:3px solid var(--white);box-shadow:var(--argon-shadow);filter:none}

.portal-profile>h2{font-size:20px;letter-spacing:1px}

.portal-profile p{color:var(--argon-gray)}

/* 12.10 夜境适配 */

html[data-theme=gothic] .portal-stat b{color:#9edaff}

html[data-theme=gothic] .portal-recent a b{background:rgba(158,218,255,.12);color:#9edaff}

html[data-theme=gothic] .portal-subpages a{background:rgba(158,218,255,.06);border-color:rgba(158,218,255,.14);color:#c9d8e6}

html[data-theme=gothic] .portal-subpages a:hover{border-color:#9edaff;color:#9edaff}

html[data-theme=gothic] .portal-article:hover{border-color:rgba(158,218,255,.35)}

/* ================= 13. 留言板内评论（阶段 B2） ================= */

.guest-comment-tools{margin-top:8px}

.guest-comment-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-weight:600;transition:color .2s ease}

.guest-comment-toggle:hover{}

.guest-comment-reply{}

.guest-comment-reply .page-comments>header{}

.guest-comment-reply .page-comments>header h2{font-size:17px;color:var(--argon-heading)}

.guest-comment-reply .page-comments>header .eyebrow{display:none}

.guest-comment-reply .page-comment-form{margin-top:12px}

.guest-comment-reply .page-comment>div,.guest-comment-reply .page-comment-form>div:last-child{background:var(--white);border-color:var(--line)}

.guest-comment-reply .page-comment header{background:transparent;border-color:transparent}

.guest-comment-reply .page-comment p{color:var(--argon-body)}

html[data-theme=gothic] .guest-comment-reply{background:rgba(158,218,255,.05);border-color:rgba(158,218,255,.14)}

html[data-theme=gothic] .guest-comment-reply .page-comment header{background:transparent;border-color:transparent}

/* ================= 14. 留言板与评论：B 站式扁平列表 + 配色统一（阶段 B3） ================= */

/* 14.1 留言板配色统一到 Argon 令牌 */

body.page-guestbook{--guest-ink:var(--argon-heading);--guest-muted:var(--argon-gray);--guest-accent:var(--argon-indigo)}

.page-guestbook main{background:transparent;background-image:none}

.page-guestbook .guest-section-title h1{font-size:21px;letter-spacing:2px;color:var(--argon-heading)}

#guest-total{color:var(--argon-gray);font-size:13px;margin-left:6px}

.guest-comment{padding:16px 0;border-bottom:1px solid var(--line);min-height:0;gap:12px}

.guest-comment .comment-meta strong{color:var(--argon-indigo);font-weight:600;font-size:13px}

.guest-comment .comment-meta time{color:var(--argon-gray);font-size:12px}

.guest-comment .comment-body p{color:var(--argon-body)}

.guest-compose h2{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--argon-heading)}


.guest-comment-toggle{font-size:12px;color:var(--argon-gray)}

.guest-comment-toggle:hover{color:var(--argon-indigo)}



/* 14.2 评论：一张输入卡片 + 扁平列表（形状照着 Halo 那套评论组件） */

.page-comments>header{align-items:center;gap:10px;padding:0 0 8px;margin-bottom:10px;border-bottom:1px solid var(--line)}

.page-comments>header .eyebrow{display:none}

.page-comments>header h2{font-size:13px;font-weight:600;color:var(--argon-heading);letter-spacing:.5px}

.page-comments>header>span{color:var(--argon-gray);font-size:12px}

.page-comment-list{gap:0}

.page-comment{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}

.page-comment>div{background:transparent;border:0;border-radius:0;overflow:visible}

.page-comment header{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;padding:0 0 2px;border:0;background:transparent}

.page-comment header strong{color:var(--argon-indigo);font-size:12px;font-weight:600}

.page-comment header time{color:var(--argon-gray);font-size:11px}

.page-comment p{padding:0;font-size:13px;line-height:1.7;color:var(--argon-body)}

.page-comment-avatar,.comment-form-avatar{position:relative;overflow:hidden}

.page-comment-avatar img,.comment-form-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.page-comment-avatar{width:32px;height:32px;font-size:12px}

.page-comment-tools{margin-top:4px}

.page-comment-tools .text-link{font-size:11px;color:var(--argon-gray)}

.page-comment-tools .text-link:hover{color:var(--argon-indigo)}

.page-comment-replies{display:grid;gap:0;margin-top:8px;padding-left:10px;border-left:2px solid var(--line)}

.page-comment-replies:empty{display:none}

.page-comment-more{margin:6px 0 0;font-size:11px;color:var(--argon-gray)}

.page-comment-more:hover{color:var(--argon-indigo)}

.page-comment-replies .page-comment{grid-template-columns:26px minmax(0,1fr);gap:9px;padding:8px 0 0;border-bottom:0}

.page-comment-replies .page-comment-avatar{width:26px;height:26px;font-size:11px}

.page-comment-reply[hidden]{display:none}

.page-comment-reply{margin-top:8px}

.page-comment-form-gate[hidden]{display:none}

.page-comment-form{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;margin-top:12px}

.comment-form-avatar{width:36px;height:36px;font-size:13px}

.comment-form-main{padding:10px 12px;border:1px solid var(--argon-field-line);border-radius:var(--argon-radius-lg);background:var(--white)}

.comment-form-main textarea{box-sizing:border-box;width:100%;min-height:68px;padding:2px;border:0;background:transparent;font-size:12.5px;line-height:1.6;color:var(--argon-body);resize:vertical}

.comment-form-main textarea:focus{border:0;outline:none;box-shadow:none}


.comment-identity-fields[hidden]{display:none}

.comment-identity-fields{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}

.comment-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

.comment-fields label{display:grid;gap:5px;font-size:11px;color:var(--argon-gray)}

.comment-fields input{box-sizing:border-box;width:100%;padding:6px 9px;border:1px solid var(--argon-field-line);border-radius:var(--argon-radius);background:transparent;font-size:12.5px;color:var(--argon-body)}

.comment-fields input:focus{border-color:var(--argon-indigo);outline:none;box-shadow:none}

.page-comment-form footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}

.page-comment-form .button{min-height:28px;padding:5px 14px;font-size:12px;border-radius:999px}

.comment-feedback,.comment-empty{color:var(--argon-gray);font-size:12px}

.comment-empty{padding:22px;border:1px dashed var(--line);border-radius:var(--argon-radius-lg);text-align:center}

.page-comment-form.is-compact{grid-template-columns:1fr;margin-top:0}

.page-comment-form.is-compact .comment-form-avatar{display:none}

.page-comment-form.is-compact .comment-form-main{padding:10px;background:transparent}

.page-comment-form.is-compact textarea{min-height:46px}

@media(max-width:700px){.page-comment-form{grid-template-columns:1fr}.comment-form-avatar{display:none}.comment-fields{grid-template-columns:1fr}}

/* 14.3 留言内评论：不再套一层边框 */


.guest-comment-reply{margin-top:8px;padding:8px 0 0;border:0;border-top:1px dashed var(--line);border-radius:0;background:transparent}

.guest-comment-reply .page-comments>header{border-bottom:0;padding-bottom:0;margin-bottom:6px}

html[data-theme=gothic] .page-comment>div,html[data-theme=gothic] .page-comment header{background:transparent;border-color:transparent}

html[data-theme=gothic] .page-comment-form>div:last-child{background:rgba(158,218,255,.04);border-color:rgba(158,218,255,.16)}

/* 14.4 访客轻登录：页头一枚小按钮 + 一张卡片式弹层 */

.identity-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--argon-gray);font-size:12px;cursor:pointer;transition:color .2s ease,border-color .2s ease}

.identity-chip:hover{color:var(--argon-indigo);border-color:var(--argon-indigo)}

.identity-chip[data-signed-in='1']{color:var(--argon-heading)}

.identity-chip-avatar{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:hsl(198 35% 62%);color:#fff;font-size:11px;overflow:hidden}

.identity-chip-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.identity-dialog{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:#0b1c2699}

.identity-dialog[hidden]{display:none}

.identity-card{display:grid;gap:12px;width:min(430px,100%);padding:22px;border:1px solid var(--line);border-radius:var(--argon-radius-lg);background:var(--white);box-shadow:0 24px 60px #16283a2e}

.identity-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

.identity-card h2{margin:0;font-size:19px;color:var(--argon-heading)}

.identity-card .eyebrow{margin:0 0 3px}

.identity-intro{margin:0;font-size:12px;line-height:1.8;color:var(--argon-gray)}

.identity-card label{display:grid;gap:6px;font-size:12px;color:var(--argon-gray)}

.identity-card input{box-sizing:border-box;width:100%;padding:9px 11px;border:1px solid var(--argon-field-line);border-radius:var(--argon-radius);background:transparent;font-size:13px;color:var(--argon-body)}

.identity-card input:focus{border-color:var(--argon-indigo);outline:none;box-shadow:none}

.identity-card footer{display:flex;align-items:center;gap:14px;margin-top:4px}

.identity-card footer .button{margin-left:auto;min-height:34px;padding:7px 18px;border-radius:999px;font-size:12px}

.topbar-tools{position:absolute;right:max(18px,3vw);top:0;height:100%;display:flex;align-items:center}

@media(max-width:700px){.topbar-tools{right:12px}.identity-chip span[data-identity-label]{display:none}.identity-chip{padding:0 6px}}

/* 放在基础 `.topbar-tools` 之后，窄屏才真正把头像 chip 放回 flex 流里（否则 absolute 会盖住导航）。 */
@media(max-width:950px){.topbar-tools{position:static;flex:0 0 auto;height:100%}}

body.identity-open{overflow:hidden}

/* ================= 15. 首页密度：卡片缩小到 3+ 列 + 游戏人生子页面图片化（阶段 B2） ================= */

/* 15.1 内容卡片整体缩小（前提：12.8 的 minmax 已由 260px 调为 190px，保证窄屏也能排到 3 列） */

.portal-article{padding:14px;border-radius:var(--argon-radius)}

.portal-article h3{font-size:14px;line-height:1.6;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.portal-article p{font-size:12px;line-height:1.75}

.portal-card-tag{font-size:10px;padding:2px 8px}

.portal-card-bottom{font-size:10px}

.portal-article-cover{height:110px;border-radius:8px;margin-bottom:10px}

/* 文章封面卡在小格子里同步缩小 */

.portal-articles .article-cover-card{min-height:0;aspect-ratio:1.35;border-radius:var(--argon-radius)}

#scene-articles .article-cover-card{min-height:0;aspect-ratio:1.35}

.portal-articles .article-cover-card .article-cover-copy h3{font-size:14px;line-height:1.45;margin-bottom:4px}

.portal-articles .article-cover-card .article-cover-copy p{font-size:11px}

.portal-articles .article-cover-date{padding:3px 6px;font-size:10px}

/* 15.3 念念碎便签：保留四色配色，只留「内容 + 时间」——无标签、无作者，圆角统一并收小。
   内容块在卡片内居中：一行的便签跟同排最高的便签等高，时间行若还用 margin-top:auto 顶到底，
   内容就被拆成上下两端、中间空一大块。这里去掉那条 auto，并让整块居中（判据见 npm run notes）。
   注意 components.css 的 .portal-card-bottom 也有一条 margin-top:auto，在更低层，必须在这里覆盖。 */

#scene-notes .portal-article{padding:12px 13px;border-radius:var(--argon-radius-lg);justify-content:center}

#scene-notes .portal-article:before{display:none}

#scene-notes .portal-article p{font-size:13px;line-height:1.75;-webkit-line-clamp:4;margin:0 0 10px}

#scene-notes .portal-article .portal-card-bottom{margin-top:0;font-size:10px;opacity:.72}

#scene-notes .portal-article .portal-card-bottom b{opacity:.5}

/* ================= 16. 游戏人生：单一游戏墙（时长多的居中，短的向外扩散） ================= */

.games-page .games-heading{margin:0 0 16px}

.games-page .games-heading h1{margin:8px 0 0}

.games-wall{grid-template-columns:repeat(var(--wall-cols,8),minmax(0,1fr));gap:12px}

.games-wall .game-tile{border-radius:var(--argon-radius-lg);box-shadow:var(--argon-shadow)}

.games-wall .game-tile:hover,.games-wall .game-tile:focus-visible{transform:translateY(-3px);box-shadow:var(--argon-shadow-hover);border-color:rgba(94,114,228,.35)}

.games-wall .game-tile-caption{padding:22px 9px 8px;gap:1px}

.games-wall .game-tile-caption strong{line-height:1.35}

.games-wall .game-tile-caption em{color:#d6e6f2}

.game-tile.is-empty{background:transparent;border:0;box-shadow:none;pointer-events:none}

html[data-theme=gothic] .games-wall .game-tile-caption{background:linear-gradient(transparent,rgba(4,8,14,.86) 55%,rgba(2,5,9,.96))}

/* 16.1 图标尺寸随离墙心距离递减：中心最大，边缘最小（倍率由 app.js 写入 --tile-scale） */

.games-wall .game-tile{width:calc(var(--tile-scale,1) * 100%);justify-self:center;align-self:center}

.games-wall .game-tile-caption strong{font-size:calc(9px + 3px * var(--tile-scale,1))}

.games-wall .game-tile-caption em{font-size:calc(8px + 2px * var(--tile-scale,1))}

/* 16.2 圆形排列：同心圆环定位（中心一枚最大，越靠外环越小、卡越多）；坐标由 app.js 写入 --dx/--dy/--tile-size */

.games-wall.is-radial{display:block;position:relative;width:var(--wall-size,900px);height:var(--wall-size,900px);margin:18px auto 0}

.games-wall.is-radial .game-tile{position:absolute;aspect-ratio:auto;width:var(--tile-size);height:var(--tile-size);left:calc(50% + var(--dx,0px) - var(--tile-size) / 2);top:calc(50% + var(--dy,0px) - var(--tile-size) / 2)}

.games-wall.is-radial .game-tile-caption{}

.games-wall.is-radial .game-tile-caption em{opacity:.85}

/* 16.3 圆形卡片：图标铺满圆形，名称做成底部胶囊标签；环距按圆（无方角浪费）重新核算 */

.games-wall.is-radial .game-tile{border-radius:50%;border-color:rgba(255,255,255,.55)}

.games-wall.is-radial .game-tile-art{border-radius:50%}

.games-wall.is-radial .game-tile-caption{inset:auto auto 15%;left:50%;transform:translateX(-50%);width:max-content;max-width:82%;padding:3px 9px;border-radius:999px;background:rgba(8,22,32,.74);backdrop-filter:blur(3px);text-align:center;justify-items:center;gap:1px}

.games-wall.is-radial .game-tile-caption strong{font-size:calc(9px + 3px * var(--tile-scale,1));display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none}

.games-wall.is-radial .game-tile-caption:not(.is-compact) strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow-wrap:anywhere}

.games-wall.is-radial .game-tile-caption em{font-size:calc(7px + 2px * var(--tile-scale,1))}

.games-wall.is-radial .game-tile:hover,.games-wall.is-radial .game-tile:focus-visible{border-color:rgba(94,114,228,.55)}

html[data-theme=gothic] .games-wall.is-radial .game-tile-caption{background:rgba(4,10,16,.8)}
/* 16.4 标签球：同心圆环（圆心是内容最多的词，越往外词越少、圆越小）。
   几何和上面的游戏墙是同一套（sizes / radii / caps 见 pages/tags.js）—— 站主要的正是
   「差不多是游戏人生页面的方式」，只是卡片换成了词。环的坐标由 pages/tags.js 写进
   --dx / --dy / --tile-size / --tile-scale，颜色由 --tag-hue 定（同一个词永远同一个色）。 */

.tag-cloud.is-radial{display:block;position:relative;width:var(--wall-size,900px);height:var(--wall-size,900px);margin:22px calc(50% - var(--wall-size,900px) / 2) 0}

.tag-orb{position:absolute;display:grid;place-content:center;justify-items:center;gap:2px;width:var(--tile-size);height:var(--tile-size);left:calc(50% + var(--dx,0px) - var(--tile-size) / 2);top:calc(50% + var(--dy,0px) - var(--tile-size) / 2);border:1px solid rgba(255,255,255,.6);border-radius:50%;background:radial-gradient(120% 120% at 30% 20%,hsl(var(--tag-hue) 64% 97%),hsl(var(--tag-hue) 46% 87%));color:#12313f;text-align:center;text-decoration:none;overflow-wrap:anywhere;box-shadow:0 12px 26px rgba(40,86,108,.14);transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s cubic-bezier(.4,0,.2,1),border-color .22s ease}

.tag-orb:hover,.tag-orb:focus-visible{transform:translateY(-3px);border-color:rgba(94,114,228,.55);box-shadow:0 18px 36px rgba(40,86,108,.22)}

.tag-orb strong{display:-webkit-box;max-width:84%;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:calc(11px + 4px * var(--tile-scale,1));font-weight:600;line-height:1.3}

.tag-orb small{font-size:calc(8px + 2px * var(--tile-scale,1));opacity:.6}

.tag-orb.is-compact strong{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;font-size:11px}

.tag-orb.is-compact small{display:none}

html[data-theme=gothic] .tag-orb{border-color:rgba(255,255,255,.18);background:radial-gradient(120% 120% at 30% 20%,hsl(var(--tag-hue) 32% 24%),hsl(var(--tag-hue) 36% 14%));color:#dceaf2;box-shadow:0 12px 26px rgba(0,0,0,.35)}