#wordsearch-generator {
  --ws-font-stack: Segoe UI, Roboto, Oxygen, Ubuntu, Arial, sans-serif;
  --ws-radius-sm: 6px;
  --ws-radius: 12px;
  --ws-radius-lg: 18px;
  --ws-transition: .25s cubic-bezier(.4, .2, .2, 1);
  --ws-accent: #7c3aed;
  --ws-accent-alt: #6b21a8;
  --ws-accent-soft: #ede9fe;
  --ws-outline: #d7c9f7;
  --ws-surface: var(--bg-card, #ffffff);
  --ws-surface-alt: var(--bg-secondary, #f4f4fa);
  --ws-surface-grid: var(--ws-surface);
  --ws-surface-grid-alt: var(--ws-surface-alt);
  --ws-text: var(--text-primary, #2d2d33);
  --ws-text-soft: var(--text-secondary, #58586a);
  --ws-danger: var(--error, #dc3645);
  --ws-export-bg: var(--ws-surface);
  --ws-section-gap: 34px;
  --ws-grid-cell-size: 30px;
  --ws-grid-cell-font: 16px;
  /* overwrites */
  --ws-side-panel-width: 300px;
  --ws-side-panel-padding: 16px 18px 18px;
  --ws-side-chip-font: 0.75rem;
}

/* Dark Mode */
html[data-theme="dark"] #wordsearch-generator {
  --ws-accent: #f43f5e;
  --ws-accent-alt: #9f1239;
  --ws-accent-soft: #3a1622;
  --ws-outline: #5c1b30;
  --ws-surface: var(--bg-card, #1f1f24);
  --ws-surface-alt: var(--bg-secondary, #16181d);
  --ws-surface-grid: #262b33;
  --ws-surface-grid-alt: #323843;
  --ws-text: var(--text-primary, #f2f2f5);
  --ws-text-soft: var(--text-secondary, #b9b9c6);
  --ws-danger: var(--error, #f05264);
  --ws-export-bg: var(--ws-surface);
}

#wordsearch-generator .ws-container {
  background: var(--ws-surface);
  border: 1px solid var(--ws-outline);
  border-radius: var(--ws-radius-lg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  padding: clamp(20px, 4vw, 32px);
  margin: 20px auto 60px;
  max-width: 1000px;
  width: 100%;
  backdrop-filter: saturate(120%) blur(2px);
  overflow: hidden;
}

.ws-header {
  margin-bottom: 18px;
}

.ws-panel {
  background: var(--ws-accent-soft);
  border: 1px solid var(--ws-outline);
  border-radius: var(--ws-radius);
  padding: 18px 18px 14px;
  margin-bottom: 26px;
}

.ws-flex-row {
  display: flex;
  align-items: flex-end;
}

.ws-flex-wrap {
  flex-wrap: wrap;
}

.ws-gap {
  gap: 14px;
}

.ws-grow {
  flex: 1;
  min-width: 160px;
}

.ws-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-field-group label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ws-text-soft);
}

#wordsearch-generator input[type="text"],
#wordsearch-generator input[type="number"] {
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--ws-surface-alt);
  background: var(--ws-surface-alt);
  font: inherit;
  font-size: .9rem;
  color: var(--ws-text);
  transition: var(--ws-transition);
}

#wordsearch-generator input:focus {
  outline: none;
  border-color: var(--ws-accent);
  background: var(--ws-surface);
}

.ws-added-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  max-height: 152px;
  overflow-y: auto;
  padding-right: 4px;
}

.ws-word-chip {
  background: var(--ws-surface-alt);
  padding: 6px 10px 6px 14px;
  border-radius: 32px;
  display: inline-flex;
  gap: 8px;
  font-size: .8rem;
  align-items: center;
  border: 1px solid var(--ws-outline);
  color: var(--ws-text-soft);
}

.ws-remove-word {
  background: var(--ws-accent);
  color: #fff;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--ws-transition);
}

.ws-remove-word:hover {
  background: var(--ws-accent-alt);
}

.ws-action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ws-btn {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--ws-surface-alt);
  color: var(--ws-text);
  gap: 6px;
  align-items: center;
  font-size: .85rem;
  line-height: 1.15;
  transition: var(--ws-transition);
}

.ws-btn:hover {
  background: var(--ws-accent-soft);
  color: var(--ws-text);
}

.ws-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--ws-accent);
}

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

.ws-btn-primary {
  background: linear-gradient(45deg, var(--ws-accent), var(--ws-accent-alt));
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}

.ws-btn-primary:hover {
  filter: brightness(1.05);
}

