/* SUDOKU — calm editorial paper & graphite. Own identity, own board geometry. */
:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body.game-sudoku{--ink:#26352c;--forest:#20614d;--muted:#697b72;--line:#d5ded6;--paper:#faf9f4;background:#f4f1e8;color:var(--ink);min-height:100vh;margin:0}
body.game-sudoku button{font:inherit;cursor:pointer}
body.game-sudoku button:focus-visible,body.game-sudoku a:focus-visible{outline:3px solid #389775;outline-offset:3px}
.sudoku-header{max-width:1180px;margin:auto;height:88px;padding:0 30px;display:flex;align-items:center;gap:20px;border-bottom:1px solid #d5ded6}
.sudoku-back,.sudoku-help{height:44px;width:44px;border-radius:13px;display:grid;place-items:center;border:1px solid #d5ded6;background:#fff;color:var(--forest);font-weight:800;text-decoration:none;font-size:24px}
.sudoku-help{margin-left:auto;font-size:19px}
.sudoku-kicker,.sudoku-overline{font-size:10px;font-weight:900;letter-spacing:.17em;color:#638576}
.sudoku-brand h1{font-family:Georgia,serif;font-size:29px;letter-spacing:-.045em;line-height:1;margin:3px 0 0;color:#213f32}
.sudoku-brand-dot{color:#6da688}
.sudoku-shell{max-width:1180px;padding:32px 28px 72px;margin:auto;display:grid;grid-template-columns:minmax(0,620px) minmax(0,260px);justify-content:center;align-items:start;gap:48px}
.sudoku-primary{min-width:0}
.sudoku-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px}.sudoku-heading p{font-size:16px;font-family:Georgia,serif;margin:5px 0 0;color:#4c6357}.sudoku-series{white-space:nowrap;color:#8c9c90;font:700 13px Georgia,serif}
.sudoku-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.sudoku-meta div{border-radius:12px;background:#fff;border:1px solid #e0e5dd;padding:10px 15px}.sudoku-meta span{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;color:#759081}.sudoku-meta strong{font-variant-numeric:tabular-nums;font-size:19px;display:block;margin-top:3px}
.sudoku-board-wrap{width:min(100%,560px);margin:auto}
.sudoku-board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));aspect-ratio:1;width:100%;border:3px solid #1d4d3b;border-radius:5px;overflow:hidden;background:#fff;user-select:none;touch-action:manipulation;box-shadow:0 10px 30px rgba(28,75,51,.08)}
.sudoku-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-right:1px solid #d1dcd2;border-bottom:1px solid #d1dcd2;background:#fff;color:#22614c;font-weight:700;font-size:clamp(18px,3.7vw,30px);font-variant-numeric:tabular-nums;transition:background .12s ease;cursor:pointer}
.sudoku-cell.box-right{border-right:2px solid #37614d}.sudoku-cell.box-bottom{border-bottom:2px solid #37614d}
.sudoku-cell.given{font-weight:850;color:#26352c;background:#f9faf7}
.sudoku-cell.peer{background:#eef4ee}.sudoku-cell.same-digit{background:#d7ecdf}.sudoku-cell.selected{background:#b7dfc6;box-shadow:inset 0 0 0 2px #398261;z-index:1}
.sudoku-cell.conflict{background:#ffe9e2!important;color:#b33d30!important;box-shadow:inset 0 0 0 2px #df6554;z-index:2}
.sudoku-cell.hinted{background:#fff0bc!important;box-shadow:inset 0 0 0 2px #d69a31;z-index:2}
.sudoku-cell:focus-visible{outline:3px solid #17624b;outline-offset:-3px;z-index:3}
.sudoku-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:100%;align-items:center;justify-items:center;padding:3px;font-size:clamp(8px,1.1vw,11px);font-weight:700;color:#5f9074}
.sudoku-feedback{border-left:3px solid #77a58a;padding:10px 14px;margin:14px 0;color:#52695b;background:rgba(255,255,255,.6);line-height:1.45;font-size:13px}
.sudoku-feedback.error{border-left-color:#dc634b;color:#a83d30}.sudoku-feedback.success{border-left-color:#2d9870;color:#23684d}
.sudoku-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.sudoku-tools button{min-height:56px;border:1px solid #dce5dc;background:#fff;color:#4c6656;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:800}
.sudoku-tools button .tool-icon{font-size:22px;color:#2e7356;line-height:1}.sudoku-tools button[aria-pressed=true]{background:#245f49;color:#fff;border-color:#245f49}.sudoku-tools button[aria-pressed=true] .tool-icon{color:#fff}
.sudoku-tools button:disabled{opacity:.4;cursor:default}
.sudoku-keypad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:12px}
.sudoku-keypad button{height:52px;border:1px solid #d2ded3;border-radius:10px;background:#fff;color:#296e54;font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;transition:background .15s ease}
.sudoku-keypad button:active{background:#cbe2d1}.sudoku-keypad button.complete-digit{opacity:.45;background:#e5ece4}
.sudoku-aside{display:grid;gap:18px;margin-top:64px}.sudoku-aside-card{background:#e5ece1;border:1px solid #d5e0d4;padding:24px;border-radius:4px 24px 4px 24px}
.sudoku-aside-card h2{font:600 29px/1.1 Georgia,serif;letter-spacing:-.035em;margin:12px 0 16px}
.sudoku-aside-card p,.sudoku-aside-card li{font-size:14px;color:#536a5b;line-height:1.6}.sudoku-aside-card ul{padding-left:18px}
.sudoku-reset,.sudoku-rules{border:1px solid #d8e1d7;color:#526858;border-radius:12px;background:rgba(255,255,255,.5);padding:14px 16px;font-size:13px;text-align:left}.sudoku-reset{width:100%;font-weight:800}.sudoku-rules summary{cursor:pointer;font-weight:800}.sudoku-rules p{font-size:12px;line-height:1.55}
.sudoku-error{padding:12px;margin:12px 0;color:#a83d30;background:#ffe9e2;border-radius:10px}.sudoku-error[hidden]{display:none}
body.game-sudoku .completion{background:rgba(19,39,29,.75)}body.game-sudoku .completion-card{background:#faf9f4;color:#26352c;border:1px solid #dce3dc;box-shadow:0 16px 70px rgba(8,35,22,.24)}
body.game-sudoku .completion-card h2{font-family:Georgia,serif}body.game-sudoku .completion-stats div{background:#e6eee7}
body.game-sudoku .completion-stats span,body.game-sudoku .completion-eyebrow{color:#60756b}body.game-sudoku .completion-copy,body.game-sudoku .completion-card p{color:#536b5e}
body.game-sudoku .completion .primary{background:#27634c;color:#fff}body.game-sudoku .completion-card>button{border:1px solid #bed0c3;background:#fff;color:#27634c}
body.game-sudoku .completion-progress{background:#e3eee4;color:#27634c}
@media(max-width:767px){.sudoku-header{height:62px;padding:0 14px;gap:12px}.sudoku-brand h1{font-size:23px}.sudoku-shell{display:block;padding:12px 12px 35px}.sudoku-heading{margin:10px 2px 12px}.sudoku-heading p{font-size:13px}.sudoku-meta{gap:6px;margin-bottom:10px}.sudoku-meta div{padding:8px 10px}.sudoku-meta strong{font-size:16px}.sudoku-board-wrap{width:100%;max-width:520px}.sudoku-cell{font-size:clamp(17px,5.4vw,25px)}.sudoku-notes{font-size:clamp(8px,2.4vw,12px);padding:1px}.sudoku-tools{gap:5px}.sudoku-tools button{flex-direction:column;gap:2px;min-height:54px;font-size:10px}.sudoku-keypad{gap:3px}.sudoku-keypad button{font-size:clamp(20px,6vw,28px);height:clamp(42px,12vw,56px);border-radius:8px}.sudoku-aside{margin-top:20px}.sudoku-aside-card{padding:18px}.sudoku-aside-card h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.sudoku-cell,.sudoku-keypad button{transition:none}}

/* On small screens use six thumb-friendly number targets in two rows. */
@media(max-width:767px){
  .sudoku-keypad{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sudoku-keypad button{height:46px;min-height:46px;font-size:24px}
}

/* Sudoku 6x6: numerals are intentionally prominent inside the larger cells.
   Only typography changes: no board dimensions, geometry or hit-target changes. */
/* These selectors must outrank body.game-sudoku button{font:inherit}
   so the actual rendered numbers don't fall back to 16px. */
body.game-sudoku button.sudoku-cell{font-size:clamp(27px,3.6vw,36px);font-weight:800;line-height:1}
body.game-sudoku button.sudoku-cell.given{font-weight:850}
body.game-sudoku .sudoku-notes{font-size:clamp(12px,1.5vw,16px)}
body.game-sudoku .sudoku-keypad button{font-size:30px;font-weight:800}
@media(max-width:767px){
  body.game-sudoku button.sudoku-cell{font-size:clamp(20px,6vw,29px)}
  body.game-sudoku .sudoku-notes{font-size:clamp(12px,3.3vw,15px)}
  body.game-sudoku .sudoku-keypad button{font-size:30px}
}

/* Guided Sudoku hints: intersection stays readable; unrelated cells recede. */
body.game-sudoku .sudoku-cell.hint-context{background:#e3f4e9;color:#245d49}
body.game-sudoku .sudoku-cell.hint-muted{background:#697e72;color:#bdcfc3;opacity:1}
body.game-sudoku .sudoku-cell.hinted{
  background:#cbf3df!important;
  box-shadow:inset 0 0 0 3px #26986c;
  color:#174f37;
  opacity:1;
  z-index:3
}
body.game-sudoku .sudoku-cell.hinted.conflict{
  background:#ffe9e2!important;
  box-shadow:inset 0 0 0 3px #d85343;
  color:#a83d30!important
}
body.game-sudoku .sudoku-feedback.hint-message{
  border-left:4px solid #389c73;
  border-radius:5px;
  background:#d9f5e6;
  color:#225c46;
  font-size:14px;
  font-weight:650
}
/* A newly completed row, column or box flashes briefly, without moving the board. */
body.game-sudoku .sudoku-cell.unit-complete{
  animation:sudoku-unit-finish 1.15s ease-out both;
  z-index:2
}
@keyframes sudoku-unit-finish{
  0%{background:#75d5a7;box-shadow:inset 0 0 0 2px #29996a}
  36%{background:#a7ebc7;box-shadow:inset 0 0 0 2px #29996a}
  100%{background:#e6f7ed;box-shadow:inset 0 0 0 0 transparent}
}
@media(max-width:767px){
  body.game-sudoku .sudoku-feedback.hint-message{
    padding:4px 8px;
    font-size:12px;
    line-height:1.22;
    min-height:42px;
    height:42px;
    max-height:42px;
    overflow:hidden;
    display:flex;
    align-items:center
  }
}
@media(prefers-reduced-motion:reduce){
  body.game-sudoku .sudoku-cell.unit-complete{
    animation:none;
    background:#b6e8cc;
    box-shadow:inset 0 0 0 2px #36976c
  }
}

/* Only explicitly requested error hints reveal the answer-key problem. */
body.game-sudoku button.sudoku-cell.hinted.hint-error{
  background:#ffe2d8!important;
  color:#963b31!important;
  box-shadow:inset 0 0 0 3px #c95e50!important;
  z-index:5;
}
body.game-sudoku .sudoku-feedback.hint-message.error{
  background:#ffe7df;
  color:#9b3b31;
  border-left-color:#cf5e4b;
}