#screen-title.cover {
  --safe-top: env(safe-area-inset-top, 0px);
  --cone-top: 34%;
  background: #1B1630;
  overflow: hidden;
  color: #FFF3D8;
}

.cover-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #2A1C5E 0%, #3B2469 30%, #5E3068 50%,
    #A24E56 68%, #E88F3F 84%, #FFC96B 100%);
}

.cover-stars { position: absolute; inset: 0; overflow: hidden; }
.cover-stars .cs {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: 50% 40%;
}
.cs-a { animation: starBreath 20s ease-in-out infinite alternate; }

@keyframes starBreath {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

.cover-bigstars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.big-star {
  position: absolute;
  height: auto;
  transform-origin: 50% 50%;
  animation: starBreathe var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform, opacity;
}

@keyframes starBreathe {
  0%, 100% { transform: scale(.9);  opacity: .68; }
  50%      { transform: scale(1.16); opacity: 1; }
}

.cover-twinkles { position: absolute; inset: 0; pointer-events: none; }
.cover-twinkles i {
  position: absolute; display: block;
  animation: twinkleDrift var(--drift-dur, 2s) ease-in-out var(--drift-delay, 0s) infinite alternate;
  will-change: transform;
}
.cover-twinkles b {
  display: block;
  width: var(--size, 4px); height: var(--size, 4px);
  border-radius: 50%;
  background: #FFF5C4;
  box-shadow: 0 0 7px rgba(255, 240, 170, .9);
  opacity: .4;
  animation: twinkleBlink var(--blink-dur, 3.2s) ease-in-out var(--blink-delay, 0s) infinite;
  will-change: transform, opacity;
}
.cover-twinkles i:nth-child(1) { left: 12%; top: 16%; --drift: clamp(11px, 2.8vw, 12px); --drift-dur: 1.9s; --drift-delay: -.3s; --blink-dur: 3.2s; --blink-delay: -.9s; }
.cover-twinkles i:nth-child(2) { left: 84%; top: 12%; --drift: clamp(10px, 4.1vw, 16px); --drift-dur: 2.4s; --drift-delay: -1.2s; --blink-dur: 3.6s; --blink-delay: -1.7s; }
.cover-twinkles i:nth-child(3) { left: 26%; top: 34%; --drift: clamp(13px, 3.6vw, 15px); --drift-dur: 1.7s; --drift-delay: -2.1s; --blink-dur: 3s; --blink-delay: -2.4s; }
.cover-twinkles i:nth-child(4) { left: 72%; top: 29%; --drift: clamp(11px, 3.6vw, 14px); --drift-dur: 2.2s; --drift-delay: -.6s; --blink-dur: 4s; --blink-delay: -.5s; --size: 3px; }
.cover-twinkles i:nth-child(5) { left: 8%; top: 48%; --drift: clamp(13px, 3.4vw, 15px); --drift-dur: 1.6s; --drift-delay: -1.5s; --blink-dur: 3.4s; --blink-delay: -1.1s; --size: 3px; }
.cover-twinkles i:nth-child(6) { left: 91%; top: 55%; --drift: clamp(10px, 4.2vw, 16px); --drift-dur: 2s; --drift-delay: -2.6s; --blink-dur: 2.6s; --blink-delay: -2.9s; }
.cover-twinkles i:nth-child(7) { left: 18%; top: 72%; --drift: clamp(11px, 3.2vw, 13px); --drift-dur: 1.8s; --drift-delay: -.9s; --blink-dur: 3.8s; --blink-delay: -1.9s; --size: 3px; }
.cover-twinkles i:nth-child(8) { left: 79%; top: 78%; --drift: clamp(11px, 2.9vw, 12px); --drift-dur: 2.3s; --drift-delay: -2.3s; --blink-dur: 3.1s; --blink-delay: -3.4s; }

@keyframes twinkleDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-1 * var(--drift, 10px))); }
}
@keyframes twinkleBlink {
  0%, 100% { opacity: .22; transform: scale(.75); }
  50%      { opacity: 1;   transform: scale(1.35); }
}

.cover-title-wrap {
  position: absolute; left: 50%;
  top: calc(var(--safe-top) - 2px);
  width: 80%;
  transform: translateX(-50%);
  transform-origin: top center;
  z-index: 5;
}
.cover-title { display: block; width: 100%; }

.cover-sweep {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-mask: url("./assets/game/cover/cover-title.webp") center / 100% 100% no-repeat;
  mask: url("./assets/game/cover/cover-title.webp") center / 100% 100% no-repeat;
  animation: titleSweep 6s ease-in-out infinite;
}

@keyframes titleSweep {
  0%        { background-position: 150% 0; }
  18%, 100% { background-position: -60% 0; }
}

