.ws-area {
  display: inline-grid;
  gap: 3px;
  width: min(100%, 520px);
  padding: clamp(8px, 2.5vw, 18px);
  border: 1px solid rgba(84, 229, 200, .26);
  border-radius: clamp(16px, 3vw, 26px);
  background: linear-gradient(145deg, #173e48, #102d36);
  box-shadow: 0 24px 65px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255,255,255,.08);
  user-select: none;
  touch-action: none;
}

.ws-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; line-height: 0; }

.ws-col {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: clamp(4px, 1.2vw, 9px);
  background: #f4e8c8;
  box-shadow: inset 0 -3px 0 rgba(84, 60, 28, .16), 0 2px 3px rgba(0,0,0,.18);
  cursor: pointer;
  touch-action: none;
  transition: background .12s, transform .12s;
}

.ws-col.ws-selected { background: #ffd166; transform: translateY(-1px); }
.ws-col.ws-found { background: #58dfbd; box-shadow: inset 0 -3px 0 rgba(15, 91, 78, .18); }

.ws-game-over-outer {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(5, 20, 26, .88);
  backdrop-filter: blur(8px);
}

.ws-game-over-inner { display: grid; place-items: center; width: min(100%, 420px); }
.ws-game-over { padding: 34px; border: 1px solid rgba(84,229,200,.4); border-radius: 24px; background: #12343e; }
.ws-game-over h2 { margin: 0 0 8px; color: #ffd166; font-size: clamp(28px, 7vw, 44px); }
.ws-game-over p { margin: 0; color: #fff7e8; }