body { background: #f3f5fa; }
.game-board { width: min(100%, 31rem, 64vh); width: var(--sweeple-board-size); height: var(--sweeple-board-size); max-width: none; max-height: none; aspect-ratio: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: clamp(.26rem, 1vw, .46rem); place-self: center; flex: none; touch-action: manipulation; }
.cell { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: clamp(.5rem, 1.8vw, .78rem); background: linear-gradient(145deg, #8cc2ed, #6ea9df); box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -4px 8px rgba(45,112,177,.16), 0 3px 8px rgba(74,117,164,.13); color: #fff; font-size: clamp(1rem, 5vw, 1.7rem); font-weight: 850; cursor: pointer; transition: filter .15s ease, transform .15s ease, background .18s ease, box-shadow .18s ease; }
.cell:hover { filter: brightness(1.04) saturate(1.05); transform: translateY(-1px); }
.cell:active { transform: scale(.88); }
.cell.revealed { background: linear-gradient(145deg, #e8f1fb, #d6e5f5); box-shadow: inset 0 1px 2px rgba(255,255,255,.8), inset 0 -3px 7px rgba(84,125,168,.08), 0 2px 6px rgba(74,117,164,.1); }
.cell.just-revealed { animation: cell-reveal .24s cubic-bezier(.2,.8,.2,1); }
.cell.mine { background: linear-gradient(145deg, #ff8f97, #ef616d); color: #8b1722; }
.cell.flagged { color: #fff; font-size: clamp(1.1rem, 5.2vw, 1.8rem); text-shadow: 0 1px 3px rgba(24,72,119,.25); }
.cell[data-number="1"] { color: #2667d4; }.cell[data-number="2"] { color: #20ad68; }.cell[data-number="3"] { color: #ed4046; }.cell[data-number="4"] { color: #913ab8; }.cell[data-number="5"] { color: #b12750; }
@keyframes cell-reveal { 45% { transform: scale(.78) rotate(-2deg); } }