/* Pebble's way home. Scoped to the rover; Mars City shares no selectors here. */
.mars-rover-expedition .pebble-mode {
  position: fixed; z-index: 44; top: 18px; left: 132px;
  min-height: 60px; padding: 10px 18px; border-radius: 16px;
  background: #fff8e8; border: 1px solid #e9d3ae; color: #61452c;
  font: 800 14px/1.2 system-ui, sans-serif; cursor: pointer;
}
.mars-rover-expedition.science-route .mars-rover-hud { top: 90px; }
.mars-rover-expedition.pebble-route .mars-rover-hud,
.mars-rover-expedition.pebble-route .mars-rover-guide,
.mars-rover-expedition.pebble-route .mars-rover-panel,
.mars-rover-expedition.pebble-route .mars-rover-compass,
.mars-rover-expedition.pebble-route .mars-rover-wind-cues { display: none; }
.mars-rover-expedition.pebble-route .mars-rover-back {
  color: #604730; background: #fff8e8; border-color: #e9d3ae; border-radius: 16px;
}
.pebble-journal {
  position: absolute; z-index: 7; top: 94px; left: 20px;
  width: min(340px, 30vw); padding: 20px 22px;
  background: linear-gradient(145deg, #fff9e9f2, #f7ecd8e8);
  color: #684832; border: 1px solid #fff5d8c7; border-radius: 22px;
  box-shadow: 0 12px 36px #432c2b24; backdrop-filter: blur(9px);
  pointer-events: none; font-family: system-ui, sans-serif;
}
.pebble-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pebble-eyebrow > span { font-size: 9px; font-weight: 800; letter-spacing: 1.4px; color: #aa7649; }
.pebble-eyebrow b { white-space: nowrap; font-size: 11px; color: #796046; }
.pebble-journal h1 { margin: 10px 0 15px; font: 500 clamp(24px, 2.7vw, 36px)/1.03 Georgia, serif; letter-spacing: -1px; color: #623f2c; }
.pebble-journal h2 { margin: 0 0 8px; font: 800 14px/1.25 system-ui, sans-serif; color: #996039; }
.pebble-journal p { margin: 0; font-size: 13px; line-height: 1.55; color: #766045; }
.pebble-journey { display: flex; flex-direction: column; gap: 8px; margin-top: 17px; padding-top: 14px; border-top: 1px solid #deceb1; }
.pebble-journey span { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #ad9a7e; font-weight: 650; }
.pebble-journey i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; border: 1px solid #d3c7b1; font-style: normal; font-size: 10px; }
.pebble-journey .current { color: #91603a; }
.pebble-journey .current i { background: #f2cd8f; border-color: #d6a45e; color: #6a431e; }
.pebble-journey .done { color: #507658; }
.pebble-journey .done i { background: #d0e7be; border-color: #8bae80; }
.pebble-navigation { position: absolute; top: 105px; right: 22px; z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px; border-radius: 18px; background: #fff4dceb; color: #61472f; border: 1px solid #fff1ce; font-family: system-ui, sans-serif; pointer-events: none; }
.pebble-navigation strong { font-size: 24px; letter-spacing: -0.5px; }
.pebble-navigation span { font-size: 10px; max-width: 100px; text-align: center; color: #8a6f4d; }
.pebble-drive-dock { position: absolute; z-index: 8; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 11px; width: min(630px, calc(100vw - 36px)); padding: 17px 19px 18px; border-radius: 23px; background: linear-gradient(145deg, #fff9eaf5, #f4e7cef5); border: 1px solid #fff5de; box-shadow: 0 15px 40px #291a2826; font-family: system-ui, sans-serif; }
.pebble-drive-copy { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #684a31; }
.pebble-drive-copy strong { font-size: 13px; line-height: 1.3; }
.pebble-drive-copy span { max-width: 145px; text-align: right; color: #9a8265; font-size: 10px; line-height: 1.35; }
.pebble-drive-controls { display: grid; grid-template-columns: 1fr 1.35fr 1fr 1.4fr; gap: 9px; }
.pebble-drive-controls button, .pebble-action { min-width: 58px; min-height: 58px; border: 1px solid #d9c6a4; border-radius: 14px; padding: 10px 8px; color: #6d5135; background: #fffaf0; font: 800 15px/1.15 system-ui, sans-serif; cursor: pointer; touch-action: none; box-shadow: 0 3px 0 #c7b697; }
.pebble-drive-controls button:active { transform: translateY(2px); box-shadow: 0 1px 0 #c7b697; }
.pebble-drive-controls .pebble-drive-forward { background: #f2c777; border-color: #d29a49; color: #694418; }
.pebble-drive-controls [data-pebble-guide] { color: #436958; background: #e0ecd9; border-color: #bdd2b6; font-size: 13px; }
.pebble-drive-controls [data-pebble-guide][aria-pressed="true"] { color: #fff8e8; background: #557b64; border-color: #557b64; }
.pebble-action { min-height: 51px; background: #8d5837; border-color: #8d5837; color: #fff2cf; box-shadow: 0 3px 0 #65402a; touch-action: manipulation; }
.pebble-action:disabled { background: #e7dfcf; color: #ad9f87; border-color: #d2c7b2; box-shadow: none; cursor: default; }
.pebble-drive-controls button:disabled { opacity: 0.45; cursor: default; }
.pebble-escort-progress { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 38px; }
.pebble-escort-progress > span { width: 28px; height: 6px; border-radius: 10px; background: #d7cbb5; }
.pebble-escort-progress > span.passed { background: #83b288; }
.pebble-escort-progress strong { margin-left: 5px; font-size: 11px; color: #847251; }
.mars-rover-expedition .pebble-mode:focus-visible,
.pebble-drive-dock button:focus-visible { outline: 3px solid #8b6434; outline-offset: 3px; }
@media (max-width: 760px) {
  .mars-rover-expedition .pebble-mode { top: max(12px, env(safe-area-inset-top)); left: 106px; min-height: 58px; max-width: 126px; padding: 9px 12px; font-size: 12px; border-radius: 14px; }
  .mars-rover-expedition.pebble-route .mars-rover-back { top: max(12px, env(safe-area-inset-top)); left: 12px; min-height: 58px; padding: 0 13px; }
  .pebble-journal { top: 82px; left: 12px; right: 12px; width: auto; padding: 13px 15px 12px; border-radius: 18px; }
  .pebble-journal h1 { font-size: 25px; margin: 7px 0 8px; letter-spacing: -0.6px; }
  .pebble-journal h2 { font-size: 12px; margin-bottom: 6px; }
  .pebble-journal p { font-size: 11px; line-height: 1.45; max-width: 43ch; }
  .pebble-eyebrow > span { font-size: 8px; letter-spacing: 1px; }
  .pebble-journey { display: none; }
  .pebble-navigation { top: 257px; right: 12px; padding: 10px 12px; border-radius: 14px; background: #fff3d6d9; }
  .pebble-navigation strong { font-size: 18px; }
  .pebble-navigation span { max-width: 87px; font-size: 9px; }
  .pebble-drive-dock { bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); gap: 10px; padding: 13px 12px 14px; border-radius: 19px; }
  .pebble-drive-copy { gap: 10px; }
  .pebble-drive-copy strong { font-size: 11px; max-width: 230px; }
  .pebble-drive-copy span { display: none; }
  .pebble-drive-controls { gap: 6px; grid-template-columns: 1fr 1.15fr 1fr 1.2fr; }
  .pebble-drive-controls button { padding: 8px 4px; font-size: 13px; min-height: 58px; }
  .pebble-drive-controls [data-pebble-guide] { font-size: 11px; }
  .pebble-action { min-height: 51px; font-size: 14px; }
  .pebble-escort-progress { flex-wrap: wrap; gap: 6px; min-height: 38px; }
  .pebble-escort-progress strong { font-size: 10px; }
}
@media (max-height: 560px) and (min-width: 761px) {
  .pebble-journal { top: 90px; width: 270px; padding: 15px; }
  .pebble-journal h1 { font-size: 26px; margin-bottom: 10px; }
  .pebble-journal p { font-size: 11px; }
  .pebble-journey { display: none; }
  .pebble-drive-dock { left: auto; right: 15px; transform: none; width: 460px; bottom: 10px; padding: 12px; gap: 8px; }
  .pebble-drive-copy span { display: none; }
}

/* Great Dust Storm + Ares Gate headline (2026-09-25). */
.mars-great-storm-banner {
  position: absolute;
  top: 104px;
  left: 50%;
  z-index: 40;
  width: min(520px, calc(100vw - 32px));
  transform: translateX(-50%);
  display: grid;
  gap: 4px;
  padding: 14px 20px 15px;
  border: 1px solid rgba(160, 82, 45, 0.28);
  border-radius: 20px;
  background: rgba(255, 247, 236, 0.96);
  box-shadow: 0 14px 36px rgba(70, 28, 12, 0.24);
  color: #5b2c17;
  text-align: center;
  pointer-events: none;
  animation: mars-storm-banner-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.mars-great-storm-banner strong {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #9c3417;
}
.mars-great-storm-banner span {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
}
.mars-great-storm-chip {
  position: absolute;
  top: 92px;
  right: 20px;
  z-index: 38;
  padding: 8px 14px;
  border-radius: 999px;
  background: #9c3417;
  color: #fff4e8;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(80, 24, 8, 0.3);
  pointer-events: none;
}
@keyframes mars-storm-banner-in {
  from { opacity: 0; transform: translate(-50%, -10px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 600px) {
  .mars-great-storm-banner { top: 84px; padding: 11px 14px; }
  .mars-great-storm-banner strong { font-size: 18px; }
  .mars-great-storm-banner span { font-size: 13px; }
  .mars-great-storm-chip { top: auto; bottom: 214px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mars-great-storm-banner { animation: none; }
}