.layer { position: absolute; inset: 0; pointer-events: none; /* Выше brushLayer (z-index: 3), иначе ПКМ/меню перехватывает кисть. * Ниже Pixi/Explosion (6/7), чтобы VFX яда/взрыва шли поверх иконки. */ z-index: 5; } .trap { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; pointer-events: auto; cursor: context-menu; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); } .trapActive { border-color: #ff6b4a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 14px rgba(255, 90, 40, 0.45); } .trapDisarmed { border-color: #9ca3af; filter: grayscale(0.7); opacity: 0.75; } .trapGmHidden { opacity: 0.55; border-style: dashed; } .label { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font-size: 11px; white-space: nowrap; background: rgba(0, 0, 0, 0.75); padding: 1px 6px; border-radius: 4px; pointer-events: none; } .menu { position: fixed; z-index: 80; min-width: 180px; padding: 6px; border-radius: 10px; border: 1px solid var(--stroke, #333); background: #1a1d24; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); pointer-events: auto; } .menuItem { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #e8eaef; font-size: 13px; cursor: pointer; } .menuItem:hover { background: rgba(255, 255, 255, 0.08); } .flash { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 80, 0.85), transparent 70%); animation: trapFlash 0.7s ease-out forwards; pointer-events: none; } @keyframes trapFlash { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(1.6); } } /** Одноразовый VFX ловушки на слое оверлея (не внутри круглого маркера). * Якорь кадра задаётся inline transform из trapActivationAnchorTransform. */ .trapMediaFx { position: absolute; height: auto; max-width: none; pointer-events: none; z-index: 6; background: transparent; }