/* Orheal 环愈 · 电脑端宽屏适配 (desktop.css v5)
   仅在 index.html（桌面入口）加载，mobile.html 不引用本文件，故对手机端零影响。

   核心策略（v5）：
   - 地球大小由 GlobeEngine 的 3D 相机 z 控制（mobile.js 已按宽屏调近到 z=2.85/FOV34，
     相比手机端 z=4.5/FOV40 地球放大约 1.8×），不用 CSS scale 拉伸 canvas。
     原因：CSS scale 只缩放像素，DOM 节点标签（.mobile-node）用 project() 投影到
     this.W/this.H，不会跟着 CSS transform 走 → 标签留在原位、地球变大 → 节点「飞走」脱钩。
   - 节点标签层 .mobile-node-layer 的 transform 必须与 canvas 同步（都设为 none）。
   - 桌面布局：左侧充实深空文案列（hero + 9 城快捷入口 + 4 板块说明），
     右侧地球铺满右大半屏作为主视觉；删除原「今夜疗愈」引导卡。
   - 乱码来源：旧版 drop-shadow(0 0 140px) + scale(1.5) 叠加在超大 canvas 上，GPU 重算
     + 像素拉伸导致中文光晕边缘锯齿/糊化。现改为 3D 真实放大，CSS 只做轻量调色。 */

