/* Porcelain tiles seated in a dark teal tray. Dimensions stay unchanged. */
.stage-wrap { background: linear-gradient(145deg,#42625d,#233f3b); border: 1px solid #19332f; box-shadow: inset 0 2px #8ca79a, inset 0 -4px #172e2b, 0 12px 25px #263d352b; }
.board { background: #79908a; border-color: #1c3733; }
.cell { background: linear-gradient(145deg,#fff6dc,#e6d2a8); border-radius: 4px; box-shadow: inset 0 2px #fffaf0, inset 2px 0 #fff5d7, inset 0 -4px #b39a70, 0 1px 2px #102f2b66; }
.cell:hover:not(.open):not(.flag) { background: #fff9e9; outline: 2px solid #d3a655; outline-offset: -2px; }
.cell.open { background: #dce7e0; border-radius: 2px; box-shadow: inset 0 1px 3px #23443a25; }
.cell.open:not([class*=' n']):not(.mine)::before { content:''; width:3px; height:3px; border-radius:50%; background:#7e9e923b; }
.cell.flag::after { content:''; width:23px; height:25px; background:center/contain no-repeat url('flag.svg'); }
.cell.mine, .cell.mine.boom { background:#e8ada0; }
.cell.mine::after, .cell.wrong-flag::after { content:''; width:24px; height:24px; background:center/contain no-repeat url('mine.svg'); }
.cell.mine.boom { box-shadow:inset 0 0 0 3px #b34634; }
.cell.n1 { color:#245d9a; } .cell.n2 { color:#236241; } .cell.n3 { color:#ad392f; } .cell.n4 { color:#66408b; }
.overlay { background: #fffaf0f5; border: 1px solid #baa276; box-shadow: 0 5px 20px #17332a33; }