.mines{display:grid;gap:10px;justify-items:center;--cs: 32px}.mines-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;width:100%}.mines-modebar button{min-width:84px;min-height:40px}.mines-info{font-size:.9rem;color:var(--muted);min-height:1.4em;text-align:center}.mines-scroll{max-width:100%;overflow:auto;padding:2px;-webkit-overflow-scrolling:touch}.mines-board{display:grid;grid-template-columns:repeat(var(--cols),var(--cs));grid-auto-rows:var(--cs);gap:2px;padding:6px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);touch-action:manipulation;width:max-content}.mines-cell{border-radius:calc(var(--cs) * .22);display:grid;place-items:center;cursor:pointer;font-weight:800;font-size:calc(var(--cs) * .56);line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 34%,var(--cell)),color-mix(in srgb,var(--accent) 52%,var(--cell)));box-shadow:inset 0 -2px color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent-text);transition:background .12s,transform .06s}.mines-cell:not(.open):hover{filter:brightness(1.08)}.mines-cell:not(.open):active,.mines-cell.press{transform:scale(.92)}.mines-cell.open{background:var(--cell);box-shadow:none;cursor:default}.mines-cell.open.n1,.mines-cell.open.n2,.mines-cell.open.n3,.mines-cell.open.n4,.mines-cell.open.n5,.mines-cell.open.n6,.mines-cell.open.n7,.mines-cell.open.n8{cursor:pointer}.mines-cell.n1{color:color-mix(in srgb,#2563eb 75%,var(--text))}.mines-cell.n2{color:color-mix(in srgb,#15803d 75%,var(--text))}.mines-cell.n3{color:color-mix(in srgb,#dc2626 80%,var(--text))}.mines-cell.n4{color:color-mix(in srgb,#7c3aed 75%,var(--text))}.mines-cell.n5{color:color-mix(in srgb,#b45309 75%,var(--text))}.mines-cell.n6{color:color-mix(in srgb,#0e7490 75%,var(--text))}.mines-cell.n7{color:color-mix(in srgb,#be185d 75%,var(--text))}.mines-cell.n8{color:var(--muted)}.mines-cell.flag{color:var(--p1);background:color-mix(in srgb,var(--p1) 16%,var(--cell));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--p1) 45%,transparent);font-size:calc(var(--cs) * .6)}.mines-cell.flag.wrong{text-decoration:line-through;opacity:.6}.mines-cell.mine{background:color-mix(in srgb,var(--text) 12%,var(--cell));position:relative}.mines-cell.mine:after{content:"";width:46%;height:46%;border-radius:50%;background:radial-gradient(circle at 35% 35%,color-mix(in srgb,var(--text) 40%,var(--cell)) 0 18%,var(--text) 24%);box-shadow:0 0 0 calc(var(--cs) * .06) color-mix(in srgb,var(--text) 25%,transparent)}.mines-cell.boom{background:var(--danger)}.mines-cell.reveal{opacity:.85}.mines-cell.cursor{outline:3px solid var(--focus);outline-offset:-1px}.mines-cell.start{box-shadow:inset 0 0 0 2px var(--accent)}.mines-flagging .mines-cell:not(.open):not(.flag){background:linear-gradient(160deg,color-mix(in srgb,var(--p1) 22%,var(--cell)),color-mix(in srgb,var(--p1) 36%,var(--cell)))}.mines-over .mines-cell{cursor:default}