/* sudoku123.de — game + page styles */

.sk-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 1.5rem;
  margin-bottom: 2rem; }
@media (max-width: 760px) { .sk-wrap { grid-template-columns: 1fr; } }

.sk-board { background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem; }
.sk-hud { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-bottom: .8rem; font-size: .9rem; color: #555; }
.sk-hud span.label { color: #888; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.sk-hud .val { font-family: monospace; font-weight: 700; color: var(--accent); }
.sk-msg { background: #f5f7fa; padding: .5rem .8rem; border-radius: 6px; margin-bottom: .8rem;
  font-size: .9rem; color: #555; min-height: 1.2em; }

#grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px;
  background: #1a1a1a; border: 2px solid #1a1a1a; border-radius: 6px;
  max-width: 540px; margin: 0 auto; aspect-ratio: 1; }
.sk-cell { background: #fff; display: flex; align-items: center; justify-content: center;
  font-family: monospace; font-size: 1.6rem; font-weight: 700; cursor: pointer;
  user-select: none; position: relative; aspect-ratio: 1; }
.sk-cell.clue   { background: #f0f0f0; color: #222; }
.sk-cell.sel    { background: #c8e0ff; }
.sk-cell.peer   { background: #e8f0fe; }
.sk-cell.same   { background: #fff3a0; }
.sk-cell.sel.same, .sk-cell.sel.peer { background: #c8e0ff; }
.sk-cell .v        { color: var(--accent); }
.sk-cell.clue .v   { color: #222; }
.sk-cell .v.wrong  { color: #d4504e; }
.sk-cell .notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%;
  font-size: .55em; color: #888; font-weight: 400; }
.sk-cell .notes span { display: flex; align-items: center; justify-content: center; }
.sk-cell.btop   { border-top: 2px solid #1a1a1a; }
.sk-cell.bbot   { border-bottom: 2px solid #1a1a1a; }
.sk-cell.bleft  { border-left: 2px solid #1a1a1a; }
.sk-cell.bright { border-right: 2px solid #1a1a1a; }

/* Sidebar controls */
.sk-side { display: flex; flex-direction: column; gap: 1rem; }
.sk-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; }
.sk-card h3 { margin: 0 0 .6rem; font-size: .9rem; color: #555; text-transform: uppercase; letter-spacing: .05em; }

.sk-difficulty { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.sk-difficulty button { padding: .5rem .6rem; border: 1px solid var(--border); background: #fff;
  border-radius: 4px; cursor: pointer; font-size: .9rem; }
.sk-difficulty button:hover { background: #e8f0fe; border-color: var(--accent); }

.sk-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.sk-pad button { padding: .7rem 0; background: var(--accent); color: #fff;
  border: none; border-radius: 4px; cursor: pointer; font-family: monospace;
  font-weight: 700; font-size: 1.15rem; }
.sk-pad button:hover { background: var(--accent-h); }
.sk-pad button.zero { background: #888; }

.sk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.sk-actions button { padding: .5rem; background: #fff; border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; font-size: .85rem; }
.sk-actions button:hover { background: #f5f7fa; }
.sk-actions button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Solver page */
.sk-solver-input { width: 100%; min-height: 200px; font-family: monospace;
  padding: .75rem; border: 1px solid var(--border); border-radius: 6px; }
.sk-solver-input:focus { outline: none; border-color: var(--accent); }
.sk-solver-result { background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem; margin-top: 1rem; }
.sk-solver-result.hidden { display: none; }
.sk-solver-board { max-width: 360px; margin: 0 auto; }

.sk-tip-list ol { padding-left: 1.5em; }
.sk-tip-list li { margin: 1rem 0; }
.sk-tip-list h3 { margin: 0 0 .25rem; font-size: 1rem; color: var(--accent); }