/* Buscaminas: todo el dibujo (numeros, minas, bandera, digitos LED y caras) sale de UNA hoja de sprites: img/mines/sprite.png (143x113).
   Celdas 16x16 (fila 0: numeros 1-8; fila 1: tapada, vacia, mina, bandera, mina tachada, mina roja, ?, ? apretada),
   digitos LED 13x23 (y=32; 0-9 y "-"), caras 26x26 (y=55; normal, apretada, "ooh", muerta, canchera).
   --z = zoom entero (1 en PC; 2 en pantallas tactiles, para que las celdas se puedan tocar). Todo con prefijo .ms98. */
.ms98 { --z: 1; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
@media (pointer: coarse) { .ms98 { --z: 2; } }
@media (pointer: coarse) and (max-width: 359px) { .ms98 { --z: 1.5; } }
.ms98__sp { display: block; background-image: url(../img/mines/sprite.png); background-repeat: no-repeat; image-rendering: pixelated; background-size: calc(143px * var(--z)) calc(113px * var(--z)); }
.ms98__status { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; padding: 4px 5px; border-top: 2px solid #7b7b7b; border-left: 2px solid #7b7b7b; border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
.ms98__led { display: flex; flex: none; }
.ms98__led i { width: calc(13px * var(--z)); height: calc(23px * var(--z)); background-position: calc(var(--d, 0) * -13px * var(--z)) calc(-32px * var(--z)); }
.ms98__reset { width: calc(26px * var(--z)); height: calc(26px * var(--z)); padding: 0; border: 0; background-color: transparent; background-position: calc(var(--f, 0) * -26px * var(--z)) calc(-55px * var(--z)); cursor: pointer; }
.ms98__reset:active { --f: 1; }
.ms98__board { border-collapse: separate; border-spacing: 0; table-layout: fixed; box-sizing: content-box; margin: 0; background: #c0c0c0; border-top: 3px solid #7b7b7b; border-left: 3px solid #7b7b7b; border-right: 3px solid #fff; border-bottom: 3px solid #fff; }
.ms98__board td { width: calc(16px * var(--z)); height: calc(16px * var(--z)); padding: 0; border: 0; box-sizing: border-box; background-image: url(../img/mines/sprite.png); background-repeat: no-repeat; image-rendering: pixelated; background-size: calc(143px * var(--z)) calc(113px * var(--z)); background-position: calc(var(--x, 0) * -16px * var(--z)) calc(var(--y, 1) * -16px * var(--z)); }
#w-mines { max-width: 100%; }
/* La ventana mide lo que el tablero: el texto de ayuda de la barra de estado no la ensancha, se parte en renglones */
#w-mines > .status-bar { display: block; width: 0; min-width: 100%; box-sizing: border-box; white-space: normal; line-height: 1.25; }
#w-mines > .status-bar .status-bar__field { display: block; white-space: normal; }
#w-mines .ms98 { display: block; margin: 4px auto 2px; width: max-content; }  /* centrado: la barra de título es más ancha que el tablero */
.ms98__status { box-sizing: border-box; }

/* nivel Intermedio (16x16, 40 minas): menu Juego de minesweeper.js. En pantallas tactiles el zoom baja a 1.5 / 1.25 para que el tablero entre en el celular */
@media (pointer: coarse) { .ms98.ms98--mid { --z: 1.5; } }
@media (pointer: coarse) and (max-width: 420px) { .ms98.ms98--mid { --z: 1.25; } }
#w-mines .menu-bar span { cursor: default; }
#w-mines .menu-bar span.is-open { background: #000080; color: #fff; }
.ms98__menu .w98menu__i { position: relative; }
.ms98__ck { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 11px; }
.ms98__k { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }