/* =========================================================================
   Word Search — styles
   -------------------------------------------------------------------------
   EVERY rule is scoped under #wordsearch-game. Nothing here targets html,
   body or any bare element selector, so dropping this into a WordPress
   theme cannot affect the rest of the page. The id also gives these rules
   enough specificity to win against most theme stylesheets without
   resorting to !important.
   ========================================================================= */

#wordsearch-game {
  /* Palette — teal chrome, blue selection, green found state.
     Prefixed with --ws- so it cannot collide with theme variables. */
  --ws-bg: #072429;
  --ws-bg-soft: #10383e;
  --ws-panel: #13424a;
  --ws-border: #276d77;
  --ws-text: #e7f3f4;
  --ws-text-dim: #8fb3b8;
  --ws-accent: #4d8dff;
  --ws-success: #4ade80;
  --ws-success-soft: rgba(74, 222, 128, 0.22);
  --ws-cell-radius: 6px;
  --ws-size: 10; /* grid is fixed at 10x10; game.js keeps this in sync */

  box-sizing: border-box;
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px 16px 26px;
  border-radius: 16px;
  background: radial-gradient(circle at 20% -10%, #14535b 0%, var(--ws-bg) 55%);
  color: var(--ws-text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  text-align: left;
}

/* ------------------- Safeguard: no theme CSS bleeding IN ------------------
   WordPress themes style bare elements (div, p, ul, li, button, select,
   headings) and reach into post content with selectors like
   `.entry-content ul li`. Left alone, those fight this component.

   `all: revert` rolls every property on our descendants back to the browser
   default, discarding the theme's author-origin declarations. It sits inside
   :where(), which contributes no specificity, so the `#wordsearch-game`
   prefix alone scores (1,0,0) — already above almost any theme selector —
   while every component rule below (id + class = (1,1,0)) still outranks it.

   Custom properties are not affected by `all`, so the --ws-* palette keeps
   inheriting normally.

   Keep this rule FIRST: the box-sizing reset below matches the same elements
   at the same specificity and must come after in source order to survive.

   Known limit: this cannot beat a theme declaration marked !important.
   See the note in wordsearch-game.php if you hit one. */
#wordsearch-game :where(
  header, section, aside, div, p, span, strong, h2, h3,
  ul, li, label, select, option, button, input, audio
) {
  all: revert;
}

/* Scoped reset: WordPress themes style lists, buttons and headings
   aggressively, so neutralise that inside the game only. */
#wordsearch-game *,
#wordsearch-game *::before,
#wordsearch-game *::after {
  box-sizing: border-box;
}

#wordsearch-game h2,
#wordsearch-game h3,
#wordsearch-game p,
#wordsearch-game ul,
#wordsearch-game li {
  margin: 0;
  padding: 0;
}

#wordsearch-game ul {
  list-style: none;
}

/* The [hidden] attribute must beat the component rules further down.
   .ws-grid, .ws-idle and .ws-complete each set display: grid/flex, and an
   author `display` declaration overrides the UA sheet's
   `[hidden] { display: none }` — which would leave the idle prompt and the
   completion message permanently on screen. !important is deliberate here:
   this utility has to win unconditionally, whatever a component sets. */
#wordsearch-game [hidden] {
  display: none !important;
}

/* ---------------------------- Header / toolbar --------------------------- */

#wordsearch-game .ws-header {
  margin-bottom: 16px;
  text-align: center;
}

#wordsearch-game .ws-title {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ws-text);
}

#wordsearch-game .ws-toolbar {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}

#wordsearch-game .ws-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#wordsearch-game .ws-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

#wordsearch-game .ws-field-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ws-text-dim);
}

#wordsearch-game .ws-select,
#wordsearch-game .ws-btn {
  font: inherit;
  min-height: 44px; /* comfortable touch target */
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ws-border);
  background: var(--ws-bg-soft);
  color: var(--ws-text);
}

#wordsearch-game .ws-btn {
  align-self: flex-end;
  background: var(--ws-accent);
  border-color: var(--ws-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}

#wordsearch-game .ws-btn:hover {
  filter: brightness(1.08);
}

#wordsearch-game .ws-btn:active {
  transform: translateY(1px);
}

#wordsearch-game input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ws-accent);
}

/* -------------------------------- Timer --------------------------------- */

#wordsearch-game .ws-timer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  min-width: 88px;
  padding: 4px 12px 6px;
  border-radius: 10px;
  border: 1px solid var(--ws-border);
  background: var(--ws-bg-soft);
}

