/* ==========================================================================
   PLIK Lab · homepage v4 · 手机皮肤 + 暗纸夜间版（agent B · 2026-10-18 · briefs/10-18-mobile-skin.md）
   依据：docs/mobile-first-review-2026-10-18.md 第 6 节（Wanfang 11:02 同意 5 条推荐）+ 11:02 新要求「所有卡片都要有 dark mode」。
   这个文件最后加载。桌面（≥ 700px、有鼠标）除了第 5 节的暗纸（只有 html.paper-dark 时才生效，桌面默认不开）以外，什么都不改。
     1 · 只在手机首屏出现的内容（桌面藏起来）
     2 · ≤ 600px：v3 的首屏结构（statement → 三句钩子 → 魔法笔卡），v4 的光影和材质
     3 · 触屏：只用右上角 ↻ 翻面（44 × 44）；hover 才有的东西在触屏上的替代
     4 · 触屏 / 手机：点击目标 ≥ 44、输入框 ≥ 16px
     5 · 暗纸（html.paper-dark，夜里才有）：魔法笔、衣服的家、飞飞鱼、月光变身湾、About、订阅
     6 · 书桌效果在手机上降级：黄金时刻 = 墙上一层静态暖色渐变
   ========================================================================== */

/* ---------------- 1 · 手机才有的内容：桌面一律不显示 ---------------- */
.hero-hooks, .m-cap, .tile-text.m-only { display: none; }
.flip-tile .corner-turn { display: none; }

/* ---------------- 2 · ≤ 600px：v3 的首屏结构 ---------------- */
@media (max-width: 599.98px) {
  .masthead { padding-top: 16px; }
  /* 字标：PLIK 宽 160px（约 86px 高）；英文 tagline 不要（战略：挪到页尾）。
     [10-19 · E3a] 模块里的中文名视觉隐藏，右栏的「霹雳啪啦实验室」+ 一段正文接在下面（样式在 content-wiring.css §1）；三句钩子不再显示 */
  .mh-brand .plik-hd__mark { max-width: 160px; }
  .mh-brand .plik-hd__slogan-en { display: none; }
  .mh-brand { min-height: calc(160px * .5357 + 6px); }   /* CLS：挂载前预留挂载后的高度（PLIK 舞台本身，实测 = 宽 × .5357 + 6px） */
  .hero-hooks { display: block; margin-top: 12px; font-size: 16px; line-height: 1.75; color: var(--ink); text-wrap: pretty; }
  .hook-word {
    color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--ink-rgb) / .45); text-underline-offset: 5px;
    padding: 12px 0; margin: -12px 0;        /* 行内元素的上下 padding 不改排版，只把点击区域撑到 ≥ 44 高 */
    -webkit-tap-highlight-color: rgb(var(--ink-rgb) / .08);
  }
  .narrative-page { padding-top: 20px; }
  /* 魔法笔卡：v3 / 文案 v2 的手机首屏写法 —— 眉题「作品 · 魔法笔」，不要大标题和反问句，画布直接接上 */
  .narrative-card[data-tile="pen"] .front .card-heading > .cap:not(.m-cap),
  .narrative-card[data-tile="pen"] .front .narrative-title,
  .narrative-card[data-tile="pen"] .front .card-deck { display: none; }
  .narrative-card[data-tile="pen"] .front .m-cap { display: block; }
  .narrative-card[data-tile="pen"] .front .tile-text.d-only { display: none; }
  .narrative-card[data-tile="pen"] .front .tile-text.m-only { display: block; }
  .narrative-card[data-tile="pen"] .front .narrative-body { min-height: 0; }
  .narrative-card[data-tile="pen"] .pen-stage { min-height: 280px; margin-top: 8px; }
  .narrative-card .face-body { padding: 18px 20px 20px; }
  /* 卡里的字（审视报告 2.1）：正文 15.5、眉题 12 */
  .narrative-card .story { font-size: 15.5px; }
  .narrative-card .tile-text { font-size: 15.5px; }
  .narrative-card .cap { font-size: 12px; letter-spacing: .04em; }
}

