/* ==========================================================================
   PIXEL/CANVAS BUTTON — .btn-grad 宿主样式 v2
   --------------------------------------------------------------------------
   重要按钮（.btn-grad）由 js/px-buttons.js 升级为 canvas 2.5D 绘制：
   · C 霓虹灯管 —— 确认类（保存 / 确认 / 关注）
   · E 能量核心 —— 主动作类（创作 / 注册 / 共享）
   本文件只负责：宿主布局、无障碍（文字转透明但保留给读屏）、
   以及 canvas 未就绪时的平面降级底色。卡片 follow-chip 同步像素化。
   ========================================================================== */

.btn-grad {
  --px-fb: #1b2536;
  position: relative;
  background: var(--px-fb);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-family: "Zpix", "Press Start 2P", "Microsoft YaHei", "PingFang SC", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
}
/* 降级底色按语义预着色（canvas 加载前一瞬也不突兀） */
.btn-grad[data-px="start"]   { --px-fb: #b3126b; }
.btn-grad[data-px="save"]    { --px-fb: #128a3e; }
.btn-grad[data-px="confirm"] { --px-fb: #0f7fa0; }
.btn-grad[data-px="coin"]    { --px-fb: #c67f12; }
.btn-grad[data-px="follow"]  { --px-fb: #5f21b8; }
.btn-grad[data-px="share"]   { --px-fb: #0d8062; }

/* 已升级为 canvas 的按钮（.btn-grad / .gen-btn / .mode-card / 广场分段）：
   文字/图标转为透明（读屏仍可读），视觉全由 canvas 接管 */
.px-host {
  position: relative;   /* canvas 覆盖层的定位基准（mode-card/seg 按钮原本是 static） */
  color: transparent !important;
  text-shadow: none !important;
  overflow: visible;
  cursor: pointer;
}
.px-host svg { opacity: 0; }
.px-host > canvas.px-face {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.px-host:disabled { cursor: not-allowed; }
/* canvas 覆盖后原 hover/active 位移不再需要，避免与绘制错位 */
.px-host:hover, .px-host:active { transform: none; filter: none; }

/* ---- 卡片右下角关注键（量小不套 canvas，保持像素平面风） ---- */
.follow-chip {
  border-radius: 0;
  border: 2px solid #04060c;
  padding: 1px 8px;
  font-family: "Zpix", "Press Start 2P", "Microsoft YaHei", "PingFang SC", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45);
  background: linear-gradient(135deg, #865cff 0 30%, #a37fff 30% 62%, #c09dff 62% 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    2px 2px 0 #04060c;
  transition: transform .08s steps(2, end), box-shadow .08s steps(2, end), filter .1s;
}
.follow-chip:hover {
  transform: translate(-1px, -1px);
  filter: brightness(1.1);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(0, 0, 0, .28),
    3px 3px 0 #04060c;
}
.follow-chip:active {
  transform: translate(1px, 1px);
  box-shadow:
    inset 0 2px 0 rgba(0, 0, 0, .25),
    0 0 0 #04060c;
}
.follow-chip.on {
  background: rgba(0, 0, 0, .55);
  border-color: rgba(255, 255, 255, .28);
  color: #ddd;
  text-shadow: none;
  box-shadow: 2px 2px 0 #04060c;
}