body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 24px 10px 10px;
    box-sizing: border-box;
}

.game-dashboard-container {
    position: relative; /* Context anchor for the level-1 keypad positioning */
    text-align: center;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}

.stats-panel {
    margin-bottom: 15px;
    font-weight: 500;
    color: #495057;
}

/* 9x9 Layout Frame */
.sudoku-grid-container {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1 / 1;
    gap: 1px;
    background-color: #343a40;
    border: 3px solid #212529;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Individual Cell Matrix Wrappers */
.sudoku-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    overflow: visible; /* Allows the larger keypad layer to spill over borders cleanly */
    user-select: none;
    -webkit-touch-callout: none; /* Suppresses iOS's long-press copy/select bubble */
    -webkit-user-select: none;
    touch-action: manipulation; /* Blocks double-tap-zoom/other gestures racing our own long-press timer */
}

/* Thick Border Grid Enforcements for 3x3 Blocks */
.sudoku-cell[data-col="2"], .sudoku-cell[data-col="5"] { border-right: 2px solid #212529; }
.sudoku-cell[data-row="2"], .sudoku-cell[data-row="5"] { border-bottom: 2px solid #212529; }

/* Press-and-hold charge-up glow, ramping toward the long-press threshold
   (see SudokuEngine.startPressGlow/resetPressGlow, LAYER 3 above value +
   candidates so it reads clearly while held). */
.sudoku-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: rgba(13, 110, 253, 0);
    box-shadow: inset 0 0 0 0 rgba(13, 110, 253, 0.85);
    transition: background-color var(--press-transition-duration, 150ms) linear,
                box-shadow var(--press-transition-duration, 150ms) linear;
    z-index: 4;
}

.sudoku-cell.cell-press-charging::after {
    background-color: rgba(13, 110, 253, 0.25);
    box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.85);
}

/* LAYER 1: Core Value Layer */
.cell-value-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 6vw, 26px);
    font-weight: bold;
    background: transparent;
    user-select: none;
}

/* Original preset numbers explicitly render black */
.cell-value-layer.cell-given {
    background-color: #e9ecef;
    color: #000000 !important;
}

/* Correct user entries dynamically render blue */
.cell-value-layer.cell-user-correct {
    color: #0d6efd !important;
}

/* LAYER 2: Candidate Overlay Grid */
.candidate-grid-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    background: transparent;
}

.candidate-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: clamp(8px, 2.2vw, 11px);
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none; /* Native <button> elements don't reliably inherit this from ancestors on iOS */
    touch-action: manipulation;

    /* Default hidden state */
    color: rgba(0, 0, 0, 0);
    transition: color 0.2s ease, transform 0.12s ease;
}

/* Darkened legible baseline for valid candidates */
.candidate-button.candidate-possible {
    color: rgba(33, 37, 41, 0.70); /* Bold, crisp gray watermark */
}

/* Turned-off candidate, kept faintly visible as a reminder it can be tapped back on */
.candidate-button.candidate-ghost {
    color: rgba(33, 37, 41, 0.22);
}

/* Player-chosen highlight marks — a filled shape behind the digit. Colors and
   text are set inline by game_engine.js so they always match; this just
   supplies the shape. Circle vs. rounded square gives the two marking uses a
   difference you can see by silhouette alone, not just by color. */
.candidate-button.candidate-highlight-1,
.candidate-button.candidate-highlight-2 {
    font-weight: 700;
}
.candidate-button.candidate-highlight-1 {
    border-radius: 50%;
}
.candidate-button.candidate-highlight-2 {
    border-radius: 25%;
}

/* GLOBAL LEVEL-1 SINGLE KEYPAD STRUCTURE */
.global-keypad-overlay {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    width: 100%;
    max-width: 540px;
    height: clamp(140px, 36vw, 168px);
    display: none;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background-color: #f8f9fa;
    border: 2px solid #343a40;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    padding: 4px;
    gap: 4px;
    z-index: 4;
    /* Grows in from whichever edge sits nearest the cell that opened it -
       see SudokuEngine.showGlobalKeypad, which sets --keypad-anim-origin
       and --keypad-anim-offset before toggling .keypad-anim-start off. */
    transform-origin: var(--keypad-anim-origin, center);
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity 160ms ease, transform 160ms ease;
}
.global-keypad-overlay.keypad-anim-start {
    opacity: 0;
    transform: scale(0.85) translateY(var(--keypad-anim-offset, 0px));
}
@media (prefers-reduced-motion: reduce) {
    .global-keypad-overlay {
        transition: none;
    }
}

.keypad-btn {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: clamp(18px, 5vw, 22px);
    font-weight: bold;
    color: #212529;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    min-width: 44px;
    min-height: 44px;
}
.keypad-btn:hover { background-color: #e9ecef; }
.keypad-btn.cancel-btn { background-color: #dc3545; color: #ffffff; }

/* Pencil (toggle mark mode) and # (clear cell) read as a distinct, secondary
   pair from the digit/cancel keys, using the app's existing blue accent. */
.keypad-btn.pencil-btn,
.keypad-btn.hash-btn {
    color: #0d6efd;
    border-color: #0d6efd;
}
.keypad-btn.pencil-btn.active {
    background-color: #0d6efd;
    color: #ffffff;
}

/* # lights up brighter than Pencil — a solid fill plus a glow ring — since
   it means a value entry is actively pending on the next digit tap. */
.keypad-btn.hash-btn.active {
    background-color: #0d6efd;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35), 0 0 10px 2px rgba(13, 110, 253, 0.55);
}

/* Error Animation Keyframes */
@keyframes errorWiggle {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}
.candidate-error-wiggle { animation: errorWiggle 0.12s ease-in-out infinite; }

.dev-btn {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
}

.level-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
}

.level-label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
}

.level-btn-group {
    display: flex;
    gap: 8px;
}

.level-btn {
    background: transparent;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    color: #343a40;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.level-btn:hover {
    background-color: #e9ecef;
}

.level-select {
    display: none;
    background: transparent;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: #343a40;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.level-select:hover {
    background-color: #e9ecef;
}

/* Below this width the button row wraps to a second line; collapse to a dropdown instead */
@media (max-width: 480px) {
    .level-btn-group {
        display: none;
    }
    .level-select {
        display: inline-block;
    }
}

.pencil-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 0 16px;
}

.toggle-label {
    font-size: 13px;
    color: #495057;
}

.mark-mode-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #495057;
}

.mark-mode-slider {
    position: relative;
    display: flex;
    width: 186px;
    background-color: #ced4da;
    border-radius: 22px;
    padding: 3px;
}

.mark-mode-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(33.333% - 2px);
    background-color: #0d6efd;
    border-radius: 18px;
    transition: transform 0.2s ease;
}

.mark-mode-slider[data-active="MANUAL"] .mark-mode-thumb {
    transform: translateX(100%);
}

.mark-mode-slider[data-active="AUTO"] .mark-mode-thumb {
    transform: translateX(200%);
}

.mark-mode-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    border: none;
    background: transparent;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    border-radius: 18px;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.mark-mode-slider[data-active="NONE"] .mark-mode-btn[data-mode="NONE"],
.mark-mode-slider[data-active="MANUAL"] .mark-mode-btn[data-mode="MANUAL"],
.mark-mode-slider[data-active="AUTO"] .mark-mode-btn[data-mode="AUTO"] {
    color: #ffffff;
}

.mark-mode-btn:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}