body{
  margin: 20px;
}

  /* ===== Shared Kernel – Sudoku dark theme ===== */
  :root{
    --bg: #000;                 /* already used by your page */
    --ink: #e8e8e8;
    --muted: #9aa0a6;
    --accent: #6ee7ff;          /* cyan glow */
    --accent-2: #8b5cf6;        /* violet glow */
    --success: #22c55e;         /* correct */
    --danger: #ef4444;          /* wrong */
    --tile: #0b0b0f;            /* board background */
    --tile-alt: #0f1115;
    --border: #394a72;
    --box-border: #2a3140;
    --box-border-light: #3c465a;
    --shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 40px rgba(110,231,255,.05);
    --radius: 12px;
  }

  body
  {
    display: block;
  }

.logo{
  width: 10%;
}

  /* Container */
  .sudoku{
    width: min(92vw, 860px);
    margin: 0px auto 0px;
    
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    color: var(--ink);
    padding-top: 50px;
  }

  /* Headings + helper text */
  .sinstructions{
    padding: 14px 16px;
    line-height: 1.55;
    color: var(--muted);
    background: linear-gradient(180deg, rgba(139,92,246,.08), rgba(110,231,255,.05));
    border: 1px solid var(--box-border);
    border-radius: 10px;
    margin-bottom: 12px;
  }

  .message{
    display:inline-block;
    margin: 14px 8px 10px 0;
    padding: 10px 14px;
    background: #0c1220;
    border: 1px solid var(--box-border);
    border-radius: 10px;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(110,231,255,.08);
  }

  .seednumber{
    display:inline-block;
    margin: 14px 8px 10px 0;
    padding: 10px 14px;
    background: #0c1220;
    border: 1px solid var(--box-border);
    border-radius: 10px;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(110,231,255,.08);
  }

  .seednumber b {
    color: #ff8f00;
  }

  .helpassist, .howdoigo a{
    display:inline-block;
    margin: 14px 8px 10px 0;
    padding: 10px 14px;
    background: #0c1220;
    border: 1px solid var(--box-border);
    border-radius: 10px;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(110,231,255,.08);
    cursor: pointer;
  }
  .helpassist:hover, .howdoigo a:hover{
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* Controls panel */
  .snumber, .snumber2{
    padding: 8px 0;
    color: var(--muted);
  }
  .snumberinput, .snumberinput2, .numsubmit, input[type="checkbox"]{
    appearance: none;
    font: inherit;
    color: var(--ink);
    background: #0e1016;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
    transition: border .2s ease, box-shadow .2s ease, transform .05s ease;
  }
  .snumberinput:focus, .snumberinput2:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(110,231,255,.15);
  }
  .numsubmit{
    background: linear-gradient(90deg, rgba(110,231,255,.18), rgba(139,92,246,.18));
    border-color: var(--box-border);
    font-weight: 600;
    cursor: pointer;
  }
  .numsubmit:hover{ transform: translateY(-1px); }
  .numsubmit:active{ transform: translateY(0); }

  /* Board */
  table.t{
    width: 100%;
    max-width: 560px;
    margin: 20px auto;
    border-collapse: collapse;
    background: radial-gradient(1200px 600px at 50% -20%, rgba(139,92,246,.15), transparent 55%),
                radial-gradient(800px 600px at 120% 120%, rgba(110,231,255,.10), transparent 60%),
                var(--tile);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  table.t td{
    width: calc(100%/9);
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    position: relative;
  }

  /* Thicker borders for 3x3 boxes */
  #td13,#td23,#td33,#td43,#td53,#td63,#td73,#td83,#td93,
  #td31,#td32,#td33,#td34,#td35,#td36,#td37,#td38,#td39{
    /* no-op id list to increase specificity weight */
  }
  /* vertical box borders after col 3 & 6 */
  td:nth-child(3), td:nth-child(6){ border-right: 2px solid var(--box-border); }
  

  /* Inputs inside cells */
  .t input{
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: 700;
    font-size: clamp(18px, 3.2vw, 28px);
    color: var(--ink);
    background: transparent;
    border: none;
    outline: none;
    caret-color: var(--accent);
  }

  /* Given (readonly) cells */
  .d0{
    color: #b9c5ff;
    background: linear-gradient(180deg, rgba(139,92,246,.10), rgba(139,92,246,.04));
    pointer-events: none;
  }

  /* Editable empty cells */
  .s0{
    color: var(--ink);
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  }

  /* Suggest (hinted) cells */
  .suggest{
    background: linear-gradient(180deg, rgba(110,231,255,.18), rgba(110,231,255,.06));
    color: #eaffff !important;
    background-color: #144614 !important;
  }

  /* Wrong cells (your JS sets class g3) */
  .g3{
    background: linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.08));
    color: #ffecec !important;
    background-color: #773939 !important;
  }

  /* “Correct” flash when typing (optional) */
  .t input:valid{
    text-shadow: 0 0 10px rgba(34,197,94,.35);
  }

  /* Tiny checkbox look */
  #helpme{
    width: 40px; height: 40px; vertical-align: middle;
    border-radius: 6px; display:inline-grid; place-items:center;
  }
  #helpme:checked{ box-shadow: 0 0 0 3px rgba(110,231,255,.15); border-color: var(--accent); }
  #helpme:checked::before{
    content:"✓"; font-weight: 800; font-size: 12px; color: var(--accent);
  }

  /* Links near the board */
  .howdoigo, .helpassist{ font-weight: 600; }

  /* Form tables (top controls) */
  .sudogame{
    width: 100%;
    margin-bottom: 10px;
  }
  .sudogame td{ padding: 16px 14px; }

  /* Small screens */
  @media (max-width: 520px){
    table.t{ max-width: 100%; }
  }

  /* Subtle glow on focus cell */
  .t input:focus{
    background: radial-gradient(140px 140px at center, rgba(110,231,255,.18), transparent 60%);
  }

  /* Highlight row/col on hover (progressive enhancement) */
  .t td:hover{
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  }

