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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  position: relative;
  background: radial-gradient(circle at 50% 15%, #fff3e0 0%, #ffe0ec 45%, #dff2ff 100%);
  transition: background 0.8s ease;
}

.hidden {
  display: none !important;
}

#fx {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
}

#hint {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(15, 12, 24, 0.55);
  color: #fff;
  font-size: 14px;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#hint.hidden {
  opacity: 0;
  display: block !important; /* keep transition working, avoid the display:none jump-cut */
}

#badge {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}

#hud-label, #hud-pill {
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

#homeBtn {
  padding: 6px 10px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 12, 24, 0.55);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

#homeBtn:hover {
  background: rgba(15, 12, 24, 0.7);
}

#hud-label {
  background: rgba(15, 12, 24, 0.55);
}

#hud-pill {
  background: linear-gradient(90deg, var(--pill-from, #ffd97a), var(--pill-to, #7ad0ff));
  transition: background 0.4s ease;
}

#parentPanel {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 5;
  width: 320px;
  padding: 16px;
  border-radius: 12px;
  background: rgba(10, 12, 24, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 14px;
}

.panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.panel-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.panel-footnote {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.7;
}

/* Confeti (default) — matches the homescreen's bright palette */
body.theme-confetti { background: radial-gradient(circle at 50% 15%, #fff3e0 0%, #ffe0ec 45%, #dff2ff 100%); }
body.theme-confetti .pop:not(.emoji) {
  color: #2b1f3d;
  font-weight: 800;
  text-shadow: 0 0 18px rgba(255, 111, 145, 0.4);
}

/* Burbujas — lighter, same blue family */
body.theme-bubbles { background: linear-gradient(180deg, #e0f4ff, #bfe6fb); }
body.theme-bubbles .pop:not(.emoji) {
  color: #2f8fd1;
  -webkit-text-stroke: 3px #ffffff;
  font-family: "Arial Rounded MT Bold", Verdana, sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(47, 143, 209, 0.45);
}

/* Espacio */
body.theme-space { background: linear-gradient(180deg, #1a0f33, #0a0618); }
body.theme-space .pop:not(.emoji) {
  color: #f1e9ff;
  -webkit-text-stroke: 2px #7a5fc0;
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 5px;
  text-shadow: 0 0 18px rgba(122, 95, 192, 0.7);
}

/* Bajo el mar */
body.theme-underwater { background: radial-gradient(circle at 50% 30%, #0e3f4a, #052026); }
body.theme-underwater .pop:not(.emoji) {
  color: #eafffa;
  -webkit-text-stroke: 3px #2a8f9e;
  font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -1px;
  text-shadow: 0 0 18px rgba(42, 143, 158, 0.7);
}

/* Primavera — lighter, same pink family */
body.theme-spring { background: linear-gradient(180deg, #ffe0ef, #ffc7e2); }
body.theme-spring .pop:not(.emoji) {
  color: #ff2f88;
  -webkit-text-stroke: 3px #fff2f9;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(255, 47, 136, 0.7);
}

/* Verano — lighter, same green family */
body.theme-summer { background: linear-gradient(180deg, #e6ffdb, #c9f7ad); }
body.theme-summer .pop:not(.emoji) {
  color: #2fae1f;
  -webkit-text-stroke: 3px #ffffff;
  font-family: "Arial Black", "Helvetica Neue", sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(47, 174, 31, 0.45);
}

/* Otoño — lighter, same warm brown/orange family */
body.theme-autumn { background: linear-gradient(180deg, #fbe8d2, #f3cf9e); }
body.theme-autumn .pop:not(.emoji) {
  color: #e8a33d;
  -webkit-text-stroke: 3px #6b2f10;
  font-family: Cambria, Georgia, serif;
  font-weight: 700;
  font-variant: small-caps;
  text-shadow: 0 0 18px rgba(107, 47, 16, 0.7);
}

/* Invierno */
body.theme-winter { background: linear-gradient(180deg, #1b2f42, #0b1826); }
body.theme-winter .pop:not(.emoji) {
  color: #eaf6ff;
  -webkit-text-stroke: 1px #4a8fc0;
  font-family: "Helvetica Neue", "Segoe UI", sans-serif;
  font-weight: 300;
  letter-spacing: 7px;
  text-shadow: 0 0 18px rgba(74, 143, 192, 0.7);
}

@keyframes pop-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.3) rotate(-6deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85) rotate(3deg); }
}

.pop {
  position: absolute;
  left: var(--pop-x);
  top: var(--pop-y);
  font-size: calc(14vmin * var(--pop-scale));
  animation: pop-in 1.1s ease-out forwards;
  white-space: nowrap;
  pointer-events: none;
}

.pop.emoji {
  font-size: calc(16vmin * var(--pop-scale));
  font-style: normal !important;
  font-variant: normal !important;
  letter-spacing: normal !important;
  -webkit-text-stroke: 0 !important;
}

.share-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.share-modal {
  background: rgba(10, 12, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: #fff;
  max-width: 360px;
}

.share-canvas-wrap {
  margin: 16px 0;
}

.share-canvas-wrap canvas {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
}

.share-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.share-actions button {
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.share-actions button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.share-actions .share-primary {
  background: linear-gradient(90deg, #7ad0ff, #c79bff);
  color: #0b0e1a;
  font-weight: 800;
}

.share-actions .share-primary:hover {
  filter: brightness(1.05);
  background: linear-gradient(90deg, #7ad0ff, #c79bff);
}

.share-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 13px;
}