body {
  font-family: Arial, sans-serif;
}
table{
    border-collapse: collapse;
}
.container{
    display:flex;
}
.container div{
    flex:1;
}
.center{
    justify-content:center;
    align-items: center;
}
.cell {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
}
.cell::placeholder {
  color: #999999;       /* placeholder text */
  font-weight: normal;
}

.empty {
  border: 1px solid white;
}

#winOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 999;
}

#winOverlay.active {
    opacity: 1;
    pointer-events: all;
}

#winBox {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    animation: pop 0.5s ease;
}

#winBox h1 {
    margin-top: 0;
}

#winBox button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: #4CAF50;
    color: white;
}

@keyframes pop {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.confetti {
    position: fixed;
    top: -10px;
    width: 8px;
    height: 8px;
    background: red;
    animation: fall linear forwards;
}

@keyframes fall {
    to {
        transform: translateY(110vh) rotate(720deg);
    }
}
/* Tooltip for clue number */
.tooltip {
  position: relative;
}

.tooltiptext {
  font-size:8pt;
  visibility: visible;
  width: 20px;
  background-color: gray;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: gray transparent transparent transparent;
}
/* Overlay for clue numbers */
.clue-cell {
  position: relative;
  width: 25px;
  height: 25px;
}

.clue-number {
  position: absolute;
  top: -4px;
  left: 3px;
  font-size: 8px;
  pointer-events: none; /* prevents blocking typing */
}