/* ------------- global & layout ---------------- */
*, *::before, *::after { box-sizing:border-box;}
html, body{margin:0;padding:0;height:100%;background:#fafafa;}

body{
    display:flex;flex-direction:column;
    align-items:center;gap:.5rem;
}
h1{margin:.5rem 0 .25rem;}

#scoreboard{font-weight:bold;margin-bottom:.75rem;}
#scoreboard span{margin:0 .25rem;}

/* ----------------- board grid ------------------- */
.grid{
    display:grid;
    gap:2px;
    width:min(90vmin,400px);
    aspect-ratio:1/1;             /* keep the whole board a perfect square */
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
}
.cell{
    background:#e9ecef;
    cursor:pointer;
    position:relative;

    /* NEW – force a perfect square */
    aspect-ratio:1/1;
}

/* ----- SVG inside the cell ----- */
.cell svg{
    width:100%; height:100%;
    display:block;          /* stop baseline padding  */
}

/* Hover highlight – only enabled when empty via .hoverable class */
.hoverable::after{
    content:"";
    inset:0;
    position:absolute;
    background:rgba(0,0,0,.05);  /* subtle darkening on hover */
}

/* ----------------- status & buttons -------------- */
#message{margin-top:.75rem;font-size:1.4em;color:#28a745;min-height:1.2em;}
#startBtn,#resetBtn{
    border:none;padding:.5rem .9rem;
    background:#6c757d;color:white;border-radius:5px;
    cursor:pointer;margin-right:.3rem;
}
#startBtn:hover,#resetBtn:hover{background:#5a6268;}