:root {
  --sky-bg: #0a0a14;
  --text-color: #eee;
  --accent: #ffcc66;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--sky-bg);
  color: var(--text-color);
  min-height: 100vh;
}

.view { width: 100%; min-height: 100vh; }
.hidden { display: none !important; }

/* Display view */
#displayView {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--sky-bg);
}

.sky {
  position: relative;
  width: 100%;
  height: 100%;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  --logo-body: #fdf6e3;
  --logo-mast: #a5b3cf; /* liked alternative: #bfe3d6 pale seafoam */
  --logo-bolts: #ffd75e;
}

.logo .logo-body {
  fill: var(--logo-body);
}

.logo .logo-mast {
  fill: var(--logo-mast);
}

.logo .logo-bolt {
  fill: var(--logo-bolts);
  filter: drop-shadow(0 0 6px var(--logo-bolts));
}

@media (prefers-reduced-motion: no-preference) {
  .logo .logo-bolt {
    animation: logo-pulse 4s ease-in-out infinite alternate;
    animation-delay: calc(var(--bolt-i) * -1.6s);
  }

  .logo.bursting .logo-bolt {
    animation: logo-burst 1.5s ease-out;
  }
}

@keyframes logo-pulse {
  from {
    opacity: 0.5;
    filter: drop-shadow(0 0 2px var(--logo-bolts));
  }
  to {
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--logo-bolts));
  }
}

@keyframes logo-burst {
  0% {
    opacity: 1;
    fill: #fff7d9;
    filter: drop-shadow(0 0 18px var(--logo-bolts));
  }
  15% {
    opacity: 0.35;
  }
  30% {
    opacity: 1;
    fill: #fff7d9;
    filter: drop-shadow(0 0 26px var(--logo-bolts));
  }
  100% {
    opacity: 1;
    fill: var(--logo-bolts);
    filter: drop-shadow(0 0 6px var(--logo-bolts));
  }
}

.logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  line-height: 1;
  transform-origin: center;
  cursor: pointer;
}

.star:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 50%;
}

.star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.note-indicator {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(222, 230, 255, 0.5);
  animation: note-ring 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes note-ring {
  0% { opacity: 0; }
  50% { opacity: 0.9; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .note-indicator { animation: none; opacity: 0.5; }
}

.star.spotlit::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: 0 0 18px 6px rgba(255, 204, 102, 0.7);
  animation: spotlight-pulse 1.2s ease-in-out 5;
}

@keyframes spotlight-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .star.spotlit::before { animation: none; opacity: 0.9; }
}

.star-popover {
  position: fixed;
  max-width: 260px;
  background: rgba(12, 14, 28, 0.92);
  border: 1px solid #3a425c;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
  z-index: 10;
  overflow-wrap: break-word;
}

.star-popover .popover-meta {
  color: #8892b0;
  font-size: 0.75rem;
}

.star-popover .popover-note + .popover-meta {
  margin-top: 0.25rem;
}

