/**
 * Astra-Ready Sudoku — style.css
 * All rules are scoped under .ast-sudoku-wrapper to prevent
 * conflicts with Astra or any other theme/plugin styles.
 */

/* ============================================================
   0. CSS CUSTOM PROPERTIES
   ============================================================ */
.ast-sudoku-wrapper {
    /* Core palette */
    --sdk-bg:              #000000;
    --sdk-surface:         #0d0d0d;
    --sdk-border-thick:    #00e5ff;   /* neon cyan — outer grid + 3×3 box borders  */
    --sdk-border-thin:     #888888;   /* cell dividers                             */
    --sdk-text-prefilled:  #ffffff;   /* pre-filled numbers                        */
    --sdk-text-user:       #ffd700;   /* gold — user-entered numbers               */
    --sdk-text-error:      #ff3b5c;   /* red — wrong answer highlight              */
    --sdk-text-correct:    #39ff14;   /* neon green — correct answer highlight     */
    --sdk-text-hint:       #00e5ff;   /* cyan — hint-filled cells                  */
    --sdk-text-selected:   #ffd700;

    /* Button accent colours */
    --sdk-btn-primary:     #7b2fff;   /* electric purple — New Game / Play Again   */
    --sdk-btn-secondary:   #1a1a2e;   /* dark navy — Clear                         */
    --sdk-btn-accent:      #00c9a7;   /* emerald — Hint                            */
    --sdk-btn-check:       #ff6b35;   /* orange — Check Solution                  */

    /* Typography */
    --sdk-font-display:    'Orbitron', 'Courier New', monospace;
    --sdk-font-body:       'Share Tech Mono', 'Courier New', monospace;

    /* Spacing / sizing */
    --sdk-radius:          8px;
    --sdk-cell-size:       clamp(28px, 9vw, 56px);
    --sdk-transition:      0.2s ease;
}

/* ============================================================
   1. GOOGLE FONTS — loaded via @import so no extra PHP needed
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;900&family=Share+Tech+Mono&display=swap');

/* ============================================================
   2. WRAPPER — full reset & isolation
   ============================================================ */
.ast-sudoku-wrapper,
.ast-sudoku-wrapper * {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
    /* Prevent Astra's global line-height / font-size from leaking in */
    font-family: var(--sdk-font-body);
}

.ast-sudoku-wrapper {
    position:         relative;        /* Z-index anchor — stays below Astra sticky header */
    z-index:          1;
    background:       var(--sdk-bg);
    border:           2px solid var(--sdk-border-thick);
    border-radius:    var(--sdk-radius);
    padding:          24px 20px 28px;
    max-width:        600px;
    width:            100%;
    margin:           32px auto;
    color:            var(--sdk-text-prefilled);
    box-shadow:
        0 0 30px rgba(0, 229, 255, 0.12),
        0 0 80px rgba(0, 229, 255, 0.05);
    overflow:         hidden;          /* keep overlay contained */
}

/* ============================================================
   3. HEADER
   ============================================================ */
.ast-sudoku-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}

