/* ==========================================================================
   skin-naive.css — 皮肤 K「趣味稚拙·蜡笔与贴纸」（specs/028，概念展板 K 落地）
   --------------------------------------------------------------------------
   一句话：一页小孩随手涂的作业 —— 线条永远画不直（四角半径各不相同），
   贴纸歪着贴（选中态带翘边硬底影），章盖下去还会晃；奶油纸 + 蜡笔斜纹底。

   本档三条自己的账：
     1. 「不熟练」是设计语言不是缺陷：抖边全部走不对称 border-radius，
        不靠图片、不靠 data: URI（025 踩过：CSP 当场拦，computed 全对但图上没有）。
     2. 动效必须肉眼看得见（027 挖的账）：蜡笔描边生长 + 翘边摇摆振幅 ≥16px 级，
        周期收到 14s 内，由守闸 M3b 钉住 —— 写了参数表却不动，等于没写。
     3. 暗档选中态逐条重写（027 的 L 1.08 / M 1.02 反噬）：亮档每条"底色 + 字色"
        的选中规则，暗档都有对应一条，不靠继承。
   ========================================================================== */

/* ---------- 0. 自托管字体（现网 CSP style-src 'self'，外部 @import 会被拦） ----------
   Baloo 2 是可变字体，latin 子集一份字节覆盖 400-800，所以只挂一个文件、
   用字重区间声明（按字重分别下载会得到同一份文件，纯占体积）。 */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../../assets/fonts/baloo2-latin.woff2") format("woff2");
}

/* ---------- 1. 亮档 token：奶油纸 × 蜡笔红蓝黄 ---------- */
html[data-skin="naive"] {
  --paper: #FFF8E7;
  --paper-2: #FDF0D5;
  --paper-3: #F6E4C2;
  --ink: #241C14;
  --ink-soft: #4E4032;
  --ink-faint: #6A5A48;              /* 奶油纸上实算 5.87 / paper-3 上 5.30 */

  --vermillion: #D93A1B;             /* 蜡笔红：#FFF 字 4.59 ✓ */
  --pine: #2A6FC4;                   /* 蜡笔蓝：#FFF 字 4.70 ✓ */
  --pine-deep: #16457F;
  --gold: #EFA41B;                   /* 蜡笔黄：只配深字 */

  --line: rgba(44, 35, 24, 0.30);
  --line-soft: rgba(44, 35, 24, 0.18);

  --dot: rgba(217, 58, 27, 0.055);
  --tape: rgba(239, 164, 27, 0.55);
  --scrim: rgba(36, 28, 20, 0.52);
  --on-accent: #FFFFFF;
  --on-tag: #3A2A14;
  --vermillion-soft: rgba(217, 58, 27, 0.40);
  --flow-night: #4E4032;
  --check-idle: #6A5A48;
  --thumb-paper: #FFFDF7;

  /* 厚纸软影：不是硬位移，是"贴纸压出的一点边" */
  --shadow-paper: 0 3px 0 rgba(44, 35, 24, 0.16);
  --shadow-lift: 0 6px 0 rgba(44, 35, 24, 0.18);
  --shadow-tag: 0 3px 0 rgba(184, 122, 12, 0.55);
  --shadow-thumb: 0 3px 0 rgba(44, 35, 24, 0.22);

  --font-display: "Baloo 2", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* 形：四角各不相同 = 抖手画出来的圆角 */
  --r-sm: 12px 18px 10px 16px;
  --r-md: 18px 12px 20px 14px;
  --r-card: 26px 34px 22px 30px;
  --r-btn: 20px 26px 18px 24px;
}

/* ---------- 2. 背景：儿童手绘实拍压在奶油 veil 下 + 蜡笔斜纹 ---------- */
html[data-skin="naive"] .flow-canvas { display: none; }
html[data-skin="naive"] body::after {
  background-image:
    repeating-linear-gradient(-38deg, rgba(217, 58, 27, 0.055) 0 9px, transparent 9px 26px),
    linear-gradient(rgba(255, 248, 231, 0.90), rgba(253, 240, 213, 0.93)),
    url("../../assets/skins/naive-bg.jpg");
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 0 0, center, center 30%;
}