.star.arriving {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.stale-badge {
  position: fixed;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(0, 0, 0, 0.7);
  color: #ff9800;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #ff9800;
}

/* Orbit mode */
.star.orbiting {
  offset-path: circle(var(--orbit-r));
  offset-rotate: 0deg;
  animation: orbit var(--orbit-dur) linear infinite;
  animation-delay: var(--orbit-delay);
}

@keyframes orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

/* Drift mode */
.star.drifting {
  animation-duration: var(--drift-dur);
  animation-delay: var(--drift-delay);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes drift-a { to { transform: translate(42px, -28px); } }
@keyframes drift-b { to { transform: translate(-34px, 38px); } }
@keyframes drift-c { to { transform: translate(24px, 48px); } }

/* Controls overlay */
.controls-overlay {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.launch-star-link {
  padding: 0.6rem 0.9rem;
  background: var(--accent);
  border-radius: 6px;
  color: #000;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.controls-count {
  color: #888;
  text-align: center;
}

/* Submit view */
#submitView {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem 1rem;
}

.submit-form {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.kind-toggle {
  display: flex;
  gap: 0.5rem;
}

.kind-btn {
  flex: 1;
  padding: 0.75rem;
  background: transparent;
  border: 1px solid #444;
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  min-height: 44px;
}

.kind-btn.active {
  background: #222;
  border-color: var(--accent);
  color: var(--accent);
}

.shape-grid, .emoji-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.shape-option, .emoji-option {
  min-height: 44px;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-color);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shape-option svg {
  width: 28px;
  height: 28px;
}

.shape-option.selected, .emoji-option.selected {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
}

.colour-picker {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  margin-top: 0.5rem;
}

.handle-input,
.note-input {
  width: 100%;
  background: #111;
  border: 1px solid #333;
  color: var(--text-color);
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 1rem;
}

.note-input {
  min-height: 80px;
  resize: vertical;
}

.note-footer {
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  font-size: 0.8rem;
  color: #888;
}

.note-notice { flex: 1; }

.form-error {
  color: #ef5350;
  font-size: 0.9rem;
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.submit-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 1rem;
  text-align: center;
}

.thanks-star { font-size: 4rem; }

.redirect-note {
  color: #8892b0;
  font-size: 0.9rem;
}

.see-star-link {
  color: var(--accent);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.survey-form {
  width: min(100% - 2rem, 44rem);
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1rem;
  background: rgb(10 10 20 / 86%);
  color: #f7f0ff;
}

.survey-form h1 {
  margin-bottom: 0.35rem;
}

.survey-linked,
#survey-star-help {
  color: #c7cbe0;
}

.survey-form label,
.rating-group {
  display: block;
  margin: 1.1rem 0;
}

.rating-group {
  border: 0;
  padding: 0;
}

.rating-group legend {
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.survey-form input:not([type="radio"]),
.survey-form textarea {
  width: 100%;
  margin-top: 0.35rem;
  background: #111;
  border: 1px solid #333;
  color: var(--text-color);
  border-radius: 6px;
  padding: 0.75rem;
  font: inherit;
}

.survey-form textarea {
  min-height: 7rem;
  resize: vertical;
}

.rating-group label {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0 0.9rem 0.35rem 0;
  gap: 0.35rem;
}

.rating-group input {
  width: auto;
  margin: 0;
  accent-color: #5aa2ff;
}

.survey-submit {
  width: 100%;
  padding: 1rem;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
}

.survey-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.survey-error {
  margin: 1rem 0;
  color: #ffd1d1;
}

.survey-thanks {
  max-width: 32rem;
  margin: 4rem auto;
  text-align: center;
  color: #f7f0ff;
}

.star.survey-boosted {
  filter: drop-shadow(0 0 0.55rem currentColor) brightness(1.35);
}

.survey-prompt-banner,
.survey-thanks-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 30;
  max-width: min(34rem, calc(100vw - 8rem));
  padding: 0.75rem 1rem;
  border: 1px solid rgb(255 204 102 / 55%);
  border-radius: 999px;
  background: rgb(10 10 20 / 92%);
  color: #f7f0ff;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 35%);
}

.survey-prompt-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.survey-prompt-banner a {
  color: #000;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.survey-prompt-dismiss {
  min-width: 2rem;
  min-height: 2rem;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  background: transparent;
  color: #f7f0ff;
  cursor: pointer;
}

@media (max-width: 720px) {
  .survey-prompt-banner,
  .survey-thanks-banner {
    left: 1rem;
    right: 1rem;
    bottom: 5.5rem;
    transform: none;
    max-width: none;
    border-radius: 1rem;
  }
}

.star-id-banner {
  position: fixed;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  z-index: 30;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgb(255 204 102 / 55%);
  border-radius: 999px;
  background: rgb(10 10 20 / 92%);
  color: #ffe4a3;
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 35%);
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 720px) {
  .star-id-banner {
    left: 1rem;
    right: 1rem;
    top: 1rem;
    transform: none;
    text-align: center;
  }
}