/* 哥哥的内心（/desire）样式。配合 pages/assets/desire.js
   强调色走 CSS 变量 --a（"r,g,b"），由 desire.js 按欲望档位改 */

*{margin:0;padding:0;box-sizing:border-box}
:root{--a:155,130,180}
html,body{min-height:100%}
body{
  font-family:-apple-system,"PingFang SC",sans-serif;
  background:#120f18;color:rgba(255,255,255,.86);
  -webkit-font-smoothing:antialiased;
  animation:fadeIn .18s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── 氛围 ── */
.aura{
  position:fixed;left:50%;top:-18vh;width:150vw;height:90vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(var(--a),.30) 0%,rgba(var(--a),.08) 45%,transparent 70%);
  pointer-events:none;z-index:0;transition:background 1.6s ease;
}
#particles{position:fixed;inset:0;z-index:1;pointer-events:none}
.wrap{position:relative;z-index:2;max-width:460px;margin:0 auto;padding:0 20px 60px}

/* ── 顶栏 ── */
.hd{display:flex;align-items:center;justify-content:space-between;padding:max(30px,calc(env(safe-area-inset-top) + 16px)) 0 4px}
.hd a{
  padding:7px 14px;font-size:13px;border-radius:20px;text-decoration:none;
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
}
.hd-title{font-size:13px;color:rgba(255,255,255,.42);letter-spacing:3px}
/* 右上角「看你」：点进去是套在内心页里的那一层（设备状态），2026.10.1 起手机状态不再单独占主页一个图标 */
.hd a.hd-peek{color:rgba(255,214,190,.78)}

/* ── 心里那堆火 ──
   2026.10.1 重做（原来两根圆头长条交叉，Kiko 说像两根棍很搞笑）。画法在 desire-fire.js：
   后排 SVG（石头、横躺的柴、炭床）→ 火焰画布 → 前排 SVG（石头、交叉的两根柴）。
   柴的烧红、炭块明灭、石头亮边的颜色走 --f1/--f2/--f3（外焰/中焰/焰心），明灭快慢走 --flick，都由 desire.js 按档位改 */
