/* EARTH / 1-1: positions follow the user's 1672 × 941 reference. */
#earthHUD {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  color: #b9eeff;
  font-family: "Microsoft YaHei", sans-serif;
}
.cinematic-layout[data-screen="play"] #earthHUD {
  display: block;
}
.cinematic-layout[data-screen="play"] .game-left,
.cinematic-layout[data-screen="play"] .game-right,
.cinematic-layout[data-screen="play"] #bossBanner {
  display: none !important;
}
.cinematic-layout[data-screen="play"] .header {
  left: 26px;
  top: 13px;
  width: 1860px;
  height: 185px;
}
.cinematic-layout[data-screen="play"] .brand {
  width: 480px;
  height: 169px;
}
.cinematic-layout[data-screen="play"] .header-right {
  top: 1010px;
  right: 8px;
}
.cinematic-layout[data-screen="play"]
  .play-heading
  > div {
  right: 39px;
  top: 117px;
}
.cinematic-layout[data-screen="play"] #pauseBtn {
  height: 68px;
  min-width: 220px;
  font-size: 26px;
  letter-spacing: 7px;
}
.cinematic-layout[data-screen="play"] #fullscreenBtn {
  font-size: 14px;
  min-width: 70px;
}
.cinematic-layout[data-screen="play"] #playHome {
  left: 35px;
  top: 205px;
  font-size: 12px;
  opacity: 0.7;
}
.earth-brand-motto {
  position: absolute;
  left: 47px;
  top: 188px;
  width: 440px;
  font-size: 16px;
  letter-spacing: 5px;
}
.earth-slogan {
  position: absolute;
  right: 40px;
  top: 25px;
  width: 332px;
  font-size: 17px;
  text-align: right;
  letter-spacing: 5px;
}
.earth-slogan small {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 5px;
  margin-top: 8px;
}
.earth-left,
.earth-right {
  position: absolute;
  top: 235px;
  width: 382px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.earth-left {
  left: 29px;
}
.earth-right {
  right: 29px;
}
/* Edge tabs remain available when the full HUD panels are stowed. */
#earthHUD.hud-right-collapsed .sector-boss-bar { display: none !important; }
.earth-hud-toggle {
  position: absolute;
  top: 245px;
  width: 72px;
  height: 112px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  pointer-events: auto;
  cursor: pointer;
  color: #b9eeff;
  border: 1px solid #73b7d0;
  background: url("../assets/cinematic/panel.svg") center/100% 100% no-repeat,
    linear-gradient(135deg, #15405b, #03121eee 55%, #173d50);
  box-shadow: inset 0 0 12px #54c6f02b, 0 3px 12px #0009;
  border-radius: 0;
}
.earth-hud-toggle b { font: 36px/1 Bahnschrift, sans-serif; color: #ffe3a2; }
.earth-hud-toggle span { font-size: 15px; letter-spacing: 2px; }
.earth-hud-toggle:hover { color: #fff; border-color: #e8d397; filter: brightness(1.2); }
.earth-hud-toggle:active { filter: brightness(.85); }
.earth-hud-toggle:focus-visible { outline: 3px solid #ffe3a2; outline-offset: 3px; }
.earth-hud-toggle-left { left: 415px; }
.earth-hud-toggle-right { right: 415px; }
#earthHUD.hud-left-collapsed .earth-hud-toggle-left { left: 14px; }
#earthHUD.hud-right-collapsed .earth-hud-toggle-right { right: 14px; }
.earth-panel {
  position: relative;
  background: linear-gradient(130deg, #021420f2, #021924e3 55%, #021421f5);
  border: 1px solid #a4e3fa;
  border-radius: 0;
  box-shadow:
    inset 0 0 25px #08799c30,
    0 0 13px #24b7ed22;
  color: #d0f4ff;
  clip-path: polygon(
    13px 0,
    calc(100% - 13px) 0,
    100% 13px,
    100% calc(100% - 13px),
    calc(100% - 13px) 100%,
    13px 100%,
    0 calc(100% - 13px),
    0 13px
  );
  padding: 15px 23px;
}
.earth-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/cinematic/panel.svg") center/100% 100% no-repeat;
  border: none;
  pointer-events: none;
}
.earth-panel:after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #bff9ff,
    transparent 40%,
    #5bc0de 80%,
    #d2faff
  );
  pointer-events: none;
}
.earth-panel h3 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 2px;
  margin: 0;
  font-weight: 600;
  color: #b2efff;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 0 12px #1abaff55;
}
.earth-panel h3 small {
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 400;
}
.earth-score {
  height: 175px;
}
.earth-score h3 em {
  font-style: normal;
  color: #ffe59a;
  font-size: 34px;
  line-height: 0.7;
  text-shadow: 0 0 13px #ffcb3e80;
}
.earth-score > strong {
  display: block;
  text-align: center;
  font:
    italic 700 61px/1.3 "Bahnschrift",
    Consolas,
    monospace;
  letter-spacing: 2px;
  color: #6ce6ff;
  text-shadow:
    0 0 8px #33c7ffa0,
    0 0 25px #12bcff77;
}
.earth-best {
  border: 1px solid #247c9e;
  margin: 4px 0 0;
  padding: 3px 9px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
}
.earth-best b {
  font: italic 20px Consolas;
  color: #94dcf8;
}
.earth-combo {
  height: 151px;
}
.earth-combo > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
.earth-combo strong {
  font:
    italic 700 69px/1.25 Bahnschrift,
    Consolas;
  color: #ffe18b;
  text-shadow:
    0 0 6px #e0951d,
    0 0 28px #ffb51e99;
  white-space: nowrap;
}
.earth-combo > div > span {
  font-size: 16px;
  font-style: italic;
  color: #fff2b4;
  border-bottom: 2px solid #d8b25e;
  padding: 10px 0;
  text-shadow: 0 0 14px #ffb139;
}
.earth-lives {
  height: 105px;
}
.earth-lives > strong {
  display: block;
  text-align: center;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: 12px;
  color: #74dfff;
  text-shadow:
    0 0 6px #fff,
    0 0 19px #17a9ff;
}
.earth-balls {
  height: 106px;
}
.earth-balls > strong {
  display: flex;
  align-items: center;
  gap: 12px;
  font:
    700 38px Bahnschrift,
    Consolas;
  color: #6de6ff;
  margin-top: 5px;
}
.earth-balls > small {
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: #77a6ba;
  font: 15px Consolas;
}
.chrome-orb {
  display: inline-block;
  width: 27px;
  height: 27px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #a1c6dc;
  background: radial-gradient(
    circle at 31% 25%,
    #fff 0%,
    #ecfaff 9%,
    #4f90be 20%,
    #122236 42%,
    #070b10 63%,
    #d9f6ff 79%,
    #284b65 91%
  );
  box-shadow: 0 0 8px #74ceff55;
}
.earth-balls > strong .chrome-orb {
  width: 36px;
  height: 36px;
}
.earth-skill {
  height: 160px;
  pointer-events: auto;
  cursor: pointer;
  text-align: left;
  min-height: 160px;
  width: 100%;
}
.earth-skill > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
}
.earth-skill span b {
  display: block;
  font-size: 22px;
  white-space: nowrap;
}
.earth-skill span small {
  display: block;
  font-size: 13px;
  margin-top: 6px;
}
.earth-skill > small {
  position: absolute;
  bottom: 8px;
  right: 23px;
  font-size: 12px;
  color: #82b4c8;
}
.earth-skill kbd {
  font-size: 20px;
  margin-left: auto;
}
.earth-skill:disabled {
  opacity: 0.6;
  cursor: default;
}
.earth-skill:hover:not(:disabled) {
  filter: brightness(1.3);
}
.skill-reactor {
  display: grid;
  place-items: center;
  flex: 0 0 87px;
  height: 87px;
  border: 4px double #62dfff;
  border-radius: 50%;
  font: 62px Georgia;
  color: #a5edff;
  font-style: normal;
  box-shadow:
    inset 0 0 25px #0999ee,
    0 0 18px #18a9ff88;
  text-shadow: 0 0 10px white;
}
.earth-objectives {
  height: 307px;
}
.earth-objectives h3 {
  font-size: 21px;
  white-space: nowrap;
  gap: 5px;
}
.earth-objectives h3 small {
  margin-left: auto;
  font-size: 13px;
}
.earth-goals {
  margin-top: 18px;
}
.earth-goals > div {
  display: flex;
  align-items: center;
  font-size: 16px;
  gap: 10px;
  margin: 13px 0;
  white-space: nowrap;
  letter-spacing: 1px;
}
.earth-goals i {
  font-size: 25px;
  font-style: normal;
  line-height: 1;
  color: #ffeab0;
  text-shadow: 0 0 8px #d29c37;
}
.earth-goals b {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
}
.earth-goals span {
  margin-left: auto;
  color: #b9e0f3;
  font: 16px Consolas;
}
.earth-mini-scene {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  height: 105px;
  border: 1px solid #386981;
  background:
    linear-gradient(90deg, transparent, #001221e8 65%),
    url("../assets/cinematic/earth-track-scene.webp?v=track-hd-power") 9% 0/310% auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 13px;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}
.earth-mini-scene span {
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 2px;
  text-align: right;
}
.earth-progress {
  height: 303px;
}
.earth-world {
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 18px 0 12px;
}
.earth-world img {
  width: 93px;
  height: 93px;
  border-radius: 50%;
  box-shadow: 0 0 20px #0db5ff88;
  border: 1px solid #8edaff;
}
.earth-world > div {
  flex: 1;
}
.earth-world b {
  font-size: 22px;
  font-style: italic;
  white-space: nowrap;
  color: #effbff;
}
.earth-world small {
  font-size: 9px;
  letter-spacing: 3px;
  display: block;
  margin: 7px 0;
}
.earth-world label {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #296379;
  padding-top: 6px;
  font-size: 17px;
  align-items: center;
}
.earth-world strong {
  font: 25px Consolas;
  color: #effbff;
}
.earth-progress-bar {
  height: 4px;
  margin-top: 8px;
  background: #143447;
}
.earth-progress-bar i {
  display: block;
  height: 100%;
  background: #7ee6ff;
  box-shadow: 0 0 11px #34a9ff;
}
.earth-progress ol {
  padding: 0;
  margin: 10px 0;
  list-style: none;
}
.earth-progress li {
  padding: 7px 6px;
  font-size: 15px;
  letter-spacing: 1px;
  border-bottom: 1px solid #337a9644;
}
.earth-progress li span {
  float: right;
  color: #8ce5ff;
}
.earth-progress li:nth-child(2) {
  border: 1px solid #488ca8;
  background: #123f5850;
}
.earth-message {
  height: 104px;
  background:
    linear-gradient(90deg, transparent, #061526db 62%),
    url("../assets/cinematic/earth-track-scene.webp?v=track-hd-power") 91% 26%/240% auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.earth-message span {
  font-size: 16px;
  letter-spacing: 2px;
  line-height: 1.8;
  text-align: right;
}
.earth-footer {
  position: absolute;
  bottom: 30px;
  left: 46px;
  right: 190px;
  display: flex;
  align-items: center;
  gap: 36px;
  color: #a2e5fc;
  font: 12px Consolas;
  letter-spacing: 3px;
}
.earth-footer > span:first-child {
  font-size: 20px;
  letter-spacing: 5px;
}
.earth-footer small {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  margin-top: 3px;
}
.earth-footer > span:last-child {
  margin-left: auto;
  font-size: 11px;
}
.cinematic-layout[data-screen="play"] .controls {
  top: 976px;
  left: 713px;
  width: 540px;
  gap: 10px;
  opacity: 0.85;
}
.cinematic-layout[data-screen="play"]
  .controls
  .control {
  height: 44px;
  min-height: 44px;
  font-size: 14px;
  letter-spacing: 1px;
}
.cinematic-layout[data-screen="play"]
  .controls
  .control
  kbd {
  font-size: 10px;
}
.cinematic-layout[data-screen="play"] .table-footer {
  display: none;
}
.cinematic-layout[data-screen="play"] .charge-mini {
  top: 1023px;
}
.cinematic-layout[data-screen="play"] .board-status {
  left: 800px;
  top: 775px;
  width: 400px;
  text-shadow: 0 2px 7px #000;
}
.cinematic-layout[data-screen="play"]
  .board-status
  strong {
  font-size: 21px;
}
.cinematic-layout[data-screen="play"]
  .board-status
  span {
  font-size: 13px;
}

/* Shared live HUD for the twenty numbered mechanical scenes. */
.earth-goals b,.earth-progress li b{font-weight:400}
.earth-mini-scene,.earth-message{background-image:linear-gradient(90deg,#031423aa,#02131dda),var(--sector-scene)!important;background-size:cover;background-position:center}
.earth-mini-scene [data-earth="description"]{font-size:14px;line-height:1.7;max-height:100%;overflow:hidden}
.earth-world img{object-fit:cover}
.earth-message{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:6px 16px}
.earth-message span{font-size:13px;line-height:1.35;letter-spacing:1px}
.earth-message .endless-bank{flex-shrink:0;padding:5px 14px;font-size:13px}
.endless-bank{pointer-events:auto;color:#ffe3a2;padding:8px 14px;font-size:15px;border:1px solid #ac915b;background:#092537;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.endless-bank:hover{background:#21414e;box-shadow:0 0 20px #ffd47366}
.sector-boss-bar{position:absolute;left:655px;top:90px;width:610px;padding:15px 27px 17px;background:linear-gradient(90deg,#06111ac9,#131c2fed,#06111ac9);border-top:2px solid #dab770;border-bottom:1px solid #cf6566;box-shadow:0 12px 36px #0009;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px)}
.sector-boss-bar small{display:block;color:#fca28a;font-size:13px;letter-spacing:3px}.sector-boss-bar strong{font-size:26px;color:#ffecc8;display:block;margin:5px 0 10px;letter-spacing:4px}.sector-boss-bar>div{height:10px;border:1px solid #9c6c4d;background:#160f18}.sector-boss-bar i{height:100%;display:block;background:linear-gradient(90deg,#e84856,#ffb66d,#ffe0a0);box-shadow:0 0 12px #ff7149}.sector-boss-bar>span{display:block;text-align:right;font-size:12px;margin-top:7px;color:#ffcca1}.sector-boss-bar[data-state="warning"]{box-shadow:0 0 35px #ff553c88}
#earthBackdrop{position:absolute;inset:0;width:1920px;height:1080px;z-index:0;pointer-events:none}
body:not(.cinematic-layout) #earthBackdrop{display:none}
.control.launch{position:relative;isolation:isolate;overflow:hidden;--launch-power:0}
.control.launch .launch-energy{position:absolute;z-index:-1;inset:3px auto 3px 0;width:0;pointer-events:none;background:linear-gradient(90deg,#0f739988,#55e7ffb0,#e7ffffcc);opacity:0;box-shadow:inset -3px 0 12px #d4ffff,0 0 15px #58e8ff;transition:opacity .12s}
.control.launch.charging{color:#f3ffff!important;text-shadow:0 0 8px #85f0ff;box-shadow:inset 0 0 calc(8px + var(--launch-power)*18px) #63ddff99;filter:brightness(calc(1 + var(--launch-power)*.18));transform:translateY(1px)}
.control.launch.charging .launch-energy{opacity:calc(.3 + var(--launch-power)*.65)}
.control.launch #launchLabel{position:relative;z-index:1}
.control.launch.full-charge{color:#fff4c9!important;text-shadow:0 2px 3px #07121f,0 0 2px #07121f;box-shadow:inset 0 0 16px #ffd76b70;animation:launch-key-pulse .55s ease-in-out infinite alternate}
.control.launch.full-charge .launch-energy{background:linear-gradient(90deg,#80551dc9,#b88730c9,#e4bc5ab0);box-shadow:inset -3px 0 12px #fff2bc,0 0 15px #ffcc59}
@keyframes launch-key-pulse{to{box-shadow:inset 0 0 22px #ffd76b90}}
@media(prefers-reduced-motion:reduce){.control.launch.full-charge{animation:none}}