/* ============================================================
   SAMURAI HERO
   True 21x21 Samurai geometry
   ============================================================ */

.samurai-board {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 2px;

    border: 1px solid rgba(148, 163, 184, 0.30);

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(37, 99, 235, 0.07),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #f8fbff,
            #eef5ff
        );

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.10);
}


.dark .samurai-board {
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(37, 99, 235, 0.08),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #111827,
            #0f172a
        );

    border-color: rgba(71, 85, 105, 0.70);
}


/* ============================================================
   EACH 9x9 GRID

   9 / 21 = 42.857142%
   ============================================================ */

.samurai-grid,
.samurai-detect-grid {

    position: absolute;

    width: 42.857142%;
    height: 42.857142%;

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   ORIGINAL GRID
   ------------------------------------------------------------ */

.samurai-grid {

    border: 2px solid rgba(59, 130, 246, 0.82);

    /*
        Minor 9x9 lines
        +
        major 3x3 block lines
    */

    background-image:

        /* major vertical */
        linear-gradient(
            to right,
            transparent calc(33.333% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(33.333% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(33.333% + 1px),
            transparent calc(33.333% + 1px)
        ),

        linear-gradient(
            to right,
            transparent calc(66.666% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(66.666% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(66.666% + 1px),
            transparent calc(66.666% + 1px)
        ),

        /* major horizontal */
        linear-gradient(
            to bottom,
            transparent calc(33.333% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(33.333% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(33.333% + 1px),
            transparent calc(33.333% + 1px)
        ),

        linear-gradient(
            to bottom,
            transparent calc(66.666% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(66.666% - 1px),
            rgba(37, 99, 235, 0.90)
                calc(66.666% + 1px),
            transparent calc(66.666% + 1px)
        ),

        /* minor lines */
        linear-gradient(
            to right,
            rgba(100, 116, 139, 0.40) 1px,
            transparent 1px
        ),

        linear-gradient(
            to bottom,
            rgba(100, 116, 139, 0.40) 1px,
            transparent 1px
        );

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        calc(100% / 9) calc(100% / 9),
        calc(100% / 9) calc(100% / 9);
}


.dark .samurai-grid {
    border-color: rgba(59, 130, 246, 0.82);
}


/* ============================================================
   EXACT SAMURAI POSITIONS

   Overall lattice = 21 cells

   TL     = 0
   CENTER = 6 / 21 = 28.571429%
   RIGHT  = 12 / 21 = 57.142857%

   This gives EXACTLY 3 cells of overlap.
   ============================================================ */

.samurai-tl {
    top: 0;
    left: 0;
}


.samurai-tr {
    top: 0;
    left: 57.142857%;
}


.samurai-center {
    top: 28.571429%;
    left: 28.571429%;
}


.samurai-bl {
    top: 57.142857%;
    left: 0;
}


.samurai-br {
    top: 57.142857%;
    left: 57.142857%;
}


/* ============================================================
   GREEN DETECTION LAYER
   ============================================================ */

.samurai-detected-layer {

    position: absolute;
    inset: 0;

    z-index: 3;

    pointer-events: none;

    animation:
        revealSamuraiDetection 6s
        linear
        infinite;
}


.samurai-detect-grid {

    border: 2px solid rgba(34, 197, 94, 0.92);

    background-image:

        linear-gradient(
            to right,
            transparent calc(33.333% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(33.333% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(33.333% + 1px),
            transparent calc(33.333% + 1px)
        ),

        linear-gradient(
            to right,
            transparent calc(66.666% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(66.666% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(66.666% + 1px),
            transparent calc(66.666% + 1px)
        ),

        linear-gradient(
            to bottom,
            transparent calc(33.333% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(33.333% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(33.333% + 1px),
            transparent calc(33.333% + 1px)
        ),

        linear-gradient(
            to bottom,
            transparent calc(66.666% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(66.666% - 1px),
            rgba(34, 197, 94, 0.92)
                calc(66.666% + 1px),
            transparent calc(66.666% + 1px)
        ),

        linear-gradient(
            to right,
            rgba(34, 197, 94, 0.35) 1px,
            transparent 1px
        ),

        linear-gradient(
            to bottom,
            rgba(34, 197, 94, 0.35) 1px,
            transparent 1px
        );

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        calc(100% / 9) calc(100% / 9),
        calc(100% / 9) calc(100% / 9);

    filter:
        drop-shadow(
            0 0 3px rgba(34, 197, 94, 0.28)
        );
}


/* ============================================================
   SCANNER LINE
   ============================================================ */

.samurai-scan-line {

    position: absolute;

    z-index: 6;

    left: 2%;
    right: 2%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(34, 197, 94, 0.75) 10%,
            #4ade80 50%,
            rgba(34, 197, 94, 0.75) 90%,
            transparent
        );

    box-shadow:
        0 0 8px rgba(34, 197, 94, 0.55),
        0 0 18px rgba(34, 197, 94, 0.25);

    animation:
        moveSamuraiScanner 6s
        linear
        infinite;
}


.samurai-scan-glow {

    position: absolute;

    left: 0;
    right: 0;

    top: -14px;

    height: 30px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(34, 197, 94, 0.10),
            transparent
        );
}


/* ============================================================
   NUMBERS
   Single GLOBAL 21x21 layer.

   This is important:
   overlap cells are physical shared cells,
   not duplicated numbers from two separate boards.
   ============================================================ */

.samurai-digits {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(21, 1fr);

    grid-template-rows:
        repeat(21, 1fr);

    pointer-events: none;
}

.samurai-digit {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #0f172a;

    font-size: clamp(
        8px,
        1.35vw,
        15px
    );

    font-weight: 700;
    line-height: 1;

    position: relative;
    z-index: 5;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease,
        transform 0.25s ease;

    animation:
        digitDetectionFlash 6s
        linear
        infinite;
}


.dark .samurai-digit {
    color: #cbd5e1;
}


/* ============================================================
   ANIMATION SEQUENCE

   0–65%   scanner goes top -> bottom
   68–84%  numbers detected / green shine
   90%     return to original
   100%    scan restarts from top
   ============================================================ */

@keyframes moveSamuraiScanner {

    0% {
        top: 0%;
        opacity: 0;
    }

    5% {
        top: 0%;
        opacity: 1;
    }

    65% {
        top: calc(100% - 2px);
        opacity: 1;
    }

    68% {
        top: calc(100% - 2px);
        opacity: 0;
    }

    100% {
        top: 0%;
        opacity: 0;
    }
}


@keyframes revealSamuraiDetection {

    0%,
    5% {
        clip-path:
            inset(
                0 0 100% 0
            );

        opacity: 1;
    }

    65% {
        clip-path:
            inset(
                0 0 0 0
            );

        opacity: 1;
    }

    84% {
        clip-path:
            inset(
                0 0 0 0
            );

        opacity: 1;
    }

    92%,
    100% {
        clip-path:
            inset(
                0 0 100% 0
            );

        opacity: 0;
    }
}


@keyframes digitDetectionFlash {

    0%,
    66% {

        color: #334155;

        text-shadow: none;

        transform: scale(1);
    }

    70% {

        color: #16a34a;

        text-shadow:
            0 0 5px rgba(34, 197, 94, 0.65),
            0 0 12px rgba(34, 197, 94, 0.30);

        transform: scale(1.10);
    }

    78% {

        color: #22c55e;

        text-shadow:
            0 0 8px rgba(34, 197, 94, 0.80),
            0 0 18px rgba(34, 197, 94, 0.40);

        transform: scale(1.16);
    }

    86% {

        color: #16a34a;

        text-shadow:
            0 0 4px rgba(34, 197, 94, 0.45);

        transform: scale(1.05);
    }

    92%,
    100% {

        color: #334155;

        text-shadow: none;

        transform: scale(1);
    }
}


.dark .samurai-digit {
    animation-name:
        digitDetectionFlashDark;
}


@keyframes digitDetectionFlashDark {

    0%,
    66% {

        color: #cbd5e1;

        text-shadow: none;

        transform: scale(1);
    }

    70% {

        color: #4ade80;

        text-shadow:
            0 0 6px rgba(74, 222, 128, 0.75),
            0 0 14px rgba(34, 197, 94, 0.40);

        transform: scale(1.10);
    }

    78% {

        color: #86efac;

        text-shadow:
            0 0 9px rgba(74, 222, 128, 0.90),
            0 0 20px rgba(34, 197, 94, 0.50);

        transform: scale(1.16);
    }

    86% {

        color: #4ade80;

        transform: scale(1.05);
    }

    92%,
    100% {

        color: #cbd5e1;

        text-shadow: none;

        transform: scale(1);
    }
}


/* Respect accessibility preference */
@media (prefers-reduced-motion: reduce) {

    .samurai-scan-line,
    .samurai-detected-layer,
    .samurai-digit {
        animation: none;
    }

    .samurai-detected-layer {
        display: none;
    }
}