/* /Components/BoardCard.razor.rz.scp.css */
/* DEBT-097 fix: Focus-visible ring for keyboard navigation */
a:focus-visible[b-qd4i14boid] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 0.375rem;
}
/* /Components/BoardGrid.razor.rz.scp.css */
/* ===== Board Grid Container ===== */
.board-grid-container[b-khu2xwjc1b] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: min(90vw, 960px);
    margin: 0 auto;
}

.board-grid[b-khu2xwjc1b] {
    display: grid;
    gap: 3px;
    width: 100%;
    max-width: min(90vw, 960px);
}

/* ===== Card Face Baseline ===== */
/* Front face: transparent pass-through — number is visible on all devices */
.card-face.front[b-khu2xwjc1b] {
    display: contents;
}

/* Back face: hidden at baseline — not needed for 2D */
.card-face.back[b-khu2xwjc1b] {
    display: none;
}

/* ===== Grid Cell Base ===== */
.grid-cell[b-khu2xwjc1b] {
    aspect-ratio: 1;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: clamp(0.65rem, 1.2vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.grid-cell .number[b-khu2xwjc1b] {
    font-size: clamp(0.6rem, 1.1vw, 0.95rem);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
}

/* ===== Focus Indicator ===== */
.grid-cell:focus-visible[b-khu2xwjc1b] {
    outline: 2px solid #4a90d9;
    outline-offset: 2px;
}

/* ===== Hover (mouse-capable devices only) ===== */
@@media (hover: hover) {
    .grid-cell:hover:not(:disabled)[b-khu2xwjc1b] {
        transform: scale(1.08);
        z-index: 2;
        filter: brightness(1.1);
    }

    .grid-cell:active:not(:disabled)[b-khu2xwjc1b] {
        transform: scale(0.97);
    }

    .grid-cell.available:hover:not(:disabled)[b-khu2xwjc1b] {
        background: linear-gradient(145deg, #d0d5db, #b8bec6);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                    inset 0 1px 2px rgba(255, 255, 255, 0.3);
    }

    .grid-cell.owned-mine:hover:not(:disabled)[b-khu2xwjc1b] {
        box-shadow: 0 4px 12px rgba(38, 166, 154, 0.35),
                    inset 0 1px 2px rgba(255, 255, 255, 0.2);
    }
}

/* ===== Disabled State ===== */
.grid-cell:disabled[b-khu2xwjc1b] {
    cursor: not-allowed;
    opacity: 0.65;
}

/* ===== Available (Unassigned) — Neutral slate ===== */
.grid-cell.available[b-khu2xwjc1b] {
    background: linear-gradient(145deg, #e2e5e9, #cdd1d6);
    color: #4a5568;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5),
                0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===== Selected — Vibrant blue glow ===== */
.grid-cell.selected[b-khu2xwjc1b] {
    background: linear-gradient(145deg, #4a90d9, #2d6faa);
    color: #ffffff;
    box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.5),
                0 2px 8px rgba(45, 111, 170, 0.4);
    animation: selected-glow 1.5s ease-in-out infinite alternate;
}

/* ===== Owned by Me — Teal/Cyan ===== */
.grid-cell.owned-mine[b-khu2xwjc1b] {
    background: linear-gradient(145deg, #4db6ac, #26a69a);
    color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25),
                0 1px 4px rgba(38, 166, 154, 0.3);
}

/* ===== Owned by Others — Soft purple ===== */
.grid-cell.owned-other[b-khu2xwjc1b] {
    background: linear-gradient(145deg, #9575cd, #7e57c2);
    color: #ffffff;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15),
                0 1px 4px rgba(126, 87, 194, 0.25);
}

/* ===== Winner — Gold with shimmer ===== */
.grid-cell.winning[b-khu2xwjc1b] {
    background: linear-gradient(145deg, #ffd54f, #f5c518);
    color: #5d4200;
    box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.6),
                0 2px 12px rgba(245, 197, 24, 0.4);
    animation: winner-glow 1.5s ease-in-out infinite;
}

.grid-cell.winning .number[b-khu2xwjc1b] {
    text-shadow: 0 1px 2px rgba(245, 197, 24, 0.5);
}

/* ===== Animations ===== */
@@keyframes selected-glow {
    from[b-khu2xwjc1b] { box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.4), 0 2px 8px rgba(45, 111, 170, 0.3); }
    to[b-khu2xwjc1b]   { box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.6), 0 2px 12px rgba(45, 111, 170, 0.5); }
}

@@keyframes winner-glow {
    0%[b-khu2xwjc1b], 100%[b-khu2xwjc1b] { box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.6), 0 2px 8px rgba(245, 197, 24, 0.3); }
    50%[b-khu2xwjc1b]      { box-shadow: 0 0 0 4px rgba(245, 197, 24, 0.8), 0 4px 20px rgba(245, 197, 24, 0.5); }
}

/* ===== Responsive — Large screens ===== */
@@media (min-width: 1200px) {
    .board-grid-container[b-khu2xwjc1b],
    .board-grid[b-khu2xwjc1b] {
        max-width: min(85vw, 960px);
    }
}

@@media (min-width: 1600px) {
    .board-grid-container[b-khu2xwjc1b],
    .board-grid[b-khu2xwjc1b] {
        max-width: min(70vw, 1100px);
    }
}

/* ===== Responsive — Small screens ===== */
@@media (max-width: 576px) {
    .board-grid-container[b-khu2xwjc1b],
    .board-grid[b-khu2xwjc1b] {
        max-width: 100%;
    }

    .board-grid[b-khu2xwjc1b] {
        gap: 2px;
    }

    .grid-cell[b-khu2xwjc1b] {
        border-radius: 3px;
    }
}

/* ===== Dark mode overrides (baseline) ===== */
:global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.available {
    background: linear-gradient(145deg, #3a3f47, #2d3239);
    color: #9ca3af;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.3);
}

@@media (hover: hover) {
    :global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.available:hover:not(:disabled) {
        background: linear-gradient(145deg, #454b54, #383e47);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

:global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.selected {
    background: linear-gradient(145deg, #3a7bd5, #2563a8);
    color: #e8f0fe;
    box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.5),
                0 2px 8px rgba(37, 99, 168, 0.4);
}

:global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.owned-mine {
    background: linear-gradient(145deg, #2d8f85, #1f7a71);
    color: #d4f5f0;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1),
                0 1px 4px rgba(38, 166, 154, 0.25);
}

:global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.owned-other {
    background: linear-gradient(145deg, #6b49a8, #5a3d8f);
    color: #ddd0f5;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08),
                0 1px 4px rgba(126, 87, 194, 0.2);
}

:global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.winning {
    background: linear-gradient(145deg, #d4a017, #b8900f);
    color: #fff8e1;
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.6),
                0 2px 12px rgba(184, 144, 15, 0.4);
}

/* ==========================================================================
   3D CARD-FLIP — Progressive Enhancement
   Only activates on screens >= 768px that support preserve-3d and have
   no reduced-motion preference. Mobile/baseline stays 2D.
   CRITICAL: Do NOT add overflow:hidden, opacity<1, filter, clip-path,
   contain:paint, or mix-blend-mode to .grid-cell inside this block.
   These properties silently kill preserve-3d (per CSS Transforms L2 spec).
   ========================================================================== */

@@supports (transform-style: preserve-3d) {
  @@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {

    /* --- 3D Context on Grid Container ---
       Single shared perspective = 1 compositor context (not 100).
       Cards at grid edges get natural foreshortening. */
    .board-grid[b-khu2xwjc1b] {
        perspective: 800px;
        perspective-origin: 50% 50%;
    }

    /* --- Grid Cell becomes 3D-aware ---
       overflow MUST be visible (overflow:hidden kills preserve-3d per spec). */
    .grid-cell[b-khu2xwjc1b] {
        transform-style: preserve-3d;
        background: transparent;
        overflow: visible;
        contain: layout style;
    }

    /* --- Card Faces: positioned, backface hidden --- */
    .card-face[b-khu2xwjc1b] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0;
        border-radius: 6px;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        font-weight: 700;
        font-size: clamp(0.6rem, 1.1vw, 0.95rem);
    }

    /* Front face: faces the viewer by default.
       Explicit rotateY(0deg) required for Firefox backface-visibility support. */
    .card-face.front[b-khu2xwjc1b] {
        transform: rotateY(0deg);
    }

    /* Back face: pre-rotated 180deg, hidden by backface-visibility */
    .card-face.back[b-khu2xwjc1b] {
        transform: rotateY(180deg);
    }

    /* --- Flip Transitions (only after initial render) ---
       Gated by .board-loaded to prevent pre-assigned squares from
       showing a spurious flip animation on page load. */
    .board-loaded .card-face[b-khu2xwjc1b] {
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Stagger flip transitions for bulk state changes (board completion,
       SignalR updates). Capped at 0.8s total regardless of grid size. */
    .board-loaded .grid-cell .card-face[b-khu2xwjc1b] {
        transition-delay: calc(var(--cell-index, 0) * (0.8s / (var(--grid-size, 10) * var(--grid-size, 10))));
    }

    /* --- State Colors on Faces --- */

    /* Available (default) — grey front visible */
    .grid-cell.available .card-face.front[b-khu2xwjc1b] {
        background: linear-gradient(145deg, #e2e5e9, #cdd1d6);
        color: #4a5568;
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5),
                    0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .grid-cell.available .card-face.back[b-khu2xwjc1b] {
        background: linear-gradient(145deg, #d0d3d8, #b8bcc2);
        color: #4a5568;
    }

    /* Selected — flip to show blue back */
    .grid-cell.selected .card-face.front[b-khu2xwjc1b] {
        transform: rotateY(180deg);
    }
    .grid-cell.selected .card-face.back[b-khu2xwjc1b] {
        transform: rotateY(0deg);
        background: linear-gradient(145deg, #4a90d9, #2d6faa);
        color: #fff;
    }

    /* Owned by me — flip to show teal back */
    .grid-cell.owned-mine .card-face.front[b-khu2xwjc1b] {
        transform: rotateY(180deg);
    }
    .grid-cell.owned-mine .card-face.back[b-khu2xwjc1b] {
        transform: rotateY(0deg);
        background: linear-gradient(145deg, #4db6ac, #26a69a);
        color: #fff;
    }

    /* Owned by other — flip to show purple back */
    .grid-cell.owned-other .card-face.front[b-khu2xwjc1b] {
        transform: rotateY(180deg);
    }
    .grid-cell.owned-other .card-face.back[b-khu2xwjc1b] {
        transform: rotateY(0deg);
        background: linear-gradient(145deg, #9575cd, #7e57c2);
        color: #fff;
    }

    /* Winner — flip to show gold back */
    .grid-cell.winning .card-face.front[b-khu2xwjc1b] {
        transform: rotateY(180deg);
    }
    .grid-cell.winning .card-face.back[b-khu2xwjc1b] {
        transform: rotateY(0deg);
        background: linear-gradient(145deg, #ffd54f, #f5c518);
        color: #5d4200;
    }

    /* --- Staggered Load Reveal ---
       Only runs before .board-loaded is set (initial render).
       Uses scale only (no rotateY) to avoid fighting face rotations
       on pre-assigned squares. Capped at 1s total. */
    .board-grid:not(.board-loaded) .grid-cell[b-khu2xwjc1b] {
        animation: card-reveal 0.4s ease-out backwards;
        animation-delay: calc(var(--cell-index, 0) * (1s / (var(--grid-size, 10) * var(--grid-size, 10))));
    }

    @@keyframes card-reveal {
        from[b-khu2xwjc1b] {
            opacity: 0;
            transform: scale(0.85);
        }
        to[b-khu2xwjc1b] {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* --- 3D Hover (mouse devices only) --- */
    @@media (hover: hover) {
        .grid-cell:hover:not(:disabled)[b-khu2xwjc1b] {
            transform: translateZ(8px) scale(1.06);
            z-index: 2;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            filter: none;
        }
    }

    /* --- Perspective Scaling for Larger Screens --- */
    @@media (min-width: 1200px) {
        .board-grid[b-khu2xwjc1b] { perspective: 1000px; }
    }

    @@media (min-width: 1600px) {
        .board-grid[b-khu2xwjc1b] { perspective: 1200px; }
    }

    /* --- 3D Dark Mode Face Colors --- */
    :global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.available .card-face.front {
        background: linear-gradient(145deg, #3a3f47, #2d3239);
        color: #9ca3af;
        box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06),
                    0 1px 3px rgba(0, 0, 0, 0.3);
    }
    :global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.available .card-face.back {
        background: linear-gradient(145deg, #2e333a, #24282e);
        color: #9ca3af;
    }

    :global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.selected .card-face.back {
        background: linear-gradient(145deg, #3a7bd5, #2563a8);
        color: #e8f0fe;
    }

    :global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.owned-mine .card-face.back {
        background: linear-gradient(145deg, #2d8f85, #1f7a71);
        color: #d4f5f0;
    }

    :global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.owned-other .card-face.back {
        background: linear-gradient(145deg, #6b49a8, #5a3d8f);
        color: #ddd0f5;
    }

    :global([data-theme="dark"])[b-khu2xwjc1b]  .grid-cell.winning .card-face.back {
        background: linear-gradient(145deg, #d4a017, #b8900f);
        color: #fff8e1;
    }

  } /* end @media min-width + reduced-motion */
} /* end @supports */

/* ===== Reduced Motion — Top-level override ===== */
@@media (prefers-reduced-motion: reduce) {
    .grid-cell[b-khu2xwjc1b],
    .card-face[b-khu2xwjc1b] {
        transition: none !important;
        animation: none !important;
    }
}

/* ===== Print — Clean 2D grid ===== */
@@media print {
    .grid-cell[b-khu2xwjc1b] {
        transform: none !important;
        overflow: hidden !important;
    }
    .card-face[b-khu2xwjc1b] {
        position: static !important;
        transform: none !important;
    }
    .card-face.back[b-khu2xwjc1b] {
        display: none !important;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-jkhtkqs54k] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-jkhtkqs54k] {
    flex: 1;
    background-color: #f8f9fa;
}

:global([data-theme="dark"]) main[b-jkhtkqs54k] {
    background-color: var(--bs-body-bg, #1a1a2e);
}
/* /Layout/NavMenu.razor.rz.scp.css */
[b-rkkp07lhaq] .nav-link.active {
    font-weight: 600;
}
/* /Pages/Boards/BoardDetail.razor.rz.scp.css */
/* ===== Celebration Overlay ===== */
.celebration-overlay[b-vs8o6ad4ae] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-in;
}

.celebration-content[b-vs8o6ad4ae] {
    text-align: center;
    animation: bounceIn 0.5s ease-out;
}

@@keyframes fadeIn {
    from[b-vs8o6ad4ae] { opacity: 0; }
    to[b-vs8o6ad4ae] { opacity: 1; }
}

@@keyframes bounceIn {
    0%[b-vs8o6ad4ae] { transform: scale(0.5); opacity: 0; }
    70%[b-vs8o6ad4ae] { transform: scale(1.1); }
    100%[b-vs8o6ad4ae] { transform: scale(1); opacity: 1; }
}

/* ===== Board Legend ===== */
/* DEBT-122 fix: Use CSS variables instead of hardcoded light-mode colors */
.board-legend[b-vs8o6ad4ae] {
    padding: 0.75rem 1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-radius: 8px;
    border: 1px solid var(--bs-border-color, #e9ecef);
}

.legend-item[b-vs8o6ad4ae] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-body-color, #495057);
}

.legend-swatch[b-vs8o6ad4ae] {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}

.legend-swatch.available[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #e2e5e9, #cdd1d6);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.legend-swatch.selected[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #4a90d9, #2d6faa);
    box-shadow: 0 1px 3px rgba(45, 111, 170, 0.4);
}

.legend-swatch.owned-mine[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #4db6ac, #26a69a);
    box-shadow: 0 1px 3px rgba(38, 166, 154, 0.3);
}

.legend-swatch.owned-other[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #9575cd, #7e57c2);
    box-shadow: 0 1px 3px rgba(126, 87, 194, 0.3);
}

.legend-swatch.winning[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #ffd54f, #f5c518);
    box-shadow: 0 1px 3px rgba(245, 197, 24, 0.4);
}

/* ===== Dark Mode ===== */
:global([data-theme="dark"]) .board-legend[b-vs8o6ad4ae] {
    background: var(--bs-card-bg, #16213e);
    border-color: var(--bs-border-color, #2a2a4a);
}

:global([data-theme="dark"]) .legend-item[b-vs8o6ad4ae] {
    color: var(--bs-body-color, #e0e0e0);
}

:global([data-theme="dark"]) .legend-swatch.available[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #3a3f47, #2d3239);
}

:global([data-theme="dark"]) .legend-swatch.selected[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #3a7bd5, #2563a8);
}

:global([data-theme="dark"]) .legend-swatch.owned-mine[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #2d8f85, #1f7a71);
}

:global([data-theme="dark"]) .legend-swatch.owned-other[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #6b49a8, #5a3d8f);
}

:global([data-theme="dark"]) .legend-swatch.winning[b-vs8o6ad4ae] {
    background: linear-gradient(145deg, #d4a017, #b8900f);
}

/* ===== 3D Legend Hint ===== */
@@supports (transform-style: preserve-3d) {
    @@media (min-width: 768px) and (hover: hover) {
        .legend-swatch[b-vs8o6ad4ae] {
            transform: perspective(80px) rotateY(-8deg) rotateX(4deg);
            transition: transform 0.2s ease;
        }
        .legend-swatch:hover[b-vs8o6ad4ae] {
            transform: perspective(80px) rotateY(0deg) rotateX(0deg);
        }
    }
}