/* Szókígyó (wend) — prefix w- */
.w-frame {
  width: min(420px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 10px;
  /* Found-word palette: pastel fills with dark ink in light mode… */
  --w-c0: #a5d8ff; --w-c1: #b2f2bb; --w-c2: #ffd8a8; --w-c3: #eebefa;
  --w-c4: #ffec99; --w-c5: #99e9f2; --w-c6: #fcc2d7; --w-c7: #d0bfff;
  --w-ink: #1c1b1f;
  --w-tile: var(--surface-2);
}
@media (prefers-color-scheme: dark) {
  /* …deeper fills with light ink in dark mode. */
  .w-frame {
    --w-c0: #1c7ed6; --w-c1: #2f9e44; --w-c2: #d9480f; --w-c3: #ae3ec9;
    --w-c4: #e67700; --w-c5: #0c8599; --w-c6: #c2255c; --w-c7: #6741d9;
    --w-ink: #ffffff;
  }
}

.w-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.w-theme {
  display: flex; flex-direction: column; min-width: 0;
  padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--game);
}
.w-theme-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.w-theme-title { font-size: 1.12rem; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.w-count { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

.w-pill {
  align-self: center; min-height: 38px; max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 18px; border-radius: 999px;
  font-weight: 800; font-size: 1.15rem; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface-2); color: var(--text);
  transition: background-color .15s, color .15s;
}
.w-pill-idle { font-weight: 600; font-size: .95rem; letter-spacing: 0; color: var(--muted); background: transparent; }
.w-pill-sel { background: var(--game); color: #fff; }
.w-pill-good { background: var(--good); color: #fff; }
.w-pill-bad { background: var(--danger); color: #fff; }
@media (prefers-color-scheme: dark) {
  .w-pill-good, .w-pill-bad { color: #131316; }
}
.w-shake { animation: w-shake .38s ease-in-out; }
@keyframes w-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.w-board { position: relative; width: 100%; aspect-ratio: var(--cols) / var(--rows); }
.w-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.w-line, .w-sel-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.w-line { stroke-width: 30; }
.w-sel-line { stroke: var(--game); stroke-width: 22; opacity: .5; }
.w-grid {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  cursor: pointer; touch-action: none;
}
.w-tile { display: flex; align-items: center; justify-content: center; }
.w-dot {
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--w-tile); color: var(--text);
  font-weight: 800; font-size: clamp(18px, 6.1vw, 27px); line-height: 1;
  transition: background-color .12s, color .12s, transform .12s;
}
@media (hover: hover) {
  .w-tile:not(.w-done):hover .w-dot { filter: brightness(.95); }
}
.w-tile.w-sel .w-dot { background: var(--game); color: #fff; transform: scale(1.06); }
.w-tile.w-done { cursor: default; }
.w-tile.w-done .w-dot { color: var(--w-ink); }
.w-tile.w-hint .w-dot { outline: 2.5px dashed var(--game); outline-offset: 2px; }
.w-tile.w-pop .w-dot { animation: w-pop .35s ease-out; }
@keyframes w-pop { 50% { transform: scale(1.15); } }

/* Palette classes shared by tiles, lines and chips. */
.w-c0 { --w-col: var(--w-c0); } .w-c1 { --w-col: var(--w-c1); } .w-c2 { --w-col: var(--w-c2); } .w-c3 { --w-col: var(--w-c3); }
.w-c4 { --w-col: var(--w-c4); } .w-c5 { --w-col: var(--w-c5); } .w-c6 { --w-col: var(--w-c6); } .w-c7 { --w-col: var(--w-c7); }
.w-tile.w-done .w-dot { background: var(--w-col); }
.w-line { stroke: var(--w-col); }

.w-found { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 32px; }
.w-chip { padding: 4px 12px; border-radius: 999px; background: var(--w-col); color: var(--w-ink); font-weight: 800; font-size: .9rem; letter-spacing: .04em; }
.w-empty { color: var(--muted); font-size: .9rem; align-self: center; }