/* Safe Squares: grassy closed tiles, sandy opened tiles. */
.sq-board { display: grid; grid-template-columns: repeat(var(--w), 1fr); gap: 3px; width: min(100%, 470px); margin: 6px auto 0; padding: 10px; border-radius: 22px; background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sq-cell { aspect-ratio: 1; padding: 0; border: 0; border-radius: 7px; background: linear-gradient(160deg, #9BE08E, #4FAE4A); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); font: 800 clamp(13px, 3.8vw, 20px) var(--display); cursor: pointer; color: #1E2A44; }
.sq-cell:hover:not(.open) { filter: brightness(1.06); }
.sq-cell.open { background: #F4EBD6; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); cursor: default; }
:root[data-theme="dark"] .sq-cell.open { background: #2B3550; }
:root[data-theme="dark"] .sq-cell { background: linear-gradient(160deg, #4E9B48, #2F6E2C); }
.sq-cell[data-n="1"] { color: #2D5BD0; } .sq-cell[data-n="2"] { color: #1B8A5E; } .sq-cell[data-n="3"] { color: #D43C3C; }
.sq-cell[data-n="4"] { color: #6B3FC4; } .sq-cell[data-n="5"] { color: #B4561E; } .sq-cell[data-n="6"] { color: #0F7C86; }
.sq-cell[data-n="7"], .sq-cell[data-n="8"] { color: #333; }
:root[data-theme="dark"] .sq-cell[data-n="1"] { color: #8FB4FF; } :root[data-theme="dark"] .sq-cell[data-n="2"] { color: #7FE0B0; } :root[data-theme="dark"] .sq-cell[data-n="3"] { color: #FF9C9C; }
:root[data-theme="dark"] .sq-cell[data-n="4"] { color: #C9A7FF; } :root[data-theme="dark"] .sq-cell[data-n="5"] { color: #FFB877; }
.sq-cell.flag { font-size: clamp(11px, 3vw, 17px); }
.sq-cell.boom, .sq-cell.show { background: linear-gradient(160deg, #FF9C9C, #D43C3C); color: #fff; }
.sq-cell.show { opacity: .7; }
.sq-cell.found { background: linear-gradient(160deg, #FFE38F, #E0A100); }
.sq-cell.shake { animation: sq-shake .35s; }
@keyframes sq-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.sq-tools { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
#sq-again { display: block; margin: 8px auto 0; }
@media (prefers-reduced-motion: reduce) { .sq-cell.shake { animation: none; } }