/* Moon Phases: dark space stage + white side cards (same family as the other science builders). Frame from /shared/style.css. */
.mp-head{max-width:1080px;margin:0 auto;padding:4px 16px 0}
.mp-head h1{margin:6px 0 4px;font-size:clamp(24px,6vw,34px)}
.mp-head p{margin:0 0 10px;color:#4b5563;font-size:15px}
#mp-wrap{position:relative;max-width:1080px;margin:0 auto;padding:0 8px;user-select:none;-webkit-user-select:none}
.mp-bar{display:flex;align-items:center;gap:6px;padding:0 4px 10px;flex-wrap:wrap}
.mp-bar .sp{flex:1}
.mp-bar button{height:38px;min-width:38px;padding:0 12px;border-radius:12px;border:0;background:#fff;box-shadow:0 1px 3px #0002;font:700 14px/1 system-ui,sans-serif;color:#1f2a3a;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.mp-bar button.on{background:#1f2a3a;color:#fff}
/* the real date field sits on top of its button (invisible), so a tap opens the phone's own date wheel (iOS ignores a
   picker opened from code on a hidden field) */
.mp-dwrap{position:relative;display:inline-flex}
.mp-date{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none;z-index:1}
.mp-main{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:14px;align-items:start}
#mp-stage{position:relative;border-radius:22px;background:radial-gradient(circle at 60% 46%,#1d2a4a,#0e1529 70%);box-shadow:0 6px 16px #0003;overflow:hidden}
#mp-svg{display:block;width:100%;height:auto;touch-action:none;cursor:default}
#mp-svg .grab{cursor:grab}
#mp-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#1f2a5ce6;box-shadow:0 0 0 2px #ffe08a88;color:#fff;font:800 18px system-ui,sans-serif;padding:7px 18px;border-radius:14px;pointer-events:none;white-space:nowrap;transition:opacity .3s}
#mp-banner[hidden]{display:none}
#mp-hand{position:absolute;font-size:32px;filter:drop-shadow(0 2px 2px #0007);pointer-events:none;animation:mptap 1s ease-in-out infinite;transform:translate(-4px,4px)}
@keyframes mptap{50%{transform:translate(-10px,0) scale(.92)}}
#mp-minibox{display:none}
.mp-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px 8px 12px;background:#0b1224}
.mp-strip button{border:0;background:none;color:#ffffffb0;font:700 11px/1.2 system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px 0;border-radius:10px}
.mp-strip button:hover{background:#ffffff0d}
.mp-strip button.on{color:#ffe08a}.mp-strip button.on svg{filter:drop-shadow(0 0 6px #ffe08a)}
.mp-strip svg{width:34px;height:34px}
.mp-strip .ck{color:#7ee2a8}
.mp-side{display:flex;flex-direction:column;gap:12px}
.mp-card{background:#fff;border-radius:18px;box-shadow:0 1px 4px #0002;padding:14px 16px}
.mp-skybox{position:relative;border-radius:14px;overflow:hidden;background:#0d1430}
#mp-sky{display:block;width:100%;height:auto}
.mp-skylab{position:absolute;left:10px;top:8px;color:#ffffffa0;font:700 11px system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase}
.mp-south{display:flex;align-items:center;gap:8px;margin-top:8px;font:600 13px system-ui,sans-serif;color:#4b5563;cursor:pointer}
.mp-south input{width:16px;height:16px;accent-color:#3b4a9a}
.mp-ph{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:10px}
#mp-name{font:800 26px/1.1 system-ui,sans-serif;display:block}
#mp-wax{display:block;color:#0f6b4f;font:700 14px system-ui,sans-serif}
.mp-num{text-align:right;white-space:nowrap}
#mp-lit{font:800 26px/1.1 system-ui,sans-serif;color:#3b4a9a;display:block}
#mp-age{color:#6b7280;font:600 13px system-ui,sans-serif}
#mp-desc{margin:8px 0 0;font:14px/1.45 system-ui,sans-serif;color:#374151;min-height:4.2em}
.mp-daterow{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font:600 13px system-ui,sans-serif;color:#6b7280}
.mp-daterow>*{white-space:nowrap}.mp-daterow>.mp-dwrap{flex:none}#mp-when{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mp-daterow button,.mp-ecl button{border:0;background:none;color:#3b4a9a;font:700 13px system-ui,sans-serif;cursor:pointer;padding:4px 0}
.mp-lab{font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.mp-ecl div{display:flex;justify-content:space-between;align-items:center;gap:8px;font:14px/1.35 system-ui,sans-serif;color:#374151;padding:3px 0}
.mp-ecl b{color:#1f2a3a}
.mp-finds ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mp-finds li{font:600 12.5px system-ui,sans-serif;color:#6b7280;background:#f3f4f6;border-radius:999px;padding:5px 10px}
.mp-finds li.got{background:#e7f7ee;color:#0f6b4f}
.mp-finds li.got:before{content:"✓ "}
.mp-finds .cnt{float:right;text-transform:none;letter-spacing:0;color:#0f6b4f}
.mp-pack a{display:flex;gap:12px;align-items:center;background:#fff;border-radius:16px;box-shadow:0 1px 4px #0002;padding:12px 14px;text-decoration:none;color:#1f2a3a}
.mp-pack img{flex:0 0 auto;width:56px;height:auto;border-radius:6px;box-shadow:0 1px 4px #0003}
.mp-pack .tag{display:block;font:700 12px system-ui,sans-serif;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.mp-pack b{display:block;color:#0f6b4f;font-size:15px;margin:2px 0;line-height:1.3}
.mp-pack .ln{display:block;font-size:13px;color:#4b5563;line-height:1.4}
/* desktop: left column = board, then the found list and pack card side by side; right column = sky + eclipses, so the
   two columns end close to level. Phones: the wrappers dissolve and order puts sky + eclipses back above the found list. */
.mp-left{display:flex;flex-direction:column;gap:12px;min-width:0}
.mp-under{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.mp-pack{display:flex}.mp-pack a{flex:1}
.mp-info{max-width:820px;margin:26px auto 0;padding:0 16px 30px}
.mp-info h2{font-size:22px;margin:26px 0 8px}.mp-info h3{font-size:17px;margin:18px 0 4px}
.mp-info p,.mp-info li{font-size:16px;line-height:1.6;color:#374151}
.mp-info ul{margin:0;padding-left:22px}
.mp-info li{margin:4px 0;padding-left:2px}
@media (max-width:820px){
  .mp-main{grid-template-columns:1fr}
  .mp-main{gap:12px}
  .mp-left,.mp-under,.mp-side{display:contents}
  #mp-stage{order:1}.mp-side{order:2}.mp-side>*{order:2}.mp-finds{order:3}.mp-pack{order:4}
  #mp-minibox{display:block;position:absolute;right:8px;top:8px;width:25%;max-width:150px;pointer-events:none}
  #mp-mini{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px #ffffff30}
  #mp-minibox{position:absolute}
  #mp-minidate{position:absolute;left:0;right:0;bottom:5px;text-align:center;color:#ffffffd8;font:700 9.5px/1.15 system-ui,sans-serif;white-space:nowrap;text-shadow:0 1px 2px #000}
  #mp-banner{top:auto;bottom:calc(100% - 46px)}
}
@media (max-width:480px){
  .mp-bar{gap:5px}.mp-bar button{padding:0 9px;font-size:13px;height:36px;min-width:34px}.mp-bar .t{display:none}#mp-pause{min-width:74px}
  #mp-banner{font-size:14px;padding:5px 12px;left:8px;transform:none}
  .mp-strip{padding:6px 2px 10px}.mp-strip button{font-size:9px}.mp-strip svg{width:26px;height:26px}
  #mp-name,#mp-lit{font-size:22px}
}