/* ── Modal: win/lose overlay, cell validation ── */

.cell-validate{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,5vw,36px);font-weight:900;
  border-radius:4px;z-index:20;pointer-events:none;
  animation:validatePop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.cell-validate.valid{
  background:rgba(74,153,105,0.8);color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,0.3);
  box-shadow:inset 0 0 16px rgba(74,153,105,0.5),0 0 8px rgba(74,153,105,0.3);
}
.cell-validate.invalid{
  background:rgba(212,68,68,0.8);color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,0.3);
  box-shadow:inset 0 0 16px rgba(212,68,68,0.5),0 0 8px rgba(212,68,68,0.3);
}
.cell-validate.correct-hint{
  background:rgba(74,153,105,0.25);color:#4a9;
  font-family:'Playfair Display',serif;
  border:2px dashed rgba(74,153,105,0.6);
  animation:validatePop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes validatePop{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}

.modal-bg{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.75);z-index:100;
  align-items:center;justify-content:center;padding:12px;
}
.modal-bg.show{display:flex}
.modal-box{
  background:#fff;border-radius:20px;padding:36px;max-width:440px;
  text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);
  border:4px solid;
}
.modal-box.win{border-color:#4a9}
.modal-box.lose{border-color:#d44}
.modal-box h2{
  font-family:'Playfair Display',serif;font-size:24px;margin-bottom:12px;
}
.modal-box.win h2{color:#4a9}
.modal-box.lose h2{color:#d44}
.modal-box .reveal-name{
  font-family:'Caveat',cursive;font-size:32px;color:#d44;
  display:block;margin:8px 0 16px;
}
.modal-box p{font-size:13px;color:#888;line-height:1.8}
.modal-box .stats{font-size:11px;color:#aaa;margin-top:12px}
.modal-btns{display:flex;gap:10px;justify-content:center;margin-top:20px}
.modal-btns .btn{font-size:13px;padding:10px 22px}