/* ============ SENTINEL SURVEILLANCE GRID ============
   Shared by index.html (Sentinel GCS + Capabilities sections) and
   chakravyuh.html (Command Theater section). */

.sentinel-banner {
    margin: 32px 0 48px;
    padding: 18px;
    border: 1px solid rgba(170, 195, 230, 0.10);
    background:
        linear-gradient(180deg, rgba(8, 14, 24, 0.85) 0%, rgba(4, 7, 14, 0.92) 100%),
        #04060a;
    position: relative;
    overflow: hidden;
}
.sentinel-banner::before,
.sentinel-banner::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(209, 140, 44, 0.7);
}
.sentinel-banner::before { top: 6px; left: 6px;  border-right: 0; border-bottom: 0; }
.sentinel-banner::after  { bottom: 6px; right: 6px; border-left: 0;  border-top: 0; }
.sentinel-banner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 6px 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(170, 195, 230, 0.10);
    font: 600 10.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.sentinel-banner-tag  { color: #d18c2c; }
.sentinel-banner-meta { color: rgba(180, 200, 230, 0.6); text-align: right; }

.sentinel-grid-host {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: #04060a;
    overflow: hidden;
}
.astroc-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    z-index: 1;
}
.astroc-tile {
    position: relative;
    overflow: hidden;
    background: #050810;
    border: 1px solid rgba(170, 195, 230, 0.08);
    opacity: 0;
    animation: tileFadeIn 0.7s ease forwards;
}
.astroc-tile:nth-child(1) { animation-delay: 0.05s; }
.astroc-tile:nth-child(2) { animation-delay: 0.18s; }
.astroc-tile:nth-child(3) { animation-delay: 0.30s; }
.astroc-tile:nth-child(4) { animation-delay: 0.10s; }
.astroc-tile:nth-child(5) { animation-delay: 0.23s; }
.astroc-tile:nth-child(6) { animation-delay: 0.35s; }
@keyframes tileFadeIn {
    from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0);  }
}
.astroc-tile-noise {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    filter: contrast(1.06) saturate(0.78);
    opacity: 0.95;
}
.astroc-tile-scrim {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px),
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.astroc-tile-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(200, 215, 240, 0.45);
    pointer-events: none;
}
.astroc-tile-corner--tl { top: 6px; left: 6px;  border-right: 0; border-bottom: 0; }
.astroc-tile-corner--tr { top: 6px; right: 6px; border-left: 0;  border-bottom: 0; }
.astroc-tile-corner--bl { bottom: 6px; left: 6px;  border-right: 0; border-top: 0; }
.astroc-tile-corner--br { bottom: 6px; right: 6px; border-left: 0;  border-top: 0; }
.astroc-tile-meta {
    position: absolute;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font: 600 9.5px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(220, 230, 245, 0.88);
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.astroc-tile-meta--top    { top: 12px; }
.astroc-tile-meta--bottom { bottom: 12px; color: rgba(180, 200, 230, 0.7); }
.astroc-tile-code  { color: #d18c2c; }
.astroc-tile-label { color: rgba(180, 200, 230, 0.7); }
.astroc-tile-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #5bf08a;
    box-shadow: 0 0 6px rgba(91, 240, 138, 0.6);
    animation: tileDotPulse 1.6s ease-in-out infinite;
}
@keyframes tileDotPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Target lock overlay on one tile */
.astroc-target {
    position: absolute;
    inset: 22%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, inset 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.is-locking .astroc-target { opacity: 1; inset: 18%; }
.is-acquired .astroc-target { inset: 14%; }
.astroc-target-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid #d18c2c;
}
.astroc-target-corner--tl { top: 0; left: 0;     border-right: 0; border-bottom: 0; }
.astroc-target-corner--tr { top: 0; right: 0;    border-left: 0;  border-bottom: 0; }
.astroc-target-corner--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.astroc-target-corner--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
.astroc-target-cross {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(transparent calc(50% - 0.5px), #d18c2c calc(50% - 0.5px), #d18c2c calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(90deg, transparent calc(50% - 0.5px), #d18c2c calc(50% - 0.5px), #d18c2c calc(50% + 0.5px), transparent calc(50% + 0.5px));
    opacity: 0.85;
}
.astroc-target-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font: 700 10px/1 'JetBrains Mono', monospace;
    letter-spacing: 0.32em;
    color: #d18c2c;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    white-space: nowrap;
}
.is-acquired .astroc-tile-code { color: #ff5252; }
.is-acquired .astroc-target-corner { border-color: #ff5252; }
.is-acquired .astroc-target-cross {
    background:
        linear-gradient(transparent calc(50% - 0.5px), #ff5252 calc(50% - 0.5px), #ff5252 calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(90deg, transparent calc(50% - 0.5px), #ff5252 calc(50% - 0.5px), #ff5252 calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.is-acquired .astroc-target-label { color: #ff5252; }

.astroc-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0) 2px, rgba(255,255,255,0) 4px),
        radial-gradient(ellipse at center, transparent 55%, rgba(2,5,10,0.5) 100%);
}

@media (max-width: 720px) {
    .sentinel-banner { margin: 24px 0 36px; padding: 12px; }
    .sentinel-banner::before,
    .sentinel-banner::after { width: 12px; height: 12px; }
    .sentinel-banner-head {
        flex-wrap: wrap;
        gap: 6px;
        padding: 0 2px 10px;
        margin-bottom: 10px;
        font-size: 9px;
        letter-spacing: 0.22em;
    }
    .sentinel-banner-meta {
        font-size: 8.5px;
        letter-spacing: 0.18em;
        text-align: left;
    }
    /* 2x2 grid (4 tiles) at a more screen-friendly aspect on phones. */
    .sentinel-grid-host { aspect-ratio: 5 / 4; }
    .astroc-grid { grid-template-rows: repeat(2, 1fr); gap: 6px; }
    .astroc-tile-meta {
        left: 6px;
        right: 6px;
        font-size: 8px;
        letter-spacing: 0.12em;
        gap: 6px;
    }
    .astroc-tile-meta--top    { top: 7px; }
    .astroc-tile-meta--bottom { bottom: 7px; }
    .astroc-tile-corner { width: 9px; height: 9px; }
    .astroc-tile-corner--tl, .astroc-tile-corner--tr { top: 3px; }
    .astroc-tile-corner--bl, .astroc-tile-corner--br { bottom: 3px; }
    .astroc-tile-corner--tl, .astroc-tile-corner--bl { left: 3px; }
    .astroc-tile-corner--tr, .astroc-tile-corner--br { right: 3px; }
    .astroc-target-label { font-size: 8px; letter-spacing: 0.22em; bottom: -16px; }
}
@media (prefers-reduced-motion: reduce) {
    .astroc-tile { animation: none !important; opacity: 1 !important; }
    .astroc-tile-dot { animation: none !important; }
}