/* ==========================================================================
   skin-dream.css — 皮肤 I「梦境·溶解边界」（specs/024，概念展板 I 落地）
   --------------------------------------------------------------------------
   一句话：整个界面没有硬边 —— 描边降级成 20% 色雾，卡片靠紫光阴影塑形，
   云海照片压在雾 veil 下只当光不当内容，标题是衬线宽字距的半句梦话。

   纪律同 023。本档两条自己的账：
     1. "溶解"不拿可读性换：mask 渐隐只落在**无文字的层**（照片层的边缘），
        有字的盒子一律靠阴影与雾边 —— 021 的教训反过来念就是"弱信号即删除"。
     2. 背景照片加重但 veil 仍保正文对比：卡片底是实色 --paper-2，
        照片再浓也不参与文字对比账（守闸 D 组算的是 token，不是照片）。
   ========================================================================== */

/* ---------- 1. 亮档 token：晨曦雾紫 × 雾粉 × 青雾 ---------- */
html[data-skin="dream"] {
  --paper: #EFE9FA;
  --paper-2: #F7F3FD;
  --paper-3: #E4DBF5;
  --ink: #241F3D;
  --ink-soft: #4C4470;
  --ink-faint: #5F5879;              /* 雾紫上实算 5.5:1 */

  /* .btn-accent 吃 --vermillion（雾粉加深版）：#FFF3F9 字实算 4.8 ✓；
     .btn-primary 吃 --pine（梦靛）：纸色字 8.9 ✓ */
  --vermillion: #A85484;
  --pine: #5A4AD0;
  --pine-deep: #3A2E8F;
  --gold: #A678C9;

  --line: rgba(90, 74, 208, 0.30);
  --line-soft: rgba(90, 74, 208, 0.18);

  --dot: rgba(90, 74, 208, 0.05);
  --tape: rgba(232, 164, 206, 0.55);
  --scrim: rgba(36, 31, 61, 0.52);
  --on-accent: #FFF3F9;
  --on-tag: #F5F2FF;
  --vermillion-soft: rgba(168, 84, 132, 0.4);
  --flow-night: #4C3FA8;
  --check-idle: #5F5879;
  --thumb-paper: #F7F3FD;

  /* 阴影即形状：全部换成大范围紫光晕，零硬边 */
  --shadow-paper: 0 14px 34px rgba(90, 74, 208, 0.20);
  --shadow-lift: 0 22px 50px rgba(90, 74, 208, 0.26);
  --shadow-tag: 0 6px 16px rgba(90, 74, 208, 0.35);
  --shadow-thumb: 0 4px 12px rgba(90, 74, 208, 0.3);

  --font-display: "STSong", "SimSun", "Noto Serif CJK SC", serif;

  /* 呼吸角：不对称大圆角 */
  --r-card: 28px 40px 30px 42px / 40px 28px 42px 30px;
}

