/* /Features/Tools/CatchTheKing/Pages/CatchTheKing.razor.rz.scp.css */
/* ****************** */
/* Default layout */
/* ****************** */

.catch-the-king-board[b-pt1n2e14xd] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(4px, 0.8vw, 10px);
    width: 100%;
}

.catch-the-king-cell[b-pt1n2e14xd] {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 8px;
    border: 2px solid #dee2e6;
    background: #f8f9fa;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: transform .12s, box-shadow .12s;
    user-select: none;
    overflow: hidden;
}

    .catch-the-king-cell:hover[b-pt1n2e14xd] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }

    .catch-the-king-cell.revealed[b-pt1n2e14xd] {
        background: var(--bs-body-bg);
        border-color: var(--bs-border-color);
    }

    .catch-the-king-cell.revealed-five[b-pt1n2e14xd] {
        background: #fff3cd;
        border-color: #ffc107;
    }

    .catch-the-king-cell.revealed-five-nearby[b-pt1n2e14xd] {
        background: #f8d7da;
        border-color: #dc3545;
    }

    .catch-the-king-cell.safe-zone[b-pt1n2e14xd] {
        background: #d1e7dd;
        border-color: #198754;
    }

    .catch-the-king-cell.danger-zone[b-pt1n2e14xd] {
        background: #f8d7da;
        border-color: #dc3545;
    }

    .catch-the-king-cell.bonus-row[b-pt1n2e14xd] {
        background: #d1fae5;
        border-color: #059669;
    }

    .catch-the-king-cell.bonus-col[b-pt1n2e14xd] {
        background: #dbeafe;
        border-color: #2563eb;
    }

    .catch-the-king-cell.bonus-diag[b-pt1n2e14xd] {
        background: #fef9c3;
        border-color: #d97706;
    }

    .catch-the-king-cell.bonus-multi[b-pt1n2e14xd] {
        background: #ede9fe;
        border-color: #7c3aed;
    }

.catch-the-king-coord[b-pt1n2e14xd] {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: clamp(.45rem, 1vw, .6rem);
    color: #adb5bd;
    font-family: monospace;
    line-height: 1;
}

.catch-the-king-back[b-pt1n2e14xd] {
    font-size: clamp(1rem, 3.5vw, 2rem);
    font-weight: bold;
    color: #ced4da;
    line-height: 1;
}

.catch-the-king-zone-label[b-pt1n2e14xd] {
    font-size: clamp(.5rem, 1.5vw, .75rem);
    font-weight: 700;
    line-height: 1;
}

.catch-the-king-value[b-pt1n2e14xd] {
    font-size: clamp(1rem, 3.5vw, 2rem);
    font-weight: 800;
    line-height: 1;
}

.catch-the-king-five-nearby[b-pt1n2e14xd] {
    font-size: clamp(.4rem, 1vw, .6rem) !important;
    padding: 1px 3px;
    line-height: 1.2;
}

.catch-the-king-probability[b-pt1n2e14xd] {
    font-size: clamp(.4rem, 1.1vw, .65rem);
    font-weight: 700;
    line-height: 1;
    border-radius: 3px;
    padding: 1px 3px;
    display: inline-block;
}

.catch-the-king-probability-low[b-pt1n2e14xd] {
    color: #6c757d;
}

.catch-the-king-probability-mid[b-pt1n2e14xd] {
    color: #fd7e14;
}

.catch-the-king-probability-high[b-pt1n2e14xd] {
    color: #dc3545;
    background: rgba(220, 53, 69, .12);
}


.catch-the-king-value-1[b-pt1n2e14xd] {
    color: #198754;
}

.catch-the-king-value-2[b-pt1n2e14xd] {
    color: #0d6efd;
}

.catch-the-king-value-3[b-pt1n2e14xd] {
    color: #6f42c1;
}

.catch-the-king-value-4[b-pt1n2e14xd] {
    color: #fd7e14;
}

.catch-the-king-value-5[b-pt1n2e14xd] {
    color: #dc3545;
}

.catch-the-king-value-k[b-pt1n2e14xd] {
    color: #b8860b;
}

.catch-the-king-badge-value-1[b-pt1n2e14xd] {
    color: #198754;
}

.catch-the-king-badge-value-2[b-pt1n2e14xd] {
    color: #0d6efd;
}

.catch-the-king-badge-value-3[b-pt1n2e14xd] {
    color: #6f42c1;
}

.catch-the-king-badge-value-4[b-pt1n2e14xd] {
    color: #fd7e14;
}

.catch-the-king-badge-value-5[b-pt1n2e14xd] {
    color: #dc3545;
}

.catch-the-king-badge-value-k[b-pt1n2e14xd] {
    color: #b8860b;
}

/* ****************** */
/* Dark layout */
/* ****************** */

[data-bs-theme="dark"] .catch-the-king-cell[b-pt1n2e14xd] {
    background: #1f232a;
    border-color: #3a3f4b;
}

    [data-bs-theme="dark"] .catch-the-king-cell:hover[b-pt1n2e14xd] {
        box-shadow: 0 4px 12px rgba(0,0,0,.35);
    }

    [data-bs-theme="dark"] .catch-the-king-cell.revealed[b-pt1n2e14xd] {
        background: #2a2f36;
        border-color: #495057;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.revealed-five[b-pt1n2e14xd] {
        background: rgba(255, 193, 7, 0.15);
        border-color: #ffc107;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.revealed-five-nearby[b-pt1n2e14xd] {
        background: rgba(220, 53, 69, 0.15);
        border-color: #dc3545;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.safe-zone[b-pt1n2e14xd] {
        background: rgba(25, 135, 84, 0.15);
        border-color: #198754;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.danger-zone[b-pt1n2e14xd] {
        background: rgba(220, 53, 69, 0.15);
        border-color: #dc3545;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.bonus-row[b-pt1n2e14xd] {
        background: rgba(5, 150, 105, 0.18) !important;
        border-color: #34d399 !important;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.bonus-col[b-pt1n2e14xd] {
        background: rgba(37, 99, 235, 0.18) !important;
        border-color: #60a5fa !important;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.bonus-diag[b-pt1n2e14xd] {
        background: rgba(217, 119, 6, 0.18) !important;
        border-color: #fbbf24 !important;
    }

    [data-bs-theme="dark"] .catch-the-king-cell.bonus-multi[b-pt1n2e14xd] {
        background: rgba(124, 58, 237, 0.18) !important;
        border-color: #a78bfa !important;
    }