/* ==========================================================================
   Binairo (Takuzu) — Game Screen Layer CSS
   Follows Logic Notebook Layer Model & Shared Architectural Contracts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Board Grid Container (Game Slot Module)
   -------------------------------------------------------------------------- */
.bn-board {
    display: grid;
    /* columns, rows, width, height dynamically set by JS via setBoardSize() */
    gap: 3px;
    margin: 0 auto;
    touch-action: manipulation;
}

/* Universal iOS Safari touch callout and text selection protection */
.bn-board,
.bn-cell,
.bn-cell * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* --------------------------------------------------------------------------
   Cells — Base Presentation (SVG Paper Tile + Label)
   -------------------------------------------------------------------------- */
.bn-cell {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-main, 'Roboto', sans-serif);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.07s ease;
    border-radius: 3px;
    overflow: visible;
}


/* The paper tile SVG background fills the cell */
.bn-cell .paper-tile-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    border-radius: 3px;
}

/* Digit label sits clearly above the SVG paper tile */
.bn-cell-label {
    position: relative;
    z-index: 1;
    font-size: var(--bn-font-size, 20px);
    line-height: 1;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Cell States & Interactive Feedback
   -------------------------------------------------------------------------- */
.bn-cell:hover:not(.bn-cell--given) {
    transform: translateY(-1px);
    z-index: 2;
}

.bn-cell:active:not(.bn-cell--given) {
    transform: translateY(1px);
}

/* Given (pre-filled starter) cells */
.bn-cell--given {
    cursor: default;
}
.bn-cell--given .bn-cell-label {
    font-weight: 700;
}

/* Player-entered cells */
.bn-cell--player .bn-cell-label {
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Digit Palette (Warm Graphite vs Warm Terracotta)
   -------------------------------------------------------------------------- */
.bn-cell--zero .bn-cell-label {
    color: #2b3a42;
}

.bn-cell--one .bn-cell-label {
    color: #c85a32;
}

/* --------------------------------------------------------------------------
   Persistent Error Indicator (Logic Notebook Difficulty Contract)
   -------------------------------------------------------------------------- */
.bn-cell--error::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c0392b;
    z-index: 3;
    box-shadow: 0 0 3px rgba(192, 57, 43, 0.5);
}

/* --------------------------------------------------------------------------
   Hinted Cell Highlight (Golden border frame matching Nonograms)
   -------------------------------------------------------------------------- */
.bn-cell--hinted::after {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 2;
    border: 2px solid rgba(245, 196, 46, 0.95);
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(245, 196, 46, 0.75);
    pointer-events: none;
}