:root{
  --board-size: 594px;
  --cell-size: 66px;

  --bg: #f6f7fb;
  --text: #222;
  --primary: #123456;

  --grid: #c9ced6;
  --grid-strong: #000;

  --given-bg: #e9edf2;
  --selected: #cfe3ff;
  --highlight: #eef6ff;
  --error: #ff6666;

  --btn-bg: #fff;
  --btn-border: #d0d5db;
  --btn-hover: #e9edf2;
}

html.dark-mode{
  --bg: #0f1318;
  --text: #e6e8eb;
  --primary: #90caf9;

  --grid: #46505a;
  --grid-strong: #b9c2cc;

  --given-bg: #1a2129;
  --selected: #263445;
  --highlight: #1e2733;
  --error: #d85b5b;

  --btn-bg: #1a2129;
  --btn-border: #36414d;
  --btn-hover: #223041;
}

*{box-sizing:border-box}
body{
  margin:0; padding:16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text);
}

h1{margin:8px 0 16px; font-weight:700}

#game-container{display:flex; flex-direction:column; align-items:center; gap:12px}

#toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center}
#toolbar button, #toolbar select{
  padding:10px 14px; font-size:16px; cursor:pointer; border-radius:10px;
  border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--text);
  transition:background-color .2s, transform .1s;
}
#toolbar button:hover, #toolbar select:hover{background:var(--btn-hover)}
#toolbar button:active{transform:scale(0.98)}
#notes-btn.active{outline:2px solid var(--primary)}

#status{display:flex; gap:24px; font-weight:600}

#board{
  display:grid;
  grid-template-columns: repeat(9, var(--cell-size));
  grid-template-rows: repeat(9, var(--cell-size));
  width:var(--board-size); height:var(--board-size);
  background:#fff0; position:relative;
}

.cell{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; cursor:pointer;
  background:#fff;
  border:1px solid var(--grid);
  transition: background-color .15s;
  user-select:none;
}
.given{background: var(--given-bg); font-weight:700; cursor:default}
.selected{background: var(--selected)}
.highlight{background: var(--highlight)}
.error{background: var(--error); color:#fff}

.main-number{color:var(--primary); font-weight:700}
.notes{display:none; width:100%; height:100%; padding:3px; color:#7a8694; font-size:12px; grid-gap:1px}
.cell.notes-mode .notes{
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr)
}
.notes-mode .main-number{display:none}
.notes span{display:flex; align-items:center; justify-content:center; user-select:none}

/* Vores gruixudes per blocs 3×3 controlades per classe */
.cell.thick-top{border-top:3px solid var(--grid-strong)}
.cell.thick-bottom{border-bottom:3px solid var(--grid-strong)}
.cell.thick-left{border-left:3px solid var(--grid-strong)}
.cell.thick-right{border-right:3px solid var(--grid-strong)}

#numbers{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  width:100%; max-width:var(--board-size); margin-top:6px;
}
.number-btn{
  width:66px; height:66px; border:1px solid var(--btn-border); background:var(--btn-bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:28px; border-radius:10px; cursor:pointer; transition: background .2s, transform .1s;
}
.number-btn:hover:not(:disabled){background:var(--btn-hover); transform:scale(1.03)}
.number-btn:disabled{opacity:.5; cursor:not-allowed}
.number-btn .count{font-size:12px; margin-top:4px; color:#7a8694}

#message-bar{min-height:20px; font-weight:600}

.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  align-items:center; justify-content:center; z-index:1000;
}
.modal-content{
  background:var(--btn-bg); color:var(--text);
  padding:24px 28px; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.2);
  text-align:center; min-width:280px; animation:pop .25s ease;
}
@keyframes pop{from{opacity:0; transform:scale(.95)} to{opacity:1; transform:scale(1)}}

@media (max-width: 640px){
  :root{
    --board-size: calc(100vw - 16px);
    --cell-size: calc((100vw - 16px) / 9);
  }
  .number-btn{width:calc((100vw - 32px)/9); height:calc((100vw - 32px)/9); font-size:22px}
  .number-btn .count{font-size:10px}
}
.selected {
    outline: 3px solid #ff9800; /* taronja destacada */
    outline-offset: -3px; /* perquè quedi dins del marc */
}