/* ============================================================================
   King exposure indicator — OWNER-ONLY persistent aura.

   Apply ONE of these classes to the square containing the owner's King:

       .king-exposure-1
       .king-exposure-2
       .king-exposure-3

   Meaning:
       1 = King has been checked once.
       2 = King has been checked twice.
       3 = King is permanently exposed/revealed.

   This is NOT a "currently in check" indicator.

   The aura is drawn near the center of the square so it reads as attached to
   the King, not as a square marker. The class should move with the King.

   Visibility rule:
       Live play:
           Only the King owner should receive/render their own exposure count.

       Review/god-view:
           You may choose to show both.
   ============================================================================ */

.chess-square.king-exposure-1,
.chess-square.king-exposure-2,
.chess-square.king-exposure-3 {
    position: relative;
}

    /* Main aura behind/around the King. */
    .chess-square.king-exposure-1::before,
    .chess-square.king-exposure-2::before,
    .chess-square.king-exposure-3::before {
        content: "";
        position: absolute;
        /*
       Keep this centered inside the square. This makes it feel attached to the
       King instead of marking the whole square.
    */
        left: 50%;
        top: 50%;
        width: var(--king-exposure-size);
        height: var(--king-exposure-size);
        transform: translate(-50%, -50%);
        border-radius: 999px;
        pointer-events: none;
        /*
       Put it above the board/fog, but ideally below the actual piece.
       If your piece image needs help staying above this, see selectors below.
    */
        z-index: 4;
        opacity: var(--king-exposure-opacity);
        background: radial-gradient( circle, var(--king-exposure-core) 0%, var(--king-exposure-glow) 42%, transparent 72% );
        filter: blur(var(--king-exposure-blur));
    }

    /* Optional sharper royal ring. */
    .chess-square.king-exposure-1::after,
    .chess-square.king-exposure-2::after,
    .chess-square.king-exposure-3::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--king-exposure-ring-size);
        height: var(--king-exposure-ring-size);
        transform: translate(-50%, -50%);
        border-radius: 999px;
        border: var(--king-exposure-ring-width) solid var(--king-exposure-ring);
        box-shadow: 0 0 var(--king-exposure-shadow-size) var(--king-exposure-shadow);
        pointer-events: none;
        z-index: 5;
        opacity: var(--king-exposure-ring-opacity);
    }

/* Exposure 1: faint gold pressure. */
.chess-square.king-exposure-1 {
    --king-exposure-core: rgba(234, 179, 8, 0.18);
    --king-exposure-glow: rgba(234, 179, 8, 0.26);
    --king-exposure-ring: rgba(234, 179, 8, 0.45);
    --king-exposure-shadow: rgba(234, 179, 8, 0.35);
    --king-exposure-size: 76%;
    --king-exposure-ring-size: 58%;
    --king-exposure-ring-width: 1px;
    --king-exposure-shadow-size: 8px;
    --king-exposure-blur: 2px;
    --king-exposure-opacity: 0.55;
    --king-exposure-ring-opacity: 0.45;
}

/* Exposure 2: stronger amber warning. */
.chess-square.king-exposure-2 {
    --king-exposure-core: rgba(249, 115, 22, 0.22);
    --king-exposure-glow: rgba(249, 115, 22, 0.36);
    --king-exposure-ring: rgba(249, 115, 22, 0.68);
    --king-exposure-shadow: rgba(249, 115, 22, 0.58);
    --king-exposure-size: 82%;
    --king-exposure-ring-size: 64%;
    --king-exposure-ring-width: 1.5px;
    --king-exposure-shadow-size: 11px;
    --king-exposure-blur: 2px;
    --king-exposure-opacity: 0.68;
    --king-exposure-ring-opacity: 0.65;
    animation: king-exposure-warning-breathe 2.4s ease-in-out infinite;
}

/* Exposure 3: permanently revealed King. */
.chess-square.king-exposure-3 {
    --king-exposure-core: rgba(239, 68, 68, 0.24);
    --king-exposure-glow: rgba(239, 68, 68, 0.42);
    --king-exposure-ring: rgba(251, 191, 36, 0.9);
    --king-exposure-shadow: rgba(239, 68, 68, 0.72);
    --king-exposure-size: 88%;
    --king-exposure-ring-size: 70%;
    --king-exposure-ring-width: 2px;
    --king-exposure-shadow-size: 14px;
    --king-exposure-blur: 2px;
    --king-exposure-opacity: 0.78;
    --king-exposure-ring-opacity: 0.82;
    animation: king-exposed-breathe 2.1s ease-in-out infinite;
}

    /*
   If your piece image is inside the square, keep it above the aura.
   Adjust these selectors to match your actual piece classes if needed.
*/
    .chess-square.king-exposure-1 .chess-piece-classic,
    .chess-square.king-exposure-2 .chess-piece-classic,
    .chess-square.king-exposure-3 .chess-piece-classic,
    .chess-square.king-exposure-1 .chess-piece-threed,
    .chess-square.king-exposure-2 .chess-piece-threed,
    .chess-square.king-exposure-3 .chess-piece-threed,
    .chess-square.king-exposure-1 img,
    .chess-square.king-exposure-2 img,
    .chess-square.king-exposure-3 img {
        position: relative;
        z-index: 6;
    }

/* Exposure 2 breathing effect: pressure is rising, but not yet fatal. */
@keyframes king-exposure-warning-breathe {
    0%, 100% {
        filter: none;
    }

    50% {
        filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.65));
    }
}

/* Exposure 3 breathing effect: King is permanently exposed. */
@keyframes king-exposed-breathe {
    0%, 100% {
        filter: none;
    }

    50% {
        filter: drop-shadow(0 0 7px rgba(239, 68, 68, 0.8));
    }
}

/* ============================================================================
   Optional current-check square indicator.

   Use this ONLY while the King is currently in check.

   This is separate from exposure.

       .king-current-check

   Exposure = persistent state attached to the King.
   Current check = temporary tactical warning on the square.
   ============================================================================ */

.chess-square.king-current-check {
    position: relative;
}

    .chess-square.king-current-check .check-warning-icon {
        z-index: 8;
    }

.chess-square.king-current-check {
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: -3px;
    box-shadow: inset 0 0 16px rgba(251, 191, 36, 0.28), 0 0 12px rgba(251, 191, 36, 0.22);
}

/* Accessibility: reduce motion, keep state visible. */
@media (prefers-reduced-motion: reduce) {
    .chess-square.king-exposure-2,
    .chess-square.king-exposure-3 {
        animation: none;
    }
}

/* Check-count badge in the move history, next to the ⚠ symbol.
   Yellow -> Orange -> Red, with the 3rd check styled as the "revealed" moment. */

.move-check-count {
    display: inline-block;
    margin-left: 2px;
    padding: 0 5px;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.5;
    border-radius: 8px;
    vertical-align: middle;
    color: #1a1a1a; /* dark text on the coloured chip */
}

.move-check-count--1 {
    background: #eab308;
}
/* yellow */
.move-check-count--2 {
    background: #f97316;
}
/* orange */

/* 3rd check = King revealed — hottest, and visually set apart (wider label). */
.move-check-count--3 {
    background: #ef4444; /* red */
    color: #fff;
    padding: 0 7px;
    letter-spacing: 0.02em;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}