#wordsearch-game .ws-timer-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* tabular-nums keeps the digits from shifting as the clock ticks */
  letter-spacing: 0.04em;
  color: var(--ws-text);
}

#wordsearch-game .ws-timer.is-running .ws-timer-value {
  color: var(--ws-accent);
}

#wordsearch-game .ws-timer.is-done .ws-timer-value {
  color: var(--ws-success);
}

/* -------------------------------- Layout -------------------------------- */

#wordsearch-game .ws-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 18px;
  align-items: start;
}

#wordsearch-game .ws-board-panel,
#wordsearch-game .ws-panel {
  background: var(--ws-panel);
  border: 1px solid var(--ws-border);
  border-radius: 14px;
  padding: 14px;
}

#wordsearch-game .ws-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#wordsearch-game .ws-idle {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ws-text-dim);
  font-size: 0.95rem;
}

#wordsearch-game .ws-idle strong {
  color: var(--ws-text);
}

/* --------------------------------- Grid --------------------------------- */

#wordsearch-game .ws-grid {
  display: grid;
  grid-template-columns: repeat(var(--ws-size), 1fr);
  gap: clamp(2px, 0.7vw, 5px);
  width: min(100%, 560px);
  margin: 0 auto;
  /* Essential for smooth touch/stylus dragging: stops the browser
     scrolling or zooming the page mid-selection. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#wordsearch-game .ws-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-bg-soft);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-cell-radius);
  color: var(--ws-text);
  font-size: clamp(0.75rem, 3vw, 1.2rem);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease, color 120ms ease;
}

/* Blue while dragging */
#wordsearch-game .ws-cell.is-selecting {
  background: var(--ws-accent);
  border-color: var(--ws-accent);
  color: #fff;
  transform: scale(1.06);
}

/* Green once solved */
#wordsearch-game .ws-cell.is-found {
  background: var(--ws-success-soft);
  border-color: var(--ws-success);
  color: var(--ws-success);
}

#wordsearch-game .ws-cell.is-found.is-selecting {
  background: var(--ws-accent);
  color: #fff;
}

#wordsearch-game .ws-grid.is-wrong {
  animation: ws-shake 260ms ease;
}

@keyframes ws-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ------------------------------ Word list ------------------------------- */

#wordsearch-game .ws-panel-title {
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ws-text-dim);
}

#wordsearch-game .ws-word-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wordsearch-game .ws-word-list li {
  padding: 5px 10px;
  border: 1px solid var(--ws-border);
  border-radius: 999px;
  background: var(--ws-bg-soft);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: opacity 160ms ease, color 160ms ease, border-color 160ms ease;
}

#wordsearch-game .ws-word-list li.is-found {
  color: var(--ws-success);
  border-color: var(--ws-success);
  background: var(--ws-success-soft);
  text-decoration: line-through;
  opacity: 0.75;
}

#wordsearch-game .ws-word-list-empty {
  color: var(--ws-text-dim);
  font-size: 0.9rem;
}

#wordsearch-game .ws-progress {
  margin-top: 12px;
  color: var(--ws-text-dim);
  font-size: 0.82rem;
}

/* --------------------------- Completion message ------------------------- */

#wordsearch-game .ws-complete {
  margin: 18px auto 0;
  max-width: 420px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--ws-success);
  background: var(--ws-success-soft);
  color: var(--ws-success);
  animation: ws-pop 300ms ease;
}

#wordsearch-game .ws-complete-title {
  font-size: 1.05rem;
  font-weight: 700;
}

#wordsearch-game .ws-complete-detail {
  font-size: 0.85rem;
  color: var(--ws-text);
}

@keyframes ws-pop {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 820px) {
  #wordsearch-game .ws-layout {
    grid-template-columns: 1fr;
  }

  #wordsearch-game .ws-side {
    order: 2;
  }

  #wordsearch-game .ws-grid {
    width: min(100%, 460px);
  }
}

@media (max-width: 480px) {
  #wordsearch-game {
    padding: 14px 10px 20px;
    border-radius: 12px;
  }

  #wordsearch-game .ws-toolbar {
    gap: 10px;
  }

  #wordsearch-game .ws-board-panel,
  #wordsearch-game .ws-panel {
    padding: 10px;
    border-radius: 10px;
  }

  #wordsearch-game .ws-cell {
    border-radius: 4px;
    font-size: clamp(0.7rem, 3.6vw, 1.05rem);
  }

  #wordsearch-game .ws-timer-value {
    font-size: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wordsearch-game *,
  #wordsearch-game *::before,
  #wordsearch-game *::after {
    animation: none !important;
    transition: none !important;
  }
}