.ast-sudoku-title {
    font-family:  var(--sdk-font-display);
    font-size:    clamp(18px, 4vw, 28px);
    font-weight:  900;
    letter-spacing: 6px;
    text-transform: uppercase;
    background:   linear-gradient(135deg, #00e5ff 0%, #7b2fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height:  1;
    /* Fallback for browsers that don't support clip */
    color:        var(--sdk-border-thick);
}

.ast-sudoku-title-icon {
    margin-right: 8px;
    -webkit-text-fill-color: var(--sdk-border-thick);
    color:        var(--sdk-border-thick);
    font-size:    0.9em;
}

.ast-sudoku-timer {
    font-family:  var(--sdk-font-display);
    font-size:    clamp(16px, 3.5vw, 22px);
    font-weight:  600;
    letter-spacing: 3px;
    color:        var(--sdk-border-thick);
    padding:      6px 14px;
    border:       1px solid rgba(0, 229, 255, 0.3);
    border-radius: var(--sdk-radius);
    background:   rgba(0, 229, 255, 0.06);
    text-shadow:  0 0 10px rgba(0, 229, 255, 0.5);
    transition:   var(--sdk-transition);
}

.ast-sudoku-timer.is-running {
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow:   0 0 10px rgba(0, 229, 255, 0.2);
}

/* ============================================================
   4. CONTROLS BAR
   ============================================================ */
.ast-sudoku-controls {
    display:        flex;
    flex-wrap:      wrap;
    gap:            10px;
    align-items:    flex-end;
    margin-bottom:  18px;
}

/* Difficulty dropdown */
.ast-sudoku-select-wrapper {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.ast-sudoku-label {
    font-size:      10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.45);
}

.ast-sudoku-select {
    appearance:     none;
    -webkit-appearance: none;
    background:     rgba(255,255,255,0.05);
    border:         1px solid rgba(255,255,255,0.15);
    border-radius:  var(--sdk-radius);
    color:          #fff;
    font-family:    var(--sdk-font-body);
    font-size:      14px;
    padding:        8px 32px 8px 12px;
    cursor:         pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300e5ff'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: calc(100% - 10px) center;
    transition:     var(--sdk-transition);
}

.ast-sudoku-select:focus {
    outline:     none;
    border-color: var(--sdk-border-thick);
    box-shadow:  0 0 0 2px rgba(0, 229, 255, 0.2);
}

.ast-sudoku-select option {
    background: #111;
    color:      #fff;
}

/* ============================================================
   5. BUTTONS — Glassmorphism base + colour variants
   ============================================================ */
.ast-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--sdk-font-display);
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  1.5px;
    text-transform:  uppercase;
    padding:         9px 16px;
    border:          1px solid transparent;
    border-radius:   var(--sdk-radius);
    cursor:          pointer;
    transition:      all var(--sdk-transition);
    white-space:     nowrap;
    /* Glassmorphism base */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-clip: padding-box;
    position:        relative;
    overflow:        hidden;
}

.ast-btn::before {
    content:  '';
    position: absolute;
    inset:    0;
    opacity:  0;
    transition: opacity var(--sdk-transition);
    background: rgba(255,255,255,0.08);
}

.ast-btn:hover::before { opacity: 1; }

.ast-btn:focus-visible {
    outline:      2px solid var(--sdk-border-thick);
    outline-offset: 2px;
}

/* Primary — Electric Purple */
.ast-btn--primary {
    background: linear-gradient(135deg,
        rgba(123, 47, 255, 0.7) 0%,
        rgba(90, 20, 200, 0.7) 100%);
    border-color: rgba(123, 47, 255, 0.8);
    color:        #fff;
    box-shadow:   0 0 14px rgba(123, 47, 255, 0.35);
}
.ast-btn--primary:hover {
    box-shadow: 0 0 22px rgba(123, 47, 255, 0.6);
    transform:  translateY(-1px);
}

/* Secondary — Dark */
.ast-btn--secondary {
    background:  rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.15);
    color:        rgba(255,255,255,0.8);
}
.ast-btn--secondary:hover {
    border-color: rgba(255,255,255,0.3);
    color:        #fff;
}

/* Accent — Emerald */
.ast-btn--accent {
    background: linear-gradient(135deg,
        rgba(0, 201, 167, 0.7) 0%,
        rgba(0, 150, 120, 0.7) 100%);
    border-color: rgba(0, 201, 167, 0.8);
    color:        #fff;
    box-shadow:   0 0 14px rgba(0, 201, 167, 0.3);
}
.ast-btn--accent:hover {
    box-shadow: 0 0 22px rgba(0, 201, 167, 0.55);
    transform:  translateY(-1px);
}

/* Check — Orange */
.ast-btn--check {
    background: linear-gradient(135deg,
        rgba(255, 107, 53, 0.7) 0%,
        rgba(220, 60, 10, 0.7) 100%);
    border-color: rgba(255, 107, 53, 0.8);
    color:        #fff;
    box-shadow:   0 0 14px rgba(255, 107, 53, 0.3);
}
.ast-btn--check:hover {
    box-shadow: 0 0 22px rgba(255, 107, 53, 0.55);
    transform:  translateY(-1px);
}

/* ============================================================
   6. STATUS MESSAGE
   ============================================================ */
.ast-sudoku-status {
    min-height:    24px;
    font-size:     13px;
    letter-spacing: 1px;
    text-align:    center;
    padding:       6px 0;
    transition:    all var(--sdk-transition);
    color:         rgba(255,255,255,0.6);
}

.ast-sudoku-status.is-error   { color: var(--sdk-text-error);   }
.ast-sudoku-status.is-success { color: var(--sdk-text-correct); }
.ast-sudoku-status.is-hint    { color: var(--sdk-text-hint);    }

/* ============================================================
   7. GAME BOARD — the 9×9 grid
   ============================================================ */
.ast-sudoku-board-wrap {
    display:         flex;
    justify-content: center;
    margin-bottom:   18px;
}