table.t {
    aspect-ratio: 1 / 1;
}



/* --- 3×3 BOX VISUAL AID --- */

/* Slight alternating shade for 3×3 boxes to guide the eye */
table.t tr:nth-child(-n+3) td:nth-child(-n+3),
table.t tr:nth-child(-n+3) td:nth-child(n+7),
table.t tr:nth-child(n+4):nth-child(-n+6) td:nth-child(n+4):nth-child(-n+6),
table.t tr:nth-child(n+7) td:nth-child(-n+3),
table.t tr:nth-child(n+7) td:nth-child(n+7) {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  background-color: #0e1321; /* a hair lighter than --tile for contrast */
}

/* Make the 3×3 borders a bit stronger (fix row indexes too) */
table.t td { border: 1px solid var(--border); }
table.t tr:nth-child(3) td,
table.t tr:nth-child(6) td { border-bottom: 3px solid var(--box-border-light); }
table.t td:nth-child(3),
table.t td:nth-child(6) { border-right: 3px solid var(--box-border-light); }

/* Active 3×3 box when a cell is focused */
td.box-active {
  background-color: #0f2133 !important;
  
}

/* Keep readonly/user states visible above highlights */
td.box-active .d0 { background: linear-gradient(180deg, rgba(139,92,246,.10), rgba(139,92,246,.04)); }
td.box-active .suggest { background: linear-gradient(180deg, rgba(110,231,255,.22), rgba(110,231,255,.08)); }
td.box-active .g3 { background: linear-gradient(180deg, rgba(239,68,68,.28), rgba(239,68,68,.10)); }


/* === Row/Column highlight for focused/hovered cell === */

/* Base tints */
td.row-active    { background-color: #0e1a2b !important; }
td.col-active    { background-color: #0e1a2b !important; }

/* Where row and column cross (the selected cell’s td) */
td.row-active.col-active{
  background-color: #0f2133 !important;
  box-shadow: inset 0 0 0 2px rgba(110,231,255,.25);
}

/* Keep 3×3 box glow visible on top when also row/col active */
td.box-active{
  background-color: #0f2133 !important;
 }

/* Preserve state colors on top of highlights */
td.row-active .d0,
td.col-active .d0{ background: linear-gradient(180deg, rgba(139,92,246,.10), rgba(139,92,246,.04)); }
td.row-active .suggest,
td.col-active .suggest{ background: linear-gradient(180deg, rgba(110,231,255,.22), rgba(110,231,255,.08)); }
td.row-active .g3,
td.col-active .g3{ background: linear-gradient(180deg, rgba(239,68,68,.28), rgba(239,68,68,.10)); }

/* Optional: slightly stronger borders while highlighted for readability */
td.row-active,
td.col-active{
  outline: 1px solid rgba(110,231,255,.18);
  outline-offset: -1px;
}


/* --- Mobile overflow fixes --- */

/* Never allow horizontal scrolling */
html, body { overflow-x: hidden; }

/* Make the control table truly responsive */
table.sudogame{
  width: 100%;
  table-layout: fixed;   /* prevents cells from expanding the table */
  border-collapse: collapse;
}

/* Cells can shrink */
.sudogame td{
  min-width: 0;         /* allow content to shrink within the cell */
  padding: 12px 10px;
}

/* Inputs/selects fit the cell; no overflow */
.snumberinput,
.snumberinput2,
.sudogame input[type="text"],
.sudogame select{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;  /* include padding/border in width */
  -webkit-tap-highlight-color: transparent;
}

/* Keep submit buttons from forcing width */
.numsubmit{
  max-width: 100%;
  width: 100%;
}

/* If a long, unbroken string ever appears (e.g., query params), wrap it */
.seednumber,
.seednumber a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tighten global margins on small screens so nothing pokes out */
@media (max-width: 480px){
  body{ margin: 8px; }
  .sudoku{ padding-left: 8px; padding-right: 8px; }
}



main {
    padding-top: 30px;
}


/* --- Single-scroller fix (mobile-friendly) --- */

/* Let the root be the only scroll container */
html, body{
  height: auto !important;       /* stop forcing 100% */
  min-height: 100dvh !important; /* modern viewport unit */
  overflow-y: auto !important;
  overflow-x: hidden;            /* you already wanted this */
}

/* Keep the global offset for the fixed header ONLY on body */
:root{ --header-h: 56px; }       /* match your header height */
body{ padding-top: var(--header-h) !important; }

/* Remove duplicate top padding on the Sudoku wrapper */
.sudoku{ padding-top: 0 !important; }

/* Make sure no inner container becomes a full-height scroller */
.sudoku, main.main{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* iOS viewport quirk: prefer svh on Safari */
@supports (-webkit-touch-callout: none){
  body{ min-height: 100svh; }
}