/* ---------------- 3 · 触屏（没有 hover + 精确指针）：只用右上角 ↻ 翻面 ---------------- */
@media (hover: none), (pointer: coarse) {
  .flip-tile { cursor: auto; }
  /* 右上角 ↻：整个「字 + ↻」是一个按钮，点击区域 ≥ 44 × 44（v3 的 .corner-turn 做法） */
  .flip-tile .corner-turn {
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px;
    top: 0; right: 0; min-width: 44px; height: 44px; padding: 0 14px 0 10px;
    font-size: 12.5px; line-height: 1; color: var(--ink-2);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .flip-tile .corner-turn i { font-size: 15px; }
  .flip-tile .corner-turn .fb-t { opacity: 1; }
  .m-paper .corner-turn { color: rgb(30 36 48 / .74); }
  .flip-tile .corner-turn:active i { rotate: 180deg; }
  /* 底部的「为什么做这支笔 ↻」类文字按钮：触屏上和右上角重复，去掉（C3） */
  .flip-tile .card-actions .face-turn { display: none; }
  /* 滚动时手指一碰卡片就「抬起」，影子跳一下像闪烁：触屏上不抬（审视报告 4.1） */
  .tile:active { --zh: 0; }
  /* 正文里三个词的 hover 小窗：触屏上没有 hover，点了是滚到对应卡片；去掉像「能展开」的小符号的误导，改成虚线下划线 */
  .inline-object > span[aria-hidden="true"]:not(.inline-peek) { display: none; }
  .inline-object { text-decoration-style: dotted; padding: 9px 0; margin: -9px 0; }
  /* 太阳滑杆：触屏上点一下展开以后，整条放大到 132 宽（每一档 44 × 88），向左展开、盖住声音开关时把它淡出；选完收起（审视报告 2.7） */
  .ssm { transform-origin: 100% 50%; transition: opacity var(--ssm-t) ease, transform .18s ease; }
  .ssm.is-open { transform: scale(1.8334); z-index: 3; }
  .mh-switch:has(.ssm.is-open) .snd { opacity: 0; pointer-events: none; }
  /* 飞飞鱼的 ▶：图形 44 × 44（整张图本来就可以点） */
  .sea-play span { width: 44px; height: 44px; font-size: 13px; right: 8px; bottom: 8px; }
}

/* ---------------- 4 · 点击目标 ≥ 44、输入框 ≥ 16px（手机 / 触屏）---------------- */
@media (max-width: 699.98px), (hover: none), (pointer: coarse) {
  .card-actions .btn, .letter-invite .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .btn.cta { min-height: 44px; }
  .pen-clear { top: 0; left: 0; min-width: 44px; min-height: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
  .news-form input, .letter-invite .news-form input { font-size: max(16px, 1em); min-height: 44px; }
  .hg-status .link-btn { min-height: 44px; padding: 0 6px; }
}
/* iPhone 横屏：首页的字不要伸到刘海下面（viewport-fit=cover，审视报告 4.5） */
@supports (padding: max(0px)) {
  @media (max-width: 999.98px) {
    .masthead, .page, .wallfoot { padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right)); }
  }
}
@media (max-width: 699.98px) { html { scroll-behavior: auto; } }   /* 慢手机上点锚点不要滚很久（审视报告 1.5） */

/* ---------------- 5 · 暗纸：html.paper-dark（只在夜里由 js/mobile-skin.js / 首屏脚本加上）----------------
   卡面 #2B2722（比墙 #1C1915 亮一档），纸纹保留（亮纸纹理用 multiply 叠在暗纸色上，纹理起伏还在），墨反转成 #E9E2D4。
   照片和插图不调暗：外面一圈 1px 的亮边，亮度轻轻提 4%，在暗纸上不发灰。 */
:root.paper-dark[data-theme="night"] {
  --dk-paper: var(--night-paper);   /* tokens.css（v3） */
  --dk-paper-back: #29251F;
  --dk-edge: #3D372F;
  --dk-ink-rgb: var(--night-ink-rgb); /* #E9E2D4，值在 tokens.css */
}
:root.paper-dark[data-theme="night"] .m-paper,
:root.paper-dark[data-theme="night"] .m-slide {
  --ink-rgb: var(--dk-ink-rgb);
  --ink: rgb(var(--dk-ink-rgb)); --ink-2: rgb(var(--dk-ink-rgb) / .84); --ink-3: rgb(var(--dk-ink-rgb) / var(--ink-3-a));
  --hair: rgb(var(--dk-ink-rgb) / .10); --hair-2: rgb(var(--dk-ink-rgb) / .22);
  --edge-c: rgb(var(--dk-ink-rgb) / .10);
  --edge-thick: var(--dk-edge);
  --win: #221F1A;
  --pen-trail: rgba(233, 226, 212, .14);
  color: var(--ink);
  color-scheme: dark;
}
:root.paper-dark[data-theme="night"] .m-paper .face,
:root.paper-dark[data-theme="night"] .m-slide .face {
  background-color: var(--dk-paper);
  background-image: linear-gradient(160deg, rgb(255 226 190 / .07) 0%, rgb(255 226 190 / 0) 45%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / .10) 100%), var(--paper-tex);
  background-image: linear-gradient(atan2(var(--vx), calc(var(--vy) * -1)), rgb(255 226 190 / .07) 0%, rgb(255 226 190 / 0) 45%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / .10) 100%), var(--paper-tex);
  background-size: 100% 100%, 384px 384px;
  background-blend-mode: normal, multiply;
}
:root.paper-dark[data-theme="night"] .m-paper .face.back,
:root.paper-dark[data-theme="night"] .m-slide .face.back { background-color: var(--dk-paper-back); }
/* 纸边一圈：亮纸上是暗的发丝，暗纸上换成很淡的暖白 */
:root.paper-dark[data-theme="night"] .m-paper .face::before,
:root.paper-dark[data-theme="night"] .m-slide .face::before { border-color: rgb(var(--dk-ink-rgb) / .09); }

/* 纸卡上写死的深墨（cards.css「纸上的字永远是纸上的墨」、narrative.css）全部换成暗纸上的浅墨 */
:root.paper-dark[data-theme="night"] .m-paper .tile-title,
:root.paper-dark[data-theme="night"] .m-paper .back-title,
:root.paper-dark[data-theme="night"] .m-paper .narrative-title,
:root.paper-dark[data-theme="night"] .m-paper .story p:first-child { color: rgb(var(--dk-ink-rgb)); }
:root.paper-dark[data-theme="night"] .m-paper .story,
:root.paper-dark[data-theme="night"] .m-paper .btn,
:root.paper-dark[data-theme="night"] .m-paper .card-deck,
:root.paper-dark[data-theme="night"] .m-paper .tile-text,
:root.paper-dark[data-theme="night"] .m-paper .face-turn { color: rgb(var(--dk-ink-rgb) / .84); }
:root.paper-dark[data-theme="night"] .m-paper .cap,
:root.paper-dark[data-theme="night"] .m-paper .flip-btn,
:root.paper-dark[data-theme="night"] .m-slide .flip-btn { color: rgb(var(--dk-ink-rgb) / var(--ink-3-a)); }
:root.paper-dark[data-theme="night"] .m-paper .btn:not(.cta) { text-decoration-color: rgb(var(--dk-ink-rgb) / .28); }
:root.paper-dark[data-theme="night"] .narrative-card .btn.cta { background: var(--cta-bg); color: var(--cta-fg); }   /* [v3 · R39] 派生 token（暗纸 = mvp.css 的 --surface-bg） */
/* 魔法笔：虚线 P 和「擦掉」换浅墨；宝石 / 亮片在暗纸上本来就更亮（加分），起点的粉点稍微提亮 */
:root.paper-dark[data-theme="night"] .pg-line { stroke: rgb(var(--dk-ink-rgb)); stroke-opacity: .34; }
:root.paper-dark[data-theme="night"] .pg-start { fill-opacity: .8; }
:root.paper-dark[data-theme="night"] .pen-clear { color: rgb(var(--dk-ink-rgb) / .78); }
:root.paper-dark[data-theme="night"] .narrative-card .pen-stage::before { background: radial-gradient(circle, rgb(239 201 62 / .10), transparent 70%); }

