/*
 * style.css — Game-specific styles
 * NOTE: No @import "tailwindcss" here — Tailwind v4 is configured
 * via <style type="text/tailwindcss"> inline in index.html.
 * This file is loaded as regular CSS.
 */

/* ── CSS Custom Properties (per theme) ──────────────────────── */
:root {
    --bg-page:              #f4f7fb;
    --bg-card:              #ffffff;
    --text-main:            #0f172a;
    --text-sub:             #64748b;
    --text-muted:           #94a3b8;
    --border-thick:         #1e293b;
    --border-thin:          #cbd5e1;
    --cell-bg:              #ffffff;
    --cell-even-box:        #f7faff;
    --cell-text-init:       #020617;
    --cell-text-user:       #2563eb;
    --cell-highlight-peer:  #e8f0fe;
    --cell-highlight-same:  #cfe1fd;
    --cell-selected:        #bad8fb;
    --cell-error-bg:        #fee2e2;
    --cell-error-text:      #dc2626;
    --action-btn-bg:        #f1f5f9;
    --action-btn-hover:     #e2e8f0;
    --action-btn-text:      #475569;
    --keypad-text:          #2563eb;
    --keypad-hover:         #e0edff;
    --keypad-subtext:       #94a3b8;
    --keypad-selected-bg:   #2563eb;
    --keypad-selected-text: #ffffff;
    --modal-bg:             #ffffff;
    --badge-bg:             #e2e8f0;
    --badge-text:           #334155;
}

[data-theme="dark"] {
    --bg-page:              #0b1120;
    --bg-card:              #1e293b;
    --text-main:            #f8fafc;
    --text-sub:             #94a3b8;
    --text-muted:           #64748b;
    --border-thick:         #94a3b8;
    --border-thin:          #334155;
    --cell-bg:              #111827;
    --cell-even-box:        #151f30;
    --cell-text-init:       #f8fafc;
    --cell-text-user:       #60a5fa;
    --cell-highlight-peer:  #1e293b;
    --cell-highlight-same:  #1e3a5f;
    --cell-selected:        #1d4ed8;
    --cell-error-bg:        #7f1d1d;
    --cell-error-text:      #fca5a5;
    --action-btn-bg:        #1e293b;
    --action-btn-hover:     #334155;
    --action-btn-text:      #cbd5e1;
    --keypad-text:          #60a5fa;
    --keypad-hover:         #1e3a5f;
    --keypad-subtext:       #64748b;
    --keypad-selected-bg:   #3b82f6;
    --keypad-selected-text: #ffffff;
    --modal-bg:             #1e293b;
    --badge-bg:             #334155;
    --badge-text:           #cbd5e1;
}

[data-theme="sepia"] {
    --bg-page:              #fbf7ee;
    --bg-card:              #f4ece1;
    --text-main:            #3d312a;
    --text-sub:             #7c6f64;
    --text-muted:           #a89984;
    --border-thick:         #504945;
    --border-thin:          #d5c4a1;
    --cell-bg:              #fdfaf4;
    --cell-even-box:        #f5eedf;
    --cell-text-init:       #282828;
    --cell-text-user:       #b54712;
    --cell-highlight-peer:  #f2e5bc;
    --cell-highlight-same:  #ebdbb2;
    --cell-selected:        #d79921;
    --cell-error-bg:        #f8d7da;
    --cell-error-text:      #a81c24;
    --action-btn-bg:        #ebe3d5;
    --action-btn-hover:     #decbb5;
    --action-btn-text:      #504945;
    --keypad-text:          #b54712;
    --keypad-hover:         #ebd5b3;
    --keypad-subtext:       #8c7f70;
    --keypad-selected-bg:   #b54712;
    --keypad-selected-text: #ffffff;
    --modal-bg:             #fbf7ee;
    --badge-bg:             #ebe3d5;
    --badge-text:           #504945;
}

/* ── Global Reset ────────────────────────────────────────────── */
* {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-page);
    color: var(--text-main);
    touch-action: manipulation;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── Sudoku Grid ─────────────────────────────────────────────── */
/*
 * Grid cutoff fix (#1): explicit grid-template-rows + minmax(0,1fr)
 * ensures all 9 rows fit within the aspect-ratio square.
 */
/*
 * Grid cutoff fix (#1): explicit grid-template-rows + minmax(0,1fr)
 * ensures all 9 rows fit within the aspect-ratio square.
 *
 * Responsive sizing:
 *   Mobile  : min(100%, dvh - 310px, 480px)
 *   lg 900+ : min(dvh - 180px, 55vw, 640px) — fills available height
 *   xl 1280+: cap at 680px
 */
.sudoku-grid-wrapper {
    width: min(100%, calc(100dvh - 240px), 600px);
    margin: 0 auto;
}
@media (min-width: 900px) {
    .sudoku-grid-wrapper {
        width: min(100%, calc(100dvh - 330px), 600px);
    }
}