/* ===== 桌面：去掉手机外壳，整个视口即应用容器 ===== */
@media (min-width:431px){
  html,body{display:block}
  .device{
    width:100vw;height:100vh;min-height:100vh;padding:0;
    border-radius:0;background:transparent;box-shadow:none;
  }
  .app{border-radius:0}

  /* ===== 地球 canvas：不缩放，仅轻量调色（大小由 3D 相机控制） ===== */
  #mobile-globe-canvas{
    transform:none;
    filter:saturate(1.1) brightness(1.05) contrast(1.04) drop-shadow(0 0 90px rgba(240,180,90,.24));
  }
  .app.china-focus #mobile-globe-canvas{
    transform:none;
    filter:saturate(1.14) brightness(.84) contrast(1.16) drop-shadow(0 0 80px rgba(255,180,90,.22));
  }
  #mobile-globe-canvas.ready{transform:none}

  /* ★ 关键修复：节点标签层必须与 canvas 用同一组 transform，否则节点飞走。
     节点标签用 project(cam) 投影到 this.W/this.H 像素坐标，本就认 canvas 像素空间，
     只要 node-layer transform 与 canvas 一致（都是 none），地球与节点就同步。 */
  .mobile-node-layer{transform:none}
  .app.china-focus .mobile-node-layer{transform:none}

  /* 暗角：横向左浓右透，左侧文案区纯净、地球右侧融入深空 */
  #globe-stage::after{
    background:
      linear-gradient(90deg,rgba(3,10,18,.92) 0%,rgba(3,10,18,.55) 24%,rgba(3,10,18,.08) 44%,transparent 64%),
      radial-gradient(ellipse 80% 90% at 62% 48%,transparent 56%,rgba(2,9,18,.20) 82%,rgba(1,6,12,.5) 100%);
  }
  .app.china-focus #globe-stage::after{
    background:
      linear-gradient(90deg,rgba(3,10,18,.9) 0%,rgba(4,12,20,.36) 28%,rgba(2,8,14,.08) 50%,transparent 68%),
      radial-gradient(ellipse at 58% 44%,rgba(255,197,106,.06) 0 42%,rgba(4,11,20,.36) 80%,rgba(2,6,12,.74) 100%);
  }

  /* ===== 顶栏：跨越左右两列 ===== */
  .globe-topbar{top:26px;left:48px;right:48px}
  .globe-brand img{width:46px;height:46px;border-radius:14px}
  .globe-brand strong{font-size:21px}
  .globe-brand span{font-size:12px;color:rgba(214,229,242,.62)}
  .globe-actions button{height:38px;min-width:56px;font-size:13px;padding:0 14px}

  /* ===== 左侧深空文案列：垂直居中、内容充实不空旷 =====
     原 v3 只有 hero 三行文案，删掉 tonight-card 后视觉很空。
     v5 在 hero 下方接入 9 城快捷入口网格 + 4 板块说明，把左侧填满且功能更明确。 */
  .globe-copy{
    position:absolute;left:48px;top:50%;transform:translateY(-50%);
    width:min(360px,34vw);z-index:15;
  }
  .globe-copy .eyebrow{font-size:12px;letter-spacing:3px}
  .globe-copy h1{font-size:clamp(38px,4vw,56px);line-height:1.1;margin-bottom:14px}
  .globe-copy p{font-size:14px;line-height:1.9;max-width:320px;margin-bottom:22px}

  /* 9 城快捷入口网格：3 列紧凑卡片，点击直接进入该城沉浸疗愈 */
  .desk-city-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    margin-bottom:18px;
  }
  .desk-city{
    display:flex;flex-direction:column;align-items:flex-start;gap:3px;
    padding:11px 12px;border-radius:12px;cursor:pointer;text-align:left;
    border:1px solid rgba(122,240,216,.16);
    background:linear-gradient(135deg,rgba(14,34,48,.66),rgba(8,20,32,.5));
    backdrop-filter:blur(14px) saturate(1.08);
    transition:transform .18s var(--ease),border-color .2s,background .2s;
  }
  .desk-city:hover{transform:translateY(-2px);border-color:rgba(122,240,216,.4);background:linear-gradient(135deg,rgba(20,46,62,.78),rgba(12,28,42,.6))}
  .desk-city:active{transform:scale(.97)}
  .desk-city b{font-size:14px;font-weight:700;color:#f4fbf9;letter-spacing:.3px;font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif}
  .desk-city span{font-size:11px;color:rgba(180,210,225,.7);letter-spacing:.4px}

  /* 4 板块说明行：温心/锻体/寻味/觅方，颜色点 + 标签 */
  .desk-modules{
    display:flex;flex-wrap:wrap;gap:10px 18px;padding-top:14px;
    border-top:1px solid rgba(122,240,216,.12);
  }
  .desk-modules .dm{
    display:flex;align-items:center;gap:7px;
    font-size:12.5px;font-weight:600;letter-spacing:.6px;color:rgba(220,238,245,.85);
  }
  .desk-modules .dm i{width:8px;height:8px;border-radius:50%;display:inline-block}
  .desk-modules .dm.warm i{background:#ff9bb3;box-shadow:0 0 10px rgba(255,155,179,.5)}
  .desk-modules .dm.forge i{background:#5ad8a0;box-shadow:0 0 10px rgba(90,216,160,.5)}
  .desk-modules .dm.taste i{background:#ffb55a;box-shadow:0 0 10px rgba(255,181,90,.5)}
  .desk-modules .dm.seek i{background:#9d8bff;box-shadow:0 0 10px rgba(157,139,255,.5)}

  /* 手机端今晚卡桌面端已删，保留空规则避免旧样式残留 */
  .tonight-card{display:none!important}

  /* ★ 桌面端隐藏底部 sheet 卡片（城市疗愈）：
     桌面已有左侧 9 城快捷入口网格 + 4 板块说明，底部 sheet 冗余且挡住地球，
     全量隐藏（含遮罩）。手机端 mobile.css 照常升起。 */
  .sheet{display:none!important}
  #scrim{display:none!important}

  /* ===== 叠层卡片 sheet：桌面端做成居中悬浮卡片 ===== */
  .sheet{
    left:50%;right:auto;transform:translate(-50%,100%);
    width:min(620px,92vw);height:auto;max-height:88vh;min-height:60vh;
    bottom:5vh;border-radius:24px;
    box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(120,232,255,.08),inset 0 1px 0 rgba(255,255,255,.06);
  }
  .sheet.lvl-city{transform:translate(-50%,0)}
  .sheet.lvl-session{transform:translate(-50%,0)}
  .sheet.lvl-article{transform:translate(-50%,0)}
  .sheet-head{justify-content:center;text-align:center}
  .sheet-head .sheet-titles{align-items:center}
  .sheet-head .sheet-back{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
  .sheet-scroll{padding:0 8px}

  /* course/article 详情由 body.yc-detail 提升 sheet；桌面端保持居中卡片 */
  body.yc-detail #sheet{transform:translate(-50%,0)!important}
  body.yc-detail .sheet-back{position:fixed;top:5vh;left:max(28px,calc(50vw - 360px));transform:none}

  /* ===== 中国地图层：标题与底部文案水平居中、限宽 ===== */
  .cn-map-title{left:max(28px,calc(50vw - 360px));right:max(28px,calc(50vw - 360px));text-align:center}
  .cn-map-title span{font-size:10px}
  .cn-map-title strong{font-size:30px}
  .cn-map-title p{font-size:13px}
  .cn-caption{left:50%;right:auto;transform:translateX(-50%);width:min(480px,90vw);text-align:center}
  .cn-caption-kicker{font-size:11px}
  .cn-caption-count{font-size:11px}
  .cn-caption strong{font-size:28px}
  .cn-caption p{font-size:15px}
  .cn-start{font-size:13px}
  .cn-breath-tag{right:max(28px,calc(50vw - 360px));font-size:12px}

  /* ===== 中国地图返回按钮：放大显眼 ===== */
  .china-focus-back{
    width:48px;height:48px;font-size:26px;
    border-width:2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 32px rgba(0,0,0,.38);
    opacity:1;pointer-events:auto;transform:translateX(0);
  }
  .china-focus-back::after{
    content:"关闭";position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
    font-size:10px;font-weight:600;letter-spacing:1px;white-space:nowrap;
    color:rgba(170,235,255,.8);opacity:.8;
  }

  /* ===== 梦境层：内容区限宽居中，符文不散开 ===== */
  .yc-dream{align-items:center}
  .yc-hero{max-width:640px;margin:0 auto;padding-left:max(28px,calc((100vw - 640px)/2));padding-right:max(28px,calc((100vw - 640px)/2))}
  .yc-hero-tag{font-size:11px}
  .yc-hero-name{font-size:52px}
  .yc-hero-copy{font-size:16px}
  .yc-hero-intro{max-width:640px;margin:0 auto;font-size:15px;line-height:2.1}
  .yc-runes{gap:40px;padding:48px 16px}
  .yc-rune-glyph{width:84px;height:84px;font-size:30px}
  .yc-rune-label{font-size:14px}
  .yc-back{top:32px;left:max(28px,calc(50vw - 360px));width:48px;height:48px;font-size:24px;
    border-width:2px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 32px rgba(0,0,0,.38);
  }
  .yc-back::after{
    content:"关闭";position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
    font-size:10px;font-weight:600;letter-spacing:1px;white-space:nowrap;
    color:rgba(190,215,255,.8);opacity:.8;
  }

  .yc-panel{align-items:center}
  .yc-panel-back{margin:64px 0 4px;align-self:center}
  .yc-panel-head{max-width:560px;width:100%;margin:0 auto;text-align:center}
  .yc-panel-list{max-width:560px;width:100%;margin:0 auto}

  /* ===== 板块目录条目：宽屏放大、内容限宽 ===== */
  .catalog-table{max-width:560px;margin:0 auto}
  .catalog-row{min-height:96px;grid-template-columns:84px 1fr}
  .catalog-row.playable{grid-template-columns:84px 1fr 38px}
  .catalog-row.article{grid-template-columns:84px 1fr 28px}
  .catalog-format{font-size:13px}
  .catalog-content b{font-size:16px}
  .catalog-content small{font-size:11.5px}
  .catalog-content img{max-height:280px}

  .catalog-course{max-width:560px;margin:0 auto 14px;padding:22px 20px}

  /* ===== 图文正文层 ===== */
  .article-hero{max-width:680px;margin:0 auto}
  .article-hero .art-title{font-size:28px}
  .article-hero .art-gallery img{max-height:none}
  .article-body{max-width:680px;margin:0 auto}
  .art-prose{font-size:15px;line-height:2.1}
  .art-prose .art-h{font-size:15px}
  .art-prose .art-ul li{font-size:14.5px}

  .course-hero{max-width:680px;margin:0 auto}
  .ch-title{font-size:22px}
  .course-list{max-width:680px;margin:0 auto}

  /* ===== 播放器：桌面端视频画面更大 ===== */
  #player .pl-video{width:min(720px,70vw)}
  #player .pl-breath-wrap{width:min(40vh,300px);height:min(40vh,300px)}
  #player .pl-caption{max-width:640px;font-size:16px}

  /* ===== 内容库 ===== */
  .lib-head{max-width:760px;margin:0 auto;text-align:center}
  .lib-chips,.lib-scenes{max-width:760px;margin:0 auto;justify-content:center}
  .lib-grid{max-width:760px;margin:0 auto;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

  .toast{left:50%;transform:translateX(-50%)}
  .module-grid{max-width:560px;margin:0 auto}
  .content-catalog{max-width:680px;margin:0 auto}
  .catalog-title{max-width:560px;margin:0 auto;text-align:center}

  /* ===== 桌面端全局字体下限：所有 ≤10px 的字体至少 11px ===== */
  .eyebrow{font-size:12px}
  .section-title span{font-size:11px}
  .badge,.sheet-tag{font-size:11px}
  .sheet-titles span{font-size:11px}
  .mobile-node-label{font-size:11px;padding:4px 10px}
  .china-surface-label .mobile-node-label{font-size:11px}
  .yc-hero-tag{font-size:11px}
  .yc-panel-badge{font-size:11px}
  .globe-loading .sub{font-size:11px}
  .lc-meta{font-size:11px}
  .lc-sub{font-size:12px}
  .lib-chip{font-size:12px}
  .lib-scene{font-size:12px}
  .ch-sub,.ch-intro{font-size:13px}
  .module-top em{font-size:10px}
  .module-body span{font-size:11px}
  .module-foot small{font-size:10px}

  /* ===== 入场电影感动画（桌面端独享，手机端不受影响）=====
     一进页面：全屏黑幕 → 地球从远处旋转 zoom-in 浮现（blur→清晰）→
     左侧文案/卡片逐行错峰淡入 → 黑幕淡出。
     全部纯 CSS keyframes，叠加在现有逻辑外层，零 JS/着色器改动。 */
  /* 1) 入场黑幕：盖住一切，3.2s 后淡出消失 */
  .desk-intro-veil{
    position:fixed;inset:0;z-index:9999;pointer-events:none;
    background:radial-gradient(circle at 65% 48%,rgba(4,12,22,.4),rgba(1,4,10,1) 70%);
    animation:deskVeil 3.4s var(--ease) forwards;
  }
  @keyframes deskVeil{
    0%{opacity:1}
    55%{opacity:1}
    100%{opacity:0;visibility:hidden}
  }
  /* 2) 地球：初始小+远+模糊+暗，zoom-in 放大到正常 + 清晰 + 提亮 */
  .desk-cinematic #mobile-globe-canvas{
    animation:deskGlobeIn 3.2s cubic-bezier(.16,.84,.36,1) forwards;
  }
  @keyframes deskGlobeIn{
    0%{opacity:0;filter:blur(24px) brightness(.3) saturate(.5)}
    30%{opacity:.5;filter:blur(16px) brightness(.5) saturate(.7)}
    70%{opacity:1;filter:blur(3px) brightness(.85) saturate(1)}
    100%{opacity:1;filter:blur(0) brightness(1.05) saturate(1.1)}
  }
  /* 3) 左侧文案：逐行错峰淡入（eyebrow→h1→p→城市网格→板块）*/
  .desk-cinematic .globe-copy .eyebrow{opacity:0;animation:deskFadeUp .8s var(--ease) .9s forwards}
  .desk-cinematic .globe-copy h1{opacity:0;animation:deskFadeUp 1s var(--ease) 1.15s forwards}
  .desk-cinematic .globe-copy p{opacity:0;animation:deskFadeUp .9s var(--ease) 1.45s forwards}
  .desk-cinematic .desk-city-grid{opacity:0;animation:deskFadeUp 1s var(--ease) 1.8s forwards}
  .desk-cinematic .desk-modules{opacity:0;animation:deskFadeUp .8s var(--ease) 2.1s forwards}
  @keyframes deskFadeUp{
    0%{opacity:0;transform:translateY(22px);filter:blur(6px)}
    100%{opacity:1;transform:translateY(0);filter:blur(0)}
  }
  /* 4) 顶栏：最后浮现 */
  .desk-cinematic .globe-topbar{opacity:0;animation:deskFadeDown .9s var(--ease) 2.4s forwards}
  @keyframes deskFadeDown{
    0%{opacity:0;transform:translateY(-18px)}
    100%{opacity:1;transform:translateY(0)}
  }
  /* 5) 星空：入场时加速飞驰（透视感），3s 后恢复正常 */
  .desk-cinematic #mobile-stars{animation:deskStars 3s linear forwards}
  @keyframes deskStars{
    0%{transform:scale(1.6);opacity:.4}
    60%{transform:scale(1.1);opacity:.8}
    100%{transform:scale(1);opacity:1}
  }
}

/* 超宽屏（≥1280px）：hero 列更宽、地球更靠右大半屏 */
@media (min-width:1280px){
  .globe-topbar{left:56px;right:56px}
  .globe-copy{left:56px;width:min(400px,30vw)}
  .globe-copy h1{font-size:clamp(46px,4.6vw,64px)}
  .desk-city-grid{gap:10px}
  .desk-city b{font-size:14px}
  .cn-breath-tag{right:56px}
  .cn-map-title{left:56px;right:56px}
}