.nebula-world { perspective: 920px; touch-action: none; }
.nebula-stage { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; transform-style: preserve-3d; will-change: transform; transition: none; }
.nebula-card { position: absolute; top: -40px; left: -30px; width: 60px; height: 80px; padding: 0; overflow: hidden; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.28); box-shadow: 0 12px 28px rgba(0,0,0,.32); transform-style: preserve-3d; will-change: transform; cursor: zoom-in; }
.nebula-card::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
.nebula-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.nebula-card.selected { z-index: 5; width: min(52vw, 420px); height: min(68vh, 560px); top: auto; left: auto; border-color: rgba(240,196,90,.85); box-shadow: 0 28px 80px rgba(0,0,0,.58); transform: translate3d(-50%, -50%, 520px) rotate(0deg) !important; }
.nebula-card.highlight { border-color: rgba(100,200,255,.85); box-shadow: 0 0 24px rgba(100,200,255,.5), 0 12px 28px rgba(0,0,0,.32); animation: card-pulse 0.8s ease-in-out infinite; }
@keyframes card-pulse { 0%, 100% { box-shadow: 0 0 24px rgba(100,200,255,.5), 0 12px 28px rgba(0,0,0,.32); } 50% { box-shadow: 0 0 40px rgba(100,200,255,.8), 0 18px 36px rgba(0,0,0,.4); } }
.nebula-gesture-help { position: absolute; z-index: 4; left: 22px; bottom: 76px; max-width: min(380px, calc(100% - 44px)); padding: 10px 12px; color: rgba(255,255,255,.78); background: rgba(8,11,12,.62); border: 1px solid rgba(255,255,255,.16); font-size: 12px; line-height: 1.8; pointer-events: none; }
@media (max-width: 780px) { .nebula-card { width: 48px; height: 64px; top: -32px; left: -24px; } .nebula-card.selected { width: min(76vw, 320px); height: min(62vh, 430px); } .nebula-gesture-help { left: 13px; bottom: 70px; max-width: calc(100% - 26px); font-size: 11px; } }