/* ============================================================
   像素小屋 · 设计系统
   风格：马里奥 / 我的世界 像素风，高饱和卡通，复古游戏 UI
   ============================================================ */

/* ---------- 本地像素中文字体 Zpix（离线内置，避免外部 CDN 404/被拦截回退到宋体） ---------- */
@font-face {
  font-family: 'Zpix';
  src: url('zpix.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- 设计令牌 ---------- */
:root {
  /* 高饱和主色板 */
  --sky-top: #5c94fc;      /* 马里奥天空蓝 */
  --sky-bot: #8ec8ff;
  --brick: #d8501a;        /* 砖块橙红 */
  --brick-dark: #a8360d;
  --coin: #fbd000;         /* 金币黄 */
  --coin-dark: #c79000;
  --grass: #43b047;        /* 草地绿 */
  --grass-dark: #2f7d33;
  --pipe: #2ecc71;         /* 水管绿 */
  --dirt: #9c5a2b;         /* 泥土棕 */
  --dirt-dark: #6e3d18;
  --ink: #1a1420;          /* 描边近黑 */
  --paper: #fff7e6;        /* 面板米白 */
  --panel: #fffdf5;
  --shadow: #00000033;
  --danger: #e5352b;
  --sky-star: #ffffff;

  --px: 4px;               /* 像素单位 */
  --r-lg: 16px;            /* 统一大像素圆角（复古马里奥方块圆弧，非现代迷你圆角） */
  /* 拼豆马赛克方块切角：每格 --step，共 --steps 格，形成一格一格阶梯棱角（非顺滑圆弧） */
  --step: 4px;             /* 单格像素尺寸（= --px，肉眼可见分段） */
  --cut: 12px;             /* 切角总进深（= 3 格 × 4px）；越大棱角越明显 */
  /* 全站统一像素风字体；中文回退到黑体类，杜绝落到宋体/衬线 */
  --font-en: 'Press Start 2P', 'Zpix', 'Microsoft YaHei', '微软雅黑', sans-serif;
  --font-cn: 'Zpix', 'Press Start 2P', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Heiti SC', sans-serif;
}

/* ---------- 全局 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 全站统一像素风字体；表单控件默认不继承 font-family，这里强制统一，杜绝宋体 */
html, body, input, textarea, button, select, option {
  font-family: var(--font-cn);
}

/* hidden 属性必须能压过 display:flex/grid/block 等作者样式，
   否则 .modal-mask 这类 display:flex 元素即使加了 hidden 仍会显示出一个空遮罩 */
[hidden] { display: none !important; }

/* SEO / 无障碍：视觉隐藏但保留在可访问性树与 DOM 文本中（供爬虫、读屏软件读取） */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0; padding: 0;
  font-family: var(--font-cn);
  color: var(--ink);
  /* 像素底图：横向铺满不裁切砖块、固定在视口、上下砖块封边；渐变兜底 */
  background-color: var(--sky-top);
  background-image:
    url('bg-desktop.png'),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 60%, var(--grass) 100%);
  background-size: 100% 100%, 100% 100%;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  line-height: 1.9;
  image-rendering: pixelated;
  overflow-x: hidden;
}

/* 关闭默认可见滚动条外观（内容仍可滚动） */
body { scrollbar-width: thin; scrollbar-color: var(--brick) transparent; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { background: var(--brick); border: 2px solid var(--ink); }

/* 英文/数字用像素英文字体 */
.brand, .btn, .section-title, .count-badge, .filter-chip,
.pf-tag, .tech-badge, .card-cta { letter-spacing: 1px; }

/* ============================================================
   像素边框工具类：用多层 box-shadow 模拟硬边像素描边
   ============================================================ */
.pixel-border {
  border: var(--px) solid var(--ink);
  box-shadow:
    0 0 0 var(--px) var(--ink),
    var(--px) var(--px) 0 var(--px) var(--shadow);
}

/* ---------- 背景：云 / 太阳 / 砖块地面均由背景图提供，无需 CSS 绘制 ---------- */

/* ---------- 顶部状态栏（透明，浮在背景上；整体下移到砖块下方，留出间距） ---------- */
.topbar {
  position: relative; z-index: 50;   /* 不再 sticky，避免滚动时压到顶部砖块 */
  background: transparent;
}
.topbar-inner {
  max-width: 720px; margin: 0 auto;
  /* 顶部留白：把两个按钮压到砖块天花板下方一段距离，不贴砖块 */
  padding: 64px 16px 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* 左上红色像素标牌 PIXEL HOME（缩小、扁平块面，仅粗黑描边，无立体投影） */
.brand {
  font-family: var(--font-en); font-size: 10px; color: #fff;
  background: var(--brick); padding: 6px 10px;
  border: var(--px) solid var(--ink); border-radius: var(--r-lg);
  box-shadow: none;                  /* 扁平块面：去掉阶梯凸起投影 */
  text-shadow: none; letter-spacing: 1px;
  image-rendering: pixelated;
}
.top-actions { display: flex; align-items: center; gap: 10px; }
/* 顶栏用户名 & 我的头像：与 .btn 统一像素颗粒度（同 4px 黑描边 + 同阶梯投影 + 同 44px 高度、15px 字号、垂直居中） */
.top-user {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px;
  color: var(--ink); font-size: 15px; line-height: 1;
  background: var(--coin);
  border: var(--px) solid var(--ink);
  box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
}
/* 顶栏「我的头像」入口（所有人可见，含游客）：点击选自己的头像，与主页站长相框完全无关。
   与用户名/按钮同款 4px 黑描边 / 同款阶梯投影 / 同 44px 高度，保证像素颗粒度一致对齐 */
.my-avatar-btn {
  flex: 0 0 auto; cursor: pointer; padding: 3px;
  width: 44px; height: 44px; line-height: 0;
  background: var(--coin); border: var(--px) solid var(--ink);
  box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
  image-rendering: pixelated;
  transition: transform .08s steps(2);
}
.my-avatar-btn:hover { transform: translateY(calc(var(--px) * -1)); }
.my-avatar-btn:active { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--coin-dark), 0 var(--px) 0 var(--ink); }
.my-avatar-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: #7fb8f5; image-rendering: pixelated;
}