/* ---------- 3. 组件：蜡笔软框 + 贴纸翘边（容器一律不画矩形外框，026 红线） ---------- */
html[data-skin="naive"] .card {
  background: #FFFDF7;
  border: 2.5px solid rgba(44, 35, 24, 0.28);
  box-shadow: var(--shadow-paper);
}
html[data-skin="naive"] .chip {
  background: #FFFDF7;
  color: var(--ink);
  border-color: rgba(44, 35, 24, 0.28);
}
html[data-skin="naive"] .chip[aria-pressed="true"] {
  background: #EFA41B;
  color: #241C14;
  border-color: #B87A0C;
  box-shadow: var(--shadow-tag);
}
/* 026：seg 是容器，不描边；靠底色与软填充分层 */
html[data-skin="naive"] .seg { background: transparent; border: none; }
html[data-skin="naive"] .seg-item { border: none; }
html[data-skin="naive"] .seg-item[aria-pressed="true"] {
  background: #F7D9A8;
  color: #3A2A14;
  box-shadow: inset 0 0 0 2.5px rgba(217, 58, 27, 0.40);
}
html[data-skin="naive"] .seg-item[aria-selected="true"] {
  background: #F7D9A8;
  color: #3A2A14;
  box-shadow: inset 0 0 0 2.5px rgba(217, 58, 27, 0.40);
}
html[data-skin="naive"] .seg-item[aria-pressed="true"] .k { color: #3A2A14; }
html[data-skin="naive"] .seg-item[aria-selected="true"] .k { color: #3A2A14; }

html[data-skin="naive"] .tile {
  background: #FFFDF7;
  border: 2.5px solid rgba(44, 35, 24, 0.28);
  border-radius: 34% 26% 38% 30% / 30% 38% 26% 34%;
}
html[data-skin="naive"] .tile[aria-pressed="true"] {
  background: #DCEBFF;
  color: #10305A;
  border-color: #2A6FC4;
  box-shadow: 0 3px 0 rgba(22, 69, 127, 0.40);
}
html[data-skin="naive"] .tile[aria-pressed="true"] .mark { color: #16457F; }
html[data-skin="naive"] .tile[aria-pressed="true"] .label,
html[data-skin="naive"] .tile[aria-pressed="true"] .tiny,
html[data-skin="naive"] .tile[aria-pressed="true"] .faint { color: #10305A; opacity: 1; }

html[data-skin="naive"] .btn {
  border: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}
html[data-skin="naive"] .btn-primary { background: var(--pine); color: #FFFFFF; box-shadow: 0 4px 0 var(--pine-deep); }
html[data-skin="naive"] .btn-accent { background: var(--vermillion); color: var(--on-accent); box-shadow: 0 4px 0 #8E2410; }
html[data-skin="naive"] .btn-ghost { background: #FFFDF7; color: var(--ink); box-shadow: inset 0 0 0 2.5px rgba(44, 35, 24, 0.34); }
html[data-skin="naive"] .btn-quiet { text-decoration: underline wavy var(--gold); text-underline-offset: 4px; }

html[data-skin="naive"] .tier-cell {
  background: #FFFDF7;
  border: 2.5px solid rgba(44, 35, 24, 0.22);
}
html[data-skin="naive"] .tier-cell[aria-pressed="true"] {
  background: var(--vermillion);
  color: #FFFFFF;
  border-color: #8E2410;
  box-shadow: 0 4px 0 #8E2410;
}
html[data-skin="naive"] .tier-cell[aria-pressed="true"] .v { color: #FFFFFF; }
html[data-skin="naive"] .tier-cell[aria-pressed="true"] .k { color: #FFE3B8; }

/* 标题是手写的，不是公告 */
html[data-skin="naive"] .head h1,
html[data-skin="naive"] .q-title,
html[data-skin="naive"] .ticket-title,
html[data-skin="naive"] .persona-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
html[data-skin="naive"] .q-num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink);
}
html[data-skin="naive"] .eyebrow { letter-spacing: 0.06em; }

/* 票根 = 手撕的贴纸：齿孔是不规则圆缺角，章歪着盖 */
html[data-skin="naive"] .ticket {
  border: 2.5px solid rgba(44, 35, 24, 0.28);
  border-radius: 30px 38px 26px 34px;
  background: #FFFDF7;
  box-shadow: var(--shadow-lift);
}
html[data-skin="naive"] .ticket-stamp {
  border: none;
  border-radius: 40% 30% 44% 34% / 34% 44% 30% 40%;
  color: #FFFFFF;
  background: var(--vermillion);
  font-weight: 700;
  box-shadow: 0 3px 0 #8E2410;
}
html[data-skin="naive"] .ticket-blessing {
  background: #DCEBFF;
  border: 2.5px dashed rgba(42, 111, 196, 0.55);
  border-radius: 18px 26px 16px 24px;
  color: var(--ink);
  font-style: normal;
}
html[data-skin="naive"] .family-tag {
  background: #F7D9A8;
  color: var(--on-tag);
  border-radius: 16px 22px 14px 20px;
  box-shadow: inset 0 0 0 2.5px rgba(217, 58, 27, 0.34);
}

html[data-skin="naive"] .progress { background: rgba(217, 58, 27, 0.14); border-radius: 8px 5px 9px 6px; }
html[data-skin="naive"] .progress > i {
  background: repeating-linear-gradient(-38deg, #E2542B 0 7px, var(--vermillion) 7px 14px);
  border-radius: 8px 5px 9px 6px;
}
html[data-skin="naive"] .lib-bar { background: repeating-linear-gradient(180deg, var(--vermillion) 0 8px, var(--gold) 8px 16px, var(--pine) 16px 24px); }
html[data-skin="naive"] .badge { border-radius: 38% 30% 42% 34% / 32% 42% 30% 40%; }
html[data-skin="naive"] .badge.is-owned {
  background: var(--gold);
  border-color: #241C14;
  color: #241C14;
  box-shadow: 0 3px 0 #B87A0C;
}
html[data-skin="naive"] .toast { background: #241C14; color: #FFF6DA; border-radius: 18px 24px 16px 22px; }
html[data-skin="naive"] .level-num { color: var(--vermillion); font-family: var(--font-display); }
html[data-skin="naive"] .radar__ring-stroke { stroke: rgba(44, 35, 24, 0.34); stroke-dasharray: 6 5; }
html[data-skin="naive"] .radar__dot, html[data-skin="naive"] .radar__me-dot { stroke: #FFF8E7; stroke-width: 2; }

/* ---------- 4. tabbar = 奶油纸带；四枚图标换成蜡笔星花 ---------- */
/* 026：dock 与 tabbar 都不画分界线，靠同一张纸色连成一条 */
html[data-skin="naive"] .dock { border-top: 0; background: var(--paper); }
html[data-skin="naive"] .tabbar { background: var(--paper); border-top: 0; }
html[data-skin="naive"] .tab { color: #7A6C58; }
html[data-skin="naive"] .tab[aria-current="page"] {
  color: var(--ink);
  background: #F7D9A8;
  border-radius: 22px 16px 24px 18px;
  box-shadow: inset 0 0 0 2.5px rgba(217, 58, 27, 0.42);
}
html[data-skin="naive"] .tab .i { font-size: 0; }
html[data-skin="naive"] .tab .i::before {
  font-family: "Segoe UI Symbol", ui-monospace, monospace;
  font-size: 1.2rem;
  line-height: 1;
}
html[data-skin="naive"] .tab[data-tab="home"] .i::before    { content: "\2605"; }  /* ★ */
html[data-skin="naive"] .tab[data-tab="quest"] .i::before   { content: "\273D"; }  /* ✽ */
html[data-skin="naive"] .tab[data-tab="library"] .i::before { content: "\266A"; }  /* ♪ */
html[data-skin="naive"] .tab[data-tab="profile"] .i::before { content: "\263B"; }  /* ☻ */
/* 031：第五枚「广场」——手绘蜡笔花（✿ 贴纸语系） */
html[data-skin="naive"] .tab[data-tab="plaza"] .i::before  { content: "\273F"; }

/* ---------- 5. 暗色变体：熄灯后的作业本（台灯暖光） ----------
   每条亮档的"底色 + 字色"选中规则，这里都有对应的一条 —— 不靠继承。
   027 实测过：漏一条就是选中底被压成暗纸、字还是亮档的深字（1.02:1）。 */
@media (prefers-color-scheme: dark) {
  html[data-skin="naive"] {
    --paper: #211D17;
    --paper-2: #2C261E;
    --paper-3: #3A3227;
    --ink: #FBEFD9;
    --ink-soft: #CBBBA0;
    --ink-faint: #AC9C82;

    --vermillion: #F4703F;
    --pine: #7FB4F0;
    --pine-deep: #A9CBF5;
    --gold: #E5A62C;

    --line: rgba(251, 239, 217, 0.34);
    --line-soft: rgba(251, 239, 217, 0.20);

    --dot: rgba(244, 112, 63, 0.08);
    --tape: rgba(229, 166, 44, 0.34);
    --scrim: rgba(0, 0, 0, 0.66);
    --on-accent: #211711;
    --on-tag: #FFE9BE;
    --vermillion-soft: rgba(244, 112, 63, 0.45);
    --flow-night: #4E4032;
    --check-idle: #AC9C82;
    --thumb-paper: #2C261E;

    --shadow-paper: 0 3px 0 rgba(0, 0, 0, 0.42);
    --shadow-lift: 0 6px 0 rgba(0, 0, 0, 0.45);
    --shadow-tag: 0 3px 0 rgba(0, 0, 0, 0.5);
    --shadow-thumb: 0 3px 0 rgba(0, 0, 0, 0.5);
  }
  html[data-skin="naive"] body::after {
    background-image:
      repeating-linear-gradient(-38deg, rgba(244, 112, 63, 0.06) 0 9px, transparent 9px 26px),
      linear-gradient(rgba(33, 29, 23, 0.90), rgba(44, 38, 30, 0.94)),
      url("../../assets/skins/naive-bg.jpg");
    background-size: auto, auto, cover;
  }
  html[data-skin="naive"] .card,
  html[data-skin="naive"] .ticket,
  html[data-skin="naive"] .chip,
  html[data-skin="naive"] .tile,
  html[data-skin="naive"] .tier-cell { background: #2C261E; border-color: rgba(251, 239, 217, 0.26); }
  html[data-skin="naive"] .chip[aria-pressed="true"] { background: #E5A62C; color: #211711; border-color: #8A5F10; }
  html[data-skin="naive"] .seg { background: transparent; border: none; }
  html[data-skin="naive"] .seg-item { border: none; }
  html[data-skin="naive"] .seg-item[aria-pressed="true"] { background: #6A4E22; color: #FFE9BE; box-shadow: inset 0 0 0 2.5px rgba(244, 112, 63, 0.5); }
  html[data-skin="naive"] .seg-item[aria-selected="true"] { background: #6A4E22; color: #FFE9BE; box-shadow: inset 0 0 0 2.5px rgba(244, 112, 63, 0.5); }
  html[data-skin="naive"] .seg-item[aria-pressed="true"] .k { color: #FFE9BE; }
  html[data-skin="naive"] .seg-item[aria-selected="true"] .k { color: #FFE9BE; }
  html[data-skin="naive"] .tile[aria-pressed="true"] { background: #22384F; color: #CFE4FA; border-color: #7FB4F0; }
  html[data-skin="naive"] .tile[aria-pressed="true"] .mark { color: #A9CBF5; }
  html[data-skin="naive"] .tile[aria-pressed="true"] .label,
  html[data-skin="naive"] .tile[aria-pressed="true"] .tiny,
  html[data-skin="naive"] .tile[aria-pressed="true"] .faint { color: #CFE4FA; }
  html[data-skin="naive"] .btn-primary { background: #7FB4F0; color: #12202E; }
  html[data-skin="naive"] .btn-accent { background: #F4703F; color: #211711; }
  html[data-skin="naive"] .btn-ghost { background: #2C261E; color: #FBEFD9; box-shadow: inset 0 0 0 2.5px rgba(251, 239, 217, 0.4); }
  html[data-skin="naive"] .tier-cell[aria-pressed="true"] { background: #F4703F; color: #211711; border-color: #8E2E10; }
  html[data-skin="naive"] .tier-cell[aria-pressed="true"] .v { color: #211711; }
  html[data-skin="naive"] .tier-cell[aria-pressed="true"] .k { color: #3A1A08; }
  html[data-skin="naive"] .tab { color: #A89A85; }
  html[data-skin="naive"] .tab[aria-current="page"] { background: #6A4E22; color: #FFE9BE; box-shadow: inset 0 0 0 2.5px rgba(229, 166, 44, 0.55); }
  html[data-skin="naive"] .q-num { color: #FBEFD9; }
  html[data-skin="naive"] .family-tag { background: #6A4E22; color: #FFE9BE; }
  html[data-skin="naive"] .badge.is-owned { background: #E5A62C; color: #211711; border-color: #8A5F10; }
}

/* ---------- 6. specs/025 支线页特色装饰 + 本档动效 ----------
   记忆点：页面边缘有小孩用蜡笔涂的一圈斜纹，右上角一枚贴纸在慢慢晃。
   纪律：只挂 .quest-body 伪元素（挂 .view 会被卡片与 sticky dock 挡在可视区外，025 踩过）、
        z-index:-1、pointer-events:none、reduced-motion 静止。
   振幅账：摇摆位移 18px、周期 3.6s —— 两条都过守闸 M3b（027 那版只偏移 3px 被判"看不见"）。 */
html[data-skin="naive"] .quest-body::before,
html[data-skin="naive"] .quest-body::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -12px;
  right: -12px;
}
html[data-skin="naive"] .quest-body::before {
  top: 0;
  height: 130px;
  background:
    repeating-linear-gradient(-38deg, color-mix(in srgb, var(--vermillion) 22%, transparent) 0 6px, transparent 6px 22px),
    radial-gradient(58% 92% at 16% 0%, color-mix(in srgb, var(--gold) 40%, transparent), transparent 70%);
  -webkit-mask: linear-gradient(#000, transparent);
  mask: linear-gradient(#000, transparent);
  animation: naive-crayon 12s ease-in-out infinite alternate;
}
@keyframes naive-crayon {
  from { transform: translate3d(-18px, 0, 0); opacity: .72; }
  to   { transform: translate3d(18px, 6px, 0); opacity: 1; }
}
html[data-skin="naive"] .quest-body::after {
  bottom: 0;
  height: 44%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--pine) 80%, transparent) 0 2.4px, transparent 3.2px) 10% 88% / 30px 30px,
    radial-gradient(circle, color-mix(in srgb, var(--vermillion) 72%, transparent) 0 2px, transparent 2.8px) 52% 94% / 38px 38px,
    radial-gradient(circle, color-mix(in srgb, var(--gold) 86%, transparent) 0 1.8px, transparent 2.6px) 82% 86% / 26px 26px;
  background-repeat: repeat-x;
  -webkit-mask: linear-gradient(transparent, #000 58%);
  mask: linear-gradient(transparent, #000 58%);
  animation: naive-wobble 3.6s ease-in-out infinite;
}
@keyframes naive-wobble {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  45%      { transform: rotate(1.4deg) translateY(-20px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-skin="naive"] .quest-body::before,
  html[data-skin="naive"] .quest-body::after { animation: none; opacity: .6; transform: none; }
}