.ast-sudoku-board {
    /* aspect-ratio keeps the grid square on every screen size */
    aspect-ratio:    1 / 1;
    max-width:       100%;
    width:           min(504px, 100%);     /* 9 × 56 px at desktop */
    display:         grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows:    repeat(9, 1fr);

    /* Outer border — thick neon */
    border:          3px solid var(--sdk-border-thick);
    border-radius:   4px;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.15),
        0 0 24px rgba(0, 229, 255, 0.15),
        inset 0 0 12px rgba(0, 0, 0, 0.8);

    /* Isolate from Astra's global z-index stack */
    position:        relative;
    z-index:         2;
}

/* ============================================================
   8. CELLS
   ============================================================ */
.ast-sudoku-cell {
    /* Reset */
    -webkit-appearance: textfield;
    -moz-appearance:    textfield;
    appearance:         textfield;
    /* Hide number spinners */
    border:             none;
    outline:            none;
    background:         transparent;
    width:              100%;
    height:             100%;
    /* Typography */
    font-family:        var(--sdk-font-display);
    font-size:          clamp(18px, 4.5vw, 30px);
    font-weight:        900;
    text-align:         center;
    color:              var(--sdk-text-user);
    text-shadow:        none;
    caret-color:        var(--sdk-border-thick);
    /* Default thin cell border */
    border-right:       1px solid #888888;
    border-bottom:      1px solid #888888;
    transition:         background var(--sdk-transition), color var(--sdk-transition), box-shadow var(--sdk-transition);
    cursor:             pointer;
    padding:            0;
    line-height:        1;
}

/* Remove spinners — Webkit */
.ast-sudoku-cell::-webkit-outer-spin-button,
.ast-sudoku-cell::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin:             0;
}

/* Remove spinners — Firefox */
.ast-sudoku-cell[type=number] {
    -moz-appearance: textfield;
}

/* Right column of each 3×3 block — thicker border */
.ast-sudoku-cell[data-col="2"],
.ast-sudoku-cell[data-col="5"] {
    border-right: 2.5px solid var(--sdk-border-thick);
}

/* Bottom row of each 3×3 block — thicker border */
.ast-sudoku-cell[data-row="2"],
.ast-sudoku-cell[data-row="5"] {
    border-bottom: 2.5px solid var(--sdk-border-thick);
}

/* Remove rightmost and bottommost lines (the outer border handles them) */
.ast-sudoku-cell[data-col="8"] { border-right:  none; }
.ast-sudoku-cell[data-row="8"] { border-bottom: none; }

/* Focus state */
.ast-sudoku-cell:focus {
    background: rgba(0, 229, 255, 0.08);
    box-shadow: inset 0 0 0 2px rgba(0, 229, 255, 0.5);
    color:      var(--sdk-text-selected);
    z-index:    3;
}

/* Prefilled / given */
.ast-sudoku-cell.is-prefilled {
    color:       var(--sdk-text-prefilled) !important;
    font-weight: 900;
    cursor:      not-allowed;
    background:  rgba(255, 255, 255, 0.03);
}

/* Highlighted (same row / col / box as focused cell) */
.ast-sudoku-cell.is-highlighted {
    background: rgba(255, 255, 255, 0.04);
}

/* Same number highlighted */
.ast-sudoku-cell.is-same-number {
    background: rgba(0, 229, 255, 0.07);
}

/* Error */
.ast-sudoku-cell.is-error {
    color:      var(--sdk-text-error);
    background: rgba(255, 59, 92, 0.10);
    animation:  sdk-shake 0.3s ease;
}

/* Correct */
.ast-sudoku-cell.is-correct {
    color:      var(--sdk-text-correct);
    background: rgba(57, 255, 20, 0.07);
}

/* Hint-filled */
.ast-sudoku-cell.is-hint {
    color:      var(--sdk-text-hint);
    background: rgba(0, 229, 255, 0.10);
}

/* ============================================================
   9. NUMBER PAD (touch / mobile)
   ============================================================ */
.ast-sudoku-numpad {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   8px;
    margin-bottom:         6px;
}

.ast-numpad-btn {
    font-family:     var(--sdk-font-display);
    font-size:       clamp(14px, 3.5vw, 20px);
    font-weight:     600;
    color:           rgba(255,255,255,0.85);
    background:      rgba(255,255,255,0.06);
    border:          1px solid rgba(255,255,255,0.12);
    border-radius:   var(--sdk-radius);
    padding:         10px 0;
    cursor:          pointer;
    transition:      all var(--sdk-transition);
    text-align:      center;
    line-height:     1;
}

