.stargazing-panel {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 8;
  display: grid;
  gap: 8px;
  width: min(370px, calc(100vw - 32px));
  max-height: min(230px, calc(100dvh - 92px));
  overflow: auto;
  padding: 11px 13px 10px;
  border: 1px solid rgba(212, 193, 143, .36);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(25, 35, 32, .96), rgba(17, 23, 22, .96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .36);
  color: var(--ink);
  pointer-events: auto;
  backdrop-filter: blur(10px);
}

.stargazing-panel[hidden] { display: none; }
.stargazing-panel-header,
.stargazing-panel-actions,
.stargazing-progress-row,
.stargazing-journal-summary,
.stargazing-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.stargazing-panel-header { color: #d9c894; font-size: 10px; }
.stargazing-panel-kicker { display: inline-flex; align-items: center; gap: 7px; }
.stargazing-sigil {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(217, 200, 148, .48);
  border-radius: 50%;
  color: #e5d49d;
  font-size: 13px;
  line-height: 1;
}
.stargazing-panel-tally { color: #b8c7af; font-variant-numeric: tabular-nums; }
.stargazing-panel-copy { min-width: 0; }
.stargazing-panel-copy h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; }
.stargazing-panel-copy p { margin: 3px 0 0; color: #d4d7cd; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.stargazing-panel-copy #stargazing-note { max-height: 4.6em; overflow: auto; }
.stargazing-progress-row { gap: 10px; }
.stargazing-progress-track {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(241, 238, 222, .16);
}
.stargazing-progress-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8fbf9a, #dfcb88);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s linear;
}
.stargazing-progress-time { min-width: 66px; color: #b7c3b1; font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.stargazing-panel-status { color: #b9c7b4; font-size: 10px; line-height: 1.4; }
.stargazing-next-name { min-width: 0; flex: 1; color: #d9c894; font-size: 11px; overflow-wrap: anywhere; }
.stargazing-panel-actions button { min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: 11px; pointer-events: auto; }
.stargazing-next { border-color: rgba(217, 200, 148, .36); background: rgba(217, 200, 148, .12); color: #eee3c0; }
.stargazing-close { border-color: rgba(143, 191, 154, .28); color: #d8e4d4; }
.stargazing-panel kbd { margin-left: 4px; }
.stargazing-panel button:focus-visible,
.stargazing-guide:focus-visible,
.stargazing-journal summary:focus-visible { outline: 2px solid #d9c894; outline-offset: 2px; }

.stargazing-journal {
  margin: 10px 0 4px;
  border-top: 1px solid var(--line);
}
.stargazing-journal-summary {
  min-height: 44px;
  padding: 10px 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.stargazing-journal-summary small { color: #d9c894; font-size: 11px; font-variant-numeric: tabular-nums; }
.stargazing-journal-body { display: grid; gap: 8px; padding: 0 0 11px; }
.stargazing-journal-intro { color: var(--muted); font-size: 11px; line-height: 1.55; }
.stargazing-entries { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stargazing-entry { padding: 8px 9px; border: 1px solid rgba(212, 193, 143, .16); border-radius: 9px; background: rgba(217, 200, 148, .035); }
.stargazing-entry.is-collected { border-color: rgba(143, 191, 154, .25); background: rgba(143, 191, 154, .055); }
.stargazing-entry-heading { font-size: 11px; }
.stargazing-entry-heading small { color: var(--muted); font-size: 10px; }
.stargazing-entry-note { margin: 5px 0 0; color: #d8dfd2; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.stargazing-guide { width: 100%; min-height: 44px; border-color: rgba(143, 191, 154, .24); background: rgba(143, 191, 154, .08); color: #d9e6d5; font-size: 11px; }

body.stargazing-active .care-dock,
body.stargazing-active .living-station,
body.stargazing-active .living-theatre,
body.stargazing-active .living-treats,
body.stargazing-active .living-treat-offer,
body.stargazing-active .orchard-companion,
body.stargazing-active .voice-bubble,
body.stargazing-active #cycle-card,
body.stargazing-active #guide-chip,
body.stargazing-active .incident-nearby,
body.stargazing-active .toast { visibility: hidden; }
body.menu-open .stargazing-panel { display: none; }

@media (max-width: 600px) {
  .stargazing-panel {
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-width: none;
    max-height: min(230px, calc(100dvh - 78px));
    padding: 10px 11px 9px;
  }
  .stargazing-panel-copy h2 { font-size: 15px; }
  .stargazing-panel-actions button { min-height: 44px; }
  body.stargazing-active .camera-toggle { bottom: 230px; }
  body.stargazing-active .movement-hint { bottom: 205px; }
}

@media (max-width: 360px) {
  .stargazing-panel { gap: 6px; }
  .stargazing-panel-actions { gap: 6px; }
  .stargazing-panel-actions button { min-width: 42px; padding: 0 7px; font-size: 10px; }
  .stargazing-progress-time { min-width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .stargazing-progress-track span { transition: none; }
}