/* Hoppitree: Planet Lookout game styles. Prefix every class with the game id. */

/* ---------- Planet Parade ---------- */
.planets-stage {
  --u: clamp(1px, .21vmin, 1.8px);
  background:
    radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 32% 72%, #fff 50%, transparent 51%),
    radial-gradient(3px 3px at 55% 12%, #FFF3B0 50%, transparent 51%), radial-gradient(2px 2px at 71% 60%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 24%, #fff 50%, transparent 51%), radial-gradient(3px 3px at 92% 82%, #BFD0FF 50%, transparent 51%),
    radial-gradient(2px 2px at 6% 86%, #BFD0FF 50%, transparent 51%), radial-gradient(2px 2px at 44% 44%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 50% 120%, #2B2F8C, #0C1140 70%);
  border-color: rgba(255, 255, 255, .28);
}
.planets-svg { display: block; flex-shrink: 0; width: calc(var(--z) * var(--w) * var(--u)); height: auto; overflow: visible; }
.planets-stage .choice { background: linear-gradient(180deg, #2A3280, #171D55); box-shadow: inset 0 -8px 0 #10143F, inset 0 0 0 2px rgba(255, 255, 255, .16), 0 12px 24px rgba(0, 0, 0, .3); }
.planets-stage .choice.yes { box-shadow: inset 0 -8px 0 #2EA043, 0 0 0 6px #3BC14A, 0 0 40px rgba(59, 193, 74, .6); }
.planets-stage .pic-word { color: #E9EDFF; }
.planets-stage .choices.nums .choice { background: #fff; box-shadow: inset 0 -8px 0 #E3E9F8, 0 12px 24px rgba(0, 0, 0, .3); }
.planets-pic { display: flex; align-items: center; justify-content: center; min-height: calc(var(--u) * 66); }
.planets-pic.sized { min-height: calc(var(--u) * 100); }

.planets-line { --u: clamp(.6px, calc((100vw - 290px) / 590), 1.8px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.planets-sunedge { display: block; overflow: hidden; width: calc(var(--u) * 72); align-self: center; }
.planets-sunedge .planets-svg { transform: translateX(-50%); }
.planets-b { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 64px; min-height: 84px; padding: 4px 2px; border: 0; border-radius: 20px; background: transparent; font: inherit; color: #E9EDFF; transition: transform .2s, opacity .3s, filter .3s; }
button.planets-b { cursor: pointer; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); }
button.planets-b:active { transform: scale(.94); }
.planets-b i { font-style: normal; font-size: clamp(11px, 1.5vw, 16px); font-weight: 600; opacity: .9; }
.planets-b.nope { opacity: .3; filter: grayscale(1); }
.planets-b.yes { background: rgba(59, 193, 74, .35); box-shadow: 0 0 0 4px #3BC14A, 0 0 30px rgba(59, 193, 74, .7); animation: planets-pop .6s; }
.planets-b.gone { visibility: hidden; }
.planets-b.hint { animation: planets-hint .8s ease-in-out infinite; box-shadow: 0 0 0 4px #FFD23F; }

.planets-slots { padding: 6px 10px; border-radius: 28px; background: rgba(255, 255, 255, .07); }
.planets-slot { display: flex; align-items: center; justify-content: center; min-width: 64px; min-height: 64px; padding: 4px; border-radius: 50%; border: 3px dashed transparent; }
.planets-slot.ghost .planets-svg { opacity: .26; filter: saturate(.6); }
.planets-slot b { color: rgba(255, 255, 255, .7); font-size: 26px; }
.planets-slot:not(.ghost):not(.full) { border-color: rgba(255, 255, 255, .4); }
.planets-slot.next { border-color: #FFD23F; animation: planets-glow 1.2s ease-in-out infinite; }
.planets-slot.next .planets-svg { opacity: .5; }
.planets-slot.full { animation: planets-pop .5s; }
.planets-tray { min-height: 110px; gap: 10px; }

.planets-orbit { --o: clamp(160px, 30vh, 260px); position: relative; flex-shrink: 0; width: var(--o); height: var(--o); --u: calc(var(--o) / 300); }
.planets-path { position: absolute; inset: 13%; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 50%; }
.planets-osun, .planets-oe, .planets-m { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.planets-osun { --u: calc(var(--o) / 190); }
.planets-arm { position: absolute; inset: 13%; animation: planets-spin 20s linear infinite reverse; }
.planets-e { position: absolute; left: 50%; top: 0; width: calc(var(--o) * .26); height: calc(var(--o) * .26); margin: calc(var(--o) * -.13) 0 0 calc(var(--o) * -.13); }
.planets-e .planets-path { inset: 0; }
.planets-oe { --u: calc(var(--o) / 430); }
.planets-marm { inset: 0; animation-duration: 4s; }
.planets-m { top: 0; --u: calc(var(--o) / 1100); }

@keyframes planets-spin { to { transform: rotate(360deg); } }
@keyframes planets-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes planets-glow { 50% { box-shadow: 0 0 0 6px rgba(255, 210, 63, .35); } }
@keyframes planets-hint { 50% { transform: translateY(-8px) scale(1.08); } }

/* ---------- Earth Explorer ---------- */
.earth-stage { background: linear-gradient(180deg, rgba(214, 240, 255, .8), rgba(232, 250, 226, .7)); }
.earth-scene { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 36px); max-width: 100%; }
.earth-scene.flip { flex-direction: row-reverse; }
.earth-globe { display: block; flex-shrink: 0; width: min(58vw, 54vh, 460px); height: auto; cursor: pointer; touch-action: manipulation; filter: drop-shadow(0 12px 18px rgba(29, 43, 83, .25)); }
.earth-globe.tapme { animation: earth-nudge 1.6s ease-in-out infinite; }
.earth-ring { fill: rgba(255, 210, 63, .25); stroke: #FFD23F; stroke-width: 5; pointer-events: none; opacity: 0; }
.earth-globe.help .earth-ring { animation: earth-blink 1s ease-in-out infinite; }
.earth-turn { transition: transform 3.2s ease-in-out; }
.earth-sun { --u: clamp(.9px, .26vmin, 2.2px); flex-shrink: 0; }
.earth-side { flex-shrink: 0; font-size: clamp(56px, 11vmin, 110px); line-height: 1; }
.earth-side .earth-draw { width: clamp(70px, 15vmin, 140px); }
.earth-draw { display: block; width: clamp(96px, 13vw, 150px); height: auto; }
.pic-emo .earth-draw { margin: 4px 0; }
.pic-emo.earth-duo { font-size: clamp(40px, 5.4vw, 60px); white-space: nowrap; }
.earth-pic .earth-globe { width: clamp(110px, 22vh, 190px); cursor: default; }
.earth-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.earth-chip { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 18px 8px 10px; border: 0; border-radius: 999px; background: #fff; font: 600 clamp(16px, 2vw, 22px) var(--font); color: var(--ink); box-shadow: inset 0 -5px 0 #E3E9F8, 0 8px 16px rgba(29, 43, 83, .14); cursor: pointer; }
.earth-chip b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: #fff; font-size: 24px; }
.earth-chip.on { background: #FFF8D6; }

@keyframes earth-blink { 50% { opacity: 1; } }
@keyframes earth-nudge { 50% { transform: scale(1.04); } }

@media (max-width: 600px) {
  .planets-stage .choice, .earth-stage .choice { min-width: 118px; min-height: 118px; padding: 10px; }
  .planets-stage .pic-word, .earth-stage .pic-word { font-size: 18px; }
  .planets-line { gap: 4px; }
}
@media (max-height: 720px) {
  .planets-orbit { --o: clamp(120px, 24vh, 170px); }
}
@media (prefers-reduced-motion: reduce) {
  .planets-arm, .planets-slot.next, .planets-b.hint, .earth-globe.tapme { animation: none; }
}