.ws-btn-accent {
  background: linear-gradient(45deg, var(--ws-accent-alt), var(--ws-accent));
  color: #fff;
}

.ws-btn-accent:hover {
  filter: brightness(1.07);
}

.ws-btn-secondary {
  background: var(--ws-surface);
  border: 1px solid var(--ws-outline);
  color: var(--ws-text-soft);
}

.ws-btn-secondary:hover {
  background: var(--ws-surface-alt);
  color: var(--ws-text);
}

.ws-puzzle-layout,
.ws-solution-layout {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

@media (min-width: 860px) {

  .ws-puzzle-layout,
  .ws-solution-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .ws-grid-card {
    flex: 1 1 auto;
  }

  .ws-wordlist-card,
  .ws-found-card {
    flex: 0 0 var(--ws-side-panel-width);
    max-width: var(--ws-side-panel-width);
  }
}

.ws-grid-card,
.ws-wordlist-card,
.ws-solution-grid-card,
.ws-found-card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-outline);
  border-radius: 18px;
  padding: var(--ws-side-panel-padding);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .14);
  min-width: 0;
}

.ws-section-title {
  margin: 0;
  font-size: 1.05rem;
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  color: var(--ws-text);
}

.ws-grid-header,
.ws-solution-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.ws-grid-host {
  overflow: auto;
  max-width: 100%;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ws-surface-grid-alt), var(--ws-surface-grid));
  padding: 8px;
  border: 2px solid var(--ws-outline);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, .12);
}

.ws-grid-host table {
  border-collapse: collapse;
  margin: 0 auto;
}

.ws-grid-host td {
  width: var(--ws-grid-cell-size);
  height: var(--ws-grid-cell-size);
  text-align: center;
  font-weight: 700;
  font-size: clamp(12px, var(--ws-grid-cell-font), 17px);
  /* font<=17px */
  font-family: var(--ws-font-stack);
  background: var(--ws-surface-grid);
  color: var(--ws-text);
  border: 1px solid var(--ws-outline);
  transition: .12s ease;
}

.ws-grid-host tr:nth-child(even) td {
  background: var(--ws-surface-grid-alt);
}

.ws-grid-host td.ws-highlight {
  background: var(--ws-accent-alt) !important;
  color: #fff !important;
}

.ws-wordlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.ws-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ws-words .ws-word {
  background: var(--ws-accent-alt);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: var(--ws-side-chip-font);
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: var(--ws-transition);
}

.ws-words .ws-word:hover {
  background: var(--ws-accent);
}

.ws-words .ws-word.editing {
  background: var(--ws-surface) !important;
  color: var(--ws-text) !important;
  outline: 2px solid var(--ws-accent);
  cursor: text;
}

.ws-btn-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

/* Found Words */
.ws-found-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 310px;
  overflow-y: auto;
}

.ws-found-chip {
  background: var(--ws-accent);
  color: #fff;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .55px;
}

.ws-missing {
  flex-basis: 100%;
  margin-top: 8px;
  font-size: .72rem;
  color: var(--ws-danger);
  font-weight: 600;
}

#ws-solution-wrapper {
  margin-top: var(--ws-section-gap);
}

#ws-puzzle-wrapper {
  margin-bottom: 8px;
}

/* scrollbar */
.ws-wordlist::-webkit-scrollbar,
.ws-added-words::-webkit-scrollbar,
.ws-grid-host::-webkit-scrollbar {
  width: 10px;
}

.ws-wordlist::-webkit-scrollbar-track,
.ws-added-words::-webkit-scrollbar-track,
.ws-grid-host::-webkit-scrollbar-track {
  background: var(--ws-surface-alt);
}

.ws-wordlist::-webkit-scrollbar-thumb,
.ws-added-words::-webkit-scrollbar-thumb,
.ws-grid-host::-webkit-scrollbar-thumb {
  background: var(--ws-accent-alt);
  border-radius: 6px;
  border: 2px solid var(--ws-surface-alt);
}

/* Responsive */
@media (max-width:780px) {

  .ws-puzzle-layout,
  .ws-solution-layout {
    flex-direction: column;
  }
}

@media (max-width:540px) {
  .ws-panel {
    padding: 16px 14px 12px;
  }

  .ws-action-buttons {
    width: 100%;
  }

  .ws-btn-primary,
  .ws-btn-accent,
  .ws-btn-secondary {
    font-size: .78rem;
  }

  .ws-title {
    font-size: clamp(1.65rem, 7vw, 2.05rem);
  }
}

@media (prefers-reduced-motion:reduce) {

  .ws-btn,
  .ws-word,
  .ws-word-chip {
    transition: none !important;
  }
}