body.theme-wordsearch {
  --accent: #2f6f8f;
  --accent-soft: #e3f0f6;
  --accent-strong: #204d65;
  --accent-line: #bdd5e1;
  --accent-wash: rgba(47, 111, 143, 0.15);
}

:root[data-color-scheme="dark"] body.theme-wordsearch {
  --accent: #76b8dc;
  --accent-soft: #16232a;
  --accent-strong: #e1f2fb;
  --accent-line: #335264;
  --accent-wash: rgba(118, 184, 220, 0.18);
}

:root[data-color-palette="rose"] body.theme-wordsearch {
  --accent: #ff51ab;
  --accent-soft: #ffd9ec;
  --accent-strong: #c51f76;
  --accent-line: #ffa2cd;
  --accent-wash: rgba(255, 81, 171, 0.24);
}

:root[data-color-scheme="dark"][data-color-palette="rose"] body.theme-wordsearch {
  --accent: #ff84c7;
  --accent-soft: #3a1025;
  --accent-strong: #ffe1f1;
  --accent-line: #ff73bc;
  --accent-wash: rgba(255, 132, 199, 0.28);
}

:root[data-color-palette="ocean"] body.theme-wordsearch {
  --accent: #2f81a8;
  --accent-soft: #e2f0f8;
  --accent-strong: #214f67;
  --accent-line: #bdd8e6;
  --accent-wash: rgba(47, 129, 168, 0.16);
}

:root[data-color-scheme="dark"][data-color-palette="ocean"] body.theme-wordsearch {
  --accent: #79c3ea;
  --accent-soft: #16242d;
  --accent-strong: #dff4fd;
  --accent-line: #37596b;
  --accent-wash: rgba(121, 195, 234, 0.18);
}

body.theme-wordsearch {
  background: var(--page-glow), var(--paper);
}

.wordsearch-art::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 49%;
  height: 26%;
  border: 3px solid var(--coral);
  border-radius: 8px;
  pointer-events: none;
}

body.theme-wordsearch .game-layout {
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: 0 auto;
}

.wordsearch-stage {
  display: flex;
  justify-content: center;
}

.wordsearch-fullscreen-sidebar {
  display: none;
}

.word-pill-list.wordsearch-fullscreen-words {
  display: grid;
  gap: 10px;
  align-content: start;
}

body.theme-wordsearch .wordsearch-panel:fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 24px;
  overflow: auto;
  background: var(--paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.theme-wordsearch .wordsearch-panel:fullscreen .game-panel-head {
  display: none;
}

body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-stage {
  width: min(100%, 1280px);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-fullscreen-sidebar {
  display: block;
}

body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-grid {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
}

body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-grid[data-grid-size="24"] {
  max-width: 960px;
}

body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-grid[data-grid-size="40"] {
  max-width: 100%;
}

body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-fullscreen-words .word-pill {
  width: 100%;
  padding: 10px 12px;
}

body.theme-wordsearch .game-sidebar {
  grid-template-columns: 1fr;
  gap: 14px;
}

body.theme-wordsearch .sidebar-card {
  height: 100%;
}

.wordsearch-fullscreen-button {
  min-height: 38px;
  margin-left: auto;
  color: var(--white);
  background: var(--blue);
  border-color: var(--blue);
}

.wordsearch-fullscreen-button:hover,
.wordsearch-fullscreen-button:focus-visible {
  color: var(--white);
  background: #2953d6;
  border-color: #2953d6;
}

.wordsearch-grid {
  --search-grid-size: 12;
  --search-grid-gap: 2px;
  --search-cell-font-size: min(4.5cqw, 1.2rem);
  container-type: inline-size;
  width: 100%;
  max-width: 700px;
  display: grid;
  grid-template-columns: repeat(var(--search-grid-size), minmax(0, 1fr));
  gap: var(--search-grid-gap);
  padding: 2px;
  background: var(--ink);
  border-radius: 8px;
  touch-action: none;
  user-select: none;
}

.wordsearch-grid[data-grid-size="24"] {
  --search-grid-gap: 1px;
  --search-cell-font-size: min(2.5cqw, 0.8rem);
  max-width: 860px;
}

.wordsearch-grid[data-grid-size="40"] {
  --search-grid-gap: 1px;
  --search-cell-font-size: min(1.5cqw, 0.65rem);
  max-width: 100%;
}

.search-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: var(--surface-strong);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: var(--search-cell-font-size);
  line-height: 1;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.search-cell.anchor,
.search-cell.selected {
  color: var(--white);
  background: var(--blue);
}

.search-cell.found {
  color: var(--white);
  background: var(--leaf);
}

.search-cell.invalid {
  color: var(--white);
  background: var(--critical-strong);
  transform: scale(0.96);
}

@media (max-width: 768px) {
  body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-stage {
    grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
    gap: 16px;
  }

  body.theme-wordsearch .wordsearch-panel:fullscreen .wordsearch-fullscreen-words .word-pill {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .wordsearch-grid {
    --search-cell-font-size: min(5.5cqw, 1.1rem);
  }

  .wordsearch-grid[data-grid-size="24"] {
    --search-cell-font-size: min(2.8cqw, 0.8rem);
  }
  
  .wordsearch-grid[data-grid-size="40"] {
    --search-cell-font-size: min(1.8cqw, 0.55rem);
  }
}

body.theme-wordsearch .game-sidebar {
    grid-template-columns: 1fr;
  }

@keyframes hintBlink {
  0%, 100% {
    background-color: var(--surface-strong);
    color: var(--ink);
    transform: scale(1);
  }
  50% {
    background-color: var(--accent);
    color: var(--white);
    transform: scale(1.1);
  }
}

.search-cell.hint-blink {
  animation: hintBlink 1s ease-in-out 3;
}

button.word-count-card {
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

button.word-count-card.active {
  border-color: var(--accent-strong);
  background-color: var(--accent-wash);
}