.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-template-rows: repeat(9, minmax(0, 1fr));
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    border: 2.5px solid var(--border-thick);
    border-radius: 0.75rem;
    background-color: var(--cell-bg);
    box-shadow: 0 4px 15px -1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sudoku-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    font-size: clamp(1.1rem, 4.2vw, 1.95rem);
    line-height: 1;
    font-weight: 500;
    color: var(--text-main);
    border-right: 1px solid var(--border-thin);
    border-bottom: 1px solid var(--border-thin);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.1s ease;
    background-color: var(--cell-bg);
}

/* #13 Alternate 3×3 box tinting */
.sudoku-cell.cell-even-box {
    background-color: var(--cell-even-box);
}

/* Thick 3×3 block boundaries */
.sudoku-cell:nth-child(3n) { border-right: 2.5px solid var(--border-thick); }
.sudoku-cell:nth-child(9n) { border-right: none; }
.cell-row-3, .cell-row-6   { border-bottom: 2.5px solid var(--border-thick) !important; }
.cell-row-9                 { border-bottom: none !important; }

/* Notes mini-grid */
.notes-grid {
    position: absolute;
    inset: 1px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows:    repeat(3, minmax(0, 1fr));
    pointer-events: none;
}
.note-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.48rem, 1.35vw, 0.7rem);
    font-weight: 500;
    color: var(--text-sub);
    line-height: 1;
}

/* ── Cell State Classes ──────────────────────────────────────── */
.highlight-peer  { background-color: var(--cell-highlight-peer)  !important; }
.highlight-same  { background-color: var(--cell-highlight-same)  !important; font-weight: 600; }
.cell-selected   { background-color: var(--cell-selected)        !important; }
.cell-error      { background-color: var(--cell-error-bg)        !important; color: var(--cell-error-text) !important; animation: pulse-shake 0.3s ease; }
.initial-cell    { font-weight: 700; color: var(--cell-text-init); }
.user-cell       { color: var(--cell-text-user); font-weight: 600; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes pulse-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-3px); }
    75%       { transform: translateX(3px); }
}

@keyframes pop-in {
    0%   { transform: scale(0.7); opacity: 0.5; }
    70%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.cell-pop { animation: pop-in 0.18s ease-out; }

/* ── Action Buttons ──────────────────────────────────────────── */
.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--action-btn-text);
    font-size: 0.68rem;
    font-weight: 500;
    transition: all 0.15s ease;
    touch-action: manipulation;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
@media (min-width: 900px) {
    .action-btn { font-size: 0.85rem; gap: 6px; }
}
.action-btn .btn-icon-bubble {
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--action-btn-bg);
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}
@media (min-width: 900px) {
    .action-btn .btn-icon-bubble { width: 56px; height: 56px; }
    .action-btn .btn-icon-bubble svg { width: 26px; height: 26px; }
}
.action-btn:hover .btn-icon-bubble { background-color: var(--action-btn-hover); }
.action-btn:active                 { transform: scale(0.91); }
.action-btn:disabled               { opacity: 0.32; pointer-events: none; }

/* ── Notes badge variants ───────────────────────────────────── */
.notes-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    line-height: 1;
}
.notes-badge--off { background-color: #94a3b8; }
.notes-badge--on  { background-color: #2563eb; }
.notes-on         { background-color: #dbeafe !important; color: #2563eb !important; }

/* ── Keypad ──────────────────────────────────────────────────── */
.key-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px 0;
    color: var(--keypad-text);
    font-size: clamp(1.55rem, 5vw, 2.2rem);
    font-weight: 400;
    line-height: 1;
    border-radius: 0.6rem;
    transition: transform 0.1s, background-color 0.12s, opacity 0.2s, color 0.15s;
    touch-action: manipulation;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;
}
@media (min-width: 900px) {
    .key-btn {
        padding: 6px 0;
        font-size: 2.5rem;
        border-radius: 0.8rem;
    }
}
.key-btn:active:not(.completed) {
    background-color: var(--keypad-hover);
    transform: scale(0.91);
}
/* #12 Number-first selected digit highlight */
.key-btn.key-selected {
    background-color: var(--keypad-selected-bg) !important;
    color: var(--keypad-selected-text) !important;
    border-radius: 0.6rem;
}
.key-btn.key-selected .key-count { color: rgba(255,255,255,0.7); }
.key-btn .key-count {
    font-size: 0.65rem;
    color: var(--keypad-subtext);
    font-weight: 500;
    margin-top: 1px;
}
.key-btn.completed         { opacity: 0.22; cursor: default; }
.key-btn.completed .key-count { visibility: hidden; }

/* ── Loading Overlay ─────────────────────────────────────────── */
#loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
    border-radius: 0.75rem;
    z-index: 30;
}
[data-theme="dark"] #loading-overlay { background: rgba(17,24,39,0.7); }

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-thin);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Endgame icon ────────────────────────────────────────────── */
.endgame-icon {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* ── Toast ────────────────────────────────────────────────────── */
#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
    text-overflow: ellipsis;
    overflow: hidden;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }