/* ===========================================================
   《心眼子测试》海报样式（poster.js 使用）
   海报固定尺寸：750 x 1334（竖版，朋友圈/微信分享比例）
   注意：
   1. 本文件里的颜色一律用十六进制 / rgba / linear-gradient，
      不要用 color-mix()/oklch() 等新语法——html2canvas 不认识会画错；
   2. 海报内部不使用 CSS 变量（html2canvas 对 var() 支持不稳定），
      所有颜色写死；
   3. 预览时用 transform: scale() 缩放，导出时 poster.js 会把
      scale 置为 1 再截取。
   =========================================================== */

/* 预览外框：占位高度 = 1334/750 = 177.87% */
.poster-scale {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.poster-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.poster {
  position: relative;
  width: 750px;
  height: 1334px;
  padding: 46px 44px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #0b0d1a;
  background-image:
    radial-gradient(ellipse 120% 55% at 50% 0%, #3b1f7a 0%, rgba(11, 13, 26, 0) 62%),
    radial-gradient(ellipse 90% 45% at 100% 12%, #6d1f52 0%, rgba(11, 13, 26, 0) 58%),
    radial-gradient(ellipse 80% 40% at 0% 92%, #16305e 0%, rgba(11, 13, 26, 0) 60%);
  background-color: #0b0d1a;
  overflow: hidden;
}

/* 顶部装饰光带（纯 CSS，无图片） */
.poster-topline {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);
}

/* ---------- 1. 顶部 Logo 区 ---------- */
.poster-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 26px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}
.poster-logo-emoji { font-size: 62px; line-height: 1; }
.poster-logo-title {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1.15;
  color: #ffd88a;
}
.poster-logo-sub {
  margin-top: 4px;
  font-size: 22px;
  color: #c3c9ee;
  letter-spacing: 1px;
}

/* ---------- 2. 类型 + 指数 ---------- */
.poster-type {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.poster-type-emoji { font-size: 108px; line-height: 1; }
.poster-type-name {
  font-size: 62px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.1;
}
.poster-type-level {
  margin-top: 8px;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: #d9c8ff;
  padding: 4px 18px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.30);
  border: 2px solid rgba(167, 139, 250, 0.60);
}

.poster-index {
  margin-top: 26px;
  padding: 24px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.poster-index-label { font-size: 26px; color: #c3c9ee; letter-spacing: 1px; }
.poster-index-num {
  font-size: 132px;
  font-weight: 900;
  line-height: 0.92;
  color: #ffcf5c;
  letter-spacing: -2px;
}
.poster-index-unit { font-size: 30px; font-weight: 800; color: #ffcf5c; }
.poster-index-bars { display: flex; flex-direction: column; gap: 10px; width: 260px; }
.poster-bar-row { display: flex; flex-direction: column; gap: 4px; }
.poster-bar-lab { display: flex; justify-content: space-between; font-size: 20px; color: #c3c9ee; }
.poster-bar-track { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.poster-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22d3ee 0%, #8b5cf6 100%); }

/* ---------- 3. 一句话人设 ---------- */
.poster-oneliner {
  margin-top: 24px;
  padding: 22px 26px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 8px solid #8b5cf6;
  font-size: 30px;
  line-height: 1.5;
  color: #e7eaff;
}

/* ---------- 4. 金句（字号最大） ---------- */
.poster-quote {
  margin-top: 24px;
  padding: 30px 28px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.26) 0%, rgba(236, 72, 153, 0.26) 100%);
  border: 3px solid rgba(255, 207, 92, 0.55);
  text-align: center;
}
.poster-quote-tag {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #ffd88a;
}
.poster-quote-text {
  margin-top: 14px;
  font-size: 62px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: 1px;
  color: #ffffff;
}

/* ---------- 底部：二维码 + 声明 ---------- */
.poster-bottom {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
}
.poster-qr {
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
  padding: 10px;
  border-radius: 18px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.poster-qr canvas, .poster-qr img { width: 170px !important; height: 170px !important; display: block; }
.poster-qr-fallback {
  font-size: 15px;
  line-height: 1.35;
  color: #22305c;
  text-align: center;
  word-break: break-all;
  font-weight: 700;
}
.poster-qr-tip { margin-top: 8px; font-size: 20px; color: #ffd88a; font-weight: 700; }
.poster-cta { flex: 1 1 auto; min-width: 0; }
.poster-cta-title { font-size: 30px; font-weight: 900; line-height: 1.35; color: #ffffff; }
.poster-cta-sub { margin-top: 6px; font-size: 22px; color: #c3c9ee; }
.poster-disclaimer {
  margin-top: 18px;
  font-size: 20px;
  color: #9aa2c8;
  text-align: center;
  letter-spacing: 1px;
}