/* ---------------------------------------------------------------------------
   Variables
   App-level variables live at the top so they can be overridden by palette
   classes that are declared later in the file (body.palette-*).
   ------------------------------------------------------------------------ */
#root { --cell-size: 40px; }
:root { --cell-size: 40px; --app-bg: linear-gradient(180deg,#f6fbff,#f3f8f9); --panel-bg: linear-gradient(180deg, rgb(232,232,232), #ffffff); --primary-button-bg: linear-gradient(180deg,#3b82f6,#2563eb); --primary-button-color: #fff; --meta-color: #475569; }


/* ---------------------------------------------------------------------------
   Base / Reset
   Generic app-level rules: fonts, spacing, panel container, headings, buttons
   ------------------------------------------------------------------------ */
body { font-family: Inter, system-ui, 'Segoe UI', Roboto, Arial; margin: 24px; background: var(--app-bg); color: #0f172a; }
main { max-width: 980px; margin: 0 auto; background: var(--panel-bg, linear-gradient(180deg, rgb(232,232,232), #ffffff)); background-position: var(--panel-bg-position, center); background-size: var(--panel-bg-size, cover); background-repeat: var(--panel-bg-repeat, no-repeat); padding: 18px; border-radius: 12px; box-shadow: 0 6px 24px rgba(15,23,42,0.08); }

h1{margin:0 0 8px 0;font-size:20px;color:#0f172a}
button{background: var(--primary-button-bg); color: var(--primary-button-color); padding:8px 12px;border-radius:8px;border:none;cursor:pointer}
button:hover{opacity:0.95;transform:translateY(-1px)}

#meta{font-size:14px;color:var(--meta-color,#475569)}


/* ---------------------------------------------------------------------------
   Layout
   Two-column layout (board + sidebar) and small helpers governing spacing
   ------------------------------------------------------------------------ */
.layout{display:flex;gap:18px;align-items:flex-start}
.layout #left{flex:1}
.layout #sidebar{width:260px}
.spacer { min-height: 24px; }

/* site helpers for static pages */
.site-main{ max-width:720px; margin:40px auto; padding:18px }
.site-footer{ text-align:center; margin-top:12px; color:#93c5fd }


/* ---------------------------------------------------------------------------
   Board grid and cells
   Core visual appearance for the 9x9 grid and individual cells
   ------------------------------------------------------------------------ */
#board { display: grid; grid-template-columns: repeat(9, var(--cell-size)); grid-gap: 6px; margin-top: 16px; position:relative; z-index:1 }
.cell { width: var(--cell-size); height: var(--cell-size); display: flex; align-items: center; justify-content: center; border: 1px solid #c7cfe3; font-weight: 700; font-size: 15px; cursor: pointer; background: #fff; border-radius: 6px; box-shadow: 0 1px 0 rgba(16,24,40,0.03); transition: box-shadow 120ms, transform 120ms; position:relative; z-index:2 }
.cell.prefilled { background: #eef2ff; color: #0f172a; }
.cell.empty { color: #334155; }

/* stronger selected visual */
#board .cell.selected{outline:4px solid rgba(59,130,246,0.30);box-shadow:0 8px 28px rgba(59,130,246,0.12);z-index:3;background:linear-gradient(180deg, rgba(59,130,246,0.03), rgba(59,130,246,0.01))}

/* Thicker separators for block boundaries — JS will add .sep-right / .sep-bottom */
.cell.sep-right{ border-right: 4px solid rgba(15,23,42,0.18); }
.cell.sep-bottom{ border-bottom: 4px solid rgba(15,23,42,0.18); }

/* Pencil-mode micro-grid inside a cell */
.cell .pencil { font-size: 10px; line-height: 12px; color: #475569; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 4px; }
.cell.pencil-mode { font-weight: 400; font-size: 11px; }
.cell .pencil div { width: 100%; height: 12px; display: flex; align-items: center; justify-content: center; }

/* transient visual feedback */
.cell.pulse{animation:cell-pulse 600ms ease}
@keyframes cell-pulse{0%{transform:scale(1);box-shadow:0 8px 28px rgba(59,130,246,0.12)}50%{transform:scale(1.06);box-shadow:0 12px 40px rgba(59,130,246,0.18)}100%{transform:scale(1);box-shadow:0 8px 28px rgba(59,130,246,0.12)}}


/* ---------------------------------------------------------------------------
   Numpad / keypad controls
   Number buttons, hints and explanatory text
   ------------------------------------------------------------------------ */
#numpad { margin-top: 4px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--cell-size); gap: 8px; width: 100%; }
.num { width: 100%; height: var(--cell-size); display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #e6edf3; background: linear-gradient(180deg,#ffffff,#f8fafc); cursor: pointer; font-weight: 700; }
.num:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16,24,40,0.06); }
.num.hint{font-size:12px;line-height:1.1;padding:6px;text-align:center;cursor:default;background:transparent;border:1px dashed #e6edf3;color:#475569}
.num-hint{ cursor:default; pointer-events:none; border: none; background: transparent; color: #475569; font-size: 12px; align-self: center; justify-self: center; padding: 6px; }


/* ---------------------------------------------------------------------------
   Header controls, selects and small buttons
   groupings that live in the app header and sidebar
   ------------------------------------------------------------------------ */
#controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.controls { display: flex; gap: 8px; align-items: center; }
.controls.controls-header { justify-content: space-between; gap: 12px; }
.controls.controls-group { gap: 8px; align-items: center; }
.controls select, .controls .settings-select { padding: 6px 8px; border-radius: 6px; border: 1px solid #e6edf3; background: white; }
.controls label { display: inline-flex; align-items: center; gap: 6px; }
.hidden { display: none; }

/* Icon-like small buttons (settings, menu, help) */
.icon-btn, button.icon { min-width: 36px; min-height: 36px; padding: 6px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
#settings-toggle, #main-menu-toggle, #tutorial-toggle{ min-width:36px; min-height:36px; padding:6px }
.sidebar-label{ margin-left:8px }

/* header speaker button styling */
#header-speaker, #header-speaker[aria-hidden]{
    background: var(--primary-button-bg); color: var(--primary-button-color); border-radius:8px; padding:6px; min-width:36px; min-height:36px; cursor:pointer; border:none; font-size:18px;
}
#header-speaker:hover{opacity:0.95;transform:translateY(-1px)}
.speaker-muted{ opacity: 0.6 }
.speaker-slashed{ text-decoration: line-through; }


/* ---------------------------------------------------------------------------
   Sidebar and small layout helpers
   ------------------------------------------------------------------------ */
.sidebar-controls { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.suggestions-info { align-self: center; margin-left: 8px; }
#sidebar-controls label{ margin-left:8px }


/* ---------------------------------------------------------------------------
   Menu, tutorial and small UI helpers
   ------------------------------------------------------------------------ */
.tutorial-card .tutorial-step-indicator + h3{ margin-left:8px }
.menu-row{ display:flex; align-items:center; gap:8px; padding:10px 6px; cursor:pointer }
.menu-row-icon{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center }
.menu-row-label{ flex:1 }
.tutorial-header{ display:flex; align-items:center }


/* ---------------------------------------------------------------------------
   Modals & Popups
   Centralized modal rules and specialized modal variants
   ------------------------------------------------------------------------ */
/* Ensure modals appear above all board content: raise z-indexes */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(2,6,23,0.5); backdrop-filter: blur(4px); z-index: 9999; }
/* show modal only when explicit aria-hidden is false */
.modal[aria-hidden="false"] { display: flex; }
/* Strong guard: ensure modals remain hidden unless explicitly opened via aria-hidden="false" */
.modal:not([aria-hidden="false"]){ display: none !important; }
.modal-card { background: linear-gradient(180deg,#ffffff,#f8fbff); padding: 18px; border-radius: 12px; box-shadow: 0 12px 40px rgba(2,6,23,0.3); width: min(720px,95%); z-index: 10000; }
.modal-card header button { background: transparent; border: none; color: #2563eb; cursor: pointer; }

/* Settings modal smaller variant */
.modal-card.settings-card { max-width: 360px; width: min(92%, 360px); padding: 18px; }
.modal-card.settings-card .modal-body { margin-top: 12px; display:flex; flex-direction:column; gap:8px }
.settings-label { font-size:14px; color:#334155 }
.settings-select { padding:8px 10px; border-radius:8px; border:1px solid #e6edf3; background:white }
.settings-audio-btn { background: var(--primary-button-bg); color: var(--primary-button-color); padding:8px 12px;border-radius:999px;border:none;cursor:pointer }
.settings-audio-btn:hover{opacity:0.95}

/* compact audio popup styling */
.audio-popup { background: transparent; align-items: flex-start; justify-content: flex-end; pointer-events: none; }
.audio-popup .modal-card { width: 260px; margin: 18px; pointer-events: auto; z-index:10005 }
#audio-popup { background: transparent; }
#audio-popup .modal-card { width: 260px; margin: 18px; pointer-events: auto; z-index:10005 }

/* Modal structure helpers (replaces inline styles) */
.modal-header{display:flex;justify-content:space-between;align-items:center}
.modal-body{margin-top:8px}
.modal-actions{margin-top:8px}

/* Auth form: stacked, aligned fields inside the auth modal */
#auth-modal .modal-body { display: flex; flex-direction: column; gap: 8px; }
#auth-modal .modal-body .auth-label { display: flex; flex-direction: column; gap: 6px; margin: 0; width: 100%; }
#auth-modal .modal-body .auth-label input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #e6edf3; box-sizing: border-box; }
#auth-modal .modal-body #auth-captcha { display: flex; align-items: center; gap: 8px; }
#auth-modal .modal-actions { display: flex; justify-content: flex-end; }

/* Hall of Fame modal */
#hof { background: #f8fafc; padding: 12px; border-radius: 8px; border: 1px solid #e6edf3; }

/* Ensure Hall of Fame and Local Scores modals appear above other popups */
#hof-modal.modal { z-index: 10100; }
#hof-modal .modal-card { z-index: 10101; }
#scores-modal.modal { z-index: 10100; }
#scores-modal .modal-card { z-index: 10101; }


/* ---------------------------------------------------------------------------
   Victory overlay
   ------------------------------------------------------------------------ */
#victory{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,0.4);backdrop-filter:blur(4px);z-index:10002}
#victory-card{background:linear-gradient(180deg,#ffffff,#f8fbff);padding:24px;border-radius:12px;box-shadow:0 12px 40px rgba(2,6,23,0.3);text-align:center;animation:pop 320ms ease;z-index:10003;position:relative}
@keyframes pop{from{transform:scale(0.96);opacity:0}to{transform:scale(1);opacity:1}}
#victory h2{margin:0 0 8px 0}
#victory p{color:#334155}
#victory button{margin-top:12px}
#victory-card.confetti{box-shadow:0 18px 60px rgba(59,130,246,0.18);transform:translateY(-6px)}


/* ---------------------------------------------------------------------------
   Palette / Theme variants (apply to body.palette-*)
   Each palette overrides variables and a few component colors. Keep these near
   the bottom so they can override base rules.
   ------------------------------------------------------------------------ */
body.palette-default .cell { background: #fff; color: #111; }
body.palette-default .cell.prefilled { background: #f3f4f6; }
body.palette-default{
    --app-bg: linear-gradient(180deg,#f6fbff,#f3f8f9);
    --panel-bg: linear-gradient(180deg, rgb(232,232,232), #ffffff);
    --panel-bg: url('images/jav-bg.jpg');
    --panel-bg-position: center;
    --panel-bg-size: cover;
    --panel-bg-repeat: no-repeat;
    --primary-button-bg: linear-gradient(180deg,#3b82f6,#2563eb);
    --primary-button-color: #fff;
    --meta-color: #475569;
}

/* High contrast (dark) */
body.palette-high-contrast .cell{ background: #000; color: #fff; border-color: #fff }
body.palette-high-contrast .cell.prefilled{ background: #111 }
body.palette-high-contrast{
    --hl-row: #ffff008a;
    --hl-col: #ffff008a;
    --hl-block: #ffff008a;
    --app-bg: #000;
    --panel-bg: #ffffff;
    --primary-button-bg: #000;
    --primary-button-color: #fff;
    --meta-color: #000;
}

/* Dark high-contrast (for visibility) */
body.palette-dark .cell{ background:#172541; color:#7b79d2; border-color:#0f172a }
body.palette-dark .cell.prefilled{ background:#101f45 }
body.palette-dark{
    --hl-row: #5b1962e0;
    --hl-col: #5b1962e0;
    --hl-block: #5b1962e0;
    --app-bg: linear-gradient(180deg,#051226,#081026);
    --panel-bg: url('images/dark-bg.jpg');
    --panel-bg-position: center;
    --panel-bg-size: cover;
    --panel-bg-repeat: no-repeat;
    --primary-button-bg: linear-gradient(180deg,#1f2937,#374151);
    --primary-button-color: #fff;
    --meta-color: #fff;
}

/* Protanopia-safe palette (bluish) */
body.palette-protanopia .cell{ background: #fbfdff; color: #062a3b }
body.palette-protanopia .cell.prefilled{ background: #eaf6ff }
body.palette-protanopia{
    --hl-row: #b1c0901e;
    --hl-col: #b1c0901e;
    --hl-block: #b1c0901e;
    --app-bg: linear-gradient(180deg,#f8fcff,#f1f9ff);
    --panel-bg: #fbfdff;
    --primary-button-bg: linear-gradient(180deg,#2563eb,#1e40af);
    --primary-button-color: #fff;
    --meta-color: #062a3b;
}

/* Solarized-like palette (low-eye-strain) */
body.palette-solarized .cell{ background:#fdf6e3; color:#073642; border-color:#eee8d5 }
body.palette-solarized .cell.prefilled{ background:#f1e9d6 }
body.palette-solarized{
    --hl-row: #e449da80;
    --hl-col: #e449da80;
    --hl-block: #e449da80;
    --app-bg: linear-gradient(180deg,#fdf6e3,#f7efd0);
/*    --panel-bg: linear-gradient(180deg,#fdf6e3,#f1e9d6);*/
    --panel-bg: url('images/desert-bg.jpg');
    --panel-bg-position: center;
    --panel-bg-size: cover;
    --panel-bg-repeat: no-repeat;
    --primary-button-bg: #073642;
    --primary-button-color: #f1e9d6;
    --meta-color: #073642;
}

/* Alba veneta: pink and light azure tints */
body.palette-alba-veneta .cell{ background: #E8E0D0; color: #021226 }
body.palette-alba-veneta .cell.prefilled{ background: #7A9B8A; }
body.palette-alba-veneta .cell.selected{ outline-color: #f20ed4; box-shadow: 0 8px 28px rgba(22,163,74,0.12); }
body.palette-alba-veneta{ 
    --hl-row: #e69c8ac0;
    --hl-col: #E69C8Ac0;
    --hl-block: #E69C8Ac0;
    --panel-bg: url('images/alba-veneta-bg.jpg');
    --panel-bg-position: center;
    --panel-bg-size: cover;
    --panel-bg-repeat: no-repeat;
    --app-bg: linear-gradient(0deg,#fff8fb,#F5F1E8);
    --primary-button-bg: #D4A574;
    --primary-button-color: #fff;
    --meta-color: #021226;
}

/* Mare Nostrum */
body.palette-mare-nostrum .cell{ background: #c1e9fe; color: #131720 }
body.palette-mare-nostrum .cell.prefilled{ background: #5baffd; }
body.palette-mare-nostrum .cell.selected{ outline-color: #31a3a7; box-shadow: 0 8px 28px rgba(22,163,74,0.12); }
body.palette-mare-nostrum{ 
    --hl-row: #87CEEB90;
    --hl-col: #87CEEB90;
    --hl-block: #87CEEB90;
    --app-bg: linear-gradient(180deg,#2e9dff,#E6F0F1);
/*    --panel-bg: linear-gradient(0deg,#2e9dff,#E6F0F1) ; */
    --panel-bg: url('images/mare-nostrum-bg.jpg');
    --panel-bg-position: center;
    --panel-bg-size: cover;
    --panel-bg-repeat: no-repeat;
    --primary-button-bg: #92cfd7;
    --primary-button-color: #4373ed;
    --meta-color: #a2d1f5;
}

/* Rice fields (copy of Alba Veneta - adjust colors later) */
body.palette-rice-fields .cell{ background: #F0EAD6; color: #051226 }
body.palette-rice-fields .cell.prefilled{ background: #8B9B6A; }
body.palette-rice-fields .cell.selected{ outline-color: #f20ed4; box-shadow: 0 8px 28px rgba(22,163,74,0.12); background: #E8C58A  ; }
body.palette-rice-fields{ 
    --hl-row: #E8C58Aa0;
    --hl-col: #E8C58Aa0;
    --hl-block: #E8C58Aa0;
    --app-bg: linear-gradient(180deg,#F9F5E7,#f5f7ff);
/*    --panel-bg: linear-gradient(0deg,#F9F5E7,#F5F1E8) ;*/
    --panel-bg: url('images/rice-fields-bg.jpg');
    --panel-bg-position: center;
    --panel-bg-size: cover;
    --panel-bg-repeat: no-repeat;
    --primary-button-bg: #D4C3A5;
    --primary-button-color: #fff;
    --meta-color: #051226;
}

/* Lucky Ireland palette: green tints */
body.palette-lucky-ireland .cell{ background: #a3e1a9; color: #05732a }
body.palette-lucky-ireland .cell.prefilled{ background: #7fd48d }
body.palette-lucky-ireland .cell.selected{ outline-color: #46a34a; box-shadow: 0 8px 28px rgba(22,163,74,0.12); }
body.palette-lucky-ireland{ 
    --hl-row: #a1e0a032;
    --hl-col: #a1e0a032;
    --hl-block: #a1e0a032;
    --app-bg: linear-gradient(180deg,#f6fff5,#eefaf0);
    --panel-bg: linear-gradient(180deg,#f0fff4,#e6f7ea);
    --panel-bg: url('images/lucky-ireland-bg.jpg');
    --panel-bg-position: center;
    --panel-bg-size: cover;
    --panel-bg-repeat: no-repeat;
    --primary-button-bg: linear-gradient(180deg,#16a34a,#059669);
    --primary-button-color: #fff;
    --meta-color: #e3f8ea;
}

/* Final enforce: make highlights win over palette backgrounds */
body .cell.hl-row{ background: var(--hl-row) !important; color: inherit !important }
body .cell.hl-col{ background: var(--hl-col) !important; color: inherit !important }
body .cell.hl-block{ background: var(--hl-block) !important; color: inherit !important }


/* Palette-driven highlight variables and final overrides
     These live at the end so they override earlier palette rules. */
:root{
    --hl-row: #2a61c11e;
    --hl-col: #2a61c11e;
    --hl-block: #2a61c11e;
}


/* Misc / Overlays */
/* When a modal is open, reduce board visual prominence to avoid overlap */
body.modal-open #board{ filter: blur(0.2px) brightness(0.95); pointer-events:auto }
body.modal-open .modal{ pointer-events:auto }
body.modal-open #board .cell.selected{ z-index:1; box-shadow:none; outline:none }

/* Ensure Hall of Fame and Local Scores modals appear above the hamburger menu and other popups */
#hof-modal.modal { z-index: 10100; }
#hof-modal .modal-card { z-index: 10101; }
#scores-modal.modal { z-index: 10100; }
#scores-modal .modal-card { z-index: 10101; }

/* prominent error state */
body .cell.error{ border-color: red; }


/* ---------------------------------------------------------------------------
   Responsive adjustments: make the app usable on tablets and phones
   Keep media queries at the end for clarity and override order.
   ------------------------------------------------------------------------ */
@media (max-width: 800px) {
    :root { --cell-size: 36px; }
    body { margin: 18px; }
    main { max-width: 720px; padding: 14px; }
    .layout { gap: 12px; }
    .layout #sidebar { width: 220px; }
    .modal-card { width: min(640px,95%); }
}

@media (max-width: 480px) {
    /* Smaller cells so 9x grid fits on typical mobile widths */
    :root { --cell-size: 32px; }

    /* Reduce outer spacing to gain viewport space */
    body { margin: 12px; }
    main { margin: 0 8px; padding: 12px; }

    /* Stack the layout vertically: board first, then sidebar */
    .layout { flex-direction: column; align-items: stretch; }
    .layout #left { order: 1; }
    .layout #sidebar { order: 2; width: 100%; }

    /* Make controls and buttons easier to tap */
    #controls { gap: 6px; }
    button, .settings-audio-btn, .tutorial-button { min-height: 44px; min-width: 44px; padding: 8px 10px; }

    /* Allow the board to shrink horizontally and avoid overflow where possible */
    #board { grid-template-columns: repeat(9, var(--cell-size)); grid-gap: 6px; justify-content: center; overflow-x: auto; }

    /* Make modal cards use the available width on small screens */
    .modal-card { width: 95%; padding: 12px; }

    /* Specific dialogs (menu, auth, hof, scores) can be narrower to avoid feeling too wide */
    #main-menu-modal .modal-card,
    #auth-modal .modal-card,
    #hof-modal .modal-card,
    #scores-modal .modal-card {
        width: min(360px, 95%);
        max-width: 360px;
        padding: 12px;
        box-sizing: border-box;
    }

    /* Slightly reduce font sizes for compactness */
    h1 { font-size: 18px; }
    .cell { font-size: 14px; }
    .num { font-size: 14px; }

    /* Reduce keypad button footprint so they don't dominate the viewport */
    #numpad { grid-auto-rows: calc(var(--cell-size) * 0.9); gap: 4px; }
    .num { padding: 6px 4px; border-radius: 4px; }

    /* Header controls: stack when space is tight and place label+select in column */
    .controls.controls-header { flex-direction: column; align-items: stretch; gap: 6px; }
    .controls.controls-header .controls-group { width: 100%; display: flex; justify-content: space-between; align-items: center; }
    .controls.controls-group label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
}