.cover-ship {
  position: absolute; left: 50%;
  top: 21%;
  width: 72%;
  margin-left: -36%;
  z-index: 4;
}
.ship-bob {
  position: relative;
  z-index: 2;
  animation: shipFloat 5.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes shipFloat {
  0%, 100% { transform: translateY(1px); }
  50%      { transform: translateY(-20px); }
}

.rig-glow, .rig-pilot, .rig-beam, .rig-body { display: block; }

.rig-glow {
  position: absolute; left: 0; top: 0;
  width: 100%;
  z-index: 0;
  opacity: .85;
}

.rig-beam {
  position: absolute; left: 50%; top: 83.7%;
  width: 130%;
  height: var(--beam-h, 300px);
  transform: translateX(-50%) scaleX(1);
  transform-origin: 50% 50%;
  object-fit: fill;
  z-index: 1;
  opacity: 1;
  transition: transform 180ms cubic-bezier(.4, 0, .6, 1) 60ms, opacity 140ms ease-out;
}

.rig-pilot {
  position: absolute; z-index: 2;
  left: 23%; top: 39.4%;
  width: 56.6%;
  display: block;
  transform-origin: 50% 88%;
  animation: pilotIdle 5s ease-in-out infinite;
  will-change: transform;
}
.rig-pilot img { display: block; width: 100%; }

@keyframes pilotIdle {
  0%, 100% { transform: rotate(-2.6deg) translate(-2px, 1px) scaleY(1.02); }
  25%      { transform: rotate(2.6deg) translate(2px, -2px) scaleY(.97); }
  50%      { transform: rotate(-1.2deg) translate(-1px, 3px) scaleY(1.06); }
  75%      { transform: rotate(1.2deg) translate(1px, -3px) scaleY(.96); }
}

.rig-body { position: relative; z-index: 3; width: 100%; }

.cover-cone {
  position: absolute; left: 50%; top: var(--cone-top, 34%);
  bottom: 0;
  width: 96%;
  transform: translateX(-50%);
  clip-path: polygon(26.5% 0, 73.5% 0, 97% 100%, 3% 100%);
  background: linear-gradient(180deg,
    rgba(255, 232, 170, .10) 0%,
    rgba(255, 208, 130, .15) 55%,
    rgba(255, 176, 86, .20) 100%);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 10%, #000 100%),
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 10%, #000 100%),
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
  z-index: 6;
}

.cover-menu {
  position: absolute; left: 50%;
  /* 顶部锚定：可用区顶边 = 飞船可见底 + 8px（由 cover.js 写入 --cover-menu-top，随船体实测高度走）。
     原来的 bottom 锚定会让菜单随内容高度向上/向下长，开发环境多出的测试入口与部署时间
     把菜单顶边顶高了 73px；改成顶部锚定后高度只由自身内容决定，底部元素不再影响菜单位置。 */
  top: calc(var(--cover-menu-top, 34%) + var(--cover-menu-shift, 0px));
  bottom: auto;
  /* 宽度上限按光柱内两条蓝斜条的净宽取：390×844 实测 149px、320×568 实测 112px，
     32vw 在两档分别是 125 / 102px，留出余量，菜单矩形与蓝条零相交 */
  width: min(136px, 32vw);
  /* 可用高度 = 视口 − 菜单顶 − 底部安全余量；超出从顶部向下滚动。
     保留 96px 兜底：万一 --cover-menu-top 异常变大（宽屏回归的老问题），菜单也不会被钳成 0 高 */
  max-height: max(96px, calc(100% - var(--cover-menu-top, 34%) - var(--cover-menu-shift, 0px) - 10px - env(safe-area-inset-bottom, 0px)));
  /* 整块在可用区内纵向居中：--cover-menu-shift 由 cover.js 按「(可用高 − 内容高) / 2」写入；
     内容高 ≥ 可用高时（320 窄档）shift 归零，退回顶部对齐 + 从顶部滚动。
     项间距 12px（已定稿）：390 档上下留白 40.44 / 41 更均衡，320 档靠滚动消化 */
  display: flex; flex-direction: column; gap: var(--cover-menu-gap, 12px);
  transform: translateX(-50%);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  z-index: 8;
}
.cover-menu::-webkit-scrollbar { display: none; }

.cover-item {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border: 0; border-radius: 12px;
  background: url("./assets/game/ui/menu-item-bg.webp") center / 100% 100% no-repeat;
  color: #5A2A0F;
  font: 700 15px/1.2 "PingFang SC", -apple-system, "Helvetica Neue", sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: filter .16s ease, transform .12s ease;
}
.cover-item:active { filter: brightness(.94); transform: scale(.985); }
.cover-item[hidden] { display: none; }

.cover-item.primary {
  min-height: 44px;
  font-size: 17px;
  color: #A93308;
  background: url("./assets/game/ui/menu-item-bg.webp") center / 100% 100% no-repeat;
  box-shadow: 0 8px 20px rgba(255, 140, 40, .28);
}
.cover-item.primary:active { filter: brightness(.94); }

.cover-item.minor {
  /* 字更小、底更弱，但点击区仍不低于 44px（测试入口也是可点项） */
  min-height: 44px;
  font-size: 13px;
  background: transparent;
  color: rgba(74, 38, 12, .72);      /* 光柱上的弱化文字：深棕，保证在黄色光柱上仍可读 */
}

.cover-item .ci-value { margin-left: auto; font-size: 13px; font-weight: 400; color: rgba(90, 42, 15, .68); }

/* 开发角标：测试入口 + 最后部署时间。
   绝对定位在右下角、脱离布局流，宽度按内容取，永远不参与 .cover-menu 的高度计算。
   390 档占 x290–378 / 320 档占 x229–312，与菜单（右缘 257.4 / 211.2）保持水平间隙、零相交。 */
.cover-devbar {
  position: absolute;
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  width: max-content; max-width: 30vw;
  z-index: 8;
  pointer-events: none;          /* 覆盖层本身不拦截点击，只有按钮可点 */
}
.cover-devbar[hidden] { display: none; }
.cover-devbar .cover-item.minor { width: 84px; pointer-events: auto; }

.cover-deploy {
  padding: 2px 0 2px;
  text-align: right;
  white-space: nowrap;           /* 文案已简化为「11-10 12:09」，320 档也不换行 */
  font-size: 11px;
  line-height: 1.4;
  color: rgba(74, 38, 12, .42);
  letter-spacing: .02em;
  pointer-events: none;
}

.cover-langs {
  display: flex; gap: 6px;
  padding: 0 4px;
}
.lang-chip {
  flex: 1;
  min-height: 44px;                   /* 与菜单项同一触摸下限 */
  border: 0; border-radius: 12px;
  background: rgba(34, 22, 62, .55);
  color: rgba(255, 243, 216, .72);
  font: 500 13px/1 "PingFang SC", -apple-system, sans-serif;
}
.lang-chip.active { background: #FFC55A; color: #3A1F12; font-weight: 600; }
.lang-chip:disabled { opacity: .34; }

.cover-recall {
  position: absolute; inset: 0;
  z-index: 9;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--safe-top) + 12px) 16px calc(16px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 20% 16%, rgba(255, 236, 170, .16), transparent 44%),
    radial-gradient(circle at 84% 78%, rgba(255, 190, 110, .18), transparent 46%),
    linear-gradient(180deg, #2A1C5E 0%, #4A2A68 52%, #B85A54 100%);
  color: #FFF3D8;
}
.cover-recall[hidden] { display: none; }

.cover-back {
  top: calc(var(--safe-top) + 12px);
  left: calc(12px + env(safe-area-inset-left, 0px));
  z-index: 10;
}

.recall-head {
  margin-top: 68px;
  font: 700 22px/1.2 "PingFang SC", -apple-system, "Helvetica Neue", sans-serif;
  color: #FFE6A8;
  text-shadow: 0 3px 10px rgba(40, 15, 5, .35);
}
.recall-tip {
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(255, 243, 216, .66);
}
.recall-list {
  width: min(190px, 44vw);
  margin-top: clamp(40px, 16vh, 140px);
  display: flex; flex-direction: column; gap: 10px;
}

.cover-circle {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(74, 42, 24, .62);
  color: #FFF2DC;
  box-shadow: 0 4px 14px rgba(60, 34, 20, .2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background .16s ease, color .2s ease, transform .12s ease;
}
.cover-circle:active { transform: scale(.92); background: rgba(74, 42, 24, .82); }
/* 作者样式 display:grid 会盖掉 UA 的 [hidden]，必须显式关掉，未到剧情才真正不占位、不拦截点击 */
.cover-circle[hidden] { display: none; }
.cover-circle svg { display: block; }

.cover-sound {
  top: calc(var(--safe-top) + 12px);
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 7;
}

.cover-survey {
  left: calc(12px + env(safe-area-inset-left, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 7;
}
.cover-survey.done::after {
  content: "✓";
  position: absolute; top: -2px; right: -2px;
  display: grid; place-items: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #FFD873;
  color: #4A2A18;
  font: 700 10px/1 "PingFang SC", -apple-system, sans-serif;
}

.cover-sound .cs-wave { transition: opacity .22s ease, transform .22s ease; }
.cover-sound .cs-wave2 { animation: soundWave 2.4s ease-in-out infinite; }
.cover-sound .cs-slash { opacity: 0; transform: scale(.86); transition: opacity .22s ease, transform .22s ease; }

.cover-sound.off { color: #C9BEE0; }
.cover-sound.off .cs-wave { opacity: 0; transform: scale(.9); animation: none; }
.cover-sound.off .cs-slash { opacity: 1; transform: scale(1); }

@keyframes soundWave {
  0%, 100% { opacity: .62; }
  50%      { opacity: 1; }
}

.cover-about-panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(18, 12, 34, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 9;
}
.about-card {
  width: 100%; max-width: 320px;
  padding: 22px 20px 16px;
  border-radius: 22px;
  background: rgba(44, 30, 76, .96);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column; gap: 10px;
}
.about-title { font-size: 17px; font-weight: 600; color: #FFD98A; }
.about-text { margin: 0; font-size: 13px; line-height: 1.7; color: #FFF3D8; }
.about-text.dim { color: rgba(255, 243, 216, .55); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .cs-a, .big-star, .cover-twinkles i, .cover-twinkles b, .cover-sweep, .ship-bob, .rig-pilot, .cover-sound .cs-wave2 { animation: none; }
  .cover-sweep { opacity: 0; }
}