/* ============================================================
   灵灵的星球基地 —— 首页专用样式
   只支持横屏（iPad / 手机），竖屏显示旋转提示
   ============================================================ */

.home-body{
  overflow:hidden;
  height:100vh; height:100dvh;
  /* 暖奶油天空 → 浅绿地面 */
  background:
    radial-gradient(120% 82% at 50% 6%, #FFF6E4 0%, #FFEFD9 38%, #FDE8CE 60%, transparent 61%),
    linear-gradient(180deg, #FFF3E0 0%, #FFEEDC 52%, #EAF6DC 52.1%, #DDF0CB 100%);
}

/* 纸张颗粒 + 远处星轨 */
.home-body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 78% 14%, rgba(255,255,255,.8) 0 2.6px, transparent 3px),
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.7) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 30% 12%, rgba(255,255,255,.75) 0 2px, transparent 2.4px);
  opacity:.85;
}
/* 星轨：一条淡淡的椭圆弧，暗示"星球" */
.home-body::after{
  content:''; position:fixed; z-index:0; pointer-events:none;
  left:-8%; right:-8%; top:6%; height:70%;
  border-radius:50%;
  border:2px dashed rgba(255,167,120,.28);
  border-bottom-color:transparent; border-left-color:transparent;
  transform:rotate(-7deg);
}

.base{
  position:relative; z-index:1;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  padding:calc(10px + env(safe-area-inset-top)) 22px 14px;
  gap:10px;
}

/* ---------------- 顶部徽章条 ---------------- */
.base-hd{
  flex:none;
  display:flex; align-items:center; justify-content:space-between;
}
.bh-logo{display:flex; align-items:center; gap:9px; font-weight:800; font-size:20px; color:#5B4A6B}
.bh-mark{width:30px; height:30px}
.bh-badges{display:flex; gap:9px}
.badge{
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.78);
  border:2px solid rgba(255,255,255,.95);
  border-radius:999px; padding:4px 13px 4px 9px;
  box-shadow:0 3px 10px rgba(150,120,90,.10);
}
.badge svg{width:19px; height:19px}
.badge b{font-size:17px; color:#5B4A6B}

/* ---------------- 声音设置 ---------------- */
.badge-btn{
  cursor:pointer; font-family:inherit; padding:5px 11px;
  transition:transform .15s;
}
.badge-btn:active{transform:scale(.92)}
.vs-mask{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:rgba(60,45,40,.42); backdrop-filter:blur(4px);
  padding:16px;
}
.vs-mask[hidden]{display:none}
.vs-box{
  background:#FFFDF8; border-radius:24px; width:100%; max-width:420px;
  padding:18px 20px 20px; box-shadow:0 18px 50px rgba(90,70,60,.3);
  max-height:88vh; display:flex; flex-direction:column;
  animation:vsIn .26s cubic-bezier(.2,.85,.35,1.05);
}
@keyframes vsIn{from{transform:translateY(14px) scale(.97); opacity:0}to{transform:none; opacity:1}}
.vs-hd{display:flex; align-items:center; gap:10px}
.vs-t{flex:1; font-size:19px; font-weight:800; color:#4A3B58}
.vs-x{
  border:none; background:#F1EDE6; border-radius:11px;
  width:32px; height:32px; color:#8A7A88; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.vs-x svg{width:17px; height:17px}
.vs-s{font-size:13.5px; color:#9A8AA0; margin:5px 0 13px; line-height:1.5}
.vs-list{display:flex; flex-direction:column; gap:9px; overflow-y:auto; min-height:0}
.vs-item{
  display:flex; align-items:center; gap:10px;
  border:2px solid #EFE7DC; background:#fff; border-radius:15px;
  padding:13px 15px; cursor:pointer; font-family:inherit; text-align:left;
}
.vs-item:active{background:#FDF7EF}
.vs-item.on{border-color:#FFB3CD; background:#FFF5F8}
.vs-nm{flex:1; font-size:16px; font-weight:700; color:#4A3B58;
       display:flex; align-items:center; gap:6px}
/* 音色徽章：蓝=男 粉=女，实心=小孩 描边=大人 */
.vs-tag{font-size:11px; font-weight:800; font-style:normal;
        padding:1px 7px; border-radius:999px; letter-spacing:.5px}
.vs-tag.g-m{background:#DCEBFF; color:#2E6BB8}
.vs-tag.g-f{background:#FFE0EC; color:#C4527E}
.vs-tag.a-a{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}
.vs-tx{flex:1; display:flex; flex-direction:column; gap:2px}
.vs-ds{font-size:12px; color:#A99BAF; font-weight:600}
.vs-mk{font-size:12.5px; font-weight:700; color:#B9A8C0}
.vs-item.on .vs-mk{color:#FF7BAC}
.vs-load{font-size:14px; color:#9A8AA0; padding:14px 0; text-align:center}

/* ---------------- 主区三段式 ---------------- */
.base-main{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:23% 1fr 27%;
  gap:16px;
}

/* ===== 左：灵灵 ===== */
.col-ling{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px; min-height:0; padding-bottom:4px;
}
.ling-stage{
  position:relative; flex:1; min-height:0;
  display:flex; align-items:flex-end; justify-content:center;
  width:100%; overflow:hidden;
}
/* SVG 整体不许超出舞台，否则腿会被裁掉 */
.ling-stage .ling-char{max-height:100%; max-width:100%}
.ling-stage .ling-char svg{width:100%; height:100%; display:block}
.ling-full{ animation:breathe 3.6s ease-in-out infinite; transform-origin:50% 100%; }
.ling-full .ling-char{ height:auto !important; }
@keyframes breathe{
  0%,100%{ transform:translateY(0) scale(1) }
  50%    { transform:translateY(-5px) scale(1.012) }
}
.ling-shadow{
  position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:52%; height:14px; border-radius:50%;
  background:radial-gradient(50% 50%, rgba(120,150,90,.26), transparent 72%);
}
.ling-say{
  flex:none; max-width:100%;
  background:#fff; border:2.5px solid #FFD9E6;
  border-radius:18px; padding:9px 15px;
  font-size:16px; line-height:1.45; color:#5B4A6B; text-align:center;
  box-shadow:0 4px 14px rgba(150,110,140,.13);
  position:relative;
}
.ling-say::after{
  content:''; position:absolute; top:-9px; left:50%; margin-left:-8px;
  border:8px solid transparent; border-bottom-color:#FFD9E6; border-top:0;
}

/* ===== 中：主舞台（探索舱） ===== */
.col-stage{ display:flex; align-items:center; min-height:0; }
.col-stage > .pod{ max-height:100%; }

.pod{
  flex:1; min-height:0; max-height:min(100%, 470px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9F0 100%);
  border:3px solid #FFE0BE;
  border-radius:30px;
  padding:16px 20px 18px;
  box-shadow:0 10px 30px rgba(180,130,90,.14);
  position:relative; overflow:hidden;
}
/* 舱顶的一道弧光，像舷窗 */
.pod::before{
  content:''; position:absolute; top:-58%; left:-12%; right:-12%; height:100%;
  background:radial-gradient(closest-side, rgba(255,214,170,.30), transparent 70%);
  pointer-events:none;
}
.pod-tag{
  flex:none; align-self:flex-start;
  display:flex; align-items:center; gap:6px;
  background:#FFEFD5; color:#C4772A;
  font-size:14px; font-weight:800;
  padding:4px 13px; border-radius:999px; margin-bottom:8px;
}
.pod-tag svg{width:15px;height:15px}

.pod-body{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center; gap:22px;
}
/* 舷窗里的课程插画 */
.pod-art{
  flex:none; width:34%; max-width:190px; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFF8EC, #FFE9CF);
  border:4px solid #fff;
  box-shadow:0 8px 22px rgba(190,140,90,.20), inset 0 0 0 3px #FFDCB4;
  display:grid; place-items:center; overflow:hidden;
}
.pod-art img{width:68%; height:68%; object-fit:contain}
.pod-info{flex:1; min-width:0}
.pod-t{
  font-size:30px; font-weight:900; line-height:1.22; color:#4A3D5C;
  letter-spacing:-.4px; margin-bottom:6px;
}
.pod-s{font-size:16px; color:#8A7C99; line-height:1.5; margin-bottom:10px}
.pod-meta{display:flex; align-items:center; gap:7px; font-size:14px; color:#A9977F; margin-bottom:14px}
.pod-meta svg{width:16px;height:16px}

.pod-go{
  flex:none;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg,#FF92B8,#FF6E9F);
  color:#fff; font-size:22px; font-weight:900;
  border-radius:20px; padding:14px 24px;
  box-shadow:0 6px 0 #E0568A, 0 10px 22px rgba(224,86,138,.30);
  text-decoration:none;
  transition:transform .12s, box-shadow .12s;
}
.pod-go:active{ transform:translateY(4px); box-shadow:0 2px 0 #E0568A, 0 5px 14px rgba(224,86,138,.26); }
.pod-go svg{width:24px;height:24px}

/* 庆祝态 */
.pod.cheer{ border-color:#FFD75E; background:linear-gradient(180deg,#FFFDF4 0%,#FFF6DC 100%); }
.pod.cheer .pod-tag{ background:#FFF0B8; color:#B07A12 }
.cheer-wrap{flex:1; min-height:0; display:flex; align-items:center; gap:22px}
.cheer-card{
  flex:none; width:31%; max-width:170px; aspect-ratio:.78;
  background:#fff; border:3px solid #FFD75E; border-radius:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:12px; box-shadow:0 8px 22px rgba(200,160,40,.24);
  animation:cardIn .6s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes cardIn{ from{opacity:0; transform:scale(.7) rotate(-8deg)} to{opacity:1;transform:none} }
.cheer-card .cc-art{width:64%; aspect-ratio:1; display:grid; place-items:center}
.cheer-card .cc-art img{width:100%;height:100%;object-fit:contain}
.cheer-card .cc-art svg{width:76%;height:76%}
.cheer-card .cc-n{font-size:15px; font-weight:800; color:#8A6B1F; text-align:center; line-height:1.3}
.cheer-info{flex:1; min-width:0}
.cheer-t{font-size:30px; font-weight:900; color:#4A3D5C; line-height:1.2; margin-bottom:8px}
.cheer-s{font-size:16px; color:#8A7C99; line-height:1.5; margin-bottom:14px}
.cheer-next{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:2.5px solid #FFD0A6; color:#C4772A;
  font-size:17px; font-weight:800; border-radius:15px; padding:9px 18px;
  text-decoration:none;
}
.cheer-next:active{transform:translateY(2px)}
.cheer-next svg{width:18px;height:18px}

/* 全部学完 */
.pod-all{align-items:center; justify-content:center; text-align:center; gap:10px}

/* ===== 右：星球航线 ===== */
.col-route{display:flex; flex-direction:column; min-height:0}
.route-t{
  flex:none; font-size:15px; font-weight:800; color:#9A8AA8;
  letter-spacing:1px; margin:0 0 8px 4px;
}
.route{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:9px;
  padding-right:4px; padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.route::-webkit-scrollbar{width:5px}
.route::-webkit-scrollbar-thumb{background:rgba(160,140,120,.25); border-radius:3px}

.stop{
  flex:none; display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.86);
  border:2.5px solid #fff; border-radius:19px;
  padding:9px 13px; text-decoration:none; color:inherit;
  box-shadow:0 3px 12px rgba(150,120,90,.10);
  position:relative;
}
.stop-art{
  flex:none; width:46px; height:46px; border-radius:13px;
  background:#FFF6E8; display:grid; place-items:center; overflow:hidden;
}
.stop-art img{width:76%;height:76%;object-fit:contain}
.stop-tx{flex:1; min-width:0}
.stop-n{font-size:15px; font-weight:800; color:#54465F; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stop-m{font-size:12.5px; color:#A294AF; margin-top:1px}
.stop-mk{flex:none; width:24px; height:24px}

/* 已完成 */
.stop.done{background:rgba(232,250,235,.9); border-color:#CDEFD6}
.stop.done .stop-art{background:#E4F8EA}
/* 当前 */
.stop.cur{
  background:#fff; border-color:#FFB4CE;
  box-shadow:0 5px 16px rgba(255,140,180,.24);
}
.stop.cur .stop-art{background:#FFEFF5}
.stop.cur .stop-n{color:#D6417B}
/* 未解锁 */
.stop.lock{background:rgba(255,255,255,.5); border-color:rgba(255,255,255,.7); box-shadow:none}
.stop.lock .stop-art{background:rgba(240,235,228,.8)}
.stop.lock .stop-art img{filter:grayscale(1) opacity(.42)}
.stop.lock .stop-n{color:#B3A9BC}
.stop.lock .stop-m{color:#C2B9CA}

/* ---------------- 底部游戏传送门 ---------------- */
.portals{
  flex:none; display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  padding-bottom:env(safe-area-inset-bottom);
}
.portal{
  display:flex; align-items:center; gap:10px;
  padding:10px 13px; border-radius:22px;
  text-decoration:none; color:inherit;
  border:2.5px solid #fff;
  box-shadow:0 4px 14px rgba(150,120,90,.12);
  transition:transform .12s;
}
.portal:active{transform:translateY(3px)}
.p-blocks{background:linear-gradient(135deg,#E4F1FF,#D6E9FF)}
.p-draw  {background:linear-gradient(135deg,#FFE9F1,#FFDCEA)}
.p-memory{background:linear-gradient(135deg,#EFE8FF,#E4DAFF)}
.p-movie {background:linear-gradient(135deg,#FFF0DC,#FFE3C4)}
.pt-art{flex:none; width:42px; height:42px}
.pt-art svg{width:100%;height:100%}
.pt-txt{display:flex; flex-direction:column; min-width:0}
.pt-txt b{font-size:16px; font-weight:800; color:#4A3D5C; line-height:1.25}
.pt-txt span{font-size:12px; color:#8A7C99; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ============================================================
   手机横屏：紧凑双栏（高度吃紧，砍装饰不砍点击区）
   ============================================================ */
@media (max-height:460px){
  .base{padding:calc(6px + env(safe-area-inset-top)) 14px 8px; gap:6px}
  /* 徽章让位给内容，但声音入口必须留着（否则手机上没法换嗓音）：
     压成一个浮在右上角的小圆钮 */
  .base-hd{
    display:block; position:absolute; right:12px;
    top:calc(6px + env(safe-area-inset-top)); z-index:12;
    padding:0; background:none;
  }
  .bh-logo, .badge:not(.badge-btn){display:none}
  .bh-badges{gap:0}
  .badge-btn{padding:6px 9px}
  .base-main{grid-template-columns:19% 1fr 30%; gap:10px}
  .ling-say{font-size:13px; padding:6px 10px; border-radius:13px}
  .pod{border-radius:22px; padding:10px 14px 12px}
  .pod-tag{font-size:12px; padding:3px 10px; margin-bottom:4px}
  .pod-body{gap:12px}
  .pod-art{width:30%}
  .pod-t{font-size:21px; margin-bottom:3px}
  .pod-s{font-size:13px; margin-bottom:4px}
  .pod-meta{font-size:12px; margin-bottom:8px}
  .pod-go{font-size:18px; padding:11px 18px; border-radius:16px}
  .cheer-t{font-size:21px}
  .cheer-s{font-size:13px; margin-bottom:8px}
  .cheer-next{font-size:14px; padding:7px 13px}
  .route-t{display:none}
  .stop{padding:6px 9px; gap:8px; border-radius:15px}
  .stop-art{width:36px;height:36px;border-radius:10px}
  .stop-n{font-size:13px}
  .stop-m{font-size:11px}
  /* 游戏入口压成图标条 */
  .portals{grid-template-columns:repeat(4,1fr); gap:7px}
  .portal{padding:6px 8px; gap:7px; border-radius:15px}
  .pt-art{width:28px;height:28px}
  .pt-txt b{font-size:12.5px}
  .pt-txt span{display:none}
}

/* 中等高度（小 iPad 横屏）微调 */
@media (min-height:461px) and (max-height:620px){
  .pod-t{font-size:25px}
  .pod-go{font-size:20px; padding:12px 20px}
  .cheer-t{font-size:25px}
}

/* ============================================================
   竖屏拦截罩
   ============================================================ */
.rotate-veil{display:none}
@media (orientation:portrait){
  .rotate-veil{
    display:flex; position:fixed; inset:0; z-index:9999;
    align-items:center; justify-content:center;
    background:linear-gradient(180deg,#FFF3E0,#EAF6DC);
  }
  .base{display:none}
}
.rv-inner{text-align:center; padding:30px}
.rv-ico{width:120px; height:120px; margin-bottom:14px; animation:tilt 2.2s ease-in-out infinite}
@keyframes tilt{
  0%,100%{transform:rotate(0)}
  55%    {transform:rotate(-88deg)}
  90%    {transform:rotate(-88deg)}
}
.rv-t{font-size:26px; font-weight:900; color:#4A3D5C; margin-bottom:6px}
.rv-s{font-size:17px; color:#8A7C99}