.sgCard { overflow: hidden; }

/* =========================
   Theme variables (board)
   ========================= */
:root{
  --sgLine: rgba(255,255,255,.16);
  --sgLineStrong: rgba(255,255,255,.30);

  --sgCellBg: rgba(255,255,255,.045);
  --sgAltBg: rgba(125,211,252,.07);
  --sgGivenBg: rgba(255,255,255,.10);

  --sgPeerBg: rgba(125,211,252,.14);
  --sgSelectedBg: rgba(125,211,252,.26);
  --sgSelectedRing: rgba(125,211,252,.60);

  --sgSameBg: rgba(255,214,102,.13);
  --sgSameRing: rgba(255,214,102,.45);

  --sgBadBg: rgba(251,113,133,.14);
  --sgBadRing: rgba(251,113,133,.55);

  --sgNotes: rgba(255,255,255,.72);

  --sgBtnBg: rgba(255,255,255,.04);
  --sgBtnLine: rgba(255,255,255,.14);

  --sgPrimaryBg: rgba(125,211,252,.16);
  --sgPrimaryLine: rgba(125,211,252,.34);
}

:root[data-theme="light"]{
  --sgLine: rgba(11,15,20,.16);
  --sgLineStrong: rgba(11,15,20,.30);

  --sgCellBg: #ffffff;
  --sgAltBg: rgba(59,130,246,.065);
  --sgGivenBg: rgba(11,15,20,.08);

  --sgPeerBg: rgba(2,6,23,.06);
  --sgSelectedBg: rgba(59,130,246,.16);
  --sgSelectedRing: rgba(37,99,235,.45);

  --sgSameBg: rgba(245,158,11,.18);
  --sgSameRing: rgba(245,158,11,.50);

  --sgBadBg: rgba(244,63,94,.14);
  --sgBadRing: rgba(244,63,94,.55);

  --sgNotes: rgba(2,6,23,.70);

  --sgBtnBg: rgba(11,15,20,.03);
  --sgBtnLine: rgba(11,15,20,.14);

  --sgPrimaryBg: rgba(59,130,246,.16);
  --sgPrimaryLine: rgba(37,99,235,.30);
}

/* =========================
   Top row
   ========================= */
.sgTopRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.sgMeta{ display:flex; flex-direction:column; gap:6px; }
.sgRule{ font-size: 13px; }
.sgHint{ margin: 8px 0 10px; }

.sgStats{ display:flex; gap:10px; align-items:stretch; }
.sgStat{
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--sgBtnLine);
  background: var(--sgBtnBg);
}

/* Mobile: keep it tidy */
.modeSelect{ display:none; }
@media (max-width: 520px){
  .modeSeg .seg{ display:none !important; }
  .modeSelect{
    display:inline-flex !important;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--sgBtnLine);
    background: var(--sgBtnBg);
    color: var(--text);
    font-weight: 900;
  }

  .sgTopRow{
    flex-direction: column;
    align-items: stretch;
  }
  .sgStats{
    width: 100%;
    justify-content: space-between;
  }
  .sgStat{
    min-width: 0;
    flex: 1 1 auto;
    padding: 8px 10px;
  }
}

/* =========================
   Message (centered)
   ========================= */
.msg{
  text-align:center;
  margin: 6px auto 10px;
  min-height: 20px;
}
.msg:not(:empty){
  display:block;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--sgBtnLine);
  background: var(--sgBtnBg);
}

/* =========================
   Board sizing + frame
   ========================= */
.sgBoardWrap{
  width: min(92vw, 520px);
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
  overflow: hidden;
  box-sizing: border-box;
}
:root[data-theme="light"] .sgBoardWrap{
  border-color: rgba(11,15,20,.16);
  background: #fff;
}
@media (min-width: 900px){
  .sgBoardWrap{ width: 560px; }
}

/* Grid */
.sgBoard{
  position: relative;
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  padding: 1px;             /* outer grid line */
  background: var(--sgLine);
  box-sizing: border-box;
}

