.wordsearch-page{
  display:grid;
  gap:20px;
}

.wordsearch-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:14px;
  flex-wrap:wrap;
}

.wordsearch-toolbar label{
  display:grid;
  gap:7px;
  font-weight:1000;
  color:#111;
}

.wordsearch-toolbar select,
.wordsearch-toolbar button{
  min-height:46px;
  border:4px solid #111;
  border-radius:16px;
  background:#fff;
  color:#111;
  box-shadow:4px 4px 0 #111;
  padding:0 14px;
  font-weight:1000;
}

.wordsearch-toolbar button{
  cursor:pointer;
  background:#ffd32a;
}

.wordsearch-message{
  background:#fff3b0;
  color:#111;
  border:4px solid #111;
  border-radius:18px;
  box-shadow:5px 5px 0 #111;
  padding:14px 16px;
  font-weight:1000;
}

.wordsearch-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
  align-items:start;
}

.wordsearch-board-card,
.wordsearch-list-card{
  background:#fff;
  border:4px solid #111;
  border-radius:26px;
  box-shadow:8px 8px 0 #111;
  padding:18px;
}

.wordsearch-board-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.wordsearch-board-head h3,
.wordsearch-list-card h3{
  margin:0;
  color:#111;
  font-size:1.3rem;
  font-weight:1000;
}

#wsProgress{
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-weight:1000;
  white-space:nowrap;
}

.wordsearch-grid{
  --cell:42px;
  display:grid;
  gap:5px;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin:0 auto;
  padding:18px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.65), transparent 34%),
    linear-gradient(145deg, #f8fbff, #dbeafe);
  border:4px solid #111;
  border-radius:24px;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,.80),
    inset 0 -8px 0 rgba(0,0,0,.08),
    6px 6px 0 #111;
  overflow:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.ws-cell{
  width:var(--cell);
  height:var(--cell);
  display:grid;
  place-items:center;
  padding:0;
  border:3px solid #111;
  border-radius:10px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.90) 0 10%, transparent 32%),
    linear-gradient(145deg, #ffffff 0%, #eef2f7 48%, #cbd5e1 100%);
  color:#111;
  font-size:1.18rem;
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:
    3px 3px 0 #111,
    inset 0 3px 0 rgba(255,255,255,.75),
    inset 0 -4px 0 rgba(0,0,0,.12);
  transition:background .08s ease, transform .08s ease, box-shadow .08s ease;
}

.ws-cell:hover{
  transform:translate(-1px,-1px);
}

.ws-cell.selecting{
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.92) 0 10%, transparent 32%),
    linear-gradient(145deg, #b9fff1 0%, #2ed3c6 52%, #119a91 100%);
  color:#061a33;
  box-shadow:
    4px 4px 0 #111,
    0 0 0 4px rgba(255,211,42,.78),
    inset 0 3px 0 rgba(255,255,255,.75),
    inset 0 -4px 0 rgba(0,0,0,.16);
  z-index:2;
}

.ws-cell.found{
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.90) 0 10%, transparent 32%),
    linear-gradient(145deg, #dcffdf 0%, #4ade80 52%, #16a34a 100%);
  color:#052e16;
  box-shadow:
    3px 3px 0 #111,
    inset 0 3px 0 rgba(255,255,255,.70),
    inset 0 -4px 0 rgba(0,0,0,.16);
}

.ws-cell.wrong{
  background:linear-gradient(145deg, #ffd1d1, #ff5c5c);
  animation:wsWrong .22s ease-in-out 2;
}

@keyframes wsWrong{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

.wordsearch-words{
  display:grid;
  gap:9px;
}

.ws-word{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:#f8fafc;
  border:3px solid #111;
  border-radius:14px;
  box-shadow:3px 3px 0 #111;
  padding:10px 12px;
  color:#111;
  font-weight:1000;
  text-transform:uppercase;
}

.ws-word.found{
  background:#d7ffd9;
  color:#14532d;
  text-decoration:line-through;
}

.ws-word .check{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:.85rem;
  flex:none;
}

.ws-word.found .check{
  background:#16a34a;
}

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

@media(max-width:760px){
  .wordsearch-grid{
    --cell:32px;
    gap:4px;
    padding:12px;
    border-radius:20px;
  }

  .ws-cell{
    border-width:2px;
    border-radius:8px;
    font-size:1rem;
    box-shadow:
      2px 2px 0 #111,
      inset 0 2px 0 rgba(255,255,255,.75),
      inset 0 -3px 0 rgba(0,0,0,.12);
  }

  .wordsearch-toolbar{
    align-items:stretch;
  }

  .wordsearch-toolbar label,
  .wordsearch-toolbar button{
    flex:1 1 100%;
  }
}