#grws-container {
    max-width: 800px;
    margin: auto;
    text-align: center;
    padding: 10px;
}

#grws-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    gap: 3px;
    margin-top: 10px;
}

.grws-cell {
  user-select: none;
  text-align: center;
  padding: 10px 6px;
  font-weight: 700;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  cursor: pointer;
}
.grws-cell.selected { background: linear-gradient(90deg,#ffdce6,#ffe7d1); transform: scale(1.03); z-index: 5; }
.grws-cell.wrong { animation: shake 0.28s; background: #ffdede; }
.grws-cell.found-cell { opacity: 0.28; filter: grayscale(30%); }
.grws-word.found-word { text-decoration: line-through; color: #2e7d32; font-weight: 800; }
@keyframes shake {
  0%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}
}


#grws-word-list {
    margin-top: 15px;
    font-weight: bold;
}

/* End Screen Container */
#grws-end-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background: linear-gradient(135deg, #ffe6f2, #e6f7ff);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  max-width: 600px;
  margin: 20px auto;
  position: relative;
}

#grws-end-screen.show {
  display: flex;
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

#grws-sparkles {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 120;
  display: block;
}

/* Result Message */
#grws-result-message {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #444;
}

/* Gender Reveal Text */
#grws-gender-reveal {
  font-size: 3.7rem;
  font-weight: 700;
  background: linear-gradient(90deg, #ff69b4, #87cefa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

/* Play Again Button */
#grws-play-again {
  background-color: #ff69b4;
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-bottom: 20px;
}
#grws-play-again:hover {
  background-color: #ff1493;
}

/* Sharing Buttons Container */
#grws-share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Individual Share Button */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #eee;
  color: #333;
  border-radius: 50px;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}
.share-btn:hover {
  background-color: #ddd;
}

.share-facebook { background-color: #3b5998; color: white; }
.share-twitter  { background-color: #1da1f2; color: white; }
.share-whatsapp { background-color: #25d366; color: white; }

/* ---- reveal styling for remaining answers (shown after 5s on loss) ---- */
.grws-cell.reveal {
  background: linear-gradient(90deg, #ff9ec9 0%, #9be7ff 100%) !important;
  color: #ffffff !important;
  font-weight: 800;
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(155,231,255,0.25);
  transition: transform .45s ease, box-shadow .45s ease, opacity .5s ease;
  opacity: 1 !important;
}

/* subtle pulse while revealed */
@keyframes grws-reveal-pulse {
  0% { box-shadow: 0 6px 18px rgba(155,231,255,0.22); transform: scale(1.03); }
  50% { box-shadow: 0 12px 30px rgba(255,158,201,0.20); transform: scale(1.06); }
  100% { box-shadow: 0 6px 18px rgba(155,231,255,0.22); transform: scale(1.03); }
}
.grws-cell.reveal.pulse {
  animation: grws-reveal-pulse 1.8s ease-in-out infinite;
}

/* reveal look for the word list */
.grws-word.reveal-word {
  background: linear-gradient(90deg, #ff9ec9 0%, #9be7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
}

/* small delay/fade helper if you choose to hide later */
.grws-cell.revealed-fade {
  transition: opacity 0.7s ease;
  opacity: 0.35 !important;
}

@media (max-width: 500px) {
  #grws-result-message { font-size: 1.6rem; }
  #grws-gender-reveal { font-size: 1.4rem; }
  #grws-play-again { padding: 10px 22px; font-size: 0.95rem; }
  .share-btn { padding: 8px 14px; font-size: 0.85rem; }
}