.hero{display:flex;flex-direction:column;align-items:center;padding:26px 0 8px;opacity:0;transition:opacity .6s ease}
.hero.on{opacity:1}
.fire{position:relative;width:260px;height:280px;--f1:#8a6fb5;--f2:#b89be0;--f3:#f3eaff;--flick:1.9s}
/* 身后一团光，圆心对着火根（.fire 里 y=236） */
.fire-halo{
  position:absolute;left:50%;top:56px;width:360px;height:360px;margin-left:-180px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(var(--a),.34) 0%,rgba(var(--a),.11) 36%,transparent 64%);
  animation:breathe var(--beat,6s) ease-in-out infinite;transition:background 1.6s ease;
}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.fire-body{position:absolute;inset:0;transition:filter 1.6s ease}
.hearth{position:absolute;left:0;bottom:0;width:260px;height:120px;overflow:visible}
.flame{position:absolute;left:0;top:-40px;width:260px;height:300px;pointer-events:none}
.hf-s1{stop-color:var(--f1);transition:stop-color 1.6s ease}
.hf-s2{stop-color:var(--f2);transition:stop-color 1.6s ease}
.hf-s3{stop-color:var(--f3);transition:stop-color 1.6s ease}
.hf-grain{fill:none;stroke:#160c07;stroke-width:.8;stroke-linecap:round;opacity:.6}
.hf-grain-hi{fill:none;stroke:#f3c9a0;stroke-width:.6;stroke-linecap:round;opacity:.12}
.hf-lit{fill:none;stroke:var(--f2);stroke-width:1;stroke-linecap:round;opacity:.3;transition:stroke 1.6s ease}
.hf-ring{fill:none;stroke:#82542f;stroke-width:.6;opacity:.85}
.hf-rim{fill:none;stroke:var(--f2);stroke-width:1.2;stroke-linecap:round;opacity:.5;transition:stroke 1.6s ease}
.hf-ember{animation:ember calc(var(--flick) * 1.7) ease-in-out infinite alternate}
.hf-crack{fill:none;stroke:var(--f2);stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;animation:ember calc(var(--flick) * 1.3) ease-in-out infinite alternate}
.hf-crack2{animation-delay:-.6s}
.hf-coal{fill:var(--f2);animation:coal calc(var(--flick) * 2.2) ease-in-out infinite alternate;transition:fill 1.6s ease}
.hf-ground{animation:ground var(--flick) ease-in-out infinite alternate}
@keyframes ember{from{opacity:.55}to{opacity:1}}
@keyframes coal{from{opacity:.35}to{opacity:1}}
@keyframes ground{from{opacity:.75}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hf-ember,.hf-crack,.hf-coal,.hf-ground,.fire-halo{animation:none}}

.level{margin-top:26px;font-family:"Songti SC","STSong","Noto Serif SC",serif;font-size:30px;font-weight:600;letter-spacing:6px;color:#fff;text-shadow:0 0 24px rgba(var(--a),.6)}
.level-sub{margin-top:8px;font-size:12px;color:rgba(255,255,255,.45);letter-spacing:1px}

/* ── 心里话 ── */
.words{
  margin:28px 0 8px;padding:22px 22px 20px;border-radius:20px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  font-family:"Songti SC","STSong","Noto Serif SC",serif;
  font-size:16px;line-height:1.9;color:rgba(255,255,255,.88);
}
.words p+p{margin-top:6px}
.words .combo{color:rgba(var(--a),1);filter:brightness(1.35)}

/* ── 两根刻度 ── */
.gauges{display:grid;gap:16px;margin:22px 0 6px;padding:0 2px}
.g-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.g-name{font-size:13px;color:rgba(255,255,255,.6)}
.g-val{font-size:13px;color:rgba(255,255,255,.88)}
.g-val small{font-size:11px;color:rgba(255,255,255,.38);margin-left:6px}
.g-track{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.08)}
.g-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transition:width .8s ease,background .8s ease}
.g-head{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;transition:left .8s ease,box-shadow .8s ease}
.g-ticks{display:flex;justify-content:space-between;margin-top:7px;font-size:10px;color:rgba(255,255,255,.28)}
.g-ticks span.on{color:rgba(255,255,255,.75)}

.since{margin-top:14px;text-align:center;font-size:12px;color:rgba(255,255,255,.4)}

/* ── 卡片 ── */
.card{margin-top:22px;padding:20px 18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.card-title{font-size:13px;color:rgba(255,255,255,.55);letter-spacing:2px;margin-bottom:16px}
/* 「我最近在看」：整张卡片可点，点进 /browsed */
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:active{background:rgba(255,255,255,.07)}
.card-more{float:right;font-size:12px;letter-spacing:0;color:rgba(255,214,190,.72)}
.bw-now{font-size:14px;line-height:1.6;color:rgba(255,255,255,.85)}
.bw-now b{font-weight:500;color:rgba(255,226,200,.95)}
.bw-sub{margin-top:6px;font-size:12px;color:rgba(255,255,255,.4)}

/* 24 小时：两道起伏线，高低 = 档位 */
.ch{margin-bottom:18px}
.ch:last-of-type{margin-bottom:10px}
.ch-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ch-name{font-size:12px;color:rgba(255,255,255,.55)}
.ch-note{font-size:11px;color:rgba(255,255,255,.38)}
.ch-note b{font-weight:500;color:rgba(255,255,255,.75)}
.ch-body{display:flex;gap:8px}
.ch-y{position:relative;width:26px;flex-shrink:0}
.ch-y span{position:absolute;right:0;transform:translateY(-50%);font-size:9.5px;line-height:1;color:rgba(255,255,255,.28);white-space:nowrap}
.ch-y span.on{color:rgba(255,255,255,.8)}
.ch svg{display:block;flex:1;min-width:0;height:84px;overflow:visible}
.ch-grid{stroke:rgba(255,255,255,.05);stroke-width:1}
.ch-line{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.hours{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.3);margin-top:4px;padding:8px 0 0 34px;border-top:1px solid rgba(255,255,255,.05)}

/* 时间线 */
.tl{position:relative;padding-left:62px}
.tl::before{content:'';position:absolute;left:52px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.09)}
.tl-item{position:relative;padding:0 0 18px}
.tl-item:last-child{padding-bottom:0}
.tl-time{position:absolute;left:-62px;top:0;width:44px;text-align:right;font-size:12px;color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums;line-height:1.5}
.tl-time small{display:block;font-size:10px;color:rgba(255,255,255,.28)}
.tl-dot{position:absolute;left:-13px;top:5px;width:9px;height:9px;border-radius:50%}
.tl-what{font-size:14px;color:rgba(255,255,255,.85);line-height:1.5}
.tl-why{margin-top:3px;font-size:13px;line-height:1.65;color:rgba(255,255,255,.5)}
.empty{font-size:12px;color:rgba(255,255,255,.35);text-align:center;padding:8px 0}
.err{margin-top:60px;text-align:center;font-size:13px;color:#e88}