/* constellation.css */
/* ==================================================
   CONSTELLATION THREAD BASE STYLES
   ================================================== */
.thread-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
line, path { stroke: rgba(200, 220, 255, 0.4); stroke-width: 1.5; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s ease-in-out; }
line.drawn, path.drawn { stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(200,220,255,0.8)); }

.star-node { position: absolute; width: 40px; height: 40px; transform: translate(-50%, -50%); z-index: 20; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
.star-node.locked { opacity: 0.2; pointer-events: none; }
.star-node.active { opacity: 1; pointer-events: auto; cursor: pointer; }
.star-node.completed { opacity: 0.6; pointer-events: auto; cursor: pointer; }

.star-core { width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px 2px rgba(255,255,255,0.8); transition: all 0.3s; }
.star-node.active .star-core { animation: star-pulse 2s infinite; box-shadow: 0 0 20px 4px rgba(255,255,255,1); }
.star-core.tense { background: #ffcccc; box-shadow: 0 0 10px 2px rgba(255,100,100,0.8); }
.star-node.active .star-core.tense { animation: tense-pulse 0.5s infinite; }
.star-core.large { width: 10px; height: 10px; }
.star-core.brightest { width: 14px; height: 14px; box-shadow: 0 0 30px 10px rgba(255,255,255,1); }

.star-node.trigger-star .star-core { width: 12px; height: 12px; background: #eef8ff; box-shadow: 0 0 15px 5px rgba(100, 200, 255, 0.8); animation: special-twinkle 1.5s ease-in-out infinite alternate !important; }
@keyframes special-twinkle { 0% { transform: scale(0.8); box-shadow: 0 0 10px 2px rgba(100, 200, 255, 0.5); } 100% { transform: scale(1.3); box-shadow: 0 0 25px 8px rgba(150, 220, 255, 1); background: #fff; } }
@keyframes star-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.5); opacity: 1; } }
@keyframes tense-pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }

/* Shared Holograms */
.hologram { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); opacity: 0; pointer-events: none; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 30; }
.star-node.bloomed .hologram { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.holo-content { background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); color: #eef; text-align: center; max-width: 85vw; box-sizing: border-box; }
.holo-content h1 { font-size: clamp(1.4rem, 4vw, 1.8rem); }
.holo-content h2 { font-size: clamp(1rem, 3vw, 1.2rem); }
.holo-content p, .holo-content h4 { font-size: clamp(0.85rem, 2vw, 1rem); }
.holo-highlight { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); margin-top: 10px; font-size: 1.2rem; }

.holo-compact .holo-content { width: 220px; }
.holo-narrow .holo-content { width: 180px; border-color: rgba(255,100,100,0.3); }

.h-dates { font-family: monospace; color: #aab; font-size: 0.8rem; margin-bottom: 4px; }
.moon-placeholders { font-size: 1.5rem; margin: 10px 0; color: #fff; text-shadow: 0 0 8px #fff; }
.tense-content h4 { color: #ffcccc; margin-bottom: 5px; }
.holo-cue { display: block; margin-top: 15px; font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }

/* Mirror / Satellites */
.satellites { position: absolute; inset: -30px; animation: spin 10s linear infinite; opacity: 0; transition: opacity 0.5s; }
.star-node.active .satellites { opacity: 1; }
.sat { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 5px #fff; }
.s-1 { top: 0; left: 50%; } .s-2 { bottom: 10px; left: 10px; } .s-3 { bottom: 10px; right: 10px; }
@keyframes spin { 100% { transform: rotate(360deg); } }

.holo-flip { width: 240px; height: 180px; perspective: 1000px; }
.holo-inner { width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; }
.star-node.flipped .holo-inner { transform: rotateY(180deg); }
.holo-front, .holo-back { position: absolute; inset: 0; backface-visibility: hidden; background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.holo-back { transform: rotateY(180deg); }
.holo-actions { display: flex; gap: 10px; margin-top: 20px; }
.holo-actions button { padding: 8px 20px; border-radius: 20px; border: 1px solid #fff; background: transparent; color: #fff; cursor: pointer; transition: 0.3s; }
.holo-actions button:hover { background: #fff; color: #000; }
.photo-zone { display: flex; gap: 10px; margin-bottom: 15px; }
.photo-p { width: 40px; height: 50px; border: 1px dashed rgba(255,255,255,0.5); font-size: 0.6rem; display: flex; align-items: center; justify-content: center; color: #aaa; }
.mirror-p { border-color: #fff; box-shadow: inset 0 0 10px rgba(255,255,255,0.2); color: #fff; }

@media (max-width: 768px) { .holo-compact .holo-content { width: auto; min-width: 250px; } }


/* Expand the touch target of all active stars to 80x80px for mobile reliability */
.star-node.active::after {
    content: '';
    position: absolute;
    top: -20px; 
    left: -20px; 
    right: -20px; 
    bottom: -20px;
    z-index: 50; /* Ensures the hitbox sits above other invisible elements */
    cursor: pointer;
    border-radius: 50%;
    /* Uncomment the line below temporarily if you want to SEE the hitbox to test it */
    /* background: rgba(255, 0, 0, 0.3); */ 
}

/* Ensure the browser doesn't try to native-scroll when touching a star */
.star-node {
    touch-action: none; 
}