/* Word Search — theme override on top of the shared arcade kit. */
:root { --accent: #5ddb7a; }

#stage {
  aspect-ratio: auto;
  max-height: none;
  min-height: 580px;
  background: #0c1220;
  display: flex;
  flex-direction: column;
  padding: 54px 6px 8px;
}

/* The canvas lives in its own flex child rather than filling #stage,
   because the word list below it is a sibling. Stage and the input
   handler both target THIS element, so pointer coordinates are
   relative to the canvas and not to the padded stage. */
.grid-wrap {
  flex: 1 1 auto;
  min-height: 240px;
  position: relative;
}

.word-list {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-content: flex-start;
  padding: 10px 6px 4px;
}
.wl {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text);
}
.wl.found {
  background: rgba(93, 219, 122, 0.22);
  border-color: rgba(93, 219, 122, 0.5);
  color: #9df0b2;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.opt-row { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.opt {
  padding: 11px 17px;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.opt.active { background: linear-gradient(135deg, #5ddb7a, #35784a); color: #06210f; border-color: transparent; }