/* Moon Garden: shared mission chrome and a matching lightweight flat world. */
.hop-scene { background: linear-gradient(#172946, #575580 70%, #a4bbc4); border: 0; }
.hop-scene .scene-art { display: none; }
.hop-scene .scene-pill, .hop-mission { background: #172b46eb; color: #fff0cf; border: 1px solid #ffffff35; box-shadow: none; }
.hop-mission { position: absolute; top: 12px; right: 12px; z-index: 4; padding: 10px 15px; border-radius: 24px; font-size: clamp(12px, 1.8vw, 16px); }
.hop-start-hint { top: 23%; background: #fff1d2; color: #24354d; font-size: 16px; }
.hop-beacon { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 18px; background: #edf6f2; border: 1px solid #b6dace; flex: none; width: 100%; }
.hop-beacon[hidden] { display: none; }
.hop-beacon-copy { display: grid; gap: 3px; min-width: 0; }
.hop-beacon-title { color: #4f6966; letter-spacing: .13em; font-size: 11px; font-weight: 600; }
.hop-beacon-clue { color: #233d49; font-size: clamp(24px, 3.5vw, 34px); line-height: 1.15; }
.hop-beacon-prompt { color: #3e595c; font-size: 15px; }
.hop-beacon-choices { display: flex; gap: 10px; flex: none; }
.hop-answer { min-width: 64px; min-height: 58px; padding: 10px 16px; border: 2px solid #d0b36d; border-radius: 17px; background: #ffe4a4; color: #263a48; box-shadow: 0 4px 0 #cbb16d; font-family: inherit; font-size: 26px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.hop-answer:active { transform: translateY(3px); box-shadow: 0 1px 0 #cbb16d; }
.hop-controls .jump-button { background: #ffe4a4; color: #263a48; box-shadow: 0 5px 0 #cbb16d; }
.hop-controls .control-button { background: #e1f0ea; color: #294c50; border-color: #a8cdbf; box-shadow: 0 4px 0 #a8cdbf; }
.hop-platform { background: #b4e9d7; color: #315660; box-shadow: 0 5px 0 #719aa4, 0 13px 0 #6679a5; height: 18px; }
.hop-platform::after { content: ""; position: absolute; top: 22px; left: 4%; width: 92%; height: 32px; background: linear-gradient(140deg, #7e91b8, #49557f); clip-path: polygon(0 0, 100% 0, 81% 90%, 28% 100%, 9% 60%); }
.hop-platform.spring { background: #f2b2bf; color: #593e63; box-shadow: 0 5px 0 #95618d; }
.hop-platform.moving { background: #b4e3f6; box-shadow: 0 5px 0 #657fac; }
.hop-ground { background: linear-gradient(#9ecac4, #6c929f); border-color: #c8e3d6; }
.hop-star.numbered { background: #ffe3a0; color: #423657; border-color: #fff2c9; text-shadow: none; }
.hop-portal { position: absolute; width: 65px; height: 95px; border: 7px solid #a3dfd1; border-radius: 50%; transform: translate(-50%, -100%); background: #b6fff01a; box-shadow: 0 0 16px #b6fff050; }
.hop-portal.powered { background: #b6fff0aa; box-shadow: 0 0 32px #b6fff0; }
.hop-sky-moon { position: absolute; top: 16%; right: 17%; width: 65px; height: 65px; border-radius: 50%; background: #ded6ef; box-shadow: inset -13px -7px #b8acd5; }
.hop-sky-moon::after { content: ""; position: absolute; inset: 23px -20px; border: 5px solid #eadffc99; border-radius: 50%; transform: rotate(-25deg); }
@media (max-width: 600px) and (orientation: portrait) {
  .hop-beacon { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .hop-beacon-choices { width: 100%; }
  .hop-answer { flex: 1; min-height: 50px; }
  .hop-mission { padding: 7px 9px; top: 9px; right: 9px; }
  .hop-scene .scene-pill { padding: 7px 9px; top: 9px; left: 9px; font-size: 14px; }
}
@media (max-width: 380px) and (orientation: portrait) {
  .hop-controls { gap: 8px; padding-inline: 0; }
  .hop-controls .direction-controls { gap: 8px; }
  .hop-controls .control-button { width: 58px; min-width: 58px; }
  .hop-controls .jump-button { min-width: 0; flex: 1; padding-inline: 12px; font-size: 19px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hop-beacon { flex-direction: column; justify-content: center; width: 220px; max-width: 36%; gap: 10px; padding: 10px; }
  .hop-beacon-clue { font-size: 24px; }
  .hop-beacon-prompt { font-size: 13px; }
  .hop-beacon-choices { gap: 6px; width: 100%; }
  .hop-answer { min-width: 0; flex: 1; min-height: 46px; padding: 6px; font-size: 22px; }
  .hop-mission { font-size: 11px; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) { .hop-star { animation: none; } .hop-star.collected { transition: opacity .15s; } }