/* ============================================================
   视觉方向 A · 卡片（延续封面）
   ------------------------------------------------------------
   整个 app 铺满版本色（少年绿 / 成人深蓝），和封面连成一片；
   提案、规则都是浮在上面的米白纸卡，带一点倾斜和投影，像桌上的手写卡片。
   只覆盖 tokens.css 的语义令牌 + 少量这个方向独有的细节。
   ============================================================ */

[data-theme="card"],
[data-theme="card"] [data-edition] {
  --app-bg: var(--edition-bg-2);
  --bg-ink: #f4f7f4;
  --bg-ink-2: rgba(244, 247, 244, 0.8);
  --bg-ink-3: rgba(244, 247, 244, 0.58);
  --bg-line: rgba(255, 255, 255, 0.3);
  --bg-sunk: rgba(0, 0, 0, 0.2);
  --bg-accent: #ffffff;

  --appbar-bg: var(--edition-bg-1);
  --appbar-ink: #f6fbf5;
  --appbar-line: rgba(255, 255, 255, 0.36);
  --hero-bg: transparent;
  --hero-ink: #f6fbf5;
  --hero-cut: 0px;
  --tabbar-bg: color-mix(in srgb, var(--edition-bg-2) 82%, #000);
  --tabbar-ink: rgba(255, 255, 255, 0.55);
  --tabbar-active: #ffffff;
  --tabbar-line: rgba(255, 255, 255, 0.1);

  --card-bg: var(--cover-card);
  --card-ink: #1c1d1e;
  --card-border: transparent;
  --card-shadow: 0 12px 26px rgba(1, 10, 17, 0.26), 0 2px 7px rgba(1, 10, 17, 0.2);
  --card-radius: 7px;
  --card-tilt: -0.45deg;

  --heading-weight: 760;

  --chip-bg: rgba(255, 255, 255, 0.1);
  --chip-ink: #f4f7f4;
  --chip-active-bg: #f6fbf5;
  --chip-active-ink: var(--accent-strong);
  --link-card-bg: rgba(255, 255, 255, 0.12);
  --link-card-ink: #f6fbf5;
}

/* 成人版：米色底，文字/线条反成深色，纸卡改纯白 */
[data-theme="card"] [data-edition="adult"],
[data-theme="card"][data-edition="adult"] {
  --bg-ink: #1c1d1e;
  --bg-ink-2: rgba(28, 29, 30, 0.74);
  --bg-ink-3: rgba(28, 29, 30, 0.52);
  --bg-line: rgba(28, 29, 30, 0.16);
  --bg-sunk: rgba(28, 29, 30, 0.06);
  --bg-accent: #c8392e;
  --appbar-bg: #f0ede4; /* 比页面底深一点的米色，状态栏同色 */
  --appbar-ink: #1c1d1e;
  --appbar-line: rgba(28, 29, 30, 0.16);
  --hero-ink: #1c1d1e;
  --tabbar-bg: #efece3;
  --tabbar-ink: rgba(28, 29, 30, 0.5);
  --tabbar-active: #c8392e;
  --tabbar-line: rgba(28, 29, 30, 0.1);
  --card-bg: #ffffff;
  --card-shadow: 0 8px 20px rgba(60, 50, 30, 0.1), 0 1px 4px rgba(60, 50, 30, 0.12);
  --chip-bg: rgba(28, 29, 30, 0.06);
  --chip-ink: #1c1d1e;
  --chip-active-bg: #1c1d1e;
  --chip-active-ink: #faf9f5;
  --link-card-bg: rgba(28, 29, 30, 0.06);
  --link-card-ink: #1c1d1e;
}

/* 页面底：版本色从上往下略微加深，和封面的渐变一致 */
[data-theme="card"] .screen {
  background:
    radial-gradient(120% 60% at 85% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(170deg, var(--edition-bg-1) 0%, var(--edition-bg-2) 55%);
  background-attachment: local;
}

/* 页面头：透明，右上角一道斜向的浅色光带（封面对角线的回声） */
[data-theme="card"] .hero {
  overflow: hidden;
  padding-bottom: var(--sp-6);
  margin-bottom: 0;
}

[data-theme="card"] .hero::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 55%;
  height: 180%;
  max-width: none;
  background: linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, 0.07) 45%, rgba(255, 255, 255, 0.07) 60%, transparent 60%);
  pointer-events: none;
}

/* 规则单：纸卡，不用侧边色条，改为左上角一枚红 / 蓝色标 */
[data-theme="card"] .rule-list {
  box-shadow: var(--card-shadow);
}

[data-theme="card"] .rule-item + .rule-item {
  border-top-style: dashed;
}

[data-theme="card"] .p-card.is-passed {
  box-shadow: var(--card-shadow);
}

[data-theme="card"] .p-card.is-passed .p-text::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--accent);
}

[data-theme="card"] .segmented {
  background: rgba(0, 0, 0, 0.22);
}

[data-theme="card"] .seg.is-active {
  background: var(--cover-card);
}

[data-theme="card"] .empty {
  border-color: rgba(255, 255, 255, 0.3);
}