/*
 * Sanahaun ulkoasu (game.js). Vain .hdp-sanahaku-luokat; värit ytimen muuttujista (core/pelit.css) ja
 * Klassik Sanahaun löytöpaletista (MainActivity.kt FoundColors, suuri kontrasti Okabe-Ito). Mitat JS:stä
 * (game.js geometry()):
 * --n ruudukon koko, --c solun koko, --pad reunus, --fs kirjainkoko.
 */
.hdp-sanahaku-wrap {
  --sh-f0: #7fb3a0; --sh-f1: #e0b25c; --sh-f2: #9db4d8; --sh-f3: #d99a8b; --sh-f4: #b7c98a; --sh-f5: #c3a6d1;
  --sh-sel: #14a5dc; --sh-ink: var(--hdp-fg);
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-width: 0;
}
.hdp-sanahaku-wrap.is-side { flex-direction: row; align-items: flex-start; justify-content: center; gap: 20px; }
.hdp-sanahaku-wrap.is-side.is-rtl { flex-direction: row-reverse; }
.hdp-sanahaku-wrap.is-contrast {
  --sh-f0: #56b4e9; --sh-f1: #e69f00; --sh-f2: #009e73; --sh-f3: #cc79a7; --sh-f4: #f0e442; --sh-f5: #0072b2;
  --sh-sel: #0072b2; --sh-ink: #000000;
}

/* ---------- ruudukko ---------- */
.hdp-sanahaku-boardbox { position: relative; flex: none; max-width: 100%; }
.hdp-sanahaku-board {
  position: relative; width: calc(var(--n) * var(--c) + 2 * var(--pad) + 2px); height: calc(var(--n) * var(--c) + 2 * var(--pad) + 2px);
  padding: var(--pad); background: #ffffff; border: 1px solid var(--hdp-line); border-radius: var(--hdp-radius);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hdp-sanahaku-board:focus { outline: none; }
.hdp-sanahaku-board:focus-visible { outline: 3px solid var(--hdp-primary-2); outline-offset: 2px; }
.hdp-sanahaku-marks { position: absolute; left: var(--pad); top: var(--pad); overflow: visible; pointer-events: none; z-index: 0; }
.hdp-sanahaku-cells { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), var(--c)); grid-auto-rows: var(--c); }
.hdp-sanahaku-cell {
  display: grid; place-items: center; overflow: hidden; color: var(--sh-ink);
  font: 600 var(--fs, 18px)/1 var(--hdp-font-body); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.hdp-sanahaku-cell.is-cursor { box-shadow: inset 0 0 0 2px var(--hdp-primary); border-radius: 6px; }
.hdp-sanahaku-found { opacity: .55; }
.hdp-sanahaku-wrap.is-contrast .hdp-sanahaku-found { opacity: .75; }
.hdp-sanahaku-sel { stroke: var(--sh-sel); opacity: .45; }
.hdp-sanahaku-start { fill: none; stroke: var(--hdp-primary); stroke-width: 3; }
.hdp-sanahaku-hint { fill: var(--hdp-okra); stroke: var(--hdp-okra-dark); stroke-width: 2; opacity: .9; }

/* Palauterivi (löytö, ohi, vihje) sanalistan yläpuolella kuten sovelluksessa; ruudunlukija saa ctx.announcen. */
.hdp-sanahaku-status { margin: 0 0 8px; min-height: 1.35em; color: var(--hdp-muted); font: 500 14px/1.35 var(--hdp-font-body); }
.hdp-sanahaku-status[data-kind="found"] { color: var(--hdp-primary); font-weight: 600; }
.hdp-sanahaku-wrap:not(.is-side) .hdp-sanahaku-status { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- sanalista ---------- */
.hdp-sanahaku-panel { width: 100%; min-width: 0; }
.hdp-sanahaku-wrap.is-side .hdp-sanahaku-panel { flex: none; padding-top: 4px; }
.hdp-sanahaku-caption {
  margin: 0 0 10px; color: var(--hdp-muted); font: 600 12px/1.3 var(--hdp-font-display); letter-spacing: .06em; text-transform: uppercase;
}
.hdp-sanahaku-wrap:not(.is-side) .hdp-sanahaku-caption { display: none; }
.hdp-sanahaku-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hdp-sanahaku-wrap:not(.is-side) .hdp-sanahaku-words { justify-content: center; }
.hdp-sanahaku-word {
  margin: 0; padding: 4px 10px; border-radius: 999px; background: var(--hdp-bg); color: var(--hdp-fg);
  font: 600 14px/1.3 var(--hdp-font-body); letter-spacing: .02em; white-space: nowrap; transition: background .2s, color .2s;
}
.hdp-sanahaku-word.is-found {
  background: color-mix(in srgb, var(--sh-c, #d1d2d4) 45%, #ffffff); color: var(--hdp-muted);
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.hdp-sanahaku-word.is-found::before { content: "✓"; display: inline-block; margin-inline-end: 5px; color: var(--hdp-fg); text-decoration: none; }

@media (max-width: 559px) {
  /* Puhelimessa ruudukko ulottuu reunasta reunaan kuten pasianssin lauta. */
  .hdp-sanahaku-board { border-radius: 0; border-left-color: transparent; border-right-color: transparent; }
  .hdp-sanahaku-panel { padding: 0 10px; }
  .hdp-sanahaku-status { margin-bottom: 6px; font-size: 13px; }
  .hdp-sanahaku-words { gap: 5px; }
  .hdp-sanahaku-word { padding: 3px 8px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hdp-sanahaku-word { transition: none; }
}