/*
 * Sudokun ulkoasu. Vain .hdp-sudoku-luokat ja .hdpeli[data-game="sudoku"]-valitsimet. Mitat tulevat JS:stä
 * muuttujina: --c (ruutu), --S (ruudukko), --pad-w, --key-h, --act-h. Värit ytimen muuttujista ja BRANDI.md:stä.
 */
.hdp-sudoku {
  --hdp-su-ink: #22303a;
  --hdp-su-thin: #c9d2d9;
  --hdp-su-peer: #eef4f8;
  --hdp-su-same: #d6ebf6;
  --hdp-su-sel: #bfe0f1;
  --hdp-su-bad: #c62828;
  --hdp-su-bad-bg: #fde8e8;
  --hdp-su-hint: #fde9c7;
  --hdp-su-hint-unit: #fff6e8;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 0 4px;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.hdp-sudoku.is-side { flex-direction: row; align-items: flex-start; justify-content: center; gap: 24px; }
.hdp-sudoku.is-narrow { gap: 8px; }

/* ---------- ruudukko ---------- */
.hdp-sudoku-grid {
  position: relative; flex: none; width: var(--S); height: var(--S); border: 2px solid var(--hdp-su-ink); border-radius: 4px;
  background: var(--hdp-su-thin); overflow: hidden; touch-action: manipulation; cursor: pointer;
}
.hdpeli .hdp-sudoku-grid:focus, .hdpeli .hdp-sudoku-grid:focus-visible { outline: none; }
.hdpeli .hdp-sudoku.is-kbd .hdp-sudoku-grid:focus { outline: 3px solid var(--hdp-primary-2); outline-offset: 2px; }
.hdp-sudoku-row { display: contents; }
.hdp-sudoku-line { position: absolute; background: var(--hdp-su-ink); z-index: 3; pointer-events: none; }
.hdp-sudoku-line.is-v { top: 0; bottom: 0; width: 2px; }
.hdp-sudoku-line.is-h { left: 0; right: 0; height: 2px; }
.hdp-sudoku-cell {
  position: absolute; width: var(--c); height: var(--c); background: #ffffff; display: grid; place-items: center;
  transition: background-color .12s;
}
.hdp-sudoku-v { font: 500 calc(var(--c) * .58)/1 var(--hdp-font-body); color: var(--hdp-primary); font-variant-numeric: tabular-nums; }
.hdp-sudoku-cell.is-given .hdp-sudoku-v { font: 600 calc(var(--c) * .58)/1 var(--hdp-font-display); color: var(--hdp-fg); }
.hdp-sudoku-notes {
  position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  font: 500 calc(var(--c) * .26)/1 var(--hdp-font-body); color: #55636d; pointer-events: none;
}
.hdp-sudoku-notes span { display: grid; place-items: center; }
.hdp-sudoku-notes .is-same-note { color: var(--hdp-primary); font-weight: 700; }
.hdp-sudoku-notes .is-elim { color: var(--hdp-su-bad); text-decoration: line-through; font-weight: 700; }

.hdp-sudoku-cell.is-hint-unit { background: var(--hdp-su-hint-unit); }
.hdp-sudoku-cell.is-peer { background: var(--hdp-su-peer); }
.hdp-sudoku-cell.is-hint-cell { background: var(--hdp-su-hint); }
.hdp-sudoku-cell.is-same { background: var(--hdp-su-same); }
.hdp-sudoku-cell.is-selected { background: var(--hdp-su-sel); outline: 2px solid var(--hdp-primary); outline-offset: -2px; z-index: 2; }
.hdp-sudoku-cell.is-hint-target { outline: 3px solid var(--hdp-okra); outline-offset: -3px; z-index: 2; }
.hdp-sudoku-cell.is-hint-target.is-selected { outline-color: var(--hdp-okra-dark); }
/* Ristiriita: punainen numero, vaalea punainen tausta ja kolmio kulmassa (näkyy ilman värejäkin). */
.hdp-sudoku-cell.is-conflict { background: var(--hdp-su-bad-bg); }
.hdp-sudoku-cell.is-conflict.is-selected { background: #f9d3d3; }
.hdp-sudoku-cell.is-conflict .hdp-sudoku-v, .hdp-sudoku-cell.is-wrong .hdp-sudoku-v { color: var(--hdp-su-bad); }
.hdp-sudoku-cell.is-conflict::after {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid;
  border-width: 0 calc(var(--c) * .24) calc(var(--c) * .24) 0; border-color: transparent var(--hdp-su-bad) transparent transparent;
}
.hdp-sudoku-cell.is-wrong:not(.is-conflict) .hdp-sudoku-v { text-decoration: underline wavy var(--hdp-su-bad); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- näppäinalue ---------- */
.hdp-sudoku-pad { flex: none; width: var(--pad-w); max-width: 100%; display: grid; gap: 8px; }
.hdp-sudoku.is-side .hdp-sudoku-pad { gap: 16px; }
.hdp-sudoku.is-narrow .hdp-sudoku-pad { gap: 6px; }
.hdp-sudoku-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hdp-sudoku.is-side .hdp-sudoku-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hdp-sudoku.is-narrow .hdp-sudoku-actions { gap: 6px; }
.hdpeli .hdp-sudoku-act {
  height: var(--act-h); min-width: 0; margin: 0; padding: 0 4px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border: 1px solid var(--hdp-line); border-radius: 10px; background: var(--hdp-surface);
  color: var(--hdp-fg); font: 600 12px/1.1 var(--hdp-font-display); cursor: pointer; touch-action: manipulation;
  transition: background .15s, border-color .15s; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.hdpeli .hdp-sudoku-act svg { width: 18px; height: 18px; flex: none; }
.hdpeli .hdp-sudoku-act span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdpeli .hdp-sudoku-act:hover:not(:disabled) { border-color: var(--hdp-primary); }
.hdpeli .hdp-sudoku-act:disabled { opacity: .45; cursor: default; }
.hdpeli .hdp-sudoku-act[aria-pressed="true"] { background: rgba(22, 132, 184, .12); border-color: var(--hdp-primary); color: var(--hdp-primary); box-shadow: inset 0 0 0 1px var(--hdp-primary); }
.hdp-sudoku.is-narrow .hdp-sudoku-act { font-size: 11px; gap: 2px; }
.hdp-sudoku.is-narrow .hdp-sudoku-act svg { width: 17px; height: 17px; }

.hdp-sudoku-keys { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.hdp-sudoku.is-side .hdp-sudoku-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hdp-sudoku.is-narrow .hdp-sudoku-keys { gap: 2px; }
.hdpeli .hdp-sudoku-key {
  position: relative; height: var(--key-h); min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border: 1px solid var(--hdp-line); border-radius: 10px; background: var(--hdp-surface);
  color: var(--hdp-primary); cursor: pointer; touch-action: manipulation; transition: background .15s, border-color .15s, opacity .15s;
  box-shadow: none; text-transform: none; letter-spacing: 0;
}
.hdp-sudoku.is-narrow .hdp-sudoku-key { border-radius: 8px; }
.hdpeli .hdp-sudoku-key:hover { border-color: var(--hdp-primary); }
.hdpeli .hdp-sudoku-key.is-same { background: var(--hdp-su-same); }
.hdpeli .hdp-sudoku-key.is-done { opacity: .38; }
.hdp-sudoku-key-n { font: 600 28px/1 var(--hdp-font-display); }
.hdp-sudoku-key-left { font: 500 11px/1 var(--hdp-font-body); color: var(--hdp-muted); min-height: 11px; }
.hdp-sudoku.is-narrow .hdp-sudoku-key-n { font-size: 22px; }
.hdp-sudoku.is-narrow .hdp-sudoku-key-left { font-size: 10px; min-height: 10px; }
/* Muistiinpanotila: numero pienenä kulmassa kuten ruudun muistiinpano. */
.hdp-sudoku-keys.is-notes .hdp-sudoku-key { color: #55636d; background: #f7f9fa; }
.hdp-sudoku-keys.is-notes .hdp-sudoku-key-n { font-size: 18px; font-weight: 500; }
.hdp-sudoku.is-narrow .hdp-sudoku-keys.is-notes .hdp-sudoku-key-n { font-size: 15px; }

/* ---------- vihjepaneeli ---------- */
.hdp-sudoku-panel {
  position: absolute; z-index: 10; display: grid; align-content: start; gap: 10px; padding: 14px; overflow: auto;
  background: var(--hdp-surface); border: 2px solid var(--hdp-okra); border-radius: 12px; box-shadow: var(--hdp-shadow);
  font: 400 14px/1.5 var(--hdp-font-body); color: var(--hdp-fg); text-align: start; user-select: text; -webkit-user-select: text;
}
.hdp-sudoku-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hdp-sudoku-panel h3 { margin: 0; padding: 0; font: 700 17px/1.25 var(--hdp-font-display); color: var(--hdp-fg); }
.hdp-sudoku-badge { font: 600 12px/1.2 var(--hdp-font-display); color: var(--hdp-okra-dark); background: rgba(244, 186, 108, .22); padding: 4px 8px; border-radius: 999px; }
.hdp-sudoku-panel p { margin: 0; color: var(--hdp-muted); }
.hdp-sudoku-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hdp-sudoku.is-narrow .hdp-sudoku-panel { padding: 12px; gap: 8px; font-size: 13.5px; }
.hdp-sudoku.is-narrow .hdp-sudoku-panel h3 { font-size: 16px; }

/* ---------- uusi peli -dialogi ja tilastot (dialogi on bodyssä) ---------- */
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-new { display: grid; gap: 10px; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-new h3 { margin: 6px 0 0; padding: 0; font: 600 12px/1.2 var(--hdp-font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--hdp-muted); }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-new p { font-size: 14px; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-levels { display: grid; gap: 8px; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-opt,
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day {
  display: grid; gap: 2px; width: 100%; margin: 0; padding: 10px 12px; text-align: start; border: 1px solid var(--hdp-line); border-radius: 10px;
  background: var(--hdp-surface); color: var(--hdp-fg); cursor: pointer; font: 400 13px/1.4 var(--hdp-font-body); box-shadow: none; text-transform: none; letter-spacing: 0;
}
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-opt strong,
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day strong { font: 600 15px/1.25 var(--hdp-font-display); }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-opt span,
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day span { color: var(--hdp-muted); }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-opt:hover,
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day:hover:not(:disabled) { border-color: var(--hdp-primary); }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-opt.is-current,
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day.is-current { border-color: var(--hdp-primary); box-shadow: inset 0 0 0 1px var(--hdp-primary); }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-dailies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day { min-height: 56px; align-content: center; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day.is-solved { background: #f1f7f3; border-color: #b9d8c4; cursor: default; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-day.is-solved span { color: #24734a; font-weight: 600; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats-wrap { overflow-x: auto; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats { width: 100%; border-collapse: collapse; font: 400 13px/1.35 var(--hdp-font-body); font-variant-numeric: tabular-nums; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats th,
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats td { padding: 7px 4px; border-bottom: 1px solid var(--hdp-line); text-align: center; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats thead th { font: 600 11px/1.25 var(--hdp-font-display); color: var(--hdp-muted); text-transform: uppercase; letter-spacing: .03em; vertical-align: bottom; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats tbody th,
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats thead .is-first { text-align: start; }
.hdpeli-overlay[data-game="sudoku"] .hdp-sudoku-stats tbody th { font: 600 13px/1.3 var(--hdp-font-display); }

@media (prefers-reduced-motion: reduce) {
  .hdp-sudoku-cell, .hdpeli .hdp-sudoku-act, .hdpeli .hdp-sudoku-key { transition: none; }
}