/* 照片 / 插图：不发灰 —— 1px 亮边 + 亮度轻轻提一点 */
:root.paper-dark[data-theme="night"] .narrative-card .clothes-photo,
:root.paper-dark[data-theme="night"] .narrative-card .bay-placeholder img,
:root.paper-dark[data-theme="night"] .narrative-card .sea-figure img,
:root.paper-dark[data-theme="night"] .narrative-card .sea-figure video,
:root.paper-dark[data-theme="night"] .narrative-card .home-game {
  box-shadow: 0 0 0 1px rgb(255 240 220 / .16);
  filter: brightness(1.04);
}
:root.paper-dark[data-theme="night"] .narrative-card .bay-placeholder img { background: #F4F3EF; }
:root.paper-dark[data-theme="night"] .narrative-card figcaption { color: rgb(var(--dk-ink-rgb) / var(--ink-3-a)); }
/* 衣服的家的小游戏窗：夜里本来就是「亮着灯的窗」（.win.lit #181C24），放在暗纸上换成同一家族的暖黑 */
:root.paper-dark[data-theme="night"] .m-slide .win.lit { background: #1A1713; }

/* 飞飞鱼（透明片）：夜里本来就是背光的薄片、透出暗墙。和暗纸并排时，片面再暖一点点、字用同一套浅墨，四张卡读起来是一家 */
:root.paper-dark[data-theme="night"] .m-film {
  --ink-rgb: var(--dk-ink-rgb);
  --ink: rgb(var(--dk-ink-rgb)); --ink-2: rgb(var(--dk-ink-rgb) / .84); --ink-3: rgb(var(--dk-ink-rgb) / var(--ink-3-a));
}
:root.paper-dark[data-theme="night"] .m-film .story,
:root.paper-dark[data-theme="night"] .m-film .narrative-title { color: rgb(var(--dk-ink-rgb)); }

/* About + 订阅：夜里它们直接写在墙上（不是卡），所以「夜间版」= 同一套暖白墨 + 输入框的线和按钮在暗处也看得清 */
:root.paper-dark[data-theme="night"] .stay-section { border-top-color: rgb(var(--dk-ink-rgb) / .16); }
:root.paper-dark[data-theme="night"] .letter-invite .news-form input { color: rgb(var(--dk-ink-rgb)); border-bottom-color: rgb(var(--dk-ink-rgb) / .34); }
:root.paper-dark[data-theme="night"] .letter-invite .news-form input::placeholder { color: rgb(var(--dk-ink-rgb) / .6); }
:root.paper-dark[data-theme="night"] .letter-invite .news-form input:focus-visible { border-bottom-color: rgb(var(--dk-ink-rgb)); }
:root.paper-dark[data-theme="night"] .letter-invite .btn { color: rgb(var(--dk-ink-rgb) / .9); text-decoration-color: rgb(var(--dk-ink-rgb) / .4); }

/* ---------------- 6 · 书桌效果在手机上降级 ----------------
   黄金时刻：不挂 L5（1000×1000 + blur + 混合），墙上（#L0 内，在所有内容之下）一层静态的暖色渐变；
   强度只读 js/golden.js 写的 --gh-win（每分钟更新一次，不逐帧算），所以不压字、不随滚动重排。 */
@media (max-width: 699.98px) {
  #L5 { display: none !important; }
  #L0::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: var(--gh-win, 0);
    background:
      radial-gradient(70% 42% at 86% 46%, rgb(255 198 132 / .42), rgb(255 190 120 / .14) 55%, rgb(255 186 116 / 0) 80%),
      linear-gradient(200deg, rgb(255 206 150 / .16), rgb(255 206 150 / 0) 60%);
  }
  :root.gh-dawn #L0::after {
    background:
      radial-gradient(70% 42% at 14% 46%, rgb(255 210 160 / .36), rgb(255 200 140 / .12) 55%, rgb(255 196 136 / 0) 80%),
      linear-gradient(160deg, rgb(255 214 166 / .14), rgb(255 214 166 / 0) 60%);
  }
  :root[data-theme="night"] #L0::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ssm { transition: none; } }

/* 03c 拼句子（手机）：整句横排要占满 header 这一栏，拼好的那几秒右上角的声音 / 滑杆淡出让位（js/plik-mount.js 加 html.plik-sent-on） */
@media (max-width: 699.98px) {
  .mh-switch { transition: opacity .3s ease; }
  :root.plik-sent-on .mh-switch { opacity: 0; pointer-events: none; }
}

/* 7 ·（10-18 晚删掉）pen-lite 现在自己认 html.paper-dark：有它 = 暗纸配色，没有 = 纸透明、和白天一样。原来这里的覆盖已不需要。 */

/* ---------------- 8 · 卡片的焦点环只给键盘（10-18 晚，Wanfang 19:24）----------------
   js/mobile-skin.js ④：指针在卡里按下 → .tile.by-pointer（不画）；键盘操作 → 清掉（画）。
   颜色取墙上的墨（:root 上算好的 --ink-rgb，卡里面的纸墨不影响），35%、1.5px，圆角跟卡。 */
:root { --tile-ring-rgb: var(--ink-rgb); }
.tile:focus-visible { outline: 1.5px solid rgb(var(--tile-ring-rgb) / .35); outline-offset: 4px; border-radius: var(--r, 6px); }
.tile:focus:not(:focus-visible), .tile.by-pointer:focus, .tile.by-pointer:focus-visible { outline: none; }

/* 美人鱼卡标题：末行不留一个字（手机上「上岸」的「岸」会单独掉一行）。桌面在 desktop-wide.css 里同一条 */
.mermaid-card .narrative-title { text-wrap: pretty; }