.ast-numpad-btn:hover {
    background:   rgba(0, 229, 255, 0.12);
    border-color: rgba(0, 229, 255, 0.4);
    color:        var(--sdk-border-thick);
    box-shadow:   0 0 10px rgba(0, 229, 255, 0.15);
    transform:    translateY(-1px);
}

.ast-numpad-btn:active {
    transform: scale(0.95);
}

.ast-numpad-erase {
    color:        var(--sdk-text-error);
    border-color: rgba(255, 59, 92, 0.2);
}

.ast-numpad-erase:hover {
    background:   rgba(255, 59, 92, 0.12);
    border-color: rgba(255, 59, 92, 0.4);
    color:        var(--sdk-text-error);
    box-shadow:   0 0 10px rgba(255, 59, 92, 0.2);
}

/* ============================================================
   10. COMPLETION OVERLAY
   ============================================================ */
.ast-sudoku-overlay {
    position:        absolute;
    inset:           0;
    background:      rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         100;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.4s ease;
}

.ast-sudoku-overlay.is-visible {
    opacity:        1;
    pointer-events: auto;
}

.ast-sudoku-overlay-inner {
    text-align:    center;
    padding:       32px 24px;
    border:        1px solid rgba(0, 229, 255, 0.3);
    border-radius: 12px;
    background:    rgba(0, 229, 255, 0.05);
    box-shadow:    0 0 40px rgba(0, 229, 255, 0.15);
    animation:     sdk-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.ast-sudoku-overlay-icon {
    font-size:    52px;
    margin-bottom: 12px;
    animation:    sdk-float 2s ease-in-out infinite;
}

.ast-sudoku-overlay-title {
    font-family:   var(--sdk-font-display);
    font-size:     clamp(20px, 5vw, 32px);
    font-weight:   900;
    letter-spacing: 4px;
    text-transform: uppercase;
    background:    linear-gradient(135deg, #00e5ff 0%, #7b2fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.ast-sudoku-overlay-time {
    font-size:     16px;
    color:         rgba(255,255,255,0.6);
    letter-spacing: 2px;
    margin-bottom: 24px;
}

/* ============================================================
   11. KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes sdk-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

@keyframes sdk-pop {
    0%   { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes sdk-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* ============================================================
   12. RESPONSIVE — MOBILE FIRST ADJUSTMENTS
   ============================================================ */

/* On narrow screens collapse controls to 2 columns */
@media (max-width: 480px) {
    .ast-sudoku-wrapper {
        padding: 16px 12px 20px;
    }

    .ast-sudoku-controls {
        display:               grid;
        grid-template-columns: 1fr 1fr;
        gap:                   8px;
    }

    .ast-sudoku-select-wrapper {
        grid-column: 1 / -1;
    }

    .ast-btn {
        padding:    8px 10px;
        font-size:  10px;
    }

    /* Numpad: 5 digits + erase in 2 rows */
    .ast-sudoku-numpad {
        grid-template-columns: repeat(5, 1fr);
        gap:                   6px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .ast-sudoku-title {
        font-size: 16px;
        letter-spacing: 3px;
    }

    .ast-sudoku-timer {
        font-size: 14px;
    }
}

/* ============================================================
   13. ASTRA THEME OVERRIDES
   Prevent Astra's `.entry-content` global rules from
   overriding our carefully set grid cell styles.
   ============================================================ */
.entry-content .ast-sudoku-wrapper input.ast-sudoku-cell,
.ast-container .ast-sudoku-wrapper input.ast-sudoku-cell,
.site-content .ast-sudoku-wrapper input.ast-sudoku-cell {
    font-size:   clamp(18px, 4.5vw, 30px) !important;
    font-weight: 900 !important;
    color:       #ffd700 !important;
    line-height: 1 !important;
    padding:     0 !important;
    border-top:  none !important;
    border-left: none !important;
    margin:      0 !important;
    width:       100% !important;
    height:      100% !important;
    min-height:  unset !important;
    box-shadow:  none !important;
    background-color: transparent !important;
    /* Re-apply correct border direction — Astra may strip these */
    border-right:  1px solid #888888 !important;
    border-bottom: 1px solid #888888 !important;
}

.entry-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-prefilled,
.ast-container .ast-sudoku-wrapper input.ast-sudoku-cell.is-prefilled,
.site-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-prefilled {
    color: #ffffff !important;
}

.entry-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-error,
.ast-container .ast-sudoku-wrapper input.ast-sudoku-cell.is-error,
.site-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-error {
    color: #ff3b5c !important;
}

.entry-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-correct,
.ast-container .ast-sudoku-wrapper input.ast-sudoku-cell.is-correct,
.site-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-correct {
    color: #39ff14 !important;
}

.entry-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-hint,
.ast-container .ast-sudoku-wrapper input.ast-sudoku-cell.is-hint,
.site-content .ast-sudoku-wrapper input.ast-sudoku-cell.is-hint {
    color: #00e5ff !important;
}

.entry-content .ast-sudoku-wrapper .ast-sudoku-cell[data-col="2"],
.entry-content .ast-sudoku-wrapper .ast-sudoku-cell[data-col="5"],
.ast-container  .ast-sudoku-wrapper .ast-sudoku-cell[data-col="2"],
.ast-container  .ast-sudoku-wrapper .ast-sudoku-cell[data-col="5"] {
    border-right: 2.5px solid var(--sdk-border-thick) !important;
}

.entry-content .ast-sudoku-wrapper .ast-sudoku-cell[data-row="2"],
.entry-content .ast-sudoku-wrapper .ast-sudoku-cell[data-row="5"],
.ast-container  .ast-sudoku-wrapper .ast-sudoku-cell[data-row="2"],
.ast-container  .ast-sudoku-wrapper .ast-sudoku-cell[data-row="5"] {
    border-bottom: 2.5px solid var(--sdk-border-thick) !important;
}

.entry-content .ast-sudoku-wrapper .ast-sudoku-cell[data-col="8"],
.ast-container  .ast-sudoku-wrapper .ast-sudoku-cell[data-col="8"] {
    border-right: none !important;
}

.entry-content .ast-sudoku-wrapper .ast-sudoku-cell[data-row="8"],
.ast-container  .ast-sudoku-wrapper .ast-sudoku-cell[data-row="8"] {
    border-bottom: none !important;
}

/* Ensure Astra's global button styles don't override ours */
.ast-sudoku-wrapper .ast-btn,
.entry-content .ast-sudoku-wrapper .ast-btn {
    all:             unset;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    font-family:     var(--sdk-font-display);
    font-size:       11px;
    font-weight:     600;
    letter-spacing:  1.5px;
    text-transform:  uppercase;
    padding:         9px 16px;
    border-radius:   var(--sdk-radius);
    cursor:          pointer;
    transition:      all var(--sdk-transition);
    white-space:     nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position:        relative;
    overflow:        hidden;
}

/* Re-declare colour variants after `all: unset` */
.ast-sudoku-wrapper .ast-btn--primary {
    background:  linear-gradient(135deg, rgba(123,47,255,.7) 0%, rgba(90,20,200,.7) 100%);
    border:      1px solid rgba(123,47,255,.8);
    color:       #fff;
    box-shadow:  0 0 14px rgba(123,47,255,.35);
}
.ast-sudoku-wrapper .ast-btn--secondary {
    background:  rgba(255,255,255,.05);
    border:      1px solid rgba(255,255,255,.15);
    color:       rgba(255,255,255,.8);
}
.ast-sudoku-wrapper .ast-btn--accent {
    background:  linear-gradient(135deg, rgba(0,201,167,.7) 0%, rgba(0,150,120,.7) 100%);
    border:      1px solid rgba(0,201,167,.8);
    color:       #fff;
    box-shadow:  0 0 14px rgba(0,201,167,.3);
}
.ast-sudoku-wrapper .ast-btn--check {
    background:  linear-gradient(135deg, rgba(255,107,53,.7) 0%, rgba(220,60,10,.7) 100%);
    border:      1px solid rgba(255,107,53,.8);
    color:       #fff;
    box-shadow:  0 0 14px rgba(255,107,53,.3);
}
.ast-sudoku-wrapper .ast-btn--primary:hover  { box-shadow: 0 0 22px rgba(123,47,255,.6);  transform: translateY(-1px); }
.ast-sudoku-wrapper .ast-btn--accent:hover   { box-shadow: 0 0 22px rgba(0,201,167,.55); transform: translateY(-1px); }
.ast-sudoku-wrapper .ast-btn--check:hover    { box-shadow: 0 0 22px rgba(255,107,53,.55); transform: translateY(-1px); }
.ast-sudoku-wrapper .ast-btn--secondary:hover { border-color: rgba(255,255,255,.3); color: #fff; }