/* ---------- 按钮：方形像素块，粗黑描边 + 阶梯凸起投影，按下下沉 ---------- */
.btn {
  font-family: var(--font-cn); font-size: 15px; cursor: pointer;
  padding: 10px 20px; color: var(--ink);
  border: var(--px) solid var(--ink);
  background: var(--coin);
  box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
  transition: transform .06s steps(2), box-shadow .06s steps(2);
  min-height: 44px;
}
.btn:active { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--coin-dark), 0 var(--px) 0 var(--ink); }
.btn-coin { background: var(--coin); }
.btn-brick { background: var(--brick); color: #fff; box-shadow: 0 var(--px) 0 var(--brick-dark), 0 calc(var(--px)*2) 0 var(--ink); }
.btn-grass { background: var(--grass); color: #fff; box-shadow: 0 var(--px) 0 var(--grass-dark), 0 calc(var(--px)*2) 0 var(--ink); }
.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 var(--px) 0 #a3221b, 0 calc(var(--px)*2) 0 var(--ink); }
.btn-ghost { background: var(--panel); }
.btn-full { width: 100%; }
.btn:disabled { filter: grayscale(.7) brightness(.9); cursor: not-allowed; }
/* 顶栏「登录」按钮：缩小 + 扁平块面（仅粗黑描边，无立体投影/过渡），对齐 PIXEL HOME 风格 */
.btn-login {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: bold; font-size: 12px; padding: 6px 12px; min-height: 0;
  border-radius: var(--r-lg);
  box-shadow: none;                  /* 扁平块面：去掉阶梯凸起投影 */
  transition: none;                  /* 去掉平滑/steps 过渡 */
  image-rendering: pixelated;
}
.btn-login:active { transform: none; box-shadow: none; }
.btn-login .coin-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 13px; line-height: 1;
  background: var(--coin); border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: none;
}

/* ---------- 主舞台：内容落进背景图中间的米黄区域 ---------- */
.stage { max-width: 720px; margin: 0 auto; padding: 8px 24px 80px; position: relative; z-index: 1; }

/* 桌面端右侧「AI工具导航」文字列表：移动端隐藏（桌面 ≥1024px 才显示）。
   纯展示，数据由 JS 复用现有 tools 渲染，不引入新功能/逻辑。 */
.desktop-toolnav { display: none; }

/* ---------- 内容分区（无外框，直接铺在背景米黄区上；标题+卡片） ---------- */
.block { margin-bottom: 26px; position: relative; }

.section-title {
  font-size: 20px; margin-bottom: 16px; padding-top: 6px;
  color: var(--ink); text-shadow: 2px 2px 0 #fff;
}
.count-badge {
  display: inline-block; font-size: 13px; background: var(--grass); color: #fff;
  border: 2px solid var(--ink); padding: 2px 10px; vertical-align: middle;
}
/* 留言板标题右侧的绿色计数徽章：全局隐藏（桌面/移动一致） */
.stage-comments .count-badge { display: none; }

/* —— 标题左侧像素小图标 + 动画（桌面/移动端一致） —— */
.icon-bulb, .icon-bubble { display: inline-block; flex-shrink: 0; position: relative; }
.section-title { display: flex; align-items: center; gap: 10px; }

/* 像素电灯泡：三层方块叠出灯泡，闪烁动画 */
.icon-bulb {
  width: 22px; height: 22px; background: #ffd84a; border: 3px solid var(--ink);
  animation: bulb-blink 0.8s steps(2) infinite;
}
.icon-bulb::before {
  content: ""; position: absolute; top: -6px; left: 50%;
  width: 10px; height: 4px; margin-left: -5px;
  background: var(--ink);
  box-shadow: 0 -3px 0 var(--ink), 0 -6px 0 #ffd84a, 0 -9px 0 var(--ink);
}
.icon-bulb::after {
  content: ""; position: absolute; bottom: -4px; left: 50%;
  width: 14px; height: 4px; margin-left: -7px;
  background: var(--ink);
  box-shadow: 0 4px 0 var(--ink), 0 8px 0 #ffd84a;
}

/* 像素对话气泡：方块 + 尾巴，上下浮动 */
.icon-bubble {
  width: 22px; height: 18px; background: #7ecbff; border: 3px solid var(--ink);
  animation: bubble-float 1.2s steps(3) infinite;
}
.icon-bubble::before {
  content: ""; position: absolute;
  width: 3px; height: 3px; background: var(--ink);
  box-shadow: 4px 4px 0 var(--ink), 10px 4px 0 var(--ink);
  top: 5px; left: 4px;
}
.icon-bubble::after {
  content: ""; position: absolute; bottom: -5px; left: 3px;
  width: 4px; height: 6px;
  background: var(--ink);
  box-shadow: 3px -3px 0 #7ecbff, 3px 0 0 var(--ink), 6px -6px 0 var(--ink);
}

@keyframes bulb-blink {
  0%, 100% { background: #ffd84a; box-shadow: 0 0 0 #fff00000; }
  50%      { background: #fff;    box-shadow: 0 0 0 #fff00080, 0 0 6px #fff8a080; }
}
@keyframes bubble-float {
  0%, 100% { transform: translateY(-3px); }
  50%      { transform: translateY(3px); }
}

/* ---------- 个人信息区：叠层突出（头像/名字/标签探出白卡片上沿） ---------- */
/* 复古像素卡片：纯直角、无模糊阴影、无平滑过渡
   --hero-lift  = 白卡片顶沿相对 .profile-hero 顶部的下移量（= 头像露出卡片外的高度）
   --avatar     = 头像相框尺寸；hero-lift ≈ 80% * avatar，使头像约 80% 露在卡片外   */
:root { --paper2: #fff8e0; --avatar: 152px; --hero-lift: 122px; }

.profile-hero {
  display: grid;
  grid-template-columns: var(--avatar) 1fr;
  grid-template-areas:
    "avatar name"
    "avatar tag"
    "bio    bio"
    "contacts contacts";
  grid-template-rows: auto auto auto auto;
  align-items: start;
  gap: 0 20px;
  position: relative;              /* 叠层定位上下文 */
  background: transparent;         /* 白卡片改由 ::before 绘制，只覆盖下半部 */
  border: none;
  box-shadow: none;
  border-radius: 0;
  /* 顶部留出探出高度；白卡片从 --hero-lift 这条线往下开始 */
  padding: var(--hero-lift) 22px 22px;
  margin: 10px 0 26px;
  z-index: 0;
}
/* 白色大卡片底层：从 hero 顶部下移 --hero-lift，只承载简介+联系方式 */
.profile-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: var(--hero-lift); bottom: 0;
  background: var(--paper2);
  border: var(--px) solid var(--ink);
  border-radius: var(--r-lg);        /* 统一大像素圆角 */
  /* 阶梯像素下沉阴影，无模糊 */
  box-shadow: 0 var(--px) 0 var(--dirt-dark), 0 calc(var(--px)*2) 0 var(--ink);
  image-rendering: pixelated;
  z-index: -1;                     /* 压在头像/名字/标签之下 */
}

.avatar-frame {
  grid-area: avatar;
  align-self: start;
  position: relative; z-index: 3;  /* 头像层级最高，探出卡片 */
  width: var(--avatar); height: var(--avatar); padding: 6px;
  margin-top: calc(var(--hero-lift) * -1);  /* 上移到 hero 顶部，约 80% 露在卡片外 */
  background: var(--coin);
  border: var(--px) solid var(--ink);
  border-radius: var(--r-lg);      /* 统一大像素圆角 */
  box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
  image-rendering: pixelated;
}
/* 头像相框：主页站长头像。仅管理员可点改（显示手型 + 悬停像素弹跳 + 「换」徽标）；
   游客/普通用户不可点，保持默认光标、无提示徽标。 */
.avatar-frame { cursor: default; }
body.admin-mode .avatar-frame { cursor: pointer; }
body.admin-mode .avatar-frame:hover { transform: translateY(calc(var(--px) * -1)); transition: transform .08s steps(2); }
/* 换头像提示（纯 CSS ::after，不新增 DOM 节点）：仅管理员可见，指示「点相框改主页头像」 */
body.admin-mode .avatar-frame::after {
  content: "🔄 换";
  position: absolute; right: -6px; bottom: -6px; z-index: 5;
  font-size: 11px; font-weight: bold; color: #fff; line-height: 1;
  padding: 4px 6px; white-space: nowrap;
  background: var(--grass); border: 2px solid var(--ink);
  box-shadow: 0 2px 0 var(--grass-dark);
  image-rendering: pixelated;
}
body.admin-mode .avatar-frame:hover::after { background: var(--brick); box-shadow: 0 2px 0 var(--brick-dark); }
.avatar-img {
  width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated;
  display: block; background: #7fb8f5;
  border-radius: calc(var(--r-lg) - 6px);  /* 内层图片同款圆角（减去相框内边距） */
}
/* profile-main 不新增/删除 DOM，用 display:contents 让其子元素直接参与外层 grid */
.profile-main { display: contents; }

/* 名字：大号加粗，完全探出白卡片顶沿之上，顶部与头像对齐（顶沿在 y=hero-lift） */
.pf-name {
  grid-area: name;
  align-self: start;
  position: relative; z-index: 4;
  /* 上移到与头像顶部齐平（= 头像的 -hero-lift），完全在白卡片外面 */
  margin: calc(var(--hero-lift) * -1) 0 0;
  font-size: 56px; line-height: 1.05; font-weight: bold; color: var(--coin);
  text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
  word-break: break-word;
  image-rendering: pixelated;
}
/* 绿色标签长条：横压在白卡片顶部边缘（约一半在外一半在内） */
.pf-tag {
  grid-area: tag;
  align-self: start;
  position: relative; z-index: 3;
  display: block; width: 100%;
  /* 上提使其横跨白卡片顶沿：约一半覆在卡片外、一半压进卡片内 */
  margin: -29px 0 0; padding: 9px 16px; font-size: 17px; font-weight: bold;
  background: var(--grass); color: #fff; text-align: center;
  border: var(--px) solid var(--ink);
  border-radius: var(--r-lg);      /* 统一大像素圆角（左右两端圆润） */
  box-shadow: 0 var(--px) 0 var(--grass-dark);
  text-shadow: 2px 2px 0 var(--grass-dark);
  image-rendering: pixelated;
}
/* 简介：完整落在白卡片内 */
.pf-bio {
  grid-area: bio;
  position: relative; z-index: 1;
  font-size: 16px; margin: 14px 0 0; color: var(--ink);
  background: #fffdf5;
  border: var(--px) solid var(--ink);
  border-radius: var(--r-lg);      /* 统一大像素圆角 */
  box-shadow: 0 3px 0 var(--ink);
  padding: 12px 16px;
}
/* 联系方式：完整落在白卡片内，两个一行并排、合计撑满整卡宽度（与上方简介对齐） */
.pf-contacts {
  grid-area: contacts;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-top: 12px;
}
.contact-chip {
  font-size: 15px; padding: 10px 14px; text-align: center;
  background: #fffdf5; color: var(--ink);
  border: var(--px) solid var(--ink);
  border-radius: var(--r-lg);      /* 统一大像素圆角 */
  box-shadow: 0 3px 0 var(--ink);
  min-width: 0;                    /* 允许在网格内收缩，避免溢出裁切 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  image-rendering: pixelated;
}
.contact-ico { font-size: 18px; line-height: 1; }

/* ---------- 卡片网格（作品 3 列 / 工具 2 列，移动端单列） ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#toolGrid { grid-template-columns: repeat(2, 1fr); }

.game-card {
  background: var(--panel);
  border: var(--px) solid var(--ink);
  box-shadow: 0 var(--px) 0 var(--dirt-dark), 0 calc(var(--px)*2) 0 var(--ink);
  padding: 12px; cursor: pointer; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .08s steps(2);
}
.game-card:hover { transform: translateY(calc(var(--px) * -1)); }
.game-card:active { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--dirt-dark), 0 var(--px) 0 var(--ink); }
/* 卡片顶部“像素显示器”屏幕区 */
.card-screen {
  height: 74px; border: var(--px) solid var(--ink);
  background: #1b2547;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  position: relative; overflow: hidden;
  box-shadow: inset 0 var(--px) 0 #46599c, inset 0 calc(var(--px) * -1) 0 #101838;
}
.card-screen .card-icon { font-size: 34px; line-height: 1; }
.card-screen .screen-tech {
  color: #cfe0ff; font-size: 11px; text-align: center; line-height: 1.4;
  padding: 0 4px; word-break: break-word;
}
.card-icon { font-size: 34px; line-height: 1; }
.card-name { font-size: 15px; font-weight: bold; }
.card-desc { font-size: 12px; color: #4a3f36; min-height: 1.2em; }
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tech-badge, .cat-badge {
  font-size: 11px; padding: 2px 8px; border: 2px solid var(--ink);
  background: var(--sky-bot); color: var(--ink);
}
.cat-badge { background: var(--coin); }
/* 卡片底部 CTA（方块像素条） */
.card-cta {
  margin-top: auto; font-size: 12px; color: #fff; font-weight: bold; text-align: center;
  background: var(--brick); border: var(--px) solid var(--ink);
  padding: 6px 10px; box-shadow: 0 3px 0 var(--brick-dark);
}

/* ============================================================
   作品卡片：彩色分栏顶栏（蓝/橙/灰循环），取消深色黑块屏幕
   顶栏 = 小标签图标 + 标题；主体 = 左侧金币装饰 + 图标名称/描述/技术栈
   整体米白底、8bit 马里奥像素风，粗黑像素描边（拐角走 .px-frame 体系）
   ============================================================ */
.project-card { padding: 0; overflow: hidden; gap: 0; }
/* 彩色顶栏 */
.project-card .pc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; color: #fff; font-weight: bold;
  border-bottom: var(--px) solid var(--ink);
  text-shadow: 2px 2px 0 rgba(0,0,0,.45);
}
.project-card .head-blue   { background: #3b6cff; }   /* ① 蓝色 */
.project-card .head-orange { background: #f79319; }   /* ② 橙色（主项目卡片，禁止黑块） */
.project-card .head-gray   { background: #3a3140; }   /* ③ 深灰黑 */
.project-card .pc-tag {
  flex: 0 0 auto; font-size: 16px; line-height: 1;
  background: rgba(255,255,255,.22); padding: 3px 5px;
  border: 2px solid var(--ink); image-rendering: pixelated;
}
.project-card .pc-title {
  flex: 1 1 auto; font-size: 14px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 主体：左金币装饰 + 内容 */
.project-card .pc-body {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px;
}
.project-card .pc-coin {
  flex: 0 0 auto; font-size: 26px; line-height: 1; margin-top: 2px;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.project-card .pc-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.project-card .pc-name { font-size: 15px; font-weight: bold; }
.project-card .pc-tech { font-size: 11px; color: #6a5a48; }
.project-card .card-cta { margin: 0 12px 12px; }
/* 作品封面图（V0.2）：固定宽高比像素边框，加载失败隐藏退回纯文字卡片 */
.project-card .pc-cover {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-bottom: var(--px) solid var(--ink); background: #1b2547;
  image-rendering: pixelated;
}
.project-card .pc-cover.img-fail { display: none; }

/* 作品详情弹窗（V0.2） */
.project-detail { display: flex; flex-direction: column; gap: 12px; }
.project-detail .pd-cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border: var(--px) solid var(--ink); background: #1b2547; image-rendering: pixelated;
}
.project-detail .pd-cover.img-fail { display: none; }
.project-detail .pd-cover-empty {
  display: flex; align-items: center; justify-content: center;
  color: #cfe0ff; font-size: 14px; min-height: 120px;
  border: var(--px) solid var(--ink); background: #1b2547;
}
.project-detail .pd-name { font-size: 18px; margin: 0; }
.project-detail .pd-cat { margin: -6px 0 0; }
.project-detail .pd-desc { font-size: 13px; color: #4a3f36; line-height: 1.6; margin: 0; }
.project-detail .pd-tech { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.project-detail .pd-tech-label { color: #6a5a48; }
.project-detail .pd-open { margin-top: 4px; }

/* ============================================================
   AI 工具：单排图标 + 名称按钮（米白像素卡片、拼豆圆角、左侧小图标）
   ============================================================ */
#toolGrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tool-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 52px;
  background: var(--panel); color: var(--ink); text-decoration: none;
  border: var(--px) solid var(--ink);
  box-shadow: 0 var(--px) 0 var(--dirt-dark), 0 calc(var(--px)*2) 0 var(--ink);
  transition: transform .08s steps(2);
  image-rendering: pixelated;
}
.tool-chip:hover { transform: translateY(calc(var(--px) * -1)); }
.tool-chip:active { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--dirt-dark), 0 var(--px) 0 var(--ink); }
.tool-chip .tool-ico {
  flex: 0 0 auto; font-size: 24px; line-height: 1;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--coin); border: 2px solid var(--ink); image-rendering: pixelated;
}
.tool-chip .tool-label {
  flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: bold;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 分类筛选条 ---------- */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 14px; }
.filter-chip {
  flex: 0 0 auto; font-family: var(--font-cn); font-size: 13px; cursor: pointer;
  padding: 7px 14px; background: var(--panel); color: var(--ink);
  border: var(--px) solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  min-height: 38px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.filter-chip .chip-emoji { font-size: 14px; line-height: 1; }
.filter-chip.active { background: var(--grass); color: #fff; box-shadow: 0 3px 0 var(--grass-dark); }

/* ---------- 评论区 ---------- */
.comment-composer {
  background: var(--panel); border: var(--px) solid var(--ink);
  padding: 14px; margin-bottom: 18px; box-shadow: 0 3px 0 var(--ink);
}
.composer-name { font-size: 14px; margin-bottom: 8px; color: var(--grass-dark); font-weight: bold; }
.pixel-input, .pixel-textarea {
  width: 100%; font-family: var(--font-cn); font-size: 16px; color: var(--ink);
  background: #fff; border: var(--px) solid var(--ink); padding: 10px; resize: vertical;
}
.pixel-input:focus, .pixel-textarea:focus {
  outline: none; box-shadow: 0 0 0 var(--px) var(--coin), 0 0 0 calc(var(--px)*2) var(--ink); /* focus 硬边像素高亮 */
}
.composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 10px; }
.char-count { font-size: 13px; color: #7a6a5a; }
.char-count.over { color: var(--danger); font-weight: bold; }

.login-hint {
  background: var(--panel); border: var(--px) dashed var(--ink);
  padding: 18px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center;
}
.login-hint span { font-size: 15px; }

.comment-list {
  background: var(--panel); border: var(--px) solid var(--ink);
  padding: 4px 14px; box-shadow: 0 3px 0 var(--ink);
}
.comment-list:empty { display: none; }
.comment-item { border-bottom: 3px dotted var(--ink); padding: 14px 0; }
.comment-item:last-child { border-bottom: none; }
.comment-head { display: flex; align-items: center; gap: 10px; }
/* 评论头像（自己的评论=本机头像图；他人=像素小人占位方块），24px 像素小方块带黑描边 */
.comment-avatar {
  flex: 0 0 auto; width: 28px; height: 28px;
  border: 2px solid var(--ink); background: var(--coin);
  image-rendering: pixelated; object-fit: cover; display: inline-block;
}
.comment-avatar.comment-avatar-ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; background: var(--sky-bot);
}
.comment-author { font-size: 15px; font-weight: bold; }
.comment-author .me-tag { font-size: 11px; background: var(--coin); border: 2px solid var(--ink); padding: 1px 5px; margin-left: 6px; }
.comment-time { font-size: 12px; color: #8a7a6a; margin-left: auto; }
.comment-body { font-size: 15px; margin-top: 6px; word-break: break-word; white-space: pre-wrap; }
.comment-del { font-size: 12px; color: var(--danger); background: none; border: 2px solid var(--danger); cursor: pointer; padding: 3px 8px; }
/* —— 楼中楼（回复）相关 —— */
.comment-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.comment-reply { font-size: 12px; color: var(--grass-dark); background: none; border: 2px solid var(--grass-dark); cursor: pointer; padding: 3px 8px; }
.comment-reply:hover { background: var(--grass); color: #fff; }
.reply-tag { font-size: 11px; background: var(--sky-bot); border: 2px solid var(--ink); padding: 1px 5px; color: var(--ink); }
/* 内联回复框 */
.reply-form { margin-top: 10px; }
.reply-form[hidden] { display: none; }
.reply-composer { margin-bottom: 0; padding: 10px; background: var(--paper); }
.reply-composer .composer-name { font-size: 13px; color: var(--grass-dark); margin-bottom: 6px; }
.btn-sm { font-size: 13px; padding: 6px 12px; }
/* 子回复容器：左侧像素连接线 + 缩进 */
.comment-children {
  margin: 10px 0 2px 14px; padding-left: 14px;
  border-left: 3px solid var(--ink);
}
.comment-children .comment-item { border-bottom: 2px dotted #b8a890; padding: 10px 0; }
.comment-children .comment-item:last-child { border-bottom: none; }
.comment-children .comment-avatar { width: 24px; height: 24px; }

.empty-state { text-align: center; padding: 30px 10px; font-size: 15px; color: #7a6a5a; }
.empty-state .big { font-size: 40px; display: block; margin-bottom: 8px; }

.load-more-wrap { text-align: center; margin-top: 16px; }

/* ---------- 管理员左侧菜单 ---------- */
.admin-menu {
  position: fixed; top: 88px; left: 16px; z-index: 40; width: 172px;
  background: var(--dirt); border: var(--px) solid var(--ink);
  box-shadow: 0 var(--px) 0 var(--dirt-dark), 0 calc(var(--px)*2) 0 var(--ink);
  padding: 12px;
}
.admin-menu-title { color: var(--coin); font-size: 14px; margin-bottom: 10px; text-shadow: 1px 1px 0 var(--ink); }
.admin-menu-item {
  display: block; width: 100%; text-align: left; font-family: var(--font-cn); font-size: 14px;
  padding: 10px; margin-bottom: 8px; cursor: pointer; color: #fff;
  background: var(--dirt-dark); border: 2px solid var(--ink); min-height: 44px;
}
.admin-menu-item:hover, .admin-menu-item.active { background: var(--grass); }
/* 管理员登录后：管理菜单作为左上角浮层，不挤占主舞台；主页保持居中不位移 */

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100; background: #1a142088;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  background: var(--panel); border: var(--px) solid var(--ink);
  box-shadow: 0 calc(var(--px)*2) 0 var(--ink); padding: 22px;
}
.modal-title { font-size: 18px; margin-bottom: 16px; text-shadow: 1px 1px 0 #fff; display: flex; justify-content: space-between; align-items: center; }
.modal-close { cursor: pointer; background: var(--danger); color: #fff; border: 2px solid var(--ink); width: 32px; height: 32px; font-family: var(--font-en); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; margin-bottom: 6px; }
.field .req { color: var(--danger); }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; min-height: 1em; }
.modal-actions { display: flex; gap: 10px; margin-top: 8px; }

/* 图片上传控件（头像 / 作品封面）：像素直角风，禁圆角 */
.img-upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.img-upload-prev {
  width: 72px; height: 72px; object-fit: cover;
  image-rendering: pixelated;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.18);
  border-radius: 0;               /* 像素风：直角 */
}
.img-upload-actions { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; }
.img-upload-status { font-size: 12px; color: var(--grass); }
.img-upload-status:empty { display: none; }
/* 头像：选择 / 清除 两按钮等宽，整行与下方输入框边框等宽 */
#pAvatarPick, #pAvatarClear { flex: 1 1 0; justify-content: center; }
/* 封面：上传主按钮加宽，与下方输入框等宽（清除按钮保持自然宽） */
#iCoverPick { flex: 1 1 0; justify-content: center; }
#iCoverClear { flex: 0 0 auto; }

/* 身份选择卡片 */
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.role-card {
  cursor: pointer; text-align: center; padding: 20px 12px; background: var(--paper);
  border: var(--px) solid var(--ink); box-shadow: 0 var(--px) 0 var(--ink);
  transition: transform .08s steps(2);
}
.role-card:hover { transform: translateY(calc(var(--px) * -1)); background: var(--coin); }
.role-emoji { font-size: 44px; display: block; margin-bottom: 8px; }
.role-name { font-size: 16px; font-weight: bold; }
.role-desc { font-size: 12px; color: #6a5a4a; margin-top: 6px; }

/* 管理面板内的列表行 */
.admin-row {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 2px solid var(--ink); background: var(--paper); margin-bottom: 8px; flex-wrap: wrap;
}
.admin-row .row-main { flex: 1 1 auto; min-width: 0; }
.admin-row .row-title { font-size: 15px; font-weight: bold; }
.admin-row .row-sub { font-size: 12px; color: #7a6a5a; word-break: break-all; }
.admin-row .row-ops { display: flex; gap: 6px; }
.mini-btn { font-family: var(--font-cn); font-size: 12px; padding: 6px 10px; border: 2px solid var(--ink); cursor: pointer; background: var(--coin); min-height: 36px; }
.mini-btn.del { background: var(--danger); color: #fff; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 200;
  background: var(--ink); color: var(--coin); font-size: 14px; padding: 12px 20px;
  border: 3px solid var(--coin); animation: toast-in .2s steps(3);
}
@keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ============================================================
   会动的像素装饰：全部 DOM/CSS 生成，绝对定位在页面左右 + 底部边缘，
   绝不遮挡中间内容；动画全用 steps() 呈现像素跳帧感
   ============================================================ */
.deco { position: fixed; z-index: 0; line-height: 1; pointer-events: none; user-select: none; image-rendering: pixelated; }

/* ============================================================
   装饰精准分区摆放（严格按指定坐标区域，杜绝扎堆/遮挡主卡片）
   只保留 6 个装饰：2 云 + 2 太阳 + 2 蘑菇；其余节点隐藏（不动 DOM）。
   全部 fixed 分布在四边留白处，z-index:0 低于中间米白主卡片(z-index:1)，
   image-rendering:pixelated，动画一律 @keyframes + steps() 帧动画，禁用平滑 ease。
   ============================================================ */

/* —— ① 云朵 2 朵：上下对角分开（左上 / 左下） —— */
.deco-cloud  { top: 12%; left: 2%; font-size: 34px; animation: cloud-drift 6s steps(3) infinite; }   /* 左上，中等，横向漂浮 */
.deco-cloud2 { top: 78%; left: 1%; font-size: 26px; animation: cloud-bob 2.8s steps(2) infinite .3s; } /* 左下，偏小，上下浮动 */

/* —— ② 太阳 2 个：统一放右侧、上下远距离分隔 —— */
.deco-sun    { top: 25%; right: 1.5%; font-size: 38px; animation: sun-sway 3.2s steps(2) infinite; }   /* 右侧中上，左右缓慢摆动 */
/* 第二个太阳复用 .deco-star 节点：隐藏原 ⭐ 字符，用伪元素注入 🌞（不改 HTML/DOM） */
.deco-star   { top: 82%; right: 2%; font-size: 0; animation: none; }
.deco-star::before {
  content: "🌞"; font-size: 34px; display: inline-block; image-rendering: pixelated;
  animation: sun-spin 3.6s steps(2) infinite;                                                          /* 右侧底部，自转摇摆 */
}

/* —— ③ 小蘑菇 2 个：左右对角均衡分布 —— */
.deco-mush   { top: 90%; left: 3%; font-size: 26px; animation: hop 2.2s steps(2) infinite; }           /* 左下角云朵下方，上下弹跳 */
.deco-mush2  { top: 52%; right: 1%; font-size: 24px; animation: mush-bob 2.6s steps(2) infinite .5s; } /* 右侧两太阳中间空隙，平缓起伏 */

/* —— 其余装饰节点全部隐藏，避免扎堆（保持 DOM 不变，仅 CSS 关闭显示） —— */
.deco-cloud3, .deco-cloud4, .deco-cloud5,
.deco-star2, .deco-star3, .deco-star4,
.deco-mush3, .deco-mush4 { display: none; }

@keyframes twinkle  { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes coin-spin { 0% { transform: scaleX(1); } 50% { transform: scaleX(.2); } 100% { transform: scaleX(1); } }
@keyframes cloud-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes mush-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hop      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sun-sway  { 0% { transform: translateX(-6px); } 50% { transform: translateX(0); } 100% { transform: translateX(6px); } }
@keyframes sun-spin  { 0% { transform: rotate(-10deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(10deg); } }
@keyframes cloud-drift { 0% { transform: translateX(0); } 50% { transform: translateX(12px); } 100% { transform: translateX(0); } }

/* ============================================================
   新增：登录按钮左侧金币 CSS（纯 CSS 绘制的像素金币，靠左区域，
   与「登录」按钮同处顶部右侧动作区，位于其外侧左边）
   ============================================================ */
.top-actions { position: relative; }
.top-actions::before {
  content: "";
  display: inline-block;
  width: 22px; height: 22px; margin-right: 2px; flex: 0 0 auto;
  background:
    radial-gradient(circle at 50% 42%, #fff3a8 0 18%, transparent 19%),
    var(--coin);
  border: var(--px) solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 var(--coin-dark);
  image-rendering: pixelated;
  animation: coin-spin 1.6s steps(4) infinite;   /* steps 跳帧像素旋转 */
}

/* ============================================================
   新增：「我的作品」板块侧边——像素立体游戏成就奖杯
   纯 CSS box-shadow 像素点阵拼出：杯碗 + 双耳 + 杯柱 + 底座；
   粗黑像素描边、image-rendering:pixelated，配缓慢上下浮动 steps 动画
   ============================================================ */
.title-works { position: relative; display: inline-flex; align-items: center; gap: 14px; }
/* 用一个 1 像素点当“画笔”，靠 box-shadow 逐格点出奖杯（每格 4px = --tp） */
.title-works::before {
  content: "";
  --tp: 4px;                       /* 像素格尺寸 */
  --g: #fbd000;                    /* 奖杯金 */
  --gd: #c79000;                   /* 暗部金 */
  --gl: #fff3a8;                   /* 高光金 */
  --k: #1a1420;                    /* 黑描边 */
  width: var(--tp); height: var(--tp);
  flex: 0 0 auto;
  margin: 0 18px 4px 2px;          /* 为右侧点阵留出宽度 + 底座落位 */
  background: transparent;
  image-rendering: pixelated;
  animation: trophy-float 2.6s steps(2) infinite;   /* 缓慢上下浮动，steps 像素帧 */
  /* 逐格点阵：行 y 从上到下（0 起），列 x 从左到右；黑边包裹金块与高光 */
  box-shadow:
    /* 杯口顶沿（黑边） */
    calc(var(--tp)*1) 0 0 var(--k), calc(var(--tp)*2) 0 0 var(--k), calc(var(--tp)*3) 0 0 var(--k), calc(var(--tp)*4) 0 0 var(--k), calc(var(--tp)*5) 0 0 var(--k),
    /* 第1行杯碗 + 双耳 */
    0 calc(var(--tp)*1) 0 var(--k), calc(var(--tp)*1) calc(var(--tp)*1) 0 var(--gl), calc(var(--tp)*2) calc(var(--tp)*1) 0 var(--g), calc(var(--tp)*3) calc(var(--tp)*1) 0 var(--g), calc(var(--tp)*4) calc(var(--tp)*1) 0 var(--g), calc(var(--tp)*5) calc(var(--tp)*1) 0 var(--gd), calc(var(--tp)*6) calc(var(--tp)*1) 0 var(--k),
    /* 第2行杯碗 */
    0 calc(var(--tp)*2) 0 var(--k), calc(var(--tp)*1) calc(var(--tp)*2) 0 var(--g), calc(var(--tp)*2) calc(var(--tp)*2) 0 var(--g), calc(var(--tp)*3) calc(var(--tp)*2) 0 var(--g), calc(var(--tp)*4) calc(var(--tp)*2) 0 var(--g), calc(var(--tp)*5) calc(var(--tp)*2) 0 var(--gd), calc(var(--tp)*6) calc(var(--tp)*2) 0 var(--k),
    /* 第3行杯碗收窄 */
    calc(var(--tp)*1) calc(var(--tp)*3) 0 var(--k), calc(var(--tp)*2) calc(var(--tp)*3) 0 var(--g), calc(var(--tp)*3) calc(var(--tp)*3) 0 var(--g), calc(var(--tp)*4) calc(var(--tp)*3) 0 var(--gd), calc(var(--tp)*5) calc(var(--tp)*3) 0 var(--k),
    /* 第4行杯底收口 */
    calc(var(--tp)*2) calc(var(--tp)*4) 0 var(--k), calc(var(--tp)*3) calc(var(--tp)*4) 0 var(--g), calc(var(--tp)*4) calc(var(--tp)*4) 0 var(--k),
    /* 第5行杯柱 */
    calc(var(--tp)*3) calc(var(--tp)*5) 0 var(--k),
    /* 第6行底座上层 */
    calc(var(--tp)*2) calc(var(--tp)*6) 0 var(--k), calc(var(--tp)*3) calc(var(--tp)*6) 0 var(--gd), calc(var(--tp)*4) calc(var(--tp)*6) 0 var(--k),
    /* 第7行底座下层（更宽） */
    calc(var(--tp)*1) calc(var(--tp)*7) 0 var(--k), calc(var(--tp)*2) calc(var(--tp)*7) 0 var(--gd), calc(var(--tp)*3) calc(var(--tp)*7) 0 var(--gd), calc(var(--tp)*4) calc(var(--tp)*7) 0 var(--gd), calc(var(--tp)*5) calc(var(--tp)*7) 0 var(--k),
    /* 第8行底座封边 */
    calc(var(--tp)*1) calc(var(--tp)*8) 0 var(--k), calc(var(--tp)*2) calc(var(--tp)*8) 0 var(--k), calc(var(--tp)*3) calc(var(--tp)*8) 0 var(--k), calc(var(--tp)*4) calc(var(--tp)*8) 0 var(--k), calc(var(--tp)*5) calc(var(--tp)*8) 0 var(--k);
}
@keyframes trophy-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ============================================================
   新增：头像选择弹窗（复用通用弹窗容器，统一像素大圆角 + 粗黑描边，
   层级由 .modal-mask z-index:100 保证高于米白色主卡片，不遮文字按钮）
   ============================================================ */
.avatar-picker { display: flex; flex-direction: column; gap: 16px; }
.avatar-group {
  background: var(--paper);
  border: var(--px) solid var(--ink);
  border-radius: var(--r-lg);          /* 统一大像素圆角 */
  box-shadow: 0 var(--px) 0 var(--dirt-dark), 0 calc(var(--px)*2) 0 var(--ink);
  padding: 12px;
  image-rendering: pixelated;
}
.avatar-group-title {
  font-size: 14px; font-weight: bold; color: var(--grass-dark);
  margin-bottom: 10px; text-shadow: 1px 1px 0 #fff;
}
/* 横向平铺 4 张缩略图 */
.avatar-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-thumb {
  padding: 5px; cursor: pointer; background: var(--coin);
  border: var(--px) solid var(--ink);
  border-radius: var(--r-lg);          /* 缩略框统一大像素圆角 */
  box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
  image-rendering: pixelated; line-height: 0;
  transition: transform .08s steps(2); /* steps 像素动画，非平滑过渡 */
}
.avatar-thumb:hover { transform: translateY(calc(var(--px) * -1)); }
.avatar-thumb:active { transform: translateY(var(--px)); box-shadow: 0 0 0 var(--coin-dark), 0 var(--px) 0 var(--ink); }
.avatar-thumb.active { background: var(--grass); box-shadow: 0 var(--px) 0 var(--grass-dark), 0 calc(var(--px)*2) 0 var(--ink); }
.avatar-thumb-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  background: #7fb8f5; image-rendering: pixelated;   /* 像素清晰 */
  border-radius: calc(var(--r-lg) - 6px);
}

/* ============================================================
   补齐统一大圆角：下方所有白色卡片 / 输入框 / 按钮等方块组件
   （仅补 border-radius，不改动布局、文字、动画、背景）
   ============================================================ */
.game-card,
.card-screen,
.card-cta,
.tech-badge, .cat-badge,
.filter-chip,
.tool-chip,
.comment-composer,
.pixel-input, .pixel-textarea,
.login-hint,
.comment-list,
.comment-del,
.count-badge,
.admin-menu,
.admin-menu-item,
.admin-row,
.mini-btn,
.modal-box,
.modal-close,
.role-card,
.btn, .top-user {
  border-radius: var(--r-lg);
  image-rendering: pixelated;
}
.card-screen { border-radius: calc(var(--r-lg) - 4px); }
.tech-badge, .cat-badge, .count-badge, .comment-del, .modal-close, .mini-btn {
  border-radius: calc(var(--r-lg) - 6px);   /* 小方块用略小同款圆角，保持协调 */
}

/* ============================================================
   像素方块分段拐角（核心·全站统一）：拒绝顺滑圆弧，
   四角为一格一格的黑色阶梯马赛克方块，复刻 FC 马里奥复古方块。
   实现：用一张 SVG 作 border-image —— 四角是黑色阶梯像素块、
   四边是黑色实线、中心透明；border-image 的四角切片「原样贴角不拉伸」，
   阶梯黑边因此完整保留在每个拐角，且可套用于任意尺寸的卡片。
   （只替换边框/拐角外观，不改布局、文字、背景、动画、权限逻辑）
   ============================================================ */
:root {
  /* 16×16 视口：四角各画 6px 的 3 级黑色阶梯 + 4px 黑边框；slice=6 让角切片原样贴角 */
  --pixel-frame:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='%231a1420'%3E%3Crect x='6' y='0' width='4' height='4'/%3E%3Crect x='0' y='6' width='16' height='4'/%3E%3Crect x='6' y='12' width='4' height='4'/%3E%3Crect x='4' y='2' width='2' height='2'/%3E%3Crect x='2' y='4' width='2' height='2'/%3E%3Crect x='10' y='2' width='2' height='2'/%3E%3Crect x='12' y='4' width='2' height='2'/%3E%3Crect x='4' y='10' width='2' height='2'/%3E%3Crect x='2' y='10' width='2' height='2'/%3E%3Crect x='10' y='10' width='2' height='2'/%3E%3Crect x='12' y='10' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* 通用像素方块边框工具类：任意卡片/按钮套上即得黑色阶梯拐角（去掉 border-radius 弧线） */
.px-frame {
  border-style: solid;
  border-width: 6px;
  border-image: var(--pixel-frame) 6 repeat;
  border-radius: 0 !important;
  image-rendering: pixelated;
}

/* 全站清单：所有卡片 / 按钮 / 输入框 / 弹窗统一套用像素方块拐角，
   彻底取代之前的平滑 border-radius 弧线（第一个卡片以外的全部对齐） */
.brand,
.btn, .btn-login, .top-user,
.pf-tag,
.pf-bio,
.contact-chip,
.avatar-frame,
.game-card,
.card-screen,
.card-cta,
.tech-badge, .cat-badge,
.count-badge,
.filter-chip,
.tool-chip,
.comment-composer,
.pixel-input, .pixel-textarea,
.login-hint,
.comment-list,
.comment-del,
.admin-menu,
.admin-menu-item,
.admin-row,
.mini-btn,
.modal-box,
.modal-close,
.role-card,
.avatar-group,
.avatar-thumb {
  border-style: solid;
  border-width: 6px;
  border-image: var(--pixel-frame) 6 repeat;
  border-radius: 0 !important;
  image-rendering: pixelated;
}

/* 米白色大卡片（伪元素）单独套用像素方块边框 */
.profile-hero::before {
  border: 6px solid var(--ink);
  border-image: var(--pixel-frame) 6 repeat;
  border-radius: 0 !important;
}

/* 头像图 / 缩略图为纯图片，用直角 + 无圆角（外层相框已带阶梯黑边） */
.avatar-img, .avatar-thumb-img { border-radius: 0 !important; }

/* 细边小组件（badge / 关闭按钮等）边框收细一点，保持协调但仍是黑色阶梯角 */
.tech-badge, .cat-badge, .count-badge, .comment-del, .modal-close, .mini-btn,
.card-screen {
  border-width: 4px;
  border-image: var(--pixel-frame) 6 repeat;
}

/* ============================================================
   移动端适配（移动优先增强）：单列、全宽按钮、抽屉、字号≥16px
   ============================================================ */
@media (max-width: 760px) {
  /* 手机端换竖版背景图（不裁切砖块） */
  body {
    background-image:
      url('bg-mobile.png'),
      linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 60%, var(--grass) 100%);
    background-size: 100% 100%, 100% 100%;
    background-position: center top, center top;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
  }
  /* 移动端双列强制等分：minmax(0,1fr) 避免长文字/图标把某列顶宽导致左右不对称 */
  .card-grid, #toolGrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* 允许卡片在网格列内收缩，配合 minmax(0,1fr) 才能真正等宽 */
  .tool-chip, .game-card { min-width: 0; }
  .brand { font-size: 10px; }
  .btn { font-size: 15px; }
  .stage { max-width: 100%; padding: 4px 22px 80px; }

  /* 个人信息区：严格照搬桌面端两列排布（头像在左，名字/标签在右，简介/联系方式通栏），
     仅按窄屏收紧头像尺寸与探出高度，不改结构 */
  .profile-hero {
    --avatar: 104px;               /* 窄屏头像相框缩小 */
    --hero-lift: 84px;             /* 探出高度约 80% 头像，配合较小头像 */
    grid-template-columns: var(--avatar) 1fr;
    grid-template-areas:
      "avatar name"
      "avatar tag"
      "bio    bio"
      "contacts contacts";
    justify-items: stretch; text-align: left;
    gap: 0 16px;
    padding: var(--hero-lift) 22px 18px;
    width: calc(100% - 44px);       /* 与 stage 内容区同宽（减去左右各 22px padding） */
    box-sizing: border-box;
    margin: 10px auto 26px;
  }
  /* 名字/标签沿用桌面负 margin 探出白卡片逻辑，只按窄屏缩小字号 */
  .pf-name { font-size: 30px; }
  .pf-tag { font-size: 14px; padding: 7px 12px; }
  .pf-contacts { grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; }
  .contact-chip { font-size: 13px; padding: 8px 8px; }

  /* 管理员菜单改为顶部抽屉：默认隐藏，展开时全宽下拉 */
  .admin-menu {
    position: fixed; top: 64px; left: 0; right: 0; width: 100%;
    border-left: none; border-right: none;
    display: none;
  }
  .admin-menu.drawer-open { display: block; }

  .role-grid { grid-template-columns: 1fr; }
  .modal-box {
    max-width: 100%; align-self: flex-end; margin-top: auto;
    max-height: 92vh;
  }
  .modal-mask { align-items: flex-end; padding: 0; }
  /* 手机端装饰整体缩小；仍是 2 云 + 2 太阳 + 2 蘑菇，分散不扎堆、不遮内容 */
  .deco-sun { font-size: 26px; }
  .deco-star::before { font-size: 24px; }
  .deco-cloud, .deco-cloud2 { font-size: 20px; }
  .deco-mush, .deco-mush2 { font-size: 18px; }

  /* 移动端作品区：2列×3排，超出横向滑动 */
  .stage-works .card-grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 1 * 10px) / 2);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .stage-works .card-grid > * { scroll-snap-align: start; }

  /* 移动端 AI 工具区：2列×3排，只露6个，超出横向滑动 */
  .stage-tools #toolGrid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 1 * 10px) / 2);
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .stage-tools #toolGrid > * { scroll-snap-align: start; }
}

@media (max-width: 480px) {
  /* 超窄屏：作品区和AI工具区也保持 2列×3排、横向滑动 */
  .stage-works .card-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 1 * 8px) / 2);
    gap: 8px;
  }
  .stage-tools #toolGrid {
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 1 * 8px) / 2);
    gap: 8px;
  }
  .card-grid, #toolGrid { min-width: 0; }
  .tool-chip, .game-card { min-width: 0; }
  .stage { padding: 4px 14px 80px; }
}

/* ============================================================
   桌面端三栏重构（仅 ≥1024px 生效；移动端所有规则完全不动）
   布局：顶部红砖通栏（PIXEL HOME + 个人信息 hero + 退出）
        → 下方三列：左 石质管理菜单 / 中 作品+AI工具 / 右 工具文字列表+留言板
   严格沿用既有 .px-frame 像素方块拐角（拒绝顺滑圆弧），不改动画/数据/JS 逻辑。
   ============================================================ */
@media (min-width: 1024px) {
  /* —— 整页网格：默认单列（游客/未登录），内容居中 —— */
  body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "top"
      "main"
      "stage";
    gap: 0 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px 80px;
  }
  /* 仅管理员（body.admin-mode）才启用左菜单列 → 两列布局 */
  body.admin-mode {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "top  top"
      "menu main"
      "menu stage";
  }
  .desktop-header-wrap { display: contents; }
  .topbar { grid-area: top; }
  .profile-hero { grid-area: main; }
  /* 默认隐藏左侧菜单（游客/未登录）；管理员态由 JS 解除 hidden 并显示 */
  .admin-menu {
    display: none;
  }
  body.admin-mode .admin-menu {
    display: block;
    grid-area: menu;
    position: relative; top: auto; left: auto; width: auto;
    align-self: start;
    margin-top: 102px;                    /* 下移至与个人介绍白卡片顶部对齐 */
  }
  /* 主区内部再分两列：中（作品+工具）/ 右（工具列表+留言） */
  .stage {
    grid-area: stage;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .stage-works     { grid-column: 1; grid-row: 1; margin-bottom: 0; }   /* 去 .block 的 26px 下边距，避免把网格行撑高、AI 卡片底端被压低 */
  .stage-tools     { display: none; }   /* 删除桌面端「底部」AI工具分类区（用户明确要求） */
  .desktop-toolnav { grid-column: 2; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; margin-bottom: 0; min-height: 0; }
  .stage-comments  { grid-column: 1 / -1; grid-row: 2; }   /* 横跨全宽：左对齐我的作品、右对齐AI工具栏 */

  /* —— 顶部通栏：彻底去掉填充与边框，干净浮在蓝天上 —— */
  .desktop-header-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 24px;
    overflow: visible;
  }
  .topbar { background: transparent; }
  .topbar-inner {
    max-width: none; padding: 10px 16px;
  }
  /* PIXEL HOME 牌：金币底 + 黑描边，贴左上角 */
  .brand {
    background: var(--coin); color: var(--ink);
    border: var(--px) solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat;
    border-radius: 0;
    box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
    font-size: 12px; padding: 8px 12px;
  }

  /* —— 个人信息区：桌面端恢复分层叠压效果（头像 80% 露卡外 / 用户名全露 / 绿标 50% 露），仅与下方作品栏左对齐、缩短到中间列宽度 —— */
  .profile-hero {
    --avatar: 128px; --hero-lift: 102px;        /* 102/128 ≈ 80% 露在白卡外 */
    display: grid;
    grid-template-columns: var(--avatar) 1fr;
    grid-template-areas:
      "avatar name"
      "avatar tag"
      "bio    bio"
      "contacts contacts";
    grid-template-rows: auto auto auto auto;
    align-items: start; gap: 0 20px;
    position: relative; z-index: 0;
    background: transparent; border: none; box-shadow: none; border-radius: 0;
    padding: var(--hero-lift) 22px 22px;
    margin: 10px 0 26px;
  }
  .profile-hero::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: var(--hero-lift); bottom: 0;
    background: var(--paper2);
    border: 6px solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat;
    border-radius: 0 !important;
    box-shadow: 0 var(--px) 0 var(--dirt-dark), 0 calc(var(--px)*2) 0 var(--ink);
    z-index: -1;
  }
  .avatar-frame {
    grid-area: avatar; align-self: start; position: relative; z-index: 3;
    width: var(--avatar); height: var(--avatar); padding: 6px;
    margin-top: calc(var(--hero-lift) * -1);
    background: var(--coin);
    border: var(--px) solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat; border-radius: 0;
    box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
  }
  .profile-main { display: contents; }
  .pf-name {
    grid-area: name; align-self: start; position: relative; z-index: 4;
    margin: calc(var(--hero-lift) * -1) 0 0;
    font-size: 40px; line-height: 1.05; font-weight: bold; color: var(--coin);
    text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
    word-break: break-word;
  }
  .pf-tag {
    grid-area: tag; align-self: start; position: relative; z-index: 3;
    display: block; width: 100%;
    margin: -29px 0 0; padding: 9px 16px; font-size: 16px; font-weight: bold;
    background: var(--grass); color: #fff; text-align: center;
    border: var(--px) solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat; border-radius: 0;
    box-shadow: 0 var(--px) 0 var(--grass-dark);
    text-shadow: 2px 2px 0 var(--grass-dark);
  }
  .pf-bio {
    grid-area: bio; position: relative; z-index: 1;
    font-size: 16px; margin: 14px 0 0; color: var(--ink);
    background: #fffdf5;
    border: var(--px) solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat; border-radius: 0;
    box-shadow: 0 3px 0 var(--ink); padding: 12px 16px;
  }
  .pf-contacts {
    grid-area: contacts; position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px;
  }

  /* —— 左侧石质管理菜单（黄色三角 ▸ + 管理图标） —— */
  .admin-menu {
    background:
      repeating-linear-gradient(0deg, #b8b8c0 0 18px, #9a9aa6 18px 20px),
      var(--ink);
    border: 6px solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat;
    border-radius: 0;
    padding: 14px 12px;
    box-shadow: inset 0 0 0 2px #ffffff55;
  }
  .admin-menu-title { color: var(--ink); font-weight: bold; background: var(--coin); padding: 6px 8px; margin: -2px -2px 10px; text-align: center; }
  .admin-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left; color: var(--ink);
    background: #fffdf5;
    border: var(--px) solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat;
    border-radius: 0;
    box-shadow: 0 var(--px) 0 var(--ink);
    padding: 10px 10px; margin-bottom: 10px; font-size: 14px; cursor: pointer;
  }
  .admin-menu-item::before {
    content: "▸"; color: var(--coin-dark); font-weight: bold; font-size: 14px;
  }

  /* —— 右侧：AI 工具导航（标题移出卡片外、与「我的作品」同高；列表本身作卡片，固定 6 个后纵向滑动） —— */
  .desktop-toolnav {
    background: transparent;
    border: none;
    padding: 0;
  }
  .toolnav-list {
    list-style: none; display: flex; flex-direction: column; gap: 10px;
    margin: 0;                          /* 顶到列顶部（标题下方）= 作品第1排顶 */
    padding: 16px;
    background: var(--panel);
    border: 6px solid var(--ink);
    border-image: var(--pixel-frame) 6 repeat;
    border-radius: 0;
    flex: 1 1 auto;                     /* 撑满标题下方整段高度 → 底边锁死在作品第2排底边 */
    min-height: 0;                      /* 允许在 flex 列中收缩，从而出现纵向滚动条 */
    /* 高度上限放开（原为 442px，配合 V0.1 无封面高度）；V0.2 作品卡加封面后整列变高，
       放开上限让本面板随「我的作品」列拉伸、保持两栏底部齐平（V0.1 底对齐要求）。
       工具超过可视高度仍靠 overflow-y:scroll 滚动。 */
    max-height: 620px;
    overflow-y: scroll;                 /* 常驻纵向滚动条 */
  }
  .toolnav-list li {
    font-size: 16px; padding: 0 14px; line-height: 1.3;
    /* 每个 banner 高度写死 60px、禁止收缩 → 不随工具数量变化，超过 6 个靠滚动条 */
    flex: 0 0 60px;
    height: 60px;
    box-sizing: border-box;
    display: flex; align-items: center;
    background: var(--paper); border: 2px solid var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .toolnav-more { display: none; }   /* 删除 AI 工具导航「发表」按钮 */

  /* —— 标题左侧像素小图标 + 动画（桌面端保持，图标本身已全局生效） —— */
  .desktop-toolnav .section-title,
  .stage-comments .section-title {
    display: flex; align-items: center; gap: 10px;
  }

  /* —— 我的作品：固定 2 行 × 3 列，超出部分左右滑动滑块 —— */
  .stage-works .card-grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 14px) / 3);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .stage-works .card-grid > * { scroll-snap-align: start; }

  /* 桌面端作品卡片固定宽高，按钮始终固定在底部 */
  .stage-works .project-card {
    width: 100%;
    display: flex; flex-direction: column;
  }
  .stage-works .project-card .pc-body { flex: 1; }
  .stage-works .project-card .card-cta {
    margin-top: auto;
    flex-shrink: 0;
  }

  /* —— 桌面端隐藏右上角「管理」按钮（左栏石质菜单已提供管理入口） —— */
  #btnDrawer { display: none; }

  /* —— 右侧下方：留言板（桌面端 发表 按钮转金币黄） —— */
  .comment-composer .btn {
    background: var(--coin); color: var(--ink);
    box-shadow: 0 var(--px) 0 var(--coin-dark), 0 calc(var(--px)*2) 0 var(--ink);
  }
  .comment-composer .btn:active {
    transform: translateY(var(--px));
    box-shadow: 0 0 0 var(--coin-dark), 0 var(--px) 0 var(--ink);
  }
}