/* 自訂樣式（原本內嵌於 <style>，抽出獨立檔案） */

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: fixed;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: none;
    touch-action: none;
}

body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.scrollable-content {
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.scrollable-content::-webkit-scrollbar { width: 0px; background: transparent; }

/* ---------- Modal：統一以 .is-open 切換（取代 hidden class + inline style 雙軌）---------- */
.modal { display: none; }
.modal.is-open { display: flex; }

/* ---------- 數獨格線 ---------- */
.sudoku-cell {
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    touch-action: manipulation;
}
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #475569; }
.sudoku-cell:nth-child(9n+3),
.sudoku-cell:nth-child(9n+6) { border-right: 2px solid #475569; }
.sudoku-cell:nth-child(9n) { border-right: none; }
.sudoku-cell:nth-child(n+73) { border-bottom: none; }

.note-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.note-num {
    font-size: 8px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}
@media (min-width: 768px) { .note-num { font-size: 11px; } }

.dark .sudoku-cell { border-color: #334155; }
.dark .sudoku-cell:nth-child(n+19):nth-child(-n+27),
.dark .sudoku-cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #94a3b8; }
.dark .sudoku-cell:nth-child(9n+3),
.dark .sudoku-cell:nth-child(9n+6) { border-right: 2px solid #94a3b8; }
.dark .note-num { color: #94a3b8; }

.numpad-btn { touch-action: manipulation; }
.numpad-btn.completed {
    opacity: 0.2;
    pointer-events: none;
    filter: grayscale(100%);
}

/* ---------- 鍵盤焦點可見（無障礙）---------- */
button:focus-visible {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

/* ---------- 減少動態偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}