/* GRID STYLES */
.grid-board { margin-top:15px; }

.top-row { display:flex; }
.corner { width:60px; }

.top-numbers {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  flex:1;
  gap:4px;
}

.grid-body { display:flex; margin-top:5px; }

.left-numbers {
  display:grid;
  grid-template-rows:repeat(5,1fr);
  width:60px;
  gap:4px;
}

.left-double {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}

.num-box {
  background:#fff;
  border:2px solid #111;
  text-align:center;
  padding:6px 0;
  font-weight:700;
  border-radius:4px;
}

.squares {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(5,1fr);
  gap:4px;
  flex:1;
}

.square {
  background:#fff;
  border:1px solid #999;
  height:45px;
  border-radius:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

.square .box-num {
  font-size:10px;
  opacity:.6;
  font-weight:600;
}
/* Filled/selected boxes */
.square.filled {
  background-color: #c40000;
    color: #ffd700;
    font-weight: 700;

    /* NEW: visual pop */
    border: 2px solid #ffd700;
    box-shadow:
        0 0 6px rgba(255, 215, 0, 0.7),
        0 0 12px rgba(255, 215, 0, 0.4),
        inset 0 0 6px rgba(0,0,0,0.4);
}

/* Optional hover */
.square.filled:hover {
  background-color: #a30000;

   /* stronger glow on hover */
   box-shadow:
       0 0 10px rgba(255, 215, 0, 0.9),
       0 0 18px rgba(255, 215, 0, 0.6),
       inset 0 0 6px rgba(0,0,0,0.5);

   transform: scale(1.05);
   transition: all 0.15s ease-in-out;
}
/*smooth default transition*/
.square {
    transition: all 0.15s ease-in-out;
}
/* LIMIT GRID WIDTH */
.grid-board {
  max-width: 475px;
  margin-left: 12px;
  /*margin: 15px auto; /* centers it */
  width: 100%;
}
/* Grid header cells */
.top-numbers .num-box, .left-numbers .num-box{
    background-color: #000;
    color: #fff;
    font-weight: 700;
}