/* =====================================================================
   STALKERX — ARTIFACT SYSTEM  (global: lives in layouts/app.blade.php)
   Loaded on every layout page, so it must work under both body.zx and
   body.pda-home. Design tokens come from those scopes; var() fallbacks
   keep it correct even if a page sets no body class.
   Positioning hooks (absolute/fixed/transform) are preserved for artifact JS.
   ===================================================================== */

@keyframes zx-art-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.08); opacity: .82; }
}
@keyframes zx-art-blink {
    0%, 100% { border-color: rgba(232,178,58,.35); }
    50%      { border-color: rgba(232,178,58,.85); }
}

/* ---------------- spawned artifact on the page ---------------- */
.artifact-spawn-overlay { position: absolute; z-index: 9999; cursor: pointer; transform: translate(-50%, -50%); }
.artifact-pulse-wrap { width: 100%; height: 100%; animation: zx-art-pulse 3s ease-in-out infinite; will-change: transform, opacity; }
.artifact-spawn-img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 0 14px rgba(232,178,58,.45)); }

.artifact-spawn-tooltip {
    position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    background: rgba(12,16,14,.94); border: 1px solid rgba(165,185,155,.26); border-radius: 0;
    padding: 8px 14px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; text-align: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.artifact-spawn-overlay:hover .artifact-spawn-tooltip { opacity: 1; }
.artifact-spawn-tooltip span {
    display: block; color: var(--zx-amber, #e8b23a); font-size: 12px; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.artifact-spawn-tooltip small {
    display: block; color: rgba(184,194,182,.55); font-size: 10.5px; letter-spacing: 1px; margin-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* ---------------- header notification ---------------- */
.artifact-header-notify {
    /* 150: above page content, but below the header's stacking context (z-index:200 — the mobile
       nav + its overlay live inside <header>) and below the boot screen / grab modal (10000) */
    position: fixed; top: 95px; z-index: 150;
    /* Start where the banner image starts: the page is capped at 1920px and centred, so on wider
       screens the plate follows the page edge instead of sticking to the viewport edge. */
    left: max(0px, calc((100% - 1920px) / 2));
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(90deg, rgba(232,178,58,.13) 0%, rgba(12,16,14,.97) 58%);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(232,178,58,.32); border-top: none; border-left: none; border-radius: 0;
    padding: 11px 22px 11px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,.55), inset 0 -1px 0 rgba(232,178,58,.12);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
/* amber accent bar on the leading edge */
.artifact-header-notify::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--zx-amber, #e8b23a); box-shadow: 0 0 12px rgba(232,178,58,.75);
}
.artifact-header-icon {
    position: relative; z-index: 1; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--zx-amber, #e8b23a); font-size: 14px;
    animation: zx-art-pulse 2.2s ease-in-out infinite;
}
.artifact-header-text {
    position: relative; z-index: 1;
    color: rgba(217,222,212,.92); font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
}
.artifact-header-countdown {
    position: relative; z-index: 1;
    color: #ffcf6b; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1.2px;
    padding-left: 14px; border-left: 1px solid rgba(232,178,58,.25);
}
/* keep it flush under the header at every breakpoint (header: 95 / 91 / 83) */
@media (max-width: 1024px) { .artifact-header-notify { top: 91px; } }
@media (max-width: 768px)  { .artifact-header-notify { top: 83px; padding: 8px 14px; } }

/* ---------------- grab modal ---------------- */
.artifact-grab-modal {
    position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
    background: rgba(6,9,8,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 20px;
}
.artifact-grab-modal-inner {
    position: relative; background: rgba(12,16,14,.97);
    border: 1px solid rgba(165,185,155,.26); border-top: 2px solid var(--zx-amber, #e8b23a); border-radius: 0;
    padding: 38px 32px 32px; max-width: 400px; width: 100%; text-align: center;
}
/* corner ticks, same language as the rest of the redesign */
.artifact-grab-modal-inner::before, .artifact-grab-modal-inner::after {
    content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--zx-amber, #e8b23a); pointer-events: none;
}
.artifact-grab-modal-inner::before { top: 8px; left: -1px; border-right: none; border-bottom: none; }
.artifact-grab-modal-inner::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.artifact-grab-modal-img {
    width: 118px; height: 118px; object-fit: contain; margin: 0 auto 22px; display: block;
    animation: zx-art-pulse 2.4s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(232,178,58,.4));
}
.artifact-grab-modal-title {
    font-family: var(--font-display, 'Unbounded', sans-serif); font-weight: 700; font-size: 19px;
    letter-spacing: .5px; text-transform: uppercase; color: var(--zx-amber, #e8b23a); margin-bottom: 12px;
}
.artifact-grab-modal-msg {
    font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12.5px; line-height: 1.7;
    color: rgba(217,222,212,.72); margin-bottom: 26px;
}
.artifact-grab-modal-msg.duplicate { color: var(--zx-ok, #93c96a); }

.artifact-grab-modal-close {
    font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 12px; font-weight: 600;
    letter-spacing: 1.6px; text-transform: uppercase; border: none; border-radius: 0;
    background: var(--zx-amber, #e8b23a); color: #10130f; padding: 13px 28px; cursor: pointer; transition: all .2s;
    display: inline-flex; align-items: center; gap: 9px;
}
.artifact-grab-modal-close:hover {
    background: transparent; color: var(--zx-amber, #e8b23a); box-shadow: inset 0 0 0 1.5px var(--zx-amber, #e8b23a);
}

@media (max-width: 480px) {
    .artifact-grab-modal-inner { padding: 30px 20px 26px; }
    .artifact-grab-modal-img { width: 96px; height: 96px; }
}