/* ---------- 2. 背景：云海实拍压在厚雾下（照片只当光） ---------- */
html[data-skin="dream"] .flow-canvas { display: none; }
html[data-skin="dream"] body::after {
  background-image:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.55) 0 16%, transparent 18%),
    linear-gradient(rgba(239, 233, 250, 0.78), rgba(214, 201, 238, 0.72)),
    url("../../assets/skins/dream-bg.jpg");
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center 38%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* ---------- 3. 组件：无框，光塑形 ---------- */
html[data-skin="dream"] .card {
  background: rgba(247, 243, 253, 0.92);
  border-color: transparent;
  box-shadow: var(--shadow-paper), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
html[data-skin="dream"] .chip {
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(90, 74, 208, 0.25);
}
html[data-skin="dream"] .chip[aria-pressed="true"] {
  background: linear-gradient(135deg, #EDE4FF, #DCCFFE);
  color: #2C2350;
  box-shadow: 0 6px 18px rgba(90, 74, 208, 0.3), inset 0 0 0 1px rgba(90, 74, 208, 0.35);
}
/* 026：那块 55% 不透明白底板拿掉（老板点名的就是这个“白矩形”）——
   梦境档的层级本来就该靠雾与光，不靠一块板。选中那颗仍用雾紫渐变胶囊。 */
html[data-skin="dream"] .seg { background: transparent; border: none; }
html[data-skin="dream"] .seg-item { border: none; }
html[data-skin="dream"] .seg-item[aria-pressed="true"] {
  background: linear-gradient(135deg, #DCD3FA, #C9BBF5);
  color: #2C2350;
}
html[data-skin="dream"] .seg-item[aria-selected="true"]  {
  background: linear-gradient(135deg, #DCD3FA, #C9BBF5);
  color: #2C2350;
}
html[data-skin="dream"] .seg-item[aria-pressed="true"] .k { color: #2C2350; }
html[data-skin="dream"] .seg-item[aria-selected="true"] .k { color: #2C2350; }
html[data-skin="dream"] .tile { background: rgba(255, 255, 255, 0.6); border-color: transparent; }
html[data-skin="dream"] .tile[aria-pressed="true"] {
  background: linear-gradient(150deg, #5F4FD2, #4A3AB8);
  color: #F5F2FF;
  box-shadow: 0 14px 30px rgba(90, 74, 208, 0.35);
}
html[data-skin="dream"] .tile[aria-pressed="true"] .mark { color: #F0E9FF; }
html[data-skin="dream"] .tile[aria-pressed="true"] .label,
html[data-skin="dream"] .tile[aria-pressed="true"] .tiny,
html[data-skin="dream"] .tile[aria-pressed="true"] .faint { color: #F5F2FF; opacity: 1; }

html[data-skin="dream"] .btn { border-color: transparent; font-weight: 500; letter-spacing: 0.1em; box-shadow: 0 10px 26px rgba(90, 74, 208, 0.25); }
/* 渐变两端都必须单独过 AA：亮端 #5F4FD2 白字 5.2 ✓，深端更稳；
   初稿 #8B7CF0 亮端只算出 2.8，渐变不是免算账 */
html[data-skin="dream"] .btn-primary { background: linear-gradient(120deg, #5F4FD2, #4A3AB8); color: #F5F2FF; }
html[data-skin="dream"] .btn-accent { background: linear-gradient(120deg, #A85484, #8E4270); color: var(--on-accent); }
html[data-skin="dream"] .btn-ghost { background: rgba(255, 255, 255, 0.6); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(90, 74, 208, 0.25); }
html[data-skin="dream"] .tier-cell { background: rgba(255, 255, 255, 0.5); border-color: transparent; }
html[data-skin="dream"] .tier-cell[aria-pressed="true"] {
  background: linear-gradient(150deg, #5F4FD2, #4A3AB8);
  color: #fff;
  box-shadow: 0 14px 30px rgba(90, 74, 208, 0.35);
  transform: translateY(-2px);
}
html[data-skin="dream"] .tier-cell[aria-pressed="true"] .v,
html[data-skin="dream"] .tier-cell[aria-pressed="true"] .k { color: #F3EFFF; }

/* 衬线宽字距：梦话不是公告 */
html[data-skin="dream"] .head h1,
html[data-skin="dream"] .q-title,
html[data-skin="dream"] .ticket-title,
html[data-skin="dream"] .persona-title {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-weight: 600;
}
html[data-skin="dream"] .q-num {
  font-family: var(--font-display);
  font-size: 34px;
  font-style: italic;
  color: #7B6AE8;
  opacity: 0.9;
}
html[data-skin="dream"] .eyebrow { letter-spacing: 0.26em; }

/* 票根 = 梦里的纸：齿是雾洞（只改透明度语言，不动伪元素结构），章是呼气 */
html[data-skin="dream"] .ticket {
  border-color: transparent;
  box-shadow: var(--shadow-lift);
  background: rgba(247, 243, 253, 0.86);
}
html[data-skin="dream"] .ticket-stamp {
  border: 2px solid rgba(168, 84, 132, 0.75);
  color: rgba(140, 60, 110, 1);
  background: rgba(232, 164, 206, 0.12);
  box-shadow: 0 0 24px rgba(168, 84, 132, 0.3);
  font-family: var(--font-display);
  opacity: 1;
}
html[data-skin="dream"] .ticket-blessing {
  background: rgba(245, 227, 242, 0.6);
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 1;
}
html[data-skin="dream"] .family-tag {
  background: rgba(127, 209, 232, 0.35);
  color: #234C5C;
  box-shadow: inset 0 0 0 1px rgba(127, 209, 232, 0.65);
  transform: none;
}

html[data-skin="dream"] .lib-bar { background: linear-gradient(180deg, #B79CF3, #7FD1E8); }
html[data-skin="dream"] .progress { background: rgba(90, 74, 208, 0.14); }
html[data-skin="dream"] .badge.is-owned { border-color: transparent; background: rgba(166, 120, 201, 0.2); color: #6A4A9E; box-shadow: 0 0 14px rgba(166, 120, 201, 0.35); }
html[data-skin="dream"] .toast { background: rgba(36, 31, 61, 0.88); backdrop-filter: blur(8px); letter-spacing: 0.08em; }
html[data-skin="dream"] .level-num { color: var(--pine); font-family: var(--font-display); }
html[data-skin="dream"] .radar__ring-stroke { stroke: rgba(90, 74, 208, 0.3); }
html[data-skin="dream"] .radar__dot, html[data-skin="dream"] .radar__me-dot { filter: drop-shadow(0 0 6px rgba(140, 120, 240, 0.9)); }

/* ---------- 4. tabbar = 晨雾玻璃；图标换云月星 ---------- */
/* 026：tabbar 与 dock 用同一张纸色，并且不再画那根分界线 ——
   老板：“这个也有白色的边框，就跟上面分开来了…取消是不是好看一点”。
   雾玻璃的质感改由背景照片透上来承担，不靠一条线切开场。 */
html[data-skin="dream"] .tabbar {
  background: var(--paper);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 0;
}
html[data-skin="dream"] .tab { color: #8D84B8; }
html[data-skin="dream"] .tab[aria-current="page"] {
  color: #4C3FA8;
  text-shadow: 0 0 16px rgba(90, 74, 208, 0.75);
}
html[data-skin="dream"] .tab .i { font-size: 0; }
html[data-skin="dream"] .tab .i::before {
  font-family: "Segoe UI Symbol", ui-monospace, monospace;
  font-size: 1.15rem;
  line-height: 1;
}
html[data-skin="dream"] .tab[data-tab="home"] .i::before    { content: "\2601"; }  /* ☁ */
html[data-skin="dream"] .tab[data-tab="quest"] .i::before   { content: "\2727"; }  /* ✧ */
html[data-skin="dream"] .tab[data-tab="library"] .i::before { content: "\263E"; }  /* ☾ */
html[data-skin="dream"] .tab[data-tab="profile"] .i::before { content: "\273A"; }  /* ✺ */
/* 031：第五枚「广场」——虚线圆环（◌ 边界溶解语系） */
html[data-skin="dream"] .tab[data-tab="plaza"] .i::before  { content: "\25CC"; }

/* ---------- 5. 暗色变体：深夜星河 ---------- */
@media (prefers-color-scheme: dark) {
  html[data-skin="dream"] {
    --paper: #12102A;
    --paper-2: #1A1738;
    --paper-3: #232045;
    --ink: #E6E2FA;
    --ink-soft: #AFA6D8;
    --ink-faint: #8B82B6;

    --vermillion: #C77FA6;
    --pine: #8B7CF0;
    --pine-deep: #B7ABF7;
    --gold: #C9A6E8;

    --line: rgba(178, 162, 255, 0.4);
    --line-soft: rgba(178, 162, 255, 0.2);

    --dot: rgba(178, 162, 255, 0.05);
    --tape: rgba(178, 162, 255, 0.28);
    --scrim: rgba(0, 0, 0, 0.66);
    --on-accent: #1C1030;
    --on-tag: #12102A;
    --vermillion-soft: rgba(199, 127, 166, 0.45);
    --flow-night: #3A2E8F;
    --check-idle: #B2A2FF;
    --thumb-paper: #1A1738;

    --shadow-paper: 0 14px 34px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 22px 50px rgba(0, 0, 0, 0.55);
    --shadow-tag: 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-thumb: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
  html[data-skin="dream"] body::after {
    background-image:
      radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.22) 0 2%, transparent 3%),
      radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.16) 0 1.4%, transparent 2%),
      linear-gradient(rgba(18, 16, 42, 0.8), rgba(18, 16, 42, 0.88)),
      url("../../assets/skins/dream-bg.jpg");
    background-size: auto, auto, auto, cover;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  }
  html[data-skin="dream"] .card, html[data-skin="dream"] .ticket { background: rgba(32, 27, 66, 0.9); }
  /* 暗档渐变反过来：浅紫底配深字（亮端 #9C8DF5 深字 5.9，深端 #7463E0 深字 4.8） */
  html[data-skin="dream"] .btn-primary { background: linear-gradient(120deg, #9C8DF5, #7463E0); color: #12102A; }
  html[data-skin="dream"] .btn-accent { background: linear-gradient(120deg, #D9A0C0, #C77FA6); color: #1C1030; }
  html[data-skin="dream"] .tier-cell[aria-pressed="true"] { background: linear-gradient(150deg, #9C8DF5, #7463E0); color: #12102A; }
  html[data-skin="dream"] .tier-cell[aria-pressed="true"] .v,
  html[data-skin="dream"] .tier-cell[aria-pressed="true"] .k { color: #12102A; }
  html[data-skin="dream"] .chip, html[data-skin="dream"] .tile, html[data-skin="dream"] .tier-cell { background: rgba(36, 31, 74, 0.72); }
  html[data-skin="dream"] .seg { background: transparent; }
  html[data-skin="dream"] .chip[aria-pressed="true"], html[data-skin="dream"] .seg-item[aria-pressed="true"] { background: #302A62; color: #DCCFFE; }
  html[data-skin="dream"] .chip[aria-selected="true"], html[data-skin="dream"] .seg-item[aria-selected="true"] { background: #302A62; color: #DCCFFE; }
  html[data-skin="dream"] .seg-item[aria-pressed="true"] .k { color: #DCCFFE; }
  html[data-skin="dream"] .seg-item[aria-selected="true"] .k { color: #DCCFFE; }
  html[data-skin="dream"] .btn-ghost { background: rgba(36, 31, 74, 0.85); color: #E6E2FA; }
  html[data-skin="dream"] .tabbar { background: var(--paper); border-top: 0; }
  html[data-skin="dream"] .tab { color: #6B6296; }
  html[data-skin="dream"] .tab[aria-current="page"] { color: #C9BBF5; text-shadow: 0 0 16px rgba(201, 187, 245, 0.8); }
  html[data-skin="dream"] .q-num { color: #A795F5; }
  html[data-skin="dream"] .family-tag { background: rgba(127, 209, 232, 0.2); color: #B8E8F2; }
}

/* ---------- 9. specs/025 支线页特色装饰 ----------
   这一档的记忆点：页面里在下雪一样的光。上缘一条雾带缓慢呼吸，
   下缘一批光点慢慢上升然后淡去（与现网那套「溶解边界」同源）。
   纪律同前：.quest-body 伪元素 / z-index:-1 / pointer-events:none / reduced-motion 静止。
   ⚠ 不拿可读性换好看：两层都在 z-index:-1，卡片自己的不透明底会盖住它们，
      所以正文对比账里不会出现“字压在光点上”这种情况（守闸钉 z-index:-1 与 pointer-events，
      真浏览器逐档重算对比度）。 */
html[data-skin="dream"] .quest-body::before,
html[data-skin="dream"] .quest-body::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -12px;
  right: -12px;
}
html[data-skin="dream"] .quest-body::before {
  top: 0;
  height: 120px;
  /* 颜色全部走 color-mix(--token 透明度)，不写死 rgba：
     这样暗档重定 token 时雾色自动跟着变（写死就得再维一份暗色值） */
  background:
    radial-gradient(60% 100% at 18% 0%, color-mix(in srgb, var(--vermillion) 34%, transparent), transparent 70%),
    radial-gradient(52% 92% at 78% 8%, color-mix(in srgb, var(--pine) 26%, transparent), transparent 72%);
  -webkit-mask: linear-gradient(#000, transparent);
  mask: linear-gradient(#000, transparent);
  animation: dream-mist 24s ease-in-out infinite alternate;
}
@keyframes dream-mist {
  from { transform: translate3d(-14px, 0, 0) scaleY(.94); opacity: .72; }
  to   { transform: translate3d(14px, 6px, 0) scaleY(1.06); opacity: 1; }
}
html[data-skin="dream"] .quest-body::after {
  bottom: 0;
  height: 46%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gold) 88%, transparent) 0 2px, transparent 3px) 8% 92% / 26px 26px,
    radial-gradient(circle, color-mix(in srgb, var(--pine) 78%, transparent) 0 1.6px, transparent 3px) 46% 96% / 34px 34px,
    radial-gradient(circle, color-mix(in srgb, var(--vermillion) 66%, transparent) 0 1.4px, transparent 3px) 78% 90% / 30px 30px;
  background-repeat: repeat-x;
  -webkit-mask: linear-gradient(transparent, #000 55%);
  mask: linear-gradient(transparent, #000 55%);
  animation: dream-rise 18s linear infinite;
}
@keyframes dream-rise {
  from { transform: translateY(0); opacity: .0; }
  12%  { opacity: .85; }
  to   { transform: translateY(-160px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="dream"] .quest-body::before,
  html[data-skin="dream"] .quest-body::after { animation: none; opacity: .6; }
}