/* Cell */
.sgCell{
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 12px;
  background: var(--sgCellBg);
  cursor: pointer;
  display:grid;
  place-items:center;
  font-weight: 950;
  font-size: clamp(15px, 4.6vw, 20px);
  user-select:none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .10s ease, background .10s ease, outline-color .10s ease;
}
.sgCell:active{ transform: scale(.985); }
.sgCell:focus-visible{
  outline: 3px solid var(--sgSelectedRing);
  outline-offset: 2px;
}

/* Alternating 3×3 blocks */
.sgCell.altBox{ background: var(--sgAltBg); }

/* Givens vs user */
.sgCell.given{
  background: var(--sgGivenBg);
  color: color-mix(in srgb, var(--text, #fff) 88%, transparent);
}
:root[data-theme="light"] .sgCell.given{
  color: rgba(11,15,20,.88);
}
.sgCell.user{ color: var(--text, #fff); }
:root[data-theme="light"] .sgCell.user{ color:#0b0f14; }

/* Peer highlight (row/col/box) */
.sgCell.peer{
  background: var(--sgPeerBg);
}

/* Selected cell: obvious + crisp ring */
.sgCell.selected{
  background: var(--sgSelectedBg) !important;
  outline: 2px solid var(--sgSelectedRing);
  outline-offset: -2px;
}

/* Same digit: gentle wash + ring (doesn’t fight selection) */
.sgCell.same:not(.selected){
  background: var(--sgSameBg);
}
.sgCell.same{
  box-shadow: inset 0 0 0 2px var(--sgSameRing);
}

/* Conflicts (only when Conflicts ON) */
.sgCell.conflict{
  background: var(--sgBadBg) !important;
  outline: 2px solid var(--sgBadRing);
  outline-offset: -2px;
}

/* Thick 3×3 lines (drawn into the 1px gaps so it’s perfectly aligned) */
.sgCell.bC::before{
  content:"";
  position:absolute;
  top:-1px; bottom:-1px;
  right:-1px;
  width: 3px; /* covers the 1px gap + thick line */
  background: var(--sgLineStrong);
  pointer-events:none;
}
.sgCell.bR::after{
  content:"";
  position:absolute;
  left:-1px; right:-1px;
  bottom:-1px;
  height: 3px;
  background: var(--sgLineStrong);
  pointer-events:none;
}

/* Notes grid */
.sgNotes{
  position:absolute;
  inset: 6px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  font-size: 9px;
  font-weight: 900;
  opacity: .95;
  color: var(--sgNotes);
  place-items:center;
  pointer-events:none;
}
.sgNotes span{ transform: translateY(.5px); }

/* Unit completion glow (kept — feels fun) */
.sgCell.unitGlow{
  animation: sgUnitGlow .65s ease both;
}
@keyframes sgUnitGlow{
  0%{ box-shadow: inset 0 0 0 0 rgba(74,222,128,.0); }
  35%{ box-shadow: inset 0 0 0 2px rgba(74,222,128,.24); }
  100%{ box-shadow: inset 0 0 0 0 rgba(74,222,128,.0); }
}

/* =========================
   Controls (clean + obvious toggles)
   ========================= */
.sgControls{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.sgKeypad{
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
}

.sgKey{
  border-radius: 16px;
  border: 1px solid var(--sgBtnLine);
  background: var(--sgBtnBg);
  padding: 14px 0;
  cursor:pointer;
  font-weight: 950;
  font-size: 16px;
  transition: transform .10s ease;
}
.sgKey:active{ transform: scale(.985); }

.sgActions{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.sgRow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sgRow2{
  grid-template-columns: repeat(3, 1fr);
}

.sgBtn{
  border-radius: 14px;
  border: 1px solid var(--sgBtnLine);
  background: var(--sgBtnBg);
  padding: 12px 10px;
  cursor:pointer;
  font-weight: 900;
  transition: transform .10s ease, background .10s ease, border-color .10s ease, box-shadow .10s ease;
}
.sgBtn:active{ transform: scale(.985); }

/* Toggle ON state: extremely clear */
.sgToggle[aria-pressed="true"]{
  border-color: var(--sgPrimaryLine);
  background: var(--sgPrimaryBg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgPrimaryLine) 35%, transparent);
}

/* Primary (Check) */
.sgPrimary{
  border-color: var(--sgPrimaryLine);
  background: var(--sgPrimaryBg);
}

/* Assist panel */
.sgAssistPanel{
  margin-top: 2px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--sgBtnLine);
  background: var(--sgBtnBg);
}
.sgAssistPanel[hidden]{ display:none !important; }

.sgToolsRow{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sgToolCard{
  text-align:left;
  border-radius: 14px;
  border: 1px solid var(--sgBtnLine);
  background: rgba(255,255,255,.03);
  padding: 10px 10px;
  cursor:pointer;
  transition: transform .10s ease, border-color .10s ease, background .10s ease;
}
:root[data-theme="light"] .sgToolCard{ background: rgba(11,15,20,.02); }

.sgToolCard:active{ transform: scale(.985); }
.sgToolTitle{ font-size: 12px; letter-spacing:.4px; font-weight: 950; }
.sgToolSub{ font-size: 12px; margin-top:4px; opacity:.85; }

.sgToolCard.locked{ opacity:.82; }
.sgToolCard.unlocked{
  border-color: rgba(125,211,252,.35);
  background: linear-gradient(180deg, rgba(125,211,252,.12), rgba(74,222,128,.06));
}
.sgToolCard.flip{ animation: sgFlip .22s ease both; }
@keyframes sgFlip{
  0%{ transform: perspective(600px) rotateX(0deg); }
  50%{ transform: perspective(600px) rotateX(12deg); }
  100%{ transform: perspective(600px) rotateX(0deg); }
}

/* Auto Notes confirm */
#toolAutoNotes.armed{
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.14) !important;
}

/* Footer row */
.sgMiniRow{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sgCell, .sgToolCard, .sgBtn, .sgKey { transition: none !important; }
  .sgCell.unitGlow, .sgToolCard.flip { animation: none !important; }
}


/* --- Quick fixes (mobile fit + peer highlight) --- */

/* Mobile: board must fit inside the card padding */
.sgBoardWrap{
  max-width: 100%;
  width: 100%;
}

/* Keep it nicely sized on larger screens */
@media (min-width: 600px){
  .sgBoardWrap{
    width: min(92vw, 520px);
    max-width: 520px;
  }
}

/* Slightly tighter on very small phones */
@media (max-width: 380px){
  .sgKeypad{ gap: 6px; }
  .sgRow{ gap: 6px; }
}

/* Light mode peer highlight: make it clearly visible */
:root[data-theme="light"]{
  --sgPeerBg: rgba(37, 99, 235, .10); /* stronger blue wash */
}

/* Ensure peer highlight shows even on altBox cells */
:root[data-theme="light"] .sgCell.peer{
  background: var(--sgPeerBg) !important;
}

/* Light mode: peer highlight (one notch stronger, still tasteful) */
:root[data-theme="light"]{
  --sgPeerBg: rgba(74, 160, 255, .19);
}

:root[data-theme="light"] .sgCell.peer{
  background: var(--sgPeerBg) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 160, 255, .26);
}




/* Light mode: warmer peer highlight (row/col/box), tasteful but clearer */
:root[data-theme="light"]{
  --sgPeerBg: rgba(255, 170, 90, .20);      /* warm amber wash */
  --sgPeerEdge: rgba(255, 140, 0, .22);     /* warm edge */
}

:root[data-theme="light"] .sgCell.peer{
  background: var(--sgPeerBg) !important;
  box-shadow: inset 0 0 0 1px var(--sgPeerEdge) !important;
}



/* Light mode: confident warm peer highlight (not washy) */
:root[data-theme="light"]{
  --sgPeerBg:   rgba(255, 170, 70, .28);  /* warm + stronger */
  --sgPeerEdge: rgba(234, 120, 12, .40);  /* crisp orange edge */
}

/* row/col/box highlight */
:root[data-theme="light"] .sgCell.peer{
  background: var(--sgPeerBg) !important;
  box-shadow:
    inset 0 0 0 1px var(--sgPeerEdge) !important,   /* crisp outline */
    inset 0 0 0 999px rgba(255, 170, 70, .06) !important; /* gentle warm boost */
}

/* keep selected cell stronger than peers */
:root[data-theme="light"] .sgCell.selected{
  box-shadow:
    inset 0 0 0 2px rgba(234, 120, 12, .55),
    0 2px 0 rgba(11,15,20,.04);
}